JSF Melih Sakarya JSF Java Server Faces PrimeFaces www.mergecons.com www.mergecons.com 1
PrimeFaces Açık kaynak. Türkçe desteği. Türkçe dokümantasyon. Zengin bileşen desteği. TouchFaces ile mobile ortam için programlama. %100 Türk yapımı :) www.mergecons.com 2
Kurulum Kütüphane Versiyon Gereklilik Kullanım JSF runtime 1.2.x or 2.x Gerekli MyFaces or Sun RI itext 1.4.8 Opsiyonel PDF export apache poi 3.2-FINAL Opsiyonel Excel export commons-fileupload 1.2.1 Opsiyonel FileUpload commons-io 1.4 Opsiyonel FileUpload atmosphere-runtime 0.5.0 Opsiyonel Ajax Push atmosphere-compat 0.5.0 Opsiyonel Ajax Push www.mergecons.com 3
Kurulum <servlet> <servlet-name>resource Servlet</servlet-name> <servlet-class> org.primefaces.resource.resourceservlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping> www.mergecons.com 4
PrimeFaces <!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:ui="http://java.sun.com/jsf/facelets" xmlns:p="http://primefaces.prime.com.tr/ui"> <head> <p:resources /> </head> <body> <p:editor /> </body> </html> www.mergecons.com 5
Renk seçimi <p:colorpicker value="#{renkbean.secilenrenk}"/> www.mergecons.com 6
Renk seçimi public class RenkBean { private Color secilenrenk; public Color getsecilenrenk() { } return secilenrenk; } public void setsecilenrenk(color secilenrenk) { } this.secilenrenk = secilenrenk; www.mergecons.com 7
Datatable <p:datatable var="satis" value="#{satisbean.satislar}"> <p:column> <f:facet name="header"> <h:outputtext value="marka" /> </f:facet> <h:outputtext value="#{satis.marka}" /> </p:column> <p:column> <f:facet name="header"> <h:outputtext value="adet" /> </f:facet> <h:outputtext value="#{satis.adet}" /> </p:column> </p:datatable> www.mergecons.com 8
Datatable <p:datatable var="satis" value="#{satisbean.satislar}" rows="2" paginator="true"> www.mergecons.com 9
Datatable <p:datatable var="satis" value="#{satisbean.satislar}" scrollable="true" height="100px"> www.mergecons.com 10
Dialog <h:form> <p:dialog header="ust Baslik" footer="alt Baslik" widgetvar="uyari"> Deneme amacli bir dialog </p:dialog> <a href="#" onclick="uyari.show()">goster</a> <a href="#" onclick="uyari.hide()">gizle</a> </h:form> www.mergecons.com 11
p:autocomplete <p:autocomplete value="#{demobean.isim}" completemethod="#{demobean.tamamla}" maxresultsdisplayed="5" minquerylength="3"/> www.mergecons.com 12
p:captcha <p:captcha publickey=" 6LcsgboSAAAAAKxxu0NqT0llUpzq9OmYHYbblIBx " language="tr"/> www.mergecons.com 13
p:captcha <context-param> <param-name> org.primefaces.component.captcha.private_key </param-name> <param-value> 6LcsgboSAAAAADxJ4Zb-PK28AlMIqeFRnejNs2Zx </param-value> </context-param> www.mergecons.com 14
p:calendar <p:calendar value="#{demobean.tarih}" pattern="dd.mm.yyyy" locale="tr"/> www.mergecons.com 15
p:calendar <p:calendar value="#{demobean.tarih}" selection="multiple"/> www.mergecons.com 16
p:calendar <p:calendar value="#{demobean.tarih}" locale="tr" pages="3"/> www.mergecons.com 17
p:calendar <p:calendar value="#{demobean.tarih}" mode="inline" pages="12" pagedate="01/2009" showweekheader="true"/> www.mergecons.com 18
Chart kütüphanesi <p:piechart value="#{satisbean.satislar}" var="satis" categoryfield="#{satis.marka}" datafield="#{satis.adet}" /> www.mergecons.com 19
Chart kütüphanesi public class Satis { } public Satis() { } public Satis(String marka, int adet) { } this.marka = marka; this.adet = adet; private String marka; private int adet; //getter setter www.mergecons.com 20
Chart kütüphanesi public class SatisBean { public SatisBean() { } satislar.add(new Satis("Asus",15)); satislar.add(new Satis("HP",25)); satislar.add(new Satis("Lenovo",19)); satislar.add(new Satis("Sony",5)); satislar.add(new Satis("Toshiba",11)); List<Satis> satislar = new ArrayList<Satis>(); public List<Satis> getsatislar() { } return satislar; public void setsatislar(list<satis> satislar) { } this.satislar = satislar; } www.mergecons.com 21
LineChart public class Bilgi { public Bilgi() { } } public Bilgi(int yil, int bay, int bayan) { } this.yil = yil; this.bay = bay; this.bayan = bayan; private int yil; private int bay; private int bayan; www.mergecons.com 22
LineChart public class BilgiBean { } private List<Bilgi> bilgiler; public BilgiBean() { } bilgiler = new ArrayList<Bilgi>(); bilgiler.add(new Bilgi(2004, 120, 52)); bilgiler.add(new Bilgi(2005, 100, 60)); bilgiler.add(new Bilgi(2006, 44, 110)); bilgiler.add(new Bilgi(2007, 150, 135)); bilgiler.add(new Bilgi(2008, 125, 120)); public List<Bilgi> getbilgiler() { } return bilgiler; www.mergecons.com 23
LineChart <p:linechart value="#{bilgibean.bilgiler}" var="bilgi" xfield="#{bilgi.yil}"> <p:chartseries label="bay" value="#{bilgi.bay}" /> <p:chartseries label="bayan" value="#{bilgi.bayan}" /> </p:linechart> www.mergecons.com 24
Live Chart <p:piechart value="#{satisbean.satislar}" var="satis" categoryfield="#{satis.marka}" datafield="#{satis.adet}" live="true" refreshinterval="5000"/> www.mergecons.com 25
Interactive Charts <p:piechart id="votes" value="#{oylamabean.oylar}" var="bilgi" categoryfield="#{bilgi.yil}" datafield="#{bilgi.oy}" /> www.mergecons.com 26
DataExporter Farklı formatlarda çıktı almak için kullanılır. PDF Excel XML CVS Kütüphanelere ihtiyaç duyar POI itext www.mergecons.com 27
DataExporter <h:form> <p:datatable value="#{satisbean.satislar}" var="satis" id="satislar"> <p:column> </p:column> <p:column> </p:column> </p:datatable> <f:facet name="header">marka</f:facet> #{satis.marka} <f:facet name="header">adet</f:facet> #{satis.adet} <h:commandbutton value="pdf Cikti"> <p:dataexporter type="pdf" target="satislar" filename="satislar" /> </h:commandbutton> </h:form> www.mergecons.com 28
Print <h:commandbutton id="btn" value="print"> <p:printer target="satislar" /> </h:commandbutton> www.mergecons.com 29
p:message <h:inputtext value="#{demobean.ad}" id="ad" required="true" requiredmessage="ad alani bos olamaz"/> <p:message for="ad" /> www.mergecons.com 30
p:messages <p:messages /> <h:inputtext value="#{demobean.ad}" required="true" requiredmessage="ad alani bos olamaz"/> <h:commandbutton action="#{demobean.kaydet}" value="kaydet" /> www.mergecons.com 31
Ajax Operasyonları <p:commandbutton update="mesaj" action="#{demobean.kaydet}" value="kaydet" /> <p:commandbutton ajax="false" action="#{demobean.kaydet}" value="kaydet" /> www.mergecons.com 32
Ajax Operasyonları <h:form> <p:messages id="mesaj"/> <h:inputtext value="#{demobean.ad}" id="ad" required="true" requiredmessage="ad alani bos olamaz"/> <p:message for="ad" /> <br /> <p:commandbutton update="mesaj" action="#{demobean.kaydet}" value="kaydet" /> </h:form> www.mergecons.com 33
Ajax Operasyonları <h:selectonemenu value="#{demobean.ad}"> <f:selectitem itemvalue="ankara"/> <f:selectitem itemvalue="izmir"/> <f:selectitem itemvalue="istanbul"/> <p:ajax update="sehir" event="change"/> </h:selectonemenu> <br /> <h:outputtext value="#{demobean.ad}" id="sehir" /> www.mergecons.com 34
Ajax Operasyonları <p:ajaxstatus> <f:facet name="start"> <h:outputtext value="yükleniyor..." /> </f:facet> <f:facet name="complete"> <h:outputtext value="tamanlandi..." /> </f:facet> </p:ajaxstatus> www.mergecons.com 35
Ajax Operasyonları <h:form prependid="false"> <h:inputtext value="#{demobean.ad}" id="ad" /> <h:inputtext value="#{demobean.soyad}" id="soyad"/> <p:commandbutton process="@this,ad" action="#{demobean.kaydet}" value="kaydet" /> </h:form> www.mergecons.com 36
p:editor <h:form> <p:editor value="#{demobean.bilgi}"></p:editor> <h:commandbutton action="#{demobean.kaydet}" /> </h:form> www.mergecons.com 37
p:inputmask <p:inputmask mask="999-99-9999" value="#{demobean.ad}" /> (999) 999-9999 a-9999999 a*-9999-*99 www.mergecons.com 38
p:keyboard <p:keyboard /> www.mergecons.com 39
Dock <p:dock> <p:menuitem label="home" icon="/img/home.png" url="#" /> <p:menuitem label="music" icon="/img/music.png" url="#" /> <p:menuitem label="video" icon="/img/video.png" url="#" /> <p:menuitem label="email" icon="/img/email.png" url="#" /> <p:menuitem label="link" icon="/img/link.png" url="#" /> <p:menuitem label="rss" icon="/img/rss.png" url="#" /> <p:menuitem label="history" icon="/img/history.png" url="#" /> </p:dock> www.mergecons.com 40
p:imageswitch <p:imageswitch effect="flyin" widgetvar="imageswitch"> <p:graphicimage value="/images/dock/home.png" /> <p:graphicimage value="/images/dock/music.png" /> <p:graphicimage value="/images/dock/video.png" /> <p:graphicimage value="/images/dock/email.png" /> </p:imageswitch> www.mergecons.com 41
TouchFaces Iphone, Android, Palm gibi web kit platformları için mobil uygulamalar geliştirmek için kullanılır. www.mergecons.com 42
TouchFaces <f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:i="http://primefaces.prime.com.tr/touch" contenttype="text/html"> <i:application theme="dark"> </i:application> </f:view> www.mergecons.com 43
TouchFaces <i:application theme="dark"> <i:view id="home" title="anasayfa"> </i:view> </i:application> www.mergecons.com 44
TouchFaces <i:application theme="dark"> <i:view id="home" title="anasayfa"> <i:tableview> <i:rowgroup title="row Group"> </i:rowgroup> </i:tableview> </i:view> </i:application> <i:rowitem value="row 1" /> <i:rowitem value="row 2" /> www.mergecons.com 45
TouchFaces <i:rowgroup title="row Group" display="edgetoedge"> www.mergecons.com 46
TouchFaces <i:application theme="dark"> <i:view id="home" title="anasayfa"> </i:view> <i:tableview> <i:rowgroup title="mail Yonetimi" display="edgetoedge"> <i:rowitem value="mail Gonder" view="mailgonder"/> <i:rowitem value="mail Oku" view="mailoku"/> </i:rowgroup> </i:tableview> <i:view id="mailoku" title="mail Oku"> </i:view> <i:view id="mailgonder" title="mail Gonder"> </i:view> </i:application> www.mergecons.com 47
TouchFaces <i:view id="mailoku" title="mail Oku"> <f:facet name="leftnavbar"> <i:navbarcontrol label="anasayfa" view="home" /> </f:facet> </i:view> www.mergecons.com 48
TouchFaces <i:rowitem> Dil Seçimi : <h:selectonemenu id="fromlang"> <f:selectitem itemlabel="english" itemvalue="en" /> <f:selectitem itemlabel="turkish" itemvalue="tr" /> <f:selectitem itemlabel="italian" itemvalue="it" /> <f:selectitem itemlabel="spanish" itemvalue="es" /> <f:selectitem itemlabel="german" itemvalue="de" /> </h:selectonemenu> </i:rowitem> www.mergecons.com 49
TouchFaces <i:rowitem> <h:inputtextarea id="totext" style="height:50px;"/> </i:rowitem> www.mergecons.com 50
TouchFaces <i:rowitem> <h:form> <p:commandlink>giriş Yap</p:commandLink> <p:commandlink>kayıt</p:commandlink> <h:outputlink style="margin:0 10px;" styleclass= "whitebutton" value="#" > Gönder </h:outputlink> </h:form> </i:rowitem> www.mergecons.com 51
Son Sorular???? www.mergecons.com 52