Script do Lado do Cliente
Uma das funcionalidades avançadas do uniGUI é a capacidade de escrever manipuladores em JavaScript para eventos do lado do cliente — ou seja, adicionar código JS para eventos Ext JS de controles do uniGUI. Ext JS é um framework JavaScript completo com um conjunto rico de componentes. Ext JS possui sua própria hierarquia de objetos; assim como objetos Delphi, cada componente Ext JS deriva de um objeto pai.
Algumas observações:
JavaScript suporta padrões que permitem hierarquias de objetos e comportamento semelhante à herança, mas a visibilidade de membros difere do Object Pascal: as chamadas propriedades e métodos privados ainda podem ser visíveis em classes filhas e acessíveis a partir de instâncias de objetos.
Requisitos para scripts do lado do cliente no uniGUI:
Conhecimento razoável de JavaScript (sintaxe similar a C/Java).
Familiaridade com a API da biblioteca Sencha Ext JS.
Você ainda pode escrever código do lado do cliente com conhecimento mínimo de JS/Ext JS para tarefas simples.
Abaixo está um fluxo de trabalho simples mostrando como adicionar um manipulador de evento do lado do cliente a um TUniButton.
Abra ExtEvents no Object Inspector
No Object Inspector, selecione a ClientEvents propriedade, então dê um duplo clique na ExtEvents subpropriedade para abrir o editor de eventos JavaScript do uniGUI.
O editor de eventos JavaScript do uniGUI lista os eventos Ext JS disponíveis para o controle.
Escolha um evento Ext JS e adicione seu manipulador
No editor de eventos, no lado esquerdo você verá todos os eventos Ext JS disponíveis associados ao TUniButton. O canto superior esquerdo exibirá Ext.button.Button — o componente Ext JS usado pelo TUniButton. Dê duplo clique em um evento (por exemplo, click) para abrir um manipulador de evento e começar a digitar seu código JavaScript personalizado.
Acesse o controle uniGUI a partir do código do lado do cliente
Para acessar um objeto uniGUI no cliente, use o nome do owner e o nome do objeto na forma .. Os nomes devem corresponder exatamente aos identificadores declarados no Delphi (sensíveis a maiúsculas/minúsculas). Por exemplo, um botão chamado UniButton1 owned by MainForm é acessado como:MainForm.UniButton1Uma vez que você tenha a referência do lado do cliente, pode chamar quaisquer métodos Ext JS disponíveis para o componente Ext correspondente. Embora UniButton1 seja uma instância TUniButton do lado do servidor, MainForm.UniButton1 seja uma instância do lado do cliente do Ext.button.Button component.Exemplo: alterar a legenda do botão em tempo de execuçãoO Ext.button.Button class expõe métodos como setText() para alterar a legenda do botão em tempo de execução. Use o método a partir do seu manipulador do lado do cliente. Por exemplo, chamando:MainForm.UniButton1.setText('New Caption');atualizará o texto do botão. Note que JavaScript é sensível a maiúsculas/minúsculas e os nomes dos controles devem corresponder exatamente a como foram declarados no Delphi.Execute a aplicação e testeExecute a aplicação e clique no botão para ver o manipulador do lado do cliente em ação.