Problema com JSF Primefaces

Galera, to desenvolvendo um sistema de pausas para a empresa, e estou na tela de login. consegui fazer algumas coisas, porém, ocorre alguns erros:
o primeiro deles, quando eu clico no: <p:commandLink value=“1ª Acesso"
oncomplete=“PF(‘dlgCadastro’).show();” actionListener=”#{usuarioBean.novo()}" /> que esta no meu xhtml esta acusando erro: GRAVE:

javax.faces.component.UpdateModelException: javax.el.PropertyNotWritableException: /pages/testePrimeFaces.xhtml @25,31 value="": Illegal Syntax for Set Operation
Caused by: javax.el.PropertyNotWritableException: /pages/testePrimeFaces.xhtml @25,31 value="": Illegal Syntax for Set Operation
at com.sun.faces.facelets.el.TagValueExpression.setValue(TagValueExpression.java:136)
at javax.faces.component.UIInput.updateModel(UIInput.java:832)
… 31 more
Caused by: javax.el.PropertyNotWritableException: Illegal Syntax for Set Operation

mas ele abre o dialogo de adicionar novo usuário.

depois disso, quando eu digito, nome, matricula e senha, e clico em cadastrar, ele acusa outro erro: Caused by: javax.el.PropertyNotFoundException: Target Unreachable, ‘usuario’ returned null

ja procurei várias coisas e em vários videos, inclusive to fazendo este projeto a partir de um curso que tem no youtube. só que estou nesse dilema.

tentei anexar documentos dos arquivos do xhtml, bean e a classe java, mas nao deu certo pq sou usuário novo.
o bean:
package br.stefanini.projetopausa.bean;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.omnifaces.util.Messages;

import br.stefanini.projetopausa.domain.Usuario;

@SuppressWarnings(“serial”)
@ManagedBean
@ViewScoped
public class UsuarioBean implements Serializable {

private Usuario usuario;

public Usuario getUsuario() {
	return usuario;
}

public void setUsuario(Usuario usuario) {
	this.usuario = usuario;
}

public void salvar() {
	Messages.addGlobalInfo("Usuário:  " + usuario.getNome() + " de matricula: " + usuario.getMatricula()
			+ " cadastrado com sucesso!");
}

public void novo() {
	usuario = new Usuario();
}

}


o xhtml:

<?xml version="1.0" encoding="UTF-8" ?>
<h:outputStylesheet library="css" name="file.css" />

<title>Teste de Login 2</title>

</h:head>
<h:body>
<h:form>
<h:panelGrid width=“100%” style=“text-align:center”>

<p:graphicImage library=“imagens” name=“stefanini.jpg” width=“500” />

		<div class="login-box" />
		<h1>Login</h1>

		<!-- Campo de usário -->
		<p:inputText value=""
			placeholder="Matricula" />

		<!-- Campo da senha -->
		<p:password value="" placeholder="Senha" />

	</h:panelGrid>

	<h:panelGrid columns="2" width="100%" style="text-align:center">

		<p:commandLink value="1ª Acesso"
			oncomplete="PF('dlgCadastro').show();" actionListener="#{usuarioBean.novo()}" />

		<p:commandButton value="Entrar" />

	</h:panelGrid>

</h:form>

<p:dialog header="Cadastro de Usuário" widgetVar="dlgCadastro"
	draggable="false" resizable="false" modal="true" >

	<h:form>
		<h:panelGrid>
			<p:inputText value="#{usuarioBean.usuario.nome}" placeholder="Nome" size="30" maxlength="55" />
			<p:inputText value="#{usuarioBean.usuario.matricula}" placeholder="Matricula" size="15"
				maxlength="7" />
			<p:inputText value="#{usuarioBean.usuario.senha}" placeholder="Senha" size="15" maxlength="12"/>
		</h:panelGrid>
		<h:panelGrid columns="2">
			<p:commandButton value="Cadastrar" actionListener="#{usuarioBean.salvar()}" />
			<p:commandButton value="Cancelar" oncomplete="PF('dlgCadastro').hide();"/>
		</h:panelGrid>
	</h:form>
