Alguma vez quis enriquecer a sua interface de utilizador com widgets conhecidos dos sítios Web, como um mapa de navegação? Não aprendendo JavaScript e lidando com CSS e HTML e lutando para passar dados entre esses dois mundos?
Uma nova integração entre Web Areas e 4D Qodly Pro permite entregar interfaces ricas e dinâmicas dentro de seus formulários 4D enquanto mantém toda sua lógica de negócios dentro de 4D Server.
Um exemplo real: Detalhes de armazém em uma interface fluida
Os usuários querem aplicações desktop que parecem nativas mas evoluem tão rápido quanto a web. Com 4D 21, isso não é mais uma troca. Uma nova integração entre Web Areas e 4D Qodly Pro permite entregar interfaces ricas e dinâmicas dentro de seus formulários 4D enquanto mantém toda sua lógica de negócios dentro do servidor 4D.
O resultado é uma experiência híbrida unificada onde os dados fluem instantaneamente, atualizações UI parecem naturais, e seu fluxo de trabalho de desenvolvimento permanece simples. Isso é um híbrido feito corretamente.
Configuração de Área Web para uma Experiência Conectada
Imagine uma caixa de listagem 4D na parte esquerda do ecrã, enquanto que na direita mostra numa área Web detalhes do item selecionado, incluindo localização no mapa e controlos de classificação.
Selecione um armazém diferente e os detalhes são actualizados instantaneamente sem necessidade de recarregar a página. Os utilizadores sentem que estão a navegar num painel nativo, não numa vista web. Esta é a flexibilidade de 4D Qodly Pro emparelhada com a fiabilidade de 4D.
CONFIGURAÇÃO FÁCIL
Para permitir essa interação perfeita, a Web Area é configurada com duas propriedades simples: Usar motor de renderização web incorporado e Acessar métodos 4D. Essas configurações dão à página Qodly incorporada acesso total a seus dados e lógica de servidor.
A partir daí, o evento “On Load” da Web Area inicializa a página, anexa a sessão correta e passa um contexto que expõe os seus métodos de classe de dados.
Espera, que sessão e porque é que preciso de um contexto?
Enquanto a página 4D Qodly é carregada nesse caso dentro de uma área web da aplicação 4D, ela também pode ser executada diretamente de um navegador. Portanto, precisamos priorizar a segurança. E ela fala diretamente com o Servidor 4D, então o servidor precisa saber a qual sessão de cliente ela pertence. Finalmente, podemos compartilhar um contexto entre o desktop 4D e a página Qodly, permitindo-nos compartilhar dados. Similar a como usamos um contexto para compartilhar dados entre 4D e 4D Write Pro.
Se sua aplicação roda localmente ou em modo cliente-servidor, a página Qodly deve operar dentro da sessão 4D correta. Isso fornece chamadas de método seguras e garante que os dados permaneçam consistentes.
Aqui está a configuração exata usada na demonstração:
var $otp : Text
var $url : Text
var $context : Variant
Case of
: (Form event code=On Load)
authentify("viewDetails")
$otp := getOtp
$url := "http://localhost/$lib/renderer/?w=warehouses&$4DSID="+ $otp
WA OPEN URL(warehouseDetails; $url)
$context:=ds.WareHouse
WA SET CONTEXT(warehouseDetails; $context)
End case o authentify é um método de projeto que precisa ter a propriedade “executar no servidor” marcada para ter acesso ao objeto Session
#DECLARE($privilege : Text)
Session.clearPrivileges()
Session.setPrivileges($privilege)e o mesmo se aplica a getOTP
#DECLARE() : Text
return Session.createOTP(60)viewDetails é uma permissão configurada no Qodly Studio da seguinte forma:
onde podemos ler a entidade Warehouse e executar em Warehouse.getWarehouseById para obter a entidade correspondente quando o ID muda, para recuperar A lógica é simples. Session.setPrivileges garante que o utilizador tem os direitos necessários.
getOTP() emite um token único que vincula a Web Area à sessão 4D atual.
A URL inclui o token $4DSID para que a página Qodly seja executada dentro dessa sessão.
Finalmente, WA SET CONTEXT dá à página acesso à sua classe de dados Warehouse, incluindo métodos como GetWarehouseById e Rate.
Isso cria uma conexão limpa e segura entre Qodly e sua camada de dados.
Actualizações instantâneas da interface do utilizador a partir da caixa de listagem 4D
no método de objeto da Listbox que temos:
var $result : Variant
Case of
: (Form event code=On Load)
LISTBOX SELECT ROW(*; "warehouseList"; 1)
: (Form event code=On Clicked)
: (Form event code=On Selection Change)
WA EXECUTE JAVASCRIPT FUNCTION(*; "warehouseDetails"; "Qodly.setSource"; $result; "warehouseId"; Form.WareHouse.ID)
End case A caixa de listagem completa o fluxo de trabalho. Quando o usuário seleciona um depósito, 4D chama WA EXECUTE JAVASCRIPT FUNCTION para acionar Qodly.setSource dentro da Web Area. O novo ID do armazém é passado e a página Qodly é atualizada instantaneamente.
O utilizador não vê um recarregamento da Web. Apenas vê os dados actualizados a aparecer no painel de detalhes.
Uma página Qodly moderna que dá vida aos dados
No Qodly Studio, a página de detalhes utiliza dois componentes personalizados. Um componente de mapa que mostra a localização exacta do armazém e um componente de classificação que permite aos utilizadores atualizar a classificação. Ambos os componentes estão ligados à fonte de entidade do armazém.
A página fica à espera de alterações na fonte warehouseId. Quando essa fonte é alterada, chama getWarehouseById para carregar a entidade correta e apresenta-a imediatamente.
Se o utilizador alterar a classificação, a componente Rating ativa o método Rate no contexto 4D. As actualizações são guardadas instantaneamente.
Este é o tipo de resposta que os utilizadores esperam de ferramentas modernas.
Porque é que as equipas adoram esta abordagem híbrida
Mantém o poder, a segurança e a estrutura de 4D no backend. Obtém a flexibilidade de design e a riqueza de componentes de 4D Qodly Pro no front end. E seus usuários recebem uma aplicação fluida e moderna que responde instantaneamente às suas ações.