[RESOLVIDO] Tamanho de componentes por % - JSF + PrimeFaces

17 de janeiro de 2013 8 respostas

rodrigomarcelo 17 de janeiro de 2013

Bom dia meu caros,

Desculpem pela pergunta muito básica, mas sou novo nesta tecnologia (JSF + PrimeFaces). Antes dessa tecnologia, para software WEB eu utilizava Adobe Flex, e neste eu construia minhas views utilizando percentuais, o que era muito bom, pois independente da resolução e até mesmo dispositivos móveis (exceto produtos apple, claro) os formulários se adaptavam automaticamente.

É possível fazer isto em JSF + PrimeFaces? Tentei encontrar em meus testes e em fóruns e etc, e nada achei sobre… Como vocês, experientes no assunto, lidam com isso?

Um abraço e obrigado…

8 Respostas

Hebert_Coelho 17 de jan. de 2013

Eu já fiz colocando apenas style=“width: 40%”

É isso? O.o

aluisiodsv 17 de jan. de 2013

O Flex usa o flash para renderizar um formulário por exemplo.
Já o JSF usa o HTML. Se estiver começando verá q é um mundo bem grande.

E sim, é possível tbm deixar com o tamanho em porcentagem.

Hebert_Coelho 17 de jan. de 2013

aluisiodsv:
O Flex usa o flash para renderizar um formulário por exemplo.
Já o JSF usa o HTML. Se estiver começando verá q é um mundo bem grande.

E sim, é possível tbm deixar com o tamanho em porcentagem.

E é possível deixar tudo, até o tamanho de toda a fonte do projeto. [=

rodrigomarcelo 17 de jan. de 2013

Hebert Coelho:
Eu já fiz colocando apenas style=“width: 40%”

É isso? O.o

Obrigado por responder Hebert. A propósito, aprendo muito com seu blog!

Na verdade é isto sim, mas estou tendo dificuldades com isto. Na imagem abaixo, estou usando panelgrid para organizar os componentes visuais, coloquei bordas apenas pra ilustrar melhor a minha dificuldade.

Note que, coloquei um panel primário de 2 colunas. Dentro deste, 2 panels de 2 colunas cada…

Porém, se eu definir estes “sub-panels” com 50%, os componentes ficaram separados (outputLabel e InputText).

Há um meio de definir que, o outputLabel ficará com o mínimo de espaço necessário para exibir todo o seu texto, e todo o restante seja preenchido com o inputText ou outro qualquer?

Consegui ser claro em minha explanação?

Segue a imagem:

Código:

<ui:define name="fieldsCadastro">

		<h:panelGrid columns="2" border="1" style="width: 100%">

			<h:panelGrid columns="2" cellpadding="4" border="1">

				<h:outputLabel value="Cód. Unificado:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.cod_unificado}" readonly="true" />

				<h:outputLabel value="Tipo:" />
				<p:selectOneRadio value="#{bean.objeto.tipo}" required="true"
				requiredMessage="A informação 'Tipo' é obrigatória" >
					<f:selectItem itemLabel="Fisica" itemValue="F" />
					<f:selectItem itemLabel="Juridica" itemValue="J" />
				</p:selectOneRadio>

				<h:outputLabel value="Nome/Razão Social:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.nome}" required="true"
				requiredMessage="A informação 'Nome/Razão Social' é obrigatória" />

				<h:outputLabel value="Nome Fantasia:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.fantasia}" />

				<h:outputLabel value="Logradouro:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.logradouro}" required="true"
				requiredMessage="A informação 'Logradouro' é obrigatória" />

				<h:outputLabel value="Número:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.numero}" required="true"
				requiredMessage="A informação 'Número' é obrigatória" />

				<h:outputLabel value="Complemento:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.complemento}" />

				<h:outputLabel value="Bairro:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.bairro}" />

				<h:outputLabel value="Cep:" />
				<p:inputMask mask="99999-999" value="#{bean.objeto.cep}" />

				<h:outputLabel value="Cidade:"/>
				<p:selectOneMenu value="#{bean.selectedCidade}">
					<f:selectItems value="#{bean.cidades}" />
				</p:selectOneMenu>

				<h:outputLabel value="Telefone 1:" />
				<p:inputMask mask="([telefone removido]" 
					value="#{bean.objeto.telefone1}" />

				<h:outputLabel value="Telefone 2:" />
				<p:inputMask mask="([telefone removido]" 
					value="#{bean.objeto.telefone2}" />

			</h:panelGrid>

			<h:panelGrid columns="2" cellpadding="4" border="1">

				<h:outputLabel value="Telefone 3:"/>
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.telefone3}" />

				<h:outputLabel value="Celular:" />
				<p:inputMask mask="([telefone removido]"
					value="#{bean.objeto.celular}" />

				<h:outputLabel value="Data Nasc.:" />
				<p:inputMask mask="99/99/9999"
					value="#{bean.objeto.data_nascimento}">
					<f:convertDateTime pattern="dd/MM/yyyy"
						timeZone="#{initParam.timezone}" />
				</p:inputMask>

				<h:outputLabel value="CPF/CNPJ:" />
				<p:inputMask value="#{bean.objeto.cpf_cnpj}" />

				<h:outputLabel value="RG/IE:" />
				<p:inputText style="text-transform:uppercase;"
					value="#{bean.objeto.rg_ie}" />

				<h:outputLabel value="E-mail:" />
				<p:inputText style="text-transform:lowercase;"
					value="#{bean.objeto.email}" />

				<h:outputText value="Atributos:" />

				<h:panelGrid columns="2" cellpadding="4">

					<h:outputText value="Cliente:" />
					<p:selectBooleanCheckbox value="#{bean.objeto.atrib_cliente}"
						rendered="#{bean.habilitaCadastro}" />

					<h:outputText value="Fornecedor:" />
					<p:selectBooleanCheckbox value="#{bean.objeto.atrib_fornecedor}"
						rendered="#{bean.habilitaCadastro}" />

					<h:outputText value="Funcionário:" />
					<p:selectBooleanCheckbox value="#{bean.objeto.atrib_funcionario}"
						rendered="#{bean.habilitaCadastro}" />

					<h:outputText value="Prestador de Serviço:" />
					<p:selectBooleanCheckbox
						value="#{bean.objeto.atrib_prestador_servico}"
						rendered="#{bean.habilitaCadastro}" />

					<h:outputText value="Outro:" />
					<p:selectBooleanCheckbox value="#{bean.objeto.atrib_outro}"
						rendered="#{bean.habilitaCadastro}" />

				</h:panelGrid>

			</h:panelGrid>

		</h:panelGrid>

	</ui:define>

