PDA

View Full Version : Deploying on Windows 8 phone with Cordova



allisterf
30 Aug 2013, 6:00 AM
Trying to deploy for a Windows 8 phone. I have the SDK set up (Visual Studio Express) in windows and it runs properly and Cordova will build the standard app that runs on the phone emulator to run the 'cordova is ready screen'


However when I exchange the content in the www directory for the files/folders that my sencha project creates, the app fails to launch properly (shows the splash screen and then blank). I've made sure the folders are all included in the project.


THere are no apparent errors showing in the console of the sdk


Index file for a simple vanilla test app is:



<!DOCTYPE html>


<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>maptest2</title>


<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">


// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);




</script>


<script src="http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css">
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>


What am I missing when it comes to preparing my sencha app to deploy through phone gap into the windows phone environment?


Thanks
Allister

eyepoker
3 Sep 2013, 11:26 AM
My guess would be that you are missing the onDeviceReady function, and so the app stops right there.

A more common approach is:



<script type="text/javascript" charset="utf-8">
window.addEventListener('load',function(){
document.addEventListener('deviceready',function(){
console.log('the device is ready');
},false);
},false);
</script>


Some general observations - you'll want to download sencha touch and have it be a part of the app instead of requesting the framework over the web. It is possible for the device ready to fire before you have your JS, in fact, before Sencha has even rendered the app. Loading it over the web exacerbates that issue. Also, place the phonegap specific code last.

RossGerbasi
3 Sep 2013, 9:17 PM
I agree likely the problem is you have set a listener to a function that does not exist 'onDeviceReady' is nothing, and is likely throwing an error behind the scenes.

However you will not need to manage any listeners 'load' or 'deviceready' as Sencha Touch will automatically detect Cordova/PhoneGap and listen for 'deviceready'. Remove that whole script tag with 'document.addEventListener....' and try again.


I have also created a step by step process here that I have just confirmed works. It assumes you have already installed nodejs (http://nodejs.org/)and Windows Phone SDK (http://dev.windowsphone.com/en-us/downloadsdk) on your computer.

Simple Windows 8 Sencha Touch 2.2.1 Application (starting at the Desktop)
WIN+R
'cmd' [ENTER]
'npm install -g cordova' [ENTER]
'exit' [ENTER]
WIN+R
'cmd' [ENTER]
'cd Desktop' [ENTER]
'cordova create TestApp' [ENTER]
'cd TestApp' [ENTER]
'cordova platform add wp8' [ENTER]
Back in Windows Explorer
Browse to ~/Desktop/TestApp/www
Delete all files EXCEPT config.xml & index.html
Edit index.html in any text editor
Replace contents of index.html with attached code (below)
Back in Command Prompt Window (you should still be in the TestApp folder)
'cordova prepare wp8' [ENTER]
Back in Windows Explorer
Browse to ~/Desktop/TestApp/platforms/wp8
Open 'HelloCordova.sln' in Visual Studio (I am using Express 2012 for WP)
Select Debug -> Start Debugging
Emulator should start.
Should see PhoneGap SplashScreen
Then Sencha Touch Application will appear.
Enjoy Milk and Cookies.
index.html

<!DOCTYPE html>
<html>
<head>
<title>Windows 8 Simple</title>


<style>
@media screen and (orientation: portrait) {
@-ms-viewport {
width: 320px !important;
}
}

@media screen and (orientation: landscape) {
@-ms-viewport {
width: 560px !important;
}
}
</style>

<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css"></link>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all.js"></script>
<script type="text/javascript">
Ext.application({
requires: [
'Ext.TitleBar',
'Ext.Video'
],
launch: function(){
Ext.Viewport.add({
xtype:"tabpanel",
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',


styleHtmlContent: true,
scrollable: true,


items: {
docked: 'top',
xtype: 'titlebar',
title: 'Welcome to Sencha Touch 2'
},


html: [
"You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
"contents of <a target='_blank' href='app/view/Main.js'>app/view/Main.js</a> - edit that file ",
"and refresh to change what's rendered here."
].join("")
},
{
title: 'Get Started',
iconCls: 'action',


items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
},
{
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}
]
}
]
});
}
})
</script>
</head>
<body>
</body>
</html>


