Previewing your application's web resources

improve this page | report issue

Overview

In this tutorial the following topics are covered.

  • Adding an environment to the MobileFirst project
  • Reviewing the environment's folder structure
  • Previewing the environment's web resources

In the next tutorials, you learn how to preview the application in the specific mobile environment.

Adding an environment

To add an environment, click the MobileFirst icon in the menubar and select MobileFirst Environment.
missing_alt

Next, select the application that you would like to add an environment to, and select the environment(s).
After clicking Finish, a new folder with the environment's name is added to the project structure.

missing_alt

A mobile environment's folder structure

missing_alt The screen shot to the right depicts the iPhone environment, but the explanation below is relevant to any mobile environment (iPhone, iPad, Android, BlackBerry, Windows Phone 8, Windows 8).

The mobile environment includes the following folders:
CSS – The properties that are specified in this folder override the CSS files from the common folder.

Images – environment-specific images can be added in this folder. If images with the same file name exist in the common folder, they are overwritten in the application.

JavaScript – Contains JavaScript that can extend, and override if required, JavaScript from the common folder.

The native folder contains automatically generated native project code.
Files in the native\www folder are regenerated each time when the application is built. Any changes that are made to these files are lost.

The nativeResources folder contains resources that are used by the native code.

Previewing the environment's web resources

Once the application is built and deployed in MobileFirst Studio, it can be previewed in the Mobile Browser Simulator (MBS).
Right-click the project and select Open MobileFirst Console, or browse to the MobileFirst Console (typically the URL is http://localhost:10080/worklightconsole) and click "Preview as common web resources" to view the common web resources.

To preview the environment's web resources, click the "eye" icon that is next to the environment's name.

missing_alt

The Mobile Browser Simulator can be used to emulate Cordova or preview your application with different device skins.
Limitation about Mobile Browser Simulator: To preview an application that contains security tests that rely on the device (such as auto-provisioning or authenticity), you must temporarily change the security tests so that they do not use the device identification.

missing_alt
Last modified on December 02, 2015