Develop a Side Menu App using Intel XDK - Part 4

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

BackButton_04

When you drop it on the page, it changes to this as shown.


BackButton_05
The HTML fragment is this:

BackButton_11

Double click the header (the blue rectangle) to reveal the properties as shown:


BackButtom_06

Make the following changes:
  • Place check mark for Title and Back Button.
  • For title write in 'FAVORITES'
Now the page appears as shown with the header modified as above.


BackButtom_07
The header's HTML fragment is now:

BackButton_10

Click EMULATE.
In emulation the FAVORITES page appears as shown.


 BackButtom_08

Click on Back and the link for this button takes you to the following:


BackButtom_09

For the other pages do the same adding a 'header' and modifying the properties.

Now you have successfully modified the template to a working app.

Note 1: The page loading is quite times sluggish and make sure you have reloaded before you add a control of any kind.
Note 2: A new build was downloaded 2807 and this post is using the above build.

Part 5 here:
http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html

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

Comments

Post a Comment

Popular posts from this blog

Towards cross-platform development..

There are lots and lots of Apps. In fact there are over a couple of million Apps including all of the major brands, Apple, Google, Blackberry, Microsoft with Apple at the top and Microsoft in the bottom. But this is a growing market. The variety is truly bewildering, different size devices; different operating systems(OS); different programming languages;  and different orientations. This post is not very recent but you can see how the various mobile operating systems compare: http://www.ibtimes.com/android-vs-ios-whats-most-popular-mobile-operating-system-your-country-1464892 The interactive image in the article really shows the popularity of a given OS/device among different geographical regions. Windows Phone Apps is for example based on Microsoft's Window 7, 8, 8.1 OSs using .NET. With Windows OS and Visual Studio one can build Apps for all of Microsoft devices covering Phone, Tablet and Desktop. However Microsoft Windows Apps sans Html5/CSS/Javascript is OS specific. E
Read more

Event Code: UI design with XAML in Visual Studio 2017 - 2

Image
I assume you have followed me with this post here: http://hodentekhelp.blogspot.com/2017/12/how-do-i-configure-button-in-xaml.html After reading the above you will see that you start with an empty project whose code is shown here: WinPhoneStep1 In the final step you will have achieved this: WinPhoneStep11 This project when deployed will just show a button as in the above and nothing more: WinPhoneStep13 Writing code for a click event of this button. Let us first give a name for this button, like ClickMe . When you highlight the button in the design by clicking it, the Property pane opens where you can write the name you want as shown. winPhoneStep20 In the XAML code the Button gets a qualifier x:Name="ClickMe" as shown here: Now enter the Click event to the code by just enter "cl" after a space as shown and the intellisense kicks-in showing your options as shown. winPhoneStep22.png You pi
Read more

Deploying a Universal Windows Project to Lumia 950

Image
We will be using the Lumia 950 as the connected device and it has been set to Developer Mode as described earlier. We start with the HelloWorld Universal Windows Project(UWP) that has been tested to run without errors on the Local Machine as described here. Open the project in Visual Studio 2017 as shown. LumiaDeploy_0 and LumiaDeploy_7 Build (Using Menu Build and its context menu) the Project and verify it is successful. -------- 1>------ Build started: Project: HelloWorld, Configuration: Debug x86 ------ 1>  HelloWorld -> C:\Users\Owner\source\repos\HelloWorld\HelloWorld\bin\x86\Debug\HelloWorld.exe ========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ===== ------------------ Click Local Machine along Debug as shown. LumiaDeploy_1 Pick Device from the list, the display changes as shown. LumiaDeploy_2 Connect your Windows 10 Mobile(Lumia 950) to one of the USB ports. This will result in an
Read more