Intel HTML5 Development Environment

Tutorial Creating an App Using App Starter

V1.01 : 07.11.2013

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Legal Information
INFORMATION IN THIS DOCUMENT IS PROVIDED IN CONNECTION WITH INTEL PRODUCTS. NO LICENSE, EXPRESS OR IMPLIED, BY ESTOPPEL OR OTHERWISE, TO ANY INTELLECTUAL PROPERTY RIGHTS IS GRANTED BY THIS DOCUMENT. EXCEPT AS PROVIDED IN INTEL'S TERMS AND CONDITIONS OF SALE FOR SUCH PRODUCTS, INTEL ASSUMES NO LIABILITY WHATSOEVER AND INTEL DISCLAIMS ANY EXPRESS OR IMPLIED WARRANTY, RELATING TO SALE AND/OR USE OF INTEL PRODUCTS INCLUDING LIABILITY OR WARRANTIES RELATING TO FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR INFRINGEMENT OF ANY PATENT, COPYRIGHT OR OTHER INTELLECTUAL PROPERTY RIGHT. A "Mission Critical Application" is any application in which failure of the Intel Product could result, directly or indirectly, in personal injury or death. SHOULD YOU PURCHASE OR USE INTEL'S PRODUCTS FOR ANY SUCH MISSION CRITICAL APPLICATION, YOU SHALL INDEMNIFY AND HOLD INTEL AND ITS SUBSIDIARIES, SUBCONTRACTORS AND AFFILIATES, AND THE DIRECTORS, OFFICERS, AND EMPLOYEES OF EACH, HARMLESS AGAINST ALL CLAIMS COSTS, DAMAGES, AND EXPENSES AND REASONABLE ATTORNEYS' FEES ARISING OUT OF, DIRECTLY OR INDIRECTLY, ANY CLAIM OF PRODUCT LIABILITY, PERSONAL INJURY, OR DEATH ARISING IN ANY WAY OUT OF SUCH MISSION CRITICAL APPLICATION, WHETHER OR NOT INTEL OR ITS SUBCONTRACTOR WAS NEGLIGENT IN THE DESIGN, MANUFACTURE, OR WARNING OF THE INTEL PRODUCT OR ANY OF ITS PARTS. Intel may make changes to specifications and product descriptions at any time, without notice. Designers must not rely on the absence or characteristics of any features or instructions marked "reserved" or "undefined". Intel reserves these for future definition and shall have no responsibility whatsoever for conflicts or incompatibilities arising from future changes to them. The information here is subject to change without notice. Do not finalize a design with this information. The products described in this document may contain design defects or errors known as errata which may cause the product to deviate from published specifications. Current characterized errata are available on request. Contact your local Intel sales office or your distributor to obtain the latest specifications and before placing your product order. Copies of documents which have an order number and are referenced in this document, or other Intel literature, may be obtained by calling 1-800-5484725, or go to: http://www.intel.com/design/literature.htm Intel and the Intel logo are trademarks of Intel Corporation in the U.S. and/or other countries. *Other names and brands may be claimed as the property of others. Microsoft, Windows, and the Windows logo are trademarks, or registered trademarks of Microsoft Corporation in the United States and/or other countries. Copyright 2013, Intel Corporation. All rights reserved.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Purpose
This document will show you, the developer, how to create a starter app using Intels App Starter. App Starter is a simple to use UI builder that provides drag-n-drop functionality for building out the UI for an App Framework project. This project may then be loaded into the Intel XDK for further development, testing and building.

Getting Started
To start using App Starter, visit the App Dev Center to either login to an existing Intel HTML5 Development Environment account or create a new one. You can access the App Dev Center at: http://appcenter.html5tools-software.intel.com

Login or Create an App Dev Center Account

If you already have an account, enter your username and password then select the Submit button to login. If you have not previously created an account, you can create one the first time you visit the App Dev Center by selecting the Click Here link just under the Please Sign into App Dev Center heading.

If you are signing up for the first time, provide the requested information and then press Submit to create your account.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Once your account is created, you will be taken to the Control Center panel of the App Dev Center. This panel is the central location for you to control the development and building of your applications. If you already have applications created within your account, the first application will be opened. All other applications will be shown in a non-expanded state. To work with a particular application, expand it with the down arrow to the right of the app name or by clicking on the app name itself. This action will cause the selected app area to expand and collapse the previously expanded app.

Using App Starter

To start creation of a new app using App Starter, follow the guidelines shown below. You can enter the new application creation wizard via App Dev Center or the Intel XDK.

Create a new App

Access to App Starter is gained through the New App Wizard. You can access the New App Wizard while on the Control Center tab within App Dev Center by clicking on the Start A New App button located at the top of your app list. Or, you may also access it by clicking the New Application button ( ) in the upper left hand side of the Intel XDK. Either method will take you to the new application creation wizard.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Give your new project a name, select the first option which is Use the App Starter Wizard, and click Next. Note: Also available through this creation wizard are options to create Ejecta* based games using App Game Interfaces (uses the Game Dev Mode of the Intel XDK), sample HTML5 demo apps, or you can start with your own bundle. You are now on the App Starter Launcher page. Click on the Launch App Starter button to access the App Starter tool.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Using App Starter

