In the first part of this series we looked at an overview of Intel XDK. In this second part we will look at the frameworks available that help us build an app and start building a simple photo sharing app with the App Framework.
The final code for the application we will be working on can be found here on GitHub.
Comparing the Frameworks
Intel XDK supports several different HTML5 frameworks: App Framework, Bootstrap, TopCoat and JQuery Mobile. The App Designer also supports all these frameworks. App Starter only supports App Framework. Both App Designer and App Starter are GUI building tools.
App Framework is a simple font-end framework for building hybrid mobile applications. It’s UI components are only used to build these kind of applications and it is adaptive to each mobile OS. On iOS devices it gives the app an native iOS look and feel, whilst on Android it looks likes a native Android app and so on for other platforms. App Framework is lightweight and is built to perform as fast as possible as a hybrid application.
JQuery mobile is an old school hybrid mobile app framework. It has existed for many years and it is one of the oldest frameworks. You can find many existing components in JQuery Mobile as well as a huge library of plugins. The main problem with this framework is the performance, it is slow on low end devices and doesn’t give a native look.
TopCoat is a lesser known framework. It is not a full framework but more a collection of UI components that you can use immediately with your app.
Bootstrap is the most well known of all frameworks available. It is a framework for building web sites and mobile responsive sites. I was a bit surprised when I first saw bootstrap on the list as it is not used much in hybrid mobile application development.
Finally, lets code!
Let’s start by creating a new project. You can do this by clicking on the ‘Start New Project’ button in the top left side of the application. Then select the ‘App Starter’ method as this starts with a ready to use App Framework project.
Here is the prototype of what we are creating:
style.css in the
css folder and an
app.js into the
js folder. Create another folder called
images where we will put some images later. As we are not making or working with any REST APIs we’ll fake it by working locally. With some minor changes you can edit this project to use any external REST APIs.
What I generally do first is to clean up the unnecessary code that Intel has generated for you. After cleaning the unnecessary code we get something like this:
In this example I also added
style.css. Let’s take a quick look and analyze the code. In the header there is some meta data that you don’t have to edit or change.
The first to know is the div with
id="afui". You have to specify an element with this id. This is like the root of our application. Everything will start from this element. Inside that element we specify the header, the footer and all the pages of the application.
<div id="afui"> <div id="header" class="header"></div> </div>
The div with
id="header" is the element that works with the header. App Framework will perform a lot of auto generation inside the div, but you can add other content if you wish. For example you can manually add a back button and specify a title. My advice is leave as much up to the auto generation as you can, don’t do things manually when the framework does it itself. You get less code to maintain and its cleaner.
All the pages for your app live inside the
id="content" element. Inside it you add panels for each page you want to display, for example:
<div id="content"> <div class="panel" title="Photos" id="main_pg" selected="selected"> <!-- All the content goes here --> </div> <!-- You can add other panels here --> </div>
When creating a panel you should add some attributes. For example the
title attribute is displayed in the page header and the
id attribute is used to navigate between panels. The
selected property sets if this is the main tab to be displayed, only one may have this attribute.
The last thing to do is add the footer.
<div id="afui"> <div id="header" class="header"></div> <div id="content"> ..... </div> <!-- the footer --> <div id="navbar" class="footer"> <a href="#main_pg" class="icon home">Home</a> <a href="#myphotos_pg" class="icon picture">My Photos</a> </div> </div>
Inside the footer you can add tabs with text and icons. Usually these are
tags and the
href attribute specifies the id of the panel you want to navigate to when clicking this tab. In this case it is
#main_pg. Inside the class you can specify what icon you want for this tab. In this example the first tab has an home icon and the second a photo icon. Unfortunately I couldn’t find any documentation on the full list of icons. Open
icons.css in the
css folder if you want to know what you can use.
We added a second link to the footer but no panel exists for that link. Add another panel inside content section.
<div id="content"> <div class="panel" title="Photos" id="main_pg" selected="selected"> <!-- All the content goes here --> </div> <div class="panel" title="My Photos" id="myphotos_pg"> <span>My Photos</span> </div> </div>
Test it in the emulator.
Everything works as expected except the back button. The two tabs are both visible so the back button shouldn’t be there as it’s inconsistent with native app user experience.
<div id="afui"> <div id="header" class="header"></div> <header id="myphotos_header"> <h1 id="pageTitle">My Photos</h1> </header> ...... </div>
Lets add a new header without the back button. We will use this header only for the
Add a reference to the header in the panel by using
data-header="myphotos_header". The value of the
data-header attribute is the id of the header used. As the title is being used from that header there is no point having a title attribute on that panel. The
myphotos_pg panel should look something like this:
<div class="panel" data-header="myphotos_header" id="myphotos_pg"> <span>My Photos</span> </div>
Test it in the emulator and you will see that now everything works properly. Toggle from the Home tab to the Photos tab and you will see that no back button is shown.
In this second installment we created a new project, looked at which frameworks XDK supports and used the App Framework. To be clear, when I say “XDK supports this framework”, I mean that App Starter/Designer supports the framework. You can choose Ionic for example, In one of my projects I used the Ionic framework and everything worked the same, but I couldn’t use any GUI tools. I highly recommend coding from scratch as the code isn’t as maintainable when using the HTML GUI building tools.
Stay tuned for part 3.