《(入门篇07)using device profiles》由会员分享，可在线阅读，更多相关《(入门篇07)using device profiles（10页珍藏版）》请在金锄头文库上搜索。
1、Using Device Profiles作者：一夕 QQ：944281625本系列文章为翻译文章，翻译自 API 文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。现如今的手机 Web 应用程序，都期望能运行在各种各样的设备中，从个头比较小的手机到大屏幕的平板电脑，但是这些设备都有着不同的屏幕分辨率。在这种情况下就要求我们所编写的应用程序能适应于不同的设备，来满足我们的用户需求。这时我们便需要使用设备的配置文件了。Setting up Profiles设备的配置文件存在于我们应用程序的上下文中，例如，我们想要创建一个 email 的应用程序，
2、可以运行在手机和平板电脑上，我们可以在我们的 app.js 文件中进行如下的定义：Ext.application(name: Mail,profiles: Phone, Tablet );我们并没有给我们的应用程序一个 launch 函数，那么此时程序需要做的便是加载这两个配置文件。按照惯例，这两个文件会存放在 app/profile 目录下，分别是 Phone.js 和Tablet.js。我们可以简单的看看手机版的配置文件：Ext.define(Mail.profile.Phone, extend: Ext.app.Profile,config: name: Phone,views: Mai
3、n,isActive: function() return Ext.os.is.Phone; );其实 Tablet 的配置文件和该文件有着相同的模式。在该配置文件中，我们只提供了三个有用的信息，一个便是我们的配置文件的名字，一组可选的视图，还有便是 isActive 函数。isActive 函数决定了我们的配置文件是否会在设备上启用。目前我们只能判断是手机还是平板电脑，通过我们框架中的 Ext.os.is.?函数来实现判断，实现我们特定的逻辑功能。Determining the Active Profile一旦我们的配置文件被加载了，他们的 isActive 函数就会轮流调用，应用程序只会捕
4、获第一个返回 true 的配置文件，并在该文件的引导下启动，并把该配置文件设置为应用程序的当前配置文件，装载全部的依赖项models，views，controllers 和其他程序需要的类。这些都是已激活配置文件中指定的。让我们看看下面的例子：Ext.application(name: Mail,profiles: Phone, Tablet,models: User,views: Navigation, Login );app.js 中的代码如上，假如我们的程序运行在手机上，那么我们看看手机的配置文件是怎么写的：Ext.define(Mail.profile.Phone, extend: E
5、xt.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/目录下，其实不仅仅是视图文件，其他的文件都是一样的，例如 Controll
6、er，Model 等都是一样的。The Launch Process所有使用配置文件的应用程序都有相同的启动顺序，在所有的依赖文件都被加载完成之后，会加载如下内容：1.Controller 会被初始化，每一个 Controller 的 init 函数会被调用。2.紧接着便是配置文件中的 launch 函数被调用。3.然后是应用程序的 launch 函数被调用。4.最后是控制器中的 launch 函数被调用。当我们使用配置文件的时候，通常都会使用配置文件中的 launch 函数来创建我们应用程序的原始界面。也就意味着我们不再使用 app.js 中的 launch 函数了，因为我们需要根据不同的设
7、备启用不同的配置文件来引导程序建立不同的 UI。一个典型的配置文件 launch 函数的例子如下：Ext.define(Mail.profile.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 函数都是可选的，如果我们没有定义的话，他们都不会被调用的。Specializ
8、ing Views大多数情况下，我们只会为应用程序定制不同的应用程序界面和控制器，通常共用相同的数据模型。我们看看下面这个 Tablet 的配置文件：Ext.define(Mail.profile.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.v
9、iew.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 );所有我们便有了一个超类和一个配置文件专用的子类，子类可以定制超类中的任何内容。在上面的例子
10、中，我们仅仅是改变了标题而已。我们可以轻松的使用这些类定制超类中的任何部分，例如我们定义一个手机的配置文件：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 应用程序，平板电脑的上运行
11、的时候，屏幕左半边显示消息列表，当前信息内容显示在屏幕的右半边。但是手机版上运行时，我们虽然使用相同的消息列表，但是我们使用的是一个 Card 布局，我们手机上没有足够的屏幕空间来同时看见这两个内容。那么就来看看，为了实现我们视图的共享，我们需要怎么做。首先建立两个共享的子类：Ext.define(Main.view.MessageList, extend: Ext.List,xtype: messagelist,/config goes here. );这些类都是简单配置的，为的只是演示。Ext.define(Main.view.MessageViewer, extend: Ext.Pane
12、l,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(Mai
13、n.view.phone.Main, extend: Ext.Container,config: layout: card,items: xtype: messagelist,xtype: messageviewer );在该例子中，我们仅仅使用了一个 Card 布局的容器，把我们需要显示的内容放到里面。我们可能还需要一些其他的逻辑来实现具体的功能，但是上面的代码已经清晰的为我们展示了如何重用我们的这两个视图了。当然我们也可以按照之前的例子创建一个超类用子类继承的方式来实现。Specializing Controllers就像我们之前讲到的 views 一样，许多程序有一些控制器是可以被共享的
14、。不过配置文件间最大的差异在于相关的逻辑顺序。例如，一个平板电脑的程序运行我们在一个页面中完成一项任务，但是手机中则需要多个页面。这里我们有一个简单的手机配置文件，需要加载一个 Main 视图和一个 Messages 的控制器。和之前一样，将会加载 app/view/phone/Main.js 和 app/controller/Messages.js文件：Ext.define(Mail.profile.Phone, extend: Ext.app.Profile,config: views: Main,controllers: Messages,launch: function() Ext.c
15、reate(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
