JSF’te web sayfaları dizayn ederken sıklıkla 3. parti kütüphaneler kullanılır. Bu kütüphanelerden bazıları ;
– PrimeFaces
– IceFaces
– ADF Faces
– RichFaces kütüphaneleridir.
Bu yazımda PrimeFaces kütüphanesinin autocomplete özelliğinden bahsedeceğim.
Öncelikle PrimeFaces kullanabilmek için kendi web sitesinden primefaces-version.jar dosyasını indirmelisiniz. Bu dosyayı indirdikten sonra yapmamız gereken tek şey WEB-INF/lib klasörü altına bu JAR dosyasını kopyalamak. Daha sonra hazır bileşenleri kullanabilmek için sayfa başında namespace tanımı yapmamız yeterli olacaktır.
Şimdi bir web sayfasında giriş kutusundan harfler girildiği anda Java sınıfında tanımlanmış listeden bilgileri otomatik olarak tamamlayan bir örnek kod yazalım. Örnek kodumuzda Java sınıfı içerisinde şehir isimleri tanımlayacağız. Web sayfasındaki giriş kutusuna harf girildiğinde o harfle başlayan tüm şehirler listelenecek. Aynı google’ın bize arama sonuçlarını önermesi gibi.
Eclipse’de yeni bir web projesi yaratıyorum ve primefaces-3.2.jar dosyasını lib dizinine kopyalıyorum. Projemin ilk görüntüsü aşağıdaki gibi olacaktır.
NOT : Web projesini yaratırken (Dynamic Web Project) Configuration kısmında JSF kullanacağımızı söylemeyi unutmayın.
Öncelikle Java sınıfımızı yazalım.
[codesyntax lang=”java” lines=”no”]
package beans;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
@ManagedBean
public class SehirTamamla {
private static final String sehirler = "Adana,Adıyaman,Afyonkarahisar,Ağrı,Amasya,Ankara,Antalya,Artvin,Aydın,Aksaray";
private static final String[] sehirDizisi = sehirler.split(",");
private String sehir;
public String getSehir() {
return sehir;
}
public void setSehir(String sehir) {
this.sehir = sehir;
}
public List<String> tamamla(String prefix) {
List<String> eslesenler = new ArrayList<String>();
for (String muhtemelSehir : sehirDizisi) {
if (muhtemelSehir.toUpperCase().startsWith(prefix.toUpperCase())) {
eslesenler.add(muhtemelSehir);
}
}
return (eslesenler);
}
public String sehirGoster() {
return "sonuc";
}
}
[/codesyntax]
Burada biz otomatik olarak doldurulacak metinleri bir listeden aldık. İsterseniz veri tabanından okuyabilirsiniz.
Şimdi sayfalarımızı tasarlayalım.
[codesyntax lang=”html4strict” lines=”no”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Autocomplete</title>
</h:head>
<h:body>
<div align="left">
<table class="title">
<tr>
<th>Şehir Tamamla</th>
</tr>
</table>
<p />
<fieldset>
<legend>A ile başlayan şehirleri getir</legend>
<h:form>
<p:autoComplete value="#{sehirTamamla.sehir}"
completeMethod="#{sehirTamamla.tamamla}" forceSelection="true"
required="true" requiredMessage="Bir şehir seçmelisiniz !" />
<h:commandButton action="#{sehirTamamla.sehirGoster}" value="KAYDET" />
<p />
</h:form>
</fieldset>
</div>
</h:body>
</html>
[/codesyntax]
[codesyntax lang=”html4strict” lines=”no”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Seyahat Onay</title>
</h:head>
<h:body>
<div align="left">
<table class="title">
<tr>
<th>Seyahat Onay</th>
</tr>
</table>
<p />
<h2>#{sehirTamamla.sehir} şehrine yolculuğunuz onaylanmıştır.</h2>
</div>
</h:body>
</html>
[/codesyntax]
Programı çalıştırdığımızda ekran görüntüleri aşağıdaki gibi olacaktır.
Şehri seçip KAYDET düğmesine tıkladığımızda sonuc.xhtml sayfası açılacaktır.
javauzmani 