pontifÍcia universidade catÓlica de goiÁs ecec-escola de ... · pontifÍcia universidade...

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




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




Parte 2

Detalhamentos do funcionamento

Passo 1




Passo 2

Passo 3




Passo 4

Passo 5




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.




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:




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.




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:




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




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.




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/




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:




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:




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:




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:




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:




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.




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:




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:




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:




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.




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.




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:




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.




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:




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




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.




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:




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.




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:




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.




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?




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.

pontifÍcia universidade catÓlica de goiÁs ecec-escola de ... · pontifÍcia universidade...

Documents