PDA

View Full Version : PhoneGap Support ST 2.1.0-b3 and SenchaCmd-3.0.0.141



Brendan Carroll
20 Sep 2012, 10:26 AM
All,

I've been tearing my hair out the last couple of nights trying to package the device example using xcode and cordova-2.0.0. It seems no matter what i do the deployed app runs in simulator mode and there's no native functionality returned when going through the Ext wrappers. The entire UI looks as it should and renders just as it does in Chrome and I'm not getting and deployment or runtime errors in xcode. Too, Cordova appears to be working properly. If i call directly to the navigator api, I get native features.

Does ST 2.1.0-b3 support cordova-2.0.0? I've tried none, native, production and package builds with senchacmd but still no luck. I've also tried bundling cordova into the build pipeline using app.json and just referencing scripts and links directly in index.html.


-BC

Brendan Carroll
21 Sep 2012, 8:52 AM
I got this to work and thought an update may help others. It seems that none of the build options worked well for me using Cordova 2. I suspect there's issues with ST2 and Cordova recognizing each other and specifically the device/application launch events not syncing.

However, if you take your solution as is with index.html microloader in tact it works. What worked was leaving the project "as is" from the initial generate out of SenchaCmd and modifying app.json just a bit:


"js": [
{
"path": "cordova-2.0.0.js"
},
{
"path": "touch/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "full"
}
],


Works:

<script id="microloader" type="text/javascript" src="touch/microloader/development.js"></script>

I moved the entire project into www and it worked as desired.

SilverTouch
2 Nov 2012, 3:16 AM
I've tried in a view something like device.cordova. or with navigator like navigator.network.connection.type.

But when I try to build (package), I have this kind of error :

[ERROR] ReferenceError: Can't find variable

So If I understand well, what you propose, is no build, and use the microloader right ?

Thanks in advance for your help!

lincon6
2 Nov 2012, 6:19 AM
I've tried in a view something like device.cordova. or with navigator like navigator.network.connection.type.

But when I try to build (package), I have this kind of error :

[ERROR] ReferenceError: Can't find variable

So If I understand well, what you propose, is no build, and use the microloader right ?

Thanks in advance for your help!

I hacked this by these steps:
1. in app.json

"js": [ {
"path": "sdk/sencha-touch.js"
},
{
"path": "cordova-2.2.0.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}]
Use sencha cmd to package it.
2. in generated index.html:
add '<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>' and remove '{"path":"cordova-2.2.0.js","type":"js"}'

That's how I hack this problem. Maybe you can also try 'Ext.device.Connection' to get connection state. Ext.device.Connection is a higer wrapper, it will create and return 'Ext.device.connection.PhoneGap' when you use phonegap. Actually, in 'Ext.device.connection.PhoneGap' it also calls navigator.network.connection.type to get connection state.

Hope it can help you.

SilverTouch
2 Nov 2012, 8:31 AM
Thank you so much for your answer.

The problem with your solution is that you can't use cordova calls right ?

Like for instance if you want to display the cordova version in a view, how do you do ?

Because when I add a call like for instance "device.cordova", I can't build anymore.. because I think sencha is not able to look to the cordova library (even if I put it in the app.json..) Am I missing something ??

lincon6
2 Nov 2012, 9:06 PM
Thank you so much for your answer.

The problem with your solution is that you can't use cordova calls right ?

Like for instance if you want to display the cordova version in a view, how do you do ?

Because when I add a call like for instance "device.cordova", I can't build anymore.. because I think sencha is not able to look to the cordova library (even if I put it in the app.json..) Am I missing something ??

I use navigator.network.connection.type in app's profile, so I think it'll be ok to display cordova version in a view.
In my app, to make cordova calls right I have to put cordova.js before sencha-touch.js. But this will cause package error using sencha cmd.
So my solution is to make sencha cmd package my app first.
original app.json:

"js": [
{
"path": "cordova-2.2.0.js"
},
{
"path": "sdk/sencha-touch.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
]
changed to:

"js": [
{
"path": "sdk/sencha-touch.js"
},
{
"path": "cordova-2.2.0.js"
},
{
"path": "app.js",
"bundle": true, /* Indicates that all class dependencies are concatenated into this file when build */
"update": "delta"
}
]
This can make sencha cmd to package app successfully.
Then in index.html add '<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>' before the inline script:

<script type="text/javascript">(function(h){function f(c,d){document.write('<meta name="'+c+'" content="'+d+'">')}if("undefined"===typeof g)var g=h.Ext={};g.blink=function(c){var d=c.js||[],c=c.css||[],b,e,a;f("viewport","width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no");f("apple-mobile-web-app-capable","yes");f("apple-touch-fullscreen","yes");for(b=0,e=c.length;b<e;b++)a=c[b],"string"!=typeof a&&(a=a.path),document.write('<link rel="stylesheet" href="'+a+'">');for(b=0,e=d.length;b<
e;b++)a=d[b],"string"!=typeof a&&(a=a.path),document.write('<script src="'+a+'"><\/script>')}})(this);
;Ext.blink({"id":"c775e790-6e44-11e1-8d7c-8911c53ac277","js":[{"path":"sdk/sencha-touch.js","type":"js"},{"path":"cordova-2.2.0.js","type":"js"},{"path":"app.js","bundle":true,"update":"delta","type":"js"},{"path":"barcodescanner.js","type":"js"},{"path":"statusbarnotification.js","type":"js"}],"css":[{"path":"resources/css/app.css","update":"delta","type":"css"}]})</script>
and remove '{"path":"cordova-2.2.0.js","type":"js"}'.

SilverTouch
5 Nov 2012, 6:03 AM
I've tried but it did not work...

If I try that in a view it will build and will work :


html: [ "<a href=\"javascript:navigator.notification.alert('Cordova version : ' + device.cordova);\">VERSION</a>"
].join("")

but if I try that it won't build :


html: [ "Cordova version : " + device.cordova
].join("")

Maybe I am doing something wrong...