官方英语原文: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移动应用(开发)框架,你可以使用Secha Touch来建立一个内嵌在浏览器或者混合外壳中的拥有着有如本地应用体验一样的移动应用。 Sench Touch支持安卓,iOS,Windows手机,Microsoft Surface Prop和RT,以及黑莓设备。
sencha
command,
for example: $ sencha Sencha Cmd vn.n.n ...
.exe
file
and run it.
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位置示例:
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下面。
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:
在该命令中:
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用户。
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.js
- The main JavaScript entry point for your app.app.json
- The configuration file for your app.index.html
- The HTML file for your app.packager.json
- The configuration file used by Sencha Cmd for
creating native packages for your application.resources
- The directory containing the CSS and the images for
your app
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.
最后在浏览器上刷新该应用来查看修改后的效果。
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框架各方面的详细信息,请查看下面的一些向导和资源链接:
Sencha学习笔记1: Getting Started with Sencha Touch - 官方Sencha Touch入门指南
原文地址:http://blog.csdn.net/zhubaitian/article/details/43153313