Daniel Duan's Articles About Mobile Development

Daniel Duan's Articles About Mobile Development https://duan.ca/tag/mobile-development/ "Hello, World!" The Hard Way with Sencha Touch When I first got into the amazing Sencha Touch HTML5 framwork, it came across as a compilation of visual components that looks mobile, <a href="http://compass-style.org">easily themable</a>, leverage the latest HTML5 technology to be efficient and, best of all, are created within the Javascript code as oppose to being shoved in to an HTML file and demand DOM tinkering later. But a closer look would reveal a lot more goodies beyond those handy components in Sencha Touch. It offers <a href="https://web.archive.org/web/20130117172701/http://docs.sencha.com/touch/2-1/#!/guide/class_system">a class system</a>, a <a href="https://web.archive.org/web/20130120111258/http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1/">M</a><a href="https://web.archive.org/web/20130106185309/http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2">V</a><a href="https://web.archive.org/web/20130124092547/http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-3/">C</a><a href="https://web.archive.org/web/20130109001131/http://www.sencha.com/blog/architecting-your-app-with-sencha-touch-2-mvc/">pattern</a>, tools that handles code dependency, compression and native packaging, etc. Albeit daunting, learning and embracing all of those offerings makes a quite enjoyable coding experience and rewards me with development effieciency overall. Sometimes though, I need complete control of a visual component that doesn’t exist in the framework. How to make this work with everything mentioned above is implied in various tutorials posted by the Sencha team, but I couldn’t find a clear illustration of that, which is why I decided to write one here. Here’s our goal: make a component that displays data from a model with our own custom HTML; manage it along with some provided components from the framework and follow the MVC pattern. I assume you have the basics set up. I’m using Sencha Cmd 3.0.0.250, Sencha Touch SDK 2.1.0 and OS X Mountain Lion as of this writing. Let’s start by generating a MVC-ready skeleton project called HelloWorld. Go to the SDK’s folder and type: <pre><code> sencha generate app HelloWorld ~/helloworld </code></pre> replace the last parameter with the path you would like for the project files to stay. We’ll be working in this folder from now on. In the skeleton project, a main view was created under <code>app/view/Main.js</code> and declared as dependency for <code>app.js</code>. An instance of it is created when the app finished loading. We’ll keep this setup as our main view. Let’s reduce<code>app/view/Main.js</code> to a simplest possble form for our purposes: <pre><code> Ext.define('HelloWorld.view.Main', { extend: 'Ext.Container', config: { items: [ { xtype: 'helloview' } ] } }); </code></pre> Following the convention, we name the class in corrispondance with its filepath within the <code>app</code> folder (‘view/Main.js’ => ‘view.Main’). All classes created with <code>Ext.define</code> should follow this convention so that Sencha tools can relate code dependencies to file structure and do its magic for us. We’ll circle back to this. Our main view will be a plain container and has a <code>helloview</code> in it. An<code>Ext.Container</code> has the ability to … contain stuff. Specifically, it can organize <code>Ext.Component</code>s visually. <code>helloview</code> will be that component. Let’s define it next. Create the file <code>app/view/HelloView.js</code> as the following: <pre><code> Ext.define('HelloWorld.view.HelloView', { extend: 'Ext.Component', xtype: 'helloview', config: { tpl: '<div class="greeting">Hello, {name}!</div>' } }); </code></pre> As promised, <code>HelloWorld.view.HelloView</code> is a <code>Ext.Component</code>. We declare its<code>xtype</code> to be the one we used in the main view. The really interesting part is its <code>tpl</code> configuration. This is where our customization integrates with the rest of the Sencha Touch framework, so it’s worth dive into a bit deeper. (Caution: <code>tpl</code> can not be mixed with <code>items</code>, if you want standard components mixed in with yours, make them share a container and arrange a proper layout there.) Take a look at the official <a href="https://web.archive.org/web/20130117172701/http://docs.sencha.com/touch/2-1/#!/api/Ext.Component-cfg-tpl">documentation for <code>tpl</code></a>. It accepts an<a href="https://web.archive.org/web/20130117172701/http://docs.sencha.com/touch/2-1/#!/api/Ext.XTemplate"><code>Ext.XTemplate</code></a>, which is basically free-range HTML plus some syntax to insert data provided to the component. Apply all your HTML skills here! For illustration purposes, we only throw in a basic <code><div></code>. The <code>{name}</code> part will be replaced by the actual data, which every<code>Ext.Component</code> has as a configuration option by default. Being such option means two things: <pre><code>1. You can specify its value in the class definition, as we did for `tpl`. 2. It gets a "getter/setter" that let you query/change its value at anytime through the instance's existence. </code></pre> We’ll use the setter for <code>data</code> – <code>setData()</code> to populate this field in the template later. <code>setData()</code> accept one raw Javascript object and make its properties accessible to the template. Next, let’s make a simplistic model in <code>app/model/Greetee.js</code>: <pre><code> Ext.define('HelloWorld.model.Greetee', { extend: 'Ext.data.Model', config: { fields: ['name'] } }); </code></pre> A model, with a field ‘name’. Hey, that’s <code>as simple as possible, but no simpler</code>, Einstein would endorse it! We won’t use any proxy or store in conjunction with the model because we only need to show how a customized view works within the Sencha Touch MVC pattern. Speaking of which, a controller does just that. So to tie everything togeter, here’s <code>app/controller/Main.js</code>: <pre><code> Ext.define('HelloWorld.controller.Main', { extend: 'Ext.app.Controller', config: { models: ['Greetee'], views: ['HelloView'], refs: { helloView: '.helloview' } }, launch: function() { var m = Ext.create('HelloWorld.model.Greetee', { name: 'World' }); return this.getHelloView().setData(m.getData()); } }); </code></pre> To get reference to the view components, Sencha Touch provide <code>refs</code> in controllers, through which we map <code>hello</code> to our customized component’s xtype. There are more details about this in the <a href="https://web.archive.org/web/20130117172701/http://docs.sencha.com/touch/2-1/#!/guide/controllers">offical documentation</a>. We now can use <code>getHelloView()</code> in other methods. <code>launch()</code> gets invoked after everything gets loaded, and we tie the model and the view together here. Again, a little imagination might help. By that I mean the data source of the model could be from a RESTful network API, a picture from a phone camera via Phonegap, a record from browser’s localstorage, etc. We simply created one in memory for illustration. We use <code>getHelloView()</code> to get reference to our <code>helloview</code> instance, then use its <code>setData()</code> to populate its template field. But we can’t pass in the model object directly (as mentioned above, a raw Javascript object is needed), so we convert it with its <code>getData()</code> method. Finally, we specify the <code>models</code> and <code>views</code> involved with this controller in<code>config</code> so that the files of these classes gets loaded properly. For the same purpose, we need to open <code>app.js</code> and add the following line into the object passed to <code>Ext.application()</code> (which is a controller too): <pre><code> controllers: ['Main'], </code></pre> This makes the framework aware of our <code>HelloWorld.controller.Main</code>. It’s unnecessary to use the full class name becaue we followed the naming convention. At this point, our code is complete. Go to the project folder in terminal and fire up a web server: <pre><code> python -m SimpleHTTPServer </code></pre> Open <a href="http://localhost:8000">http://localhost:8000</a> in your browser and take a gander! A screenshot of this app would be an overkill, if you follow along correctly, the phrase “Hello, World!” will show, and that’s all. So this long-winded excercise results in not much. But I hope you won’t find it pointless. When I try to construct my app UI with Sencha Touch, I first try my best to make the Senche component work with the design. When breaking out and customize is inevitable, I try to stay within the framwork as much as possible to make the most out of it. What’s described in this article is a common way to do that. Fri, 11 Jan 2013 00:00:00 -0700 https://duan.ca/2013/01/11/hello-world-the-hard-way-with-sencha-touch/ https://duan.ca/2013/01/11/hello-world-the-hard-way-with-sencha-touch/ 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/