โปรแกรม Intel XDK V.1494 การใช้ App Starter

1.เปิดโปรแกรม Intel XDK V.1494 ขึ้นมา

·         สามารถดาวน์โหลดได้จากที่ https://app.box.com/s/kcmuy2br92geoue7573p

กดที่ Use App Starter

2.ทำการตั้งชื่อ และ เลือกที่เก็บไฟล์

·         เลือกที่เก็บไฟล์

·         ตั้งชื่อ App

3.กด Create

4.จะขึ้นหน้านี้มา

5.กดที่ DEVELOP จะได้หน้าตาแบบนี้

6.คลิกที่ Hello World แล้วกดปุ่ม Delete ด้านขวามือที่แทบ Button Properties

7.จะขึ้นแท็บ Confirm ให้กด Confirm

8.กดที่ ELEMENTS

9.คลิกที่ Container ลากไปปล่อยวางบน Page ของเรา

10.จะได้แบบหน้าตาแบบนี้

11.ในด้านขวา Container Properties ใน Container Styles ให้เพิ่มตามนี้ แล้วกด Apply

·         height:100%;   หรือ height:auto;   

12.กลับมาที่แท็บ PAGES คลิกที่หน้า Main

13.ตรงส่วน Page Properties หัวข้อ Title จะเปลี่ยนชื่อบนหัว Header

14.กดที่ Apply

15.กลับมาที่แท็บ Element ทำการลาก Image มาวาง 

16.จะได้แบบบนี้

17.ไปที่โฟลเดอร์ที่เลือกที่เก็บไฟล์ไว้ (ขั้นตอนที่ 2)

·      เข้าที่ www

·         กดสร้าง New folder ตั้งชื่อว่า images 

·       ·   วางไฟล์รูปไว้ใน Folder images

 เวลานำไปใช้พิมพ์ว่า home.png

18. รูปจะเข้ามาอยู่ใน Directory ด้านซ้าย

19.ทางด้านขวาที่ Image Properties

·         ตรง source ให้พิมพ์ชื่อไฟล์พร้อมนามสกุลตามที่ปรากฏในขั้นตอนที่ 18

·         images/home.png    

·          แล้วกด Apply

กำหนด images style

width:auto;    (กำหนดความกว้างของรูปตามขนาดไฟล์จริง)

height:auto;   (กำหนดความสูงของรูปตามขนาดไฟล์จริง)

display:block;

margin: 5 auto; (5 คือ ห่างจากข้างบน 5px , auto คือ กำหนดให้อยู่กึ่งกลาง)

21.ทำการเพิ่มข้อความ Text

22.ทำการเพิ่มพิมพ์ข้อความ ใส่   .. ข้อความ .. 

word-wrap:break-word;   (ตัดคำขึ้นบรรทัดใหม่)

                    text-indent:1.5em;           (ย่อหน้า 1.5 กำหนดค่าเป็น em)

                    text-align:justify;            (ทำให้ตัวหนังสือเหมือนในตัวนี้ของ word )

23.กลับมาที่ Pages กดที่บวก เพื่อเพิ่มหน้าใหม่

24.เปลี่ยน Title แล้วกด Apply

25.ลาก Element List ไปวาง จะขึ้นดังรูป

26.เพิ่ม List ตามที่ต้องการ

27.คลิกที่ Page ดู Page ID ของหน้า List คือ page_1

28.ไปที่ Nav > กดบวกสร้าง header_1

ด้านขวา Header Setup

Href=”#page id ของเราที่จะให้กด back กลับไป”  จะให้กลับไปหน้า list ก็ #page_1

ส่วนตรง หัว App ใส่ชื่อที่จะให้ขึ้นทุกหน้าก็คือ Intel®

29.กลับมาที่ Page คลิกหน้าที่สร้างใหม่ จาก List ของข้อมูล

ในส่วน Header เลือกเป็น header_1 ที่สร้างไว้

30.ทำแบบนี้กับทุกหน้าที่อยู่ใน List

ปรับเป็น header_1 กับทุกหน้า

31.ทำการใส่ข้อมูลที่ต้องการแต่ละหน้า ให้ครบทุกหน้า

หน้า About 

32.เชื่อมโยงหน้า Listview โดย page_id (ตัวอย่าง : #page_2)

33.สร้าง Footer (footer_1 และ footer_2)

34.เปลี่ยนที่หน้าแรก

Footer 3

และทำประมาณนี้กับทุกหน้า โดย Previous set เป็นหน้าก่อน Next set เป็นหน้าถัดไป

สรุปการเชื่อมโยงของทุกหน้า

 

ทำการทดสอบ กดที่ Emulate

สามารถเทสบนโทรศัพท์จริงได้

เลือก Test เลือก Push Files

  

  

ดาวน์โหลด Source code ได้ที่

https://app.box.com/s/zgk0vwska66y1rjknbs0

ตัวอย่างอื่นๆ

1.IntelDestopCPU - Created by Phijak Chanyawiwatkul

Link : https://drive.google.com/file/d/0B36HSlx8L0JaMklIeGIxQ0hxblE/view?usp=sharing

2.BachelorOfAppliedThaiTraditionalMedicine - Created by Sarunya Jansamutr

Link : https://drive.google.com/file/d/0B36HSlx8L0JaNzBEWW1WT0tQc0E/view?usp=sharing