Componentes

1. Entrada de Dados
   • TextBoxBind
   • DateBoxBind
   • CpfBoxBind
   • CepBoxBind
   • MoneyBoxBind
   • TelefoneBoxBind
   • BandboxBind
   • ListBoxBind
2. Containers
   • Tabbox
   • InternalWindow
3. Visualização de Dados
   • ImageBind

Componente TextBoxBind

Este componente é uma caixa de texto pode ser utilizado quando é necessário adicionar um campo do tipo String.
Por exemplo, um campo para digitar o "nome" em uma entidade "funcionário".

• Vinculando Objetos ao Componente
  • nomeDoObjeto vincula um objeto ao componente epecificando classecontrole.objetoAtual.nomeDoObjeto.
  • id vincula um objeto ao componente. É necessário especificar o nome do atributo referente ao objeto na classe domínio.

---

Propriedades

Nome	Descrição	Valores
upper	Define se o texto sera convertido para caixa alta.	Boolean. Padrão true.
validarCampo	Define se o campo será validado pelas regras de negócio	Boolean. Padrão true.
type	Se setado como password os caracteres não podem ser vistos e são substituídos por asteríscos.	String

Exemplos

<textboxbind 
	nomeDoObjeto="classecontrole.objetoAtual.atributo">
</textboxbind>

ou

<textboxbind 
	id="atributoDoObjetoNaClasseDominio">
</textboxbind>

Componente DateBoxBind

Este componente é uma caixa de edição que armazena uma data. Após clicar no ícone, um calendário irá surgir para que uma data possa ser selecionada pelo usuário.

• Vinculando Objetos ao Componente
  • nomeDoObjeto vincula um objeto ao componente epecificando classecontrole.objetoAtual.nomeDoAtributo.
  • id vincula um objeto ao componente. É necessário especificar o nome do atributo referente ao objeto na classe domínio.

Exemplos

<dateboxbind 
	nomeDoObjeto="classecontrole.objetoAtual.atributoData">
</dateboxbind>

ou

<dateboxbind 
	id="atributoData">
</dateboxbind>

Componente CpfBoxBind

Este componente é uma caixa de texto com máscara de CPF. Recebe valor do tipo String.

• Vinculando Objetos ao Componente
  • nomeDoObjeto vincula um objeto ao componente epecificando classecontrole.objetoAtual.nomeDoAtributo.
  • id vincula um objeto ao componente. É necessário especificar o nome do atributo referente ao objeto na classe domínio.

Exemplos

<cpfboxbind 
	nomeDoObjeto="classecontrole.objetoAtual.atributoCpf">
</cpfboxbind>

ou

<dateboxbind 
	id="atributoCpf">
</dateboxbind>

Componente CepBoxBind

Este componente é uma caixa de texto com máscara de CEP. Recebe valor do tipo String.

• Vinculando Objetos ao Componente
  • nomeDoObjeto vincula um objeto ao componente epecificando classecontrole.objetoAtual.nomeDoObjeto.
  • id vincula um objeto ao componente. É necessário especificar o nome do atributo referente ao objeto na classe domínio.

Componente MoneyBoxBind

Este componente é uma caixa de texto com máscara de moeda. Recebe valor do tipo BigDecimal.

• Vinculando Objetos ao Componente
  • nomeDoObjeto vincula um objeto ao componente especificando classecontrole.objetoAtual.nomeDoAtributo.
  • id forma abreviada de vincular um objeto ao componente. É necessário especificar o nome do atributo referente ao objeto na classe domínio.

Exemplos

<cpfboxbind 
	nomeDoObjeto="classecontrole.objetoAtual.atributoBigDecimal">
</cpfboxbind>

ou

<dateboxbind 
	id="atributoBigdDecimal">
</dateboxbind>

Componente TelefoneBoxBind

Importante

Componente em fase de desenvolvilmento, o bind deve ser feito através da propriedade nomeDoObjeto.

Este componente é uma caixa de texto com máscara de telefone. Recebe valor do tipo String.

• Vinculando Objetos ao Componente
  • nomeDoObjeto vincula um objeto ao componente epecificando classecontrole.objetoAtual.nomeDoObjeto.

Exemplos

<telefoneboxbind 
	nomeDoObjeto="classecontrole.objetoAtual.atributoTelefone">
</telefoneboxbind>

Componente BandBoxBind

Listando Valores de um Enum

Para listar os valores de uma enumeração num Bandbox basta vincular o atributo do tipo Enum à propriedade nomeDoObjeto do componente.

<bandboxbind nomeDoObjeto="classecontrole.objetoAtual.atributoEnum"></bandboxbind>

---

Listando Valores de um Objeto

Para listar os registros de uma entidade num Bandbox basta vincular um objeto da entidade à propriedade nomeDoObjeto do componente.

<bandboxbind nomeDoObjeto="classecontrole.objetoAtual.atributoEntidade"></bandboxbind>

---

Vinculando Compontentes com Dependência

