PrimeFaces

PrimeFaces – OrderList Ve GMap

prime

Merhabalar arkadaşlar. Bu yazıda sizlerle PrimeFaces’ın OrderList ve GMap bileşenini inceleyeceğiz.

OrderList Bileşeni

OrderList liste içerisindeki elemanların yerlerini değiştirip kullanabildiğimiz bir bileşendir. İster drag&drop ister yanındaki butonlar vasıtası ile kullanabilirsiniz. Şimdi örnek kod ve ekran çıktısı ile kullanımına bakalım.

orderList.xhtml

Biz orderList bileşenimizi p:orderList etiketi ile kullanıyoruz. Bu etiketin özelliklerine göz atalım:

  • controlsLocation  aşağı yukarı işlemlerini yapacak butonların orderList bileşenin sağında ya da solunda görünmesine karar veren özelliktir. Alabileceği parametreler letf,right ve none‘dır. None değeri atamanız durumunda butonlar görünmeyecektir. Özelliğin kullanılmaması durumunda varsayılan olarak solda yer alır.
  • converter özelliği ile yazmış olduğumuz dönüştürücü sınıfı atıyoruz. OrderList bileşenimizi kullanırken ben converter kullanmadan bileşeni yazmaya çalıştığımda

    şeklinde bir hata aldım hep. Bu hatanın üstesinden gelmenin ve kurtulmanın yolu orderList bileşeninin converter özelliğini kullanmaktır.
  •  value özelliği ile ekranda görünecek değerlerin barındığı listeyi atıyoruz.
  • itemValue özelliği her ne kadar IDE tarafından kod yazımı sırasında kullanılmaya zorlanmasa da kullanılması bizim faydamızadır. Converter kullanımı sırasında nesnelerin geçişi için gereklidir.
  • var özelliğini de DataTable’dan hatırlarsınız. Değerleri ekrana basarken kullandığımız özellik.

p:column etiketi ile DataTable benzeri şekilde açılan bir kolona gerekli bilgileri yazdırıyoruz.

p:commandButton ile yazdığımız butonu önceki derslerimizdeki gibi yazdık ve dialog’u açacak ve içindeki grid’i güncelleyecek şekilde hazırladık.

Dialog içerisinde de bir grid’in içinde ui:repeat etiketi ile verilerin güncel halini ekrana yazdırıyoruz. Burada isterseniz DataTable’da kullanabilirsiniz. Tercih size kalmış.

OrderListBean.java

Java sınıfımız içinde @PostConstruct ile listenin oluşturulması ve doldurulması işlemleri gerçekleştiriliyor.

TutorConverter.java

Converter sınıfımız içinde önce getAsString metodu ile gelen Object nesnesinden istediğimiz biçimde bir String elde ediyoruz ve akabinde getAsObject metodu ile hangi veri tipinde bir nesne istiyorsak gelen String nesnesini kullanıp nesnemizi döndürüyoruz. Burada bir Tutors nesnesi oluşturup, gelen String’den verileri alıp koyduk ve onu döndürdük.

Tutors.java

POJO niteliğindeki Tutors sınıfımız.

Ekran Çıktımız

Screen Shot 2015-10-28 at 17.58.00

Sayfa açıldığındaki hali.

Screen Shot 2015-10-28 at 18.00.11

Sürükle bırak yöntemi ile Çağatay Çivici’yi yukarı taşıyorum. Rahman Ustayı sağdaki butonlar ile aşağı taşıdım.

Screen Shot 2015-10-28 at 18.04.17

GMap Bileşeni

PrimeFaces geliştiricileri Google’in harita servisini alıp kütüphaneye uygulamışlar ve bizim bir tag vasıtası ile bu servisi kullanmamıza imkan tanımışlar. Örnekler üzerinden kullanıma bakalım.

Birinci örneğimizde temel kullanımı görüyoruz. Temel kullanım tanımlanması zorunlu olan center, zoom ve type özelliklerinin kullanıldığı şekle karşılık geliyor. Center göstermek istediğimiz yerin koordinatlarını,zoom yakınlaştırmayı temsil ediyor. Koordinatlar Ayasofya’nın koordinatları 🙂

Screen Shot 2015-10-28 at 18.17.20

İkinci örneğimizde bir yere marker nasıl koyulur onu görelim. Bir çok sitede bir yerin adresi gösterilirken marker (kırmızı işaretçi) ile işaretlendiğini görürüz.

Marker kullanmak istediğimiz zaman yapmamız gereken Java kodumuz içinde bir MapModel nesnesi tanımlaması yapmak ve bunu model özelliğine atıyoruz.

init metodu içinde mapModelObject nesnesini oluşturuyoruz. Akabinde koordinatları tanımladığımız bir LatLng nesnesi tanımlıyoruz ve yapılandırıcıya koordinatları parametre olarak geçiriyoruz. Son olarak MapModel nesnemizin addOverlay metodunu bir Marker nesnesini parametre olarak vererek çağırıyoruz. Marker nesnesinin oluşturulması sırasında 2 parametre veriliyor. Bunlar koordinatları barındıran LatLng nesnesi ve marker’ın ismidir.

Aşağıdaki resimde de görebileceğiniz gibi TBMM’yi marker ile gösterdik.

Screen Shot 2015-10-28 at 19.10.38

Şimdi son olarak da arama ile bulunan bir yerin gösterilmesine bakalım.

Xhtml içinde head etiketleri arasında gördüğünüz Script ile girilen adresin aranması işlemi yapılıyor. Form içinde  panelGrid ile aranacak yeri alıyoruz ve aratıyoruz.

GMap tarafında koordinasyon atanması ve model kullanımı işlemi Java sınıfı vasıtası ile yapılıyor.

Java sınıfımız içinde az önceki örneğe benzer şekilde bir MapModel nesnesi tanımlıyoruz. Default olarak koordinatları centerGeoMap ile veriyoruz ancak bu sayfa içinde Marker için geçerli olmayacak. Init metodu içinde MapModel nesnesi oluşturuluyor.

onGeocode metodu içinde xhtml içinden ajax ile tetiklenince gelen event’dan arama sonucu alıyoruz. Daha sonra aldığımız bu sonuç içerisinden koordinasyon bilgilerini alıp centerGeoMap  nesnesine koyuyoruz.  Bu nesne ekrandaki koordinasyon yönelimini yapacak. Akabinde bir döngü içinde ( muhtemelen tek sefer ) MapModel nesnemizin addOverlay metoduna bir Marker nesnesi veriyoruz. Marker oluşturma sırasında önceki örneğe benzer şekilde koordinasyon bilgilerini de veriyoruz.

Screen Shot 2015-10-28 at 21.31.57

Arama kutusuna Taksim yazıp Ara butonuna tıkladığımda Taksim’i bulup gösteriyor.

Bu yazıda da bu kadar arkadaşlar. OrderList ve GMap bileşenlerinin kullanımını öğrenmiş olduk. GMap bileşeni burada anlattığımın dışında 12 kullanım şekline daha sahip. http://www.primefaces.org/showcase/ui/data/gmap/basic.xhtml adresinden o kullanım şekillerine de bakabilirsiniz.

Başka bir yazıda görüşmek üzere sağlıcakla kalın arkadaşlar.