Architect 2 Sencha Docs

Publishing, Packaging, and Simulating a Project

Sencha Architect uses Sencha Cmd to package and simulate Sencha Touch and Ext JS applications. The Packaging interface leads you through installing Sencha Cmd, Xcode, and Sencha Touch. For more information, see the Sencha Cmd Guide.

Important Sencha Cmd requires:

  • Java Runtime Environment
  • Ruby 1.9.3 or earlier on your computer. Sencha Cmd does not work with Ruby 2.0.
    • Windows: Download and install the Ruby 1.9.3.n .exe file from rubyinstaller.org.
    • Mac OS: Ruby is pre-installed. You can test which version you have with the ruby -v command. If you have version 2.0, download the Ruby version manager (rvm) and use this command to download and install Ruby: rvm install 1.9.3 --with-gcc=clang and set your PATH variable to point to the Ruby 1.9.3 install directory. If you have more than one Ruby version on your Mac, use the rvm use 1.9.3 command to set the default version.
    • Ubuntu: Use sudo apt-get install ruby1.9.3 to download Ruby 1.9.3.

Sencha Cmd provides these features in Architect:

  • sencha app generate -- Initializes your Architect project to work with Sencha Cmd
  • sencha app package build -- Packages your app for iOS or Android
  • sencha app package run -- Packages and runs your app in the iOS Simulator or the Android Emulator

Use this guide to:

  • Publish a project - Copies your completed Ext JS or Sencha Touch project files to your web server so that others on your team can view your project.
  • Create a certificate - Describes use of the keytool command for creating a certificate for an Android app. Also provides information on obtaining an iOS development certificate.
  • Package an app - Lets you download software for packaging and view your project's packager.json parameter file.
  • Simulate an app - Lets you view a software representation of how your app appears on a mobile device. Simulating or emulating uses non-Architect software that you either purchase in the case of developing an app for iOS, or obtain for free for Android.
  • Build your project - Lets you build your application.
  • Install an app on an Android device - Lets you create a certificate for an Android app and establish communications between your computer and an Android device.

Important Save your project to enable the Publish and Package buttons. Do not save your project in your web server's directory from where you intend to serve your project.

Publishing a Project

Publishing means copying your project files to a web server folder so that others can view your project. If you don't have a web server, you can use the Sencha Cmd built-in web server.

Start the Sencha Cmd web server to serve the applications directory (dir_name):

sencha fs web start -map <dir_name>

You can also use -port for a port number--the default is port 1841.

Access the Sencha Cmd web server with:

http://localhost:1841/<dir_name>/<app_name>

To publish a project, on first use for a project, click the Settings button in the Architect task bar to set the path to your web server. Thereafter, click the Publish button to copy your project files to the web server directory:

Important If you are not using the Sencha Cmd web server, first create a directory for your project where the web server expects to serve content. Set write permission for the directory. In Mac and Ubuntu, use a Terminal to change the permissions for the directory using the chmod o+w directory_name command. In Windows, right-click the directory name, click Properties and uncheck the Read-only setting on the General tab.

In Architect, with the project open, click Settings -> Project, and click Browse for the Publish path field. For XAMPP, browse to XAMPP's htdocs directory and set the Publish path field to the location of the directory you created.

Click Publish in the Toolbar. Architect copies a deployable version of your application to the location you specified in the Publish path field.

Back to Top

Creating a Certificate

Before packaging your app, create a certificate. The information that follows applies to an Android app.

iOS requires signer identity for the certificate. For information on getting an iOS development certificate, see the MobiForge article, Deploying iPhone Apps to Real Devices.

  • Create a certificate for an Android app with the keytool command. Run this command from your /Users/your_login_directory - substitute the name of the keystore file and your alias.
  • After creating a certificate, edit the packager.json file and set the certificatePath parameter to point to the certificate file's location, and set the androidAPILevel parameter to an API level that you previously installed using the Android SDK Manager.

Note Store the password and company name according to your site's security policy.

The following example creates the my-release-key.keystore file for user "Polly Hedra" that contains a 2048-bit RSA key pair and a self-signed certificate, both of which are viable for 10,000 days:

$ keytool -genkey -v -keystore my-release-key.keystore -alias phedra -keyalg RSA -keysize 2048 -validity 10000
Enter keystore password: 
What is your first and last name?
  [Unknown]:  Polly Hedra
What is the name of your organizational unit?
  [Unknown]:  App Development
What is the name of your organization?
  [Unknown]:  MyCompany
What is the name of your City or Locality?
  [Unknown]:  Silicon City
What is the name of your State or Province?
  [Unknown]:  California
What is the two-letter country code for this unit?
  [Unknown]:  US
Is CN=MyPassword, OU=App Development, O=MyCompany, L=Silicon City, ST=California, C=US correct?
  [no]:  yes

Generating 2,048 bit RSA key pair and self-signed certificate (SHA1withRSA) with a validity of 10,000 days
    for: CN=MyPassword, OU=App Development, O=MyCompany, L=Silicon City, ST=California, C=US
Enter key password for 
    (RETURN if same as keystore password):  
[Storing my-release-key.keystore]
$

Back to Top

Packaging and Simulating a Sencha Touch Project

Packaging lets you install required software, simulate, and build your application. The Package button calls the Sencha Cmd Setup interface to prompt you through each step.

Notes

  • Packaging and simulating are not supported for Sencha Touch 2.0 projects. Upgrade your project to the current version of Sencha Touch to use these features.
  • You must save your Architect project to enable the Package button.
  • Packaging is not supported for use on Linux.
  • If you set up your project for Sencha Cmd, it creates an index.html file. If a blue screen displays with 3 dots, this is because you're running the default index.html. Remove the index.html file from the project root and have Architect create a copy of your app.html, index.html (or do it yourself).
  • The Sencha Cmd Setup menu currently only supports iOS applications. You can package an Android app from the command line using the sencha app package build command. Before running the sencha app package build command, start the Android SDK Manager.