</p:dialog>

</h:body>

Retira o value="" do inputText e do password, ai o erro vai sumir. Se você não quer ligar o componente a nenhum atributo é só não por

é, eu reparei nisso agora e tirei e nao deu erro…
porém ele nao ta exibindo a mensagem que era para exibir no primefaces, quando eu chamo o metodo pelo botão cadastrar no xhtml:

<p:commandButton value=“Cadastrar"
actionListener=”#{usuarioBean.salvar()}" />

sabe me dizer pq?

Você colocou o componente <p:messages /> na página?

coloquei não, pq na video aula que eu vi, ele nao usa isso, olha: https://www.youtube.com/watch?v=RxCl2g8JLOo&list=PL_GwGUsBlNyfI0W3ggfffhBdJUqB4981Z&index=46

amigo consegui, realmente faltava esse componente mesmo, eu nao reparei na videoaula passada. muito obrigado. :slight_smile:

amigo mike deu certo, funcionou se não for pedir muito, como eu faria para estilizar o primefaces de acordo com o que eu quero?
pq eu tinha criado de outra forma sem ser com primefaces, e ficou com outra cara, mas não conseguia chamar um metodo dentro da classe bean, pq nao tinha actionlistener… ai queria estilizar os componentes. sei que tem a tag style, mas dizem que não é esta muito bom no prime.

Amigo, recomendo comprar um template do primefaces.

É facinho alterar

Como JSF gera um monte de tag por baixo, é necessario inspecionar o componente pelo navegador para ver as tags e classes css geradas.

Sempre que eu quero alterar o css de um componente, eu defino um styleClass a ele e inpseciono o componente para ver o que foi gerado e só então eu mexo na classe css.

Segue o exemplo:

<div class="ui-panelgrid ui-panelgrid-responsive">
    <div class="ui-grid-row">
           <div class="ui-panel-grid-cell">

           </div>
    </div>
<div>
o css seria assim:

.ui-panelgrid.ui-panelgrid-responsive .ui-grid-row .ui-panel-grid-cell {
padding: 4px;
}

Perceba o seguinte, cada classe você irá comecar com um ponto (.), como ui-panelgrid e ui-panelgrid-responsive estão no mesmo componente, eu deixo eles tudo juntos (.ui-panelgrid.ui-panelgrid-responsive), ui-grid-row e ui-panel-grid-cell estão em outros componentes, entao eu dou um espaço entre as classes.

O Inspecionar do navegador será o seu melhor amigo para isso

Eu pessoalmente acho bobeira e caro.
A menos que seja um projeto da empresa e o prazo seja curtíssimo.

É bobeira pois você não pratica o css e caro pq é em dolar.

A menos que seja um projeto da empresa e o prazo seja curtíssimo, ai talvez compense.
Mas se esta aprendendo JSF, fique longe de comprar templates.

O que você pode fazer para aprender é entrar no site da DEMO do template, inspecionar o código e tentar fazer parecido, para aprender a fazer tal design

eu quero aprender mesmo… então to com um novo problema… o meu código xhtml:

<?xml version="1.0" encoding="UTF-8" ?>
<h:outputStylesheet library="css" name="file.css" />

<title>Login</title>

</h:head>
<h:body>
<p:growl id=“mensagem”/>
<h:form>
<h:panelGrid width=“100%” style=“text-align:center”>

<p:graphicImage library=“imagens” name=“stefanini.jpg” width=“500” />

		<div class="login-box" />
		<h1>Login</h1>

		<!-- Campo de usário -->
		
		<p:inputText placeholder="Matricula" />

		<!-- Campo da senha -->
		<p:password placeholder="Senha" />

	</h:panelGrid>

	<h:panelGrid columns="2" width="100%" style="text-align:center">

		<p:commandLink value="1ª Acesso"
			oncomplete="PF('dlgCadastro').show();"
			actionListener="#{usuarioBean.novo()}" update=":formCadastro:painelCadastro" />

		<p:commandButton value="Entrar" />

	</h:panelGrid>

