Sencha學習筆記1: Getting Started with Sencha Touch，sencha學習筆記

Sencha學習筆記1: Getting Started with Sencha Touch，sencha學習筆記

官方英語原文：http://docs.sencha.com/touch/2.3.1/#!/guide/getting_started

What is Sencha Touch? 

初識Sencha Touch

Sencha Touch is a high-performance HTML5 mobile application framework. You can use Sencha Touch to produce a native-app-like experience inside a browser or in a hybrid shell. Sencha Touch supports Android, iOS, Windows Phone, Microsoft Surface Pro and RT, and BlackBerry devices.

Sencha Touch是一個高效能的HTML5行動裝置 App（開發）架構，你可以使用Secha Touch來建立一個內嵌在瀏覽器或者混合外殼中的擁有著有如本地應用體驗一樣的行動裝置 App。 Sench Touch支援安卓，iOS，Windows手機，Microsoft Surface Prop和RT，以及黑莓裝置。

Required Software 軟體需求

1. Download and unzip Sencha Touch. You can unzip the software to any directory. 
2. 下載並解壓Sencha Touch， 你可以把它解壓到任何目錄下面
3. Sencha Touch requires Chrome or Safari. On a mobile device, you can use Chrome, Safari, or Internet Explorer 10 or 11. 
4. Sencha Touch(在開發機器端)需要Chome或者Safari的支援。在一個行動裝置上面，你也可以用Chrome，Safari，或者IE 10或者11來運行。
5. Sencha Cmd. | Sencha Cmd
   Sencha Touch 2.3.1 requires Sencha Cmd 4.0.1, 4.0.2, or later. To check that you have correctly installed Sencha Cmd, type the sencha command, for example: 
6. Sencha Touch 2.3.1需要Sencha Cmd 4.0.1, 4.0.2以及更高版本的支援。你可以在命令列中輸入sencha命令來檢查你的系統上是否已經正確安裝了Sencha Cmd，比如：

7. $ senchaSencha Cmd vn.n.n...

8. Java Runtime Environment version 1.7. Sencha Cmd is written in Java and needs the JRE to run. Note: If you are building an Android app using Windows, you must install the Java SDK. You can build an iOS app under Windows with the JRE, but not an Android app. |
9. Java Runtime Environment版本1.7的支援。Sencha Cmd是使用Java編寫的所以需要JUE的支援才能運行。注意：如果你是使用Windows來打造一個Android應用，你必須安裝的是Java SDK。如果在Windows使用JRE的話，你只能打造iOS應用，而不能支援Android應用。
10. Ruby to create the compiled CSS used by Touch.
11. Sencha Touch用來編譯CSS的編譯器 - Ruby的支援。
    
    • Windows: Download Ruby from rubyinstaller.org. Download the RubyInstaller .exe file and run it.
    • Windows：從rubyinstaller.org中下載Ruby。下載完RubyInstaller.exe後直接運行即可。
    • Mac: Ruby is pre-installed. You can verify its presence with the ruby -v command.
    • Mac：在Mac上Ruby是已經預先安裝了的。你可以執行命令ruby -v來檢查Ruby是否存在。
    • Ubuntu: Use sudo apt-get install ruby2.0.0 to download and install Ruby.
    • Ubuntu： 請使用命令"sudo apt-get install ruby2.0.0"來下載並安裝Ruby。

If you are running the IIS web server on Windows, manually add application/x-json as a MIME Type for Sencha Touch to work properly. For information on adding this MIME type see the following link: http://stackoverflow.com/a/1121114/273985.

如果你使用的是Windows的IIS作為網路伺服器，請手動把“application/x-json"這個MIME類型增加到IIS的MIME支援列表裡面以便Sencha Touch可以正常工作（天地會珠海分舵註：在你的IIS網頁組態管理中會有一個MIME配置表徵圖來允許你進行這般設定）。關於如何增加MIME類型的知識請查看以下連結： http://stackoverflow.com/a/1121114/273985。

以下是天地會珠海分舵Win 2008上的IIS管理主控台的MIME位置樣本：

Installation 安裝

Extract the Sencha Touch download zip file, which can be in any directory.

把下載下來的Sencha Touch的zip檔案解壓出來，你可以解壓到任何目錄下面。

Start your web server. If using the Sencha Cmd web server, change directory to the location from which you want to serve your application, and start the Sencha Cmd web server with the sencha web start command. To stop the web server, press CTRL+C, or open another command line window and type sencha web stop.

