mai 06

Jquery com JSF

Quem trabalha com JSF com certeza já viu os ids dos elementos html gerados por ele da seguinte maneira  form:idElementoPai:idElemento . Mesmo usando a propriedade prependId = false da tag h:form alguns elementos aninhados ganham o id do pai.

Se você usa javascript puro para buscar os elementos pelo id utilizando document.getElementById(“form:idElementoPai:idElemento”) não temos problema algum, tudo funciona! Porém quando utilizamos jquery , a seleção de um elemento por id $(‘#form:idElementoPai:idElemento’)  simplesmente não funciona, e muitas vezes adotei a alternativa de buscar pelo seletor de classe, me obrigando a adicionar classes css únicas(mas não é necessário defini-las em um arquivo css, basta declarar no elemento).

Porém é possível sim utilizar o seletor do Jquery nesses casos desses ids compostos, bastando adicionar o \\ antes do caracter :(dois pontos)  ficando da seguinte maneira:

$('#form\:idElementoPai\:idElemento')

mai 03

Remoção de um item de datatable sem dar update no form inteiro no primefaces

Bom o título é grande mas o assunto é confuso. Contextualizando, imagine que você queira permitir ao seu usuário incluir vários campos de telefone, porém ele pode inserir N telefones, para isso você precisa que sejam campos dinâmicos.

No JSF  você pode fazer isso criando uma coleção no seu managedBean e utilizando o componente datatable. Assim ao inserir um novo telefone você chama um método que acrescenta um novo item a sua coleção e da update no datatable.

Porém digamos que o usuário adicionou acidentalmente um outro campo de telefone e queira removê-lo. Para isso é necessário um botão que faça tal ação, chamando um método do managedBean para remover o item desejado da lista.

Mas, porém, contudo, no entanto dentro de um datatable o update de um p:commandButton só funciona passando o parâmetro @form, que faz um refresh do formulário inteiro, o que nem sempre é desejado, pois somente queremos dar update no datatable.

Depois de muito discutir com amigos e pesquisar uma solução, descobri uma forma de fazer isso utilizando o componente p:remoteCommand, da seguinte maneira:

No botão de remover você faz:


<p:commandButton value="remover" type="button"
     onclick="removeRC({param:#{row}})" ></p:commandButton>

ATENÇÂO, a solução acima não se aplica para a versão 3.5+ do primefaces, caso esteja utilizando-a faça da seguinte maneira:


<p:commandButton value="remover" type="button"
     onclick="removeRC([{name:'param',value:#{row}}])" ></p:commandButton>

Onde row é o nome do atributo rowIndexVar do p:dataTable.

Aí fora da datatable vc usa um p:remoteCommand:


<p:remoteCommand name="removeRC" 
    update="datatableID" actionListener="#{MB.remove}">

</p:remoteCommand>

E pronto, é só agora fazer seu MB com os métodos como o exemplo abaixo e você conseguirá contornar esse bug do primefaces

@ManagedBean(name = "MB")
@ViewScoped
public class MB {

	private List<String> telefones;	

	public MB() {

		telefones = new ArrayList();
		for (int i = 0; i < 3; i++) {
			telefones.add(new String());
		}
	}		

	public void addList() {
		telefones.add(new String());
	}

	public void remove(ActionEvent event) {
		FacesContext context = FacesContext.getCurrentInstance();
		Map map = context.getExternalContext().getRequestParameterMap();		
		int row = Integer.parseInt(map.get("param"));
		telefones.remove(row);
	}

	public List getTelefones() {
		return telefones;
	}

	public void setTelefones(List telefones) {
		this.telefones = telefones;
	}
}

jan 18

Richfaces 4 com jsf 2 e tomcat 6

Lá vou eu me aventurar a utilizar o richfaces 4, que ainda está em versão de milestone 5. Mas vamo que vamo para ver o que ele tem de melhor ou pior que o primefaces.
Primeiro problema dele é a documentação falha, pois a última versão do richfaces vem com mais jars do que a documentação diz que precisa, e além disso são necessários outros 3 jars para conseguir rodar.

Assim é necessário baixar o richfaces e também os seguintes jars cssparser-0.9.5.jar, guava-r07.jar and sac1-3.jar e adicioná-los ao seu classpath para só então conseguir rodar sua aplicação jsf 2 com richfaces. A é claro que são necessárias também as bibliotecas do jsf 2 né.

Assim que tiver novidades postarei aqui, mas só para fazer rodar já me levou um tempinho, portanto fica aí a dica.

nov 10

JSF com JSTL, utilizando tag c:if

Primeiramente, não recomendo sua utilização, prefiro usar para testar se algum componente deve ser exibido ou não o atributo rendered das tags do JSF. Mas caso seja necessário sua utilização temos que atentar para 2 pontos, primeiro que a expressão não se inicia com # como as EL do JSF, mas sim com $;  segundo isso só funciona com jstl 1.1 ou 1.2, devendo ser utilizada assim a uri “http://java.sun.com/jsp/jstl/core” ao invés de “http://java.sun.com/jstl/core”, que é da 1.0 .

Assim sendo um teste simples ficaria da seguinte maneira:

<c:if test="${MB.atributo != null}">
      ...
</c:if>

É isso, estava passando por esse problema hoje e depois de googlar um pouco achei a solução e estou aqui repassando.

out 14

Biblioteca de componentes para JSF 2

Venho aqui neste post recomendar apenas, para quem quer utilizar JSF 2, e estava acostumado a utilizar richfaces, que para a versão 2 do JSF não está ainda com versão estável, recomendo o primefaces , que é uma suite de componentes muito completa, de muito fácil utilização. Bastando apenas baixar o jar do primefaces, e adicionar a suas páginas o namespace xmlns:p=”http://primefaces.prime.com.tr/ui”. No site, há um livedemo, que mostra cada componente, e o código de sua utilização.


Um problema apenas que eu tive em utilizá-lo, foi quando tive que usar outro componente que utilizava jquery em mesma página que estivesse utilizando o primefaces, pois como ele utiliza o jquery embutido no jar, ele acaba referenciando o arquivo jquery errado, o que faz com que os componentes não funcionem.

Mas se você não for usar outro componente que utilize jquery também, é uma ótima pedida o primefaces.

out 01

Fazendo richfaces funcionar com JSF no tomcat 6

Depois de muito garimpar  consegui fazer funcionar o richfaces , vou resumir do que precisamos:

1)Baixar os JARs e colocalos no classpath da aplicação

