PrimeFaces

PrimeFaces-Farklı Dillerdeki Takvimler

11 yıl önce
Yorum Ekle
admin
201 görüntülenme

Merhaba arkadaşlar. Takvim Kullanımı  yazımızda tek dil (İngilizce) takvim kullanmıştık. Yaptığım bazı araştırmalara göre PrimeFaces şu anda İngilizce dışında bir takvim dilini direk olarak desteklemiyor. Bulduğum çözüme göre ek diller için xhtml sayfamız içine eklemeler yapmamız gerekiyor. Bu eklemeleri JavaScript yardımı ile yapacağız. Örnek uygulamada Türkçe, Arapça ve Rusça takvim oluşturmayı göreceğiz. Bu durumu çözmek için farklı bir yöntem biliyorsanız lütfen yazının altına yorum yazınız.

index.xhtml Kodu

<?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:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <title>Merhaba</title>
    <script type="text/javascript">
        PrimeFaces.locales['tr'] = {
            closeText: 'kapat',
            prevText: 'geri',
            nextText: 'ileri',
            currentText: 'bugün',
            monthNames: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
            monthNamesShort: ['Oca','Şub','Mar','Nis','May','Haz', 'Tem','Ağu','Eyl','Eki','Kas','Ara'],
            dayNames: ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
            dayNamesShort: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
            dayNamesMin: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
            weekHeader: 'Hf',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: '',
            timeOnlyTitle: 'Zaman Seçiniz',
            timeText: 'Zaman',
            hourText: 'Saat',
            minuteText: 'Dakika',
            secondText: 'Saniye',
            ampm: false,
            month: 'Ay',
            week: 'Hafta',
            day: 'Gün',
            allDayText : 'Tüm Gün'
        };
    </script>
    <script type="text/javascript">
        PrimeFaces.locales ['ar'] = {
            closeText: 'إغلق',
            prevText: 'إلى الخلف',
            nextText: 'إلى الأمام',
            currentText: 'بداية',
            monthNames: ['ديسمبر', 'نوفمبر', 'أكتوبر', 'سبتمبر', 'أغسطس', 'يوليو', 'يونيو', 'مايو', 'ابريل', 'مارس', 'فبراير', 'يناير' ],
            monthNamesShort: ['ديسمبر', 'نوفمبر', 'أكتوبر', 'سبتمبر', 'أغسطس', 'يوليو', 'يونيو', 'مايو', 'ابريل', 'مارس', 'فبراير', 'يناير' ],
            dayNames: ['يوم الأحد‎', 'يوم الإثنين‎', 'يوم الثلاثاء‎', '‏يوم الأَرْبعاء‎', '‏يوم الخَمِيس‎', 'يوم الجُمْعَة‎‎', 'يوم السَّبْت'],
            dayNamesShort: ['الأحد‎', 'الإثنين‎', 'الثلاثاء‎', 'الأَرْبعاء‎', 'الخَمِيس‎', 'الجُمْعَة‎‎', 'السَّبْت'],
            dayNamesMin: ['الأحد‎', 'الإثنين‎', 'الثلاثاء‎', 'الأَرْبعاء‎', 'الخَمِيس‎', 'الجُمْعَة‎‎', 'السَّبْت'],
            weekHeader: 'الأسبوع',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix:'' ,
            timeOnlyTitle: 'الوقت فقط' ,
            timeText: 'الوقت' ,
            hourText: 'ساعة',
            minuteText: 'دقيقة',
            secondText: 'ثانية',
            ampm: false,
            month: 'الشهر',
            week: 'الأسبوع',
            day: 'اليوم',
            allDayText: 'سا ئراليوم'
        };
    </script>
    <script type="text/javascript">
        PrimeFaces.locales ['ru'] = {
            closeText: 'Закрыть',
            prevText: 'Назад',
            nextText: 'Вперёд',
            monthNames: ['Январь', 'Февраль' , 'Март' , 'Апрель' , 'Май' , 'Июнь' , 'Июль' , 'Август' , 'Сентябрь','Октябрь','Ноябрь','Декабрь' ],
            monthNamesShort: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек' ],
            dayNames: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Субота'],
            dayNamesShort: ['Воск','Пон' , 'Вт' , 'Ср' , 'Четв' , 'Пят' , 'Суб'],
            dayNamesMin: ['В', 'П', 'Вт', 'С ', 'Ч', 'П ', 'Сб'],
            weekHeader: 'Неделя',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix:'',
            timeOnlyTitle: 'Только время',
            timeText: 'Время',
            hourText: 'Час',
            minuteText: 'Минута',
            secondText: 'Секунда',
            currentText: 'Сегодня',
            ampm: false,
            month: 'Месяц',
            week: 'неделя',
            day: 'День',
            allDayText: 'Весь день'
        };
    </script>
