PDA

View Full Version : 2.x and phonegap?



robl
12 Oct 2011, 5:40 AM
Has anyone tried PhoneGap 1.1.0 with 2.x? Does it work?

jay@moduscreate.com
12 Oct 2011, 8:15 AM
I don't see why it wouldn't. Phonegap just creates a webview.

rdougan
12 Oct 2011, 9:16 AM
There is no reason why it would not work. However, you will probably need to set the viewport configuration 'autoMaximize' to false:


Ext.setup({ icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
viewport: {
autoMaximize: false
},
onReady: function() {
//code here
}
});

bnerd
12 Oct 2011, 9:49 AM
I can get my sencha app to run in the browser.. but when I use phonegap 1.1 it only works in the simulator and not on the device.

rdougan
12 Oct 2011, 9:53 AM
@bnerd have you tried the above code?

bnerd
12 Oct 2011, 9:59 AM
I forgot to mention that it DOES run (broken) in the iPad simulator.. and @rdougan when I add the code above.. it no longer runs in the iPad simulator. Here's my app.js file. Maybe I'm doing something wrong.



Ext.setup({ icon: 'icon.png',
glossOnIcon: false,
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
viewport: {
autoMaximize: false
},
onReady: function() {
console.log("SETUP");
}
});


Ext.application({
name: 'app',


launch: function() {
console.log("testing");

Ext.create("Ext.TabPanel", {
fullscreen: true,
tabBarPosition: 'bottom',


items: [
{
title: 'Home',
iconCls: 'home',
cls: 'home',
html: [
'<img width="65%" src="http://staging.sencha.com/img/sencha.png" />',
'<h1>Welcome to Sencha Touch</h1>',
"<p>You're creating the Getting Started app. This demonstrates how ",
"to use tabs, lists and forms to create a simple app</p>",
'<h2>Sencha Touch (2.0.0pr1)</h2>'
].join("")
}
]
});

}
});

robl
12 Oct 2011, 3:14 PM
Thanks.

Questions:

1. Why use Ext.setup vs. Ext.application ?
2. Why use onReady: vs. launch: ?

zacjordaan
13 Oct 2011, 5:19 AM
Hi guys

I've been bashing my head on this for a day now - it MUST be something stupid I'm missing.

Using the "Getting Started With Sencha Touch 2" example (as-is) I upload my project to PhoneGapBuild BUT the compiled build won't run on iOS.

The project runs perfectly in my browser, but on my iPhone I just get a white screen on startup.
It looks like the launch function is never getting called so I cannot even setup my components etc.

Any ideas? Anybody else have the same problem?

olouvignes
13 Oct 2011, 6:16 AM
I can confirm that running an app in the simulator requires autoMaximize set to false,
If not, it triggers
Error: [ERROR][Ext.viewport.Ios#undefined] Timeout waiting for window.innerHeight to change

App is running fine on device too, however, sliding between cards is awful on iPhone4, the animation gets 500ms to start. Switching back to 1.1

zacjordaan
13 Oct 2011, 11:42 AM
Instead of:


Ext.application({
name: 'Sencha',
launch: function() {
...
}
});


I used:


Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function () {
...
}
});



And now the project is running within Chrome AND on my iOS device.

Thanks for all the help in this forum. I hope this is the correct manner of doing it in the Sencha paradigm.

robl
13 Oct 2011, 2:54 PM
So I got PhoneGap to work in the simulator (haven't tried phone yet) BUT it is calling Ext.Setup onReady: and NOT Ext.Application launch:. This is a problem because I am trying to use MVC. What should I do?

bnerd
14 Oct 2011, 1:29 PM
So I got PhoneGap to work in the simulator (haven't tried phone yet) BUT it is calling Ext.Setup onReady: and NOT Ext.Application launch:. This is a problem because I am trying to use MVC. What should I do?

Same here.. I now have the app running in simulator and on the device... however I can't use MVC because I'm stuck with Ext.Setup

robl
15 Oct 2011, 11:43 AM
Same here.. I now have the app running in simulator and on the device... however I can't use MVC because I'm stuck with Ext.Setup



Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
console.log("onReady:");


var app = new Ext.Application({
name: 'MyApp',
controllers: ['MyController'],
autoCreateViewport: false,
launch: function() {
console.log('launch:');
}
});


}
});

