JSF Melih Sakarya. Java Server Faces PrimeFaces

(1)

JSF

Melih Sakarya

JSF

Java Server Faces

PrimeFaces

www.mergecons.com

(2)

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ı :)

(3)

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

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

(4)

Kurulum

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

(5)

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

(6)

Renk seçimi

<p:colorPicker value="#{renkBean.secilenRenk}"/>

(7)

Renk seçimi

public class RenkBean {

private Color secilenRenk;

public Color getSecilenRenk() {

return secilenRenk;

}

public void setSecilenRenk(Color secilenRenk) {

this.secilenRenk = secilenRenk;

} }

(8)

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>

(9)

Datatable

<p:dataTable var="satis" value="#{satisBean.satislar}"

rows="2" paginator="true">

(10)

Datatable

<p:dataTable var="satis" value="#{satisBean.satislar}"

scrollable="true" height="100px">

(11)

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.show()">Goster</a> <a href="#" onclick="uyari.hide()">Gizle</a> </h:form>

(12)

p:autoComplete

<p:autoComplete value="#{demoBean.isim}" completeMethod="#{demoBean.tamamla}"

maxResultsDisplayed="5" minQueryLength="3"/>

(13)

p:captcha

<p:captcha

publicKey=" 6LcsgboSAAAAAKxxu0NqT0llUpzq9OmYHYbblIBx " language="tr"/>

(14)

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

(15)

p:calendar

<p:calendar value="#{demoBean.tarih}" pattern="dd.MM.yyyy"

locale="tr"/>

(16)

p:calendar

<p:calendar value="#{demoBean.tarih}" selection="multiple"/>

(17)

p:calendar

<p:calendar value="#{demoBean.tarih}" locale="tr" pages="3"/>

(18)

p:calendar

<p:calendar value="#{demoBean.tarih}" mode="inline"

pages="12" pagedate="01/2009" showWeekHeader="true"/>

(19)

Chart kütüphanesi

<p:pieChart value="#{satisBean.satislar}" var="satis"

categoryField="#{satis.marka}" dataField="#{satis.adet}" />

(20)

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 }

(21)

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("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; }

}

(22)

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;

}

(23)

LineChart

public class BilgiBean {

private List<Bilgi> bilgiler;

public BilgiBean() {

bilgiler = new ArrayList<Bilgi>();

bilgiler.add(new Bilgi(2004, 120, 52));

new Bilgi(2005, 100, 60));

}

public List<Bilgi> getBilgiler() {

return bilgiler;

} }

(24)

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>

(25)

Live Chart

<p:pieChart value="#{satisBean.satislar}" var="satis"

categoryField="#{satis.marka}" dataField="#{satis.adet}" live="true" refreshInterval="5000"/>

(26)

Interactive Charts

<p:pieChart id="votes" value="#{oylamaBean.oylar}" var="bilgi"

categoryField="#{bilgi.yil}" dataField="#{bilgi.oy}" />

(27)

DataExporter

Farklı formatlarda çıktı almak için kullanılır.

PDF

Excel

XML

CVS

…

Kütüphanelere ihtiyaç duyar

POI

itext

(28)

DataExporter

<h:form>

<p:dataTable value="#{satisBean.satislar}" var="satis" id="satislar">

<p:column>

<f:facet name="header">Marka</f:facet>

#{satis.marka} </p:column>

</p:column> <p:column>

<f:facet name="header">Adet</f:facet>

#{satis.adet} </p:column>

</p:dataTable>

<h:commandButton value="PDF Cikti">

<p:dataExporter type="pdf" target="satislar" fileName="satislar" />

</h:commandButton> </h:form>

(29)

Print

<h:commandButton id="btn" value="Print">

<p:printer target="satislar" />

</h:commandButton>

(30)

p:message

<h:inputText value="#{demoBean.ad}" id="ad"

required="true" requiredMessage="Ad alani bos olamaz"/>

<p:message for="ad" />

(31)

p:messages

<p:messages />

<h:inputText value="#{demoBean.ad}" required="true" requiredMessage="Ad alani bos olamaz"/>

<h:commandButton action="#{demoBean.kaydet}" value="Kaydet" />

(32)

Ajax Operasyonları

<p:commandButton update="mesaj"

action="#{demoBean.kaydet}" value="Kaydet" />

<p:commandButton ajax="false" action="#{demoBean.kaydet}" value="Kaydet" />

(33)

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" <p:commandButton update="mesaj"

</h:form>

(34)

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" />

(35)

Ajax Operasyonları

<p:ajaxStatus>

<f:facet name="start">

<h:outputText value="Yükleniyor..." />

</f:facet>

<f:facet name="complete">

"Tamanlandi..." />

<h:outputText value="Tamanlandi..." />

</f:facet> </p:ajaxStatus>

(36)

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"

</h:form> </h:form>

(37)

p:editor

<h:form>

<p:editor value="#{demoBean.bilgi}"></p:editor>

<h:commandButton action="#{demoBean.kaydet}" />

</h:form>

(38)

p:inputMask

<p:inputMask mask="999-99-9999" value="#{demoBean.ad}" />

(999) 999-9999

a-9999999

a*-9999-*99

(39)

p:keyboard

<p:keyboard

/>

(40)

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="#" />

"Link" icon="/img/link.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>

(41)

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>

(42)

TouchFaces

Iphone, Android, Palm gibi web kit platformları için mobil

uygulamalar geli

ş

tirmek için kullanılır.

(43)

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>

(44)

TouchFaces

<i:view id="home" title="Anasayfa">

</i:view>

</i:application>

(45)

TouchFaces

<i:tableView>

<i:rowGroup title="Row Group">

<i:rowItem value="Row 1" />

"Row 2" />

<i:rowItem value="Row 2" />

</i:rowGroup> </i:tableView>

</i:view>

</i:application>

(46)

TouchFaces

<i:rowGroup title="Row Group" display="edgetoedge">

(47)

TouchFaces

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

<i:view id="mailOku" title="Mail Oku">

</i:view>

<i:view id="mailGonder" title="Mail Gonder">

</i:view>

</i:application>

(48)

TouchFaces

<i:view id="mailOku" title="Mail Oku">

<f:facet name="leftNavBar">

<i:navBarControl label="Anasayfa" view="home" />

</f:facet>

</i:view>

(49)

TouchFaces

<i:rowItem>

Dil Seçimi :

<h:selectOneMenu id="fromLang">

<f:selectItem itemLabel="English" itemValue="en" />

<f:selectItem itemLabel="Turkish" itemValue="tr" />

"Italian" itemValue="it" />

<f:selectItem itemLabel="Italian" itemValue="it" />

<f:selectItem itemLabel="Spanish" itemValue="es" />

<f:selectItem itemLabel="German" itemValue="de" />

</h:selectOneMenu> </i:rowItem>

(50)

TouchFaces

<i:rowItem>

<h:inputTextarea id="toText" style="height:50px;"/>

</i:rowItem>

(51)

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="#" > "whiteButton" value="#" > Gönder </h:outputLink> </h:form> </i:rowItem> www.mergecons.com 51

(52)