JSF Dersleri – Dönüştürücüler (Converters) -1- f:convertNumbers&f:convertDateTime

Merhabalalar arkadaşlar. Bu yazı ve gelecek yazıda sizlere JSF’nin dönüştürücü mekanizmasını anlatmaya çalışacağım.

Konuya geçmeden önce değinmek istediğim iki şey var. Birinci olarak bu yazı JSF yazı dizisinde yazdığım 41. yazı fakat konu itibari ile biraz daha bütün bir yapıda gidebileceğini düşündüğüm için JSF’ye Giriş yazısında yazıları sıraladığım listede bu yazının sırasını yukarıyı aldım ve gelecek yazı da yukarıda yer alacak arkadaşlar. İkinci olarak da sizlerden bir ricam olacak. KOD5’teki JSF yazılarımın video halini Youtube’da paylaşıyorum. Sizlerden ricam Youtube’daki videolarımı kendi sosyal medya hesaplarınızda da paylaşarak video derslerden haberi olmayan arkadaşların haberi olmasını sağlamanızdır. JSF Video Dersleri’nin oynatma listesinin linki şöyledir,şimdiden teşekkür ederim 🙂 https://www.youtube.com/playlist?list=PLrj6intzfRHWQMUlNpDqlvtTFRV7BUfhw

JSF mimarisi içinde iki tür dönüştürücü mevcuttur arkadaşlar. Birincisi JSF’nin kendi içinde gelen f: tagleri ile kullanılan dönüştürücülerdir. Bunlar:

f:convertNumber
f:convertDateTime’dır.

İkinci türü ise Custom Converter denilen bizim projemiz için yazdığımız özel dönüştürücülerdir. Biz bu yazıda birinci türü öğreneceğiz. İkinci yazıda da özel dönüştürücüleri.

Şimdi örnek uygulama üzerinden f:convertNumber ve f:convertDateTime etiketlerinin kullanımını öğrenelim. İlk olarak f:convertNumber’a bakalım.

converterPage.xhtml

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head>
	<title>Converter Örnek Kodu</title>
</h:head> 
<h:body> 

	<h:form>
		<h:panelGrid columns="2">
			<h:outputText value="MinFractionDigits-Noktadan Sonra En Az Kaç Hane Olacağını Belirtir"/>
			<h:inputText value="#{converterBean.minFractionDigitVariable}" >
				<f:convertNumber minFractionDigits="2"/>
			</h:inputText>
			
			<h:outputText value="Pattern-Alınan Değerin Alacağı Biçim"/>
			<h:inputText value="#{converterBean.patternVariable}" >
				<f:convertNumber  pattern="#,##.00"/>
			</h:inputText>
			
			<h:outputText value="CurrencyCode-Para Sembölü İle Kullanılabilen Biçim"/>
			<h:inputText value="#{converterBean.currencyCodeVariable}" >
				<f:convertNumber    locale="tr_TR" type="currency"/>
				<!-- currencyCode="TRY" , currencySymbol="₺"-->		
			</h:inputText>
			
			<h:outputText value="Percent-Girilen Sayının Yüzde Kaç Olduğunu Bildirir"/>
			<h:outputText value="#{converterBean.percentVariable}">
				<f:convertNumber type="percent"/>
			</h:outputText>
		</h:panelGrid>
		<h:commandButton value="Gönder" />
	</h:form>
</h:body> 
</html>

<!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:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html">

<h:head>

<title>Converter Örnek Kodu</title>

</h:head>

<h:body>

<h:form>

<h:panelGrid columns="2">

<h:outputText value="MinFractionDigits-Noktadan Sonra En Az Kaç Hane Olacağını Belirtir"/>

<h:inputText value="#{converterBean.minFractionDigitVariable}" >

<f:convertNumber minFractionDigits="2"/>

</h:inputText>

<h:outputText value="Pattern-Alınan Değerin Alacağı Biçim"/>

<h:inputText value="#{converterBean.patternVariable}" >

<f:convertNumber pattern="#,##.00"/>

</h:inputText>

<h:outputText value="CurrencyCode-Para Sembölü İle Kullanılabilen Biçim"/>

<h:inputText value="#{converterBean.currencyCodeVariable}" >

<f:convertNumber locale="tr_TR" type="currency"/>

</h:inputText>

<h:outputText value="Percent-Girilen Sayının Yüzde Kaç Olduğunu Bildirir"/>

<h:outputText value="#{converterBean.percentVariable}">

<f:convertNumber type="percent"/>

</h:outputText>

