Hodentek Mobile

This post is a continuation of my previous post (Develop a Side Menu App using Intel XDK - Part 5) and describes considerations in adding images and some text to the content. In the present post it is shown on just one page of the app. As an image is worth a thousand words, adding images is very important in app development. As I am writing an app that has about two to three dozen images I wanted to find out what would be an optimum size for an image. Although I am still debating, I created four images resized to represent from 100% to 25%. The Intel XDK UI allowed me to place the images using the image icon which brings in the default image, Stabburg.jpg which had the following details, 500x448 pixels with a file size of 31.68 KB. Placing images and re-sizing Click on Image Control and drag it to a page and the image is added to the page. Placing an image control on a page automatically adds in the Stabburg.jpg. PlaceImage.jpg Clicking on the image opens the image prope...

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 show...

In the Previous post (also read Note 2 at the bottom) we used the designer to link the items on the Side bar menu to display the linked pages on the display. We also noticed that after going to Favorites from Home, there was no way to return to Home. In this post we will be adding a Back Button to the Favorites page so that when we click on it we return to the Home page. If this succeeds we do the same for Messages and Profile pages. If you find only page#mainpage , add three more pages named, 'FAVORITES', 'MESSAGES' and 'PROFILE'. Bring up the Favorites page by clicking on page#Favorites in the Pages menu as shown. BackButton_01 We take off the text 'FAVORITES'. The page now appears as shown. It is empty now. BackButton_02 Now we add a header to this page. Header is in the Layout group as shown. BackButton_03 Click on Header in LAYOUT and drag it out to the page#Favorites as shown. You will see some color changes as ...

In this post we take a look at the Layout and Controls as well as working with the pages. We will also learn how the SIDEMENU relates to the pages. I assume he have reviewed  Part 1 . Let us take a look at the Controls that are available for the Side Menu App. Launch Intel XDK and open the project SideMenu from the previous post . The JavaScript code for this app  is from the appFramework . In the main MENU, DEVELOP click on the switch that toggles between CODE and DESIGN after you have clicked on index.html . The  app framework CONTROLS are as shown in this image. AFControls_01 All nodes have been collapsed and you can expand them by clicking on the item, say LAYOUT. This expands to reveal the controls related to LAYOUT as shown. In addition to HEADERS and FOOTERS you can arrange the layout using, row, column and side-by-side. You could also use CARD style controls either the CARD, CARD COLUMNS or CARD GRID AFControls_02 Collapse the LAYOUT and cl...