Setting up your Architect Touch projects to be used with SDK Tools v2 beta 3

[Phil.Strong]

First let me state that SDK Tools is under rapid development and this means 2 things

1. You'll be getting a more useful command line build tool that has less bugs
2. Architect will lag behind a bit in terms of support for SDK Tools so it can stabilize.

Currently the Package and Simulate (touch only) features in Architect support SDK Tools V2 Beta 2

Warning: Package doesn't work from Architect with beta 3 the command has changed from sencha package to sencha package build

With that said I don't suggest you wait to try out the new Beta 3 features of the Tools and so with that in mind here are the steps to make your Architect projects work well with the newest SDK Tools


Install SDK Tools V2 Beta 3
http://www.sencha.com/products/sdk-tools/download

open a fresh command line interface (terminal, iterm, cmd.exe, etc ...)
Don't try to run it just anywhere as you might now get a node.js error

Download the Touch 2.x SDK
http://www.sencha.com/products/touch/download/

unzip the SDK

cd into that directory
running sencha should get you here http://cl.ly/0x1r3r1x3r011V0C2320

$ sencha app create st2 ../st2
http://cl.ly/1o0s3k2j1C1u2L3O0e3P

now we'll take this newly created app directory and harvest some of the good bits

$ cd ../st2
$ ls -la
http://cl.ly/3i3T1u3C0G2N0v2K461L

note the .senchasdk file

Now let's pretend we have a project folder created with Architect (touch of course) located at
~/Code/citybars/

cp .senchasdk ~/Code/citybars/
cp app.json ~/Code/citybars/
cp -r sdk/ ~/Code/citybars/
cp -r resources/ ~/Code/citybars/
cp index.html ~/Code/citybars/

Now you should be able to cd ~/Code/citybars
$ ls -la
http://cl.ly/1l0W0J3k1O1h231I200o

$ sencha
should work just fine now with no [WARN]

Rest assured when SDK Tools stabilize we will be making the integration and improving the experience greatly

[rgratwick]

Thank you Phil.

You might like to know what you described worked for me (same versions as you) on both Vista and Ubuntu 10 for a simple boiler plate app created using sencha app create st2 ../st2.

However, I decided to try the Geocongress app with less success.
Initially it had the following error

http://localhost:8080/sencha/geocong...=1337145964390 404 (Not Found)

I 'fixed' this by adding the following requires to app.js despite the warning "Do NOT hand edit this file."

Ext.application({requires: [
    'Ext.device.Geolocation'
    ],
.... [

Obviously this not really a fix because it is over written the next time you save in SA, however in got rid of the error for now.

I still get these errors that I can't seem to solve.

Error evaluating http://localhost:8080/sencha/geocong...duction/app.js with message: TypeError: Cannot call method 'substring' of undefinedDocument was loaded from Application Cache with manifest http://localhost:8080/sencha/geocong...cache.manifest
Application Cache Checking event
Application Cache NoUpdate event

Uncaught TypeError: Cannot call method 'setValue' of undefined

So the first question is how to add those requires statements in SA2.0?
Any ideas on those errors?
Cheers
Robert

[aconran]

So the first question is how to add those requires statements in SA2.0?
Any ideas on those errors?

Goto the application node, search for requires and add Ext.device.Geolocation.

[rgratwick]

Thank you for your quick reply, I should have known that.

Regarding those errors here's some more information from index.html in the browser scripts console, not really sure what's happening here?

... 
function M() {
            H || (H = !0, p(o, function (a) {
                (new r(a)).store();
                Error evaluating http: //localhost:8080/sencha/geocongress/build/production/app.js with message: TypeError: Cannot call method 'substring' of undefined
                i.location.reload()
            }))
        }
...

Update: Problem Solved
Thank you Worth for your suggestions, problem is solved with your help.

When I viewed the app from the project directory, it worked fine, so I didn't even look at the console for errors. I just did a production build and found those errors.

The errors in the console on the project directory told me all I needed to know, to wit, lots of missing requires. Added those and all's good.
Cheers

[worthlutz]

Apparently you are looking at the minified code. Try testing the app from the browser, starting it up from your project directory (geocongress). You probably will get the same error but it may be easier to figure out the problem.

Another thing to try is build it with testing instead of production. I think this will give better debugging. I am guessing that the code will not be minified.

These are my guesses from a lot of experimenting with these examples.

Worth

[Designbase]

When following these instructions I indeed can get things to deploy.

However, there are still links for example in the app.html and index.html to /sencha-touch-2.0.1/sencha-touch-all-debug.js and sencha-touch-2.0.1/resources/css/sencha-touch.css
These should be changed before final deploy.

Also if you do not compress everything first (or do a build first) like mentioned here: http://docs.sencha.com/touch/2-0/#!/guide/command

you end up with a very sluggish app on your iOS device.

Or am I wrong ?

[worthlutz]

Phil,

The sencha command adds these items to the app.js file:

    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

I do not see these as an options in Architect. I see other similar properties. Which are correct?


Also this function related to updating is in the app.js:

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }

Should this be added automatically by Architect or must I add it every time to my projects?

Keep up the good work. It is getting easier as I understand what is supposed to happen and changes are made to make Architect work that way.

Worth

[worthlutz]

... not really sure what's happening here?

... 
function M() {
            H || (H = !0, p(o, function (a) {
                (new r(a)).store();
                Error evaluating http: //localhost:8080/sencha/geocongress/build/production/app.js with message: TypeError: Cannot call method 'substring' of undefined
                i.location.reload()
            }))
        }
...

This is most often caused by classes which need to be added to "requires". Test from the project directory and look for

[WARN][Anonymous] [Ext.Loader] Synchronously loading 'Ext.field.Search'; consider adding 'Ext.field.Search' explicitly as a require of the corresponding class

in your console.

Worth

[Phil.Strong]

Be sure to read the docs here:

http://docs.sencha.com/touch/2-0/#!/...tive_packaging
http://docs.sencha.com/touch/2-0/#!/...e_provisioning
http://docs.sencha.com/touch/2-0/#!/...native_android