(入门篇05)Intro to Applications with Sencha Touch 2.doc

Intro to Applications with Sencha Touch 2作者：一夕 QQ：944281625本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。Sencha Touch 2旨在实现应用程序跨平台的高效开发。为了尽可能简单的编写应用程序，ST2为我们提供了一个简单而功能强大的应用程序体系结构，即MVC。在该体系结构下，使我们的代码简洁，可测试并且易于维护，还有诸多的好处：1. History Support：在你的应用程序中提供了一个完整的back按钮，可以链接到应用程序的任何部分。2. Deep Linking：当我们分享deep links时，在屏幕上打开任何界面的时候，都像是链接到一个Web界面。3. Device Profile：使用通用代码便可以让我们轻松的为手机或者平板电脑定制自己的UI。Anatomy of an Application一个应用程序其实就是Models，Views，Controllers，Stores和Profiles的集合，只不过附加了一些特殊的元素，例如程序的图标或者加载图片等等。Model：在应用程序中代表了一个对象类型，简单理解便是数据模型。View：利用Sencha Touch内部组件，负责向用户显示数据，简单解释便是视图。Controller：处理应用程序的交互，监听事件并作出响应，简单理解就是控制器。Store：负责将数据加载到我们的应用程序当中。Profile：为的是在尽可能多的通用代码下，为手机和平板电脑定制UI。简单理解就是配置文件，如果是手机应该加载怎样的UI，平板电脑则加载什么样的UI。通常我们在Sencha Touch的应用程序中都会这样编写application：Ext.application( name: MyApp, models: User, Product, nested.Order, views: OrderList, OrderDetail, Main, controllers: Orders, launch: function() Ext.create(MyApp.view.Main); );那么我们就对以上代码进行简单分析：name：便是我们定义的命名空间，我们的所有代码都在该空间下编写，类似Java中的顶级包名。在上面的代码中，我们我们知道，在view文件夹下有Main.js文件，就等价于该文件的存在路径为MyApp.view.Main。我们通过models,views和controllers来加载相应目录下的文件。至于依赖加载，我们的其他章节会为你阐述的。Controllerscontroller是程序的中心，它把程序的各部分有机的结合在一起，并统一运行控制，使我们的程序正常运行。比如，view中存放的仅仅是页面布局等代码，关于页面逻辑处理的代码几乎都存放在controller中了，实现逻辑代码的统一管理。A simple example接下来的例子展示给我们如何快速的定义控制器。在这里我们使用两个比较常用的控制器配置项：refs和control。通过refs，我们可以轻松的在一个页面中找到任何的组件。在本例中，我们将匹配xtype为formpanel的组件，并将第一个匹配的作为loginForm，并在doLogin函数之后使用该属性。第二件事情便是建立起一个control配置项。就像refs，它使用一个组件查询器来找到所有的formpanel。看看下面具体的代码再说吧：Ext.define(MyApp.controller.Sessions, extend: Ext.app.Controller, config: refs: loginForm: formpanel , control: formpanel button: tap: doLogin , doLogin: function() var form = this.getLoginForm(), values = form.getValues(); MyApp.authenticate(values); );doLogin函数本身是很简单的，因为在定义一个loginForm的refs的时候，控制器会自动为我们生成一个getLoginForm的函数，返回我们需要的那个formpanel。简单理解上面代码的作用便是：refs是我们声明的组件的引用，control中是我们对这些组件需要监听的事件以及触发的函数。refs是指向，control是控制。StoresStores是Sencha Touch中特别重要的部分，并且大多数的窗体都会绑定数据的。简单来说，store其实就像是model的数据实体。例如List和DataView这些组件，渲染的都是store中的model的实体。因为model的实体被添加或者从store中移除时，都会触发这些组件所绑定的数据监听，达到更新或者其他操作的目的。Device Profiles我们知道，Sencha Touch程序会运行在不同设备上，这些设备有着不同的功能或者屏幕分辨率。例如一个用户界面可能比较适合于平板电脑，但是在手机中就显得不是那么合适了，反之亦然。然而我们在编写应用程序的时候，并不想为每一设备都单独写一个程序，那样太麻烦了，我们更倾向于写好的程序，本身能够在手机或者平板电脑中运行并根据设备进行不同的加载，显示不同的UI风格，这是我们便要用好profile文件了。profile文件只是简单的告诉程序，如何针对不同的设备进行不同的加载，我们通常在程序开始的时候便声明它：Ext.application( name: MyApp, profiles: Phone, Tablet, /as before);一旦我们像上面这段代码一样，声明了我们的profile文件，那么程序在加载的过程当中，就会去加载我们app/profile目录下的相应JS文件了。我们可以看看下面这段代码是如何定义一个平板电脑的配置文件的：Ext.define(MyAfile.Tablet, extend: Ext.app.Profile, config: controllers: Groups, views: GroupAdmin, models: MyApp.model.Group , isActive: function() return Ext.os.is.Tablet; );只要Sencha Touch认为我们的应用程序是运行在平板电脑上的时候，isActive函数便会返回true。其实这个判断并不是很准确的，因为目前的平板电脑和手机并没有很明显的界限，所有Sencha Touch在进行判断的时候，只识别ipad，对于其他的平板电脑都会返回false的，也就是说除了ipad，其他的都看做是手机。不过你也可在isActive函数中进行细化，来实现你需要的功能。我们在编写代码的时候，一定要注意，只能有一个true从profile文件中返回，否则的话程序只会识别第一个返回的true，其他的将不会被识别或者被忽略。这时我们应用程序会被设定在当前的配置文件下，并且可以被随时查看。如果检测到我们当前的配置文件，定义了额外的models，views，controllers或者stores，这些都会被自动加载的。但是名字可不是随便写的，这些都是有一定关联的，看下面的例子： views: GroupAdminwill loadapp/view/tablet/GroupAdmin.js controllers: Groupswill loadapp/controller/tablet/Groups.js models: MyApp.model.Groupwill loadapp/model/Group.js如果没有完整的名字的话，该文件必须存放在相应目录下的tablet子目录下，例如所有的视图文件都必须存放在app/view/tablet目录下，但是如果指定了完整的路径的话，只要该文件存在于该路径下就OK了。大多数情况下，我们只会在profile中定义一些额外的视图或者控制器，共享我们应用程序的数据。Launch Process我们可以为每一个应用程序定义一个launch函数，负责应用程序的加载，同时这里也是我们设定应用程序启动逻辑，创建主视图的最好位置。除了在该位置之外，我们还有两个地方可以设定我们程序的启动逻辑。首先是每一个控制器中，我们可以定义一个init函数，该函数会在launch函数之前被调用。另一个便是，如果我们使用了设备配置文件，那么每一个profile中都能定义launch函数，该函数会在控制器的init之后，launch之前被调用。例如我们为设备定义了不同的profile文件，phone和tablet，并在一个平板电脑中运行我们的应用程序，那么启动顺序如下：1. 控制器的init函数被调用。2. Profile中的launch函数会被调用。3. 应用程序的launch函数会被调用。4. 控制器中的launch函数会被调用。当我们使用Profile文件的时候，通常会把启动的逻辑顺序放在Profile的launch中，因为我们会根据不同设备，建立不