Hebert_Coelho 17 de jan. de 2013

Opa, valeu pelo apoio.

Te recomendo olhar o manual do primefaces. Ele mostra quais os estilos css que você pode alterar de cada componente dele.

Se não me engano, um h:outputText utiliza o label do CSS. Seria ele que você precisaria alterar.

Agora, qual propriedade css alterar e o que adicionar/remover não sei te falar. Sorry.

rodrigomarcelo 18 de jan. de 2013

aluisiodsv:
O Flex usa o flash para renderizar um formulário por exemplo.
Já o JSF usa o HTML. Se estiver começando verá q é um mundo bem grande.

E sim, é possível tbm deixar com o tamanho em porcentagem.

aluisiodsv, você teria algum exemplo pra me passar?

Embora entenda a teoria, ainda nã consegui fazer… não consegui ainda definir o tamanho das colunas por percentual =/

Abraço

aluisiodsv 18 de jan. de 2013

Se eu entendi direito, provavelmente vc quer cada coluna com uma porcentagem diferente, então use a seguinte propriedade do panelGrid:

<h:panelGrid columnClasses="column1Class, column2Class">
    ...
</h:panelGrid>

e defina estas duas classes em um css:

.column1Class {
    width: 30%;
}
.column2Class {
    width: 70%;
}

Lembrando que as classes foram separadas por vígula e atendem respectivamente as colunas definidas.

rodrigomarcelo 18 de jan. de 2013

aluisiodsv:
Se eu entendi direito, provavelmente vc quer cada coluna com uma porcentagem diferente, então use a seguinte propriedade do panelGrid:
<h:panelGrid columnClasses="column1Class, column2Class">
    ...
</h:panelGrid>
e defina estas duas classes em um css:
.column1Class {
    width: 30%;
}
.column2Class {
    width: 70%;
}
Lembrando que as classes foram separadas por vígula e atendem respectivamente as colunas definidas.

Valeu meu querido, agora deu certinho…

Eu já tinha tentado isso, mas estava declarando errado o css…

Muito obrigado! Mesmo!

Abraço

Criado 17 de janeiro de 2013

Ultima resposta 18 de jan. de 2013

Respostas 8

Participantes 3

8 Respostas

Topicos relacionados