PDA

View Full Version : phonegap with sencha samples on iPad



iowastate89
29 Jul 2010, 11:06 AM
Hello,

I'm researching these frameworks for a client project. I successfully built/tested the carousel example under a phonegap environment.

It tested ok on the iphone simulator 4.0

However, when I try to run under the iPad Simulator 3.2 I have one UI problem. Only in this environment, after the UI is loaded (I can briefly see the carousel text flash up for a 1/2 second or so), the screen eventually clears to the background color and nothing is displayed or recognized except the solid blue background color. (This happens on the native device itself).

I tried narrowing this down to as simple an example as possible to isolate, and it happened for both the carousel example as well as the "icons" sample (where the background is just all white)

Anyone able to run these successfully with phonegap and an iPad?

Thanks!

iowastate89
29 Jul 2010, 1:35 PM
ah maybe same thing here:
http://www.sencha.com/forum/showthread.php?103238-INFOREQ-Native-on-iOS-4-gt-App-works-than-shows-blank-screen-after-0-5-sec!&highlight=phonegap

although I still can't get it to work even with a delay, hmmm...

evant
29 Jul 2010, 5:50 PM
It's difficult to say. Can you provide sample code?

iowastate89
30 Jul 2010, 8:07 AM
For what it's worth, here is a boiled down sample file I've been using (carousel in phonegap).

Environment is up to date, phonegap 0.9.1, latest sencha, latest SDKs installed in xcode.
Relevant project info:
Base sdk: iphone simulator 3.2 (although also have reproduced with 4.0/iphone)
Targeted Device Family: have reproduced under all combos (ipad, iphone, ipad/iphone).
iPhone OS Deployment Target: iPhone OS 3.2
(also, I perform a clean operation before any build)

To review, the problem I am seeing is that on startup:
1. The phonegap background icon is displayed
2. The background color changes blue
3. the application text will flash up briefly for a 1/2 second or so, and then the background color fills the screen and no user action is recognized.

The problem is inconsistently seen in the simulator (I have seen the incorrect behavior both in the iphone/ipad simulators respectively, it seems more prevalent with iPad on the 3.2 simulator-debugger). More than half of the time, it will operate correctly in simulator. So far I have not been able to see the correct behavior on the actual iPad device at all.

The following is the code sample being used. This is installed in the phonegap "www" directory, along with the sencha files referenced accordingly.

Thanks for any input, looks like a great toolkit and would really help get our project live quicker it seems!

====================
(Debugger console output here)
====================
[Session started at 2010-07-30 12:01:30 -0400.]
GNU gdb 6.3.50-20050815 (Apple version gdb-1470) (Thu May 27 05:54:06 UTC 2010)
Copyright 2004 Free Software Foundation, Inc.
GDB is free software, covered by the GNU General Public License, and you are
welcome to change it and/or distribute copies of it under certain conditions.
Type "show copying" to see the conditions.
There is absolutely no warranty for GDB. Type "show warranty" for details.
This GDB was configured as "--host=i386-apple-darwin --target=arm-apple-darwin".tty /dev/ttys005
Loading program into debugger…
Program loaded.
target remote-mobile /tmp/.XcodeGDBRemote-21244-171
Switching to remote-macosx protocol
mem 0x1000 0x3fffffff cache
mem 0x40000000 0xffffffff none
mem 0x00000000 0x0fff none
run
Running…
[Switching to thread 12035]
[Switching to thread 12035]
sharedlibrary apply-load-rules all
continue
2010-07-30 12:02:40.043 testphonegap[2367:207] Failed to load NSMainNibFile -iPad.
[Switching to thread 12547]
2010-07-30 12:02:41.271 testphonegap[2367:207] Going to play default movie
2010-07-30 12:02:41.273 testphonegap[2367:207] Can't find filename default.mov in the app bundle
2010-07-30 12:02:42.031 testphonegap[2367:207] Device initialization: DeviceInfo = {"version":"3.2.1","uuid":"278cd5af7d140859933813b837a3e55d18855175","name":"arisb ipad","platform":"iPad","gap":"0.9.0"};
[Switching to thread 13315]
2010-07-30 12:02:42.948 testphonegap[2367:207] Docs Path:/var/mobile/Applications/10ABCABB-BBE8-48AC-B7A0-8341C13ED549/Documents
2010-07-30 12:02:42.987 testphonegap[2367:207] Free space is 57775235072


================
(index.html code follows)
================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- Change this if you want to allow scaling -->
<meta name="viewport" content="width=default-width; user-scalable=no" />

<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<title>test phonegap</title>

<link rel="stylesheet" href="master.css" type="text/css" media="screen">
<link rel="stylesheet" href="resources/css/ext-touch.css" tpe="text/css">



<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="ext-touch-debug.js"></script>
<script type="text/javascript" charset="utf-8">


</script>


<script>
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items

var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
html: '<h1>Carousel</h1><p>Navigate the two carousels on this page by swiping left/right or clicking on one side of the circle indicators below.</p>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

var carousel2 = new Ext.Carousel({
direction: 'vertical',
ui: 'light',
activeItem: 1,
defaults: {
cls: 'card'
},
items: [{
title: 'Tab 1',
html: '<h1>ui="light"</h1>'
},
{
title: 'Tab 2',
html: '2'
},
{
title: 'Tab 3',
html: '3'
}]
});

new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel1, carousel2]
});
}
});
</script>


<style>
body {
background-color: #376daa;
}
.card {
text-align: center;
color: #204167;
text-shadow: #3F80CA 0 1px 0;
font-size: 72px;
padding: 80px 40px;
}

.x-phone .card {
padding: 15px;
font-size: 36px;
}

.card p {
font-size: 24px;
line-height: 30px;
}

.x-phone .card p {
font-size: 16px;
line-height: 18px;
}
</style>


</head>
<body>
</body>
</html>

iowastate89
30 Jul 2010, 11:05 AM
Adding brief video demo to show the flicker (notice that you can see the carousel text for a fraction of a second)

Hope this helps demonstrate the issue a little better than I can describe it!

(This is a video of it running on the ipad)

iowastate89
30 Jul 2010, 12:25 PM
Ah ok the hack/workaround works for me now with a settimeout of 500... I had it in the wrong place before, but now it kicks it in.

Still, it would be great to figure out a real fix for this conflict

gulabppatil
20 Jan 2011, 5:59 AM
Hi,
From where can I get carousel in phonegap source code?

Gulab