DynaFaces Örneği (Netbeans 6.1 - Visual JSF)

1. Yeni bir Visual Web JSF projesi yaratınız. (Ben Java EE5 ve dolayısıyla JSF 1.2'yi seçtim).

2. Projenizin Component Library bölümü üzerine gelip sağ fare butonuna kullanarak DynaFaces Components (0.2)'yi ekleyiniz.



3. Eğer Java EE5 yerine JDK 1.4'ü şeçtiyseniz web.xml dosyasının Faces Servlet kısmı aşağıdaki gibi olmalıdır.



4. DynaFaces paletinden sayfanıza AjaxTransaction'ı sürükleyip bırakınız.





5. Page1.jsf görsel sayfasına bir WoodStock Basic bölümünden bir adet statictext ve bir adet textfield yerleştiriniz.

6. textField1 üzerinde iken sağ fare butonu ile menüden "Configure Ajax Transactions"ı seçiniz sol üst tarafta checkbox1 olduğundan emin olunuz. Transaction'ın ismi "ajaxTransaction1"dir. "Send Input" kısmını "Yes", "Re-Render" kısmını "No" Yapınız.




7. staticText1 üzerine geliniz, sağ fare butonu ile menüden "Configure Ajax Transactions"ı seçiniz sol üst tarafta staticText1 olduğundan emin olunuz. Transaction'ın ismi "ajaxTransaction1"dir. "Send Input" kısmını "No", "Re-Render" kısmını "Yes" Yapınız.

8. textField1 process value change event'i için aşağıdaki Java kodunu yazınız. (textField1 üzerinde iken çift tıkladığınızda açılan Java kod kısmına)
public void textField1_processValueChange(ValueChangeEvent event) {
staticText1.setText(textField1.getText());
}

9. textField1 onclik'e aşağıdaki Java Script kodunu yazınız:
DynaFaces.Tx.fire("ajaxTransaction1", "textField1");

10. Projenizi artık çalıştırabilirsiniz.

Aşağıda örnek projeler bulunmaktadır. İlki JDK 1.4 (JSF 1.1), ikincisi ise Java EE 5 (JSF 1.2) örneğidir.

Dynamic Faces UTF-8 probleminin giderilmesi

Dynamic Faces JSF extensions projesinin bir kısmıdır ve JSF ögelerinin ajaxlaştırılmasını ve kısmi olarak tazelenmesini sağlar.

Ancak Türkçe dahil uluslararası karakterlerde ufak bir soruna sahiptir. Aşağıda bu sorunun nasıl giderileceği anlatılmaktadır.

JSF/JSP sayfalarınız UTF-8 olsa bile kısmi olarak Ajax cevabı ISO-8859-1 olmaktadır. Halbuki tazelenen öge örneğin bir listbox ise bu listbox içerisindeki karakterlerin de UTF-8 olarak işleme tabi tutulması gerekir.

ISO-8859-1 karakter “encoding” seçilmediği taktirde varsayılan “encoding” tir. O halde biz “encoding”i aşağıdakine benzer olarak yapmalıyız:

context.getExternalContext().setResponseCharacterEncoding("UTF-8");

Değişikliğin yapılması:
1. https://jsf-extensions.dev.java.net/servlets/ProjectDocumentList?folderID=5580&expandFolder=5580&folderID=0 adresinden en son jsf-extensions-dynamic-faces’i indiriniz. İndirdiğiniz hem binary hem de kaynak olmalı.

2. Kaynak kodları olan dosyayı diskinizde bir klasöre açınız.

3. NetBeans’te “Java Project with existing code” ile yeni bir proje yaratınız ve mevcut kaynak kodlar olarak 2nci adımda belirtilen klasördeki jsf-extensions-dynamic-faces kaynak kodlarınız seçiniz. Projenizin adı 1nci adımda indirdiğiniz binary jar dosyasının adı ile aynı olmalıdır (örnek: jsf-extensions-dynamic-faces-0.1)

4. Projenin class path’ine aşağıdaki kitaplık ve jar dosyaları tanımlanmalıdır:
- Kitaplıklar : JSF 1.2, Web UI Components
- Jar dosyaları: el-api.jar, jsp-api.jar, servlet-api.jar, shale-remoting.jar

5. com.sun.faces.extensions.avatar.lifecycle paketindeki AsyncResponse.java dosyasını NetBeans içerisinden açınız ve aşağıdaki metoda kırmızı ile boyan kısmı ekleyiniz.

public void installOnOffResponse(FacesContext context) {
context.getExternalContext().setResponseCharacterEncoding("UTF-8");
origResponse = context.getExternalContext().getResponse();
context.getExternalContext().setResponse(getNoOpResponse(origResponse));
}

6. Projenizi derleyiniz ve dist klasöründeki jar dosyasını
${netbeans_installation_dir}/visualweb1/modules/ext klasörüne koyunuz.

Eğer dilerseniz projenizi derlediğiniz build klasörünün altındaki com.sun.faces.extensions.avatar.lifecycle paketinin altında bulunan class uzantılı dosyaları 1nci adımda indirdiğiniz original binary jar dosyasının ilgili kısmına da kopyalayıp kullanabilirsiniz.

Aşağıda yukarıdaki adımlar uygulanarak sorunun düzeltildiği 2 jar dosyasının bulunduğu zip'li dosya bulunmaktadır, aşağıdaki linkten indirip hemen kullanmaya başlayabilirsiniz.