Create MobileFirst projects

You use MobileFirst Studio to create a project.

With MobileFirst Studio, you create a project as a place where you develop the apps. When creating a project, you create a first app in it. This first app can be of the following types:

• Hybrid application:

  Target multiple environments. Write primarily in HTML5, CSS, and JavaScript. Access device capabilities using the MobileFirst JavaScript API. Extend it with native code.

• Inner application:

  Contains the HTML, CSS, and JavaScript parts that run within a Shell component. Before deploying, package within a shell component to create a full hybrid application.

• Native application:

  Targets a specific environment. Use the MobileFirst API for integration, security, and application management.

• Shared Templates:

  A project based on existing templates created for sharing and reuse. Select those templates from the download folder.

• Shell component:

  Provides custom native capabilities and security features that an Inner application can use.

After creating a MobileFirst project, we can later add further apps to it.

To create a project and a first app in it:

1. In Eclipse Design perspective, click File > New > MobileFirst Project.

2. In the Name field, enter a name for the new project.

3. From the list of project templates, select the template that applies to the first application in the project:

   Option	Description
   Hybrid Application	Project with an initial hybrid application
   Inner Application	Project with an initial inner application and point to a built shell component
   Native Application	Project with an initial Native application
   Shared Templates	Project based on an existing template. See Create MobileFirst projects from MobileFirst project templates.
   Shell Component	Project with an initial shell component application

4. Click Next, and in the field Application name or Component name, set the name of the application or component.

5. Set the properties of the application, as described in the following sections:

   • Hybrid application:

     1. Optional: Add JavaScript libraries to the application, click Configure JavaScript Libraries, and select the check boxes that correspond to the layers that we need:

        Add jQuery Mobile	To add jQuery Mobile support to the application. Identify the directory where the required files for jQuery Mobile are located.
        Add Dojo Toolkit	Add the Dojo facet and Dojo support to the application. When we build an application, Dojo is included to create the native application, such as an iPhone or Android application.
        Add Sencha Touch	Deprecated. Add Sencha Touch support to the application. Identify the directory where required files for Sencha Touch are located.

        If we add jQuery Mobile to the application, and we use Windows Phone 8, ensure that the following conditions are met:

        • The $.mobile.allowCrossDomainPages option is set to true (in jQuery Mobile).

        • An absolute URL is used for file, for example...
          x-wmapp0:/www/default/app-pages/myPage.html

     2. Optional: Click Environments in the left pane, and select the environments to add to the new application.

        We can also add new environments later by clicking...

        File | New | MobileFirst Environment

   • Inner application:

     1. In the field Shell archive name, set the path of the Shell archive file. The path can be either absolute or relative, if a Shell archive exists within the project.

     2. Optional: To add JavaScript libraries to the application, click...
        Configure JavaScript Libraries

        ...and select check boxes corresponding to required layers: jQuery Mobile, Dojo Toolkit, Sencha Touch

   • Native API:

     • In the field Environment, select the environment that we need: Android, iOS, Java ME, or WindowsPhone8.

   • Shared Templates:

     • Select one of the templates available from the list.

   • Shell component:

     • Select the check boxes that correspond to the layers that we need: jQuery Mobile, Dojo Toolkit, Sencha Touch

6. Click Finish to close the wizard.

Parent topic: Artifacts produced during development cycle