</h:panelGrid>

<h:commandButton value="Gönder" />

</h:form>

</h:body>

</html>

Bir bileşenin tuttuğu değere sayısal dönüşüm işlemi uygulamak için o bileşenin etiketleri arasında f:convertNumber etiketini kullanırız.

Bu etiketin minFractionDigits özelliği ile girilen sayının noktadan sonra en az kaç basamak daha devam edeceğini söyleriz. Bu örnek için girilen sayını noktadan sonra en az 2 basamak daha ilerletilecek.
Pattern özelliği ile alınan sayıyı bizim istediğimiz bir biçime sokabiliriz. Örneğimizdeki pattern yapısına göre yapılacak işlem sayının noktadan sonra 2 basamak sürüdülmesi noktadan önceki kısmın ikişerli basamaklara bölünmesi. Örneğin girilecek 1923.29 sayısı 19,23.29 şeklinde biçimlendirilecek. Yalnız burda dikkat etmeniz gereken yer şu ki noktadan sonra üç basamak girerseniz ve son basamak >= 5 olursa onu en yakın 2 basamaklı sayıya yuvarlar. Yani 295 girerseniz 30 olarak döndürür.
JSF’nin dönüştürücüleri içinde para işlemleri (currency) için de özellikler bulunmakta. Etiketimizin type özelliğine currency ataması yaptığımızda dönüştürme işlemi için parasal işlem olacağını algılar ve varsayılan olarak dolar simgesini ilgili değer ile ekrana basar. Bizim burada bir ülke için özelleştirme yapmamız gerektiğinde 3 seçenek çıkar önümüze ve işimize yarayanı kullanırız.
1)locale=”tr_TR” özelliğini kullanırsak dolar simgesi kalkar ve değerin sonuna “TL” ibaresi eklenir.
2)currencyCode=”TRY” dersek dolar simgesi kalkar ve yerine TRY yazar.
3)currencySymbol=”₺” dersek dolar simgesi yerine Türk Lirası’nın simgesini koymuş oluruz.
Percent özelliği ile girilen sayının yüzde kaça eşit olduğu bilgisi alınabilinir. Örneğin 0.1 sayısı %10 değerine tekavvül etmektedir. 5 sayısı da %500. Managed bean kodu içinde değere 5 ataması yaptım ve sayfada %500 çıktısı alıcaz.

CoverterBean.java Kodu

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean
@SessionScoped
public class ConverterBean {
	double minFractionDigitVariable;
	double patternVariable;
	double currencyCodeVariable;
	double percentVariable=5;
	
	public double getMinFractionDigitVariable() {
		return minFractionDigitVariable;
	}
	
	public void setMinFractionDigitVariable(double minFractionDigitVariable) {
		this.minFractionDigitVariable = minFractionDigitVariable;
	}
	
	public double getPatternVariable() {
		return patternVariable;
	}
	
	public void setPatternVariable(double patternVariable) {
		this.patternVariable = patternVariable;
	}
	
	public double getCurrencyCodeVariable() {
		return currencyCodeVariable;
	}
	
	public void setCurrencyCodeVariable(double currencyCodeVariable) {
		this.currencyCodeVariable = currencyCodeVariable;
	}
	
	public double getPercentVariable() {
		return percentVariable;
	}
	
	public void setPercentVariable(double percentVariable) {
		this.percentVariable = percentVariable;
	}
}

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

@ManagedBean

@SessionScoped

public class ConverterBean {

double minFractionDigitVariable;

double patternVariable;

double currencyCodeVariable;

double percentVariable=5;

public double getMinFractionDigitVariable() {

return minFractionDigitVariable;

}

public void setMinFractionDigitVariable(double minFractionDigitVariable) {

this.minFractionDigitVariable = minFractionDigitVariable;

}

public double getPatternVariable() {

return patternVariable;

}

public void setPatternVariable(double patternVariable) {

this.patternVariable = patternVariable;

}

public double getCurrencyCodeVariable() {

return currencyCodeVariable;

}

public void setCurrencyCodeVariable(double currencyCodeVariable) {

this.currencyCodeVariable = currencyCodeVariable;

}

public double getPercentVariable() {

return percentVariable;

}

public void setPercentVariable(double percentVariable) {

this.percentVariable = percentVariable;

}

Ekran Çıktısı

Managed Bean içinde percentVariable’ın değeri 5 olduğu için %500 çıktısını aldık. Şimdi diğer yerlere bazı değerler girelim.

InputText’lere bazı değerler girdim.

MinFractionDigit ve Pattern üzerine verilen görevleri yaptılar.

f:convertNumber etiketini böylece öğrenmiş olduk. Şimdi f:convertDateTime etiketimize bakalım.

Bir Java kodu içersinde o anki tarihi tespit ettirdiğimiz new Date(); ifadesi ile şöyle bir çıktı elde edebiliriz:

Tue Nov 10 22:45:07 EET 2015

1	Tue Nov 10 22:45:07 EET 2015

Tahmin edeceğiniz üzere bu ifade kullanışlı ve pek anlaşılır değil. Şimdi biz f:converDateTime etiketi ve onun özellikleri ile bu ifadeyi biçimlendirelim. Örnek kodumuz şöyle:

<!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:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 

<h:head>
	<title>Converter Örnek Kodu</title>
</h:head> 
<h:body> 