justinKohactive
15 Oct 2011, 12:12 PM
Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
console.log("onReady:");


var app = new Ext.Application({
name: 'MyApp',
controllers: ['MyController'],
autoCreateViewport: false,
launch: function() {
console.log('launch:');
}
});


}
});


This works to get the app to launch however, now it seems like my viewport isnt working correctly when i try to change active card to move from my login screen to something else nothing happens however the same code works fine in a browser. Any ideas?

justinKohactive
15 Oct 2011, 8:48 PM
Any calls to anything that causes animation, just doesnt work at all. if i remove anything that sets a view to animate it works. Even tab panels that have slide animations just dont work with phone gap. Any ideas on how to fix this?

justinKohactive
16 Oct 2011, 2:06 PM
This is a bug affecting <5.0 due to what i believe is a lack of support for .requestAnimationFrame

olouvignes
16 Oct 2011, 2:19 PM
Hum... Hope this will be fixed asap as i need 4.3 in a couple of weeks !

Tried :



window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(animate) { window.setTimeout(animate, 1000 / 60); }


With no luck :(.
Maybe there's more.

Team, please fix support on 4.3! :)

yoh.suzuki
25 Oct 2011, 5:48 PM
This works on both the iPhone 4.0 and iPhone 5.0 Simulator. Animations also work too. I'm not sure what I'm doing differently, but here's what my app entry code looks like (inspired by some posts on this thread).


(function() {
var extready, phonegapready, launch = function() {
if(phonegapready && extready) { // <-- make sure ext and phonegap are loaded
// start your app here
}
};
document.addEventListener("deviceready", function() { phonegapready = true; launch(); });
Ext.setup({
viewport: { autoMaximize: false },
onReady: function() {
new Ext.Application({
launch : function() { extready = true; launch(); }
});
}
});
})();

aguerra10
17 Nov 2011, 10:31 AM
This is a bug affecting <5.0 due to what i believe is a lack of support for .requestAnimationFrame

I'm having exactly the same problem and have not been able to make it work with yoh.suzuki (http://www.sencha.com/forum/member.php?88699-yoh.suzuki) solution.

Could anybody fix this?

Thanks.

olouvignes
17 Nov 2011, 10:35 AM
If you are on PR-1
You can check out : https://github.com/mgcrea/sencha-touch/tree/2.0.0-pr1

Exact patch is : https://github.com/mgcrea/sencha-touch/commit/288520f0365500fad5c27220034ccb3ca8fa1a94

aguerra10
17 Nov 2011, 10:56 AM
If you are on PR-1
You can check out : https://github.com/mgcrea/sencha-touch/tree/2.0.0-pr1

Exact patch is : https://github.com/mgcrea/sencha-touch/commit/288520f0365500fad5c27220034ccb3ca8fa1a94

Thanks olouvignes. That seems to make the simulator work, unfortunately I am still having the same problem in the device.

Oh, I forgot... I am using PR-2...

justinKohactive
17 Nov 2011, 12:07 PM
Make sure you clean your project.

aguerra10
17 Nov 2011, 12:38 PM
Thanks both of you guys!! It's working now...

However I am afraid the the application is really slow. Is that "normal"?
Are you also noticing that?

I do thank you!!

rdougan
17 Nov 2011, 1:28 PM
The startup time for me is fairly slow in development mode, but when built, it seems fairly fast on device.

