Coding your first cross platform app with Intel XDK

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:

A prototype of the app

Create a 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:

<!DOCTYPE html>
    <html>

        <head>

            <!-- Meta data -->
            <meta http-equiv="Content-type" content="text/html; charset=utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
            <meta name="apple-mobile-web-app-capable" content="yes">
            <meta http-equiv="Pragma" content="no-cache">

            <script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
            <script type="text/javascript" language="javascript">
                var isIntel=window.intel&amp;&amp;window.intel.xdk

                // This event handler is fired once the intel libraries are ready
                function onDeviceReady() {
                    //hide splash screen now that our app is ready to run
                    intel.xdk.device.hideSplashScreen();
                    setTimeout(function () {
                        $.ui.launch();
                    }, 50);
                }

                //initial event handler to detect when intel is ready to roll
                document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);

            </script>

            <script src="js/appframework.ui.min.js"></script>

            <script>
                if(isIntel)
                    $.ui.autoLaunch = false;
                    $.ui.useOSThemes = true; //Change this to false to force a device theme
                    $.ui.blockPageScroll();
                    $(document).ready(function () {
                        if ($.ui.useOSThemes &amp;&amp; (!$.os.ios||$.os.ios7))
                            $("#afui").removeClass("ios");
                    });
            </script>

            <!-- Import the css files -->
            <link href="css/icons.css" rel="stylesheet" type="text/css">
            <link href="css/af.ui.css" rel="stylesheet" type="text/css">
            <link href="css/style.css" rel="stylesheet" type="text/css">

        </head>

        <body>

            <div id="afui">


            </div>

            <script src="js/data.js"></script>
            <script src="js/app.js"></script>
        </body>

    </html>

In this example I also added app.js and 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 Javascript block hides the splash screen when the device is ready (if you specify one on the build section).

In the second Javascript block you can configure whether you want to use the native platform look that this device is running or force the application to use iOS7 for every device it runs on.

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.

Screenshot of the app

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 myphotos_pg panel.

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.

Two tabs running in our app

Conclusion

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.