Zk estudio

Bom dia Meu Nome é hermes estou utilizando esta ferramenta zk estudio que na view index se apresenta conforme abaixo
primeiro: algum poderia me informar que tipo de fonte é esta exemplo de fonte que conheço css,html,jstl mas esta não conheço preciso saber para eu estudar ?

< zk >
< estilo >
. Hightlight {
color: # 1469AB;
font-weight: bold;
}
</ estilo >
< grade fixedLayout = “true” >
< colunas >
< coluna label = “Tipo” width = “150px” />
< coluna label = “Conteúdo” />
< coluna label = “Component” width = “250px” />
</ colunas >
< linhas >
< linha >
< label valor = “UserName” width = “150px” />
< hlayout >
< textbox id = “nome” valor = “João” width = “150px” tabbable = “true” />
</ hlayout >
< hlayout >
< label sclass = “hightlight” > Textbox </ label > com tabbable
</ hlayout >
</ linha >
< linha >
Senha
< textbox id = “pwd1” tipo = “password” valor = “123456789” width = “150px” />
< hlayout >
< label sclass = “hightlight” > Textbox </ label > type = “password”
</ hlayout >
</ linha >

segundo: gostaria de saber o seguinte quando uso html eu faço form para fazer a acção da controle assim

e no caso do zk como faço ?
	try {
		String cmd = request.getParameter("cmd");
		if(cmd.equalsIgnoreCase("gravar"));
		Usuario u = new Usuario();
		u.setNome(request.getParameter("nome"));
		u.setUserName(request.getParameter("username"));
		u.setSenha(request.getParameter("senha"));
		new UsuarioDao().create(u);
		request.setAttribute("msg", "gravado com sucesso!!1");
		request.getRequestDispatcher("logar.zul").forward(request , response);

O tipo de código fonte que você mostrou se chama ZUL, é um tipo de script xml criado pela equipe do ZK para facilitar a construção das páginas.

Quanto aos formularios, você utiliza um script ZUL com componentes especificos (window, textbox e etc…) para construir a interface; lembrando que associado aos componentes, caso seja necessario (window para formulario), você devera construir tambem uma classe para descrever os eventos e as estruturas de dados.

Lembre sempre de utilizar boas praticas de programação, principalmente aplicação de patterns; o ZK oferece bastante facilidade porem, como sempre, com a facilidade vem os riscos de criar códigos muitos ruins.

p.s Sugiro dar uma lida com calma no tutorial apresentado pelo site dos divulgadores do zk.

flws

ormalmente quando eu crio uma tela de gravação desta forma abaixo eu crio uma index.jsp e digite na mão o formulario utilizando o input. text…/> no caso do zk
como faria criaria xml.zul e depois index.zul pois o codigo fonte que eu te mostrei traz exatamente isto que esta aqui em baixo
não estou conseguindo diferencia o que é formulario e o que é xml.zul no zk se vc verificar o cod ele parece um formulario que traz os dados para o usuario dgitar
perdão não estou entendendo

nome:
login:
senha:

Abaixo está a VIEW, isto é, O layout do formulário

<?page title="Cadastro de Cores dos Ve�culos" contentType="text/html;charset=UTF-8"?>
<zk>
	<window title="Cadastro de Cores" 
			id="winCores" border="normal" position="&quot;center&quot;;" closable="true" mode="overlapped"
			apply="Controlador.CorControlador" 
			forward="onCreate=onInicializar" context="botaoDireito">

		<caption image="img/color_wheel.png"/>

		<borderlayout>
			<north height="10%">
				<vbox width="100%" height="100%" align="start" pack="center">
					<hbox>
						<button id="btnNovo" forward="onClick=onNovo" tooltiptext="Novo CTRL+X" image="img/page_white.png"/>
						<button id="btnExcluir" forward="onClick=onExcluir" tooltiptext="Excluir CTRL+E" image="img/trash.png"/>
						<button id="btnSalvar" forward="onClick=onSalvar" tooltiptext="Salvar CTRL+S" image="img/disk.png"/>
						<button id="btnCancelar" forward="onClick=onCancelar" tooltiptext="Cancelar CTRL+C" image="img/cancel.png"/>
						<button id="btnPesquisar" forward="onClick=onPesquisar" tooltiptext="Pesquisar CTRL+R" image="img/zoom.png"/>
						<button id="btnSair" forward="onClick=onSair" tooltiptext="Sair CTRL+Q" image="img/door_open.png"/>
						<button id="btnImprimir" forward="onClick=onImprimir" tooltiptext="Imprimir Relação de Cores CTRL+Z" image="img/printer.png"/>
						<button id="btnAjuda" forward="onClick=onAjuda" tooltiptext="Ajuda CTRL+A" image="img/help.png" style="cursor:help"/>
					</hbox>
				</vbox>
			</north>
			<center>
				<vbox width="100%" height="100%" align="center" pack="center">
					<grid>
						<columns>
							<column />
							<column />

						</columns>
						<rows>
							<row align="left">
								<label id="lbIdCorVeiculo" value="Id da Cor:"/>
								<intbox id="txtIdCorVeiculo" forward="onOK=onCarregarCor"
								maxlength="10" cols="5" focus="true" tabindex="1"/>
							</row>
							<row align="left">
								<label id="lbCorVeiculo" value="Cor do veículo:"/>
								<textbox id="txtCorVeiculo" onOk="btnSalvar.focus()" 
								maxlength="30" tabindex="2" disabled="true" style="text-transform:uppercase"/>
							</row>
						</rows>
					</grid>
				</vbox>
			</center>
			<south height="65%">
				<listbox id="listarCores" fixedLayout="true"
					height="200px" mold="paging" pageSize="16" forward="onSelect=onSelecionarRegistro">
					<listhead>
						<listheader label="Id" sort="auto" width="20%"/>
						<listheader label="Cores de Veículos" sort="auto" width="80%" />
					</listhead>
				</listbox>
			</south>
		</borderlayout>
		
		<menupopup id="botaoDireito">
			<menuitem label="Sair" image="img/door_open.png" onClick="winCores.onClose()"/>
		</menupopup>
		
		<!-- Verifica o browser do cliente e ajusta a altura e comprimento -->
		<!-- Verifica Internet Explorer, Mozilla Firefox, Opera, Safari e Google Chrome -->
		<attribute name="onCreate">
			if(execution.isExplorer() || execution.isExplorer7()){
				winCores.setWidth("400px");
				winCores.setHeight("360px");
			}else
				if(execution.isGecko() || execution.isGecko3()){
					winCores.setWidth("400px");
					winCores.setHeight("360px");
				}else
				if(execution.isOpera() || execution.isSafari()){
					winCores.setWidth("400px");
					winCores.setHeight("360px");
				}else{
					winCores.setWidth("400px");
					winCores.setHeight("360px");
				}
		</attribute>
	</window>
</zk>

Abaixo está o code behind do formulário acima. Isto é, o controlador que executará os comandos feitos no formulário

package Controlador;

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.Executions;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.KeyEvent;
import org.zkoss.zk.ui.util.Composer;
import org.zkoss.zul.Button;
import org.zkoss.zul.Intbox;
import org.zkoss.zul.Listbox;
import org.zkoss.zul.Listcell;
import org.zkoss.zul.Listitem;
import org.zkoss.zul.Textbox;
import org.zkoss.zul.Window;

import Util.Mensagem;
import Dal.CorDal;
import Modelo.Cor;
import Util.Arquivo;
import Util.TeclasAtalho;
import Util.ValidaCampos;

public class CorControlador implements Composer  {
	
	private Window winCores = null;

	private Button btnSalvar = null;
	private Button btnCancelar = null;
	private Button btnNovo = null;
	private Button btnExcluir = null;

	private Intbox txtIdCorVeiculo = null;
	private Textbox txtCorVeiculo = null;

	private Listbox listarCores = null;

	private Window winPesquisar = null;
	Window winRelatorioRelacao = null;

	public void doAfterCompose(Component win) throws Exception {
		winCores = (Window) win.getFellow("winCores");
		
		btnSalvar = (Button) win.getFellow("btnSalvar");
		btnCancelar = (Button) win.getFellow("btnCancelar");
		btnNovo = (Button) win.getFellow("btnNovo");
		btnExcluir = (Button) win.getFellow("btnExcluir");
		
		txtIdCorVeiculo = (Intbox) win.getFellow("txtIdCorVeiculo");
		txtCorVeiculo = (Textbox) win.getFellow("txtCorVeiculo");
		
		listarCores = (Listbox) win.getFellow("listarCores");
		
		//Evento de inicialização da tela de menu
		win.addEventListener("onInicializar",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				inicializar();
				carregaCores();
			}//fim do método
		});//fim do evento
				
		//Novo
		win.addEventListener("onNovo",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				novosDados();
			}//fim do método
		});//fim do evento
		
		//Excluir
		win.addEventListener("onExcluir",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				excluirDados();
			}//fim do método
		});//fim do evento
		
		//Salvar
		win.addEventListener("onSalvar",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				salvarDados();
			}//fim do método
		});//fim do evento
		
		//Cancelar
		win.addEventListener("onCancelar",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				cancelarDados();
			}//fim do método
		});//fim do evento
		
		//Pesquisar
		win.addEventListener("onPesquisar",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				pesquisarDados();
			}//fim do método
		});//fim do evento
		
		//Sair
		win.addEventListener("onSair",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				fecharTela();
			}//fim do método
		});//fim do evento
		
		//Sair
		win.addEventListener("onClose",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				fecharTela();
			}//fim do método
		});//fim do evento
		
		//Ajuda
		win.addEventListener("onAjuda",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				chamarAjuda();
			}//fim do método
		});//fim do evento
		
		//Carrega Cor
		win.addEventListener("onCarregarCor",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				carregaCor();
			}//fim do método
		});//fim do eventoonSelecionarRegistro
		
		//Carrega Cor
		win.addEventListener("onSelecionarRegistro",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				selecionarRegistroNalistBox();
			}//fim do método
		});//fim do evento
		
		//Evento de inicialização da tela de menu
		win.addEventListener("onImprimir",new EventListener() {
			public void onEvent(Event arg0) throws Exception {
				imprimirRelatorio();
			}//fim do método
		});//fim do evento
	}//fim do método
	
	/**
	 * @author Rodrigo Santik
	 * @Descricão Método responsável por Imprimir o relatório
	 * **/
	
	private void imprimirRelatorio() {
		if (btnNovo.isDisabled() == false) {	
			try {
				winRelatorioRelacao = (Window) Executions.createComponents("/relatorioRelacao.zul",
				(Component) winCores.getAttribute("areaTrabalho",Component.SESSION_SCOPE), null);

				winRelatorioRelacao.setAttribute("tela", winCores);
				winRelatorioRelacao.setAttribute("urlJasper","relatorio//relacao//relacaoCoresVeiculos.jasper");
			} catch (Exception ex) {
				System.out.println(ex.getMessage());
				ex.printStackTrace();
				Arquivo.gravarLogErro(ex.getMessage());
			}// fim do catch
		}//fim do if
	}//fim do método

	/**
	 * @author Rodrigo Santik
	 * @Descricão Método responsável por tratar a seleção do registro feita na tabela
	 * **/
	private void selecionarRegistroNalistBox() {
		Listcell listcell[] = {(Listcell) listarCores.getSelectedItem().getChildren().get(0),
							   (Listcell) listarCores.getSelectedItem().getChildren().get(1)};

 		txtIdCorVeiculo.setText(listcell[0].getLabel());
 		txtCorVeiculo.setText(listcell[1].getLabel());
 		
 		carregaCor();
	}//fim do método

	/**
	 * @author Rodrigo Santik
	 * @Descricão Método responsável por inicializar todos os componentes
	 * @serialData 27/07/2010 19:51
	 * **/
	private void inicializar() {
		winCores.setAttribute("winCoresIsOpen", true, Component.SESSION_SCOPE);
		
		winCores.setCtrlKeys(TeclasAtalho.getTeclasAtalho()); //seta as teclas de atalho
		winCores.addEventListener("onCtrlKey", new EventListener() {
			public void onEvent(Event e) throws Exception {
				trataKeyListener(e);
			}//fim do método
		});//fim do evento
		
		ativaDesativa(false, true, true, true);
	} //fim do método


	/**@author Rodrigo Santik
	 *@Descricão Método responsável por tratar todos keys listener da tela
	 * **/
	private void trataKeyListener(Event e){
		
		//Caso o usuário apertar CTRL + S - SALVAR
		if(((KeyEvent) e).getKeyCode() == TeclasAtalho.SALVAR){
			salvarDados();
		//Caso o usuário apertar CTRL + A - AJUDA
		}else if(((KeyEvent) e).getKeyCode() == TeclasAtalho.AJUDA){
			chamarAjuda();
		//Caso o usuário apertar CTRL + E - EXCLUIR
		}else if(((KeyEvent) e).getKeyCode() == TeclasAtalho.EXCLUIR){
			excluirDados();
		//Caso o usuário apertar CTRL + C - CANCELAR
		}else if(((KeyEvent) e).getKeyCode() == TeclasAtalho.CANCELAR){
			cancelarDados();
		//Caso o usuário apertar CTRL + R - PESQUISAR
		}else if(((KeyEvent) e).getKeyCode() == TeclasAtalho.PESQUISAR){
			pesquisarDados();
		//Caso o usuário apertar CTRL + X - NOVO
		}else if(((KeyEvent) e).getKeyCode() == TeclasAtalho.NOVO){
			novosDados();
		//Caso o usuário apertar CTRL + Q - SAIR
		}else if(((KeyEvent) e).getKeyCode() == TeclasAtalho.SAIR){
			fecharTela();
		}else if(((KeyEvent) e).getKeyCode() == TeclasAtalho.IMPRIMIR)
			imprimirRelatorio();
			
		
	}//fim do método


	/**@author Rodrigo Santik
	 *@Descricão Método responsável por Limpar todos os campos
	 * **/
	private void limparTela(){
		txtIdCorVeiculo.setText(null);
		txtCorVeiculo.setText(null);
		txtIdCorVeiculo.focus();
	}//fim do método
	
	/**@author Rodrigo Santik
	 *@Descricão Método responsável por ativa e desativar componentes
	 * **/
	private void ativaDesativa(boolean novo, boolean excluir, boolean salvar, boolean cancelar){
		btnNovo.setDisabled(novo);
		btnExcluir.setDisabled(excluir);
		btnSalvar.setDisabled(salvar);
		btnCancelar.setDisabled(cancelar);
	}//fim do método

	/**@author Rodrigo Santik
	 *@Descricão Método responsável por habilitar a opção para o usuãrio isnerir novos dados
	 * **/
	private void novosDados(){
		limparTela();
		txtIdCorVeiculo.setDisabled(true);
		txtCorVeiculo.setDisabled(false);
		txtCorVeiculo.focus();
		
		ativaDesativa(true, true, false, false);
	}//fim do método
	
	/**@author Rodrigo Santik
	 *@Descricão Método responsável por cancelar a operação
	 * **/
	private void cancelarDados(){
		limparTela();
		txtIdCorVeiculo.setDisabled(false);
		txtCorVeiculo.setDisabled(true);
		txtIdCorVeiculo.focus();
		
		ativaDesativa(false, true, true, true);
	}//fim do método
	
	/**@author Rodrigo Santik
	 *@Descricão Método responsável por salvar os dados
	 * **/
	private void salvarDados(){
		if (btnNovo.isDisabled() == true) {
				if(!txtCorVeiculo.getText().trim().equals("")){
					
					txtCorVeiculo.setText(txtCorVeiculo.getText().toUpperCase());

					CorDal corDal = new CorDal(winCores);
					Cor cor = new Cor();

					cor.setIdCor(ValidaCampos.valorInteger(txtIdCorVeiculo.getText()).intValue());
					cor.setCor(txtCorVeiculo.getText());
					
					corDal.salvarCor(cor);

					// volta as configurações default
					limparTela();
					txtIdCorVeiculo.setDisabled(false);
					txtCorVeiculo.setDisabled(true);
					txtIdCorVeiculo.focus();
					ativaDesativa(false, true, true, true);

					// apaga todos os itens da tabela
					listarCores.getItems().clear();

					// carrega todos os itens da tabela
					carregaCores();
				}else{
					Mensagem.Alerta("Cor inválida",winCores);
					txtCorVeiculo.focus();
				}//fim do else
		}// fim do if
	}//fim do método
	
	/**@author Rodrigo Santik
	 *@Descricão Método responsável por deletar os dados
	 * **/
	private void excluirDados(){
		if (btnNovo.isDisabled() == true) {
			if(ValidaCampos.valorInteger(txtIdCorVeiculo.getText()).intValue() > 0){
				
				txtCorVeiculo.setText(txtCorVeiculo.getText().toUpperCase());

				CorDal corDal = new CorDal(winCores);
					
				corDal.excluirCor(ValidaCampos.valorInteger(txtIdCorVeiculo.getText()).intValue());


				// volta as configurações default
				limparTela();
				txtIdCorVeiculo.setDisabled(false);
				txtCorVeiculo.setDisabled(true);
				txtIdCorVeiculo.focus();
				ativaDesativa(false, true, true, true);

				// apaga todos os itens da tabela
				listarCores.getItems().clear();

				// carrega todos os itens da tabela
				carregaCores();
			}else{
				Mensagem.Alerta("Id da cor inválido",winCores);
				txtCorVeiculo.focus();
			}//fim do else
		}//fim do if
	}//fim do método

	/**@author Rodrigo Santik
	 *@Descricão Método responsável por chamar a tela de pesquisa
	 * **/
	private void pesquisarDados(){
		try {
			winPesquisar = (Window) Executions.createComponents("/pesquisa.zul",
		    (Component) winCores.getAttribute("areaTrabalho", Component.SESSION_SCOPE), null);
			
			winPesquisar.setAttribute("tela",winCores);
			winPesquisar.setAttribute("txtId",txtIdCorVeiculo);
			winPesquisar.setAttribute("classe", this);
			
		} catch (Exception ex) {
			System.out.println(ex.getMessage());
			ex.printStackTrace();
			Arquivo.gravarLogErro(ex.getMessage());
		}//fim do catch
	}//fim do método

	/**@author Rodrigo Santik
	 *@Descricão Método responsável por chamar a tela de Ajuda
	 * **/
	private void chamarAjuda(){
		//chama form de ajuda
	}//fim do método

	/**@author Rodrigo Santik
	 *@Descricão Método responsável por fechar a tela
	 * **/
	private void fecharTela(){
		winCores.setAttribute("winCoresIsOpen", false, Component.SESSION_SCOPE);
		
		try {
			Window winPesquisaAvancada = (Window) winPesquisar.getAttribute("winPesquisaAvancada", Component.SESSION_SCOPE);
			winPesquisaAvancada.onClose();
			winPesquisar.removeAttribute("winPesquisaAvancada",Component.SESSION_SCOPE);
			
			winPesquisar.onClose();
			winRelatorioRelacao.onClose();
			winCores.onClose();
		} catch (Exception e1) {
			try{
				winPesquisar.onClose();
				winRelatorioRelacao.onClose();
				winCores.onClose();
			}catch (Exception e2) {
				try{
					winRelatorioRelacao.onClose();
					winCores.onClose();
				}catch (Exception e3) {
					winCores.onClose();
				}//fim do catch
			}//fim do catch
		}//fim do catch
	}//fim do método


	/**@author Rodrigo Santik
	 *@Descricão Método responsável por carregar as cores no na tabela
	 * **/
	private void carregaCores(){
		CorDal corDal = new CorDal(winCores);
		Cor[] cores = corDal.listarCores();
		Listitem[] listitem = new Listitem[cores.length];
		
		//constroi todas as linhas
		for(int i=0; i < cores.length; i++){
			listitem[i] = new Listitem();
			listitem[i].appendChild(new Listcell(String.valueOf(cores[i].getIdCor())));
			listitem[i].appendChild(new Listcell(cores[i].getCor()));
			listarCores.appendChild(listitem[i]);
		}//fim do for
	}//fim do método

	/**@author Rodrigo Santik
	 *@Descricão Método responsável por carregar a cor digitada pelo usuário
	 * **/
	public void carregaCor(){
		
		if (ValidaCampos.valorInteger(txtIdCorVeiculo.getText()).intValue() > 0) {
			
			CorDal corDal = new CorDal(winCores);
			Cor cor = new Cor();
			
			cor = corDal.listarCor(ValidaCampos.valorInteger(txtIdCorVeiculo.getText()).intValue());
			
			if(cor.getIdCor() != 0){
				txtIdCorVeiculo.setText(String.valueOf(cor.getIdCor()));
				txtCorVeiculo.setText(cor.getCor());
				
				ativaDesativa(true, false, false, false);

				txtIdCorVeiculo.setDisabled(true);
				txtCorVeiculo.setDisabled(false);
				txtCorVeiculo.focus();
			}else{
				Mensagem.Alerta("Cor não cadastrada",winCores);
				limparTela();
				txtCorVeiculo.focus();
			}//fim do else
		} else {
			txtCorVeiculo.focus();
			Mensagem.Alerta("Id da cor inválido",winCores);
		} //fim do else
	}//fim do método
}//fim da classe

Eu entendi sua pergunta, você quer pegar os dados do formulário via post ou get, assim como faz com PHP ou JSP puro (pega os dados no servlet), mas o ZK trabalha diferente, trabalha com a concepção de eventos, então, o clique de um botão no formulário do layout, dispara um evento (método) do Code Behind, entendeu? Dá uma olhada no código e vai me perguntando o que tiver dúvida…

O que liga o formulário em layout com o code behind é a tag apply="Controlador.CorControlador" que fica no cabeçalho do layout. Cor Controlador é o nome da classe que disparas os eventos do formulário.

Abs
Rodrigo

Em janeiro irei fazer meu TCC de pós-graduação sobre a tecnologia ZKOSS.

Irei disponibilizar o material aqui no GUJ para a galera consultar e difundir o conhecimento.

E com a sua dúvida de agora, tive a idéia de comparar o modo de trabalho da tecnologia ZKOSS com o PHP, Servlets e etc… onde você pega os valores por meio do formulário pelos métodos GET ou POST.