	<h:form>
		
		<h:panelGrid columns="2">
			<h:outputText value="DateTimeConverter-Pattern Kullanmadan" />
			<h:inputText value="#{converterBean.dateObject}">
				<f:convertDateTime timeZone="Asia/Tokyo" timeStyle="medium" locale="tr_TR"  
								   dateStyle="medium" type="both"/>
			</h:inputText>
			
			<h:outputText value="DateTimeConverter-Pattern Kullanarak" />
			<h:inputText value="#{converterBean.dateObject}">
				<f:convertDateTime pattern="dd/MM/yyyy"/>
			</h:inputText>
		</h:panelGrid>
		
		<h:commandButton value="Gönder" />
	</h:form>
</h:body> 
</html>

<!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:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html">

<h:head>

<title>Converter Örnek Kodu</title>

</h:head>

<h:body>

<h:form>

<h:panelGrid columns="2">

<h:outputText value="DateTimeConverter-Pattern Kullanmadan" />

<h:inputText value="#{converterBean.dateObject}">

<f:convertDateTime timeZone="Asia/Tokyo" timeStyle="medium" locale="tr_TR"

dateStyle="medium" type="both"/>

</h:inputText>

<h:outputText value="DateTimeConverter-Pattern Kullanarak" />

<h:inputText value="#{converterBean.dateObject}">

<f:convertDateTime pattern="dd/MM/yyyy"/>

</h:inputText>

</h:panelGrid>

<h:commandButton value="Gönder" />

</h:form>

</h:body>

</html>

2 inputText’ten birincisinde pattern kullanmadan biçimlendirme işlemlerine bakıyoruz.

timeZone özelliği tarihin nereye göre alınacağını belirtir. Örneğimizde Tokyo’nun zaman dilimi bize getirilecek.
timeStyle özelliği ile tarih bilgisi içerisindeki saatin formatlaması yapılır. timeStyle’a parametre olarak default, long, full, medium ve short verilebilir.
-)default saat:dakika:saniye olarak verir.
-)full default’a ek olarak bir zaman kodu da ekler. Tokyo için bu kod JST’dir.
-)long ile default arasında sayfada bir farklılık göremedim. 🙂
-)medium da default ile aynı çıktıyı veriyor.
-)short parametresi saniyeyi de kaldırıp saat ve dakika şeklinde çıktı veriyor.
locale özelliği alınan tarihin hangi ülkeye göre formatlanacağı bilgisini verir. Bizim örneğimizde Tokyo’daki tarih&saat Türkiye’ye göre formatlanacak.
dateStyle özelliği ile tarihin nasıl formatlanacağını söyler. Bu özelliğe short,medium ve long parametrelerini veririz. Short 10.10.205, medium 10.Kas.2015, long ise 10 Kasım 2015 Salı şeklinde çıktı verir.
type özelliği de sadece tarih mi, sadece saat mi, tarih saat beraber mi gösterilecek ona karar verir. Both dersek ikisini, date dersek sadece tarihi, time dersek sadece saati gösterir.

İkinci inputText’te ise bir pattern kullanımı var. Bu inputText’e gönderilen tarih pattern’e göre biçimlendirilip kullanıcıya gösterilecektir. Bunun yanında kullanıcıdan tarih alınacağı zaman da bu pattern’e uygun biçimde tarih alınmalıdır. Aksi takdirde convert error durumu ile karşılaşırız.

ConverterBean.java

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean
@SessionScoped
public class ConverterBean {
	Date dateObject;
	
	public Date getDateObject() 
	{
		return new Date();
	}
	
	public void setDateObject(Date dateObject) {
		System.out.println(dateObject);
		this.dateObject = dateObject;
	}
}