[ Hi, I have moved to http://flexblog.teerasej.com ]

[ตอนนี้ผมมีบ้านใหม่แล้วนะครับ ตามอ่านต่อได้ที่ http://flexblog.teerasej.com ]

 

ฮาโหลๆ ไม่เจอกันนานนะครับ

ก็พอดีช่วงนี้ผมรับงานมาสอง project ก็เมามันกันไป

โปรเจคหนึงคือการใช้ Flex ทำ web-site commercial นั่นเอง ไม่มีอะไรมาก เป็นการประยุกต์ทำเวบโดยการใช้ Flex built ทั้งอันเลย เรียกได้ว่าไม่มี content อื่น มี Flash เพียวๆ

โปรเจคนี้ก็ใกล้จะแล้วเสร็จแล้ว แต่มีข้อสังเกตหนึ่งครับ คือ หากเราเสริมความสวยงาม (แน่นอนอยู่แล้วพวกเราไม่อยากเห็นแต่หน้าจอสีฟ้าครามใช่ไหมล่ะ) โดยการใส่ภาพหรือ content ข้อมูลเข้าไปมากๆ สิ่งที่ต้องเจอก็ไม่แคล้วจะเป็น initialize time ที่นานมั้กๆ ใช่ไหมล่ะ ตรงนี้ต้องดูดีๆ

ซึ่งทาง Flex framework ก็ไม่นิ่งนอนใจ เพราะรู้อยู่แล้วว่าพวกเราชอบสร้างอะไรที่มันทะลวง bandwitdh ให้มันหวือหวา มีวิธีการ ในการลำดับการโหลด ข้อมูล คือ creationPolicy ซึ่งรายละเอียด ก็จะมาโพสครั้งต่อไปนะครับ

อีกโปรเจคคือ โปรเจคจบผมเองคร้าบ แฮ่ๆ มันมีรหัสอันหวือหวาว่า "USpace" (จริงๆ ผมเรียกรหัสคนเดียวในกลุ่มอ่ะนะ) คือแหล่ง community ขนาดใหญ่ สำหรับนิสิตนักศึกษาทุกมหาวิทยาลัย แน่นอนครับ ผมตกเป็นผู้ที่ต้องรับผิดชอบการวาง architecture ของฝั่ง client โดยไม่ต้องสงสัย เพราะใช้ Flex เป็นหน้าฉาก นั่นเอง

ส่วนงานตรงนี้ก็ปวดหมองไปพอสมควร เพราะมีวิชาอื่นอีก ที่ต้องตามแก้ หึๆ แต่ทุกคนที่เป็นกำลังใจก็จะพยายามผ่านพ้นไปให้ได้ฮับ

ส่วนงานที่ไล่หลอกหลอนทุกตื่นนอนอีกงานคือ การทำ screencast tutorial ให้กับ thaiadobeuser ครับ นั่งนึกไม่ค่อยออกว่า จะสอนเกี่ยวกับอะไรดี เพราะเนื้อหามันก็กว้างมาก เดี๋ยวทำไปก็ไม่ถูกใจบางคนอีก ใครมีความต้องการแบบไหนก็บอกๆ กันหน่อยนะครับ

edit @ 16 Oct 2008 10:46:36 by หมาเขียว

 

 [ Hi, I have moved to http://flexblog.teerasej.com ]

[ตอนนี้ผมมีบ้านใหม่แล้วนะครับ ตามอ่านต่อได้ที่ http://flexblog.teerasej.com ]

 

property ของ component ที่ประกอบไปด้วย width และ height นั้น ความจริงแล้วมีถึง 3 property ที่มีความหมายคล้ายกัน หากแต่ พวกนี้ใช้แตกต่างกัน ได้แก่ width, contentWidth และ content.width ครับ ความแตกต่างในการใช้งานก็แตกต่างกันด้วย เรามาดูกันดีกว่าว่าใช้กันอย่างไร

1. width

คือ ค่าความกว้างของตัว image loader control มิใช่ความกว้างของ image ที่ถูกโหลดแต่อย่างใด หากค่านี้ไม่ถูก set ไว้ มันจะตั้งค่าตามความกว้างของ image ที่ถูกโหลดมาโดยอัตโนมัติ การ set ค่าแบบอัตโนมัตินี้เกิดขึ้นใน updateComplete event ที่จะถูก execute ตามหลัง complete event ครับ

2. contentWidth

คือความกว้างของ image ที่ถูกโหลด เมื่อปรับแต่ง (scale) ขนาดเรียบร้อยแล้ว ให้ระวังว่า image ที่ถูกโหลดจะยังไม่ถูกปรับแต่งเมื่อตอนที่โหลดเสร็จสมบูนณ์ การเรียกค่านี้มาใช้งานจะทำให้ได้ค่าที่ไม่ถูกต้อง (ค่าที่ได้จากการเรียกช่วงนี้คือ ขนาด image จริงครับ) เราจะได้ค่าที่ถูกต้องหลังจาก updateComplete event ของ control ทำการ execute แล้ว

3. content.width

คือความกว้างของ image ที่ไม่ขึ้นกับขนาดที่ปรับแต่งแล้ว (ขนาด image จริงนั่นเอง) ค่านี้สามารถเรียกได้ทันทีที่ image control ทำการ execute complete event แล้วครับ

หลักการนี้สามารถใช้กับ height ได้เหมือนกันนะคร้าบ

Credited for Rico

edit @ 17 Dec 2007 16:43:06 by หมาเขียว

edit @ 16 Oct 2008 10:46:15 by หมาเขียว

 [ Hi, I have moved to http://flexblog.teerasej.com ]

[ตอนนี้ผมมีบ้านใหม่แล้วนะครับ ตามอ่านต่อได้ที่ http://flexblog.teerasej.com ]

 

 

สวัสดีครับ post นี้จะเป็นการตอบคำถามจาก mail ของ คุณ "เด็กขี้สงสัย" นะครับ โดยผมเห็นว่า เป็นคำถามที่คนส่วนใหญ่ที่จะเริ่มศึกษา Flex น่าจะสงสัยกัน เลยขอเอามาลงที่นี่นะครับ

อยากรู้ว่า ตอนนี้ flex ที่มีอยู่ในขณะนี้ฟรีหรือเปล่า ค่ะ
>
> แล้วถ้า จะนำ flex มาพัฒนา กับเว็บไซต์ จะทำในส่วนไหนได้บ้าง
>
> หรือ พัฒนาได้แค่หน้าจอค่ะ อยากรู้พอคร่าวๆค่ะ
>
> แล้วเราต้องศึกษา ภาษา MXML ด้วยใช่ไหมค่ะ

ขอตอบดังข้างล่างนะครับ

สำหรับคำถามที่คุณเมย์ถามมา ผมจะถือว่าคุณมีประสบการณ์ในการทำ web application อยู่แล้ว และ กำลังศึกษา Flex ที่จะนำมาใช้ในงานของคุณนะครับ

1. ตอนนี้ Flex SDK ถือว่าเป็น open-source ครับ ส่วน Flex builder นั้นเป็นลิขสิทธิ์โดยตรงของ Adobe Inc. ครับต้องเสียเงิน ซื้อ license
   
2. การนำ Flex มาใช้กับ web เราสามารถทำได้หลายทางครับ แต่โดยตรงแล้ว เราจะใช้ Flex ในด้านของ front-end คือ user-interface logic ครับ โดย adobe เตรียม API ซึ่งใช้ต่อกับข้อมูลภายนอกได้หลายทางอยู่แล้ว การพัฒนาสามารถทำ Flex มาแทนที่ HTML ได้เหมือนกันครับ
   
3. Flex มีความสามารถในการจัดการข้อมูลด้วยนะครับ แต่ไม่มีฟังก์ชั่นที่ต่อกับ Database โดยตรง การทำการแลกเปลี่ยนข้อมูลจะเกิดขึ้นทาง API ที่ Adobe เตรียมไว้ให้ครับ
   
4. ใช่ครับ MXML เป็น XML-based tag ที่ทำหน้าที่โดยรวมคือ การวาง layout ให้กับ Flex application นั่นเองครับ ซึ่ง MXML มีความสามารถด้านอื่นอีก เช่นการควบคุม Behaviorและ Stateของ Applicaiton แม้แต่การ validation ข้อมูลเบื้องต้นด้วย

 

edit @ 16 Oct 2008 10:46:10 by หมาเขียว

This article for Beginner, Intermediate

 

 [ Hi, I have moved to http://flexblog.teerasej.com ]

[ตอนนี้ผมมีบ้านใหม่แล้วนะครับ ตามอ่านต่อได้ที่ http://flexblog.teerasej.com ]

 

หลังจากบางคนที่ได้ทำการติดต่อเข้ามากับผม ผมพบว่าส่วนใหญ่ที่เป็นผู้เริ่มต้นนั้น ยังมีการสับสนกับ Mark up tag [Bindable] อยู่ สงสัยใช่ไหมครับว่ามันคืออะไร มันมีหน้าที่ในการระบุว่า object นี้สามารถนำไปใช้ได้อย่างเดียวหรือเปล่า วันนี้เราจะมาไขปริศนากันครับ

[Bindable] metadata tag with Basic

 [Bindable] metadata tag การบอก compiler ให้ทำการอับเดตเมื่อเกิดการเปลี่ยนแปลงขึ้นกับตัว object ที่ เป็น data property ที่ bind เข้ากับ dataProvider property ของ control โดยทั่วไป

[Bindable] and [Bindable(event=event)]

 

 ส่วนที่แตกต่างระหว่าง การประกาศ event name ติดไปกับ tag [Bindable] นั้น คือการที่เราประกาศ [Bindable] tag ไว้โดดๆ จะเป็นการบอกให้ compiler นั้นเข้ามากำหนด event ชื่อ propertyChange ซึ่งจะถูก dispatch เมื่อเกิดการเปลี่ยนแปลงขึ้นกับ data object ตัวนี้ครับ

 

What will happen if dont mark this tag?

ถ้าเราไม่ได้ระบุ [Bindable] metadata tag ให้กับ object แล้ว control จะ read ข้อมูล เป็น read-only ครับ โดยที่การเปลี่ยนแปลงของ data object ที่ถูก bind เป็น dataProvider property จะไม่ถูกอัพเดตในส่วนอื่นๆ ที่อ้างถึงด้วยครับ

[Bindable] with Class

สำหรับ การ mark tag ไว้ที่ หัวของ class นั้น จะเป็นการบอกให้ compiler ทำการกำหนด tag [Bindable] ให้กับ public property ทั้งหมด โดยรวมถึง getter และ setter ทั้งหมดด้วยครับ ซึ่งจะมีประโยชน์ในการนำ instance ของ class นี่ไปใช้ในการ bind เข้ากับ control ซึ่ง control หรือ custom control จะมี logic ในการดึงข้อมูลออกจาก class ได้เองครับ

สำหรับการ mark tag class แบบนี้ compiler จะไม่มีการกำหนด property ที่เป็น protected หรือ private ทั้งสิ้น การที่จะให้ property เหล่านี้เป็น bindable ต้องไปกำหนดเองนะครับ

 

ทั้งหมดนี้คือ หลักการง่ายๆ กับ Bindable metadata tag ครับ ครั้งหน้าเรามาลองดูส่วน advanced สำหรับ [Bindable] metadata tag กันครับ

 

คนที่สนใจด้านนี้เหมือนกัน ยินดีให้คำแนะนำแลกเปลี่ยนความคิดเห็นได้ครับ email: phattarin_s@hotmail.com

สำหรับตนที่ส่งคำถามมาทาง e-mail ให้ระบุหัวเมลล์ว่า flex-ans นะครับเพราะส่งกันเข้ามาเยอะเหลือเกิน ถ้ากรณีไหนน่าสนใจผมจะขอนำมา post ไว้เผื่อคนอื่นจะได้มีความรู้ด้วยนะครับ

In English

Thank for all of your interest in my article. I have found most of mail told about 'mark-up' tag named [Bindable] that has been used in actionscript 3 class, or in any Script tag on MXML file.  You may confusing how to use this metadata tag in efficient. I am proundly to explain for you.

 

[Bindable] metadata tag with Basic

 

 [Bindable] metadata tag would describe Flex SDK compiler to automatic update the control's property that is binding with this marked object. Generally, most of Flex's control use these object to bind with thier dataprovider property

[Bindable] and [Bindable(event=event)]

The difference of thease declaration is [Bindable(event=event class)] will dispatch pre-defined event whenever marked object has changed.  

What will happen if dont mark this tag?

If you didn't declare [Bindable] metadata tag to object. The framework will read object's value one time only. Any modification will not be affect to binding control.

[Bindable] with Class

If you marks this tag on the top of actionscript 3 class declaration. The compiler will be notice to define any public attribute, included with every pubilc accessor method ( get and set function ). This technique is useful to define marked class as value object (design pattern) to be binded with any control in your application.

 

for any protected and private property ( included with accessor function ) would not be know by compiler. You should marked them manually if you want to use.

These are the basic principle about Bindable metadatatag. Next time I would like to describe you about advanced principle about these most using tag in Flex framework.

For anyone, who has interest in this Adobe's framework. I am honour to know you, exhange some idea, or for any contract (Ha Ha). You can mailed me at phattarin_s@hotmail.com

PS. For any question, please notice me by put 'Flex-ans' in front of your mail's topic.

edit @ 17 Dec 2007 17:02:57 by หมาเขียว

edit @ 16 Oct 2008 10:46:03 by หมาเขียว