12 Haziran 2008 Perşembe

DynaFaces - Tablo içerisinde kullanılan button gibi ögeler

Tablo içerisinde "button", "checkbox" vb. kontollar kullanıldığında bu kontrollardan DynaFaces eylemlerini başlatmak mümkün değildir. Aynı zamanda tabloda kullanılan tüm kontrollarda dinamik olarak rowId atanır.
Örneğin :
form1:table1:tableRowGroup1:tableColumn1:button1 kontrolunu kullanmamız yanlış olur, bunun yerine:
1nci satır için form1:table1:tableRowGroup1:0:tableColumn1:button1
2nci satır için form1:table1:tableRowGroup1:1:tableColumn1:button1
...

olarak kullanmamız gerekir. Dinamik olarak satır numarasını almak için (satır numaraları 0'dan başlar, 0 ilk satırdır, en son satır satır miktarı-1'dir):

(Tablo'nun button OnClick JavaScript kısmına aşağıdaki komutları yazabiliriz.)
DynaFaces.Tx.fire('ajaxTransaction1', 'form1:table1:tableRowGroup1:'+'#{currentRow.tableRow.rowId}'+':tableColumn1:button1');
return false;

Ancak DynaFaces için bu çalışmayacaktır. Burada bir "bug" söz konusu. Ancak "bug" giderilmiş durumda ise kullanabilirsiniz. Ancak eğer kullanamıyorsanız problemin çözümü şu şekilde:

1. tablonun dışında form üzerinde kullanmadığınız bir yere bir textField koyunuz. Button'un action event'i yerine artık textField'in valueChange event'ini kullanacağız. Button için yazdığınız Java kodunu TextField valueChange event Java koduna yerleştiriniz. TextField alanına Button JavaScript'i ile rowId'yi atamak suretiyle değerinin değişmesini ve rowId'nin Java kodumuz içerisinde kullanılmasını sağlayacağız.

2. DynaFaces transaction'ını Button'da kullanmayıp TextField için tanımlayınız (Send input "yes" olacak).

3. Button onClick JavaScript kodu :

document.getElementById('form1:textField1').setProps({value:'#{currentRow.tableRow.rowId}'});

document.getElementById('ajaxTransaction1', 'form1:table1:tableRowGroup1:'+'#{currentRow.tableRow.rowId}'+':tableColumn1:button1').refresh('form1:textField1');

DynaFaces.Tx.fire("ajaxTransaction1", "textField1");
return false;

(Burada dikkatinizi DynaFaces.Tx.fire("ajaxTransaction1", "textField1") komutuna çekmek istiyorum. DynaFaces eylemini button kontrolu içerisinde ve textField1 için başlatıyoruz-ateşliyoruz. Bu sayede TextField onChange JavaScript eventi içerisine bu komutu yazmamız gerekmiyor, zaten TextField onchange eventini çalıştırmamız da gerekmiyor ).

4. TextField kontrolunuzun visible özelliğini "false" yapınız.

10 Haziran 2008 Salı

Google ın sırları

Google ın sırları ile ilgili enteresan bir yazı .

DynaFaces (Ajax) - Checkbox, radiobutton ögeleri sorununa çare

Checkbox, radiobutton gibi ögeler Visual Web JSF sayfalarında kullanıldığında bu ögeler ilk kez tıklandığında DynaFaces Ajax eylemi çalışmakta ancak 2nci kez tıklandığında çalışmamaktadır.

Bu durum webuijsf (WoodStock-JSF 1.2), ui (JSF 1.1) ve h (html) ögeleri için de geçerlidir.

Problemin yaratılması :
1. Visual JSF projesi yaratınız. (Ben Java EE5 ve dolayısıyla JSF 1.2'yi seçtim).
2. Proje yaratıldıktan sonra açılan Page1.jsf görsel sayfasına bir WoodStock Basic bölümünden bir adet statictext ve bir adet checkbox yerleştiriniz.
3. Projenizin Component Library bölümü üzerine gelip sağ fare butonuna kullanarak DynaFaces Components (0.2)'yi ekleyiniz.
4. 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.

<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<init-param>
<param-name>javax.faces.LIFECYCLE_ID</param-name>
<param-value>com.sun.faces.lifecycle.PARTIAL</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>

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

6. CheckBox onclik'e aşağıdaki Java Script kodunu yazınız:


DynaFaces.Tx.fire("ajaxTransaction1", "checkbox1");


7. CheckBox process value change eventi (checkbox üzerine çift tıkladığınızda açılacak olan Java kodu):
public void checkbox1_processValueChange(ValueChangeEvent event)
{
Calendar cal = new GregorianCalendar();
staticText1.setText(cal.getTime());
}

8. checkbox1 ü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.

9. 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.








10. Projenizi çalıştırdığınızda ve Checkbox'a birinci kez tıkladığınızda aşağıdaki gibi görülecektir.



Ancak 2nci kez tıkladığınızda static text te görülmesi istenen zaman bilgisinin değişmediğini ve ilk tıkladığınızdaki tarih ve saatin aynı kaldığını göreceksiniz. Başka bir deyişle tazelenmesi istenen static text alanı tazelenmemektedir.

Çözüm :

1. Visual Web JSF sayfanıza bir buton ekleyiniz.

2. button1 ü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. (button1'i checkbox1 ile aynı yaptık).
3. button1 action eventi (button1 üzerine çift tıkladığınızda açılacak olan Java kodu):
public void button1_action()
{
Calendar cal = new GregorianCalendar();
staticText1.setText(cal.getTime());
}

4. button1 visible özelliğini false yapınız.

9 Haziran 2008 Pazartesi

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.

4 Haziran 2008 Çarşamba

RichFaces/Ajax4JSF ve Netbeans

Richfaces Ajax kütüphanesini JSF 1.2 (WoodStock) ile kullanmak mümkün değildir. Çünkü WoodStock zaten Ajax'ı kullanabileceğiniz ögeleri içerir. webuijsf etiketli ögeler dışındaki html veya RichFaces (a4j etiketli) ögeler kullanılabilir.

webuijsf ögelerini peki nasıl kullanırız ?

2 yöntemi var, bunlardan biri WoodStock Ajax'ı kullanmamak, diğeri ise JSF 1.1'i kullanmak. Burada JSF 1.1'i kullanmak anlatılacaktır.

1. Netbeans ile Visual Web JSF projesi yaratmaya başlayın. İlk 2 adımı geçtikten sonra 3ncü adımda (Server and settings) Java EE 5 version bölümünde J2EE JDK 1.4'ü seçiniz ve projenin yaratılmasını tamamlayınız.

2. Proje yaratıldıktan sonra projenizin özelliklerini (Properties) proje adı üzerine gelerek sağ fare butonu ile görünüz. "Sources" bölümünde "Source/Binary format" JDK 1.4 görünüyorsa sunucunıuzdaki JDK sürümüne uygun olarak JDK 5 veya JDK 6 yapınız. Eğer JDK 1.4 olarak kalırsa JAX-WS Web servislerini kullanmanız mümkün olmayacaktır.