In Architect, click the Package button in the Architect task bar:

Packaging Steps:

  1. Use Install plug-ins to install Sencha Cmd and Xcode
  2. Set Up a Project with Sencha Cmd
  3. Use Package Settings to View packager.json
  4. Test Your Project with Simulate
  5. Build Your Project

Package Step 1: Use Install Plug-ins to Install Sencha Cmd and Xcode

  1. Click Install plug-ins to install Sencha Cmd and Xcode.
  2. If you have not previously installed Sencha Cmd, click Install plug-ins, Sencha Cmd, Download to Install. This button opens the Sencha Cmd download page. If you already installed Sencha Cmd, click Browse and select the path to the version directory. For example on a Mac, the default path is /Users/my_login/bin/Sencha/Cmd/cmd_version.
  3. Click Save to save the changes to your project. You can optionally, click Verify to open a new window and verify the Sencha Cmd options.
  4. Click Download to Install which opens Apple's Xcode web site. Either create or supply your Apple ID to download Xcode. You can use Xcode's iOS Simulator to simulate an iOS mobile device. Xcode is available for free with an Apple ID from Apple.

Package Step 2: (Optional) Set Up a Project with Sencha Cmd

  1. Click the Setup project with Cmd tab.
  2. If you have not installed Sencha Touch, click Download Touch to download Sencha Touch and extract it to a directory.
  3. If you previously downloaded Sencha Touch, click Browse to locate the Sencha Touch installation directory.
  4. After the path appears in the edit box, click Setup Project with Cmd to run a script to configure the build for your app. A Terminal opens and runs commands to prepare your project.

Package Step 3: Use Package Settings to View packager.json

Click Package Settings. The packager.json parameter file displays in the Sencha Architect Code window in read only mode. You can edit the file directly from your project's directory.

For example:

{
  /**
  * @cfg {String} applicationName
  * 
  * This is the name of your application, which is displayed on the device 
  * when the app is installed. On IOS, this should match
  * the name of your application in the Apple Provisioning Portal.
  */
  "applicationName": "LifeOfPieChart",
    
  /**
  * @cfg {String} applicationId
  * 
  * This is the name namespace for your application. On IOS, this should 
  * match the name of your application in the Apple Provisioning Portal.
  */
  "applicationId": "com.mycompany.myAppID",
...

Back to Top

Package Step 4: Test Your Project with Simulate

  • iOS Simulation
  • Android Emulation

iOS Simulation

To simulate an iOS app, download Xcode and the Xcode Simulator from Apple.

Exit the simulator before each simulate.

In Architect, if you are not already in the Sencha Cmd Setup menu, click the Package button in the task bar. If the Package button is gray, save your project, and then proceed:

If you have not done so, complete the steps in the Sencha Cmd Setup menu so that the the circle controls are green:

Click Simulate in the Sencha Cmd Setup menu to test your project:

You can simulate from the command line by changing directory to your application's root folder and typing:

sencha app package build packager.json
sencha app package run packager.json

Xcode Workspace

If you are working with an Xcode Workspace, use:

sencha app build -run native

Alternatively, you can create a temporary JSON file and run that:

sencha app build native
sencha app package run packager.temp.json

View the properties with the sencha diag show-props command.

Android Emulation

To emulate an Android app, browse to the Android SDK software.

Note If you are emulating an Android application, start the Android SDK Manager:

  • If you are using a Mac, use Finder to locate the Android installation folder where you unzipped the Android software distribution and double-click android-sdk-macosx, tools, android
  • If you are using Windows, click Start, All Programs, Android SDK Tools. Right-click SDK Manager and click Run as Administrator.
  • Create an Android virtual device (AVD) by clicking Tools, Manage AVDs.

Package Step 5: Build Your Project

If you are not already in the Sencha Cmd Setup menu, click the Package button in the Architect task bar (you have to first save your project before the Package button is active):

If you have not done so, complete the three steps in the Sencha Cmd Setup menu so that the the circle controls are green:

After all interface lights are green, click Build in the Sencha Cmd Setup menu to build your project. A new Terminal window opens and Sencha Cmd compiles your project. The following messages indicate that the build completed successfully:

Sencha Cmd v3.1.nnn

logout

[Process completed]

Back to Top

Installing an App on an Android Device

  1. Start the Android SDK Manager. In Windows, click Start, All Programs, Android SDK, right-click SDK Manager, and click Run as Administrator. In Mac and Ubuntu, change directory to where you unzipped the Android software distribution and to the tools directory, and enter the ./android command.
  2. Check Android SDK Platform-tools and uncheck other options. Click the Install Package button. In the next screen, click Android SDK Platform-tools, revision n.n.n and click Accept.
  3. For Windows, install the Google USB Driver from the Android SDK Manager to help install your app on your mobile device. Locate the usb_driver_r04-windows.zip file on the web for the device on which you are installing your app. This file contains Android drivers and contains a device ID for the mobile device. In Windows 8, disable driver signature enforcement to install Android drivers for Windows. Search the web for information on this step.
  4. You can make use of Android much easier if you add the paths to the tools and platform-tools directories to your PATH environment variable.
  5. To get the Android ADB command to communicate with your device, connect the device to your computer and type these commands at the command line:
android update adb
adb kill-server
adb start-server
adb devices  

Notes

  • The android command is in the tools directory and the adb command is in the platform-tools directory.
  • Mac and Linux users should use ./android update adb for the first command. First change directory to where you unzipped the Android software distribution and change directory to the tools directory.
  • If the adb devices command succeeds, it lists the serial number of the mobile device.

Back to Top