Merhaba arkadaşlar. Bu yazıda sizlere PrimeFaces’ın bize verdiği güzel özelliklerden biri olan takvimin nasıl kullanacağını anlatmaya çalışacağım.
PrimeFaces’da çeşitli şekillerde takvimler bulunmakta. Sayfa açıldığında direk gelen, butona basıldığında gelen, textbox’a tıkladığınızda gelen vb. Örneğimizde 11 çeşit takvim kullanımına bakacağız. Örneğimizin kodları, açıklamaları ve çıktıları şu şekilde:
Öncelikle örnek içinde kullanacağımız <f:converDateTime> etiketinin düzgün çalışabilmesi için web.xml dosyasının içindeki context-param etiketinin arasına şu kodu ekliyoruz:
|
1 2 |
<param-name>javax.faces.DATETIMECONVERTER_DEFAULT_TIMEZONE_IS_SYSTEM_TIMEZONE</param-name> <param-value>true</param-value> |
Bu kodu eklemediğinizde büyük ihtimalle diyalog penceresinde tarihleri yanlış görüyor olacaksınız.
index.xhtml Kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<?xml version='1.0' encoding='UTF-8' ?> <!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://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h:form id="form"> <p:growl id="msgs" showDetail="true" /> <h:panelGrid columns="2" cellpadding="5"> <p:outputLabel for="inline" value="Inline:" /> <p:calendar id="inline" showButtonPanel="true" value="#{calendarView.date1}" mode="inline" /> <p:outputLabel for="popup" value="Popup:" /> <p:calendar id="popup" value="#{calendarView.date2}" /> <p:outputLabel for="button" value="Button:" /> <p:calendar id="button" value="#{calendarView.date3}" showOn="button" /> <p:outputLabel for="event" value="Select Event:" /> <p:calendar id="event" value="#{calendarView.date4}"> <p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" /> </p:calendar> <p:outputLabel for="english" value="English" /> <p:calendar value="#{calendarView.date5}" id="english" locale="en" showButtonPanel="true" navigator="true" pattern="yyyy-MMM-dd" /> <p:outputLabel for="restricted" value="Restricted:" /> <p:calendar id="restricted" value="#{calendarView.date6}" mindate="4/1/14" maxdate="7/1/14" /> <p:outputLabel for="multi" value="Multiple:" /> <p:calendar id="multi" value="#{calendarView.date7}" pages="3" /> <p:outputLabel for="effect" value="Effect:" /> <p:calendar id="effect" value="#{calendarView.date8}" effect="fold" /> <p:outputLabel for="mask" value="Mask:" /> <p:calendar id="mask" value="#{calendarView.date9}" pattern="dd-MM-yyyy" mask="true" /> <p:outputLabel for="datetime" value="Datetime:" /> <p:calendar id="datetime" value="#{calendarView.date10}" pattern="MM/dd/yyyy HH:mm:ss" /> <p:outputLabel for="time" value="Time:" /> <p:calendar id="time" value="#{calendarView.date11}" pattern="HH:mm a" timeOnly="true" /> </h:panelGrid> <p:commandButton value="Submit" update="msgs" actionListener="#{calendarView.click}" icon="ui-icon-check" /> <p:dialog modal="true" resizable="false" header="Values" widgetVar="dlg" showEffect="fold"> <p:panelGrid id="display" columns="2" columnClasses="label,value"> <h:outputText value="Inline:" /> <h:outputText value="#{calendarView.date1}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Popup:" /> <h:outputText value="#{calendarView.date2}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Button:" /> <h:outputText value="#{calendarView.date3}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Event:" /> <h:outputText value="#{calendarView.date4}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="English:" /> <h:outputText value="#{calendarView.date5}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Restricted:" /> <h:outputText value="#{calendarView.date6}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Multiple:" /> <h:outputText value="#{calendarView.date7}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Effect:" /> <h:outputText value="#{calendarView.date8}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Mask:" /> <h:outputText value="#{calendarView.date9}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </h:outputText> <h:outputText value="Datetime:" /> <h:outputText value="#{calendarView.date10}"> <f:convertDateTime pattern="MM/dd/yyyy HH:mm:ss" /> </h:outputText> <h:outputText value="Time:" /> <h:outputText value="#{calendarView.date11}"> <f:convertDateTime pattern="HH:mm a" /> </h:outputText> </p:panelGrid> </p:dialog> </h:form> </h:body> </html> |
index.xhtml sayfamızın içinde bir takvim kullanmak istediğimizde bunu <p:calendar> etiketi ile sağlıyoruz. Hangi takvim türünü kullanmak istediğimizi ise etiketin id nesnesine kullanmak istediğimiz takvimin değerini vererek belirtiyoruz. Örneğin sayfa direk açıldığında takvim gelmesini istiyorsak id=”inline” diyerek bunu sağlayabiliriz. Ya da bir butona tıkladığımızda takvim açılması için id=”button” dememiz yeterli.
CalendarView.java Kodu
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
import java.text.SimpleDateFormat; import java.util.Date; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.context.FacesContext; import org.primefaces.context.RequestContext; import org.primefaces.event.SelectEvent; @ManagedBean public class CalendarView { private Date date1; private Date date2; private Date date3; private Date date4; private Date date5; private Date date6; private Date date7; private Date date8; private Date date9; private Date date10; private Date date11; public void onDateSelect(SelectEvent event) { FacesContext facesContext = FacesContext.getCurrentInstance(); SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy"); facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Tarih Seçildi", format.format(event.getObject()))); } public void click() { RequestContext requestContext = RequestContext.getCurrentInstance(); requestContext.update("form:display"); requestContext.execute("PF('dlg').show()"); } public Date getDate1() { return date1; } public void setDate1(Date date1) { this.date1 = date1; } public Date getDate2() { return date2; } public void setDate2(Date date2) { this.date2 = date2; } public Date getDate3() { return date3; } public void setDate3(Date date3) { this.date3 = date3; } public Date getDate4() { return date4; } public void setDate4(Date date4) { this.date4 = date4; } public Date getDate5() { return date5; } public void setDate5(Date date5) { this.date5 = date5; } public Date getDate6() { return date6; } public void setDate6(Date date6) { this.date6 = date6; } public Date getDate7() { return date7; } public void setDate7(Date date7) { this.date7 = date7; } public Date getDate8() { return date8; } public void setDate8(Date date8) { this.date8 = date8; } public Date getDate9() { return date9; } public void setDate9(Date date9) { this.date9 = date9; } public Date getDate10() { return date10; <em><strong> } public void setDate10(Date date10) { this.date10 = date10; } public Date getDate11() { </strong> </em> return date11; } public void setDate11(Date date11) { this.date11 = date11; } } |
Sınıfımız içindeki onDateSelect metodu ile sayfamızda yer alan Select Event takviminde tarih seçildiğinde sol üstte tarihin seçildiğini bildiriyoruz. Bu metodun gönderdiği sonuç ajax yardımı ile listener üzerinden bileşenin update özelliğine ulaşıyor.
onClick metodu ise önceki yazılarda bahsettiğimiz onComplete bileşeninin görevini yerine getiriyor. Butona basıldığında ekranda diyalog penceresinin görünmesini onClick metodu sağlıyor.
Ekran Çıktıları
Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda diğer dillerdeki takvimler‘in nasıl kullanıldığını öğreneceğiz. Sağlıcakla kalın.
