Mobidevthai

เขียนโปรแกรมอ่าน QR Code, Barcode ด้วย Titanium Mobile [iOS]

2013-10-10T23:11:00.002+07:00

หลังจากหายจากการเขียนบทความไปนาน วันนี้กลับมาเขียนใหม่อีกครั้งพร้อมกับสิ่งที่เราเริ่มจะคุ้นเคยกับมัน "QR Code" โดย QR Code นี้ถูกใช้งานในที่ต่าง ๆ มากมาย ไม่ว่าจะเป็นสิ่งที่เอาไว้ใช้ Add Friend ของ Application ชื่อดังอย่าง "Line" หรือเอาไว้ใช้งานเพื่อทำการ Download Application ทั้งบน iOS และ Android ในบทความนี้จะแนะนำวิธีการเขียนโปรแกรมเพื่อทำการอ่าน QR Code นี้กันครับ

QR Code คืออะไร ?

QR Code หรือที่มีชื่อเรียกอีกชื่อหนึ่งว่า บาร์โค้ด 2 มิติ คือ รหัสชนิดหนึ่งซึ่งสามารถเก็บข้อมูลต่าง ๆ เช่น ชื่อ , ราคาของสินค้า , เบอร์โทรศัพท์ หรือแม้กระทั่งชื่อเว็บไซต์ โดยเป็นการพัฒนาต่อยอดมาจาก บาร์โค้ด โดย บริษัท Denso-Wave ตั้งแต่ปี 1994 และได้จดทะเบียนลิขสิทธิ์ชื่อ "QR Code" แล้วทั้งในญี่ปุ่น และทั่วโลก ผู้คิดค้นที่มุ่งเน้นให้สามารถถูกอ่านได้อย่างรวดเร็ว โดยการอ่าน QR Code นิยมใช้กับ Smart Phone ทั่ว ๆ ไป

หลังจากที่เรารู้จักกับเจ้า QR Code ไปแล้ว ก็ถึงเวลาที่เราจะมาเขียนโปรแกรมเพื่อทำการอ่านเจ้า QR Code นี้กันแล้วหล่ะครับ โดย Code ที่เขียนในบทความนี้จะสามารถใช้งานได้กับ iOS เท่านั้นเนื่องจากตัว ที่ผมใช้นั้นสามารถใช้งานได้กับ iOS เพียงอย่างเดียว (ในส่วนของ Android จะพยายามหาตัวอย่างที่ใช้งานง่าย ๆ มาให้ดูกันภายหลังนะครับ)

สิ่งที่เราต้องมีครับ

Titanium Mobile SDK 1.4.2 (ตอนนี้ 3.X แล้ว)
iOS SDK 4.1 (ตอนนี้ไป 5.0)
iPhone 3GS หรือสูงกว่า (ตอนนี้คงเป็น iPhone 5S, C)

ในขั้นตอนแรกนั้นเราก็จะต้องไปทำการ Download Module ที่มีชื่อว่า TiBar มาก่อนครับ เมื่อทำการ Dowload แล้วให้ทำการ Copy ไปยัง /Library/Application Support/Titanium

เมื่อเราได้ทุกอย่างแล้วเรามาเริ่มกันเลยครับโดยเริ่มจากการสร้าง Project ใน Titanium Mobile ครับ จากนั้นเราก็เปิดไฟล์ที่มีชื่อว่า tiapp.xml ขึ้นมาครับ ในส่วนของ Modules กดที่ปุ่ม "+" แล้วเลือก tibar ครับ

ทำการ Save ไฟล์ tiapp.xml ครับ จากนั้นก็เปิดไฟล์ app.js ขึ้นมาครับ แล้วก็เอา Code ด้านล่างนี้ลงไปได้เลยครับ

var win = Titanium.UI.createWindow({

     backgroundColor:'#fff'

});



var TiBar = require('tibar');

var label = Titanium.UI.createLabel({

     text:'อ่าน QR Code ด้วย Titanium Mobile',

     textAlign:'center',

     width:'auto'

});



var button = Ti.UI.createButton({

    title: "Scan barcode",

    height:50,

    width:250,

    bottom:20

});



button.addEventListener('click', function(){

TiBar.scan({

   // simple configuration for iPhone simulator

   configure: {

   classType: "ZBarReaderController",

   sourceType: "Album",

   cameraMode: "Default",

   symbol:{

      "QR-Code":true,

      }

   },

   success:function(data){

      if(data && data.barcode){

      Ti.UI.createAlertDialog({

         title: "Scan result",

         message: "Barcode: " + data.barcode + " Symbology:" + data.symbology

      }).show();

      }

   },

   cancel:function(){

      Ti.API.info('TiBar cancel callback!');

   },

   error:function(){

      Ti.API.info('TiBar error callback!');

   }

  });        

});



win.add(label);

win.add(button);



win.open();

ทำการัน Application ครับ ก็จะพบกัน Error แบบนี้ครับ

