Develop a Side Menu App using Intel XDK - Part 1
This post describes the following:
I am using the build 2548 as shown here. This is after Intel XDK is launched. There is a little bit of instability in the app which will be described later. This is perhaps the program is on a Windows 10 computer. The instability is not related to the Intel XDK, perhaps the communication between the computer and the Intel site.
XDK2548_01.PNG
I create a new project and choose the Standard HTML5 template for a Side Menu app and use the Layout and User Interface shown. This app can be used on Desktops, smartphones and tablets. At first you need to start a new project and expand the Templates node in the left pane and scroll down and get to the Side Menu App. On the right you see the app displayed on a phone.
SideMenuApp.png
I have placed a check mark to use the App Designer which will greatly simplify authoring the app. Right next to the Use App Designer check box there is an icon which if you click will take you to the site on Github which has the source code .
According to the above site:
"This template can be used for simple app with side menu that can be opened to switch views, this template can be used for creating applications similar to Youtube* app or Gmail* app. "
Click Continue on the Intel XDK user interface.
You need to create a Project Name (you can write-in) and a directory that you can choose or browse as shown.
SidemenuApp_01.png
After choosing a name and a directory for your project, the screen displays the information.
SidemenuApp_02.png
Click Create.
You should see the success screen after a while.
Click OK. This Opens the Intel XDK User Interface with the Projects folder showing NovSideMenu. It is instructive to see what each of the elements are on the left navigation panel which is under the Working Files. The index.html is the main page.
[The software gets built every once in a while and there is always a new copy and the reminder to install the new build comes abruptly and it is somewhat distracting when you are trying to write up something. Also the messaging is unstable and quite bothersome. I finally chose Remind Me later to stop this unstable activity].
This present view is showing how the interface appears when the index.html is in view as shown with the main tab Develop.
SidemenuApp_04.png
Click on Emulate and you get to view how it appears on an Apple iPhone 6. There you can find informaiton on Apple iPhone 6 as well. The iPhone6 shown here is interactive and you can click and check the controls.
SidemenuApp_05-0.PNG
Here is how the Side Menu App works. I have super imposed three images for the next screen.
SidemenuApp_05.PNG
As I mentioned earlier another distraction.
SidemenuApp_06.PNG
Choose to upgrade by clicking the Upgrade button.
As it happens the Interface I used did not show the options [CODE|DESIGN] which appeared after the Upgrade button was activated. It would have been ineffective if Upgrade was not made.
SidemenuApp_07.PNG
] As we are using the designer, this button[DESIGN\ must bee active for us to get to the layout and design tools shown in the above screen.
---
You can get to the article related to this app on the Intel Developer Zone here.
The HTML source code for this app is here.
In Part 2 we will see design elements of the Side Menu App.
Part 2: Review of Controls and Layout as well as working with Pages.
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk.html
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
- How to create a Intel XDK project choosing a template
- For the template, Side Menu App, some details of the Intel XDK UI are described.
- The functioning of the app is shown in the Emulator for Apple iPhone6
I am using the build 2548 as shown here. This is after Intel XDK is launched. There is a little bit of instability in the app which will be described later. This is perhaps the program is on a Windows 10 computer. The instability is not related to the Intel XDK, perhaps the communication between the computer and the Intel site.
XDK2548_01.PNG
I create a new project and choose the Standard HTML5 template for a Side Menu app and use the Layout and User Interface shown. This app can be used on Desktops, smartphones and tablets. At first you need to start a new project and expand the Templates node in the left pane and scroll down and get to the Side Menu App. On the right you see the app displayed on a phone.
SideMenuApp.png
I have placed a check mark to use the App Designer which will greatly simplify authoring the app. Right next to the Use App Designer check box there is an icon which if you click will take you to the site on Github which has the source code .
According to the above site:
"This template can be used for simple app with side menu that can be opened to switch views, this template can be used for creating applications similar to Youtube* app or Gmail* app. "
Click Continue on the Intel XDK user interface.
You need to create a Project Name (you can write-in) and a directory that you can choose or browse as shown.
SidemenuApp_01.png
After choosing a name and a directory for your project, the screen displays the information.
Click Create.
You should see the success screen after a while.
Click OK. This Opens the Intel XDK User Interface with the Projects folder showing NovSideMenu. It is instructive to see what each of the elements are on the left navigation panel which is under the Working Files. The index.html is the main page.
[The software gets built every once in a while and there is always a new copy and the reminder to install the new build comes abruptly and it is somewhat distracting when you are trying to write up something. Also the messaging is unstable and quite bothersome. I finally chose Remind Me later to stop this unstable activity].
This present view is showing how the interface appears when the index.html is in view as shown with the main tab Develop.
SidemenuApp_04.png
Click on Emulate and you get to view how it appears on an Apple iPhone 6. There you can find informaiton on Apple iPhone 6 as well. The iPhone6 shown here is interactive and you can click and check the controls.
SidemenuApp_05-0.PNG
Here is how the Side Menu App works. I have super imposed three images for the next screen.
SidemenuApp_05.PNG
As I mentioned earlier another distraction.
SidemenuApp_06.PNG
Choose to upgrade by clicking the Upgrade button.
As it happens the Interface I used did not show the options [CODE|DESIGN] which appeared after the Upgrade button was activated. It would have been ineffective if Upgrade was not made.
SidemenuApp_07.PNG
] As we are using the designer, this button[DESIGN\ must bee active for us to get to the layout and design tools shown in the above screen.
---
You can get to the article related to this app on the Intel Developer Zone here.
The HTML source code for this app is here.
In Part 2 we will see design elements of the Side Menu App.
Part 2: Review of Controls and Layout as well as working with Pages.
http://hodentekmobile.blogspot.com/2015/12/develop-side-menu-app-using-intel-xdk.html
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