Go play with me. Sencha Touch Mobile WEBAPP Development (i)

1. Catalogue

• Introduction to the mobile framework, why choose Sencha Touch?
• Environment construction
• Create a project framework, Introduction to framework Files
• Create a simple TabPanel case
• How to customize Icons
• WebApp Product Testing and release
• HTML5 offline cache
• Published as Android/ios local app app

Introduction to the mobile framework, why choose Sencha Touch?

Currently on the market, mobile application Web framework, also known as the wind and wind, constantly emerging, each called their own best. Several common frameworks are mainly jquery Mobile,dojo Moble,sencha touch, I am here is extremely recommended Sencha touch, as far as it is good, not I decide, only you personally used, did the project can understand his charm As for the Spit party that has never been used, please take a detour.

Sencha Touch is implemented using HTML5,CSS3 and JavaScript, which can be used on Android, IOS, WP, BlackBerry platforms, or on other platforms with HTML5 compatible Web browsers. More detailed introduction can go to the official reading http://www.sencha.com/products/touch/, here not wordy.

As for why I chose Sencha Touch, the reasons are as follows:

• Sencha's products, if you are skilled extjs, almost zero learning costs, smooth transition to touch development, Sencha is a very active organization, technical updates and support are well protected, the World Fortune 100, 50% are using their products
• Perfect support for mobile Android, IOS, WP, BlackBerry, etc., and can be run on any HTML5 compatible or WebKit-based browser (chrome,safari,360| Sogou speed mode), write once, N-time multiplexing
• Address your traffic concerns with ultra-strong cmd compression, HTML5 caching, and over-the-air technology for offline access
• Perfect support for local packaging, a one-line command to package the entire webapp into Nativeapp, very convenient, no need to make any changes (I am shocked that the remote service can be accessed directly through Ajax without cross-domain issues)
• MVC development model, full decoupling, clear hierarchy
• For different platforms, differentiated treatment, a app,phone and tablet two kinds of display
• Convenient sencha cmd command tool, similar to Ruby's command line, assisted development
• Rich Report controls
• The industry's most complete and sophisticated API documentation, a wealth of learning materials, almost a glance to understand, strong forum support
• Stability, JSONP, compatibility and other small details, perfect
• such as
• For more information, see API:HTTP://DOCS.SENCHA.COM/TOUCH/2.2.1/.

Environment construction

1. Download the Sencha Touch SDK package http://www.sencha.com/products/touch/download/

2. Confirm that the jdk1.6+,1.7 is installed with the best

3.ruby1.9.3 or earlier version, but must not install 2.0,: http://rubyinstaller.org/downloads/

4.android-sdk-tools, if you don't want to pack into Nativeapp, you don't have to download

5.Sencha Cmd:http://www.sencha.com/products/sencha-cmd/download

6. Note Add the Jdk,ruby,sencha cmd to the environment variable

What can Sencha CMD do? See: Http://docs.sencha.com/touch/2.2.1/#!/guide/command

Create a project framework

OK, the environment is set up, below we create the project framework through a line of Sencha cmd (abbreviated CMD)

#  first confirm the entry to the Sencha-touch-2-sdkcd/path/to/sencha-touch-2-sdksencha generate app Myapp/path/to/www/myapp

OK, it's easy. We built our own project architecture, and all the development in the future was developed in this project architecture.

Introduction to Framework Files

Some configuration parameters run by the. Sencha:cmd command

App: Entire project

Resources: project resource files, including Css,images,icons[app icon],startup[splash screen image]

Touch:touch core packages, source files, resource files, etc.

App.js: The entire project portal, configured to load those JS files and so on

Index.html:app Start Page

Here you need to focus on the App.json file and the Packager.json file

Starting with st2.x, the js,css that are loaded when the project starts is not written in index.html as before, but dynamically loaded in the form of App.json configuration.

There are many ways to start loading st2.x, you can refer to http://www.cnblogs.com/dowinning/archive/2012/03/23/2413071.html

This is the official way, because later we can directly through the cmd command to the project compression release, or packaging, if the directory structure is destroyed, CMD will not be able to execute.

More details please crossing network: Http://docs.sencha.com/touch/2.2.1/#!/guide/command_app

App.json Analysis

