การใช้งาน Navigator Group (เฉพาะ iOS)
จากที่ผ่านมาเราได้รู้จักกับ window ไปแล้วนะครับ แต่ไม่ทราบว่าได้สังเกตุ กันหรือเปล่าว่า Window ที่ถูกสร้างขึ้นมาด้วย Code เราทำการเขียนเอาไว้มันขาดอะไรไปอย่างหนึ่ง มันขาด Title ไปนั่นเองครับ แล้วเราจะเอามันมาได้อย่างไร หล่่ะ- ใช้ TabGroup ครับ แต่.....เราไม่ได้ต้องการให้มี Tab อยู่ด้านล่าง
- ใช้ Navigator Group ครับ
เราสามารถสร้าง Navigator Group ได้ด้วยคำสั่ง
var navGroup = Titanium.UI.iPhone.createNavigationGroup();
แต่ด้วยตัว Navigator Group นั้นไม่สามารถแสดงได้โดยตรงจึงจำเป็นต้องใช้ Window มาเป็น Container หลักก่อนครับvar mainwin = Titanium.UI.createWindow();
จากนั้นก็สร้าง Window ที่จะเป็นจุดเริ่มต้นของ Navigator Group ครับ ในที่นี้ผมจะสร้างให้เป็น Win 1 โดยที่ข้างใน window จะมี ปุ่ม 1 ปุ่ม เพื่อเปิดไป window ที่ 2 นะครับvar win1 = Titanium.UI.createWindow({
backgroundColor : '#fff',
title:'Win 1'
});
var btnOpen = Titanium.UI.createButton({
title : ' Open Window 2 ',
width: 300 ,
height: 100,
top : 50
});
win1.add(btnOpen);
จากนั้นทำการ Set window แรกให้กับ Navigator Group ครับnavGroup.window = win1;
จากนั้นก็ทำการ เอา Navigator Group ไปใส่ใน Main Window แล้วก็สั่ง ให้ Main Window เปิดขึ้นมาครับmainwin.add(navGroup);
mainwin.open();
เราก็จะได้พบกับ Window ที่มี Navigator Group อยู่ครับ
หลังจากที่ได้หน้า Window แรกแล้ว เราก็จะมาทำให้โปรแกรมนี้ทำงานได้อย่างสมบูรณ์ ครับ ด้วยการสร้าง Window 2 เพื่อให้ เมื่อกดที่ปุ่ม แล้วจะทำการเปิด window 2 ขึ้นมาครับ
var win2 = Titanium.UI.createWindow({
backgroundColor : '#f00',
title:'Win 2'
});
หลังจากที่ได้ window ที่ 2 แล้ว ก็จะมาทำการใส่ event ให้กับปุ่ม ใน window 1 ครับ โดย event ที่เราจะ ใช้กันก็คือ Click นั่นเองครับ และ ใน event ก็จะสั่งให้ Navigator Group เปิด windows 2 ขึ้นมาครับ
btnOpen.addEventListener('click',function(){
navGroup.open(win2);
});
เมื่อทุกอย่างเรียบร้อยแล้ว รันดูครับ ก็จะพบกับหน้า window 1 และเมื่อกดที่ปุ่ม ก็ จะเปิด Window ที่ 2 ขึ้นมา
จะสังเกตุได้ว่า ปุ่ม ที่อยู่ทางซ้ายมือ ของ Navigator Group นั้นหากไม่ได้ถูก Set เอาไว้ ว่าจะให้แสดงคำว่าอะไร ก็จะถูก Default เอาไว้ที่ Titile ของ Window แรกนั่นเอง หากเราต้องการเปลี่ยนก็สามารถเปลี่ยนได้ โดย Set Property ของ window 2 ที่ชื่อว่า backButtonTitle ตามนี้ ก็จะสามารถเปลี่ยนแปลง ปุ่ม ย้อนกลับได้ตามที่ต้องการ
var win2 = Titanium.UI.createWindow({
backgroundColor : '#f00',
title:'Win 2',
backButtonTitle : 'Back'
});
เป็นอย่างไรกันบ้างครับ กับ Navigator Group แต่อย่างที่กล่าวไว้ข้่่างต้น บทความนี้เฉพาะ ผู้พัฒนา บน iOS เท่านั้นครับ เนื่องจาก บน Android นั้น มี ปุ่ม Back ที่ทำหน้าที่แทน Navigator Group อยู่แล้ว ดังน้ัน จึงไม่จำเป็นต้องมี การสร้างสิ่งนี้แต่อย่างใด
ก็ จบลงไปแล้วนะครับ สำหรับ Navigator Group ไม่ยากเลยใช่มั้ยครับ ยังงัยก็ติดตามกันต่อไปนะครับ สามารถติชมได้ นะครับ อ้อ แล้วก็อย่าลืม กด Like FanPage ด้วยนะครับ เอาไว้ ปรึกษาปัญหาเกี่ยวกับ Titanium Studio กันนะครับ
0 ความคิดเห็น:
แสดงความคิดเห็น