Nos casos em que a listagem do bandboxbind depende do que foi selecionado em algum outro componente, é possível aninha-los e vincular a eles uma relação de dependência.
Para que o vinculo seja estabelecido utilizamos a propriedade dependeDoComponente para setar o identificador do componente o qual existe a dependência e a propriedade metodoFiltro para identificar o método no controller responsável por filtrar a listagem baseada no componente dependido.

<bandboxbind nomeDoObjeto="classecontrole.objetoAtual.objetoPai"
	identificador="componentePai">
</bandboxbind>
					
<bandboxbind nomeDoObjeto="classecontrole.objetoAtual.objetoFilho"
	dependeDoComponente="componentePai" metodoFiltro="meuMetodoFiltrarFilhos">
</bandboxbind>

Para melhor ilustação, veja o exemplo com aninhamento de países, estados e cidades.

---

Propriedades

Detalhamento das propriedades que podem ser utilizadas em um componente do tipo bandboxbind.

Nome	Descrição	Valores
labelValorList	Define quais atributos do objeto serão exibidos na listagem quando o componente for expandido.	String no modelo MeuTitulo:nomeAtributo. Se não especificado, o toString() do objeto será exibido. Exemplo
atributoQueSeraVisualizado	Define qual atributo do objeto será exibido pro elemento que já estiver selecionado, na caixa de texto.	String no modelo nomeAtributo. Se não especificado, o toString() do objeto será exibido. Exemplo
upperCase	Define se os valores serão exibidos em caixa alta.	Boolean. Por padrão true.
identificador	Define um identificador único ao componente no escopo que ele se encontra. Similar ao id porem permite mais de um identificador por escopo. Utilizado quando existe dependência de componentes.	String
atribuicaoAutomatica	Seta automaticamente como selecionado o primeiro item da lista que irá preencher o componente quando a mesma for filtrada.	String. Padrão S.
atualizarComponentes	Define um ou mais componentes a serem atualizados toda vez que um valor for atribuído ao Bandboxbind.	String com os id's separados por ,
componentDependido	Lorem ipsum sit amet.	String com o identificador do outro componente.
dependeDoComponente	Seta o identificador de algum outro componente do qual possui relação de dependência.	String com o identificador do outro componente.
metodoFiltro	Define o método a ser chamado para filtrar a listagem de resultados no componente.	String com o nome do método.

---

Exemplos

Exemplo 1: Bandboxbind Simples Listando Entidade

Listagem de "fabricantes" numa view de "veiculos" utilizando bandboxbind.

VeiculoVO.class

@Entity
public class VeiculoVO extends TutorialBaseVO {

	private FabricanteVO fabricante;
	private String nome;
	
	@ManyToOne
	public FabricanteVO getFabricante() {
		return fabricante;
	}
	//Ocultando demais métodos e atributos para brevidade do exemplo
}

^{NOTA Foi criado uma relação de muitos-para-um unidirecional para fins de exemplo.}

FabricanteVO.class

@Entity
@Lookup
public class FabricanteVO extends TutorialBaseVO { 
	
	private String nome;
	private String abreviacao;
	
	//Ocultando demais métodos e atributos para brevidade do exemplo
}

Veiculo.zul

<bandboxbind
	nomeDoObjeto="classecontrole.objetoAtual.fabricante"
	labelValorList="Marca:abreviacao; Nome:nome"
	atributoQueSeraVisualizado="abreviacao">
</bandboxbind>
<!-- Demais componentes ocultados para brevidade -->

E o resultado após popular os fabricantes nos fornece um resultado como a imagem abaixo.

Exemplo 2: Bandboxbind Aninhado com Dependência

Importante!

Este exemplo foi desacoplado e é possível encontrá-lo em maiores detalhes neste link.

Criamos os métodos responsáveis por filtrar os resultados no nosso bandbox (baseado no selecionado).

^{FuncionarioCtr.class}

	public List<EstadoVO> filtrarEstado(Bandboxbind box) {

		List<EstadoVO> retorno = new ArrayList<EstadoVO>();

		Bandboxbind componenteDependido = (Bandboxbind) ProHelperView
				.recuperaBandboxParaAninhar(getWindowAtual(),
						box.getDependeDoComponente());
		PaisVO pais = (PaisVO) componenteDependido.getObject();

		if (pais != null)
			retorno.addAll(pais.getEstados());

		return retorno;
	}


	public List<CidadeVO> filtrarCidade(Bandboxbind box) {

		List<CidadeVO> retorno = new ArrayList<CidadeVO>();

		Bandboxbind componenteDependido = (Bandboxbind) ProHelperView
				.recuperaBandboxParaAninhar(getWindowAtual(),
						box.getDependeDoComponente());
		EstadoVO estado = (EstadoVO) componenteDependido.getObject();

		if (estado != null)
			retorno.addAll(estado.getCidades());

		return retorno;
	}

Sobrescrevemos o método antesAtualizaObjetoAtual para que os campos correspondentes ao País e Estado sejam preenchidos com os dados que temos no objeto Cidade da nossa entidade FuncionarioEndereco.

