Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default Answered: Sencha Touch 2.x with Phonegap/Cordova 2.0

    Answered: Sencha Touch 2.x with Phonegap/Cordova 2.0


    Has anyone had any success on getting Sencha Touch 2.X to work with the latest cordova release? I've been able to get sencha touch 2.x to work with prior versions of cordova, but for some reason the same methods don't seem to be working with cordova 2.0. It appears that adding any graphical elements to the viewport from the sencha code are not executing. Any help/suggestions?

    Code Sample (relevant parts only):
    index.html:
    Code:
    <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name = "format-detection" content = "telephone=no"/> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Hello Cordova</title> <script type="text/javascript" src="cordova-2.0.0.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> document.addEventListener("deviceready", app.mainLaunch, false); </script> <script type="text/javascript"> app.initialize(); </script> <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script> </head>


    app.js (All Debug Statements are printed):
    Code:
    launch: function() {
           console.log('Debug 1');
                    this.launched = true;
           console.log('Debug 2');
                    this.mainLaunch();
        },            
                    
        mainLaunch: function () {
                    if (Ext.os.is.Desktop) {
                    device = true;
                    }
                    console.log('Debug 3');                
                    if(!device || !this.launched) { 
                    console.log ("Not Ready");
                    return;
                    }
                    console.log('Debug 4');
                    // Destroy the #appLoadingIndicator element
                    Ext.fly('appLoadingIndicator').destroy();      
                    // Initialize the main view
                    console.log('Debug 5);
                    Ext.Viewport.add(Ext.create('AppName.view.ViewName'));
                    console.log('Debug 6);
        },
    

  2. I was able to get PhoneGap 2.0 to work with Sencha Touch 2.

    The two things that tripped me up:
    1. in the app.json file make sure you set logger to "false" in your buildOptions parameter.
    Code:
    "buildOptions": {
            "product": "touch",
            "minVersion": 3,
            "debug": false,
            "logger": "false"
        },
    *Doesn't seem like this is your problem

    2. In xCode make sure you select the right Scheme. By default it seems to have the CordovaLibApp scheme highlighted so when you launch the simulator it launches the default 'Hey, it's Cordova" hello world screen. Select your project scheme from the drop down which should be the same as your project name.
    Attachment 37706

    I hope that helps! PG 2.0 is so new I couldn't find anything to help me through the install process. Took some time and patience to figure this out... once i figured it out i could not believe how simple the problem was.. knuckleheadish

    There were several other hoops that you have to jump through (ala create new PG project via command line, package settings in the app.json file. sencha app build package) but it sounds like you are already keen on these steps.

  3. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,360
    Answers
    102
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I'm interested to see if this works. To be honest, I've been working in 1.9.0 and will soon migrate to 2.0.

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default


    Please let me know if you have any success!

  5. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    411
    Answers
    5
    Vote Rating
    17
    jweber will become famous soon enough

      0  

    Default


    Sencha Touch handles the "deviceready" event when it detects that you're running PhoneGap or Cordova (see core/Ext-more.js and env/Browser.js). So you can just use Ext.application like in a normal Sencha Touch app.

  6. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    164
    Answers
    13
    Vote Rating
    9
    in4p will become famous soon enough

      0  

    Default


    @jweber: thanks for the suggestion. The issue unfortunately is not with the 'deviceready' event (although the check that I include in the code is to account for the race condition whereby both Sencha and Phonegap need to be ready to start loading the ui components).

    The issue is that for some reason, the graphical components aren't showing up per the line:
    Code:
    Ext.Viewport.add(Ext.create('AppName.view.ViewName'));
    All the console debug statements are printed (so I know that the launch functions are being run), but the graphical portion of the app isn't added to the viewport in Phonegap. The same code works in Phonegap pre 2.0, and works as is in a web browser.

    Greatly appreciative of any additional thoughts or suggestions!

  7. #6
    Sencha User
    Join Date
    Jun 2007
    Posts
    125
    Answers
    1
    Vote Rating
    1
    bhaidaya is on a distinguished road

      1  

    Default Success!

    Success!


    I was able to get PhoneGap 2.0 to work with Sencha Touch 2.

    The two things that tripped me up:
    1. in the app.json file make sure you set logger to "false" in your buildOptions parameter.
    Code:
    "buildOptions": {
            "product": "touch",
            "minVersion": 3,
            "debug": false,
            "logger": "false"
        },
    *Doesn't seem like this is your problem

    2. In xCode make sure you select the right Scheme. By default it seems to have the CordovaLibApp scheme highlighted so when you launch the simulator it launches the default 'Hey, it's Cordova" hello world screen. Select your project scheme from the drop down which should be the same as your project name.
    xcode screen.jpg

    I hope that helps! PG 2.0 is so new I couldn't find anything to help me through the install process. Took some time and patience to figure this out... once i figured it out i could not believe how simple the problem was.. knuckleheadish

    There were several other hoops that you have to jump through (ala create new PG project via command line, package settings in the app.json file. sencha app build package) but it sounds like you are already keen on these steps.