Dúvidas JSF e CSS

Front-end
#1

Boa tarde pessoal,

Estou aprendendo JSF e tenho algumas perguntas.

1 - Qual o melhor componente para carregar uma foto de perfil?

2 - Estou usando um selectOneMenu e não consigo deixar os items dentro alinhados a esquerda?
É possível fazer isso com o css?

3 - Qual a melhor forma para alinhar formulários?
A princípio utilizei um “panelGrid” com a propriedade “columns=2”. Mas no meio do formulário
preciso colocar um link na frente de um dos componentes que explicaria o porque ter que por aquilo.
É onde tenho problemas, o link teria que estar em uma terceira coluna, mas se mudar a propriedade
"columns=3" bagunça todo o formulário.

4 - Ainda com o formulário. Está todo dentro de uma “div” e no css usei a propriedade
"text-align = right". Os “outputLabel” alinharam a direita mas os “inputText” não. Sabem o por que?

#2

Olá,

Já viu o framework Primefaces? http://www.primefaces.org/showcase/ui/home.jsf De uma boa navegada por la, vai achar muita coisa interessante e com exemplos práticos.

Respondendo as perguntas:

  1. Pode usar o proprio graphicImage do prime ou qualquer componente de imagem.

  2. Experimente por: style=“text-align:left;” no componente

  3. Da pra fazer com CSS, mas ae exige um pouco mais de conhecimento sobre. Uma alternativa é por “columns=3”, e onde for a terceira coluna e não tiver nada nela, coloque o componente <p:spacer />, q assim ele ira preencher a terceira coluna sem bagunçar o resto… ou ainda, criar um <h:panelGroup> dentro da coluna, e por quantos componentes quiser dentro dele.

  4. Coloque o código aqui. Pois fiz um teste rápido aqui e funcionou… ambos foram para a direita.

Espero ter ajudado.
Abraços.

#3

Obrigado por responder.

Questão 4. Descobri que é o painelGrid inteiro que não está alinhando a direita, os componentes dentro da coluna alinham.

Página JSF

<div id="cadastro">
	<h:form>							
		<h:panelGrid columns="2">
			<h:outputLabel value="Nome: "/>
			<h:inputText size="30"/>
			<h:outputLabel value="Sobrenome: "/>									
			<h:inputText size="30"/>									
		<h:panelGrid>
        <h:panelGrid>
			<h:commandButton value="Cadastre-se" styleClass="botaoCadastrar"/>
		</h:panelGrid> 																						
	</h:form>							
</div>

CSS

#cadastro{	
	width:400px; 
	text-align: right; 
	padding: 10px 0px 0px 0px;
	background-color: #FFFFFF; 
	font-size: 13px; 
	margin: 0 auto; 
	border-radius: 0px 0px 10px 10px;
}

Algo errado?

#4