Develop a Side Menu App using Intel XDK - Part 5

In this part 5 of the post you will learn how to add content to your SideMenu app.

Review the following posts before you start with this post although Part 5 is quite independent except that it may start picking up a screen from Part 4.

Part 1:Creating a Intel XDK project using a template; SideMenu project UI, SideMenu on iPhone6 emulator
http://hodentekmobile.blogspot.com/2015/11/develop-side-menu-app-using-intel-xdk.html

Part 2: Review of Controls and Layout as well as working with Pages. Pages in a SideMenu
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk.html

Part 3: Linking the pages and Navigation
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_19.html

Part 4: Adding the BACK button to return to the previous page.

http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk_26.html


Presently the Favorites Screen(page)is empty as shown.

SideMenu5_01.png

The header shows 'Favorites' and there is a BACK button to take you back to HOME.
Let us first change the title for this screen from 'Favorites' to 'My Books'. If you prefer you can use your own. In fact it will be better you use your own. However, stay with me watching what I change.
In the above picture you see FAVORITES as the Title in the properties page. Change it to 'My Books'.

Next I place ListView control (click drag and place in the page) which comes with some 3 items as shown. ListView is in Organization as shown.

SideMenu5_02.png
The HTML fragment for this addition is shown here:

  
I will add two more items to the code so that I will have 5 list items.

If you want to edit this item, click EDIT HTML in the designer at the bottom.
The code after adding the items is shown here:

Note I added the correct widget numbers (shown in red above) for the class.

Click Save or Save all in the main menu.

Go back to design and refresh the page.

Now the 'My Books' page has five list items.

SideMenu5_03.png

Now I am going to change the text for the First List item. I click on the First List item as shown. The Label is List Item. The href should point to a page which I do not have, but will create. There is a icon. I iconized the book jacket of my book using the online program at this site (
http://www.pic2icon.com/format_conversion.php) hoping to use my own icon. I will have to bring that .ico image into the app. We will see how.

First step: Change the Label to SQL Server Reporting Services 2012.

SideMenu5_04.png

Second Step: Create a new page with the Title SQL Server Reporting Services 2012 in 'PAGES' as described.

Click New Page to open the New Page dialog as shown.

SideMenu5_05.png

Change the ID and replace it with SSRS2012. A new Page (empty for now) page#SSRS2012 will be added as shown.

SideMenu5_06.png

Now drag and drop a HEADER control to this page from Controls as shown.

SideMenu5_07.png

Change the Title to 'SQL Server Reporting Services 2012.

As far as interactivity is concerned when we click on the page item for SQL Server Reporting Services 2012 on the My Books page, the screen with Title SSRS 2012 should be displayed. We will do this in the designer as shown.

SideMenu5_08.png

Let us test this now. Click on EMULATE to get to the emulate mode.

We can verify that the linking has been successful as shown in the next image. Navigation forward using the links and the navigation backward using the BACK button are both successful.

SideMenu5_09.png

We still need to change the text in the Side Menu as it is showing Favorites with a 'heart' icon. We will change this now to SSRS2012.ico.

The Project folder is here which you can get from index.html. In the present case it is here:
C:\Users\Jayaram\Documents\Blog\IntelXDK\ListViewTemplate\MyListView\FinalSBS\www

Place the icon in the images folder in WWW

SideMenu5_10.png

When you refresh the app in Intel XDK the image will be in the images folder as shown.

SideMenu5_11.png

Now we are ready to make changes to our design of the SideMenu item.
Presently the page is as shown.

SideMenu5_12.png

In the Properties replace Favorites with My Books and the icon with SSRS2012.ico by browsing.

Note: Looks like the IDE is not ready for Custom Icons but the built-in ones that you see when you click on the drop-down as shown. The built-in icons are brought into the app via CSS.

SideMenu5_13.png

We leave the icon as is and run EMULATE once again.

I have made changes to the other items in a similar manner as shown in the emulator mode.

SideMenu5_14.png

All the above images in the emulator mode are for Apple iPhone 6 emulation. Intel XDK has not yet included Windows 10 Mobile.

In the next part, Placing the contents on one of the detail pages will be described.
This next part (Part 6) is all about placing images and text formatting:
http://hodentekmobile.blogspot.com/2016/02/develop-side-menu-app-using-intel-xdk.html