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…
Eu já fiz colocando apenas style=“width: 40%”
É isso? O.o
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.
[quote=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.[/quote]E é possível deixar tudo, até o tamanho de toda a fonte do projeto. [=
[quote=Hebert Coelho]Eu já fiz colocando apenas style=“width: 40%”
É isso? O.o[/quote]
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="(99)9999-9999"
value="#{bean.objeto.telefone1}" />
<h:outputLabel value="Telefone 2:" />
<p:inputMask mask="(99)9999-9999"
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="(99)9999-9999"
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>
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.
[quote=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.[/quote]
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
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.
[quote=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.[/quote]
Valeu meu querido, agora deu certinho…
Eu já tinha tentado isso, mas estava declarando errado o css…
Muito obrigado! Mesmo!
Abraço