1.1) richfaces-api-3.3.0.GA.jar

1.2)richfaces-impl-3.3.0.GA.jar

1.3)richfaces-ui-3.3.0.GA.jar

1.4)commons-logging-1.1.1.jar

1.5)commons-digester-1.8.jar

1.6)commons-beanutils-1.6.1.jar

2)adicionar ao web.xml do seu projeto o seguinte

<context-param>

<param-name>org.richfaces.SKIN</param-name>

<param-value>blueSky</param-value>

</context-param>

<context-param>

<param-name>org.richfaces.CONTROL_SKINNING</param-name>

<param-value>enable</param-value>

</context-param>

<filter>

<display-name>RichFaces Filter</display-name>

<filter-name>richfaces</filter-name>

<filter-class>org.ajax4jsf.Filter</filter-class>

</filter>

<filter-mapping>

<filter-name>richfaces</filter-name>

<servlet-name>Faces Servlet</servlet-name>

<dispatcher>REQUEST</dispatcher>

<dispatcher>FORWARD</dispatcher>

<dispatcher>INCLUDE</dispatcher>

</filter-mapping>

3) Adicione às suas JSPs

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

e pronto , agora para mais detalhes sobre como desfrutar desse framework  fenomenal acesse sua documentação .

out 01

Problemas com Datatable

Vou começar com um pequeno problema , simples porém me levou um tempo para descobrir a solução( méritos para meu caro colega Salomão) . Um pequeno briefing do caso:

Estava eu desenvolvendo uma aplicação simples utilizando JSF + hibernate quando me deparei com um pequeno problema, como passar o objeto listado na linha da minha datatable para uma outra página JSP para possível detalhamento, exclusão ou alteração das propriedades do objeto, o qual é um managed bean. Depois de algumas horas perdidas no google em vão, meu caro amigo Salomão me forneceu a malda, utilizar a tag <f:setPropertyActionListener>. Vou mostrar um exemplo para facilitar o entendimento do uso da tag.

<h:form>

<h:datatable value=”#{usuario.livros}”  var =”livrousu”>

<h:commandLink  value = “#{livrousu.nome}” action=”detalhar”>

<f:setPropertyActionListener value = “#{livrousu.id}” target = “#{livro.id}” />

<f:setPropertyActionListener value = “#{livrousu.nome}” target = “#{livro.nome}” />

<f:setPropertyActionListener value = “#{livrousu.resumo}” target = “#{livro.resumo}” />

</h:commandLink>

</h:datatable>

<h:/form>

Onde livro é um managed bean com escopo REQUEST o qual se relaciona com usuário através de um ArrayList de livros na classe Usuario.
Na tag o atributo value é preenchido com a expressão do atributo do objeto que está sendo listado na datatable e o atributo target é a expressão com o atributo do managed bean Livro que tem escopo Request o qual será setado o valor do objeto listado.
Assim sendo ao clicar no commandLink eu sou levado para a página de detalhamento do livro que irá buscar no Managed Bean Livro suas propriedades, setadas através da tag .

Ainda não consegui descobrir um meio de passar o objeto inteiro, apenas passar seus atributos. Mas isso já resolveu meu problema.

Se alguém souber outros métodos de fazer a passagem de valores através do datatable por favor poste comentários sobre tal.