Previewing web resource changes on an emulator or mobile device
During development, we can build and deploy a hybrid application to an emulator or to an actual native device to test its function.
If the web resources are still being changed frequently, some additional setup to the deployed test application can speed up the preview process between revisions. With the modified configuration, the native app can update itself to use the latest web artifacts in your MobileFirst Studio workspace without the need to rebuild and redeploy the application after each change.
To enable the faster preview and refresh cycle, replace the name of the application's main page with the full URL of the application running on the preview server. To find the correct preview URL:
- Under the hybrid application's root folder in the MobileFirst Studio workspace, find the environment folder to test on a native device. For example: Android or iPad.
- Right-click the folder and select Run As > Preview to open the Mobile Browser Simulator with the page. This action starts the MobileFirst Development Server if necessary.
- When the page opens in the Mobile Browser Simulator, find and click the
icon in the toolbar above the preview page: A new page opens in the browser that points directly to the specific environment's preview page.
- Copy the URL of the preview page. http://[servername]:10080/[project
name]/apps/services/preview/[app name]/[environment]/1.0/default/index.html
- Paste this URL into the relevant configuration file within the native application resources.
- Select the application's folder in the navigator and perform Run As > Build Only (All Environments). The native resources are built from the current project source. This action
overwrites the configuration files that you changed in the previous process. We can continue to develop and preview the web resources in the hybrid application without doing any rebuilds. Then we can run the build action again after application development is complete
to generate the final native applications. If it is necessary to rebuild frequently, optionally re-execute the previous steps to restore
the faster preview function.
- Underneath the environment folder to test natively, find the native folder. The configuration file is located under this folder.
- For Android environments, edit /native/assets/wlclient.properties.
- For iPhone and iPad environments, edit /native/worklight.plist.
- For Android environments, edit /native/assets/wlclient.properties.
- Find the value of the wlMainFilePath or wlMainFile configuration parameter (whichever is present). The default page name is index.html.
- Replace the page name with the full URL that you previously copied from the Mobile Browser Simulator page.
- Select the application's folder in the navigator and perform Run As > Build Only (All Environments). The native resources are built from the current project source. This action
overwrites the configuration files that you changed in the previous process. We can continue to develop and preview the web resources in the hybrid application without doing any rebuilds. Then we can run the build action again after application development is complete
to generate the final native applications. If it is necessary to rebuild frequently, optionally re-execute the previous steps to restore
the faster preview function.
- Select Yes to commit the changes and save the file.
- Start the application on the native emulator or mobile device using the normal process for the environment that you are previewing.
What to do next
As you continue to develop the web resources, we can update the native application in one of two ways:
- If the device or emulator supports accelerometer events, shake
the device vigorously for a short time until a prompt dialog box opens.
Click Refresh in the dialog to update to the latest web resources.
- For scenarios where shake-detection is unavailable, simply close
the application and restart it within the emulator or native device.
When the application restarts, it retrieves the latest web resources from the MobileFirst Development Server.
- The shake preview feature is for web resource preview and does not use the native device features.
- The MobileFirst Development Server must be running for the application to function correctly under this modified configuration. An error message indicates whether the application cannot connect to the preview server.
- The shake preview feature is for web resource preview and does not use the native device features.
Parent topic: Develop user interface of hybrid applications