Qodly Studio para 4D: Interfaces de utilizador dinâmicas com estados de página

Com 4D 20 R6, Qodly Studio for 4D introduziu uma nova e excitante funcionalidade: Page States. Talvez já se tenha deparado com o nosso post anterior, mas vamos explorar o que torna esta funcionalidade tão valiosa para UIs dinâmicas.

Imagine UIs que se adaptam instantaneamente a diferentes passos ou contextos do utilizador.

Aqui estão alguns casos de uso comuns em que os Page States brilham:

• Ativar ou desativar componentes com base nas acções do utilizador (por exemplo, ativar o botão “Guardar” apenas quando todos os campos obrigatórios estiverem preenchidos).
• Alternar entre os modos claro e escuro com uma simples alternância.
• Restringir o acesso a acções (ler, atualizar, etc.) com base nos privilégios do utilizador.

PIQS_States

Estados da página: Uma solução dinâmica para UIs interactivas

Mas o que é exatamente um Estado de Página? Um estado é definido pela forma como difere da página original da Qodly, conhecida como a página Base, permitindo-lhe tornar os elementos da IU condicionalmente visíveis ou aplicar estilos diferentes com base nas interações do utilizador. E tudo começa com a página Base, a disposição original da sua IU.

Existe uma nova secção Estados para tratar os estados.

Vamos começar com um exemplo simples.

Esta página Qodly tem uma caixa de estilo com um fundo transparente. É a página Base.

Se quiser apresentar ao utilizador uma variação da página Base, crie um novo estado, selecione-o na lista de Estados e desenhe-o.

Aqui, foi criado um estado Verde para ter um fundo verde em vez do fundo transparente da página Base.

Também foi criadoum estado Roxo com um fundo roxo em vez do fundo transparente oferecido pela página Base.

O objetivo é ativar ou desativar um estado de acordo com as situações encontradas durante a experiência do utilizador.

Numa página Qodly, pode criar tantos estados quantos forem necessários, de acordo com os casos de utilização que o utilizador final irá encontrar.

Podem ser activados vários estados ao mesmo tempo.

Como ativar ou desativar estados?

A ativação ou desativação de um estado pode ser feita de três formas:

1. Utilizando acções padrão
2. Através da vinculação de condições
3. A partir do código back-end no servidor

as acções padrão de estado

Graças às acções padrão, é possível ativar/desativar estados quando o utilizador interage com a página.

No exemplo abaixo, a IU propõe modos claro e escuro. O estado Claro trata o modo claro com um CSS lightMode

e o estado Escuro trata o modo escuro com um css darkMode

Abaixo está a página Base. Quando o utilizador clica no ícone de luz, o estado Claro é ativado e o estado Escuro é desativado.

(E a ação inversa é feita quando o utilizador clica no ícone escuro: o estado Escuro é ativado e o estado Claro é desativado)

Aqui está o resultado final.

estados condicionais

É aqui que a verdadeira magia acontece. Os estados podem ser associados a condições, permitindo que a IU responda a critérios específicos, como privilégios do utilizador ou valores de dados. O estado é ativado ou desativado dinamicamente de acordo com a avaliação da condição como VERDADEIRO ou FALSO.

Neste exemplo, a IU mostra uma lista de produtos e uma secção Detalhes do produto que eventualmente actualiza o nome do produto selecionado.

Foram criados dois estados:

• o estado ReadOnly
• o estado Atualizar

É fácil adivinhar: o estado Update é necessário quando o utilizador pode atualizar o produto selecionado, enquanto o estado ReadOnly é necessário quando o utilizador só pode ver os dados do produto.

Abaixo está o estado Atualizar. Na secção Detalhes do produto, o campo Nome está ativado e existe um botão Guardar.

E aqui está o estado ReadOnly. Na secção Detalhes do produto, existe apenas um campo Nome desativado.

Os estados ReadOnly e Update estão cada um ligado a uma condição. A capacidade de atualizar um produto depende do atributo atualizável do produto selecionado.

O estado ReadOnly é ativado se a condição theProduct.updatable = false. O estado Atualizar é ativado se a condição theProduct.updatable = true.

Aqui está o resultado final.

Graças ao editor de condiçõespoderoso e fácil de usar , pode criar condições aninhadas para lidar com a lógica comercial mais complexa!

Estas condições podem basear-se em critérios como valores de origemQodly , se a sessão tem ou não tem alguns privilégios e muito mais. Consulte a documentação para saber mais.

Gerir estados a partir do servidor

O último aspeto a ter em conta é que ativar/desativar estados a partir do código de back-end pode ser útil quando algumas regras comerciais só podem ser avaliadas no back-end.

Na demonstração em anexo, verá um exemplo disto. O utilizador seleciona produtos. Quando o montante total dos produtos selecionados é superior ou igual a 300 dólares, é ativado um estado que impede qualquer seleção de produtos.

Graças às funçõesWeb Form.enableState() e Web Form.disableState(), isso é feito.

Aqui está o código abaixo. O estado LimitReached desactiva qualquer seleção do utilizador.

	If ($tempSelection.sum("price")>=300)
		Web Form.enableState("LimitReached")
		Web Form.disableState("Initial")
	End if 

Aqui está o resultado final.

Quer ver isso em ação?

Transfira a demonstração Play In Qodly Studio em anexo para saber como utilizar os estados da página e como oferecer uma interface dinâmica aos seus utilizadores finais.