PDA

View Full Version : [OPEN] Blank Canvas on iPhone with PhoneGap 1.1+



tomheinan
8 Nov 2011, 9:02 AM
REQUIRED INFORMATION


Ext version tested:

Sencha Touch v2.0.0pr1 (Ext 4.1.0)
Browser versions tested against:

PhoneGap 1.1.0, 1.2.0
Description:

When attempting to initialize the app on iOS, Ext appears to be loaded, but does not trigger the application's "launch" directive or perform any discernable initialization. The same process in Sencha Touch v1.1 works flawlessly.
Test Case:



function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}


function onDeviceReady() {
console.log("Ext v" + Ext.version); // correctly prints " Ext v2.0.0.pr1"
Ext.application({
name: 'MyApp',

launch: function() {
alert("Hello, World!"); // does nothing
}
});
}




HELPFUL INFORMATION


Debugging already done:

Running the equivalent code with Sencha Touch 1.1.1 and "new Ext.Application" works as intended.
Calling the launch() function manually doesn't appear to work.
The above code [I]does work with Sencha Touch 2.0.0pr1 on Android (just not on iOS).
Additional CSS used:

only the default sencha-touch.css
Operating System:

iOS 4.3, 5.0

Jamie Avins
8 Nov 2011, 11:04 AM
Thank you for the report.

TomPie
9 Nov 2011, 8:58 PM
Hi,

try loading 'lib/touch/sencha-touch-all.js' instead of 'lib/touch/sencha-touch.js'. Worked for us.

Bye,

Tom

TomPie
9 Nov 2011, 10:32 PM
Btw. this is the minimum app.js which will work on iPad and iPhone (4.3 and 5.0 tested) with PhoneGap 1.2.



Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'MyApp',
autoCreateViewport: false,
launch: function() {
alert('launch');
}
});


}
});

tomheinan
10 Nov 2011, 8:50 AM
Thanks, that's great information. I know that Ext.setup is a 1.1 function - is there any kind of initialization in Ext.application that isn't happening in Ext.setup? I'm just concerned about future deprecation...

rdougan
14 Nov 2011, 11:14 AM
Ext.application should work out of the box with PhoneGap in DP2.

jameshenderson
21 Nov 2011, 9:11 AM
I am using the Tabs2 example code - it works with Phonegap Android and even iOS in the native Safari app, but I get a blank canvass when using the Phonegap and iOS.

I see that this has been fixed but how can I get a fixed version please? (it is still broken in the Developer Release I downloaded today)

rdougan
21 Nov 2011, 9:41 AM
I am using the Tabs2 example code - it works with Phonegap Android and even iOS in the native Safari app, but I get a blank canvass when using the Phonegap and iOS.

I see that this has been fixed but how can I get a fixed version please? (it is still broken in the Developer Release I downloaded today)

Are you using PR2?

http://www.sencha.com/forum/announcement.php?f=92&a=17

jameshenderson
21 Nov 2011, 10:45 AM
Thanks! I was using the Preview Release v1 from the blog (http://www.sencha.com/blog/sencha-touch-2-developer-preview/). Using this new version has fixed the blank canvas but there is another problem - the tabs examples aren't working - the page loads nicely but the tabs links don't work.

I tried both the tabs examples and the toolbar example - they all exhibit the same behaviour - buttons don't work. I am using Phonegap (v1.1.0 and v1.2) with iOS 4x. The same example code work fine in with Android & Phonegap and in Chrome.

rdougan
21 Nov 2011, 11:15 AM
Could you give me a simple testcase so I can debug?

jameshenderson
22 Nov 2011, 3:57 AM
I have now done some fairly extensive iOS testing with the sencha examples included with PR2.

Here is a complete list of things I do to create an iOS Sencha app with xCode. Here, I am using the exact code from the PR2/examples/tabs, everyhing is the same as the example except that (as you can see) I have merged the index.html with the index.js (so that all code can be shown in one place), and I copy the sencha-touch-all.js and sencha-touch.css files to the same directory.

I create a new Phonegap project in xCode, then I copy the contents of the example (in this case example/tabs), then add the sencha-touch-all.js and sencha-touch.css files into the same directory, then I add the www folder with references into that xCode project, then make the changes to the index.html file so that it can find the required files sencha js and css (shown below).

This code works fine in Google Chrome and in and Android Phonegap app, but when built as an iOS app, I either get a blank canvas, or none of the buttons work.

Although the code below is using the tabs example, I have tried the same technique now with many of the examples. It is the same problem for example/tabs2 and example/toolbars, and the forms, carousel, overlay and a few other examples work fine on iPad but not iPhone (blank screen).

Please note that there is intentionally no phonegap.js file (not required).



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tabs</title>
<link rel="stylesheet" href="sencha-touch.css" type="text/css">
<script type="text/javascript" src="sencha-touch-all.js"></script>
<script type="text/javascript">
Ext.require([
'Ext.tab.Panel'
]);

Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
onReady: function() {
Ext.create('Ext.tab.Panel', {
fullscreen: true,
type: 'dark',
sortable: true,
items: [
{
title: 'Tab 1',
html: '1',
cls: 'card1',
iconCls: 'bookmarks'
},
{
title: 'Tab 2',
html: '2',
cls: 'card2',
iconCls: 'download'
},
{
title: 'Tab 3',
html: '3',
cls: 'card3',
iconCls: 'favorites'
}
]
});
}
});


</script>
<style>
.card1,
.card2,
.card3 {
background-color: #376daa;
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding-top: 100px;
}
</style>
</head>
<body></body>
</html>

Jamie Avins
28 Nov 2011, 10:18 AM
Reopened this with an additional test case.

rdougan
28 Nov 2011, 11:50 AM
After debugging this some more, it seems that you must include the phonegap.js file. If you do not, PhoneGap dies with a JavaScript error. You can replicate this by having just a plain index.html file, with only this script tag:


<script type="text/javascript">

window.onerror = function(errorMsg, url, lineNumber) {
alert('error: ' + errorMsg + ' - ' + url + ' - ' + lineNumber);
}

</script>

If you do not include the phonegap.js file, it will error. If you do, it works fine.

I've tested PR2 with phonegap-1.2.0, and this works fine (you must include the phonegap.js file before ST).

rdougan
28 Nov 2011, 12:03 PM
Here is an example Xcode project, including PhoneGap and Sencha Touch PR2.

http://cl.ly/CA6J

rdougan
28 Nov 2011, 11:04 PM
And another tip for PhoneGap users:

If you ever get a blank screen on PhoneGap, checkout window.onerror. It is implemented in iOS (and I presume Android too), and can be very useful debugging.

https://developer.mozilla.org/en/DOM/window.onerror

dellerbie
29 Nov 2011, 12:30 PM
I get the same issue using Robert's example code. When you tap on the second tab, nothing happens.