Creating cross-platform apps with a tab view template - Part 1

If you have not reviewed my previous posts please do so now.

Cross-Platform Project apps that you can choose for designing apps here:
http://hodentekmobile.blogspot.com/2014/08/creating-projects-with-intel-xdk-part-2.html

Step-by-step procedure to create a ListView app here:
http://hodentekmobile.blogspot.com/2014/09/creating-projects-with-intel-xdk.html

There are some slight changes in this version and I recommend you download the latest.
Here in Part 1, I will cover using the tab view template in Intel XDK for cross-platform and
in Part 2, I will cover modifying the template and deploying it to your device.

If you do not have the latest Intel XDK you can get it from here:
http://hodentekmobile.blogspot.com/2014/11/get-latest-intel-xdk-and-jump-start-app.html

Download the above and double click to install.
Launch the Intel XDK application from its shortcut. You may get a warning as shown.


Click Yes - Safe Restart
This happens if you did not exit the application normally the previous time.

The following page is displayed.


Click Open an Intel XDK project.


You will get displayed the Start a New Project window as shown above.

Click Start with a template
Choose tab view and click on Tab View App.




Click on Use this template

This takes you to:
https://github.com/gomobile/template-tab-view


This template, like the List View template,  uses the Intel App Framework which is free and Open Source targeting mobile apps for HTML5 Mobile browsers.

Click Download ZIP. You could also clone as explained in the my previous post, but to keep it simple just click Download ZIP and save it to a location of your choice.

You have downloaded template-tab-view-master (258KB) file. Extract the files from this ZIP.

In the previous screen  click on Use this template.

You may need to login to your account to get started.



You will be taken to create a Project screen to specify folder and project name.



Click Create.

If successful you will see a congratulatory message. Click OK to the message.

In the Your Intel'XDK Projects page click on MyTabView (the name given by you)


Click on Develop tab in the Toolbar at the top.
You will get displayed the index.html page as shown.


The coding for the tab view is at the bottom as in the enxt paragraph:


   

Each tab is associated with a page having its own icon and navigation.

At this point you can run the app right away.

You can just run this app without doing anything else as the right hand side shows the live development tasks. There are tow of them:
  • Run My App
  • Live Layout Editing
Click Run My App
You can run it on your own device (my Windows Phone) or run in an Emulator of your choice. There is quite a bit of choice of the device here.

For now click on Run in Emulator.
Nokia Icon emulator opens in a new window as shown. You can play clicking the tabs (4 of them) and see how the pages are rendered.


This next one is for iPhone.


There are many other choices here.



You want to build a Web App with Intel XDK? Find here.

Read about other Intel XDK templates here.





Comments

Post a Comment

Popular posts from this blog

Apps with Mobile Roadie, the one-stop platform

Image
MobileRoadie is the platform to build mobile apps with rich features. It is also one-stop, build, manage, design and engage. It supports all media, photos, video and audio. The text color in the picture may not show you the logo clearly! Here are features taken from Mobile Roadie site . Using Photos: Upload your photos manually, or automatically pull in your photos from an RSS feed, Flickr account, Instagram account or hashtag, Mobypicture, Picasa, Twitpic, or Facebook Fan Page profile photos. Users will see your photos in a grid layout of your choosing, and can even play a slideshow of your photos. Embed news: Add news posts manually, or import automatically via RSS feed, Twitter account, or Google News keywords.     Each item has artwork, title, date & time, and HTML story content. FAN Wall:     Import your past and upcoming events from Artistdata, Bandsintown, Songkick, Plancast, Ticketmob, SonicLiving, Eventbrite, or ad...
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

Start developing a ionic mobile app with Appery.io Cloud Platform

Image
In my previous post, I described some details of the Appery.io platform for developing hybrid and web apps. In this post, I show details of creating a mobile app and viewing it on iPhone 6S. The details are also available on the Appery.io site but here in you will get to see the step by step screen shots. If you have followed my posts on Intel XDK ( http://hodentekmobile.blogspot.com/search?q=intel+xdk ) , you will have no trouble in following this post. With Intel XDK not supporting some of the editing features Appery.io editor seems to fill in the void. I will explore it a little further to see how far this is taken. First come first. You need to first sign up here: https://appery.io/account/signup Go to your email and confirm your account. Once you have the account you can build. Go here to get to the developer platform: https://appery.io/app/projects Click on Apps. I have found the server to be very slow and you may have to wait a considerable time. You may...
Read more