^{FuncionarioCtr.class}

	@Override
	protected void antesAtualizaObjetoAtual(Object objetoAtual) {
		super.antesAtualizaObjetoAtual(objetoAtual);
		
		EstadoVO estado = getObjetoAtual().getEndereco().getCidade().getEstado();
		setEstado(estado);
	}

^{Funcionario.zul}

	<label value="Pais" />
	<bandboxbind
		nomeDoObjeto="classecontrole.estado.pais"
		labelValorList="Nome:nome; UF:abreviacao"
		atributoQueSeraVisualizado="nome" identificador="pais">
	</bandboxbind>

	<label value="Estado" />
	<bandboxbind
		nomeDoObjeto="classecontrole.estado"
		labelValorList="Nome:nome; UF:abreviacao"
		atributoQueSeraVisualizado="nome" identificador="estado"
		dependeDoComponente="pais" metodoFiltro="filtrarEstado">
	</bandboxbind>

	<label value="Cidade" />
	<bandboxbind nomeDoObjeto="classecontrole.objetoAtual.endereco.cidade"
		labelValorList="Nome:nome; UF:abreviacao"
		atributoQueSeraVisualizado="nome" dependeDoComponente="estado"
		metodoFiltro="filtrarCidade">
	</bandboxbind>
	
	<!-- Demais componentes ocultados para brevidade -->

Componente Tabbox

Este componente é um container usado para agrupar componentes em abas separadas.
Apenas uma aba é exibida por vez e é útil quando uma interface possuí muitos componentes e precisa de organização.

Exemplo

<tabbox>
	<tabs>
		<tab label="Primeira Aba" />
		<tab label="Segunda Aba" />
	</tabs>
	<tabpanels>
		<tabpanel>
			//Conteúdo da primeira aba
		</tabpanel>
		<tabpanel>
			//Conteúdo da segunda aba
		</tabpanel>
	</tabpanels>
</tabbox>

Componente InternalWindow

Este componente é um container usado para agrupar e exibir componentes em uma janela interna (modal).

Exemplo

<button label="Abrir Modal"
	onClick="self.getNextSibling().doModal()" />

<internalwindow title="Título do Modal"
	visible="false" width="30%" height="30%" position="center, center"
	closable="true" maximizable="true" minimizable="true" >

		<!-- Seus componentes/conteúdos -->
							
</internalwindow>

No exemplo acima, utilizamos a propriedade onClick associada com o método do ZK getNextSibling() para retornar a internalwindow que vem logo após o botão e, em seguida, abrir o modal com o método doModal().

---

Propriedades

Detalhamento das propriedades que podem ser utilizadas em um componente do tipo internalwindow.

Nome	Descrição	Valores
visible	Define se o modal deve ser visivel ou não ao carregar a página. Importante para o funcionamento correto do compontente.	Boolean deve ser setado como false.
closable	Define se o modal pode ser fechado pelo usuário.	Boolean. Padrão false.
minimizable	Define se o modal pode ser minimizado pelo usuário.	Boolean. Padrão false.
maximizable	Define se o modal pode ser maximizado pelo usuário (tela cheia).	Boolean. Padrão false.
title	Define a String de título da janela na barra superior.	String
position	Define o posicionamento inicial do modal. O posicionamento pode ser center, top, left, right e bottom.	String no modelo posx, posy.
width	Define a largura inicial do modal.	String com a medida, ex 30% ou 600px.
height	Define a altura inicial do modal.	String com a medida, ex 30% ou 600px.

Componente ImageBind

Este componente é utilizado para exibir uma imagem no navegador.

• Vinculando Objetos ao Componente
  • content vincula um objeto ao componente epecificando @{classecontrole.objetoAtual.nomeDoObjeto.
  • id vincula um identificador ao imagebind e o qual servirá para funcionar juntamente com outros componentes.

Exemplo

^Entidade

private byte[] foto;

@Override
@Lob
public byte[] getImagem() {
	return super.getImagem();
}

public void setImagem(byte[] foto) {
	this.foto = foto;
}

//Demais atributos e métodos ocultados para brevidade do exemplo

^{Interface.zul}

<button label="Carregar Imagem" id="carregar" onClick='classecontrole.anexar("imagem")' />
<imagebind id="imagem" width="200px" content="@{classecontrole.objetoAtual.foto}" />

No exemplo acima, na propriedade onClick do botão foi invocado o método anexar da classe controle. Este método recebe como parâmetro o id do componente imagebind que ira exibir a imagem.

Componente ListboxBind

Este componente é utilizado para a listagem e seleção múltipla de objetos.

• Vinculando Objetos ao Componente
  • nomeDoObjeto representa a coleção na classe entidade que irá persistir os objetos selecionados no ListboxBind.
  • colecaoModelo vincula uma coleção modelo ao componente que irá listar os possíveis itens que estão já persistidos e que poderão ser selecionados.
  • multiplo define que o ListboxBind irá possuir seleção múltipla. Inferido como true caso colecaoModelo seja especificado explicitamente.

Propriedades

Nome	Descrição	Valores