Daniel Duan's Articles About Sencha Touch

Daniel Duan's Articles About Sencha Touch https://duan.ca/tag/sencha-touch/ 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/ Sencha Touch Workflow with GNU Make and Tmux I throw this Makefile to the root directory of my Sencha Touch 2 projects for workflow automation. Assuming you write in CoffeeScript and run Tmux in a terminal: <code>make develop</code> will put <code>compass</code> and <code>coffee</code> to watch mode, in addition to spawning a local web server with Python 3. The three commands will run in three separate Tmux panes. <code>make watch</code> does the same thing sans the server spawning. <code>make</code> simply compile coffee script files and sass files. You can figure out the granular commands with some minimal knowledge of GNU Make. <script src="https://gist.github.com/DaNmarner/5659003.js"></script> Mon, 27 May 2013 15:00:00 -0600 https://duan.ca/2013/05/27/sencha-touch-workflow-with-gnu-make-and-tmux/ https://duan.ca/2013/05/27/sencha-touch-workflow-with-gnu-make-and-tmux/ Dynamic Height for List Item in Sencha Touch 2 tl;dr: Set the <code>itemHeight</code> value to <code>auto</code> and you'll get list items with dynamic height in Sencha Touch 2. In the Ext.List component provided by Sencha Touch 2, all SimpleListItem (or ListItem) has the same height. This means if your items each has content of different height, the list would look awkward. Fear not! Here's a solution (and its discovery). Load up a Ext.List and inspect one of the item element with Chrome/Safari developer tool, you'll find its <code>element.style</code> has <code>height: 47px !important;</code>: <img src="/assets/2013/05/height.png" alt="Default Height on List Item in Sencha Touch 2" /> Here's the key: CSS properties under <code>element.style</code> are set by Javascript. In other words, any attempt to override this property in stylesheet will fail. (Try it by specifying a height value on <code>div.x-list-item</code>, or any other class you suspect, if you need some convincing). So, how do we fix this with Javascript? If you examine the documentaion, Ext.List has a config option <code>itemHeight</code> with a default value. You can set it to a value that works best with all potential heights of your item content, resulting in items with identical heights. Setting <code>itemHeight</code> to <code>auto</code>, however, will make each item container flow with its inner element, thus achive dynamic height. Sun, 19 May 2013 16:03:30 -0600 https://duan.ca/2013/05/19/dynamic-height-for-list-item-in-sencha-touch-2/ https://duan.ca/2013/05/19/dynamic-height-for-list-item-in-sencha-touch-2/ Sencha Touch 2.2 Alpha Sass Bug Workaround Sencha <a href="http://cdn.sencha.com/touch/alpha/touch-2.2.0-alpha.zip">released</a> a new version Sencha Touch with Windows Phone 8 support. But since it's an alpha, there are a few more things to do than what the <a href="http://cdn.sencha.com/touch/alpha/2.2.0.52/release-notes.html">release note</a> says to get it working. One thing I've noticed is that when you generate a new app with <pre><code>sencha generate app Foo path/to/foo </code></pre> and make the changes to <code>resources/sass/app.scss</code> according to the release note, <code>compass compile path/to/foo/resources/sass</code> fails complaining a font file is missing: <pre><code>File not found or cannot be read: path/to/foo/resources/sass/stylesheets/fonts/pictos/pictos-web.woff </code></pre> To fix this, copy the needed fonts to where it supposed to be: <pre><code>cd path/to/foo mkdir -p resources/sass/stylesheets/fonts/pictos cp touch/resources/themes/fonts/pictos/pictos-web.* resources/sass/stylesheets/fonts/pictos/ </code></pre> The next error you'll see from <code>compass compile</code> is caused by the name changes to a few sass files in the framework. Long-story short, you need to change <code>resources/sass/app.scss</code> to the following: <script src="https://gist.github.com/4533833.js"></script> and <code>compass</code> should be happy from there. While you are at it, why not checkout the magical Windows Phone 8 theme included in Sencha Touch 2.2 alpha. Mon, 14 Jan 2013 13:47:00 -0600 https://duan.ca/2013/01/14/sencha-touch-22-alpha-sass-bug-workaround/ https://duan.ca/2013/01/14/sencha-touch-22-alpha-sass-bug-workaround/ Windows Phone 8 Theme in Sencha Touch 2.2 Sencha Touch 2.2 Alpha shipped with Windows Phone 8/IE 10 support. And it's pretty impressive! Just take a look at the starter app under the original theme and the Windows Phone 8 theme: The Default Theme: <img src="/assets/2013/01/original-theme.png" alt="Sencha Touch 2.2 default theme" /> WP8 Theme: <img src="/assets/2013/01/wp8-theme.png" alt="Sencha Touch 2.2 windows phone 8 theme" /> And it only takes a minute or two to get to the second screen. (if you have Sencha Cmd and Sencha Touch SDK 2.2 alpha ready). Here's how. <ol> <li>In SDK folder, generate the app with <code>sencha generate app Foo path/to/foo</code></li> <li><a href="/2013/01/14/Sencha-Touch-22-Alpha-Sass-Bug-Workaround.html">Workaround</a> the bug shipped in this alpha version. This won't be necessary once the bug has been fixed in the next release</li> <li>Open <code>resources/sass/app.scss</code> in the generated project folder )it should look like <a href="https://gist.github.com/4533833">this</a> after step 2). Replace every appearance of the word default to "windows". Then run <code>compass compile resources/sass</code> in the project root.</li> <li>Serve the project in a web server (I usually do <code>python -m SimpleHTTPServer</code>), fire up its url (localhost:800) and...</li> </ol> Boom! Mon, 14 Jan 2013 13:45:00 -0600 https://duan.ca/2013/01/14/windows-phone-8-theme-in-sencha-touch-22/ https://duan.ca/2013/01/14/windows-phone-8-theme-in-sencha-touch-22/ "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/