15 Nov 06 ICEFaces agora open source também!!! com exemplo de dataTable e campo de texto autoComplete!

O ICEFaces, uma biblioteca de componentes JSF com um ótimo suporte para AJAX agora é open source!
sim, eu sei que isto ja saiu em quase todos os blogs, mas a pequena diferença é que aqui eu estou mostrando também exemplos de coisas que são muuito fácil de fazer com esta biblioteca
Vejam só como é muito fácil fazer uma tabela com paginação via AJAX, e um campo de texto com auto complete!
o código do projeto, alguma documentação e alguns exemplos podem ser encontrados no endereço: http://www.icefaces.org/.
Eles disponibilizaam também plugins para algumas IDEs, que integram a biblioteca na IDE, como o Eclipse+WebTools+JSF, o JDeveloper, o NetBeans e o Java Studio Creator 2.

Acessei a página, baixei a biblioteca e o plugin para Eclipse + WebTools + JSF e instalei no meu eclipse …
depois disto é só seguir este passo a passo:

1. Criei um novo projeto Web Dinâmico
2. adicionei ai projeto as facets ICEFaces e Java Server Faces
3. criei um managedbean escopo request (a forma fácil de fazer isto é abrir o faces-config.xml, dentro da página de managed beans clicar com o botão direito em request, new managed bean, marcar que quer criar uma classe nova e colocar o nome da classe e pacote desejados)
4. criei uma página home.jsp com o template do ICEfaces (que basicamente é uma página JSP simples ja com a taglib do ICEFaces incluida)
5. pronto, agora podemos começar a brincar!

TextBox com auto complete

dentro das tags: <ice:form> e </ice:form>
coloquei o código:

e no managed bean coloquei o seguinte código:

public class IceMBeanTest {
	private List
 list;

	public IceMBeanTest() {
		getBaseList();
	}

	private void getBaseList() {
		list = new ArrayList
();
		list.add(new SelectItem("urubatan", "Urubatan"));
		list.add(new SelectItem("urubatan", "Urubatan1"));
		list.add(new SelectItem("urubatan", "Urubatan2"));
		list.add(new SelectItem("urubatan", "Urubatan3"));
		list.add(new SelectItem("urubatan", "Urubatan4"));
		list.add(new SelectItem("aline", "Aline"));
		list.add(new SelectItem("aline", "Aline1"));
		list.add(new SelectItem("aline", "Aline2"));
		list.add(new SelectItem("aline", "Aline3"));
		list.add(new SelectItem("aline", "Aline4"));
		list.add(new SelectItem("vicente", "Vicente"));
		list.add(new SelectItem("vicente", "Vicente2"));
		list.add(new SelectItem("vicente", "Vicente3"));
		list.add(new SelectItem("vicente", "Vicente5"));
		list.add(new SelectItem("vicente", "Vicente6"));
		list.add(new SelectItem("juliano", "Juliano1"));
		list.add(new SelectItem("juliano", "Juliano"));
		list.add(new SelectItem("cabral", "Cabral"));
	}
	public List
 getList() {
		return list;
	}
	public void updateList(ValueChangeEvent evt) {
		String nv = (String) evt.getNewValue();
		getBaseList();
		if (nv != null && !"".equals(nv.trim())) {
			for (Iterator
 i = list.iterator(); i.hasNext();) {
				SelectItem s = i.next();
				if (!((String) s.getValue()).startsWith(nv))
					i.remove();
			}
		}
	}
}

toda vez que eu começo a digitar alguma coisa, o método public void updateList(ValueChangeEvent evt) é chamado, e faz a filtragem dos valores que devem ser mostrados como opção para o usuário, o ICEFaces traz a lista via ajax e mostra para o usuário mostrando algo parecido com isto:

que normalmente é um pé no saco de implementar, mas desta vez eu achei muuit fácil

DataTable com páginação via ajax

para fazer o data table com páginação, é praticamente o mesmo processo que quando se usa as tags do tomahawk, com a diferença que a páginação é feita via AJAX

criei uma classe para representar os dados que seriam mostrados na DataTable

public class DataObj {

	private final int i;

	private final String string;

	private final String string2;

	public DataObj(int i, String string, String string2) {
		this.i = i;
		this.string = string;
		this.string2 = string2;
	}

	public int getI() {
		return i;
	}

	public String getString() {
		return string;
	}

	public String getString2() {
		return string2;
	}

}

Adicionei uma propriedade no meu MBean que seria utilizada como valor para a DataTable:

	private List values;
	public List getValues() {
		if (this.values == null) {
			values = new ArrayList();
			for (int i = 0; i < 10000; i++) {
				values.add(new DataObj(i, "nome " + i, " qualquerTexto " + i));
			}
			System.out.println(new Date());
		}
		return values;
	}

	public Date getData() {
		return new Date();
	}

ou seja, uma propriedade que vai retornar 10000 itens “fake” para a lista, o System.out.println(new Date()); foi só para garantir que o método não era chamado toda hora, o a propriedade Data que foi criada é para imprimir uma data no formulário e tornar visivel que o request não é feito toda hora.
o código da JSF fica mais ou menos assim:

ou seja, praticamente o mesmo código utilizado para fazer a páginação com o tomahawk, mas com um resultado melhor funcionando via ajax
o código completo este neste zip, mas o zip não inclui as bibliotecas do icefaces, que foram configuradas automáticamente pelo plugin no eclipse.
Bom, acho que era isto, temos agora mais uma opção de componentes para JSF com suporte a AJAX, e isto esta ficando cada vez mais fácil de usar (estou pensando até em abandonar o ajax4jsf )

Se você gostou deste post, lembre-se de assinar o RSS feed do blog, para ser notificado de novos posts!

Tags: Dia a Dia, dia-dia, Eclipse, Java