(入门篇07)Using Device Profiles.doc

Using Device Profiles作者：一夕 QQ：944281625本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。现如今的手机Web应用程序，都期望能运行在各种各样的设备中，从个头比较小的手机到大屏幕的平板电脑，但是这些设备都有着不同的屏幕分辨率。在这种情况下就要求我们所编写的应用程序能适应于不同的设备，来满足我们的用户需求。这时我们便需要使用设备的配置文件了。Setting up Profiles设备的配置文件存在于我们应用程序的上下文中，例如，我们想要创建一个email的应用程序，可以运行在手机和平板电脑上，我们可以在我们的app.js文件中进行如下的定义：Ext.application( name: Mail, profiles: Phone, Tablet);我们并没有给我们的应用程序一个launch函数，那么此时程序需要做的便是加载这两个配置文件。按照惯例，这两个文件会存放在app/profile目录下，分别是Phone.js和Tablet.js。我们可以简单的看看手机版的配置文件：Ext.define(Mfile.Phone, extend: Ext.app.Profile, config: name: Phone, views: Main , isActive: function() return Ext.os.is.Phone; );其实Tablet的配置文件和该文件有着相同的模式。在该配置文件中，我们只提供了三个有用的信息，一个便是我们的配置文件的名字，一组可选的视图，还有便是isActive函数。isActive函数决定了我们的配置文件是否会在设备上启用。目前我们只能判断是手机还是平板电脑，通过我们框架中的Ext.os.is.?函数来实现判断，实现我们特定的逻辑功能。Determining the Active Profile一旦我们的配置文件被加载了，他们的isActive函数就会被轮流调用，应用程序只会捕获第一个返回true的配置文件，并在该文件的引导下启动，并把该配置文件设置为应用程序的当前配置文件，装载全部的依赖项models，views，controllers和其他程序需要的类。这些都是已激活配置文件中指定的。让我们看看下面的例子：Ext.application( name: Mail, profiles: Phone, Tablet, models: User, views: Navigation, Login);app.js中的代码如上，假如我们的程序运行在手机上，那么我们看看手机的配置文件是怎么写的：Ext.define(Mfile.Phone, extend: Ext.app.Profile, config: name: Phone, views: Main, Mail.view.SpecialView, models: Mail.model.Message , isActive: function() return Ext.os.is.Phone; );我们的程序首先加载app.js中定义的User，Navigation，Login，然后再加载我们配置文件中定义的内容。如果我们在配置文件中使用的视图文件没有使用完整的路径名称的话，那么该文件需要存放在app/view/phone/目录下，其实不仅仅是视图文件，其他的文件都是一样的，例如Controller，Model等都是一样的。The Launch Process所有使用配置文件的应用程序都有相同的启动顺序，在所有的依赖文件都被加载完成之后，会加载如下内容：1. Controller会被初始化，每一个Controller的init函数会被调用。2. 紧接着便是配置文件中的launch函数被调用。3. 然后是应用程序的launch函数被调用。4. 最后是控制器中的launch函数被调用。当我们使用配置文件的时候，通常都会使用配置文件中的launch函数来创建我们应用程序的原始界面。也就意味着我们不再使用app.js中的launch函数了，因为我们需要根据不同的设备启用不同的配置文件来引导程序建立不同的UI。一个典型的配置文件launch函数的例子如下：Ext.define(Mfile.Phone, extend: Ext.app.Profile, config: name: Phone, views: Main , isActive: function() return Ext.os.is.Phone; , launch: function() Ext.create(Mail.view.phone.Main); );值得注意的是，应用程序和配置文件中的launch函数都是可选的，如果我们没有定义的话，他们都不会被调用的。Specializing Views大多数情况下，我们只会为应用程序定制不同的应用程序界面和控制器，通常共用相同的数据模型。我们看看下面这个Tablet的配置文件：Ext.define(Mfile.Tablet, extend: Ext.app.Profile, config: views: Main , launch: function() Ext.create(Mail.view.tablet.Main); );该程序运行在平板电脑中的时候，便会创建我们已经定义好的Main界面了，该界面代码如下：Ext.define(Mail.view.tablet.Main, extend: Mail.view.Main, config: title: Tablet-specific version );存放路径为app/views/tablet/Main.js。通常情况下我们都会定义一个视图类来扩展Sencha Touch中的内部类，在我们上面的例子中，我们扩展了我们自己的类，该类如下：Ext.define(Mail.view.Main, extend: Ext.Panel, config: title: Generic version, html: This is the main screen );所有我们便有了一个超类和一个配置文件专用的子类，子类可以定制超类中的任何内容。在上面的例子中，我们仅仅是改变了标题而已。我们可以轻松的使用这些类定制超类中的任何部分，例如我们定义一个手机的配置文件：Ext.define(Mail.view.phone.Main, extend: Mail.view.Main, config: title: Phone-specific version, items: xtype: button, text: This is a phone. );Sharing sub views除了我们上面说的这些，其实更常见的一种情况就是我们共享视图中的部分组件，并把他们有机的组织起来实现我们的界面以适应不同的设备。例如：我们的email应用程序，平板电脑的上运行的时候，屏幕左半边显示消息列表，当前信息内容显示在屏幕的右半边。但是手机版上运行时，我们虽然使用相同的消息列表，但是我们使用的是一个Card布局，我们手机上没有足够的屏幕空间来同时看见这两个内容。那么就来看看，为了实现我们视图的共享，我们需要怎么做。首先建立两个共享的子类：Ext.define(Main.view.MessageList, extend: Ext.List, xtype: messagelist, /config goes here.);这些类都是简单配置的，为的只是演示。Ext.define(Main.view.MessageViewer, extend: Ext.Panel, xtype: messageviewer, /config goes here.);为了实现我们的目的，我们在平板电脑的主界面中，如下编写代码：Ext.define(Main.view.tablet.Main, extend: Ext.Container, config: layout: fit, items: xtype: messagelist, width: 200, docked: left , xtype: messageviewer );该代码会在屏幕左侧创建一个宽度为200px的消息列表，右侧则是当前消息的详细内容。我们在手机配置文件中的界面创建代码如下：Ext.define(Main.view.phone.Main, extend: Ext.Container, config: layout: card, items: xtype: messagelist , xtype: messageviewer );在该例子中，我们仅仅使用了一个Card布局的容器，把我们需要显示的内容放到里面。我们可能还需要一些其他的逻辑来实现具体的功能，但是上面的代码已经清晰的为我们展示了如何重用我们的这两个视图了。当然我们也可以按照之前的例子创建一个超类用子类继承的方式来实现。Specializing Controllers就像我们之前讲到的views一样，许多程序有一些控制器是可以被共享的。不过配置文件间最大的差异在于相关的逻辑顺序。例如，一个平板电脑的程序运行我们在一个页面中完成一项任务，但是手机中则需要多个页面。这里我们有一个简单的手机配置文件，需要加载一个Main视图和一个Messages的控制器。和之前一样，将会加载app/view/phone/Main.js和app/controller/Messages.js文件：Ext.define(Mfile.Phone, extend: Ext.app.Profile, config: views: Main, controllers: Messages , launch: function() Ext.create(Mail.view.phone.Main); );我们知道，我们手机和平板电脑的控制器文件共享大多数的功能函数，所以我们可以创建一个控制器的超类：Ext.define(Mail.controller.Messages, extend: Ext.app.Controller, config: refs: viewer: messageviewer, messageList: messagelist , control: messageList: itemtap: loadMessage , loadMessage: function(item) this.getViewer().load(item); );该控制器文件，实现如下3项功能：1. 建立我们需要的视图的引用。2. 对messageList进行事件监听。3. 当loadMessage被触发的时候，将所选项加载到视图中。既然我们了解到这些，那么我们就能轻松的创建我们手机版的控制器了：Ext.define(Mail.controller.phone.Messages, extend: Mail.controller.Messages, config: refs: main: #mainPanel , loadMessage: function(item) this.callParent(arguments); this.getMain().setActiveItem(1); );我们继承了消息的超类，并提供了两个功能：1. 我们专门为手机版UI添加了其他的引用。2. 继承了loadMessage函数实现原始的逻辑功能，同时并设定了主界面的激活项。值得我们注意的是，虽然我们并没有声明Mail.controller.Message，但是该类会被自动加载，因为我们的Mail.controller.phone.Messages类继承了它。What to Share在上面的例子中，我们共享了一些refs。其实我们还可以共享单一事件的监听。一