Integracja technologii Facelets i Ajax4JSF
Za punkt wyjścia do dzisiejszego artykułu przyjmę, że czytelnik ma do dyspozycji jakąś działającą aplikację JSF 1.2 + Facelets, do której będzie można dołożyć Ajax4JSF i przetestować poprawność integracji. Jeśli takiej aplikacji akurat nie ma pod ręką, to można ją sobie bardzo łatwo wygenerować używając Red Hat Developer Studio, o którym pisałem w artykule "Już jest Red Hat Developer Studio". Tą właśnie aplikacją, wygenerowaną przy użyciu IDE od Red Hat’a będę się posługiwał w treści artykułu. Jak wygenerować taką przykładową aplikację JSF 1.2 + Facelets pokazałem przy okazji artykułu "Integracja JSF 1.2 i Spring z pomocą Red Hat Developer Studio".
Zaczynamy od pobrania biblioteki Ajax4JSF. Ja pobrałem najnowszą w chwili pisania tego artykułu wersję 1.1.1 (plik jboss-ajax4jsf-1.1.1-bin.zip). Archiwum rozpakowujemy i kopiujemy plik \ajax4jsf\lib\ajax4jsf-1.1.1.jar do folderu \WEB-INF\lib\ naszej aplikacji. Kolejny krok to dodanie poniższej konfiguracji do pliku web.xml:
<context-param>
<param-name>org.ajax4jsf.VIEW_HANDLERS</param-name>
<param-value>com.sun.facelets.FaceletViewHandler</param-value>
</context-param>
<filter>
<display-name>Ajax4jsf Filter</display-name>
<filter-name>ajax4jsf</filter-name>
<filter-class>org.ajax4jsf.Filter</filter-class>
</filter>
<filter-mapping>
<filter-name>ajax4jsf</filter-name>
<servlet-name>Faces Servlet</servlet-name>
<dispatcher>REQUEST</dispatcher>
<dispatcher>FORWARD</dispatcher>
</filter-mapping>
Następnie, z pliku faces-config.xml usuwamy deklarację mechanizmu obsługi widoku technologii Facelets, jako że teraz odpowiednia konfiguracja będzie wykonana przez Ajax4JSF, usuwamy więc element:
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
To by było na tyle, jeszcze tylko przekonamy się, że działa. Edytujmy dowolną stronę naszej aplikacji zawierającą element wprowadzania tekstu, tj. h:inputText (albo input z atrybutem jsfc="h:inputText"). Jeśli używamy aplikacji pochodzącej z Red Hat Developer Studio to będzie to plik \pages\inputname.xhtml. Do wybranego elementu h:inputText (lub input) dodajmy podelement a4j:suport, tak jak pokazano poniżej, dodajemy także deklarację przestrzeni nazw a4j:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
<input jsfc="h:inputText" id="name" value="#{person.name}">
<a4j:support event="onkeyup" reRender="personName" />
</input>
Atrybut event elementu a4j:support określa zdarzenie, które spowoduje wysłanie żądania AJAX do serwera, uaktualniając tym samym wartość właściwości name elementu zarządzanego JSF o nazwie person. Atrybut reRender określa, że każdorazowo po otrzymaniu odpowiedzi na wysłane żądanie AJAX zostanie odświeżony element strony z atrybutem id="personName". Więcej o samym Ajax4JSF można przeczytać w dokumencie "Ajax4jsf Developer Guide". Dodajmy więc na naszej stronie (zaraz pod elementem form) element do wyświetlania wartości #{person.name} z atrybutem id="personName", tj:
<h:outputText value="Wpisano: #{person.name}" id="personName"/>
Uruchommy teraz aplikację i przekonajmy się, że działa. Każde naciśnięcie (a właściwie zwolnienie) klawisza na klawiaturze powinno być odzwierciedlone w tekście wyświetlanym przez element h:outputText. U mnie wygląda to tak:
2 komentarze:
Witam, próbowałeś może wspierania swoich własnych komponentów JSF przez a4j?
Witam,
rozumiem, że chodzi o to czy próbowałem pisać swoje komponenty JSF które korzystały by z AJAX'a implementowanego przez Ajax4JSF. Nie, nie próbowałem ale zachęcam gorąco do zamieszczenia tutaj jakiegoś info jak to zrobić gdy już ci się uda.
Pozdrawiam.
Prześlij komentarz