When you enter the App Starter tool, you are provided with an empty project that contains an element definition area on the left, and an work area screen in the middle.

The rest of this document will provide you with a description of each item available within the tool and its purpose. Help about the use of the tool is also always available by clicking on the Help icon in the upper right corner of the tool which provides an overview walkthrough of the tool capabilities.

Changing Themes
You can change the look of the emulation at any time by choosing the desired theme from the CSS Theme dropdown menu. This capability is provided both while designing your app, and in the Preview mode, which will be discussed later.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Preview, Save, Toggle Rotation

During design of your app, you have the ability to preview you work, toggle the rotation of your app to see how it looks in either portrait or landscape mode, and save your application to do further development/test/emulation using the Intel XDK.

Preview (aka Test Mode) Use the Preview icon to simulate the functionality of your app as you design it. When you select this icon, you will be shown the Test Mode screen.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

While in the Test Mode, your app should work as it would on the actual device. You can test in either Tablet or Phone mode, portrait or landscape mode, or change the CSS Theme to represent the look on different devices. Navigating through the app via the buttons, lists, footers, and side nav that you have designed shows you how the app will function on device. This allows you to verify it is working as you intend. When you exit Test Mode, you will be returned to App Starter to make updates or add more functionality.

Save Use the Save icon to create and save your application in the cloud. Selecting this icon will take you to the final project set up screen.

Click Next to return to either the App Dev Center or the Intel XDK. If you accessed App Starter from the App Dev Center, you will be returned to the Control Center with the new project added to your app list and expanded as the current app. If you started from within the Intel XDK, this will load your project into the Intel XDK as the active project.

Toggle Rotation Use the Toggle Rotation icon to rotate the emulation device to either portrait or landscape view. This icon is available in both the design and Preview modes.

UI Definition
In the upper left area of the App Starter Tool you will find tabs that are used to define your UI.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Here you can: Add, modify, delete pages Add, modify, delete elements from the pages you define Set up navigation; Headers, Footers, and Side Nav Follow the tree as you define and design your pages

Pages The Pages tab allows you to manage pages for your app. You can add new pages, modify existing pages, or delete pages. Elements The Elements panel allows you to add widgets to the application by dragging an element onto the current page. You have access to Layouts, Forms, and Media elements.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Nav The Nav tab allows you to manage headers, footers, and side navs for the application. To access each type of nav, you simply click on the Headers, Footers, or Side Nav titles. Tree The Trees tab shows you the current elements on the page, and how they relate to each other. When you click on the element within the tree, it will launch the edit mode panel for that element.

Editing Pages and Elements

When a page or navigational item such as a header is clicked on in the UI definition panel or an element in the work area is clicked on, the editing panel for that item becomes available along the right hand side of the tool.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

The editing panel consists of two panels; properties and styles. In the Properties panel, you can customize the properties of the current widget. You can edit items such as titles of pages and buttons, modify the reference link, set a target and define transitions. After editing the item you delete the item completely, reset your edit to the state they were in prior to selecting the item, or apply the changes you made. The Styles panel allows you to customize the raw CSS of the item. If you are not familiar with editing CSS you may not want to utilize this capability.

Tutorial Creating an App Using App Starter

v. 1.01 : 07.11.2013

Import a Saved App Framework File

If you have previously created and saved a project using either App Framework 2.0, or App Starter as described in this document, you can import a HTML file back into App Starter and continue to design or edit your UI. To access App Starter for re-editing use the following URL: http://appstarter.app-framework-software.intel.com or choose the App Starter UI Prototyper button at the top of the App Framework site: http://app-framework-software.intel.com/ as this feature is not currently available via the New App Wizard in the Intel XDK or App Dev Center. You will be asked if you wish to create a new project, or import a HTML file from a previously saved project.

Select Import a HTML file option to browse to the HTML file (usually index.html) of your saved project. If you attempt to load a HTML file from a project that was not created using App Framework 2.0, the following error message will be presented.

Tutorial Creating an App Using App Starter Notes regarding re-edit mode:

v. 1.01 : 07.11.2013

If you are loading an App Framework 2.0 file that was created outside of App Starter, be aware that all elements may not work as expected in the App Starter editor. You will be able to add new content to the page. If you had custom CSS as part of your project, it will not be visible in this mode, Preview does not execute JavaScript* because App Starter does not have full access to all of the project source code in this mode.

Saving the Updated File

When you have completed your edits, select the Save icon . This will download the updated version of the HTML file with only the contents of the afui div changed. Replace your current/old version with the newly downloaded version to see your modifications.

Further Assistance
If you are having trouble using App Starter and would like assistance, please post to our forums at: http://forums.html5dev-software.intel.com/