WEBCODELOG

Continuando com a série de posts sobre AJAX, agora vou mostrar como é mais simples desenvolver aplicativos utilizando um framework e o escolhido foi JavaServer Faces.

A utilização de frameworks é uma mão-na-roda, tanto no sentido de diminuir muito a reconstrução de funcionalidades básicas, tão quanto para padronizar componentes. O JavaServer Faces há tempos é uma base de desenvolvimento segura, padronizada e rica em componentes web 2.0, seguindo este padrão o pessoal do JBoss criou o RichFaces, que futuramente foi chamado de Ajax4Jsf, nada mais é que um pacote de componentes pré-definidos para construção de aplicativos utilizando AJAX. No wikipedia você encontra uma descrição mais detalhada sobre JSF e RichFaces.

Em seguida vou demonstrar um desafio feito por mim mesmo, veja aqui, construindo um auto-completar utilizando JSF com Richfaces.

Os conceitos de JSF e RichFaces não serão discutidos, ou seja, apenas vou demonstrar como criar a aplicação sem detalhar a configuração feita no web.xml e no faces-config.xml, futuramente dedicarei um post sobre essas configurações.

Em seguida será demonstrado como construit um auto-completar cujo conteúdo será o nome de países, portanto, a estrutura básica das classes é esta:

O arquivo web.xml está configurado básicamente para trabalhar com os framewroks JSF e RichFaces.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
id="WebApp_ID" version="2.5">
<display-name>ClubesRich</display-name>
<!-- RichFaces Config -->
<context-param>
<param-name>org.richfaces.SKIN</param-name>
<param-value>blueSky</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>server</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>

<!-- Faces Config -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<!-- Faces Mapping -->
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

<!-- Database Config -->
<resource-ref>
<description>DB Connection</description>
<res-ref-name>jdbc/Clubes</res-ref-name>
<res-type>javax.sql.DataSource</res-type>
<res-auth>Container</res-auth>
</resource-ref>
<!--  -->
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsf</welcome-file>
</welcome-file-list>
</web-app>

Já o ManagerBean está assim configurado no faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xi="http://www.w3.org/2001/XInclude"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
<managed-bean>
<managed-bean-name>regiaoControl</managed-bean-name>
<managed-bean-class>com.clubs.control.RegiaoControl</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
</managed-bean>
<navigation-rule>
<display-name>autocomplete</display-name>
<from-view-id>/autocomplete.jsp</from-view-id>

</navigation-rule></faces-config>

Veja abaixo o manager bean terá um método chamado autoCompletePais que receberá um parametro do tipo Object e retorna um ArrayList do tipo Pais.

public ArrayList<pais> autoCompletePais(Object o){
return rdao.getAllPais( o.toString() );
}

E por fim, o arquivo autocomplete.jsp, que foi mapeado no faces-config, mostrará como é simples utilizar o recurso SuggestionBox do pacote RichFaces e fazer um auto-completar com diversos recursos, acima de tudo bonito e eficaz no dia-a-dia, veja:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>

<f:view>
<h:form>
<rich:panel>
<f:facet name="header"><h:outputText value="Digite o Pais:"/></f:facet>
<h:inputText value="#{regiaoControl.pais.nome}" id="campo" />
<rich:suggestionbox height="150"
width="150"
for="campo"
fetchValue="#{campo.nome}"
suggestionAction="#{regiaoControl.autoCompletePais}"
var="campo">
<h:column>
<h:outputText value="#{campo.id_pais}"/>
</h:column>
<h:column>
<h:outputText value="#{campo.nome}"/>
</h:column>
</rich:suggestionbox>
</rich:panel>
</h:form>
</f:view>

Veja o resultado final, tornando a utilização do software mais agradável.