PrimeFaces

PrimeFaces Dersleri-Diagram Ve PickList

Merhabalar arkadaşlar. Bu yazıda PrimeFaces’ın Diagram ve PickList bileşenlerinin nasıl kullanıldığını öğreneceğiz.

Diagram Bileşeni

PrimeFaces bileşenleri içinde bir de diyagram çizilmesini sağlayan bileşen yer alıyor. Bileşen yapısı içinde sanal noktalar oluşturulabiliyor ve bunlar birbirine bağlanarak bir diyagram elde edilebiliyor.

Şimdi örnek üzerinden kullanımına bakalım.

diagram.xhtml

Head etiketleri arasında az sonra kullanacağımız diyagram elementi için bir CSS tanımlaması yapıyoruz. Bu CSS kodu ile her bir sanal nokta için kutucuk oluşturuluyor ve noktalar kutucuk içine alınarak görünüm iyileştiriliyor. Eğer bu CSS kodu olmazsa bağlantı çizgileri sanal noktalar ile üst üste geliyor ve hoş olmayan görünüm ortaya çıkıyor.

Xhtml kodumuz içinde p:diagram etiketi ile bileşenimizi kullanıyoruz. Bu bileşenin value özelliğine Java sınıfı içinde diyagramın tutulduğu DefaultDiagramModel nesnesini atıyoruz. Style özelliği ile diyagramın css düzenlemelerini yapıyoruz, bizim diyagramımızın uzunluğu 400px olacak. styleClass özelliğine ui-widget-content ataması yaparak bileşenin bir kutu içerisine alınmasını sağlıyoruz. StyleClass’a atama yapılmazsa kutu çizgisi olmadan tarayıcıda görüntülenir.

BasicView.java Kodu

Java sınıfımız içinde yaptığımız işlemlere sırası ile bakalım.

  • Hazırlanacak diyagramı tutacak olan ve xhtml’e geçireceğimiz bir DefaultDiagramModel nesnesi tanımlıyoruz.
  • Diyagramımızı hazırlayacağımız metodumuz içinde DefaultDiagramModel nesnesini oluşturuyoruz.
  • model.setMaxConnections(-1)  ifadesi ile sanal noktalar arası bağlantıların oluşturulmasını sağlıyoruz.
  • Biz canal noktalarımız Java kodumuz içinde Element nesneleri olarak tanımlanıyor. Element sınıfı ile bir sanal nokta oluştururken bu sınıfın yapılandırıcısına (constructor) 3 parametre geçiriyoruz. Birinci parametre sanal noktanın ismine, ikinci parametre ekranın sol üst köşesine göre ne kadar sağda-solda olmasına, üçüncü parametre aşağıda-yukarıda olmasına karar veren parametrelerdir.
  • elementA.addEndPoint(new DotEndPoint(EndPointAnchor.TOP)) ifadesi ile santal noktamızı oluşturmuş olduğumuz elemente ekliyoruz.  addEndPoint metoduna parametre olarak DotEndPoint sınıfından üretilen bir nesneyi veriyoruz. DotEndPoint sınıfının yapılandırıcısına verdiğimiz EndPointAnchor.TOP ifadesi de xhtml içinde sanal nokta için tanımladığımız CSS kodundaki kutucuğun üst çizgisinde mi alt çizgisinde mi olacağına karar verir.
  • B ve C sanal noktaları için de aynı işlemi uyguluyoruz.
  • Oluşturmuş olduğumuz Element nesnelerini diyagramımızı temsil eden DefaultDiagramModel nesnesine addElement metodu ile ekliyoruz.
  • Son adımda ise oluşturlup DefaultDiagramModel nesnesine eklenmiş olan bu elementlerin birbirine bağlanması işlemi yapılıyor connect metodu ile. Connect metoduna parametre olarak bir Connection sınıfından üretilmiş bir nesneyi veriyoruz.Connection sınıfının yapılandırıcısına da Element nesnesi oluştururken tanımladığımız endPoint’leri veriyoruz.

Ekran Çıktısı

Screen Shot 2015-10-21 at 12.29.24

PickList Bileşeni

PickList bileşeni sürükle bırak ,check box seçim ve otomatik tamamlama özelliğine sahip olan bir liste bileşenidir. Normal listelerden farklı olarak Java sınıfında DualListModel üzerine oturmaktadır.  Şimdi örnek üzerinden kullanımına bakalım.

