Develop Share Showcase your idea and prepare for your product launch. Community Bring it to market We offer individual options for series engineering and mass production to bring your product to life. Contact us XDK. Subscribe to our newsletter to receive updates on new services, features and developer events. You are leaving our website.
|Published (Last):||27 November 2004|
|PDF File Size:||3.10 Mb|
|ePub File Size:||4.86 Mb|
|Price:||Free* [*Free Regsitration Required]|
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 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. 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 a style. Create another folder called images where we will put some images later. 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:.
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. 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 used to navigate between panels. The selected property sets if this is the main tab to be displayed, only one may have this attribute.
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. 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.
Open icons. We added a second link to the 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 back button is shown. In this second installment we created a new project, looked at which frameworks XDK supports and used the App Framework.
Intel® XDK - Discontinued
The browser version you are using is not recommended for this site. Please consider upgrading to the latest version of your browser by clicking one of the following links. In addition, Intel offers a portfolio of tools to help IoT developers go from rapid prototyping to production. The Hydration test container is based directly on your application and the Cordova plugins that make up your app project; unlike the generic App Preview container, which consisted of a fixed set of plugins and was built on a fixed Cordova version. Hydration uses your application and project plugins as the container, from which you can then quickly test incremental changes to your app's HTML5 code. This is a much more accurate debugging platform than that provided by the App Preview debug container. See the official PhoneGap getting started pages for additional help.
Subscribe to RSS
OneSignal is a free push notification service for mobile apps. This plugin makes it easy to integrate your Cordova based e. See the Documentation for installation and setup instructions:. See this repository's release tags for a complete change log of every released version. Please visit this repository's Github issue tracker for feature requests and bug reports related specificly to the SDK.