IIS Express with IIS or VS may not be able to load the MIME type and requires manual configuration of the mimehttp://www.cnblogs.com/qidian10/p/3289816.html

  1 {2/** 3 * Program name, generated by cmd time 4 */5 "name": "Hzyapp", 6/** 7 * Start Page 8 */9 "Indexhtmlpath": "Index.html", ten/** * The absolute URL to this application in development environment, i.e: The URL to run this application your Web browser during development, e.g: "http://localhost/myapp/index.html" . * * This value is needed when build to resolve your application ' s dependencies if it requires server-side Resources * that is not accessible via file system protocol. * * "url": null,/** * List of all JavaScript assets in the right execution order. * Each item is a object with the following format:21 * {$ * "path": "Path/to/script.js              "//Path to file, if local file it must is relative to this app.json file *" Remote ": True (Optional) *//-Defaults to UndefiNed (Falsey) to signal a local file which'll be copied *//-Specify True      If this file is a remote file which won't to be copied * "Update": "Delta"//(Optional) 27                                      *//-If not specified, the This file is only being loaded once, and 28 * Cached inside localstorage until this value is changed.                                      *//-"Delta" to enable over-the-air Delta update for this file 30 *          -' full ' means full update would be made if this file changes 31 * "X-bootstrap": True//(Optional) *//indicates a development mode O   nly dependency.       *//These files is not being copied into the build directory or referenced 34                          *            The Generate App.json manifest for the micro loader. 35 * 36 *} 37 */38 * * required in the application of the extension JS file */"JS": [+] "path": "Touch /sencha-touch-all.js "," X-bootstrap ": True},{" path ":" Common/global.js ",/* For example just I  Self-defined */"update": "Delta"},{"path": "App.js", "bundle": true,/*         Indicates that all class dependencies is concatenated into the this file when build */"Update": "Delta" 50 } [],/** * List of all CSS assets in the right inclusion order.  * Each item is a object with the following format:55 * {* * * "path": "Path/to/item.css"  Path to file, if local file it must is relative to this app.json file * "remote": TRUE// (Optional) *//-Defaults to undefined (Falsey) to signalA local file which would be copied *//-Specify TRUE if the this file is a remote                                     File which won't to be copied * "Update": "Delta"//(Optional) 61 *                                     -If not specified, the This file is only being loaded once, and 62 *                                     Cached inside Localstorage until this value was changed to either one below 63 * -"Delta" to enable over-the-air Delta update for this file 64 */ /-' full ' means full update would be made when the this file changes 65 * 66 *} 67 */68/* required in the application C         SS File */"CSS": [+] "path": "Resources/css/app.css", "Update": "Delta" 73         },{"path": "Resources/css/icons.css",/* For example, just my own definition of the icon css*/"Update": "Delta" 76 } 77], 78/** The cache configuration of HTML5 * * * * * * * appCache ": {82/** 83 * Cached things, even if offline is available HTTP://WWW.CNBLOGS.COM/QI          dian10/p/3292876.html */"cache": [index.html "87], 88/** 89 * Do not cache something, offline cannot be used */"network": [92 "*" 93], 94/** 95 * Error page */"fallback": [] 98},/**101 * Extra resources to being copied along when B uild102 */103 "Resources": [104 "Resources/images", "resources/icons", 106 "RESOURCES/S" Tartup "107],108 109/**110 * cmd compile project, automatically ignore files 111 */112" Ignore ": [113"/.svn$ "114],11 5/**117 * Directory path to store all previous production builds. Note that the content generated inside this directory118 * must is kept intact for proper generation of deltas Betwee n updates119 */120 "Archivepath": "Archive", 121 122/**123 * List of names to require for the cmd build process124 */125 "requires": [126],127 128 /**129 * Uniquely generated ID for the application, used as prefix for localstorage keys.130 * normally Should never change this value.131 */132 "id": "3c292300-172c-4bee-bbaa-d2e783f75677" 133}

View Code

App.json file in the JS section, the default development of the use of the Sencha.js, which will lead to the entire app loading JS is loaded ST's source code files, the speed will be very slow, Here I changed to Sencha-all.js file, directly loaded his compiled package, efficiency will greatly improve

Packager.json This file is for app packaging, wait until the part of the project release is resolved

Create a simple TabPanel case

We open the App folder and add the following files to the view:

The code for each section is as follows:

 1//<debug> 2 Ext.Loader.setPath ({3 ' Ext ': ' Touch/src ' 4}); 5//</debug> 6 ext.application ({7 name: ' Hzyapp ', 8 requires: [9 ' Ext.messagebox '],11 V Iews: [' Main '],12 icon: ' ' resources/icons/icon.png ': ' Resources/icons/icon~ipad.png ',     ' resources/icons/[email protected ': ' 144 ': ' resources/icons/[email protected ' 17         },18 isiconprecomposed:true,19 startupimage: {320x460 ': ' Resources/startup/320x460.jpg ', 21 ' 640x920 ': ' resources/startup/640x920.png ', ' 768x1004 ': ' resources/startup/768x1004.png ', ' 748x1024 ': ' Resources/startup/748x1024.png ', ' 1536x2008 ': ' resources/startup/1536x2008.png ', ' 1496x2048 ': ' Resour         Ces/startup/1496x2048.png '},27 launch:function () {//Destroy the #appLoadingIndicator element29 Ext.fly (' Apploadingindicator '). Destroy (); Ext.Viewport.add(Ext.create (' HzyApp.view.Main '));},32//HTML5 Cache Update onupdated:function () {Ext.Msg.confirm (35 "Update", 36 "system has been automatically updated to the latest version, is it reloaded? ", PNs function (buttonid) {ButtonID = = = ' Yes ') {Window.location.re Load (); 40}41}42); 43}44});

App.js

1 ext.define (' HzyApp.view.Main ', {2     Extend: ' Ext.tab.Panel ', 3     alias: ' Widget.main ', 4     requires: [5         ' Ext.titlebar ', 6         ' HzyApp.view.message.Main ', 7         ' HzyApp.view.history.Main ', 8         ' HzyApp.view.favorite.Main ', 9         ' HzyApp.view.system.Main ', ten         ' HzyApp.view.user.Main '     ],12     Config: {         id: ' Hzyappviewmain ',         fullscreen:true,15         tabbarposition: ' Bottom ', +         items: [{17             xtype: ' Messagemain '         , {             xtype: ' Systemmain '         , {             xtype: ' Favoritemain '         , {             xtype: ' Historymain '         , {             xtype: ' Usermain '         }]27}28     });

App/view/main.js

 1 ext.define (' HzyApp.view.favorite.Main ', {2 extend: ' Ext.navigationview ', 3 alias: ' Widget.favoritemain ', 4 Config: {5 title: ' Favorites ', 6 iconcls: ' Favorites ', 7 Autodestroy:false, 8 Defaultbackbutt Ontext: ' Return ', 9 Navigationbar: {Ten items: [One-iconmask:true,1 3 iconcls: ' Refresh ', + action: ' REFRESHKB ', align: ' right ' 1                     6},17 {hidden:true,19 iconmask:true,20                 Iconcls: ' Chat ', Action: ' Toreply ', align: ' right ' 23                     },24 {hidden:true,26 iconmask:true,27              Iconcls: ' Compose ', ' Action: ' Toscore ', align: ' right ' 30}31        ]32 },33 items: [{html]: ' This'll display favorite urls! ' 36}37]38}39});

App/view/favorite/main.js

The main file of the other folder is similar to the favorite, just need to change the title and Iconcls,: Http://files.cnblogs.com/qidian10/view.rar

Of course, these view, store, model, controller files, you can completely through the cmd command to create

Cd/path/to/www/myappsencha Generate model User Id:int,name,email
If you know the command parameter, enter it directly: Sencha Generate model

OK, create the completed these files, you should be able to see your own interface up, but unfortunately it is estimated that you do not see your icon iconcls icon, should have two icons is my custom.

Senchatouch how to use their own definition of the icon is also a great learning, ST using Sass Technology, the icon in 2.2 All changed into the form of fonts, that is, you see the icon is actually a font (such as a)

How to customize Icons

So how do I customize icon icons in Sencha Touch 2.2? Provides a simple way to http://www.cnblogs.com/qidian10/p/3292669.html

After learning to customize the icon, add the required icon,css to the App.json CSS block

WebApp Product Testing and release

OK, no accident, now a complete demo application has been shown in front of you.

So far, if you are not too charge flow and load efficiency, in fact, an application has been completed, you can directly use.

But Sencha gives us a better way to publish the app, to compress the resources needed in the project directly, to HTML5 the offline cache, so that our application is available offline when the first load is completed (except for data access)

Sencha offers us 4 ways to publish.

• Testing: For testing, QA use version
• Package: Out-of-Web server, local HTML file resource bundle
• Production: It is the release of WebApp products
• Native: Pack into Android apk, or iOS app Local install file

We just need to execute a single line of command in CMD to publish our product:

#production, testing,native,package# into your Sencha app build in the MyApp folder generated by CMD production

OK, project success build, you can see the generated files in Myapp/build/myapp/production, You directly hit the index.html you will find the Instant app opened, because the CMD to help us do the compression work, all the css,js are compressed, and the app's MVC core files are packaged compressed into app.js, reducing the number of requests.

HTML5 offline cache

If you put a published app on a remote server, open index.html for the first time, then cut off the network and refresh the index.html again, you will find that it can still be displayed. Because he's using HTML5 's off-line caching technology.

The Sencha Touch app checks the server for changes every time it is opened, and automatically triggers the OnUpdated method in the App.js to alert the user to updates if there is a change.

If HTML5 offline cache small white classmate, hurriedly lesson: http://www.cnblogs.com/qidian10/p/3292876.html

Oh yes, there's also a need to add MIME types to support HTML5 cache change files Cache.appcache,application/cache-manifest

Published as Android/ios local app app

If you feel that the use of webapp, still not ideal, then you can use another tool of St, packaging Sencha Touch WebApp for the local native app

Here's how to pack Sencha Touch as an android apk

First confirm that ANDROID-SDK-TOOLS,JDK is installed, and the last part of this section starts here:

1. Generate Android Certificate

For simplicity, we set up the private key repository (KeyStore) in the x:/directory, setting the private key warehouse (KeyStore), alias (aliases), and password (password) to "Hzyapp".

$ keytool-genkey-v-keystore hzyapp.keystore-alias hzyapp-keyalg rsa-keysize 2048-validity 10000

Enter keystore Password: (I entered "Hzyapp") what's your first and last name?  [Unknown]: Jack Chenwhat is the name of the Your organizational unit?  [Unknown]: Itwhat is the name of your organization?  [Unknown]: Hzywhat is the name of your city or Locality?  [Unknown]: Jiaxingwhat is the name of your state or province?  [Unknown]:  Zhejiangwhat is the Two-letter country code for this unit?  [Unknown]:  CNIs cn=patrick Chu, ou=training, O=sencha, L=redwood City, St=california, c=us correct?  [No]:  ygenerating 2,048 bit RSA key pair and self-signed certificate (SHA1WITHRSA) with a validity of days
   
    for:cn=jack Chen, Ou=it, O=hzy, l=jiaxing, St=zhejiang, c=cnenter key password for 

OK, so you generate a Hzyapp.keystore certificate, spare.

Above we talk about another file Packager.json unresolved, here parsing, the file is to package the local application configuration file, open file content configuration for Android configuration is as follows:

{"ApplicationName": "Hzyapp", "ApplicationID": "COM.HWAYIFASHIONGROUP.HZYAPP",/* must include two dots */"Bundleseedid": "Kpxfepz        6EF "," versionstring ":" 1.0 "," Versioncode ":" 1 "," icon ": {" $ ":" Resources/icons/icon_android36.png ", "Resources/icons/icon_android48.png": "The", "" "Resources/icons/icon.png": "Resources/icons/icon~ipa"     D.png "," ":" resources/icons/[email protected] "," 144 ":" Resources/icons/[email protected] "}, "InputPath": "./", "OutputPath": ". /build/"," Configuration ":" Debug "," Platform ":" Android ",/* platform, and iOS type */" Certificatepath ":" X:/hzyapp.keystore ",/* Certificate */"Certificatealias": "Hzyapp",/* Certificate alias */"Certificatepassword": "Hzyapp",/* Certificate password */"Sdkpath": "D:/greensoftware/and Roid/android-sdk-windows ",/*ANDROID-SDK path */" Androidapilevel ":" 8 ",/*android version, I used 2.2*/" permissions ": [" I Nternet "," Access_network_state "," CAMERA "," vibrate "," ACCESS_fine_location "," Access_coarse_location "," Call_phone "]} 

After the file is configured successfully, perform the most critical step, packaging the command

If the whole line of green, then congratulations, you succeeded, hurriedly to the/build/myapp/native directory to find your apk bar, haha

OK, installed on the phone, testing, everything normal, speed just, of course, the real and nativeapp ratio, there will inevitably be some shortcomings, but for enterprise-class mobile applications enough.

The end of the article again, the default generated app, installed on Android, the title bar is not hidden, this you only need to change the cmd template file can be

Senchacmd/sencha/cmd/3.1.2.342/stbuild/st-res/android/androidmanifest.xml, I think you should know how to do it! (*^__^*)

OK, this section basically runs through the entire Sencha touch development picture.

The next lesson will introduce the real Sencha touch detail development, deep into the app at all levels (Model,store,view,controller), notes, profile of different equipment, etc., please look forward to.

Can insist on watching friends, do not forget to support the next OH