Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
02/05/2018

Exercise 2-3: Using Sencha Architect to Initialize the App

Page of 168
Defining a Custom App Icon

Overview

During this lab, you will use Sencha Architect to develop the structure and code necessary to start laying out the Friends with Beer application.

  • Define the main navigation for your App
  • Link to a custom icon and startup screen
  • Define a Launch handler
  • Output a MessageBox

Steps

Use Sencha Architect to Create the Project

  1. Launch Sencha Architect
  2. Under the Create New Project heading, click on Sencha Touch 2.1.x
  3. Click the Save button and enter the following information:
    • Save Path: /path/to/Arch101/mobile/lab/
    • Project Name: exercise3
  4. Click the Save button
  5. Click the Settings button.
  6. Scroll to the bottom of the Application tab and configure the Sencha Cmd v3 path to point to your installation of the Sencha Cmd V3 install.
  7. Click on the Project tab and enter the following:
    • URL prefix:
      http://localhost/arch101/mobile/lab/exercise3_deploy
    • Deploy Path:
      {path to web root}/arch101/mobile/lab/exercise3_deploy
  8. Click Save.

Configure the App Settings

  1. In the Project Inspector, click the Application object.
  2. In the Config Panel, click on the Show all (advanced) configs button.
  3. Modify the following properties:
    • name: FriendsWithBeer
    • requires: Ext.MessageBox
Set the Library Path
  1. In the Project Inspector, click on Resources > Library
  2. Set the following properties:
    • Debug: checked
    • Include CSS: checked
    • Include JavaScript: checked
    • Library Base Path: ../../../../touch2/
Create a Launch function and test the app
  1. In the Project Inspector, click on Application.
  2. Click on the [+] button adjacent to the launch config
  3. In the Project Inspector, double-click on launch
  4. Type the following into the code editor:
Ext.Msg.alert('Application Launch','Success!');
  1. Click the Publish button
  2. Click the Preview button
  3. Click the green Preview button. The application should launch in the browser and you should see a message box appear.
Define the Application Icons and Startup Screens
  1. Return to Sencha Architect.
  2. In the Project Inspector, click on Application
  3. In the Config panel, click on the edit button adjacent to the icon property.
  4. In the code editor, type the following object to define icons for the different screen resolutions of iOS devices:
{
 57: 'resources/icons/Icon.png',
 72: 'resources/icons/Icon~ipad.png',
 114: 'resources/icons/Icon@2x.png',
 144: 'resources/icons/Icon~ipad@2x.png'
}
  1. In the Config panel, click on the edit button adjacent to the startupImage property.
  2. In the code editor, type the following object to define startup images for the different screen resolutions of iOS devices:
{
 '320x460': 'resources/startup/320x460.jpg',
 '640x920': 'resources/startup/640x920.png',
 '640x1096': 'resources/startup/640x1096.png',
 '768x1004': 'resources/startup/768x1004.png',
 '748x1024': 'resources/startup/748x1024.png',
 '1536x2008': 'resources/startup/1536x2008.png',
 '1496x2048': 'resources/startup/1496x2048.png'
}
  1. Using your file system tools, copy the contents of the /path/to/arch101/mobile/artwork folder to the /path/to/arch101/mobile/lab/exercise3/resources folder.
  2. Return to Sencha Architect
  3. Click the Save button
  4. Click the Publish button
  5. Click the Preview button

Test in the iPhone Simulator (OS/X Users Only)
  1. Open Xcode
  2. Select Xcode > Open Developer Tool > iOS Simulator
  3. Drag the URL from Google Chrome's address bar and drop it onto the iOS simulator. Mobile Safari should launch and open your app.
  4. The show advanced configs buttonClick on the simulator browser's share button and select Add to Home Screen.
  5. Click the Add button.
  6. Click on the homescreen icon for your app. The app should launch in a chromeless browser.
Page of 168
comments powered by Disqus