สวัสดีครับ ภาค 2 มาซะทีนะครับ อิอิ

จริงๆ แล้วผมมีเรื่องอีกหลายเรื่องที่อยากจะมาเขียนทั้ง Yahoo Query Language (YQL) หรือว่าจะเป็น Zend JSON-RPC Server รวมไปถึง jQuery MVC แต่ก็อดใจไว้ เพราะกลัวว่าเรื่อง Titanium จะไม่จบแล้วก็ขาดความต่อเนื่อง ซึ่งผมกะๆ เอาโดยประมาณกว่าจะเขียนจนจบ คงมีเยอะแน่ๆ แล้วดูจากการ update ที่บ่อยมากๆ ของผม คงจะเขียนสัก ปี สอง ปีเป็นแน่แท้ 555

แต่เอาเถอะครับ ต่อจากนี้จะพยายามมาอัพเดทให้บ่อยขึ้นละกัน

วันนี้ก่อนที่เราจะมาลงมือเขียนจริๆ ผมอยากจะเล่าให้ฟังถึง โครงสร้างของ Titanium Mobile สักนิดนึง อย่าเพิ่งเบื่อกันไปก่อนนะครับ

เริ่มต้นตั้งแต่เรา Create Project ขึ้นมาใหม่ เราจะพบไฟล์ตามภาพด้านล่างนี้

โดยจะประกอบไปด้วย ไฟล์ Config, License, Readme แล้ว ก็ โฟลเดอร์ที่เราไว้ใช้ทำงาน คือ Resources

แล้วถ้าเราแตก Resources ออกมาดู (ตามภาพด้านล่าง) จะพบว่ามี ไฟล์ app.js นั่นล่ะครับ คือไฟล์แรกที่เราจะใช้ในการเขียน App ส่วนโฟลเดอร์ iphone, android คือที่ไว้เก็บไฟล์ ภาพเวลารัน App ขึ้นมาหรือไฟล์ที่เกี่ยวข้องกับ app โดยตรงเช่น icon app อะไรแบบนั้น

ถ้าเราจะทำให้ App รองรับ Retina Display สำหรับ iPhone เราจะใส่ @2x ตามเข้าไปด้วยสำหรับทุกๆ ไฟล์ image

ทีนี้มาดูกันที่ไฟล์  app.js อีกที

เมื่อเรา Create Mobile Project ขึ้นมา Ti Studio ก็จะสร้าง App มาให้เราเลย พร้อมกับ TabGroup ซึ่งจริงๆ แล้วเราจะเริ่มต้น Application  ด้วยอะไรก็ได้ เช่น

Windows, TabGroup, Navgroup

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

ทีนี้มาลองดูโคดของ app.js กันไปทีละส่วน

ช่วงบรรทัดที่ 1-20

ช่วงนี้จะเป็นการสร้าง TabGroup ขึ้นมา พร้อมทั้งสร้าง window จากนั้น ก็สร้าง tab ย่อย เพื่อจับ window ลงไปหา tab ย่อยที่ 1 ซึ่งถ้าเราลอง Build ดู ใน Simulator จะแสดงผลตาม ภาพด้านล่าง

ซึ่งส่วนที่เราสร้างก็คือ Tab ด้านล่างที่เขียนว่า "Tab 1" นั่นเอง ส่วนภาพของ Tab ก็คือไฟล์ "KS_nav_views.png" ที่ิอยู่ใน Resources

แล้วก็ผมบอกไปแล้วนะครับ ถ้าเราจะทำ ให้มันรองรับ Retina Display เราจะต้องสร้างไฟล์ @2x ใส่เข้าไปเอง ถ้าตามกรณีนี้ เราก็ต้องมี KS_nav_views@2x.png ประกอบเข้าไปด้วย ส่วนการเลิกไฟล์ ผมเข้าใจว่า App จะเป็นตัวจัดการเอง

ส่วนคำว่า "I am Window 1" นั้น เราจะเห็นในโคด ต่อจาก บรรทัดที่ 20 ตามนี้ครับ

ซึ่งจะเป็นการสร้าง Label ที่มี Text จากนั้นจับยัดลง Window ด้วยคำสั่ง .add()

ต่อมา โดด บรรทัดที่ 31-52 เป็นแค่การ สร้างเข้าไป อีก tab นึงเท่านั้นเอง ตรงนี้ผมขอข้ามนะครับ

ต่อมาดูภาพด้านล่าง

โคดตั้งแต่ 56-64 จะเป็นการ เอา tab ที่เราสร้าง ยัดลง tabgroup ใหญ่ จากนั้นก็สั่งมัน เปิด ซะ เท่านี้เราก็จะได้ ตัวตั้งต้นของ application แล้วครับ ง่ายมากๆ

ถ้ามาลองสังเกตุดูการออกแบบ จะเปนในลักษณะ Layer คือ มันจะซ้อนกันเป็นชั้นๆ ไป ตามนี้

label <- window <- tab <- tabgroup

มันจะเป็นชั้นๆ ไป ค่อยๆ add เข้าหากัน หลักการออกแบบนี้เราจะใช้ในทุกส่วนของการเขียน Titanium Mobile ครับ

ซึ่งจริงๆ แล้วตัว Structure หลักมันจะมีอีก หลายส่วนที่อยากให้ลองดูกัน

ไม่ว่าจะเป็น Internation App ด้วย

Internationalization and Localization (i18N)

หรือว่าจะเป็นส่วน Global UI ด้วย .jss 

อันนี้มันอธิบายยากไปหน่อย ยังไงถ้าอยากรู้ลองดูที่ link นี้นะครับ

http://developer.appcelerator.com/blog/2010/08/dealing-with-multiple-screens-and-multiple-languages.html

แล้วก็เนื่องจาก Titanium Mobile มัน Base ด้วย JS ดังนั้นเราจะเขียนไปในทิศทางไหนก็ได้ อาทิเช่น

1. เขียนโดยแต่ออก ด้วย url

คือเขียน 1 view 1 logic ต่อ 1 ไฟล์ อันนี้มันจะเหมือนตัวอย่างที่เค้าให้มาคือ Kitchensink

2. เขียนแบบ OOP โดยมองทุกอย่างเป็นกลุ่มวัตถุ แล้วก็สามารถ Reuse ได้ในส่วนต่างๆ

http://wiki.appcelerator.org/display/guides/Building+Reusable+Factories

3. จะเขียนเป็น MV, MVC, MC อะไรก็ได้ตามแต่ที่จะคิด แล้วก็มองว่าเหมาะกับตัวเอง ทำให้ทำงานง่าย

http://stackoverflow.com/questions/2573592/how-to-organize-js-files-in-a-appcelerator-titanium-project/2594227#2594227

ส่วนตัวผมเอง (ตอนนี้) เลิกวิธีการเขียนแบบตัวอย่าง Tweetanium เพราะว่า มันจัดการไฟล์ js ได้เป็นสัดส่วนดี แต่ว่าถ้ามือใหม่ ผมคิดว่าข้อ 1 มันก็ไม่เลวร้ายนะครับ แถมได้ performance ค่อยข้างดีด้วย (คิดเอาเอง) เพราะว่า Process มันแยกกันเป็นชิ้นๆ

ยังไงก็ลองเล่นดูนะครับ