This tutorial covers a core set of Intel XDK features to help you learn the app development workflow.; Author: Android on Intel; Updated: 14 Jan. In this Article we will discuss about Cross Platform Development using Intel XDK. Cross platform development stands for write a single. Building Mobile Apps Using IntelĀ® XDK. iOS, Android and Windows Phone Development. (17). students. Created by QScutter Tutorials. Last updated 6/.

Author: Bakasa Goltigis
Country: Vietnam
Language: English (Spanish)
Genre: Software
Published (Last): 24 May 2009
Pages: 83
PDF File Size: 11.80 Mb
ePub File Size: 20.46 Mb
ISBN: 283-1-88264-387-7
Downloads: 79354
Price: Free* [*Free Regsitration Required]
Uploader: Gorr

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.

The App Designer also supports all these frameworks. App Starter only supports App Framework. App Framework is a simple font-end framework for building hybrid mobile applications. On iOS devices it gives the app an native iOS look and feel, whilst on Android it looks likes xxk 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.

Intel XDK Documentation – Getting Started Tutorial

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

Create another folder called images where we will put some images later. Inetl 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 app.

Intel XDK Documentation – Getting Started Tutorial – CodeProject

The first Xdm 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. 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 tutorialz specify the header, the footer and all the pages of the application.

Coding your first cross platform app with Intel XDK

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. You get less code to maintain and its cleaner.

Inside it you add panels for each page you want to display, for example:. 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 tutoriald to navigate between panels. The selected property sets if this is the main tab to be displayed, only one intwl have this attribute.


Inside the footer you can add tabs with text and icons. Usually these are tags and the tutorialz attribute specifies the id of the panel you want to navigate to when clicking this tab. Inside the class you can specify what icon you want for this tab. In this example the first tab has an home icon and inyel second a photo icon.

We added a second link to tutorjals footer but no panel exists for that link. Add another panel inside content section. Everything works as expected except the back button. Lets add a new header without the back button. 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. 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 xdi button is shown.

In this second installment we created a new project, looked at which frameworks XDK supports and used the App Framework. Coding your first cross platform app with Intel XDK.

Tutoriala is young developer who loves to play with the newest web technologies. Currently, his main interests are PHP design patterns, laravel, dart and cloud. AppOptics Gain visibility into your applications and infrastructure. Catch performance issues before your customers do.

Start Your Free Trial Now.