แต่ไม่ต้องตกใจไปครับ ให้เราเปิด ไฟล์ที่เรา Build ได้จาก Titanium ใน Xcode ครับ โดยตัวที่เราจะเปิดนั้นจะอยู่ที่ [project folder]/build/iphone/*.xcodeproj ตามภาพ

เมื่อ Xcode ถูกเปิดขึ้นมาแล้วให้เลือกที่ Project แล้วเลื่อนลงมาด้านล่างจะพบกับ Linked Frameworks and Libraies กดที่ปุ่ม "+" ข้างล่าง

จากนั้นให้เลือก Framework ดังต่อไปนี้

AVFoundation.framework
CoreMedia.framework
CoreVideo.framework
QuartzCore.framework
libiconv.dylib

จากนั้นทำการรัน Application ครับ เมื่อพบกับ Message ที่บอกว่า Success แล้วให้ทำการ ปิด Xcode ครับจากนั้นกลับมาที่ Titanium Mobile แล้วทำการรันอีกครั้ง Application ของเราก็จะสามารถรันขึ้นมาได้ครับ

แล้วเราจะทดสอบ โปรแกรมของเราอย่างไร ในเมื่อเรารัน Application บน Emulator ทำแบบนี้ครับ หารูป QR Code หรือจะเอาจาก บทความนี้ก็ได้ครับ ลากไปใส่ Emulator ครับ จากนั้นก็กด ค้างไว้เพื่อ Save รูปลงไปที่ Camera Roll จากนั้นลองกดที่ป่ม Scan barcode ตัวโปรแกรมจะไปเปิด Camera Roll ที่เก็บรูป QR Code ของเราเอาไว้ หากไม่มีอะไรผิดพลาดเมื่อโปรแกรมอ่าน QR Code แล้วจะแสดง Message แบบนี้เป็นอันเรียบร้อย

ในส่วนของการ Configuration ตัว TiBar นั้นมีการ Configuration ให้เราได้ปรับเปลี่ยนแต่จะมีอะไรบ้างนั้นเรามาดูกันดีกว่าครับ

classType เป็นการระบตัวอ่านของ TiBar ว่าจะเป็นการ Automatic Capture หรือจะเป็น Manual Capture ซึ่งแบ่งได้แบบนี้ครับ

- ZBarReaderViewController - จะเป็นการสั่งให้ตัว Reader นั้นทำงานแบบ Automatic Capture

- ZBarReaderController - จะเป็นการสั่งให้ตัว Reader นั้นทำงานแบบ Manual Capture

sourceType เป็นการระบุว่าเราจะอ่าน QR Code นี้จากที่ไหน จะมีตัวเลือกดังนี้ครับ

- Album - เป็นการระบุว่าเราจะอ่าน QR Code จาก Camera Roll (ถ้าเลือกตัวนี้แล้วในส่วนของ classType จะต้องเป็น ZBarReaderController เท่านั้น)

- Camera - จะเป็นการอ่านจาก กล้องของ iPhone หรือ iPad

cameraMode - ระบุเป็น Default
config - ค่าต่าง ๆ เพิ่มเติม โดยจะมีค่าเป็น ture หรือ false

- showsCameraControls - แสดงปุ่มควบคมกล้อง

- showsZBarControls - แสดงปุุ่มควบคมการอ่าน QR Code

- tracksSymbols - แสดงกรอบสีเหลี่ยมเมื่อมีการตรวจพบ QR Code

- enableCache - เปิดการใช้งาน Cache หรือไม่

- showsHelpOnFail - แสดงตัวช่วยกรณีที่ไม่สามารถอ่านได้

- takesPicture - ใช้งานแบบ ถ่ายภาพเก็บไว้หรือไม่

symbol - ระบุให้กับตัว TiBar ว่าต้องการอ่าน Barcode แบบไหนบ้าง โดยจะมีค่าเป็น true หรือ false

- QR-Code

- CODE-128

- CODE-39
- I25
- DataBar
- DataBar-Exp
- EAN-13
- EAN-8
- UPC-A
- UPC-E
- ISBN-13
- ISBN-10
- PDF417

หากต้องการทดสอบโปรแกรมบนเครื่องจริงก็สามารถที่จะทำได้ ทดสอบบนเครื่อง สำหรับ iOS เพียงเปลี่ยน Config เป็นแบบนี้ครับ

   classType: "ZBarReaderController",

sourceType: "Camera",

cameraMode: "Default",

config:{

       "showsCameraControls":true,

       "showsZBarControls":true,

       "tracksSymbols":true,

       "enableCache":true,

       "showsHelpOnFail":true,

       "takesPicture":false

       },

symbol:{

      "QR-Code":true,

      "CODE-128":false,

      "CODE-39":false,

      "I25":false,

      "DataBar":false,

      "DataBar-Exp":false,

      "EAN-13":false,

      "EAN-8":false,

      "UPC-A":false,

      "UPC-E":false,

      "ISBN-13":false,

      "ISBN-10":false,

      "PDF417":false

      }

ลองทดสอบกันดูนะครับเผื่อจะเป็น Idea สำหรับการทำ Application ที่เอาไว้ทำอะไรแปลก ๆ กับ QR Code หรือ Barcode ประเภทต่าง ๆ ได้ครับ

Titanium SDK 3.1 กับ Facebook

2013-06-08T22:36:00.002+07:00

จากบทความก่อนหน้านี้ที่ได้แนะนำวิธีการใช้ Titanium Mobile กับ Facebook เนื่องจากผมได้เขียน Application ขึ้นมาใหม่อีก 1 ตัวซึ่งวิธีการเดิมจากบทความ Titanium Mobile กับ Facebook นั้นจะไม่สามารถนำมาใช้ได้กับ SDK ตัวใหม่ได้ เพราะมีการเปลี่ยนแปลง วิธีการเรียกใช้ใน Version 3.1.0 หลังจากหาวิธีการอยู่นาน วันนี้ผมจะมาแนะนำวิธีการแก้ปัญหานี้กันครับ

จากเดิมนั้นหากเราต้องการเรียกใช้ Facebook บน Titanium Mobile เราจะต้องเรียกโดยใช้คำสั่งแบบนี้

Titanium.Facebook.appid = '253673451435346';

Titanium.Facebook.permissions = ['publish_stream']; 

Titanium.Facebook.addEventListener('login', function(e) {

       if (e.success) {

         alert('Logged In');

       } else if (e.error) {

         alert(e.error);

       } else if (e.cancelled) {

         alert("Canceled");

       }

});

Titanium.Facebook.authorize();

ซึ่งจาก Code ด้านบนนี้หากนำไปรันจะพบว่า ไม่สามารถทำงานได้ตั้งแต่บรรทัดแรกครับ

วิธ๊การแก้ไขเป็นแบบนี้ครับ

เปิดไฟล์ tiapp.xml ขึ้นมาก่อนครับ จะพบหน้าจอแบบนี้

ไปที่ Module กดเครื่องหมาย +

เลือก Facebook

จากน้ัน Application ของเราก็จะสามารถทำงานได้ ตามปกติ หรือ หากต้องการเรียกใช้ Facebook ในแบบ Common JS ก็สามารถเรียกใช้ได้โดยการสร้างตัวแปรขึ้นมาเพื่อเรียกใช้งาน Module Facebook ได้โดยใช้คำสั่ง แบบนี้

var fb = require('facebook');

fb.appid = '253673451435346';

fb.forceDialogAuth = true;

fb.permissions = ['publish_stream','user_photos','user_birthday','offline_access'];

ก็สามารถเรียกใช้ Facebook ได้ตามปกติแล้วหล่ะครับ

Post รูปภาพจากเครื่องไปยัง Facebook Wall ผ่าน Graph API

2013-04-23T00:14:00.002+07:00

จากในบทความก่อนหน้านี้ผมได้นำเสนอการ Post ข้อความไปยัง Wall ของ User ผ่านทาง Graph API ของ Facebook ไปแล้ว ในบทความนี้ผมก็จะนำเสนอการ Post รูปภาพจากในเครื่องไปยัง Wall ของ Users ครับ เรามาเริ่มกันเลยดรกว่าครับ

ดังเช่นในบทความก่อนหน้านี้นะครับ เราจะทำการสร้าง หน้าจอเพื่อรองรับการ Post รูปภาพตามนี้นะครับ

โดยเราจะทำการสร้าง ด้วย Code ดังนีิ้ครับ

//สร้าง Windows

var win = Titanium.UI.createWindow({

    backgroundColor : '#fff',

    layout : 'vertical'

});



//กำหนดค่าให้กับ Facebook API

Ti.Facebook.appid = '253673451435346';

Ti.Facebook.permissions = ['publish_stream','user_photos']; //เพิ่มส่วนของการ Access รูป

Ti.Facebook.addEventListener('login', function(e) {

     if (e.success) {

          alert('Logged in');

     }

}); 



//สร้างปุ่มสำหรับ Login Facebook 

win.add(Ti.Facebook.createLoginButton({

     top : 20,

     style : Ti.Facebook.BUTTON_STYLE_WIDE

}));

จากนั้นก็ทำการสร้าง ปุ่ม "Select Image" เพื่อเปิด Gallery เพื่อเลือกรูปภาพ ซึ่งรายละเอียดการใช้งานจะอยู่ที่ เปิด Photo Gallery ด้วย Titanium Mobile

//สร้างปุ่มเปืิด Gallery 

var img = Titanium.UI.createButton({

      title : ' Select Image ',

      top : 50

});



//แสดงภาพจากการเลือกใน Gallery

var imgView = Titanium.UI.createImageView({

      width : 300 ,

      backgroundColor : '#555',

      top : 20,

});

จากนั้นเพิ่มปุ่มสำหรับการ Post ลงไปใน หน้าจอ แล้วทำการ นำเอา Object ทั้งหมดไปใส่ใน Window

//ปุ่มสำหรับ Post

var post = Titanium.UI.createButton({

      title : ' Post To My Wall',

      top : 20

});



win.add(img);

win.add(imgView);

win.add(post);

เมื่อทำการรันขึ้นมาก็จะได้หน้าจอ แบบนี้ครับ

หน้าจอเริ่มต้น

สิ่งที่เราจะทำต่อไปก็คือเมื่อทำการกด ปุ่ม Select Image ให้ทำการเปิด Gallery ขึ้นมาครับ (เปิด Photo Gallery ด้วย Titanium Mobile) และเมื่อทำการเลือกรูปภาพเสร็จแล้วให้ทำการแสดงในส่วนของ Image View

img.addEventListener('click',function(){

           Titanium.Media.openPhotoGallery({

                  mediaTypes : Titanium.Media.MEDIA_TYPE_PHOTO, 

                  success : function(event){ 

                              imgView.image = event.media

                            }

           });

});

จากนั้นเราก็จะมาทำการเขียนในส่วนของการ Post รูปภาพดังกล่าวไปยัง Facebook ผ่านทาง Graph API กันครับ โดยสิ่งที่เราต้องทำก็คือเมื่อทำการกดที่ ปุ่ม Post To My Wall แล้วให้ทำการ Post รูปภาพที่เราเลือกไปยัง Wall ครับโดยเราจะทำการเขียนคำสั่งแบบนี้ครับ

post.addEventListener('click',function(){

     Titanium.Facebook.authorize();

     var file1 = imgView.image;

     //เปลี่ยน Graph Path เป็น me/photos เพื่อ Post เข้าไปยัง photos

     Titanium.Facebook.requestWithGraphPath('me/photos', 

                {message : 'Image From Mobidevthai',

                 picture : file1},

                'POST',

                 function(data){

                                alert(data);

                  });

           });

ทดลองรันดูครับ เมื่อเรากดที่ปุ่ม Post To My Wall ถ้าหากว่าได้ Message แบบนี้ แสดงว่า เราสามารถทำการ Post ข้อมูลได้แล้วครับ

ลองไปเช็คที่ Wall ของเรากันครับ ก็จะพบกับ รูปภาพที่เราทำการเลือกเอาไว้นั่นเองครับ

เป็นอย่างไรกันบ้างครับกับการ Post รูปภาพไปยัง Wall ผ่านทาง Graph API ในบทความหน้าเรามาสร้างรูปเป็น Album กันดีกว่าครับ

Post ข้อความ ไปยัง Facebook ด้วย Titanium Mobile

2013-03-31T20:25:00.005+07:00

หลังจากในบทความที่แล้ว ผมได้แนะนำวิธีการ ดึงเอาข้อมูล Profile ของ User มาใช้งานแล้ว ใน บทความนี้ผมก็จะมาแนะนำวิธีการ Post ข้อความ ลงไปยัง Facebook ครับ

จากในบทความก่อน นั้น นอกจากเป็นการดึงข้อมูล Profile ของ User แล้ว ยังสามารถทำการ Post ข้อความ ด้วยวิธีการคล้าย ๆ กันได้อีกด้วย ครับ โดยใช้ Function ของ Titanium.Facebook ที่มีชือว่า

requestWithGraphPath
เรามาเริ่มกันเลยครับ ทำการตั้งค่าสำหรับ Application ของเราก่อนนะครับ พร้อมทั้งสร้าง ปุ่ม Login With Facebook ครับ

var win = Ti.UI.createWindow({

                              backgroundColor : '#fff' 

                             });



Ti.Facebook.appid = '253673451435346';

Ti.Facebook.permissions = ['publish_stream'];

Ti.Facebook.addEventListener('login', function(e) {

      if (e.success) {

         alert('Logged in');

      }

});



win.add(Ti.Facebook.createLoginButton({

                                        top : 50,

                                        style : Ti.Facebook.BUTTON_STYLE_WIDE

                                      })

);

จากนั้นเราก็ทำการสร้าง Textfield พร้อมทั้ง ปุ่มเพื่อทำการ Post ข้อความครับ

var textfield = Titanium.UI.createTextField({

                                              width : 300,

                                              top : 120,

                                              borderColor : '#000'

                                            });



var post = Titanium.UI.createButton({

                                      title : ' Post To My Wall',

                                      top : 170

                                    });



win.add(textfield);

win.add(post);

ก็จะได้หน้าจอแบบนี้ครับ

จากนั้นก็ทำการเพิ่ม Event ให้กับ ปุ่ม ด้วยการ addEventListener และทำการเขียน Code เพื่อทำการ Post ข้อความไปยัง Wall ของ User ที่ทำการ Login

post.addEventListener('click',function(){

                         Titanium.Facebook.authorize();

                         Titanium.Facebook.requestWithGraphPath('me/feed', 

                               {message : textfield.value},

                               'POST',

                                function(data){

                                               alert(data);

                                              });

});

ตรงนี้ผมให้ทำการ Alert เพื่อดูข้อมูลที่ส่งกลับมาจาก Facebook เพื่อตรวจสอบการทำงานของ Code นะครับ ก็จะได้ Messaege หน้าตา แบบนี้ครับ

สังเกตุจาก success หากมีค่าเป็น 1 นั่นหมายความว่าข้อความที่ต้องการนั้น ถูก Post ไปยัง Wall ของ User จริง ๆ แล้วนั่นเองครับ เราไปเช็คที่ Facebook กันครับว่าหน้าตาที่ ถูก Post ไปยัง Facebook นั้นจะเป็นอย่างไร

ก็จะพบกับข้อความที่ถูก Post ผ่าน Application ที่เราสร้างขึ้นมา ตามรูปครับ เป็นอย่างไรกันบ้างครับ สำหรับวิธีการ Post ข้อความไปยัง Facebook ผ่านทาง Application ในบทความหน้าผมจะแนะนำวิธีการ Post รูปภาพขึ้นไปยัง Wall ผ่านทาง Titanium Mobile อย่าลืมติดตามนะครับ

ดึง Profile ของ User Facebook ผ่าน Facebook Graph API ด้วย Titanium Mobile

2013-03-25T23:23:00.002+07:00

หลังจากที่เราเรียนรู้วิธีการใข้ Facebook เพื่อจัดการระบบ User ของเราแล้วนั้น ในบทความนี้ ผมจะขอกล่าวถึงวิธีการดึงเอาข้อมูลอื่น ๆ ของ User เพื่อนำมาใช้งานต่อ โดยในบทความนี้จะกล่าวถึง API ของ Facebook ที่ใช้ชื่อว่า Graph API ครับ

Facebook Graph API เป็น API หลักในการดึงข้อมูล และ ทำการ Post ไปยัง Wall ของแต่ User โดย Function หลัก ๆ ของ Graph API นั้น สามารถเข้าไปดูได้ที่ Facebook Graph API Reference และในส่วนของ Titanium Mobile นั้นเราจะใช้ Function ของ Titanium.Facebook ที่มีชื่อว่า
requestWithGraphPath
เรามาเร่ิมกันเลยดีกว่าครับ ก่อนอื่นเลยก็ต้องทำการตั้งค่าสำหรับ Application ของเราก่อนนะครับ ดูได้จาก การใช้ Facebook เพื่อจัดการระบบ Login และ User ด้วย Titanium Mobile

var win = Ti.UI.createWindow({

       backgroundColor : '#fff' 

});



Ti.Facebook.appid = '253673451435346';

Ti.Facebook.permissions = ['publish_stream'];

Ti.Facebook.addEventListener('login', function(e) {

   if (e.success) {

      alert('Logged in');

   }

});



win.add(Ti.Facebook.createLoginButton({

                                        top : 50,

                                        style : Ti.Facebook.BUTTON_STYLE_WIDE

                                      })

);

จากนั้นก็ทำการเพิ่มปุ่มขึ้นมา 1 ปุ่มเพื่อทำการ ดึงข้อมูล Profile ของเราขึ้นมาครับ

var buttonGetinfo = Titanium.UI.createButton({

   title:'Get my info',

   width : 120

});

จากนั้นก็ทำการเขียน เพื่อจับ Event ของการ Click ลงบนปุ่ม โดยในปุ่มนั้นจะทำการตรวจสอบก่อนว่ามีการ Login แล้วหรือยัง จากนั้นก็ทำการเรียกใช้ Titanium.Facebook.requestWithGraphPath โดยที่เราจะต้องทำการระบุ Field ที่เราต้องการลงไปด้วย

buttonGetinfo.addEventListener('click',function(){

            Titanium.Facebook.authorize();

            Titanium.Facebook.requestWithGraphPath('me', 

                        {fields :  'id,name,first_name,last_name,gender,email,picture,birthday'},

                        'GET',

                        function(data){

                                alert(data);

                        });

});

จากนั้นทดลองรันดูครับ ก็จะพบหน้าจอแบบนี้

กดที่ปุม Login with Facebook ก่อนเพื่อทำการ Login ตามปกติ จากนั้นทดลองกดที่ปุ่ม Get my info ก็จะพบกับ Information ต่าง ๆ ของ Profile ที่เราทำการ Login ครับ

เราก็สามารถนำข้อมูลตรงนี้ไปใช้ทำอะไรได้อีกหลายต่อหลายอย่าง ทั้งนี้ข้อมูลที่จะได้กลับมานั้นขึ้นอยู่กับ Permission ที่เราร้องขอไว้ใน App ID นั้น ๆ ด้วยนะครับ

ในส่วนของ Field หรือ Path ต่าง ๆ จริง ๆ แล้วยังมีอีกหลาย Path ที่เราสามารถเข้าไปนำข้อมูลดังกล่าวออกมาใช้งานอีกได้อย่างมากมาย โดยเราสามารถที่จะทดลอง Path ที่เราต้องการผ่านทาง Facebook Graph API Explorer และในเรื่องของ Path นั้นเราสามารถเข้าไปดูรายละเอียดเพิ่มเติมได้ที่ Facebook Graph API Reference ในบทความนี้ก็จะขอจบลงตรงนี้ก่อน ใยบทความหน้าเราคงยังอยู่กับการทำงานกับ Facebook กันต่อ แต่จะเป็นเรื่องอะไรนั้น ติดตามกันต่อด้วยนะครับ

ปล. Code ที่เขียนในบทความนี้สามารถใช้ได้ทั้ง iOS และ Android

การใช้ Facebook เพื่อจัดการระบบ Login และ User ด้วย Titanium Mobile

2013-03-05T23:25:00.002+07:00

หลังจากที่เราได้ทำความรู้จักกับ API ที่มีไว้สำหรับเชื่อมต่อ Application ของเรากับ Facebook ไปแล้วในบทความ Titanium Mobile กับ Facebook มาถึงในบทความนี้ก็จะกล่าวถึงวิธีการใช้ Facebook ในการ Login เพื่อเข้าใช้งานใน Application ของเรา เหมือนกับหลาย ๆ Application ที่นิยมใช้กันนะครับ

สิ่งที่เราจะต้องทำการจัดเตรียมก่อนเป็นอันดับแรกเลยนั้นก็คือ Facebook App ID ครับ โดยเราสามารถไปสร้างได้ที่ developers.facebook.com ตามภาพนะครับ

หลังจากนั้นเราก็มาที่ Titanium Studio กันต่อเลยครับ เริ่มกันด้วยการกำหนด App ID ให้กับ Titanium.Facebook กันก่อนครับ ด้วยคำสั่ง

Titanium.Facebook.appid = "253673451435346";
จากนั้นทำการกำหนด Permission ให้กับ Application ของเราครับ
Titanium.Facebook.permissions = ['publish_stream'];
ในส่วนของ Permission นั้น สามารถเข้าไปดูทั้งหมดได้ที่ Facebook Permission List
***เพิ่มเติมสำหรับ iOS นะครับ เราจะต้องเพิ่ม Config บางอย่างลงไปใน tiapp.xml สำหรับการเชื่อมต่อกับ Facebook ครับ โดยสิ่งที่เราต้องเพิ่มคือ
<property name="ti.facebook.appid">253673451435346</property>
มาต่อกันเลยนะครับ จากที่เคยได้กล่าวเอาไว้ในบทความก่อนหน้า Titanium Mobile กับ Facebook การ Login เข้าสู่ Facebook นั้นสามารถทำได้ 2 วิธีด้วยกัน นั่นก็คือ

Titanium.Facebook.authorize
Titanium.Facebook.LoginButton

เรามาเริ่มกันที่วิธีแรกกันก่อนครับ เข้าสู่ Application ด้วย Titanium.Facebook.authorize สามารถเขียนคำสั่งเพื่อเรียกใช้งานดังนี้ครับ

Titanium.Facebook.appid = '253673451435346';
Titanium.Facebook.permissions = ['publish_stream']; 
Titanium.Facebook.addEventListener('login', function(e) {
    if (e.success) {
        alert('Logged In');
    } else if (e.error) {
        alert(e.error);
    } else if (e.cancelled) {
        alert("Canceled");
    }
});
Titanium.Facebook.authorize();

เมื่อทำการรัน ออกมาก็จะพบกับหน้าจอ แบบนี้ครับ

หน้าจอสำหรับ Login เข้า Facebook

Facebook จะถามเพื่อให้เรารับ Application ของเรา

หน้าจอสำหรับ การ ให้สิทธิการเข้าถึง Profile

เมื่อเรากดที่ปุ่ม Allow All ก็จะพบกับ Message แบบนี้ครับ

เป็นอันเรียบร้อยในส่วนของ การ Login ด้วย คำสั่ง Titanium.Facebook.authorize

มาต่อกันที่วิธีที่ 2 ครับ วิธีการนี้จะเป็นการสร้างปุ่ม LoginButton สำหรับการเรียกหน้าจอการ Login เข้าสู่ Facebook ครับ สำหรับวิธีการก็สามารถเขียนด้วยคำสั่งแบบนี้ครับ

Titanium.Facebook.appid = '253673451435346';
Titanium.Facebook.permissions = ['publish_stream'];
Titanium.Facebook.addEventListener('login', function(e) {
    if (e.success) {
        alert('Logged in');
    }
});
    
win.add(Titanium.Facebook.createLoginButton({
    top : 50,
    style : Titanium.Facebook.BUTTON_STYLE_WIDE
}));

** อย่าลืมสร้าง Window มารองรับก่อนนะครับ
เมื่อทำการรันก็จะพบกับหน้าจอแบบนี้ครับ

เมื่อกดที่ปุ่ม Login with Facebook ก็จะเข้าสู่หน้าจอการ Login ตามลำดับ

ในส่วนของการ Logout จาก Facebook สามารถสั่งให้ Application ของเรา Logout ออกจาก Facebook ได้ด้วยคำสั่ง

Titanium.Facebook.logout();

เป็นอย่างไรกันบ้างครับสำหรับการ Login เข้าสู่ Application ด้วย Facebook จะเห็นได้ว่า สามารถทำได้อย่างง่ายดายเลยนะครับ ในบทความหน้านั้นผมจะแนะนำวิธีการดังข้อมูล Profile ของ User มาใช้งานนะครับ

Titanium Mobile กับ Facebook

2013-02-25T20:21:00.001+07:00

ต้องยอมรับกันนะครับว่า ในยุคสมัยนี้ Social Network นั้นมีผลต่อเราเกือบทุก ๆ คน เนื่องจาก Social Network นั้นสามารถเข้าถึงได้ทุกเพศทุกวัย ดังนั้นสิ่งที่ขาดไม่ได้เลยสำหรับ Application บน Mobile Device นั่นก็คือ ความสามารถในการเชื่อมต่อกับ ระบบ Social Network ที่มีอยู่ในปัจจุบัน เช่น "Facebook"

โดยใน Titanium Mobile เองก็มี API สำหรับการเชื่อมต่อกับ Facebook โดยตรง และสามารถเชื่อมต่อแบบง่าย ๆ ด้วย Module ที่ติดมากับ SDK ซึ่งนั่นก็คือ
Titanium.Facebook
แล้วเจ้า API Titanium.Facebook นี้รองรับการทำงานอะไรบ้าง

จัดการระบบ Login เพื่อใช้งาน Application หรือ จัดเก็บ User ใน Application ของเราเอง
เรียกใช้งาน Facebook Graph API ผ่านทาง requestWithGraphPath
เรียกใช้งาน Facebook REST API ผ่านทาง Request
Post ข้อความหรืออื่น ๆ ผ่านทาง Facebook Dialog

การใช้งาน Facebook เพื่อจัดการระบบ Login และ Users

หาก Application ของเรานั้นต้องการการ Login เข้าสู่ Facebook ก่อนเพื่อที่จะกำหนดสิทธิต่าง ๆ ให้กับ ผู้ใช้ เราสามารถทำได้ 2 วิธีด้วยกันก็คือ

เรียกใช้งาน ผ่านทาง Titanium.Facebook.authorize
สร้างปุ่มสำหรับ Login ด้วยคำสั่ง Titanium.Facebook.LoginButton

แต่ก่อนอื่นเลยนั้นสิ่งที่เราต้องมีก็คือ Facebook App ID โดยที่เราสามารถทำการ สร้าง App ID และ Permission ของ Application เราโดยผ่านทาง Facebook Developer App : developers.facebook.com/apps ส่วนในเรื่องของ Permission ของ Facebook นั้น สามารถเข้าไปอ่านกันได้ที่ Facebook Permission Reference

Facebook Graph API

Facebook Graph API เป็นสิ่งที่ทาง Facebook ได้จัดเตรียมในรูปแบบของ Service เพื่อให้ทางนักพัฒนานั้นสามารถนำเอาข้อมูลของผู้ใช้ , รายชื่อเพื่อ , Feed และ อื่น ๆ โดยที่ทาง Facebook นั้นจะเรียกสิ่งต่าง ๆ เหล่านี้ในรูปแบบของ Object เช่น Object User , Object Photo เป็นต้น

เราสามารถเรียกใช้งาน Graph API เพื่อนำเอาข้อมูลเหล่านี้ออกมาด้วยคำสั่ง

Titanium.Facebook.requestWithGraphPath

ในส่วนของรายละเอียด API นี้สามารถอ่านได้ที่ Facebook Graph API documentation

Facebook REST API

Facebook REST API เป็น API ที่เอาไ้ใช้งานในสิ่งต่าง ๆ นอกเหนือจากสิ่งท่ี่ Graph API สามารถทำงานได้

โดยเราสามารถเรียกใช้่ REST API นี้ได้ ผ่านทาง คำสั่ง

Titanium.Facebook.request
ส่วนรายละเอียดของ API นี้สามารถอ่านได้ที่ Facebook REST API documentation.

เอาหล่ะครับ บทความนี้ก็ขอจบลงตรงนี้ก่อน ในบทความหน้าผมจะมานำเสนอวิธีการเขียนเพื่อเรียกใช้งาน Titanium.Facebook นะครับ

ว่าด้วยเรื่องของ Contact บน Titanium Mobile

2013-01-07T23:47:00.001+07:00

สวัสดีครับ หลังจากห่างหายจากการเขียน บทความไปหลายสัปดาห์ วันนี้ผมขอกลับเข้าไปเรื่องของ Contact ใน Mobile Device ของทุก ๆ ท่านก่อนละกันนะครับ โดยปกติแล้วใน OS ไม่ว่าจะทั้ง iOS หรือ Android นั้นจะมีโปรแกรม อยู่หนึ่งตัวสำหรับการจัดเก็บรายชื่อต่าง ๆ สำหรับเอาไว้โทรหา หรือ ทำการ ส่ง Email หรือ อื่น ๆ ซึ่งวันนี้ผมจะเสนอเกี่ยวกับการเข้าถึง รายชื่อต่าง ๆ แบบง่าย ๆ กันครับ

วิธีการเข้าถึงก็สามารถทำได้โดยเขียนคำสั่งแบบนี้ครับ

Titanium.Contacts.showContacts

ส่วนใน Property ของ Function showContact นี้มีดังต่อไปนี้ครับ

animated กำหนดให้เมื่อทำการแสดงผลให้แสดง animation หรือไม่
fields ระบุ Fields ที่ต้องการแบบเฉพาะเจาะจง เช่น address
selectedPerson ค่าสำหรับเมื่อรายชื่อนั้นถูกเลือก

เอาหล่ะครับเรามาเร่ิมกันเลยดีกว่า เริ่มแรกนั้นก็ ทำการสร้าง window และ ปุ่มอีก 1 ปุ่มครับ

var win = Ti.UI.createWindow({

backgroundColor : '#fff'

});



var show = Ti.UI.createButton({

title:'Show picker',

top :200

});

จากนั้นก็ทำการใส่เข้าไปใน Window ที่ได้สร้างเอาไว้ครับ

win.add(show);

แล้วก็ทำการเขียน Event ให้กับ ปุ่ม show ด้วยคำสั่งแบบนี้ครับ


show.addEventListener('click', function() {

Titanium.Contacts.showContacts({

animated : true,

});

});

แล้วก็ทำการเปิด window ครับ

win.open();

จากนั้นทำการ รันขึ้นมาครับ ก็ จะได้หน้าตาโปรแกรมแบบนี้ ครับ ทดลองกดที่ ปุ่ม Show Picker ครับ ก็จะพบกับ Contact List ขึ้นมา

หากต้องการเลือกรายการชื่อให้เพิ่มคำสั่ง

selectedPerson

ลงไปในส่วนของการเพิ่ม Event Click แบบนี้ครับ

show.addEventListener('click', function() {

Titanium.Contacts.showContacts({

animated : true,

selectedPerson : function(value){

var p = value.person;

alert(p.fullName); 

}

});

});

ก็สามารถที่จะนำเอาข้อมูลของ Contact ไปใช้งานได้แล้วหล่ะครับ ในส่วนของรายละเอียด ของ Object Person นั้นสามารถเข้าไปดูรายละเอียดเพิ่มเติมได้ที่ Titanium Document เนื่องจากรายละเอียดของ Object นี้มีเยอะมาก ๆ ทำให้ไม่สามารถนำมาไว้ที่นี่ได้นะครับ

ตอนนี้ของพักเรื่อง Alloy Framework เอาไว้ก่อนเพราะว่าไม่ค่อยมีเวลาที่จะศึกษาเพิ่มเติมจริง ๆ ครับ ยังงัยก็จะพยายามหาตัวอย่างการใช้งานของ Alloy Framework มาให้ได้ดูกันนะครับ

รู้จักกับ Alloy Framework บน Titanium Mobile

2012-12-22T23:15:00.003+07:00

หลังจากที่ ทาง Appcelerator ได้ทำการ update Titanium Studio เป็น Version 3.0 นั้นในตัว Titanium นั้นมีการรองรับ Feature ใหม่ ๆ ต่าง ๆ มากมาย ซึ่งหนึ่งในนั้นก็ คือ Alloy Framework นั่นเองครับ

Alloy Framework คืออะไร ?

Alloy เป็น MVC Framework ที่ทำให้สามารถพัฒนา Application บน Mobile ได้อย่างรวดเร็วมากยิ่งขึ้น ซึ่งตัว Framework นี้จะทำให้การพัฒนา Mobile Application นี้สามารถทำงานได้อย่างมีประสิทธิภาพมากยิ่งขึ้น ซึ่งไม่เพียงแต่สามารถพัฒนา Application ได้อย่างรวดเร็ว ยังสามารถที่จะนำเอา Code ที่ถูกเขียนขึ้นนำกลับมา Reuse ได้อย่างมีประสิทธิภาพ

คุณสมบัติของ Alloy Framework

UI และ ส่วนควบคุมการทำงาน ถูกแยกออกจากกันเหมือนกันกับ MVC โดยทั่ว ๆ ไป
พัฒนา Application โดยใช้ XML และ JSON
มีการตรวจสอบระยะเวลาในการ Complie
รองรับการใช้งาน Widgets และ Templates
รองรับการทำงาน Backbone.js และ Underscore.js
รองรับการทำ Code generation ผ่านทาง Uglify.JS
รองรับการทำงานแบบ Command Line interface

รู้จักกับ Alloy Framework ไปแล้วในบทความนหน้านั้น ผมจะกลับมานำเสนอ วิธีการใช้งาน Alloy Framework กันนะครับ ส่วนใครใจร้อนอยากศึกษาเรื่องนี้ก่อน ก็สามารถเข้าไปศึกษาก่อนได้ที่ Alloy From Appcelerator

Titanium Mobile Update 3.0

2012-12-16T00:39:00.001+07:00

วันนี้ทาง Appcelerator ได้ทำการ ปล่อย Update ตัว Titanium Mobile เป็น Version 3.0 โดยใน Version 3.0 นี้นั้น ส่วนใหญ่จะเป็นการ Update เพื่อรองรับ Feature ใหม่ ๆ ของ Android Version ใหม่ ๆ นั่นเองครับ

โดยใน Version 3.0 ของ Titanium นี้จะรองรับการทำงานของ Android รุ่นใหม่ ๆ เป็นหลักโดยมีการเปลี่ยนแปลงดังต่อไปนี้

รองรับการทำงานของ Action Bar เมื่อเราทำการสร้าง Application โดยเลือกใช้ targetSdkVersion เป็น Version 11 (Android 3.0/Honey Comb) ขึ้นไปนั้น Object Tab Group จะถูกสร้างขึ้นมาพร้อมกับ เจ้า Action Bar นี้
แก้ไขการใช้งาน ActivityIndicator ให้เป็นเหมือนกับ iOS โดยจากเดิมที่ ActivityIndicator ของ Android นั้นจะมีลักษณะเป็น Modal Dialog จะถูกปรับเปลี่ยนแก้ไขให้เป็น object เพื่อที่จะสามารถนำไปวางไว้บน View หรือ Window ได้

ในส่วนของ Feature ใหม่ ๆ ที่เกิดขึ้นบน SDK Version 3.0 นี้จะมีอะไรบ้างนั้น เราไปดูกันครับ

On-Device Debugging รองรับการ Debug บน Device โดยวิธีการนั้น สามารถเข้าไปอ่านได้ตามนี้ครับ iOS Device Debugging ,Android Device Debugging
Alloy Framework รองรับการทำงานแบบ MVC บน Titanium Mobile ในส่วนของรายละเอียดและวิธีการ ผมขออธิบายภายหลังนะครับ หรือ ถ้าอยากไปศึกษาก่อนก็สามารถ เข้าไปอ่านกันได้ที่ Alloy Framework
Titanium Command-Line Interface รองรับการทำงานผ่านทาง Command-Line ศึกษาเพิ่มเติมได้ที่ Titanium Command-Line Interface
UI Event Bubbling Changes ปรับเปลี่ยนวิธีการเรียกใช้งาน Event (ตรงส่วนนี้ขอดูรายละเอียดก่อนแล้วค่อยอธิบายต่อในภายภาคหน้าเนื่องจาก ผมอ่านแล้วก็ยัง งง ๆ อยู่ว่ามันเปลี่ยนไปอย่างไร)

และมีการแก้ Bug ต่าง ๆ ดังนี้ครับ

TIMOB-11755, TIMOB-11756 เพิ่ม Property username, password และ domain ให้กับ HTTPClient ซึ่งตอนนี้ยังรองรับ เฉพาะ iOS และ Android เท่านั้น
TIMOB-10232 Android: รองรับการตรวจจับ Event บน Keyboard

สำหรับ Version 3.0 นื้ถือเป็นการ Update ครั้งใหญ่ของ Titanium Studio เลยก็ว่าได้เนื่องจากขนาดของตัว Update นั้นมีขนาดค่อนข้างใหญ่ ส่วนวิธีการ Update นั้นสามารถทำได้ง่าย ๆ ครับ เพียงแค่เปิด Titanium Studio ขึ้นมา ก็จะพบกับ Message แจ้งเตือนเรื่องการ Update ก็สามารถทำการ Update ได้ทันทีครับ

อย่าลืม Update กันนะครับ เพื่อรองรับ Feature ใหม่ ๆ นะครับ

การใช้งาน Picker แบบ Multi Column (สำหรับ iOS เท่านั้น)

2012-12-02T23:16:00.001+07:00

หลังจากที่เราได้รู้จักวิธีการใช้งาน Picker แบบ ธรรมดา ๆ ไปแล้ว ในบทความ การใช้งาน Picker ใน Titanium Mobile ในบทความนี้ผมจะนำเสนอการใช้งาน Picker แบบ Multi Column นะครับ

การใช้งาน Picker แบบ Multi Column นั้น ก็จะมีวิธีการเหมือนกับการใช้งาน Picker แบบธรรมดา ๆ ซึ่งก็จะเริ่มจากสร้าง Picker ก่อนครับ

var picker = Ti.UI.createPicker({

bottom : 0

});

จากนั้นก็ทำการสร้างข้อมูลแบบ Multi Column แรก โดยเริ่มจากการสร้าง PickerColumn

var column1 = Ti.UI.createPickerColumn({opacity:0});

column1.addRow(Ti.UI.createPickerRow({title:'Bananas'}));

column1.addRow(Ti.UI.createPickerRow({title:'Strawberries'}));

column1.addRow(Ti.UI.createPickerRow({title:'Mangos'}));

column1.addRow(Ti.UI.createPickerRow({title:'Grapes'}));

จากนั้นทำการสร้าง PickerColumn อันที่ สอง

var column2 = Ti.UI.createPickerColumn();

column2.addRow(Ti.UI.createPickerRow({title:'red'}));

column2.addRow(Ti.UI.createPickerRow({title:'green'}));

column2.addRow(Ti.UI.createPickerRow({title:'blue'}));

column2.addRow(Ti.UI.createPickerRow({title:'orange'}));

จากนั้นก็ทำการ นำเอา Picker ทั้งสองไปใส่ใน Picker ด้วยคำสั่ง

picker.add([column1,column2]);

ก็จะได้ Picker ที่เป็น 2 Column ตามที่ต้องการแล้วครับ

ส่วนการนำค่าจาก Picker ไปใช้งานนั้นก็สามารถใช้ Event Change เพื่อนำค่าที่เลือกไปใช้งานต่อไป ดังนี้

picker.addEventListener('change',function(e)

{

    alert(e.rowIndex +  ' : ' + e.columnIndex); 

}

การใช้งาน Picker ใน Titanium Mobile

2012-11-26T22:48:00.004+07:00

หลังจากห่างหายจากการเขียนบทความเรื่องนี้ไปสักพัก เนื่องจากติดภาระกิจบางประการทำให้ไม่สามารถทำการเขียนบทความได้ แต่วันนี้มีเวลาแล้ว เรามาต่อกันเลยดีกว่าครับ กับ Object ที่มีเอาไว้ให้ผู้ใช้ทั้งหลายได้ทำการเลือกข้อมูลต่าง ๆ ได้ตามที่ต้องการ Object นั้นคือ Picker ครับ

Picker คืออะไร

Picker คือ Object ที่เป็นลักษณะของ List รายการต่าง ๆ ที่มีให้กับผู้ใช้ได้เลือกรายการตามที่เราได้ระบุเอาไว้ มีลักษณะเหมือนกับ Dropdownlist ที่ราใช้กันบน Web Page นั่นเองครับ

วิธีการใช้งาน Picker นั้นก็ง่าย ๆ ครับ เราสามรถสร้าง Picker ขี้นมาได้อย่างง่ายดายด้วยคำสั่ง
Ti.UI.createPicker

โดยเจ้า Picker นี้จะมี Property ที่เราเรียกใช้งานกันบ่อย ก็คือ

type เอาไว้สำหรับระบุว่าต้องการให้ Picker นี้แสดงออกมาแบบไหน โดยแบ่งออกมาได้เป็น

Titanium.UI.PICKER_TYPE_PLAIN เป็นลักษณะการแสดงแบบ ทั่ว ๆ ไปครับ มี Column เดียว (เป็นค่าเริ่มต้นของ Picker)
Titanium.UI.PICKER_TYPE_DATE แสดงข้อมูลเป็นวันที่
Titanium.UI.PICKER_TYPE_TIME แสดงข้อมูลเป็นเวลา
Titanium.UI.PICKER_TYPE_DATE_AND_TIME แสดงข้อมูลเป็นแบบวันที่และเวลา (สำหรับ iOS และ Mobile Web เท่านั้น)
Titanium.UI.PICKER_TYPE_COUNT_DOWN_TIMER แสดงข้อมูลเป็น ชั่วโมงและนาที (เฉพาะ iOS เท่านั้น)

selectionIndicator เอาไว้แสดงตำแหน่งของการเลือก ของ ผู้ใช้ โดยค่าเริ่มต้นจะเป็นค่า False

ส่วน Object อื่น ๆ ที่เกียวข้องกับ Picker นี้โดยตรงก็จะประกอบด้วย

Ti.UI.PickerColumn

Ti.UI.PickerRow

เอาหล่ะครับ ในเมื่อเราได้รู้จักบางกับเจ้า Picker ไปแล้วทีนี้ก็มาถึงเวลาที่จะใช้งานมันจริง ๆ แล้วหล่ะครับ ก่อนอื่นเลยก็ต้องสร้าง Picker ขึ้นมาก่อนครับ

var picker = Ti.UI.createPicker();

picker.selectionIndicator = true;

จากนั้นเราก็มาสร้างข้อมูลขึ้นมาให้กับ Picker นั้นครับ ด้วยคำสั่ง

var data = [];

data[0]=Ti.UI.createPickerRow({title:'Bananas'});

data[1]=Ti.UI.createPickerRow({title:'Strawberries'});

data[2]=Ti.UI.createPickerRow({title:'Mangos'});

data[3]=Ti.UI.createPickerRow({title:'Grapes'});

จากนั้นก็ทำการ นำเอา ข้อมูลไปใส่ให้กับ picker ด้วยคำสั่ง

picker.add(data);

จากนั้นก็ทำการ สั่งให้ Picker เลือก รายการแรก

picker.setSelectedRow(0,1,true);

ก็เป็นอันเสร็จสมบูรณ์ทำการ Run ดูจะพบกับหน้าตาของ Picker แบบนี้ครับ

เป็นอย่างไรกันบ้างครับกับ Picker แบบง่าย ๆ ในบทความหน้านั้นจะสร้าง Picker ที่มีความซับซ้อนมากกว่านี้นะครับ อย่าลืมติดตามต่อนะครับ

Update - Titanium SDK 2.1.4

2012-11-13T23:18:00.000+07:00

เมื่อวันที่ 12/11/2012 ทาง Appcelerator ได้ออก Update Titanium SDK 2.1.4 มาให้ได้ทำการ Update กัน การ Update ใน Version นี้จะมีอะไรบ้างเราไปดูกันครับ

Titanium SDK 2.1.4 นี้เป็นการ แก้บั๊กที่พบเจอในVersion ก่อนหน้านี้นะครับ โดยมีการแก้ไข Bug ดังนี้ครับ

สำหรับ iOS

TIMOB-10330 iOS: ScrollView: When 'layout' is 'horizontal', content height is not calculated correctly.
TIMOB-10865 iOS: builder.py adhoc build does not copy resources into project. This fixes a regression in Release 2.1.3.
TIMOB-11198 iOS: KitchenSink WebViews - An image disappears after reloading a page. This fixes a regression introduced by another web view fix in Release 2.1.3. The regression only occurred on iOS 6 devices.
TIMOB-11250 iOS: blur() method fails to blur keyboard on textfields with custom toolbar. This fixes a regression in Release 2.1.3.
TIMOB-11275 iOS: Click event is fired even when click is outside the icon of an item in the Titanium.UI.DashboardView.
TIMOB-11285 iOS: TextField.blur is having a strange race condition when blurring a textfield and then opening a window. This fix ensures that the keyboard is always dismissed when opening a new window.
TIMOB-11306 iOS: Subversion directories and files present in .IPA. Fixes a regression where extraneous files were included in the .ipa file.
TIMOB-11561 iOS: KeyboardToolbar of textField not being displayed on textField.focus(). This fixes a regression in Release 2.1.3. It occured only in the unlikely event of calling focus from the blur event handler.

สำหรับ Android

TIMOB-9994 Android: postlayout event not fired for labels.
TIMOB-11358 Android: Many calls to getFile causes local reference table overflow.
TIMOB-11508 Android: Adding WebView to ScrollView causes ScrollView to be initialized scrolled-down.
TIMOB-11543 Android: Checkbox-style switch missing label.

โดยที่ตัว Titanium SDK Version นี้นั้นได้ทำการ ทดสอบบน iPad Mini , iPad 4, iOS 6.0.1 และ Xcode Version 4.5.2 และรองรับการทำงานบน Windows 8 อีกด้วย

สำหรับขั้นตอนการ Update นั้น สามารถทำได้ โดยเมื่อทำการเปิด Titanium Studio ขึ้นมานั้น ก็จะมีข้อความ ให้ ทำการ Update ครับ

Titanium SDK 2.1.4

เมื่อกดเข้าไปก็จะพบกับหน้าจอ แบบนี้

Detail of Titanium SDK 2.1.4

จากนั้นก็ทำการกดที่ปุ่ม Install Update เพื่อทำการ Update Titanium SDK 2.1.4 ครับ

ดึงข้อมูลจากแหล่งต่าง ๆ ด้วย Titanium.Network.HTTPClient

2012-11-08T21:54:00.000+07:00

เนื่องจากในปัจจุบันนั้นการดึงข้อมูลจาก Provider ต่าง ๆ นั้นเป็นสิ่งที่จำเป็นเนื่องจากหากเราต้องจัดเกบข้อมูลเองทั้งหมดคงไม่เป็นเรื่องที่ดีอย่างแน่นอน จึงทำให้เกิด Service ในรูปแบบต่าง ๆ เช่น RESTful และ SOAP ซึ่งทั้ง 2 อย่างนี้จะเป็นมาตรฐานการรับส่งข้อมูลในรูปแบบของ Web Service ที่ปัจจุบันมีใช้กันอย่างแพร่หลาย และการที่เราต้องการข้อมูลประเภทนี้ ทาง Appceletor ผู้พัฒนา Titanium Studio ได้สร้าง API ตามมาตรฐานของ XMLHttpRequest และ API ที่เราจะทำการเรียกใช้นั่นก็คือ

Titanium.Network.HTTPClient

โดยเจ้า Titanium.Network.HTTPClient จะมีวิธีการใช้งานอย่างไรนั้นเรามาติดตามกันครับ

ก่อนอื่นเราดูโครงสร้างของมันกันก่อนครับ

var url = "http://www.mobidevthai.com";

var xhr = Ti.Network.createHTTPClient({

           onload: function(e) {

                                 Ti.API.debug(this.responseText);

                                 alert('success');

           },

           onerror: function(e) {

                                 Ti.API.debug(e.error);

                                 alert('error');

           },

           timeout:5000

});



xhr.open("GET", url);

xhr.send();

ทีนี้เรามาลงในรายละเอียดกันครับ

onload เป็น Function ที่จะถูกเรียกเมื่อมีการตอบสนองจาก URL ปลายทาง ซึ่งจะมีการตอบสนอง 3 แบบคือ

this.responseText จะเป็นการรับค่าที่เป็นลักษณะของ JSON หรือ ข้อมูลที่เป็นลักษณะของ Text ธรรมดา ๆ
this.responseXML จะเป็นการรับค่าในรูปแบบของ XML ตามมาตรฐานของ SOAP และ XML WebService ต่าง ๆ
this.responseData จะเป็นการรับค่าในรูปแบบของ binary

onerror เป็น Function ที่จะถูกเรียกเมื่อมีความผิดพลาดจาก URL ปลายทาง ซึ่งจะมีการตอบสนองต่าง ๆ ดังนี้

this.responseText จะมีลักษณะเมื่อกับ onload ที่จะเป็นการรับค่าในรูปแบบ Text แต่จะเป็นการในลักษณะของ error message ต่าง ๆ
this.status จะเป็นการรับค่าของ status code ต่าง ๆ
e.error เป็นการรับข้อมูลกลับมาในลักษณะของ Event Object

และอีก Property อีก หนึ่งอันก็คือ timeout จะเป็นส่วนสำหรับกำหนดช่วงระบะเวลาให้กับ HTTPClient นี้ โดยจะมีหน่วยเป็น milliseconds

ในส่วนของ Method ที่ใช้สำหรับการเปิด Connection ของ HTTPClient นี้ก็คือ open ตรงนี้สามารถระบุ method ของ Request ของ HTTPClient นี้ได้ ว่าจะเป็น "GET" หรือ "POST"

เมื่อทำการเปิด Connection แล้วก็ทำการ send() เพื่อส่ง Request นั้น ๆ ไปยัง Server ครับ

การใช้งาน JSON กับ Titanium Mobile

2012-11-02T22:08:00.002+07:00

หลังจากที่เราได้รู้จักกับ JSON ไปแล้วในบทความ JSON คืออะไร มาถึงบทความนี้ก็จะกล่าวถึงวิธีการนำ JSON มาใช้ใน Titanium Mobile ครับ

เนื่องจากพื้นฐานของ Titanium Mobile นั้นเป็น Javascript และ JSON เองก็ ถูกพัฒนามาจาก Javascript ดังนั้นมันจึงไปด้วยกันได้อย่างลงตัวครับ เรามาเริ่มกันเลยครับ

JSON นั้นโดยพื้นฐายของมันจะอยู่ในรูปแบบ ของ Array ดังเช่น

[

   {"firstname":"Pop","lastname":"Cat"}, 

   {"firstname":"Tora", "lastname":"Taro"} 

]

ดังนั้นการนำเอา JSON มาใช้กับ Titanium นั้นก็เพียงแค่นำ ตัวแปรมารับค่าที่เป็น JSON นี้ได้ทันที ดังตัวอย่างเช่น

var json = [

{"firstname":"Pop","lastname":"Cat"}, 

{"firstname":"Tora", "lastname":"Taro"}

];

จากนั้นหากต้องการใช้ค่าใด ๆ ใน Object ก็สามารถที่จะเรียกใช้งานได้โดยตรงคือ

json[0].firstname

และหากใน JSON นั้น ๆ มีข้อมูลหลาย ๆ ค่า ก็สามารถที่จะนำมา Loop เพื่อนำเอาข้อมูลออกมาได้เช่น

for(var j in json)

{

alert(json[j].firstname);

}

เป็นอย่างไรกันบ้างครับ บทความนี้เกี่ยวกับการใช้งาน JSON กับ Titanium Mobile ในบทความต่อ ๆ ไปผมจะขอกล่าวถึงการดึงข้อมูล JSON จาก WebSite ต่าง ๆ ซึ่งจะต้องรู้จักกับ Object อีกขนิดหนึ่ง ซึ่งก็คือ HTTPClient นั่นเองครับ

JSON คืออะไร ??

2012-10-25T23:00:00.003+07:00

JSON ย่อมาจาก คำว่า JavaScript Object Notation เป็นฟอร์แมตสำหรับแลกเปลี่ยนข้อมูลคอมพิวเตอร์ ฟอร์แมต JSON นั้นอยู่ในรูปข้อความธรรมดา (plain text) ที่ทั้งมนุษย์และโปรแกรมคอมพิวเตอร์สามารถอ่านเข้าใจได้

มาตรฐานของฟอร์แมต JSON คือ RFC 4627 มี Internet media type เป็น application/json และมีนามสกุลของไฟล์เป็น .json

โครงสร้างของ JSON
JSON นั้นใช้ลักษณะภาษาของ Javascript แต่ไม่ถูกมองว่าเป็นภาษาโปรแกรม กลับถูกมองว่าเป็นภาษาในการแลกเปลี่ยนข้อมูลมากกว่า ในปัจจุบันมีไลบรารีของภาษาโปรแกรมอื่นๆ ที่ใช้ประมวลผลข้อมูลในรูปแบบ JSON มากมาย ตัวอย่างของ JSON

[

   {"firstname":"Pop","lastname":"Cat"}, 

   {"firstname":"Tora", "lastname":"Taro"} 

]

JSON นั้นยังสามารถจัดเก็บข้อมูลที่เป็น ลักษณะของ Master - Detail ได้อีกด้วย ตัวอย่างการจัดเก็บข้อมูล

[

 {"firstname" : "Pop", 

  "lastname": "Cat",

  "address" : [ 

                { 

                  "address1" : "home",

                  "province" : "bangkok",

                  "country" : "Thailand" 

                }

               ]

  }

]

จะเห็นได้ว่ารูปแบบการจัดเก็บนั้นสามารถอ่านได้อย่างง่ายดาย และยังสามารถเข้าใจได้ง่ายด้วย

เอาหล่ะครับวันนี้ขอเกริ่มสั้น ๆ เพียงเท่านี้ก่อน ในบทความหน้านั้นเราจะนำ JSON มาจากไหน และนำ JSON ที่ได้นี้มาทำอย่างไรใน Titanium Mobile ติดตามกันต่อนะครับ

SQLite กับ Titanium Mobile

2012-10-21T21:10:00.001+07:00

SQLite เป็น Database ขนาดเล็กที่ได้รับความนิยมสำหรับ Application ที่ทำงานบน Smart Phone ทั้ง iOS และ Android ซึ่งมีรูปแบบการทำงานแบบ Standalone คือ ทำงานอยู่ใน Application นั้น ๆ โดย SQLite นั้นมีโครงสร้างที่ง่ายต่อการจัดเก็บและมีขนาดเล็กมาก จึงเหมาะกับการทำงานบน Smart Phone เป็นอย่างยิ่ง

หลังจากที่เราทำความรู้จักกับ SQLite กันไปแล้ว คราวนี้เราก็จะมาดูกันว่า Titanium นั้นรองรับการทำงานกับ SQLite อย่างไร

Titanium Studio นั้นรองรับการทำงาน SQLite ผ่านทาง Module ที่มีชื่อว่า Titanium.Database โดย Titanium.Database นั้น รองรับทั้งการทำงานบน iOS และ Android สำหรับในบทความนี้จะแสดงให้เห็นถึงวิธีการใช้งาน SQLite ร่วมกับ Titanium Studio โดยที่สามารถที่จะ สร้างตาราง , บันทึกข้อมูล , แก้ไขข้อมูล และ การลบข้อมูล เรามาเริ่มกันเลยครับ

สร้าง Database (Create Database)

ก่อนการทำงานใด ๆ กับ SQLite นี้สิ่งที่เราต้องดำเนินการก่อนก็คือการ Install Database Engine ลงใน Application ของเราครับซึ่งเราสามารถทำได้โดยใช้คำสั่ง

Titanium.Database.install([filepath],[databasename]

เช่น หากเราต้องการสร้าง Database ชื่อว่า 'mobidevthai' โดยนำไปวางไว้ใน Path ของ Application Data Directory (ใช้คำสั่ง Titanium.Filesystem.applicationDataDirectory เพื่อนำเอา Application Data Directory ของเครื่องเรามาได้เลยครับ) โดยใช้คำสั่งแบบนี้ครับ

Titanium.Database.install(Titanium.Filesystem.applicationDataDirectory + 'mobidevthai.db','mobidevthai');

จากคำสั่งข้างต้นนั้นเราจะได้ Database ที่มีชื่อว่า mobidevthai ขึ้นมาแล้วครับ

สร้าง Table (Create Table)

หลังจากที่เราได้ Database แล้วเราก็จะมาทำการ สร้าง Table กันนะครับ ก่อนทำการสร้าง Table นั้นเราต้องทำการเปิด Database ของเราขึ้นมาก่อนครับ โดยใช้คำสั่ง แบบนี้

var db = Titanium.Database.open('mobidevthai');
โดยตัวแปรชื่อ db นั้นจะเป็นตัวเก็บ Connection เอาไว้ เมื่อเราทำการเปิด Database ขึ้นมาได้แล้วเราก็จะมาทำการสร้าง Table กันครับ โดยการสร้าง Table นั้นก็จะใช้คำส่ง SQL Command ทั่ว ๆ ไปนั่นเองครับ
var sql = 'create table table1 ( id int, name varchar(20) )';

จากนั้นก็ทำการ Execute sql ที่เราเตรียมเอาไว้ครับ โดยใช้คำสั่ง

db.execute(sql);

เพียงเท่านี้เราก็จะได้ Table ที่อยู่ใน Database แล้วหล่ะครับ จากนั้นก็ทำการ ปิด Connection ครับ โดยคำสั่ง

db.close();

บันทึกข้อมูล (Insert Data), แก้ไขข้อมูล (Update Data) และ ลบข้อมูล (Delete)

การบันทึกข้อมูลลงใน SQLite นั้นก็สามารถทำได้อย่างง่ายดายครับ โดยเริ่มจากการ เปิด Database เหมือนกับการ สร้าง Table ครับ

var db = Titanium.Database.open('mobidevthai')

จากนั้นก็ทำการกำหนด SQL Command เพื่อทำการ Insert ข้อมูล

var sql = 'insert into table1 values(1,\'Mobidevthai.com\');

จากนั้นก็ทำการ Execute sql

db.execute(sql);

ส่วนการ Update และ Delete นั้นก็ใช้วิธีเดียวกันกับการ Insert ข้อมูลนั่นก็คือการสร้าง SQL Command ตามการทำงานนั้นเอง

//การ Update ข้อมูล

var sql = 'update table1 set name = \'www.mobidevthai.com\') where id = 1';

//การ Delete  ข้อมูล

var sql = 'delete table1 where id = 1';

จากนั้นก็ทำการ ปิด Connection ครับ โดยคำสั่ง

db.close();

ดึงข้อมูล (Select)

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

เริ่มแรกก็จะเหมือนกับการบันทึกข้อมูล นั่นก็คือการเปิด Database ครับ

var db = Titanium.Database.open('mobidevthai');

จากนั้นก็กำหนด SQL Command เพื่อทำการ Select ข้อมูล ครับ

var sql = 'select id,name from table1';

จากนั้นก็ทำการ Execute ครับ สิ่งที่แตกต่างจากการ Insert , Update และ Delete นั้นก็คือ เราต้องนำเอาตัวแปรมารองรับ Result ที่เกิดจากการ Execute นี้ครับ โดยเราสามารถนำเอาตัวแปรมารองรับได้แบบนี้ครับ

var row = db.execute(sql);

โดยตัวแปร row นี้จะอยู่ในรูปแบบ Class ที่มีชื่อว่า ResultSet ครับ โดยเจ้า ResultSet จะมี Property ต่าง ๆ ดังนี้ครับ

fieldCount เอาไว้ตรวจสอบจำนวนของ Field ที่ถูก Selete ขึ้นมา
rowCount เอาไว้ตรวจสอบจำนวน Row ที่ถูก Select ขึ้นมา
validRow เอาตรวจสอบว่า Row ปัจจุบันนั้นเป็น EOF หรือไม่

หลังจากที่เราได้รู้จักกับ Class ResultSet ไปแล้ว ก็มาต่อกันเลยดีกว่าหลังจากที่ทำการ execute ไปแล้วเราก็ต้องมาทำการตรวจสอบ ความถูกต้องของ row ก่อนจากน้นก็ทำการนำข้อมูลที่ได้ใส่ลงไปใน Array เพื่อนำข้อมูลที่ได้ไปใช้งานต่อครับ อย่าลืมปิด row ด้วยนะครับ ไม่อย่างนั้น memory เต็มแน่ ๆ ครับ

var data = [];

while(row.isValidRow())

{

data.push({id : rows.field(0),name : rows.field(1)});

row.next();

}

row.close();

จากนั้นก็ทำการ ปิด Connection ครับ โดยคำสั่ง

db.close();

เป็นอย่างไรกันบ้างครับกับการทำงานกับ Database SQLite นี้ ในบทความต่อ ๆ ไปนั้น จะเป็นเรื่องราวส่วนไหนของ Titanium Studio ติดตามกันต่อนะครับ

การใช้งาน Dashboard View (iOS)

2012-10-20T02:00:00.000+07:00

ในบทความนี้ผมจะกล่าวถึง View อีกชนิดหนึ่งที่ใช้ได้เฉพาะใน iOS เท่านั้น สามารถเพิ่ม ลบ หรือ เคลื่อนย้าย Icon ที่อยู่บน View ได้โดยเราเรียก View ประเภทนี้ว่า Dashboard View ครับ

เจ้า Dashboard View นี้หากนึกภาพไม่ออก ก็หน้า Home ของ iOS นั่นแหละครับ ที่เป็นรูปแบบของ Dashboard View นี้ เอาหล่ะครับเรามาเริ่มกันเลย ก่อนอื่นเลยเราต้องสร้าง ตัวแปรที่เป็น Array ขึ้นมาก่อนครับ เพื่อเก็บเอา Item ของเราเอาไว้
var dashboarditem = [];
จากนั้นก็ทำการสร้าง Item ขึ้นมาครับอันนี้ผมสร้าง 10 Item นะครับ แล้วนำทั้งหมดไปใส่ ใน Array ที่ได้สร้างเอาไว้ โดยคำสั่ง

for (var i=0; i < 10; i++) {

var dbItem = Ti.UI.createDashboardItem();

var container = Ti.UI.createView({

width: 106,

height:106

});



var image = Titanium.UI.createImageView({

image : 'KS_nav_ui.png',

top: 0

});



var label = Titanium.UI.createLabel({

text : 'item ' + i,

botton : 0

});



container.add(image);

container.add(label);



dbItem.add(container);

dashboarditem.push(dbItem);

};

การสร้าง Dashboard Item หากต้องการให้ทำการแสดง ข้อความด้วยจะต้องสร้าโดยการสร้าง View ขึ้นมาเพื่อรองรับ ทั้ง Icon และ Label ครับ เนื่องจาก API ของ Apple ไม่รองรับโดยตรงครับ จากนั้นก็ทำการสร้าง Dashboard View พร้อมทั้งนำ Array มาแสดงใน Item ด้วยคำสั่ง
var dashboard = Titanium.UI.createDashboardView({ data : dashboarditem });
เมื่อเราสร้างเสร็จแล้วก็ทดลองรันดูครับ (อย่าลืมเอา dashboard view ใส่ window นะครับ)

เพียงเท่านี้เราก็จะได้ Dashboard View มาใช้แล้วหล่ะครับ

กรณีหากต้องการให้มีการขยับของ Icon สามารถทำได้โดยทำการเพิ่ม Property ไปที่ Dashboard View แบบนี้ครับ

var dashboard = Ti.UI.createDashboardView({

data : dashboarditem,

editable : true,

wobble : true

});

โดย Property editable นั้นสำหรับเปิดให้สามารถทำการ edit ได้ ส่วน wobble นั้นเอาไว้สำหรับทำให้ icon ขยับไปมาเพื่อบอกว่าอยู่ใน Mode Edit ครับ ส่วนวิธีการ Edit ก็ แค่กด icon ค้างไว้ครับก็สามารถที่จะลบ หรือ ขยับ icon ไปมา ได้แล้วหล่ะครับ

เป็นอย่างไรกันบ้างครับกับ Dashboard View ไม่ยากเลยใช่มั้ยครับ ส่วนในบทความหน้านั้นจะเป็นเรื่องราวเกี่ยวกับอะไรนั้น ติดตามกันต่อในบทความหน้านะครับ

การใช้งาน Event ของ Titanium.App

2012-10-16T23:29:00.001+07:00

จากที่ได้เคยกล่าวถึง Titanium.App ใน รู้จักกับ Titanium.App ตอนท้ายของบทความผมได้กล่าวเอาไว้ถึงการใช้งาน Event ของ Titanium.App เอาไว้ในบทความนี้เราไปดูกันครับว่า มันใช้งานอย่างไร

อย่างที่เคpกล่าวเอาไว้ในทความ รู้จักกับ Titanium.App นั้น จะมี Event ของ Titanium.App ที่เราใช้ในการทำงานแบบ Multi Tasking ซึ่งนั่นหมายถึงการที่ Application ที่เราใช้งานอยู่มีการ หยุดการใช้งานชั่วคราว อย่างเช่น กำลังเปิด Map อยู่ ก็ มี โทรศัพท์เข้ามา ทำให้ โปรแกรม Map ที่เรากำลังใช้งานอยู่นั้น ไปทำงานอยู่เบื้องหลัง

โดยวิธีการทำงานของ Event ของ Titanium.App จะแบ่งได้เป็น 4 ขั้นตอนคือ

เมื่อ Application ถูกขัดจังหวะการทำงาน (pause)
เมื่อ Application หยุดการทำงานของตัวเอง (paused)
เมื่อ Application ถูกเรียกให้กลับมาทำงานอีกครั้ง (resume)
เมื่อ Application สามารถทำงานได้อีกครั้ง

โดยวิธีการตรวจสอบสถานะการทำงานของ Application เราสามารถตรวจสอบได้โดยการเขียนคำสั่งแบบนี้ครับ

Titanium.App.addEventListener('pause',function(){

Titanium.API.info('Application Pause');

});

Titanium.App.addEventListener('paused',function(){

Titanium.API.info('Application Paused')

}); 

Titanium.App.addEventListener('resume',function(){

Titanium.API.info('Application Resume'); 

}); 

Titanium.App.addEventListener('resumed',function(){

Titanium.API.info('Application Resume'); 

});

คำสั่ง Titanium.API.info นั้นเป็นการพิมพ์ข้อความออกมาทาง Console นะครับ

โดยตัวอย่างนี้เมื่อนำไปรันและเมื่อทำการกดที่ปุ่ม Home ก็จะได้ ผลลัพท์ แบบนี้ครับ

และเมื่อกดที่ Application เพื่อเข้าสู่การทำงานอีกครั้งก็จะพบกับข้อความลักษณะแบบนี้ครับ

เป็นอย่างไรกันบ้างครับในเรื่องของ Event ของ Titnaium.App สำหรับการ Pause และ Resume ของ Application คิดว่าจะเอาไปทำการประยุกต์ใช้กับ Application ต่าง ๆ ได้อย่างไม่ยากนัก แต่อย่างไรก็ดี การที่ Application ถูก Pause เอาไว้นาน ๆ หากตัว OS นั้นมีการจัดการ Memory ได้อย่างยอดเยี่ยมแล้ว Application นั้น ๆ ก็จะถูกปิดไปโดยอัตโนมัตินะครับ

รู้จักกับ Transition (iOS) และ การแสดง Window แบบ Modal

2012-10-13T15:11:00.000+07:00

ไม่ทราบว่าเคยสังเกตกันบ้างหรือไม่ว่า Application ที่เราได้พัฒนากันขึ้นมา ตอนเปิดหน้า Window แรกทำไมมันแค่แสดงขึ้นมาโดยที่มันไม่มี Effect เลย ไม่ว่าจะพลิกซ้าย พลิกขวา หรือ เปิดขึ้นเหมือนเราเปิดหนังสือ โดยบน Titanium เองมีวิธีการง่าย ๆ มาให้ครับ แต่จะทำอย่างไรกันนั้นเราไปดูกันครับ

โดยปกติแล้วเมื่อเราต้องการให้ Window ที่เราสร้างขึ้นมานั้นทำการแสดงเราก็จะใช้คำสั่ง

win.open();

ซึ่งคำสั่งนี้จะสั่งให้ Window แวดงขึ้นมาแบบธรรมดา ๆ เท่านั้น แต่หากว่าเราต้องการให้ Window ที่เปิดขึ้นมานั้น มี Effect ในการแสดงผลเราจะต้องเพิ่ม Parameter ลงไปหลัง คำสั่ง open แบบนี้ครับ

win.open({transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});

ด้วยคำสั่งข้างต้นจะทำให้ Window ที่เปิดขึ้นมานั้นจะ พลิกหน้าจอจากด้านซ้ายไปด้่านขวา โดยที่ Effect นั้่นเราสามารถกำหนดได้ดังนี้ครับ

CURL_DOWN
CURL_UP
FLIP_FROM_LEFT
FLIP_FROM_RIGHT

แต่ละแบบเป็นอย่างไรนั้นลองไป ใช้กันได้เลยนะครับ

ส่วน การแสดง Window อีกประเภทนั้นก็คือ Window แบบ Modal ครับ โดย ปกติแล้ว การเปิด Window แบบ Modal นี้เมื่อต้องการให้แสดงขึ้นมาเราจะใช้คำสั่ง

window.open({modal : true});

เมื่อใช้คำสั่งนี้จะมี WIndow อีกหน่งอันซ้อนขึ้นมาบนหน้าจอ Application โดยมีการแสดงแบบจากด้านล่างขึ้นด้านบน แต่ก็สามารถที่จะเปลี่ยน Effect เมื่อทำการแสดงได้โดยใช้คำสั่ง

window.open({modal:true,

modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,

modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET})

ในส่วนของ Transition ของ Modal นั้นจะประกอบด้วย

MODAL_TRANSITION_STYLE_COVER_VERTICAL

เป็นการแสดง Modal แบบจากล่างขึ้นด้านบน

MODAL_TRANSITION_STYLE_CROSS_DISSOLVE

เป็นการแสดง Modal แบบค่อย ๆ Fade โดยที่หน้าจอที่เรียกจะ Fade Out และหน้าจอที่ถูกเรียกจะ Fade In เพื่อแสดง

MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL

เป็นการแสดง Modal แบบพลิกหน้าจอ

MODAL_TRANSITION_STYLE_PARTIAL_CURL

เป็นการแสดงเหมือนกับการเปิดหน้ากระดาษ

และในส่วนของ Modal Style นั้นก็จะประกอบไปด้วย

MODAL_PRESENTATION_CURRENT_CONTEXT

จะเป็นการแสดง Modal โดยนำ Style จากหน้าจอที่ทำการเรียกให้ Modal นี้ทำงาน

MODAL_PRESENTATION_FORMSHEET

จะเป็นการเรียก Modal มาแสดงโดยที่จะมีขนาดเล็กกว่า หน้าจอที่ทำการเรียกเล็กน้อย

MODAL_PRESENTATION_FULLSCREEN

จะเป็นการเรียก Modal ขึ้นมาแสดงแบบเต็มหน้าจอ

MODAL_PRESENTATION_PAGESHEET

จะเป็นการเรียก Modal ขึ้นมาโดยมีขนาดเท่ากับหน้าจอที่ใช้งานในแนวตั้งเท่านั้น

เป็นอย่างไรกันบ้างครับ ลองเอาไปใช้กันดูนะครับ เผื่อจะมีแบบไหนที่ถูกใจ เพื่อเปลี่ยนให้ Application มีลูกเล่นในการแสดงผลมากยิ่งขึ้นครับ

รู้จักกับ Titanium.App

2012-10-09T21:27:00.000+07:00

สวัสดีครับบทความนี้จะกล่าวถึง Module ที่อยู่ใน Level สูงสุดของ Titanium ครับนั่นก็คือ Module Titanium.App

โดยความสามารถของ Module นี้ก็คือ มันสามารถที่จะเข้าถึง Information ต่าง ๆ ของ Application ได้ตอน Runtime และสามารถเข้าอ่านค่าต่าง ๆ ที่ถูกสร้างเอาไว้ในไฟล์ tiapp.xml อีกด้วย เช่น appid , applicaton name หรือ url ของ application

อีกหน้าที่ของ Titanium.App นี้คือ เป็น Module ที่เอาไว้สร้าง Golbal Event สำหรับ Application ได้ โดยสามารถเพิ่ม Event ให้กับ Application ด้วยคำสั่ง

Titanium.App.addEventListener('app:MyCustomEvent',customFunction);

//คำว่า 'app' นั้นเป็น Prefix ที่เอาไว้ระบุว่ามันคือ event ของ App ซึ่งจะระบุหรือไม่ระบุก็ได้

ส่วนวิธีการเเรียกใช้นั้นเราก็สามารถเรียกได้ด้วยคำสั่ง

Titanium.App.fireEvent('app:MyCustomEvent');
และตัวของ Titanium.App เองก็สามารถที่จะจัดเก็บตัวแปรที่เป็นลักษณะของ Global ได้โดยใช้คำสั่ง
Titanium.App.customValiable = 'MyValue';

ส่วนวิธีการเรียกใช้ก็สามารถระบุ ตามที่เรากำหนดค่าเอาไว้ได้เลย คือ

var myvalue = Titanium.App.customValiable;

ในส่วนของรายละเอียด ต่าง ๆ ของ Titanium.App นี้นั้นมีค่อนข้างเยอะผมขอยกตัวอย่างเฉพาะที่นิยมนำมาใช้กันนะครับ

Poperty

id แสดง Application ID จากไฟล์ tiapp.xml
name แสดง Application Name จากไฟล์ tiapp.xml
url แสดง Application url จากไฟล์ tiapp.xml
version แสดง Application Version จากไฟล์ tiapp.xml

Method

addEventListener เพิ่ม Gobal Event ให้กับ Applicaiton
fireEvent เรียกใช้งาน Global Event ที่ได้สร้างเอาไว้
removeEventListener ลบ Global Event ออกจาก Application

Event

keyboardFrameChanged เป็น Event ที่ตรวจจับการทำงานของ Soft Keyboard เมื่อมีการแสดงหรือเมื่อปิดลงไป
pause เป็น Event ที่จะถูกเรียกเมื่อ Application มีการเปลี่ยนสถานะจาก Active เป็น Inactive ในระบบ Multi Tasking
paused เป็น Event ที่จะถูกเรียกใช้งานเมื่อ Application ถูกเปลี่ยนสภาพจาก Active เป็น Background Application ในระบบ Multi Tasking
resume เป็น Event ที่ถูกเรียกใช้่งานเมื่อ Application ถูกเปลี่ยนสภาพจาก Inactive เป็น Active ในระบบ Multi Tasking
resumed เป็น Event ที่ถูกเรียกใช้งานเมื่อ Application ถูกกลับมาใช้งานได้อีกครั้งหนึ่ง

!!!! ข้อควรระวังในการใช้ Titanium.App เนื่องจาก Titanium.App นั้นเป็น Top Level ดังนั้นการที่เรากำหนดตัวแปรหรือ Event ให้กับมันมากเกินไปจะเกิดปัญหาเรื่องของ Memory ได้ดังนั้นก่อนการใช้งานควรคำนึงถึงส่วนนี้ด้วยนะครับ

เอาหล่ะครับขอจบเรื่องของ Titanium.App เอาไว้แค่ตรงนี้ก่อน ในบทความหน้าผมจะเขียนโปรแกรมกับ Titanium.App เพื่อแสดงรายละเอียดของการเรียกใช้งาน Event ต่าง ๆ ให้ทุก ๆ ท่านได้เข้าใจอีกครั้ง นะครับ

วิธีการใช้ CommonJS ใน Titanium Studio

2012-10-08T21:40:00.000+07:00

หลังจากที่เราได้รู้จักกับ CommonJS ไปแล้วในบทความ รู้จักกับ Common JS นั้นในบทความนี้จะกล่าวถึงวิธีการเขียน Module ให้อยู่ใน รูปแบบ ของ Common JS เพื่อที่จะนำมาใช้ ใน Titanium Studio นี้ครับ

เรามาเริ่มกันเลยดีกว่าครับ จากบทความ รู้จักกับ Common JS นั้นผมได้กล่าวถึง คำจำกัดความของ Common JS เอาไว้นั่นก็คือ exports และ module.exports ซึ่งการที่เราจะใช้ตัวใดในการทำงานนั้นไปดูตัวอย่างกันครับ

เช่นเดิมครับสร้าง Project ใหม่ครับ จากนั้นเลือก Template เป็น Single Window Applicatoin (หรือจะแบบอื่น ๆ ก็ได้ครับ) จากนั้นทำการสร้างไฟล์ขึ้นมา 1 ไฟล์ครับ ชื่อว่า window.js โดย File นี้จะเป็นการสร้าง Window ให้กับ Application นี้ จากนั้นเราก็เปิดไฟล์ขึ้นมาครับ (สร้างใน Folder Resource นะครับ หาอยู่นอก Resource แล้วจะไม่สามารถเรียกใช้งานได้ครับ)

สร้าง Window ที่ไฟล์นี้ครับ โดยใช้คำสั่ง

exports.load = function(){

var win = Ti.UI.createWindow({

width : Ti.Platform.displayCaps.platformWidth,

backgroundColor : '#fff'

});

win.open();

};

จากนั้นกลับไปยังไฟล์ app.js ครับ แล้วก็ เหมือนเดิมครับ "ลบ" ทั้งหมดออก จากนั้นทำการเรียกใช้ module window ที่เราสร้างขึ้นมาครับ ด้วยคำสั่ง

var win = require('window');
โดยคำสั่งนี้จะมีผลทำให้ไฟล์ window.js นั้นถูก โหลดขึ้นมา ครับ จากนั้นเราก็ทำการสร้าง Window จาก Module window ครับ โดยใช้คำสั่ง
win.load();
ทดลองรันดูครับจะเห็นว่าเมื่อ Application ทำงานนั้น Module ก็จะสร้าง window ให้เรา แบบนี้ครับ

โดยที่ ในไฟล์ app.js นั้นทำหน้าที่เพียงเรียกใช้ Function ที่อยู่ใน module window นั่นเองครับ ซึ่งนั่นหมายความว่าหากเราต้องการเพิ่มหรือเปลี่ยนแปลง Object ลงไปใน window เราก็จะทำการแก้ไขเพียงแค่ ไฟล์ window.js โดยที่ไม่ต้องไปยุ่งกับ app.js เลย ยกตัวอย่างเช่น หาผมต้องการเพิ่ม label ลงไปใน window ผมก็ไปทำการเพิ่ม lable ใน windows.js แบบนี้

exports.load = function(){

var win = Ti.UI.createWindow({

width : Ti.Platform.displayCaps.platformWidth,

backgroundColor : '#fff'

});

var label = Ti.UI.createLabel({

text : 'Hello Titanium',

color : ' #f00'

});

win.add(label);

win.open();

};

ทดลองรันดูครับ จะเห็นมี Label แสดงขึ้นมาบนหน้าจอของโปรแกรม โดยที่เราไม่ต้องทำการแก้ไขไฟล์ app.js แต่อย่างใด

โดยการ exports นั้นนอกจากที่จะเอาไว้ใช้เรียก Function แล้วยังสามารถนำไปใช้เพื่อ exports ตัวแปรต่าง ๆ ที่ต้องการได้อีกด้วย เช่น หากต้องการที่จะ exports ค่าความกว้างของหน้าจอจาก ไฟล์ window.js นั้นก็สามารถทำจะทำได้แบบนี้ ครับ

exports.windowwidth = Ti.Platform.displayCaps.platformWidth;

ส่วนการเรียกใช้นั้นเหมือนเดิมครับ

var width = window.windowwidth;
แล้ว module.export หล่ะครับใช้งานอย่างไร ในกรณีของ module.export นั้นส่วนมากที่ใช้จะถูกใช้ในลักษณะของ Class ต่าง ๆ ยกตัวอย่างเช่น ต้องการสร้าง Class ที่เอาไว้เก็บข้อมูลของบุคคล โดยที่สามารถเรียกใช้เพื่อแสดงชื่อและนามสกุลพร้อม ๆ กันก็จะสามารถทำได้ดังนี้ครับ

function Person(firstName,lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

Person.prototype.fullName = function() {

return this.firstName+' '+this.lastName;

};

module.exports = Person;

โดยสร้างเอาไว้เป็นไฟล์ชื่อ Person.js ส่วนวิธีการเรียกใช้นั้นก็จะเหมือนกับ การที่เราเรียกใช้ Window ครับนั่้นก็คือ

var Person = require('Person');

var people = new Person('Johnny','Deep');

var jonnnydep = people.fullName();

// ตรงนี้จะได้ค่ากลับมาเป็น 'Johny Deep'

จากตัวอย่างที่ได้ให้ไว้จะแสดงให้เห็นถึงวิธีการใช้งาน CommonJS กับ Titanium Mobile ส่วนวิธีการที่จะนำไปประยุกษ์ หรือ นำไปปรับใช้เพื่อให้การพัฒนาโปรแกรม บน Mobile ให้ได้มีประสิทธิภาพมากยิ่งขึ้น

ส่วนในบทความหน้านั้น จะเป็นเรื่องอะไรนั้นติดตามอ่านกันต่อไปได้เลยนะครับ หากมีคำถามหรือข้อสงสัยก็ถามกันมาได้นะครับ แล้วก็อย่าลืมกด Like Fanpage ของ Mobidevthai ด้วยนะครับ

รู้จักกับ CommonJS

2012-10-05T16:06:00.000+07:00

อย่างที่เราทราบกันนะครับว่า JavaScript นั้นสามารถทำงานได้อย่างรวดเร็ว แต่ด้วยข้อจำกัด ทำให้ JavaScript API นั่นสามารพัฒนาอยู่บน Web Browser เท่านั้นและด้วยตัว มาตรฐานของมัน ไม่เหมาะกับการใช้พัฒนาในระยะยาวอีกด้วย ซึ่ง Common JS เป็น API ที่เข้ามาเพื่อรองรับกับปัญหาดังกล่าวนี้ โดยตัว API ของ Common JS นั้นได้ทำการร รวบรวม Library ของ Python, Ruby และ Java มาไว้ด้วยกัน ทำให้สามารถเข้าถึง Application ที่ถูกพัฒนา Complier ด้วย Javascript API ที่แตกต่างกันได้อีกด้วย นั่นหมายความว่า เราสามารถนำ Java script มาใช้พัฒนา Application ต่าง ๆ ได้เช่น

Server-side JavaScript applications

Command line tools

Desktop GUI-based applications

Hybrid applications (Titanium, Adobe AIR)

หรือหมายความว่าเราสามารถเขียน Javascript เพื่อไปรันที่อื่น ๆ โดยที่เราไม่จำเป็นต้องใช้ Web Browser เพื่อ รัน Script นั่นเอง

เอาหล่ะครับ ทำไมเราถึงต้องรู้จักกับ Common JS เนื่องจาก API นี้ จะช่วยให้เราเขียนโปรแกรม ในรูปแบบของ OOP และการจัดการ Code ที่มีประสิทธิภาพมากยิ่งขึ้นด้วย ใน Titanium Studio เอง นั้นมีการ นำเอา API นี้ฝังอยู่ใน Framework มาเป็นที่เรียบร้อยแล้ว เราไปดูกันครับ ว่าเราจะใช้งาน CommonJS ใน Titanium Studio นี้อย่างไร

ก่อนอื่นเรามาทำความเข้าใจกับคำจำกัดความของ Common JS กันก่อนครับ

Module - ใน Titnaium นั้นจะหมายถึงไฟล์ที่มี นามสกุลเป็น .js

Resources - Folder Resource ใน Titanium Studio นั่นเองครับ

exports – เป็นตัวแปรหรือ Function ที่อยู่ใน module เอาไว้เพื่อสร้างเป็นลักษณะของ Public

module.exports - เป็นคำสั่งเพื่อประกาศให้ทุก Object ที่อยู่ใน Module นั่น อยู่ในรูปแบบของ Public

ในการใช้งาน Common JS ใน Titanium นั้น เราต้องใช้ function require เพื่อทำการกำหนด module ที่เราต้องการใช้

var module = require('MyModule');

โดย Parameter ที่ส่งให้กับ function require นั้นจะบ่งบอกให้ที่อยู่ของ module ที่เราต้องการเรียกใช้หาร function โดย function require นี้จะ return ค่ากลับมาเป็น javascript object พร้อมด้วย Property , functions และ สิ่งต่าง ๆ ที่อยู่ใน module ที่ประกาศไว้ เป็น Public ออกมาด้วย ยกตัวอย่างเช่น ใน module ที่ชื่อว่า MyModule นี้มี function ที่ชื่อว่า sayHello โดย function นี้จะทำการ return คำว่า 'Hello ' + paremeter ที่ส่งเข้ามาใน function ก็ สามารถเขียนได้แบบนี้

var module = require('MyModule');
module.sayHello('Titanium');
//ตรงนี้สิ่งที่ได้กลับมาก็คือ คำว่า 'Hello Titanium'

ในกรณีที่มีการเรียกใช้ module อื่น ๆ ที่ทำการ คอมไพล์เป็นที่เรียบร้อยแล้วนั้นก็สามารถทำได้ โดยการแก้ไข file tiapp.xml โดยเพิื่ม module เข้าไป แล้วทำการ require module นั้น ๆ

<modules>
   <module version="1.0">ti.paypal</module>
</modules>

จากนั้นใน Code ที่ต้องการเรียกใช้ก็ใช้เพียงแค่

var paypal = require('ti.paypal');

โดย Titanium ก็จะทำการ โหลด Module ti.paypal แต่จะไม่ไปหาไฟล์ชื่อ ti.paypal ใน folder resource แต่อย่างใด แต่ถ้าในกรณีที่ ไปหา module ที่ require แต่ไม่ได้ทำการเพิ่มลงไปใน tiapp.xml ตัว Titanium จะพยายามหาใน Folder Resource ซึ่งนั่นจะทำให้ไม่สามารถรันได้นั่นเองครับ ส่วนวิธีการอ้างอิง javascript module path นั้น อ้างอิงจากไฟล์ที่ผมมี คือ

[Project Folder]/Resource/lib/MyModule.js

ก็สามารถที่จะเรียกใช้ได้แบบนี้ครับ

var mymodule = require('lib/MyModule');

จะเห็นได้ว่า Common JS นี้จะช่วยให้เราพัฒนาโปรแกรมได้อย่างมีระเบียบและสามารถแก้ไขได้โดยง่าย ในบทความหน้าเราจะมาเริ่มเขียน Module เพื่อใช้ใน Application ต่อ ๆ ไปครับ

Titanium SDK Update 2.1.3

2012-10-05T12:37:00.002+07:00

ตอนนี้ Titanium SDK ได้ออก Update เป็น Version 2.1.3 แล้วนะครับโดยมีการเพิ่ม Feature ต่าง ๆ เข้าไปพอสมควร หลัก ๆ เลยคงเป็นเรื่องของการ สนับสนุน iPhone 5 และ iOS6 ครับ แต่จะมีอะไรบ้างนั้นไปดูกันเลยครับ

อย่างแรกเลยคงหนีไม่พ้นการรองรับ iPhone5 และ iOS6 โดย ทาง Appcelator เองได้ทำการทดสอบ SDK ตัวนี้บน Xcode 4.5 โดยมีการเปลี่ยนแปลงดังนี้ครับ

ตัว iOS6 SDK นั้น ไม่รองรับ AMRV6 โดยตัว Titanium SDK นี้จะรองรับ iOS ที่ Version 4.3 เป็นต้นไป สามารถระบุ ios version ได้จากไฟล์ tiapp.xml แบบนี้

<ios>
 <min-ios-ver>4.3</min-ios-ver>
</ios>

วีธีการเข้าถึง Contacts ที่เปลี่ยนไป โดยใน SDK Version นี้นั้น จะเพิ่มเติมในส่วนของ Authroization ในการเข้าถึง Contacts ใน iOS6 ด้วย โดยมีการเพิ่ม Property ให้กับ Module Contact นั่นคือ contactsAuthorization เพื่อตรวจสอบ สิทธิในการใช้งาน Contact โดยใน Property นี้นั้นจะประกอบไปด้วย

AUTHORIZATION_AUTHORIZED
AUTHORIZATION_DENIED
AUTHORIZATION_RESTRICTED
AUTHORIZATION_UNKNOWN

โดยในส่วนของ Android หรือ iOS Version ก่อนหน้า นั้นจะส่งค่ากลับมาเป็น AUTHORIZATION_AUTHORIZED เสมอ

รองรับ Splash Screen ของ iPhone 5 โดยจะรองรับ ขนาดหน้าจอใหม่ของ iPhone 5 (1136 x 640 pixels) โดย เราสามารถสร้างไฟล์ Splash Screen โดยลงท้ายด้วย -568h@2x เช่น Default-568h@2x.png

ใน iOS6 นั้นจะไม่รองรับการสร้าง Modal Dialog เป็นลักษณะการกลับหัว ของหน้าจอ (upside-down portrait orientation อธิบายไม่ถูกจริง ๆ )

การ embedded Youtube นั้นจะไม่รองรับอีกต่อไป เนื่องจาก youtube ไม่มีอยู่ใน iOS6 ดังนั้น การที่เรา embedded youtube ลงใน App แบบนี้ "http://www.youtube.com/watch?v=oHg5SJYRHA0" จะไม่สามารถใช้งานได้ ให้ไปใช้ วิธีการ embedded จากที่นี่แทน developers.google.com/youtube/player_parameters ครับ

เป็นอย่างไรกันบ้างครับ สำหรับ Version ใหม่ของ Titanium SDK ที่เอามาหลัก ๆ จะเป้นของ iOS ที่เปลี่ยนไป แต่อย่างไรก็ตาม ก็ยังมีส่วนอื่น ๆ ที่ทาง Titanium ได้ทำการแก้ไข เพิ่มเติมให้กับทั้ง iOS และ Android ด้วย ซึ่งเยอะมาก ๆ ครับ ลองไปอ่านกันต่อได้ที่ Titanium SDK 2.1.3 Release Note

แสดงตัวเลขบน icon app (สำหรับ ios)

2012-10-05T05:14:00.000+07:00

หลังจากหยุดเขียนไปซักพัักเนื่องจาก ไปติด NoSQL อยู่เลยทำให้ไม่มีโอกาศเขียน วันนี้เลยถือโอกาศมาเขียนบทความเพิ่มเติมให้ได้อ่านกัน แต่วันนี้เป็นเรื่องง่าย ๆ สบาย ๆ ก่อนละกันนะครับ นั่นก็คือ การแสดงตัวเลขบน icon ของ Application นั่นเองครับ

วิธีการก็ง่ายมาก ๆ ครับ เพียงแค่ใช้คำสั่ง
Titanium.UI.iPhone.appBadge

เท่านี้เราก็สามารถที่จะทำให้ icon App ของเรามีตัวเลขขึ้นมาแล้วหล่ะครับ ลองไปทำกันเลยนะครับ โดยผมจะเริ่มจาก สร้าง Window ขึ้นมาก่อนครับ จากนั้นก็ใส่ ปุ่ม ลงไป 1 อันครับ โดยที่ปุ่มนี้จะทำการเพิ่มตัวเลขให้กับ icon ของ Application ของเรานะครับ

var win = Titanium.UI.createWindow({
width : Titanium.Platform.displayCaps.platformWidth
})

var btnAdd = Titanium.UI.createButton({
title : 'add number'
top : 50 ,
width : 120
})

win.add(btnAdd);

จากนั้นก็ ใส่ Event ให้กับ ปุ่ม ครับ

btnAdd.addEventListener('click',function({
   Titanium.UI.iPhone.appBadge += 1;
})

แล้วก็สั่งให้ Window เปิดครับ จากนั้นก็รันเลยครับ

เสร็จแล้วลอง กด ปุ่มครับ แล้วทดลองกดที่ปุ่ม Home ครับ จะพบกับ iCon App ของเรานั้นมีตัวเลขขึ้นมาแล้วหล่ะครับ

ส่วนการ Reset นั้น เพียงแค่กำหนดให้ ตัว appBadge เป็น 0 แบบนี้ครับ Titanium.UI.iPhone.appBadge = 0
เป็นอย่างไรกันบ้างครับ สำหรับวันนี้ขอจบลงตรงนี้ก่อนนะครับ ใบทความต่อ ๆ จะเป็นเรื่องอะไรนั้นอย่าลืมติดตามกันต่อนะครับ

Mobidevthai

เขียนโปรแกรมอ่าน QR Code, Barcode ด้วย Titanium Mobile [iOS]

Titanium SDK 3.1 กับ Facebook

Post รูปภาพจากเครื่องไปยัง Facebook Wall ผ่าน Graph API

Post ข้อความ ไปยัง Facebook ด้วย Titanium Mobile

ดึง Profile ของ​ User Facebook ผ่าน Facebook Graph API ด้วย Titanium Mobile

การใช้ Facebook เพื่อจัดการระบบ Login และ User ด้วย Titanium Mobile

Titanium Mobile กับ Facebook

การใช้งาน Facebook เพื่อจัดการระบบ Login และ Users

Facebook Graph API

Facebook REST API

ว่าด้วยเรื่องของ Contact บน Titanium Mobile

รู้จักกับ Alloy Framework บน Titanium Mobile

Alloy Framework คืออะไร ?

Titanium Mobile Update 3.0

การใช้งาน Picker แบบ Multi Column (สำหรับ iOS เท่านั้น)

การใช้งาน Picker ใน Titanium Mobile

Picker คืออะไร

Update - Titanium SDK 2.1.4

ดึงข้อมูลจากแหล่งต่าง ๆ ด้วย Titanium.Network.HTTPClient

การใช้งาน JSON กับ Titanium Mobile

JSON คืออะไร ??

SQLite กับ Titanium Mobile

สร้าง Database (Create Database)

สร้าง Table (Create Table)

ดึงข้อมูล (Select)

การใช้งาน Dashboard View (iOS)

การใช้งาน Event ของ Titanium.App

รู้จักกับ Transition (iOS) และ การแสดง Window แบบ Modal

รู้จักกับ Titanium.App

วิธีการใช้ CommonJS ใน Titanium Studio

รู้จักกับ CommonJS

Titanium SDK Update 2.1.3

แสดงตัวเลขบน icon app (สำหรับ ios)

ดึง Profile ของ User Facebook ผ่าน Facebook Graph API ด้วย Titanium Mobile