pickList.xhtml

Xhtml kodumuz içinde PickList bileşenini p:pickList etiketi ile kullanıyoruz. Bileşenin value özelliğine ekranda seçenekleri gösterecek DualListModel sınıfından üretilmiş olan nesneyi atıyoruz. İşlemleri kolaylaştırmak ve sağlamlaştırmak için var tanımlaması yapıyoruz.  Burada göreceğimiz gibi pickList’in ekstra bir takım özellikleri var.

  • showSourceControls ve showTargetControls özellikleri ile liste içindeki elementlerin yerlerini değiştirebilecek butonları kullanıma alıyoruz.
  • showCheckbox özelliği ile listedeki elementlerin yanında checkBox kullanımını devreye alıyoruz.
  • showSourceFilter ve showTargetFilter  özellikleri ile listeler içinde arama özelliklerini devreye alıyoruz.
  • filterMatchMode özelliği ile arama yapılırken otomatik tamamlama devreye alınıyor ve bu otomatik tamamlamanın neye göre yapılacağı söyleniyor. Bizim örneğimizde girilen harf ya da harfleri içeren kelimeler listeleniyor.

Kodun devam eden kısmında f:face etiketlerini görüyorsunuz. DataTable bileşeninden hatırlarsanız f:facet name=”header” dediğimiz zaman o kolona başlık atamış oluyorduk. Burada da f:facet name=”sourceCaption”  ve f:facet name=”targetCaption” ile seçilebilir ve seçilmiş durumdaki listelerin olduğu kısımlara başlık atıyoruz.

p:ajax etiketi ile listedeki elemanlar üzerinde meydana gelecek olaylar için tanımlamalar yapıyoruz ve olay sırasında hangi metodun çağırılacağını söylüyoruz. Örneğin  seçilebilecek durumdakiler listesinden seçilmişler listesine transfer işlemi yapılırken olayın tipi transfer’dir,bu nedenle evet=”transfer” diyerek diğer listeye değer geçirilirken managed bean içindeki onTransfer metodu çağırılıyor. Bu sırada kullanıcıya bilgiler sunan growl bileşeni de update özelliği ile güncelleniyor.

<p:column> etiketi ile de DataTable’daki gibi verileri listelecek kolon açıyoruz.  p:commandButton ile de verilerin dialog’da gösterilmesi işlemi yapılıyor.

Kodun son kısmında yazılmış olan dialog ile kullanıcının seçmiş olduğu bilgileri bir dialog penceresinde kullanıcıya sunuyoruz.

PickListView.java

PickList’in başında dediğimiz gibi bu bileşen DualListModel üzerine oturuyor. Java kodumuz içinde adım adım ne yapabileceğimize bakalım.

  • İlk adımda kullanıcıya seçenekleri sunacak bir citiesSource,seçimleri tutacak citiesTarget listesi ve bunları içinde barındıracak bir DualListModel nesnesi tanımlıyoruz.
  • @PostConstruct ile notasyonu ile işaretlenmiş metotda listelerin oluşturulması ve doldurulması yapılıyor. Oluşturulan iki liste DualListModel nesnesi oluşturulurken parametre olarak veriliyor.
  • onTransfer metodu içinde kullanıcıya transfer ettiği nesneleri söyleyecek işlemler yaptırılıyor. Burada kullanıcı birden fazla seçimini aynı anda transfer edebileceği için bir StringBuilder ile seçilmiş nesneler append metodu kullnılarak bir araya toplanıyor. FacesMessage ve FacesContext hakkında daha önce burada birtakım bilgiler vermiştim.
  • Kodun geri kalan kısmı daha önceden öğrendiğimiz şeylerdir.

Ekran Çıktıları

Screen Shot 2015-10-21 at 18.06.44

Screen Shot 2015-10-21 at 18.28.18

Screen Shot 2015-10-21 at 18.09.03

Screen Shot 2015-10-21 at 18.09.52

Screen Shot 2015-10-21 at 18.20.57

Bu yazıda da bu kadar arkadaşlar. Diagram ve PickList bileşenlerinin kullanımını bu yazı içersinde görmüş olduk. Gelecek yazıda OrderList ve GMap bileşenlerinin kullanımını öğreneceğiz.  Görüşene kadar sağlıcakla kalın 🙂