</h:form>

<p:dialog header="Cadastro de Usuário" widgetVar="dlgCadastro"
	draggable="false" resizable="false" modal="true">

	<h:form id="formCadastro">
		<h:panelGrid id="painelCadastro">
			<p:inputText value="#{usuarioBean.usuario.nome}" placeholder="Nome"
				size="30" maxlength="55" />
			<p:inputText value="#{usuarioBean.usuario.matricula}"
				placeholder="Matricula" size="15" maxlength="7" />
			<p:inputText value="#{usuarioBean.usuario.senha}"
				placeholder="Senha" size="15" maxlength="12" />
		</h:panelGrid>
		<h:panelGrid columns="2">
			<p:commandButton value="Cadastrar"
				actionListener="#{usuarioBean.salvar()}" update=":mensagem :formCadastro:painelCadastro"/>
			<p:commandButton value="Cancelar"
				oncomplete="PF('dlgCadastro').hide();" />
		</h:panelGrid>
	</h:form>
</p:dialog>

</h:body>

só que eu quero por um icone ao lado do <p:inputText placeholder=“Matricula” />
e só consegui usando
só que ele fica em cima, ai botei <h:panelgrid colums 2, só que ele não fica no centro, nem se eu por widht 100% nem se eu por style text-alighn center… alguem sabe me dizer como faço? e se width é pra por no centro tbm hehe… procurei tanto já como por um icone de usuario só que a unica maneira q eu achei foi essa, só q ainda n deu certo… ja troquei e cirei varios <h:form tbm e nao deu.:frowning:

A versão 6.2 do PrimeFaces tem suporte a isso.

Coloca no google: inputGroup PrimeFaces ou vai no showcase e procura la

só na versão 6.2? e na versão 5.2 nao tem suporte a por icone no inputtext?

Você pode fazer na mão se quiser, mas utilizando o framework apenas no 6.2.

Pq não atualiza pra 6.2?
É melhor você aprender na versao atual do que na antiga

mas se eu atualizar e quiser os componentes que nem no username desse link: https://www.primefaces.org/showcase/ui/input/inputGroup.xhtml é só por assim?

<p:inputText placeholder=“Username” />

eu botei esse código:

</h:panelGrid>

<h:panelGrid columns=“2” style=“text-align:center” >

<p:inputText placeholder=“Username” />

		<!-- Campo da senha -->
		<p:password placeholder="Senha" />
	</h:panelGrid>

só que ele não fica centralizado ¬¬ aff, ta ficando a esquerda tudo… e eu queria que ficasse no centro como tela de login msm

Ai já é questão de CSS.

Da uma estudada sobre grid css do PrimeFaces
https://www.primefaces.org/showcase/ui/panel/grid.xhtml

Documentação completa:

https://forum.primefaces.org/viewtopic.php?t=47357

PS:Não use a classe ui-grid-col, há alternativas melhores

Vou da uma olhada pra vê se entendi… pq ao meu ver do jeito que eu fiz era para dar certo… pq painel grid coluna 2 são 2 colunas… mas vou da uma olhada… é uma procura mais de algum vídeo no youtube

Na verdade não, o text-align como o próprio nome diz: alinha texto e o panelgrid por padrão é uma table

Adicione margin: 0 auto a classe ui-panelgrid, que ai ela vai centralizar.

Mas lembrando, isso é problema de CSS e não de JSF/PrimeFaces, na dúvida inspecione

Entendo seu posicionamento.

Apenas pra deixar aqui a titulo de conhecimento aos navegantes,

Vamos analisar pelo prisma do custo beneficio: Imagine que você tem um projeto pra entregar a uma empresa e precisa fazer a parte de designer, o que vai ser mais barato? Contratar um designer a um custo (digamos R$ 2.000,00) ou comprar um template por $ 80? O que vai ser mais rápido: Esperar um designer concluir um projeto ou implementar um template?

Além do mais comprando o template esta ajudando o projeto que tanto nos ajuda.

Mas cada caso é um caso. Tem que ser estudado.