Hope this helps out!

allisterf
4 Sep 2013, 1:01 AM
Hi Ross and Eyepoker,


I agree about best practice of keeping the resources local - I only referenced them online as I wasn't sure whether there was some permission issue on my local field that was causing the error.


Ross, your code worked fine - and I expected it to as you've hand coded the sencha app, and it's all held in the index.html file itself. I'm using Architect, and where I'm finding it breaks down for me is how to reference the app.js file that the Architect framework creates.


My app.js file is



/*
* File: app.js
*
* This file was generated by Sencha Architect version 2.2.2.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Sencha Touch 2.1.x library, under independent license.
* License of Sencha Architect does not include license for Sencha Touch 2.1.x. For more
* details see http://www.sencha.com/license or contact [email protected]
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/


//@require @packageOverrides
Ext.Loader.setConfig({


});


Ext.application({
views: [
'MyPanel'
],
name: 'MyApp',


launch: function() {


Ext.create('MyApp.view.MyPanel', {fullscreen: true});
}


});


My index would be:



<!DOCTYPE html>
<html>
<head>
<title>Windows 8 Simple</title>




<style>
@media screen and (orientation: portrait) {
@-ms-viewport {
width: 320px !important;
}
}


@media screen and (orientation: landscape) {
@-ms-viewport {
width: 560px !important;
}
}
</style>


<link rel="stylesheet" href="http://cdn.sencha.com/touch/sencha-touch-2.2.1/resources/css/sencha-touch.css"></link>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script src="http://cdn.sencha.com/touch/sencha-touch-2.2.1/sencha-touch-all.js"></script>

<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>


This launches the app, shows the splash screen and then gets stuck and doesn't seem to be calling app.js. Is there an example of an Architect designed MVC app that can be launched with the windows SDK through Cordova? :-?


Thanks,
Allister

RossGerbasi
4 Sep 2013, 10:30 AM
Now I get it. The problem is packaging.

When you publish from architect you are getting a version of your app still in MVC structure. When you attempt to open this on the windows device it will die because it will not allow you to load resources from the local filesystem like that. So when app.js attemtps to load your view from the views folder it craps out.

You must package your app up into a single app.js file before you goto a native environment. Currently Architect does not have very good support for this, but in the next version you will be able to build out a minified version of your app very easily.

Worry not though I have a workaround that should get you where you need to be. We are going to use Architects Package commands to minify the app for us, then we will just ignore the native application it creates.

So here is what you do. Make your app in Architect then choose "Package"

Follow the steps for Package
Step 1: Point to the Sencha CMD folder
Step 2: Point to the Sencha touch SDK folder on your system
Step 3: Click "Add Package Settings"
Step 4: Click Build
Step 5: Save your project and let it build

Once your app is built navigate to your Architect Project folder and into the build folder.
You will see a folder with the name of your project, inside there you will see a package folder.

From this package folder select, app.js, app.json, index.html, resources, and touch.
Copy all these files/folder into your cordova www folder.
Add your cordova,js script tag to index.html (you could just also add cordova.js as a JS Resource in Architect prior to building)

That should get ya there, again in the next version of Architect this should be easier.

allisterf
5 Sep 2013, 1:40 AM
Hi Ross - and thanks for the clarification on this. It does, however, raise another problem. I don't have a package menu item!


For sure, if I start a new Sencha Architect Project, it comes set up with the Package menu option (attachment shown). But I have a bunch of projects that started way back and have been taken through the regular upgrade process every time a new Architect version comes out, and none of these (even though they are now upgrade to 2.2) offer the package option.
45687

45688


Is this a bug in the upgrade process and us there a way to access the packaging function for these existing projects?


Thanks for looking into this.


Allister

Phil.Strong
5 Sep 2013, 2:42 PM
You must save the project to disk to use packaging functionality.

allisterf
6 Sep 2013, 1:11 AM
Hi Phil - it's not that. I realise that the greyed out button is activated when a project is saved to disk.

The first of the two images is a sencha project that has been updated along with automated version upgrades along the way. I tried to follow your sticky thread about using sencha cmd and how to initialise it for sencha projects, but it didn't create the packaging option in the existing project - greyed out or not. Either I missed something or that's not what the issue is.


My project has been updated though the version upgrades, though it's code base is
http://extjs.cachefly.net/touch/sencha-touch-2.0.1.1/


How do I create the sencha cmd packaging functions within Architect?

Allister

Phil.Strong
6 Sep 2013, 1:21 PM
Ok I think it's because you're using touch 2.0 and packaging from within the app is only supported for touch 2.1 and up. It's not hard to upgrade. Simply right click the library node in the project inspector and choose upgrade to ...

allisterf
7 Sep 2013, 1:08 AM
Oh….


I have to admit, that's the first time - and I've been using Sencha Touch 1 and then Sencha Architect for some years now - that I even knew this existed! I think I was assuming that when an Architect code base upgrade occurs, at the point where you open an existing project, the project upgrade happens for you. It even asks you at that point 'Do you want to upgrade this project to the new code base or not.' I think I was assuming it was being ported for me to, for example, Architect 2.2!


Apologies if, with the second part of this thread, I've gone off topic from the original question, but I'm REALLY happy I just found out how to properly upgrade an Architect project!


Maybe I'm not the only one…who knows!


Again, thanks for all your great help,
Allister

Phil.Strong
10 Sep 2013, 7:10 AM
Woot!

Yeah those upgrades are for Architect keeping your project up to date while still keeping it on the same framework.

blaynewatt
21 Oct 2013, 11:44 AM
Happen to have an updated version of this for the new sencha touch 2.3 with cmd 4.0, Ross?

I'm following the steps, but when I try and add wp8 platform, I get an error:

Error: ENOTDIR, not a directory 'C:\xampp\htdocs\gepm\cordova\platforms\wp8\www\touch\resources\themes\stylesheets\sencha-touch\cupertino\var\_button.scss'

-- really not sure why I'd trying to parse apple style sheet for a WP8 app, but that's what I'm getting. The app is already working with Android for cordova (using the new "sencha app build native" cordova support in cmd 4.0)... just having fun trying to get windows 8 working.

regards,
-Blayne Watt
Senior Engineer
General Electric, Inc.

RossGerbasi
21 Oct 2013, 11:58 AM
When is that error occurring? did it successfully add the wp8 platform (does it exist in {app}/cordova/platforms/wp8?)

I am guessing you changed the properties file to build wp8, then ran 'sencha app build native' ?

blaynewatt
21 Oct 2013, 12:15 PM
No, unfortunately. I was in my project\cordova folder (gepm\cordova) and executed "cordova platform add wp8" and got that error. The project was upgraded last week with "sencha cordova init", and then I did a "cordova platform add android" and spent the weekend dealing with issues with that, and finally got it working yesterday (although I have a problem that 25% of the time it fails and reports "Connection is undefined" - some sort of timing issue there, still investigating that.)

It did add a wp8 folder, but I'm assuming it's only partially complete based on that error.

-Blayne
Senior Engineer
General Electric, Inc.

blaynewatt
21 Oct 2013, 12:18 PM
Additionally, the properties is still target "android" because I hadn't gotten to the step to change that yet... since the cordova platform add is what is failing. I planned to change the target to wp8 once I got the platform added, prior to executing the "sencha app build native"

-Blayne

RossGerbasi
21 Oct 2013, 12:34 PM
Yeah you will need to get the Cordova stuff working before any of our integration will work with it. I am not sure why it is trying to use any of those files, what you could try it clearing out the global cordova www folder, then add the wp8 project. so {project}/cordova/www can be cleared out, then try to add the wp8 project and see if that helps. I am not sure why those folders/files would be in your www folder to begin with though, something sounds messed up but its hard for me to troubleshoot like this.

Again for now i recommend clearing that folder out, seeing if you can get the platform installed. then change the properties file and try to build the app again for wp8.

-ross

blaynewatt
22 Oct 2013, 3:58 AM
Thanks Ross,

Progress made, but not much. Cleaning out the WWW allowed me to perform a "cordova platform add wp8", I then changed the properties to wp8 and ran "sencha app build native" and I get the same error now. I cleaned out the WWW directory prior to running the sencha app build native, but that seems to copy the files into the global www directory, and then instead of failing during platform add, it fails during 'cordova build wp8' step of the sencha build process.

(as background, in build.xml we have extra steps to copy the touch\resources folder into our target, because we're using some of the pictos images and our SASS guy hasn't had a chance to clean that all up... so for now I just have a step that copies that folder into our target. Android cordova build doesn't seem to have any issues with that folder...)



[INF] -cordova-build:
[INF] [shellscript]
[INF] [shellscript] C:\xampp\htdocs\GEPM\cordova>cordova build wp8
[INF] [shellscript] '{' [Error: ENOTDIR, not a directory '''C:\xampp\htdocs\GEPM
\cordova\platforms\wp8\www\touch\resources\themes\stylesheets\sencha-touch\cuper
tino\var\_Button.scss''']
[INF] [shellscript] errno: 27,
[INF] [shellscript] code: '''ENOTDIR''',
[INF] [shellscript] path: '''C:\\xampp\\htdocs\\GEPM\\cordova\\platforms\\wp8\
\www\\touch\\resources\\themes\\stylesheets\\sencha-touch\\cupertino\\var\\_Butt
on.scss''',
[INF] [shellscript] syscall: '''readdir''' '}'
[ERR] The following error occurred while executing this line:
C:\xampp\htdocs\GEPM\.sencha\app\build-impl.xml:414: The following error occurre
d while executing this line:
C:\xampp\htdocs\GEPM\.sencha\app\cordova-impl.xml:118: The following error occur
red while executing this line:
jar:file:/C:/Users/bwatt/bin/Sencha/Cmd/4.0.0.203/sencha.jar!/com/sencha/ant/ant
lib.xml:584: shellscript returned: 1
at org.apache.tools.ant.ProjectHelper.addLocationToBuildException(ProjectHe
lper.java:551)
at org.apache.tools.ant.taskdefs.Ant.execute(Ant.java:444)
at org.apache.tools.ant.UnknownElement.execute(UnknownElement.java:291)


regards,
-Blayne Watt
Senior Engineer
General Electric, Inc.

RossGerbasi
22 Oct 2013, 6:09 AM
Obviously you will wanna get that whole resources folder out of the build output folder, there are a ton of files in there that would't be very useful for deployment. As far as why this is failing I do not know, it seems to be a cordova issue or possibly even a node thing. I was reading an issues here (http://mail-archives.apache.org/mod_mbox/cordova-issues/201303.mbox/%[email protected]%3E) and got to thinking maybe the '_' in front of the file is being treated like a '.' in front of a file and something is trying to use that as a plugin?

Can you take out your extra build step and just confirm the process works normally? Then I would recommend, if you have to, modifying that build addition to just pull the stuff you need. Or even just manually going into the folders in touch/resources and copying those files into your app/resources folder.

blaynewatt
22 Oct 2013, 6:51 AM
Yeah, already did... I deleted the themes folder, since I know we don't use that presently, and the build completed successfully.

Odd that the cordova android build didn't complain about that, but the windows 8 one does... ah well, as long as I know about it, I can work around it :)

Thanks very much for the help.

-Blayne