1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
    iowastate89 is on a distinguished road

      0  

    Default phonegap with sencha samples on iPad

    phonegap with sencha samples on iPad


    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!

  2. #2
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
    iowastate89 is on a distinguished road

      0  

    Default


    ah maybe same thing here:
    http://www.sencha.com/forum/showthre...light=phonegap

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

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,642
    Vote Rating
    582
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    It's difficult to say. Can you provide sample code?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
    iowastate89 is on a distinguished road

      0  

    Default


    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>

  5. #5
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
    iowastate89 is on a distinguished road

      0  

    Default


    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)
    Attached Files

  6. #6
    Ext User
    Join Date
    Jul 2010
    Posts
    5
    Vote Rating
    0
    iowastate89 is on a distinguished road

      0  

    Default


    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

  7. #7
    Ext User
    Join Date
    Jan 2011
    Posts
    1
    Vote Rating
    0
    gulabppatil is on a distinguished road

      0  

    Default


    Hi,
    From where can I get carousel in phonegap source code?

    Gulab

Similar Threads

  1. Sencha + Phonegap orientation problem
    By oonox in forum Sencha Touch 1.x: Discussion
    Replies: 41
    Last Post: 8 Feb 2012, 9:10 AM
  2. converting sencha touch app to ipad app
    By fgeorge in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 4 Oct 2011, 1:09 PM
  3. Conflict wit sencha / phonegap & html5 database
    By erneso.laval in forum Sencha Touch 1.x: Discussion
    Replies: 4
    Last Post: 11 Jul 2011, 7:13 PM
  4. Testing iPad app without iPad
    By Sesshomurai in forum Sencha Touch 1.x: Discussion
    Replies: 0
    Last Post: 29 Jun 2010, 5:45 AM

Thread Participants: 2