</h:head>
   <h:body>
       <h:form id="form">
           <p:growl id="msgs" showDetail="true" />

           <h:panelGrid columns="4" cellpadding="5">
               <p:outputLabel value="Türkçe Takvim"/>
               <p:calendar locale="tr" mode="inline" value="#{calendarView.date1}"/>

               <p:outputLabel value="Arapça Takvim"/>
               <p:calendar locale="ar" mode="inline" value="#{calendarView.date2}">
                   <p:ajax event="dateSelect" update="msgs" listener="#{calendarView.onDateSelect}"/>
               </p:calendar>

               <p:outputLabel value="Rusça Takvim"/>
               <p:calendar locale="ru" mode="inline" value="#{calendarView.date3}"/>
           </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="Türkçe:" />
                   <h:outputText value="#{calendarView.date1}">
                       <f:convertDateTime pattern="MM/dd/yyyy" />
                   </h:outputText>

                   <h:outputText value="Arapça:" />
                   <h:outputText value="#{calendarView.date2}">
                       <f:convertDateTime pattern="MM/dd/yyyy" />
                   </h:outputText>

                   <h:outputText value="Rusça:" />
                   <h:outputText value="#{calendarView.date3}">
                       <f:convertDateTime pattern="MM/dd/yyyy" />
                   </h:outputText>
               </p:panelGrid>
           </p:dialog>
       </h:form>
   </h:body>
</html>

<p:calendar> etiketinin locale bileşenine atadığımız değer bizim hangi dilde takvim kullanacağımızı belirler. Örneğin Türkçe dili için şu JavaScript kodunu yazdık:

<script type="text/javascript">
        PrimeFaces.locales['tr'] = {
            closeText: 'kapat',
            prevText: 'geri',
            nextText: 'ileri',
            currentText: 'bugün',
            monthNames: ['Ocak','Şubat','Mart','Nisan','Mayıs','Haziran','Temmuz','Ağustos','Eylül','Ekim','Kasım','Aralık'],
            monthNamesShort: ['Oca','Şub','Mar','Nis','May','Haz', 'Tem','Ağu','Eyl','Eki','Kas','Ara'],
            dayNames: ['Pazar','Pazartesi','Salı','Çarşamba','Perşembe','Cuma','Cumartesi'],
            dayNamesShort: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
            dayNamesMin: ['Pz','Pt','Sa','Ça','Pe','Cu','Ct'],
            weekHeader: 'Hf',
            firstDay: 1,
            isRTL: false,
            showMonthAfterYear: false,
            yearSuffix: '',
            timeOnlyTitle: 'Zaman Seçiniz',
            timeText: 'Zaman',
            hourText: 'Saat',
            minuteText: 'Dakika',
            secondText: 'Saniye',
            ampm: false,
            month: 'Ay',
            week: 'Hafta',
            day: 'Gün',
            allDayText : 'Tüm Gün'
        };
    </script>

PrimeFaces.locales[‘tr’] ifadesindeki tr bizim için Türkçe dilini simgeleyecek ve süslü parantez içindeki tüm değerleri ekrana takvim içinde basabilecek. Script kodunun ardından tek yapmamız gereken şey calendar etiketi içinde locale=”tr” diyerek Türkçe takvimi kullanmak.

CalendarView.java Kodu

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;

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

}

Bu kod içindeki önemli yerlerin açıklamasını önceki yazımda yapmıştım. Onu okumanızı tavsiye ederim.

Ekran Çıktısı

Adsız

 

 

 

 

 

 

 

 

 

 

 

 

Bu yazıda da bu kadar arkadaşlar. Gelecek yazıda görüşmek üzere. Sağlıcakla kalın.

Benzer Yazılar

Yorum Ekle

PrimeFaces-SelectCheckboxMenu Kullanımı ve @PostConstruct Anotasyonu için bir yanıt yazın X