INTEL XDK 1494 APP STARTER TUTORIAL 2

---

INTEL XDK APP STARTER TUTORIAL 2

STEPS

1) Continue from the previous tutorial

http://xdk-steps.blogspot.com/2014/11/intel-xdk-1494-app-starter-tutorial-1.html 

2) Editing the Page

2.1) In the Pages Control Panel, click Main.

2.2) The Page Properties panel appears on right hand side of the window.

3) Page Elements

3.1) Click on the ELEMENTS Tab.

3.1) Notice the Container Object Control.

4) Adding ELEMENTS to a PAGE

4.1) Drag the Container object and drop it on the page.

4.2) Drag Image object and drop it inside the Container.

4.3) Change the Source for the Image object

e.g images/penang.jpg

You will not see the image as the folder and the file doesn’t exist in the application root of the project.

5) Adding a Folder to the project

5.1) Right-click the www folder (application root folder)

5.2) Enter the folder name “images”

5.3) Download image

Download this image into the folder images and name it as penang.jpg

5.4) Outcome:

6) Add Styles to the Page Element

Look at the Styles Panel (at the bottom right corner of the window).

6.1) Change the Image Styles

eg width:100%;

6.2) Add a Container and List Element.

First drag the Container. Then drag the List into the container.

6.3) Add another list item

1 – Click Add button.

2 – Copy codes from Item 1 and change the value to 3.

3 – Click Apply

7) Add a new page

1 – Click Add Page button

2 – Type the title Eat

3 – Click Apply

Repeat the same steps to add two more pages, ie See and Stay.

Check that their properties are as follows:

Update the links in the List Element

8) Test Page Navigation in Emulate Window

When you tap the first item in the List Element…

…you should be forwarded to the Eat Page

Press the Back Button (labeled as < Main ) to go back to the Main Page

---