1. #1
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default Sencha Touch 2 and PhoneGap

    Sencha Touch 2 and PhoneGap


    Hi

    I'm trying to get Sencha Touch to work in Phonegap.

    I have added the SDK stuff and my app.js looks like

    Code:
    Ext.setup({
              viewport: {
                autoMaximize: false
              },
              onReady: function() {
                console.log("ST2 READY") ;
                MyApp = new Ext.Application({
                                          name: "MyApp",
                                          controllers: [],
                                          models:[],
                                          stores:[],
                                          autoCreateViewport: true,
                                          launch: function() {
                                            console.log("CHECK") ;
                                          }
                                          });
              
                }
      });
    I can see the 'ST2 READY' and 'Our first PhoneGap app' messages in the log but not the 'CHECK' which should be logged when 'launch' is called.
    My index.html looks like

    Code:
    <!DOCTYPE html><html>
        <head>
            <title>Contacts</title>
            <script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
            <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="phonegap-1.4.1.js"></script>
            <script type="text/javascript" src="lib/touch/builds/sencha-touch-all-debug.js"></script>
            <script type="text/javascript" src="app/app.js"></script>
            
            <script type="text/javascript">
                document.addEventListener("deviceready", function () {
              console.log('Our first PhoneGap app');
            
            }, false);
            </script>
            
        </head><body></body>
    </html>
    Any suggestions ?

    cheers
    Luca

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,399
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So in your deviceready event listener... you should check to see if ST's launch method has fired and if so then execute some method on the Application. I personally would execute the launch method again and have an if statement to check a property on the Application to see if it accounts to one...


    Code:
    Ext.application({
        ....
        counter : 0,
    
        launch : function() {
            if (this.counter !== 1) {
                this.counter += 1;
                return;
            }
    
            .....
        }
    });
    So ST will fire the launch method first usually and will add one to the counter making it one and stopping the execution. Then when the deviceready listener fires the launch method the couter is one so it will proceed.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default


    I'm not sure I understand. In the current setting the launch method is not called. So if I call the launch method inside the
    deviceready event listener it still would be the first time. So there is no second time. So how does this work?

    Furthermore, how would I call the 'launch' function manually ? Ext.application.launch() doesn't work!

    Cheers
    Luca

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,399
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    ST2 fires it and then you would fire it in the deviceready event = 2
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default


    well thats my problem, ST doesn't fire anything. I've also copied the sencha-touch-all-debug.js file into the www folder (at the same level of phonegap-1.4.1.js)

    Furthermore I copied the content of app.js into index.html. And still no launch event

    Here is my index.html
    Code:
    <!DOCTYPE html>
    <html>
        <head>
            <title>Contacts</title>
            <link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="phonegap-1.4.1.js"></script>
            <script type="text/javascript" src="sencha-touch-all-debug.js"></script>
            <script type="text/javascript">
                document.addEventListener("deviceready", function () {
                    console.log('Our first PhoneGap app');
                    //console.log(Ext) ; --> Ext exists
                    new Ext.Application({
                        launch: function () {
                            console.log("LLLLLLLLLAAAAAAUUUUUUUNCH") ;
                            }
                        });
                    console.log("READY") ;
                 }, false);
            </script>
            
        </head><body></body>
    </html>
    I only see 'Our first PhoneGap app' in the xcode debug console. Because the 'READY' message isn't printed I assume something should go wrong inside ST. But unfortunately the console doesn't log (runtime) errors. Should I include a different ST file ?

  6. #6
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    No no no.

    Sencha Touch 2 automatically listens to the deviceready event when you are running with PhoneGap. All you have to do is define Ext.setup/Ext.application, and it will just work.

    So your index page should look a little like this:

    Code:
    <!DOCTYPE html>
    <html>
      <head>
    	<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
    	<script type="text/javascript" charset="utf-8" src="touch2/builds/sencha-touch-all-debug.js"></script>
    
    	<link rel="stylesheet" href="touch2/resources/css/sencha-touch.css">
    
    	<script type="text/javascript">
    
    		Ext.application({
    			name: 'MyApp',
    			launch: function() {
    				alert('launch');
    			}
    		});
    
    	</script>
      </head>
    
      <body></body>
    </html>
    Obviously you need to update the paths to the files.

    warning: This will not run in a normal browser. We'll fix this soon. Until then, to run it in the browser, just comment out the phonegap source tag.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,399
    Vote Rating
    849
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Fantastic! Didn't know we do that
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Here is a barebones example of a Sencha Touch 2 example wrapped in PhoneGap 1.2.0.

    https://github.com/rdougan/barebones-phonegap
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  9. #9
    Sencha User
    Join Date
    Jun 2010
    Posts
    139
    Vote Rating
    3
    jeanluca is on a distinguished road

      0  

    Default


    the launch function is executed (at this point I have the same as in the example at https://github.com/rdougan/barebones-phonegap ). But I see an other problem.

    I don't see anything happening on the screen. Here is my updated test code

    Code:
    <!DOCTYPE html><html>
      <head>
        <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="sencha-touch-all-debug.js"></script>
    
    
        <link rel="stylesheet" href="lib/resources/css/sencha-touch.css">
    
    
        <script type="text/javascript">
    
    
            Ext.application({
                name: 'MyApp',
                viewport: { autoMaximize: false },
                launch: function() {
                    alert("LAUNCH!!!!!!") ;
    
    
                    Ext.define('Ext.Panel', {
                        config: {
                            layout: 'card',
                            items: [
                                {
                                    html: "First Item"
                                },
                                {
                                    html: "Second Item"
                                },
                                {
                                    html: "Third Item"
                                },
                                {
                                    html: "Fourth Item"
                                }
                            ]
    
    
                        }
                    }) ;
    
    
                }
    
    
            });
            
            
    
    
        </script>
      </head>
      <body></body>
    </html>
    I see the alert, but after that the screen remains black. The strange thing to note here is when I change the alert to console.log I don't see the LAUNCH!!! message appear in my debug console. Also, with the alert, it was shown before the debug console shows the initialization stuff:

    2012-02-07 23:29:43.516 Test PhoneGap[26077:207] Device initialization: DeviceInfo = ....

    Is the launch function fired before the device is ready ? Or is it something I do wrong with th viewport ?

  10. #10
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    The following works for me in my example:

    Code:
    Ext.application({
    	name: 'MyApp',
    	launch: function() {
    		console.log('launch');
    
            Ext.Viewport.add([
                {
                    xtype: 'toolbar',
                    docked: 'top',
                    title: 'PhoneGap'
                },
                {
                    html: 'Content'
                }
            ]);
    	}
    });
    And the console outputs this in Xcode:

    Code:
    2012-02-07 14:40:40.567 barebones-phonegap[98098:13403] Device initialization: DeviceInfo = {"name":"iPhone Simulator","uuid":"3F2F66B1-9717-563E-8FA3-D36DD16C0D1C","platform":"iPhone Simulator","gap":"1.2.0","version":"5.0","connection":{"type":"wifi"}};
    2012-02-07 14:40:40.609 barebones-phonegap[98098:13403] [INFO] launch
    Edit I updated my example on github to have this example.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.