1. #1
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,939
    Vote Rating
    64
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      1  

    Post Architect + Sencha Cmd

    Architect + Sencha Cmd


    UPDATED: 9/17/13 - new
    Adding a note about using charts w/ packaged or simulated build

    UPDATED: 4/17/13
    Info added about removing extra app.js file that cmd creates for ext js projects
    Info added about using 'app build native' for packaging apps
    Styling for readability

    UPDATED: 3/1/13
    more info added

    Note: The goal of this sticky is to provide a list of steps for users to follow as a stopgap until the Cmd and Architect team can resolve them. The expectation is that the 'Configure Cmd to work with your Architect project' section should eventually disappear.

    ----
    All your hard work is paying off and your app is ready for production or to be put on it's first device. Great! You're ready to use Sencha Cmd utility to build and/or package your app for distribution. In this sticky, I explain the steps required to do this for Architect 2.1 projects:
    1. Download the appropriate SDK and Sencha Cmd software
    2. Initialize Cmd for your Architect applications
    3. Configure Cmd to work with your Architect Project
    4. Build your application
    5. Package your app for production (Touch only)
    If you're building a Touch 2.1 project, Architect 2.1 includes a wizard that guides you through step 1 and 2; see here for more information. Step 3 (Configure Cmd...) must still be done as described below.

    Download the SDK and Sencha Cmd software


    Architect projects by default reference their SDK from the cloud. Cmd however requires the appropriate SDK to be installed locally on your system. You can dowload the SDKs from the following locations:

    Touch 2.1.x SDK http://www.sencha.com/products/touch/download/

    Ext JS 4.1.xa or 4.2+ SDK
    Links to the sdk are at the end of this article. The “a” at the end of the version number indicates that this version works with Sencha Cmd.

    Unzip the SDK(s) you downloaded into a place you can find later e.g. C:\sencha\libs

    Architect 2.1 only supports Cmd build 250. Download and unzip the appropriate version for your operating system:
    cdn.sencha.com/senchacmd/SenchaCmd-3.0.0.250-linux-x64.run.zip
    cdn.sencha.com/senchacmd/SenchaCmd-3.0.0.250-linux.run.zip
    cdn.sencha.com/senchacmd/SenchaCmd-3.0.0.250-osx.app.zip
    cdn.sencha.com/senchacmd/SenchaCmd-3.0.0.250-windows.exe.zip

    However if you're comfortable at the command line I encourage you to use that with the latest version of Cmd
    http://www.sencha.com/products/sencha-cmd

    Initialize Cmd for your Architect applications


    To initialize Cmd to work for your Architect applications, you'll need to run the sencha generate command from the directory where the Ext JS or Touch SDK is installed:
    open a fresh command line interface (terminal, iterm, cmd.exe, etc ...)
    $ cd path/to/sdk (not project)

    For the next command you need to specify the name you gave your project in Architect. The default is MyApp. To find out what name you've given it select the Application node in the inspector and find the name config.
    $ sencha generate app <projectName> path/to/project

    Note that this does not actually generate a new project but instead finds your project and adds the metadata required by Cmd.

    Note to users of the SDK Tools v2 utilities:
    If you have used the SDK Tools v2 utilities on this project, issue the following cmd to upgrade to Sencha Cmd:
    $ cd path/to/project
    $ sencha app upgrade path/to/sdk

    Configure Cmd to work with your Architect project


    Some changes will need to be made for your Architect project to work with Cmd. Find the section that corresponds to the project type you're working with below and follow the steps in order.
    Ext JS Projects


    Update your sencha.cfg file
    By default, Cmd expects Ext JS projects to have their app.js file located in the app/ directory. Architect saves that file instead at the root of the project. The sencha.cfg file defines this location in the following line:
    Code:
    # .sencha/app/sencha.cfg
    app.classpath=${app.dir}/app
    For Architect Ext JS projects, modify this line in the sencha.cfg file to look like the following:
    Code:
    # .sencha/app/sencha.cfg  
    app.classpath=${app.dir}/app.js,${app.dir}/app
    Remove extra files - new
    Cmd will create 2 files that can be a real headache if you don't remove them
    app/app.js <-- this file will throw Cmd for a loop so be sure to remove it
    app/view/Main.js <-- only remove this one if you didn't have your own Main.js view

    Windows
    Code:
    del app/app.js
    Nix
    Code:
    rm app/app.js
    Update your index.html file
    Update your index.html file to define the locations of the .css and .js files, similar to the definitions given in the app.html file created by Architect. Note that the declarations for the .js source files should be located between the x-compile tags:
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>fresh</title>
        <link rel="stylesheet" href=".res/default/app.css">
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body></body>
    </html>
    Touch Projects


    Update your index.html file
    Update your index.html file to define the locations of the .css and .js files, similar to the definitions given in the app.html file created by Architect.

    Also be sure it includes the microloader line
    Code:
    <!-- The line below must be kept intact for Sencha Command to build your application -->
     <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>

    Building your app for production


    Use the following command to build your app for production:
    $ sencha app build production

    Note that this is not the same as the “Build” button in the Architect Toolbar. For more information about building and compiling applications see:
    Touch: http://docs.sencha.com/touch/2-1/#!/..._app-section-6
    Ext JS: http://docs.sencha.com/ext-js/4-1/#!...and_app_single

    Packaging your app for production (Touch only)


    To package your app for devices you'll want to carefully configure your packager.json file either using a text editor or using Architect and the Cmd Wizard. Once you've done so you can run:

    $ sencha app build native

    Gotchas


    I have no idea what went wrong after a sencha command - new
    Try using the debug flag

    $ sencha -debug blah blah blah

    This will give you extra output to figure out what's going on

    Too much output? Redirect it to a log file

    $ sencha -debug blah blah blah > log.txt

    Cmd can't find my javascript files?
    if you change your appFolder you'll need to make that change as well in the classpath of the sencha.cfg file. As there will be no files in app/ they will be in <appFolder>/

    White screen while simulating or installing on device when using Charts
    You'll need to add Ext.Chart.* to your Applications requires config. Select the top most node in the inspector and located the requires config in the config pane. Add Ext.chart.*

    Extra file Main.js
    Cmd's generate command can sometimes create an extraneous Main view (app/view/Main file); you can just delete this file.

    Error while simulating
    You may see the following error when using the iOS Simulator:
    Code:
    {NSLocalizedDescription=iOS Simulator failed to install the application., DTiPhoneSimulatorUnderlyingErrorCodeKey=-1}
    To fix this, while in the simulator click
    iOS Simulator > reset content settings...
    Try your simulate again.

    White screen after building Ext JS app
    For some reason if your initial view isn't a Viewport, autocreateviewport setting on Application isn't working on a build app.

    a fix: Add a viewport and drag your current initial view into it. Mark the viewport as your initial view. Re-build and voila! I think this is a bug but this is a clear workaround.
    Attached Images
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  2. #2
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,939
    Vote Rating
    64
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    If you're looking for the older version of this guide for SDK Tools V2 it's here
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  3. #3
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    561
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      2  

    Default


    Maybe a bit cumbersome, but my approach is to do a deploy to a separate directory and then I check in this directory in a different path in subversion.
    I have the SA project in svn://host/project/trunk and then the deployed directory is checked in to svn://host/project/deploy When I then build a release I tag the deploy svn path to svn://host/project/tags/version
    I export the tagged directory and then run it through Sencha Cmd for release.

    As a flowchart:

    SA process.png

  4. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    7
    Vote Rating
    1
    lxu is on a distinguished road

      0  

    Default


    If you are already running deploy, what's the purpose to run cmd on the deployed folder? Sounds redundant to me.

    I really hope there is a solution that would:
    1) eliminate the need to check in generated code, and
    2) allow an automated build to compile and deploy js files from just xds and metatdata


    Quote Originally Posted by tangix View Post
    Maybe a bit cumbersome, but my approach is to do a deploy to a separate directory and then I check in this directory in a different path in subversion.
    I have the SA project in svn://host/project/trunk and then the deployed directory is checked in to svn://host/project/deploy When I then build a release I tag the deploy svn path to svn://host/project/tags/version
    I export the tagged directory and then run it through Sencha Cmd for release.

    As a flowchart:

    Attachment 40618

  5. #5
    Ext JS Premium Member tangix's Avatar
    Join Date
    Mar 2010
    Location
    Stockholm, Sweden
    Posts
    561
    Vote Rating
    50
    tangix is a jewel in the rough tangix is a jewel in the rough tangix is a jewel in the rough

      0  

    Default


    Quote Originally Posted by lxu View Post
    If you are already running deploy, what's the purpose to run cmd on the deployed folder?
    This is part of a bigger build-script that replaces the app.html and (among other things) change to the non-debug version of Ext JS, adding build tags, setting correct paths to Amazon CloudFront etc. Stuff that SA doesn't do.

  6. #6
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,939
    Vote Rating
    64
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    Quote Originally Posted by lxu View Post
    If you are already running deploy, what's the purpose to run cmd on the deployed folder? Sounds redundant to me.

    I really hope there is a solution that would:
    1) eliminate the need to check in generated code, and
    2) allow an automated build to compile and deploy js files from just xds and metatdata
    We do not yet have a way to generate generated js from the command line. The good news is that we plan on implementing this after 2.2. We also agree this is important.

    I expect deployment, packaging, minifying, and other improvements related to CI support to be a big part of Architect 2.3. What I've been calling "the last mile".
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  7. #7
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,939
    Vote Rating
    64
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    If you're trying to do a build of your project (single js, compressed) then it's likely you'll need to make sure your index.html file include the following

    Touch
    You're going to need to have the microloader in your entry html file
    Code:
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>
    ExtJS
    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>fresh</title>
        <link rel="stylesheet" href=".res/default/app.css">
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <script src="ext/ext-dev.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body></body>
    </html>
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  8. #8
    Sencha Premium Member
    Join Date
    Oct 2010
    Posts
    8
    Vote Rating
    0
    John Carter is on a distinguished road

      0  

    Default


    I am having trouble with generating an app with cmd from an Architect project.

    I am running on Linux (Ubuntu 10.04)
    Architect: 2.1.0 Build 678
    Cmd:&nbsp;v3.0.0.250
    ExtJs: 4.1.1a commercial

    Here are the steps I followed:
    1. Create new project in Architect
    2. Edit the Library Base Path to point to the copy of ext-4.1.1a on my server
    3. Save and preview the app
    4. Close Architect
    5. cd to location of extJs-4.1.1a
    6. Execute: sencha generate app Test09 /var/www/Test09/
    7. Receive errors from sencha cmd shown below
    Code:
    [INF]        Processing class inheritance graph
    [INF]        Processing instantiation refereces to classes and aliases
    [WRN]        [ [1000] : Yui Compressor Warning <> Trailing comma is not legal in an ECMA-262 object initializer =>                         ] ] :: ( /var/www/Test09/ext/src/ux/grid/filter/DateFilter.js => 133 : 25 )
    [INF]        Processing source dependencies
    [ERR]        Failed to find file for Test09.view.Viewport
     required by /var/www/Test09/app/app.js
    [ERR]        BUILD FAILED
    There were many lines of Java errors after this but it appears that the root of the problem is that it cannot find the Viewport file.

    I must have missed a step, but it is a fairly simple procedure and I can't see where I went wrong.

    I am evaluating Architect for a project I need to do and I'm trying to come up with a reasonable work flow that includes Architect at the front end. Any help will be appreciated.

  9. #9
    Sencha - Architect Dev Team Phil.Strong's Avatar
    Join Date
    Mar 2007
    Location
    Olney, MD
    Posts
    1,939
    Vote Rating
    64
    Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice Phil.Strong is just really nice

      0  

    Default


    Did you by any chance change your appFolder (on the Application node in Architect). This would change where Architect places your generated javascript.

    If so you'll need to update the classpath in .sencha/app/sencha.cfg and change ${app.dir}/app to ${app.dir}/blah
    Phil Strong
    @philstrong
    #SenchaArchitect
    Sencha Architect Development Team

  10. #10
    Sencha Premium Member
    Join Date
    Oct 2010
    Posts
    8
    Vote Rating
    0
    John Carter is on a distinguished road

      0  

    Default


    No, I didn't change anything other than what is specified in the procedure above. Well, I did drag a Panel to the canvas.

    Here is the output of ls -R on the project directory after step #4:

    Code:
    jcarter@lucid-vm:/var/www/Test13$ ls -R
    .:
    app  app.html  app.js  metadata  Test13.xds
    
    
    ./app:
    view
    
    
    ./app/view:
    MyPanel.js  Viewport.js
    
    
    ./metadata:
    Application  resource  view
    
    
    ./metadata/resource:
    Library
    
    
    ./metadata/view:
    MyPanel