啟動Web伺服器。如果你使用的是Sencha Cmd的Web伺服器，請在命令列中定位到伺服器需要服務的你的應用目錄下面(天地會珠海分舵：比如你的應用是通過以下命令產生的”sencha generate app MyApp ../MyApp", 那麼你就先cd到../MyApp這個目錄下面)，然後使用Sencha Cmd的"sencha web start"命令來啟動Web伺服器。關閉該伺服器的話你只需要發送CTRL+C按鍵組合就好了，當然，你也可以通過開啟另外一個命令列console來發送“sencha web stop”命令來關閉該Web伺服器。

If you are using another web server such as XAMPP (a pre-configured Apache HTTP server), create an app directory where your web server expects to find apps. In the case of XAMPP, it's the <XAMPP_install_dir>/htdocs directory.

如果你使用的是另外一種Web伺服器，比如XAMPP(一個預配置好的Apache HTTP伺服器)，請先建立一個你的Web伺服器將在其下面尋找應用的應用目錄，如在XAMPP中，該目錄應該存在於<XAMPP安裝目錄>/htdocs下面。

Generating Your First App 產生您的第一個應用

Now that you have Sencha Touch and Sencha Cmd installed, you can generate an application.

一旦你安裝了Sencha Touch和Sencha Cmd，你就可以產生一個應用了。

Choose or create a directory where your application will reside, change to that directory, and issue the following command:

選擇或者建立一個將要包含你的應用程式檔案的目錄，然後cd到該目錄下面，最後執行以下命令：

$ sencha -sdk /path/to/touch generate app MyApp .

Where:

在該命令中：

1. /path/to/touch is the directory where you unzipped the Touch software.
2. /path/to/touch就是Touch Sencha解壓目錄
3. MyApp is the name you give your application.
4. MyApp就是你的應用的名稱

This generates a skeleton Sencha Touch application namespaced to the MyApp variable and located in the current directory.

這個命令會在目前的目錄下建立一個命名空間為MyApp的Sencha Touch應用的一個架構。

The skeleton app contains all the files you need to create a Sencha Touch application, including the default index.html file, a copy of the Touch SDK, the CSS file, and images and configuration files for creating native packages for your app.

該架構將包含你建立一個Sencha Touch應用所需要的所有檔案，包括預設的index.html檔案，Touch SDK的一個copy，CSS檔案，以及你去建立一個應用所需的圖片資源和設定檔。

You can verify if your application has generated successfully by opening it in a web browser. If you extracted the SDK to your webroot folder, navigate to http://localhost/MyApp. If you are using the Sencha Cmd web server, you can access served applications with the http://localhost:1841/URL.

你可以通過開啟一個瀏覽器來驗證你的應用是否正確產生。如果你的SDK是解包到其他的Web伺服器的webroot檔案夾下面的，請定位到http://localhost/MyApp。如果你使用的Sencha Cmd的Web伺服器的話，你可以直接通過以下URL來訪問你的應用：http://localhost:1841/URL

Note: If this command fails in Linux, re-install Sencha Cmd as a normal user versus installing with root privileges.

注意：如果以上的應用產生命令在Linux下運行失敗的話，請重新在你的Linux下面以普通使用者的許可權安裝Sencha Cmd而不是用Root使用者。

Explore the Code 代碼檔案探究

The following listing provides a short description of each file and directory, the complete list of the generated files can be found in the Sencha Cmd documentation:

下面的列表提供了對產生的應用目錄下面的所有檔案和目錄的簡短描述，至於產生的檔案清單的完整描述請查看Sencha Cmd文檔。

• app - The directory containing the Models, Views, Controllers, and Stores for your app.
• app - 該目錄包含了你的應用所用到的(MVC)的Models，Views，Controllers，以及Stores。
• app.js - The main JavaScript entry point for your app.
• app.js - 你的應用的主入口Javascript代碼檔案。
• app.json - The configuration file for your app.
• app.json - 你的應用的設定檔。
• index.html - The HTML file for your app.
• index.html - 你的應用的HTML檔案
• packager.json - The configuration file used by Sencha Cmd for creating native packages for your application.
• packager.json - Sencha Cmd用來建立原生應用程式套件所用到的設定檔。
• resources - The directory containing the CSS and the images for your app
• resources - 你的應用所用到的CSS和圖片都會存放在該目錄下面。

Open app.js, the main entry point for your app, in your editor.

請在編輯器上開啟app.js這個你的應用的主入口檔案

The launch function is the entry point to your application. In the default application, hide the application loading indicator, and create an instance of our Main view and add it to the Viewport.

其中的”launch“方法就是你的應用的入口。在產生的預設應用中，隱藏掉應用載入指標，然後建立我們Main view的一個執行個體，最後把它加入到Viweport裡面。

The Viewport is a Card layout to which you can add application components. The default app adds the Main view to the viewport so it becomes visible on the screen.

Viewport代表的是卡片式布局，你可以在這布局裡面添加其他組件。預設產生的應用把 Main view加入viewport裡面，使得它可以在視窗中變得可見。

Look at the code inside the Main view.

請查看Main view的代碼細節。

Open app/view/Main.js in your code editor and change a title line to:

請在你的代碼編輯器上開啟app/view/Main.js，然後把title改成如下：

title: 'Home Tab'

Then change another line as follows:

然後把另外一行改成：

title: 'Woohoo!'

Also, change lines as follows:

並且把往下的幾行改成如下所示：

html: [    "I changed the default <b>HTML Contents</b> to something different!"].join("")

Refresh the app in your browser to see the effects of your changes.

最後在瀏覽器上重新整理該應用來查看修改後的效果。

Next Steps 下一步

Follow the First Application guide, which builds on this guide, and helps you create a simple but powerful app in around 15 minutes.

請按照基於本嚮導的”第一個應用嚮導“來協助你在大概15分鐘內建立一個簡單但強大的應用。

Note: As a good practice, when you create an application, keep a copy of your app.js file as Sencha Cmd also updates this file.

注意：作為一個良好的實踐經驗，當你建立一個應用之後，請拷貝一份你的app.js檔案，因為Sencha Cmd會對該檔案進行更新。

If you would like to skip ahead or find out more detailed information about other aspects of the framework, view the following guides and resources:

如果你想先跳過第一個應用嚮導而去找到更多的Sencha Touch架構各方面的詳細資料，請查看下面的一些嚮導和資源連結：

Guides 嚮導

• What's New in Sencha Touch
• Sencha Touch最新訊息
• Components and Containers
• 組件和容器
• Intro to Applications
• 應用引言
• The Layout System
• 布局系統
• The Data Package
• 資料包

Application Examples 應用樣本

• Kitchen Sink

Component Examples 組件樣本

• Carousel
• Forms
• Date Picker

作者	自主部落格		CSDN
天地會珠海分舵	http://techgogogo.com	服務號:TechGoGoGo 掃描碼:	http://blog.csdn.net/zhubaitian