pontifÍcia universidade catÓlica de goiÁs ecec-escola de ... · pontifÍcia universidade...
Post on 02-Feb-2021
2 Views
Preview:
TRANSCRIPT
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
FRAMEWORK ZK
INTRODUÇÃO
Foi explicado que, para desenvolver um projeto web no Eclipse, é necessário utilizar as seguintes ferramentas: Eclipse
versão JEE e Apache Tomcat. Este último é um software que permite executar aplicações no servidor web.
Assim, se você é um desenvolvedor web e necessita disponibilizar uma aplicação para ser acessada pela Internet, deve
instalar essa aplicação em um servidor na nuvem. Esse servidor deve ser configurado para que possa executar a sua
aplicação. Para isso, ou você configura o seu próprio servidor ou contrata uma empresa que ofereça um host com os
serviços adequados. Considerando que sua aplicação foi desenvolvida na plataforma Java, então o seu servidor deve
ser configurado com os seguintes softwares: JDK com versão compatível com a da sua aplicação; um software para
ser o servidor web (Apache Tomcat, Glassfish, Wildfly e outros) e gerenciadores de banco de dados (MySQL, MS
SQLServer, Oracle, PostgreSQL e outros). Portanto, o servidor deve, de preferência, possuir configurações
compatíveis ao do seu ambiente de desenvolvimento. Se desejar desenvolver em PHP, por exemplo, deve utilizar o
Apache como software de servidor web, pois ele permite executar comandos do PHP.
Existem empresas que oferecem servidores configurados com ambientes que atendem múltiplas plataformas (tanto
para Linux quanto para Windows) - oferecendo os recursos para diversas linguagens -, o que, evidentemente,
encarece os serviços.
Para os projetos que você irá desenvolver com o Framework ZK, será utilizado o ambiente que você configurou no
seu computador. Desta forma, o seu computador simulará um servidor na nuvem, acessando o seu banco de dados
local. Esse servidor, como explicado, possui o endereço localhost ou 127.0.0.1.
FRAMEWORK ZK
O Framework ZK possui mais de 1.5 milhões de downloads em todo o mundo. O seu site oficial é zkoss.org . É utilizado
por diversas empresas (https://www.zkoss.org/whyzk/WhosUsing). Ele oferece dezenas de componentes que
permitem facilitar o desenho da interface gráfica do usuário.
Para desenvolver uma aplicação com o framework ZK basta conhecer e programar com a linguagem Java. Quando
uma aplicação ZK é ativada, a sua página é processada no servidor. Este, por sua vez, gera a página HTML e a envia
para o terminal do cliente. Caso o cliente efetua alguma interação com a interface gráfica – informando alguns dados
e clicando em algum botão, por exemplo – se estabelecerá, resumidamente os seguintes passos:
01. O servidor da aplicação receberá a solicitação desejada;
02. Processará a solicitação, usando a linguagem Java;
03. Acessará dados do banco de dados, caso isso ocorrer;
04. Processará os dados necessários, conforme as regras de negócio;
05. Analisará esses dados e atualizará a página atual ou gerará uma nova página HMTL com novos dados;
06. Enviará a página HTML para o terminal do cliente.
As páginas HTML geradas já embutem as tag HTML, CSS e instruções Javascript. Assim, o desenvolvedor ZK não
necessita conhecer Javascript, HTML e CSS. Se conhecer será melhor ainda. Mas, para esse curso não se exige esse
conhecimento.
As páginas do ZK utilizam a marcação ZUML (ZK User Markup Language, Linguagem de Marcação do Usuário ZK), que
possui o padrão XML. Assim, o usuário programa em Java, mas vê sua aplicação executar páginas contendo Javascript
embutido, combinado com CSS e HTML gerado pelo framework.
Uma aplicação ZK é compatível com qualquer navegador Web:
https://www.zkoss.org/whyzk/WhosUsing
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
A figura anterior ilustra uma página desenvolvida com o Framework ZK (na parte direita) e destaca que essa página
possui um único código que é compatível com todos os principais navegadores do mercado sem a necessidade de se
conhecer HTML, CSS e Javascript.
ZK – ESTRUTURA DE FUNCIONAMENTO
Parte 1
Aplicação Java padrão Aplicação ZK
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Parte 2
Detalhamentos do funcionamento
Passo 1
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Passo 2
Passo 3
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Passo 4
Passo 5
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
ZK - FUNDAMENTOS
Inicialmente você deve criar uma pasta no seu computador para que seja o seu workspace de trabalho. Vamos
considerar o workspace ProjetosZK.
Em seguida, abra o Eclipse, referenciando esse workspace, como indicado a seguir;
Será apresentada, na primeira vez, uma tela semelhante à indicada:
Feche as abas existentes.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Será apresentado o ambiente de desenvolvimento do Eclipse, como ilustrado a seguir:
A área Project Explorer, lado esquerdo superior e abaixo do menu principal, é onde ficam os projetos. À direita está
a área de codificação e também de desenho das telas (quando esse recurso existir). Na parte inferior ficam as abas
do Console (mostra certos comandos executados), Servers ( ilustra execuções estabelecidas pelo servidor web, no
caso o Apache Tomcat).
Crie um projeto de nome ProjetoZK01, como ilustrado a seguir:
File / New / Other...
Será apresentada uma nova janela:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Selecione ZK Project e confirme em Next.
Essa nova janela apresenta os campos:
Nome do projeto (retângulo vermelho): informe o nome do projeto, não esquecendo que deve sempre iniciar com
letra maiúscula. Se existir mais de uma palavra, então a primeira letra de cada palavra (a partir da segunda palavra)
deve ser maiúscula (formato Camel Case).
Localização (Retângulo azul): pasta do workspace que você criou.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Versão do ZK(retângulo laranja): apresenta a versão atual do ZK, que você instalou.
Servidor web (retângulo preto): instalado por você (Apache Tomcat)
Versão do pacote web (retângulo roxo): Deve ser de 3.1 acima.
Confirme no botão Finish.
Nesse ponto, o projeto foi criado, como está indicado a seguir:
Observe a estrutura do projeto. As classes java devem ser armazenadas na pasta src. As páginas (com extensão .zul)
devem ser armazenadas na pasta WebContent. Note que essa pasta já possui dois arquivos .zul (index e timeout) que
foram criados durante a criação do projeto e seus conteúdos não serão utilizados pelos nossos futuros exemplos. A
pasta lib possui as bibliotecas necessárias para o funcionamento da aplicação. É nessa pasta que se copia os arquivos
com extensão .jar, como é o caso dos conectores de banco de dados.
Especificamente, a pasta lib possui alguns arquivos de bibliotecas, como está ilustrado a seguir:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Esses arquivos são necessários para o funcionamento de uma aplicação ZK.
Abra o arquivo index.zul. Para abri-lo, basta efetuar um duplo clique sobre o seu nome.
Note que esse arquivo possui apenas algumas linhas. Para melhor compreender cada linha, vamos enumerá-las. Para
isso, posicione o cursor do mouse na vertical cinza bem à esquerda do código e dê um duplo clique, como ilustrado:
Em seguida, selecione Show Line Numbers.
Note que agora as linhas ficaram enumeradas:
Clique nessa faixa
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Os arquivos .zul devem, preferencialmente, possuir o conteúdo semelhante a da linha 1, sendo que o conteúdo de
title é o que aparece na aba do navegador web. A linha 2 destaca a criação do componente window, sendo que esta
é uma tag que se inicia com e termina com , na linha 6. Todo componente se inicia com
e finaliza com . Apesar de terminar na linha 6, o componente
window tem um fechamento parcial na linha 2 com o caractere >. Mas, tudo que está entre e
pertence a esse componente. Assim, e indica que é o componente label. Esse componente é
utilizado para apresentar textos, sendo que o conteúdo desse componente é indicado na sua propriedade value.
Assim, você já conheceu dois componentes: window e label.
Considerando que você já instalou o software web server Apache Tomcat, execute a aplicação da seguinte forma:
Botão direito sobre o nome do projeto. Será apresentado um menu auxiliar, como ilustrado:
Selecione Run As. Em seguida, Run on Server. Essa opção é sempre utilizada quando a aplicação é para web. A outra
opção Java Application, é utilizada para projetos de console ou desktop.
Será apresentada a seguinte janela:
Ela destaca o nome do servidor para execução (retângulo vermelho). Caso o servidor não esteja configurado, adicione
um novo em Add...(retângulo preto). Se desejar configurar outro servidor, selecione a opção destacada em laranja.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Caso deseje que o servidor atual seja o padrão para o projeto, marque a opção destacada em verde. Neste caso, essa
janela não será apresentada novamente para esse projeto.
Confirme em Finish.
Será apresentada uma tela semelhante á indicada:
Note que na parte inferior é destacada a aba Console, que vai mostrando os comandos que são executados pelo
servidor. No lado direito inferior uma barra verde de progresso de preparação do projeto é apresentada. Note que o
círculo destaca um botão vermelho. Esse botão indica que a aplicação está sendo executada. Caso deseje
interrompê-la, basta clicar nesse botão vermelho.
A aplicação subiu, ou seja, está sendo executada. Observe a ilustração:
Note que o Eclipse executa a aplicação em um navegador web auxiliar. Observe a url da aplicação:
http://localhost:8080/ProjetoZK01/
Onde: http = protocolo web; localhost=seu servidor local; 8080=a porta que está sendo usada pelo Apache Tomcat;
ProjetoZK01 = nome da aplicação. A porta pode ser outra, dependendo das configurações no software web server.
Note que há destaque do título Auto Generated index.zul. Esse conteúdo foi o indicado no title da página index.zul,
como explicado anteriormente e como está indicado no código a seguir:
http://localhost:8080/ProjetoZK01/
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Acesse esse arquivo e altere o title para Exemplo 01, como ilustrado:
Salve a alteração com Ctrl+s.
Execute a aplicação novamente. Para isso, observe a figura:
Clique no botão em destaque para atualizar as modificações e observe a mudança do título da página no navegador,
como ilustrado:
Altere o texto Hello World!! para Olá Mundo!!, como indicado:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Atualize e execute. Note a mudança!
Você pode editar seu arquivo .zul e inserir novos componentes nele. Para fazer isso, deve-se utilizar a paleta de
componentes do ZK. Qualquer janela que você necessitar que apareça no ambiente, deve-se utilizar a opção Window
do menu. Da seguinte forma:
Ou seja: clique em Window. Selecione Show View. Aparecerá o segundo menu auxiliar com opções de janelas
padronizadas como Project Explorer (caso esta não esteja visível) e outras. Selecione Other...
Será apresentada a seguinte janela de diálogo:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que a pasta ZK está em destaque. Selecione a opção ZUL Palette. Neste caso, essa janela ficará visível no
ambiente, como ilustrado a seguir:
Note que há uma mensagem informando que essa aba só funciona com arquivos .zul selecionados no editor de código.
Quando você selecionar um arquivo .zul a paleta ficará habilitada.
Acesse o arquivo index.zul no editor de código. Observe o ambiente agora:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que a aba da paleta destaca os componentes, separados por grupos específicos. A figura seguinte destaca
melhor esses grupos:
Há o grupo dos elementos ZK, elementos básicos, de entrada de dados (input), container de componentes e diversos
outros.
Vamos aumentar um pouco mais a área de visualização da paleta como indicado a seguir:
Posicione o cursor na área indicada pelo retângulo de tal forma que o cursor fique sobre a linha inferior da barra azul.
Neste caso, o cursor muda o seu formato para duas setas verticais, como indicado:
Com o botão do mouse pressionado, movimente o cursor para cima, aumentando a área da paleta, como indicado:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Clique no grupo Basic para mostrar os componentes desta categoria.
Clique no símbolo do componente Button, como indicado:
Com o botão do mouse pressionado, movimente o cursor até à linha 5 da área de código, abaixo do componente
label, como indicado:
Solte o botão do mouse. O componente Button será transformado em código na linguagem ZUML, como ilustrado:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que a linha 5 recebeu a tag do componente Button. Altere a propriedade label de Button para OK, como ilustrado
a seguir:
Observe que no nome do arquivo index.zul tem um *, indicando que o mesmo foi alterado, mas não foi salvo. Salve
esse arquivo.
Atualize a aplicação no navegador.
Note que apareceu o botão na aplicação em execução, como ilustrado.
Vamos melhorar esse código. Observe:
Altere o código de index.zul para o indicado na figura anterior. Note que foi incluído o código na linha
5, entre o componente label e button. Salve esse arquivo. Atualize a aplicação no navegador. Note a diferença agora.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que o botão ficou uma linha abaixo da mensagem do label. Melhorou o visual, certo!
A tag força um salto de linha em tempo de execução.
Volte ao código, faça uma pequena mudança:
Observe que a propriedade width do componente window foi alterada de 200px para 300px. Essa propriedade
permite aumentar a largura da janela. No caso, de 200 pixels para 300 pixels. Salve o arquivo. Atualize a aplicação no
navegador. Observe a diferença.
Agora o conteúdo do label está todo na mesma linha, diferentemente da anterior. Compare.
Posicione o cursor do mouse logo antes da palavra label do componente button no arquivo index.zul. Em seguida,
pressione a combinação de teclas CTRL+ESPAÇO. Observe o que ocorre:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que o cursor foi posicionado antes da propriedade label do componente button. Mas, pode ser posicionado em
qualquer local que esteja com espaço antes do cursor como, por exemplo, logo após as aspas de onClick, como
indicado:
Note que essa combinação de teclas apresenta um atalho de propriedades relacionadas ao respectivo componente.
Essas propriedades são visualizadas em ordem alfabética. É um recurso que facilita na codificação do desenvolvedor
na criação do layout de tela.
Por exemplo, posicione o cursor no final das definições do componente window (se não possuir espaço crie um),
como indicado:
Pressione a tela h, como ilustrado:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Observe que o ambiente filtrou apenas os elementos que se iniciam com h. Selecione a primeira propriedade (height)
e informe height=”200px”, como ilustrado:
Essa propriedade informa a altura da janela em pixels.
Em seguida, selecione a propriedade closeable=”true”, como indicado:
Salve a aplicação e atualize-a no navegador web. Observe o que ocorre:
Surgiu o X para fechar a janela, em tempo de execução. Se você clicar no X, a janela será fechada.
Insira mais duas propriedades no componente window: maximizable=”true” e sizable=”true”.
A primeira permite visualizar um botão para maximizar a janela e a segunda permite ao usuário redimensionar a
janela.
Observe:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Salve e atualize a aplicação. Observe a aplicação em execução.
Surgiu o botão de maximizar. Depois, tente redimensionar a janela com o mouse.
Detalhes da paleta de componentes:
A figura anterior destaca dois detalhes da paleta. O primeiro é o indicado pelo navegador vertical quando uma aba
de componentes possuir vários componentes e estes não são todos visualizados. Esse navegador vertical permite o
deslocamento dos elementos pela aba ativa (destaque indicado pelas setas e retângulo verde). O outro detalhe é o
de permitir a busca de componentes por um nome. No exemplo, mais à direita, digitou-se box. Neste caso, foram
visualizados apenas os componentes que possuem essa palavra em seu nome.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
VALIDAÇÃO DE DADOS NA PÁGINA .ZUL
O Framework ZK oferece recursos simples para se validar a entrada de dados na própria página, sem a necessidade
de codificação via Javascript. Insira um componente Label e um Textbox na área de código. O componente Label fica
no grupo Basic da paleta de componentes e o componente Textbox fica no grupo Input. Insira-os antes do botão,
conforme indicado a seguir:
Note as tags dos componentes label e textbox. O textbox é uma caixa de texto para entrada de dados e possui a
propriedade value com o valor vazio. Se essa propriedade possuir um conteúdo, este será mostrado na caixa de texto,
que não é uma boa prática, pois o usuário é que deve informar esse conteúdo.
Observe que textbox possui a propriedade constraint=”no empty”. Esse tipo de validação só será executado quando
o usuário sair do campo, ou seja, quando pressionar a tecla TAB. Quando isso ocorrer, será apresentada uma
mensagem informando que o campo não pode ser vazio. Isso ocorre porque a propriedade constraint possui o
conteúdo no empty, que significa “não pode ficar vazio”.
Ao executar a aplicação, a tela será visualizada de maneira semelhante á ilustrada a seguir:
Note que o título Nome é o conteúdo do label antes da caixa de texto (textbox).
Para analisar o que ocorre com a validação, clique dentro da caixa de texto e, em seguida, pressione a tecla TAB. Será
apresentada uma mensagem semelhante à indicada na próxima figura.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que o Framework ZK detectou que o conteúdo da caixa de texto (ou do textbox correspondente) estava vazio.
Neste caso, ele apresentou uma mensagem padronizada. Observe que essa mensagem está no idioma português,
pois o framework detecta automaticamente o idioma do local do cliente onde está sendo executada a aplicação. Se
esta aplicação estivesse sendo executada na Inglaterra, a mensagem estaria no idioma inglês e assim por diante.
Esse recurso demonstra o potencial existente no Framework ZK. Você não precisa codificar, apenas informa alguns
detalhes em um atributo de um componente e, em tempo de execução, o recurso se transforma em código
Javascript.
Mas, você pode padronizar essa mensagem, basta alterar o conteúdo de constraint como se segue:
Salve esse arquivo e atualize o navegador. Observe a mensagem que é apresentada quando o usuário pressiona a
tecla TAB na caixa de texto sem preenchê-la.
A mensagem agora está específica, conforme foi estabelecida no constraint do textbox.
Altere o arquivo index.zul conforme está estabelecido a seguir:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Observe que se inseriu um separator, um label e um intbox. O label recebeu o conteúdo idade, que será visualizado
na tela. O intbox é uma caixa de texto que permite apenas a entrada de números inteiros. A vantagem desse tipo de
entrada é que o desenvolvedor não necessitar utilizar Javascript para validar esse tipo de campo. Existem outros
componentes numéricos como doublebox e decimalbox. Note que esse intbox possui a propriedade id=”idade”. Essa
propriedade está disponível para todos os componentes.
Note que a propriedade height do componente window foi alterada de 200px para 300px para comportar as novas
linhas, com os novos componentes.
Salve o arquivo e atualize o navegador. Em tempo de execução, posicione o cursor na primeira caixa de texto e
pressione TAB. Em seguida, posicione o cursor dentro da segunda caixa de texto (no intbox) e pressione TAB. Observe
o que acontece.
O framework apresenta as duas mensagens de erro, sendo que o usuário poderá fechar cada uma no X
correspondente.
Informe um conteúdo qualquer para a primeira caixa de texto e posicione o cursor na segunda caixa de texto e informe
0 (zero). Em seguida, pressione TAB. Observe o que ocorre.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
A mensagem mudou, indicando que o zero não é permitido, pois a constraint possui no zero. Se for informado um
número negativo, a mesma mensagem será apresentada, indicando, portanto, que a validação está ocorrendo
conforme o especificado.
Melhorando o Visual
Vamos melhorar o visual de tal forma que fique mais apresentável. Vamos inserir um componente de tipo container.
Esse tipo de componente permite aglutinar diversos componentes dentro dele, oferecendo uma melhor organização
da distribuição dos componentes na interface gráfica.
Altere o código do arquivo index.zul conforme indicado a seguir:
Observe as mudanças realizadas:
Note que a largura passou a ter o conteúdo 50% em vez de ser em px (pixel). Isso permite que a altura da janela fique
50% do tamanho da página mostrada pelo navegador.
Inseriu-se o componente Grid. Esse componente está delimitado pelas tags e . Dentro dessa tag possui
as tags . Essa tag informa para o grid as colunas que serão criadas. No caso foram criadas duas colunas
(duas linhas com a tag ). Cada tag column pode ter um título que pode ser informado dentro da propriedade
label de cada tag . Neste caso estão vazias. Além da tag , a grid possui a tag rows, delimitada por
e . Essa delimitação permite a inserção das linhas com a tag row. Cada row é delimitada por e
.
Portanto, para janela window ficou estabelecido que a grid terá duas colunas (a tag possui duas tags
) e duas linhas (a tag possui duas tags ).
A primeira linha (row) será composta pela label nome e pelo textbox que recebe nomes. A segunda linha (row) é
constituída pela label idade e pelo intbox identificado com idade.
Após salvar esse arquivo e atualizar o navegador, a janela se apresentará como indicado:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que a primeira linha está distribuída com duas colunas (o label Nome e caixa de texto do textbox) e a segunda
linha está também distribuída em duas colunas (o label Idade e a caixa de texto do intbox). Há duas colunas pois ficou
estabelecido no grid que serão duas colunas (duas tag
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
A figura anterior destaca a mesma tela mais organizada, mas com uma mensagem de erro de validação.
Insira mais uma linha na grid com uma label na primeira coluna contendo o value “Sexo” e na segunda coluna dessa
nova linha com o componente Combobox, como ilustrado a seguir:
Note que a altura foi alterada para 50% para que comporte melhor os elementos dentro da janela.
Observe que foi inserida mais uma tag row, ou seja, mais uma linha para a interface do usuário, contendo um label
(Sexo) e o componente Combobox, com dois itens (comboitem) com os conteúdos Feminino e Masculino. Observe o
formato da nova janela:
Observe que o componente combobox apresenta uma lista de elementos para se escolher apenas um, como mostra
a próxima figura.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Vamos conhecer um pouco como funciona o combobox:
01.Atualize novamente o navegador, deixando sua aplicação como indicado:
Note que o combobox não apresenta nenhuma opção. Posicione o cursor dentro da caixa de texto do combobox e
digite m ou M. Observe o que ocorre:
A opção Masculino é visualizada, demonstrando que esse componente é sensível para visualizar um elemento que se
inicia com a letra informada. Para uma melhor compreensão, altere o código de index.zul para o indicado a seguir:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Altere o conteúdo de label para Frutas e insira outros itens, alterando os atuais como indicado no retângulo vermelho.
Salve o arquivo e atualize o navegador. Clique na seta da combobox no seu lado direito para que a lista de itens seja
visualizada, como ilustrado:
Em seguida, digite M.
Observe que a fruta Maçã foi selecionada na caixa de texto e fica em destaque na lista de itens. Digite Me.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Observe que, agora, a palavra Melancia foi selecionada e está em destaque na lista de itens.
Ressalta-se que quando a janela é aberta, nenhum item é visualizado na combobox. No entanto, há situações que a
visualização de um item da combobox se torna crucial. É o caso, por exemplo, quando se efetua a consulta de um
cadastro e os dados são apresentados na tela. Considerando, neste caso, que a pessoa possua o sexo como Feminino.
Assim, essa informação deve ser visualizada na combobox quando o cadastro for apresentado na janela. Porém, esse
procedimento só é possível via programação, o que será explicado posteriormente.
PROJETANDO UMA JANELA
O Framework ZK oferece diversos elementos que facilitam no design de uma tela de tal forma que se possa fornecer
uma visualização e usabilidade que melhoram a interação do usuário com a aplicação.
Consideremos um cadastro no qual necessite apresentar as seguintes informações: nome e telefone de uma pessoa
e que se possa selecionar uma opção de cargo como: Diretor, Gerente, Coordenador e Administrativo, sendo que
essas opções devem ficar em uma mesma linha.
Com o projeto ProjetoZK01 aberto no Eclipse, crie um arquivo .zul, como indicado:
Conforme ilustrado na figura anterior, posicione o cursor na pasta WebContent e clique com o botão direito. Será
apresentado um menu auxiliar. Selecione New. Em seguida, será apresentado o segundo menu auxiliar. Selecione a
opção ZUL.
Será apresentado uma janela de diálogo, semelhante á indicada a seguir:
Em File Name: informe cadastro.zul. Em Page title: informe Cadastro, como ilustrado:
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Confirme em Finish.
Atualize o código do arquivo cadastro.zul como ilustrado a seguir:
De acordo com a estrutura indicada anteriormente, há três tag row (para Nome, Telefone e Cargo), indicando que a
interface gráfica apresentará três linhas de dados. Note que da linha 18 até a 20 tem-se a linha (row) relacionada com
o dado cargo. Neste caso, utilizou-se o componente radiogroup (grupo de botões de rádio), que é um container que
permite aglutinar um ou vários componentes (ou itens) radio, onde cada item tem um label correspondente aos
cargos que foram citados anteriormente. Sendo que o último cargo (Administrativo) possui a propriedade selected
com o valor true, indicando que esse cargo ficará ativado (ou selecionado) quando a aplicação a tela de cadastro for
executada, informando que esse é um cargo padrão e, caso o usuário necessitar, poderá selecionar outro cargo da
lista.
Para executar esse arquivo deve-se acrescentar o seu nome na url, como ilustrado:
Faça isso e observe a estrutura da interface gráfica criada.
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Note que a opção Administrativo fica automaticamente selecionada devido à propriedade selected igual a true. O
componente RadioGroup distribui naturalmente as suas opções na horizontal. Caso deseje que elas fiquem na vertical,
será necessário adaptar com a tag . Essa tag, que significa vertical box, faz com os seus elementos fiquem na
vertical. Observe a devida alteração no código:
Observe a tag na linha 21 e sua finalização () na linha 26.
A nova forma da interface gráfica está ilustrada a seguir:
Note que as opções ficaram na vertical devido à tag . Caso se necessite forçar a distribuição horizontal de
elementos em uma linha basta utilizar o container com a tag , que é o horizontal box.
CONFIGURANDO PÁGINA INICIAL DA APLICAÇÃO
Quando uma aplicação ZK é executada, ela apresenta uma página inicial específica. É o caso da execução de
ProjetoZK01 que apresenta a página index.zul. Quando você estava executando só a página index.zul inicialmente,
você não informou na url o nome dessa página. Observe as duas figuras a seguir:
Figura A Figura B
A figura A destaca a url sem informar o nome da página (que, no caso, é a index.zul). A figura B ilustra a url com o
nome da página cadastro.zul. Isso nos informa que quando a aplicação for chamada para ser executada, ela,
automaticamente, ativa a página index.zul. Mas, como a aplicação sabe que esta será a página que deve ser executada
primeiro em vez da página cadastro.zul?
-
PONTIFÍCIA UNIVERSIDADE CATÓLICA DE GOIÁS
ECEC-Escola de Ciências Exatas e da Computação
CMP1119 – Desenvolvimento de Aplicações Cliente-Servidor
Esse procedimento é estabelecido em uma configuração que é realizada no arquivo web.xml. O conteúdo desse
arquivo é criado quando um projeto ZK é criado. Assim, o seu conteúdo é criado com um padrão. Esse arquivo fica
localizado na pasta lib que está dentro da pasta WebContent, como ilustrado na próxima figura:
O conteúdo padrão desse arquivo é o seguinte:
Não se preocupe com o conteúdo desse arquivo. Observe apenas o que está em destaque nos dois retângulos. O
retângulo vermelho destaca a tag . Essa tag apresenta os prováveis arquivos que serão ativados
pela aplicação quando esta for executada. Nessa lista está o arquivo index.zul. Assim, quando a aplicação for
executada, essa lista será avaliada. Se um dos arquivos da lista estiver presente na aplicação, então o arquivo será
executado, que é o caso de index.zul. É por isso que ele é executado pela aplicação sem que necessite informar seu
nome na url. Mas, o arquivo cadastro.zul deve ser informado para ser executado, visto que não pode estar nessa lista,
pois não deve ser executado quando a aplicação for ativada. Assim, essa lista deve ser alterada de tal forma que fique
com apenas um arquivo que deve ser executado quando a aplicação for ativada.
O correto, portanto, é apagar os demais arquivos dessa lista e deixar apenas o index.zul, caso esse seja o arquivo
principal da aplicação, o qual deve ser acionado quando a aplicação for ativada.
top related