Daniel Duan's Articles About PhoneGap

Daniel Duan's Articles About PhoneGap https://duan.ca/tag/phonegap/ Sencha Touch 2 and PhoneGap integration As one of my pet Sencha Touch project gets close to finish, I started looking into distribute it as native apps with Phonegap/Cordova. One of the concerns in do so is the 'deviceready' event provided by Phonegap, according to the documentation: <blockquote> This is a very important event that every Cordova application should use. ... </blockquote> <blockquote> The Cordova deviceready event fires once Cordova has fully loaded. After the device has fired, you can safely make calls to Cordova function. Typically, you will want to attach an event listener with document.addEventListener once the HTML document's DOM has loaded. </blockquote> In particular, the nice Sencha Touch microloader complicate the matter by being the sole Javascript file that's supposed to be included in <code>index.html</code> and is in charge of starting the actual code of our apps. Yet we need the starting point of the code be a response to the <code>deviceready</code> event. After some googling, I found that most information on this matter is either inaccurate, incomplete or outdated, that is until I found <a href="http://stackoverflow.com/a/10457158/243798">this answer</a> by <a href="http://dougan.me">Robert Dougan</a> on StackOverflow: <blockquote> Sencha Touch 2 will listen to that event and call your onReady/launch methods <ul> <li>therefore if you try listening to them in the launch method, it has already been fired.</li> </ul> Just put your logic inside the launch method in your application. </blockquote> To verify this claim, I dug into <code>sencha-touch-debug.js</code> distributed with Sencha Touch 2.2 and found the following code: <pre><code>if (Ext.browser.is.PhoneGap && !Ext.os.is.Desktop) { if (!Ext.readyListenerAttached) { Ext.readyListenerAttached = true; document.addEventListener('deviceready', triggerFn, false); } } </code></pre> It appears that the <code>deviceready</code> event is taken into account here as long as <code>Ext.browser.is.PhoneGap</code> is true in a mobile browser envronment, which, in the same source code, means: <pre><code>if (typeof window.PhoneGap != 'undefined' || typeof window.Cordova != 'undefined' || typeof window.cordova != 'undefined') { isWebView = true; this.setFlag('PhoneGap'); } </code></pre> Here, the global variable PhoneGap, cordova or Cordova needs to be defined to satisfy Sencha Touch 2's expectation of PhoneGap environment. Those globals are defined in the <code>cordova-x.y.x.js</code> file included in the PhoneGap/Cordova project files. So what needs to be done for the integration is simple (if not clear): include <code>cordova-x.y.x.js</code> in the js section of <code>app.json</code> project file so that the microloader knows to load it up early: <pre><code>"js": [ { "path": "path/to/cordova-x.y.z.js", }, { "path": "touch/sencha-touch.js", "x-bootstrap": true }, { "path": "app.js", "bundle": true, "update": "delta" } ], </code></pre> Run <code>sencha app build package</code> and drop the files it produces to the <code>www</code> folder in the PhoneGap project. Compile, ship. Tue, 28 May 2013 15:24:30 -0600 https://duan.ca/2013/05/28/sencha-touch-2-and-phonegap-integration/ https://duan.ca/2013/05/28/sencha-touch-2-and-phonegap-integration/ Integrating Sencha Touch 2 and Cordova (pre-2.0) <h2>"The Goals</h2> <ol> <li> Use Sencha Command to create and package an MVC-structured Sencha Touch 2 project. </li> <li> Use Cordova/PhoneGap (1.9) to wrap the project to deliver it in the App Store. </li> <li> Leverage the APIs provided by Cordova/PhoneGap to give Sencha Touch 2 project more native capabilities. </li> </ol> <h2>The Process</h2> Goal #1 and #2 can be achieved by <a href="http://robertdougan.com/posts/packaging-sencha-touch-2-with-phonegap-cordova" title="Packaging Sencha Touch 2 with PhoneGap (Cordova)">these steps well described by Robert Dougan </a>. In essence, you need to create a normal Sencha Touch 2 project using Sencha Command; a Cordova (1.7 in Roberts post, but works fine with 1.9) project. Then tell Sencha Command to build in the <code>www</code> folder, where Cordova looks for the HTML5 assets to package. Finally, build and deploy the Cordova project the usual way. That, of course, is not the end of the story, otherwise you wouldn't be reading this. When you try to achive goal #3, that is, when you use the Cordova API in the Sencha Touch project, such as: <pre><code> navigator.notification.alert( 'Winter is coming!', noted, // callback function 'be warned', ""Yes M'lord"" ); </code></pre> Sencha Command will report error and refuse to ""compile"" if you run <pre><code> sencha app build package </code></pre> because of the unknown namespace introduced by Cordova. One way to workaround this problem is manually replacing the command, which involves compiling the SASS files, consolidate all Javascript dependencies into a single file, minify everything and move the result to the <code>www</code> folder. Doesn't sound fun, does it? So, here's a trick to put Sencha Command back on track, use <pre><code> if (!Ext.os.is.Desktop) { } </code></pre> to wrap around the Cordova API calls, so the previous example becomes <pre><code> if (!Ext.os.is.Desktop) { navigator.notification.alert( // ... ); } </code></pre> This way, Sencha Command will ignore the conditioned code block since its running on the desktop environment, therefore compiles like a charm. And the code will work as intended in emulator/device environment. You are welcome. <h2>The Bonus</h2> Now that you are using Sencha Touch 2 and Cordova API (like a boss!), here's another tip to improve your workflow. When I'm developing hybrid apps, I spend the majority of time editing Java(Coffee)script/(S)CSS files. But surely enough, there will come a period where I have to debug the packaged app in the emulator. Switching from my text editor (Vim) to Xcode and hitting ⌘r REALLY gets old. Luckily, Cordova provides some command line alternatives. If you generate a Cordova project as described in <a href="https://web.archive.org/web/20161025042756/http://robertdougan.com/posts/packaging-sencha-touch-2-with-phonegap-cordova" title="Cordova Command-Line Documentaion">Cordova's documentaion</a> like so: <pre><code>./path/to/cordova-ios/bin/create /path/to/project com.example.name Project </code></pre> There'll be a folder called <code>cordova</code> in the newly created project, which won't be in your project if you create it with Xcode with <a href="http://robertdougan.com/posts/packaging-sencha-touch-2-with-phonegap-cordova" title="Packaging Sencha Touch 2 with PhoneGap (Cordova)">Robert's method</a>. In <code>cordova</code> folder are three lovely Bash scripts that let's you compile the Xcode project (<code>debug</code>, which also does the next thing), run the result in an ios emulator (<code>emulate</code>) and watch the logging information (<code>log</code>). Copy the folder to the path of <code>YourProject.xcodeproj</code>, and boom! You can now quit Xcode and run the scripts in there directly from your terminal. (What I like to do is to use GNU Make to combine Sencha commands with those scripts so that I could just hit ⌘b in MacVim to make my latest code run in the simulator.) Happy coding! Mon, 20 Aug 2012 19:09:34 -0600 https://duan.ca/2012/08/20/integrating-sencha-touch-2-and-cordova-pre-20/ https://duan.ca/2012/08/20/integrating-sencha-touch-2-and-cordova-pre-20/