Pessoal,
gostaria de deixar esse layout mais amigavel, pois esta todo desconfigurado.
segue meu código
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Cadastro</title>
</h:head>
<h:body>
<h:form id="form">
<p:panel id="panel" header="Cadastro">
<p:messages id="msgs"/>
<h:panelGrid columns="2">
<h:outputLabel for="cpf" value="Cpf:"/>
<p:inputMask mask="999.999.999-99" value="#{BeanCliente.cliente.CPF}" required="true" label="Cpf" requiredMessage="CPF é obrigatorio"/>
<p:message for="nome" display="icon"/>
<h:outputLabel value="Senha:"/>
<p:keyboard password="true" keypadOnly="true" value="#{BeanCliente.cliente.senha}"/>
<h:outputLabel for="nome" value="Nome" />
<p:inputText id="nome" value="#{BeanCliente.cliente.nome}" required="true" label="Nome" requiredMessage="NOME é obrigatorio"/>
<p:message for="nome" display="icon"/>
<h:outputLabel value="Data Cadastro"/>
<p:calendar value="#{BeanCliente.cliente.datacadastro}"/>
<h:outputLabel value="Observações"/>
<p:inputTextarea value="#{BeanCliente.cliente.observacao}"/>
<h:outputLabel value="Descrição:"/>
<p:keyboard layout="qwertyBasic" value="#{BeanCliente.cliente.descricao}"/>
</h:panelGrid>
<p:commandButton id="btn" value="Salvar" update="panel" actionListener="#{BeanCliente.Salvar}">
</p:commandButton>
</p:panel>
</h:form>
</h:body>
</html>
Alguem pode me ajudar ?
Olá evandro_araujo,
O problema do seu layout é o panelgrid que está configurado para ter 2 colunas. Então, acho que o seu problema se resolveria assim:
<h:panelGrid columns=“3”> e ficaria mais ou menos assim na tela se for colocado nessa ordem:
[code]<h:outputLabel for=“cpf” value=“Cpf:”/>
<p:inputMask mask=“999.999.999-99” value="#{BeanCliente.cliente.CPF}" required=“true” label=“Cpf” requiredMessage=“CPF é obrigatorio”/>
<p:message for=“nome” display=“icon”/>
<h:outputLabel for=“nome” value=“Nome” />
<p:inputText id=“nome” value="#{BeanCliente.cliente.nome}" required=“true” label=“Nome” requiredMessage=“NOME é obrigatorio”/>
<p:message for=“nome” display=“icon”/>
[/code]
Cpf: |_________| Mensagem do campo
Nome: |_________| Mensagem do campo
Espero ter ajudado!
Também tenho dificuldades com layout de telas no JSF. Alias , no site do curso K19 tem uma apostila de HTML , css e javascript bem legal .
Mas , Se o pessoal do forum quiser disponibilizar seus layouts de telas será de grande ajuda .
é só questão de reorganizar.
segue abaixo teu formulário com pequenas adições.
[code]<h:form id=“form”>
<p:panel id="panel" header="Cadastro">
<p:messages id="msgs"/>
<h:panelGrid columns="3">
<h:outputLabel for="cpf" value="Cpf:"/>
<p:inputMask mask="999.999.999-99" value="#{BeanCliente.cliente.CPF}" required="true" label="Cpf" requiredMessage="CPF é obrigatorio"/>
<p:message for="nome" display="icon"/>
<h:outputLabel value="Senha:"/>
<p:keyboard password="true" keypadOnly="true" value="#{BeanCliente.cliente.senha}"/>
<h:outputText/>
<h:outputLabel for="nome" value="Nome" />
<p:inputText id="nome" value="#{BeanCliente.cliente.nome}" required="true" label="Nome" requiredMessage="NOME é obrigatorio"/>
<p:message for="nome" display="icon"/>
<h:outputLabel value="Data Cadastro"/>
<p:calendar value="#{BeanCliente.cliente.datacadastro}"/>
<h:outputText />
<h:outputLabel value="Observações"/>
<p:inputTextarea value="#{BeanCliente.cliente.observacao}"/>
<h:outputText />
<h:outputLabel value="Descrição:"/>
<p:keyboard layout="qwertyBasic" value="#{BeanCliente.cliente.descricao}"/>
</h:panelGrid>
<p:commandButton id="btn" value="Salvar" update="panel" actionListener="#{BeanCliente.Salvar}">
</p:commandButton>
</p:panel>
</h:form>[/code]
Fiz a alteracao abaixo, só que olha como ficou a minha tela em anexo :
<h:panelGrid columns="3">
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Cadastro</title>
</h:head>
<h:body>
<h:form id="form">
<p:panel id="panel" header="Cadastro">
<p:messages id="msgs"/>
<h:panelGrid columns="2" cellpadding="2">
<h:outputLabel for="cpf" value="Cpf:"/>
<p:inputMask id="cpf" mask="999.999.999-99" value="#{BeanCliente.cliente.CPF}" required="true" label="Cpf" requiredMessage="CPF é obrigatorio"/>
<h:outputLabel value="Senha:"/>
<p:keyboard password="true" keypadOnly="true" value="#{BeanCliente.cliente.senha}"/>
<h:outputLabel for="nome" value="Nome" />
<p:inputText id="nome" value="#{BeanCliente.cliente.nome}" required="true" label="Nome" requiredMessage="NOME é obrigatorio"/>
<h:outputLabel value="Data Cadastro"/>
<p:calendar value="#{BeanCliente.cliente.datacadastro}"/>
<h:outputLabel value="Observações"/>
<p:inputTextarea value="#{BeanCliente.cliente.observacao}"/>
<h:outputLabel value="Descrição:"/>
<p:keyboard layout="qwertyBasic" value="#{BeanCliente.cliente.descricao}"/>
</h:panelGrid>
<p:commandButton id="btn" value="Salvar" update="panel" actionListener="#{BeanCliente.Salvar}">
</p:commandButton>
</p:panel>
</h:form>
</h:body>
</html>
