Develop a Side Menu App using Intel XDK - Part 7

You have developed an APP such as the Side Menu App and now you want to see how it would look when you bring it up on a smart phone. It is true that this app is not complete, as yet. But it is always of interest to know how it would look on  a real phone, an Apple phone or some other phone.

The first thing for you to see is how it would look on the emulator. This post is to describe how it would look on an emulator.


Let us say, I have finished designing an app, herein Hodentek Books which appear as shown in DEVELOP | DESIGN .


appDisplay_00

Using the Emulator:

I am now in the DEVELOP

appDisplay_01

Now I change over to EMULATE tab as shown:

appDisplay_02

The DEVICES panel gets displayed and shows the emulator for the phone type, in this case Apple iPhone 6.

appDisplay_03

The app you designed now appear in the center of IDE as shown.


appDisplay_04

From the drop-down handle on DEVICES you can access many different emulators (Intel XDK Version 3240). In fact there are a few more if you scroll down:


appDisplay_05

As we saw earlier, the Apple iPhone 6 emulator showed you how the app would look. The app is functional as seen here for one of the clicked links in the app display earlier.

appDisplay_06

When in EMULATE tab if you change the device type in DEVICES, the program processes the change and you would see the start page on the new emulator. The next one shows the app when I changed the emulator from iPhone 6 to Nokia Lumia 920.



appDisplay_07

Getting it displayed is one thing and getting it displayed on a real device is quite another. Just because it worked on an emulator does not mean it would work the same way on a device. Also to be noted, that just because it did not work well (some functionality did not work) does not mean that it will work in the emulator. Most of the time it works but not always. You should test, test and test.

In the next post I will describe how you may display your app on smart phone such as iPhone 6 or any other which you have.

Review Previous posts here:

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

Part 5: Adding pages and organizing controls  to the project
http://hodentekmobile.blogspot.com/2016/01/develop-side-menu-app-using-intel-xdk.html


Comments

Post a Comment

Popular posts from this blog

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

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

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