anselmtmcclain
7 Dec 2011, 6:25 PM
I was able to get this working with 2.0 PR2, Phonegap 1.2 and the iPhone simulator with a very simple test app (one custom panel class for the viewport). The iPad sim worked out of the box, but the iPhone sim required the autoMaximize:false config and I was stuck until I found this thread.

The code I have is:

app.js


Ext.application({
name: 'MyApp',
autoCreateViewport: true,
viewport: {autoMaximize:false},
launch: function() {}
});


app/view/Viewport.js


Ext.define('MyApp.view.Viewport', {
extend: 'Ext.Panel',

requires: 'Ext.Toolbar',

config: {
fullscreen: true,
padding: 4,
layout: 'fit',
items: [
{
xtype: 'toolbar',
title: 'Test App',
docked: 'top'
},
{html: 'Hello there test app!'}
]
}

});


Could anyone provide more info on why autoMaximize needs to be turned off in this way? I was especially surprised to see a difference between iPhone and iPad in this regard. Also, I assume this is function of the code being in active development, and we would expect this issue to go away in upcoming releases, right?

Thanks!

rdougan
8 Dec 2011, 4:21 PM
autoMaximize removes the address bar in browser, if one exists. So obviously it needs to be turned off in WebViews.

autoMaximize should actually be turned off by default in PR2, when you are in a WebView/PhoneGap. I've tested with PhoneGap, both on the iOS Simulator and device, and I've never had any issues.

tasseography
10 Dec 2011, 12:30 AM
Thank goodness for this thread!
But I wanted to add that it's still possible to use MVC Ext.application and pass in a viewport configuration. like so:



Ext.application({
viewport: {
autoMaximize: false
},
// etc
});


docs have the goodies here: http://docs.sencha.com/touch/2-0/#!/api/Ext.Viewport-cfg-autoMaximize

pedanticsemantic
14 Dec 2011, 11:36 AM
I'm using PR3 and am getting the timeout error discussed in this thread:
Ext.viewport.los#undefined
Timeout waiting for window.innerHeight to change

Setting viewportMaximize: false shows the url bar, which is not an option for any mobile web app we build.

Additionally, when the app does render (setting viewportMax: false), the content is tiny, taking up only a fraction of the viewport. Also notable, I'm using Sencha.io to resize assets (retina res originals). All works well in the simulator but the device is unusable.

Is there anything more I can try in the short-term to get off the ground?

Please advise. Thanks in advance.

WillBill
15 Dec 2011, 2:07 AM
Can anyone tell me why you would use phonegap and sencha touch 2?
I thought one of the improvements within sencha touch 2 was that you didnt have to use
phonegap to wrap it in order to install it on a mobile device.

Am I wrong here or is phonegap a more reliable option at this time?



Native packaging is now a feature in Sencha Touch 2. With just one command, you can package your application for iOS and for Android. You’ll no longer need to write your own wrappers or wrangle with other solutions, it’s all built in to Sencha Touch. Best of all, you’ll be able to package for both iOS and Android from both Mac and Windows.

rdougan
15 Dec 2011, 1:34 PM
So there are two products with Sencha Touch 2:

1) The JavaScript framework.
2) A native packager, just like PhoneGap.

Right now the native packager does not support the device APIs like PhoneGap, plus it is in beta. So people should still continue to use PhoneGap as their native package shell.

WillBill
15 Dec 2011, 11:18 PM
I would be able to work around the native api's of the device, for now all i would need
is to use the packager to compile my sencha code so i can run it on a device. Without using
any of the device's functions.

I'm assuming that this wouldn't be a problem?

nino852
11 Apr 2012, 1:37 AM
I don't see why it wouldn't. Phonegap just creates a webview.

PhoneGap is an open source framework which is widely used for building cross-platform mobile applications. The developers make use of HTML, CSS, and JavaScript for creating innovative and rich apps. This is perfect for mobile app developers who want to start with mobile application development and can leverage their existing skills on a common platform rather than with a device-specific compiled language. This is fantastic for someone who is interested in creating a code base which is compatible with multiple devices.