การ Customize DateField ให้แสดงเดือน/ปี แบบไทยๆ
—————————————————-
สิ่งที่ควรรู้เกี่ยวกับการทำ Localization เบื้องต้น
http://www.adobe.com/devnet/flex/articles/flex_localization_pt1.html
http://devgirl.org/2011/03/15/flex-4-localization/
—————————————————-
การพัฒนาระบบที่ต้องทำ Localization เพื่อรองรับการผู้ใช้หลายภาษา DateField จะสามารถปรับเปลี่ยนการแสดงผลได้อัตโนมัติ ดังตัวอย่าง
‘en_US’ :
————————-
‘zh_CN’ :
———————–
ซึ่งการปรับเปลี่ยนแบบอัตโนมัติของ DateField นี้ ใน Flex framework จะรองรับได้หลายภาษา แต่ไม่ทั้งหมด O_o’ ซึ่งภาษาไทยก็ภาษาที่ Flex framework ไม่ได้จัดการเตรียมไว้ให้ ดังนั้นจึงต้องมีการ Customize เล็กน้อยเพื่อให้สามารถแสดงผลให้เหมาะสม ดังต่อไปนี้
– สร้าง Locale Resources file ภาษาที่ต้องการ
– Config (SDK Apache Flex 4.8.0) : Additional compiler arguments with
-locale en_US -locale ja_JP -locale ko_KR -locale th_TH -locale zh_CN -source-path ./locale/{locale} -allow-source-path-overlap=true -services “services-config.xml”
– ทำ ButtonBar และทำ dataProvider binding ด้วย…
acFlag = new ArrayCollection(
[
{label:'', locale:'zh_CN', icon:'org/robotlegs/asia_garage/views/assets/flags/24/China.png'},
{label:'', locale:'th_TH', icon:'org/robotlegs/asia_garage/views/assets/flags/24/Thailand.png'},
{label:'', locale:'en_US', icon:'org/robotlegs/asia_garage/views/assets/flags/24/United-States.png'}
]
);
BindingUtils.bindProperty(view.btnBar, 'dataProvider', model, 'acFlag');
– ButtonBar MXML
<s:ButtonBar id="btnBar" iconField="icon" width="90" height="28" change="btnBar_changeHandler(event)"/>
– ButtonBar change event code
protected function btnBar_changeHandler(event:IndexChangeEvent):void
{
trace('MainAppView.btnBar_changeHandler(event:IndexChangeEvent):void');
// TODO Auto-generated method stub
if(btnBar.selectedIndex < 0)
return;
resourceManager.localeChain = [btnBar.selectedItem.locale];
}
– Customize DateField (ซะที)
////////////////////////////////////////////////////////////////////////////////
//
// DateFieldLocale_AS class is date field control for unsupported locale
// by Noppadon Sodram
// email : knopsod@gmail.com
//
////////////////////////////////////////////////////////////////////////////////
package org.robotlegs.knopsod.components.datefield_th
{
import mx.controls.DateField;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.IListItemRenderer;
import mx.events.DateChooserEvent;
import mx.events.DropdownEvent;
public class DateFieldLocale_AS extends DateField implements IListItemRenderer
{
private var df:DateField;
private var dayNamesTH:Array;
private var monthNamesTH:Array;
public function DateFieldLocale_AS()
{
trace('DateFieldLocale_AS()');
super();
df = new DateField();
this.dayNamesTH = new Array('อา','จ','อ','พ','พฤ','ศ','ส');
this.monthNamesTH = new Array(
'มกราคม','กุมภาพันธ์','มีนาคม','เมษายน',
'พฤษภาคม','มิถุนายน','กรกฏาคม','สิงหาคม',
'กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'
);
this.formatString = 'YYYY-MM-DD';
this.yearNavigationEnabled = true;
trace('resourceManager.getLocales():' + resourceManager.getLocales());
trace('resourceManager.getLocales()[0]:' + resourceManager.getLocales()[0]);
trace('resourceManager.localeChain:' + resourceManager.localeChain);
trace('resourceManager.localeChain[0]:' + resourceManager.localeChain[0]);
if(resourceManager.localeChain[0] == 'th_TH'){
this.dayNames = this.dayNamesTH;
this.monthNames = this.monthNamesTH;
}
this.addEventListener(DropdownEvent.OPEN, this.openHandler);
this.addEventListener(DateChooserEvent.SCROLL, this.scrollHandler);
}
private function openHandler(event:DropdownEvent):void{
trace('DateFieldLocale_AS.openHandler(event:DropdownEvent):void{');
setLocaleDateFieldSymbol();
}
private function scrollHandler(event:DateChooserEvent):void{
trace('DateFieldLocale_AS.scrollHandler(event:DateChooserEvent):void{');
setLocaleDateFieldSymbol();
}
private function setLocaleDateFieldSymbol():void{
trace('DateFieldLocale_AS.setLocaleDateFieldSymbol():void{');
trace('resourceManager.getLocales():' + resourceManager.getLocales());
trace('resourceManager.getLocales()[0]:' + resourceManager.getLocales()[0]);
trace('resourceManager.localeChain:' + resourceManager.localeChain);
trace('resourceManager.localeChain[0]:' + resourceManager.localeChain[0]);
if(resourceManager.localeChain[0] == 'th_TH'){
this.monthSymbol = '';
this.yearSymbol = '/' + (this.displayedYear + 543);
}else{
this.monthSymbol = df.monthSymbol;
this.yearSymbol = df.yearSymbol;
}
}
override public function set data(value:Object):void{
trace('DateFieldLocale_AS.set data(value:Object):void{');
trace('value[ ( this.listData as DataGridListData ).dataField ]:' + value[ ( this.listData as DataGridListData ).dataField ]);
this.text = value[ ( this.listData as DataGridListData ).dataField ];
}
override protected function resourcesChanged():void{
trace('DateFieldLocale_AS.resourcesChanged():void{');
super.resourcesChanged();
trace('resourceManager.getLocales():' + resourceManager.getLocales());
trace('resourceManager.getLocales()[0]:' + resourceManager.getLocales()[0]);
trace('resourceManager.localeChain:' + resourceManager.localeChain);
trace('resourceManager.localeChain[0]:' + resourceManager.localeChain[0]);
if(resourceManager.localeChain[0] == 'th_TH'){
this.dayNames = this.dayNamesTH;
this.monthNames = this.monthNamesTH;
}else{
df = null;
df = new DateField();
this.dayNames = (df)?df.dayNames:this.dayNames;
this.monthNames = (df)?df.monthNames:this.monthNames;
}
}
}
}
– ผลลัพธ์
อ่านยากหน่อยนะครับ ขออภัย
AIR Flex ActionScript Guide Blog 