Create a New Mobile App Directory Structure Using Sencha CMD

Sencha apps create a number of configuration files and a specific file structure. The Sencha CMD tools provide a method to generate an application that produces the required application structure. After using the Sencha tool to generate the directory structure, you add the new app to the App Launcher. See Adding a New App to the App Launcher.

Example :

Generate a skeleton application.

From the ../schema/ab-products/common/mobile/src folder, use the sencha generate app command:

$ cd c:\users\public\archibus\schema\ab-products\common\mobile\src
$ sencha -cwd c:\touch-2.4.2\src generate app MyApp MyApp
Sencha Cmd v5.1.n
[INF]...

The sencha generate app command creates the application files using the Sencha Touch templates. The -cwd switch indicates the location of the Sencha Touch SDK files. The app is created in the ..schema/ab-products/common/mobile/src/MyApp directory. Navigate to http://localhost:8080/archibus/schema/ab-products/common/mobile/src/MyApp/index.html in the Chrome browser to launch the app.

The app.js file contains the launch function, which is the main entry point to the app. By default the launch function creates an instance of the MyApp.view.Main view defined in app/view/Main.js and adds it to the Viewport so that the content of the Main view is visible. Edit Main.js to change the contents of the Main view.

Configure the App Build Properties

There are several build properties that are required for the new app to be compatible with the Archibus Mobile framework. The app configuration files are located in the [AppFolder]\.sencha\app folder.

Set the properties in the following files:

Configuration File Property
production.defaults.properties build.options.logger=yes
production.properties build.microloader.json.tpl.external=;
production.properties app.microloader.dir=${workspace.dir}/touch/microloader

Modify the app Build File

The app build file is the build.xml file located in the app root folder.

  1. Copy the contents of a build.xml file from an existing Archibus app
  2. Update the new app build.xml file with the contents of the copied file
  3. Update the project name property in the build.xml file to match the app name of the new app.

Modify the index.html File

The index.html file generated using the Sencha Touch template requires changes to work in the Archibus Mobile environment.

Perform the following steps to update the index.html file

  1. Replace the contents of the index.html file with the contents of an index.html file from an existing Archibus application
  2. Locate the app id property in the app.json file. The id property is a unique string created by Sencha CMD.
  3. Update the id in the index.html file. The app id is passed as a parameter in the start script function.

Modify the app.js File

Perform the following steps to update the app.js file

  1. Replace the contents of the app.js file with the contents of an app.js file from an existing Archibus application
  2. Set the app path in the Ext.Loader.setPath function to the name of your app folder.
  3. Set the name property to the name of your app.
  4. Remove items from the requires, controllers, models, views and stores properties

Configure SASS Settings

Update the SASS configuration for the new app. See Configuring SASS in a New Mobile App.