[RESOLVIDO]Layout de Tela usando primefaces

27 de setembro de 2012 5 respostas

evandro_araujo 27 de setembro de 2012

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="[CPF removido]" 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 ?

5 Respostas

joaopaulotds 27 de set. de 2012

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:

e ficaria mais ou menos assim na tela se for colocado nessa ordem:

<h:outputLabel for="cpf" value="Cpf:"/>  
<p:inputMask mask="[CPF removido]" 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"/>

Cpf: |_________| Mensagem do campo
Nome: |_________| Mensagem do campo

Espero ter ajudado!

misterzire 27 de set. de 2012

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 .

marshallpaiva 27 de set. de 2012

é só questão de reorganizar.
segue abaixo teu formulário com pequenas adições.

<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="[CPF removido]" 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>

evandro_araujo 27 de set. de 2012

Fiz a alteracao abaixo, só que olha como ficou a minha tela em anexo :

<h:panelGrid columns="3">

evandro_araujo 27 de set. de 2012

<?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="[CPF removido]" 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>

Criado 27 de setembro de 2012

Ultima resposta 27 de set. de 2012

Respostas 5

Participantes 4

5 Respostas

Topicos relacionados