Sencha Touch 2 快速入门系列(九) -- 配置(Profile)

本文已添加至Sencha Touch 2快速入门系列索引:http://blog.csdn.net/ardy_c/article/details/7544470

转载请注明出处:http://blog.csdn.net/ardy_c/article/details/8543597



设备配置(Device Profile)

现在是移动web应用将要工作于大量不同的设备中,小至手机,大至平板电脑。而用户希望在不同的设备上能得到不同的体验。尽管如此,你写的大部分应用逻辑和资源都是可以共享使用的。为不同的平台写app,既容易出错,也让人感到烦恼。非常感谢地,Device Profiles给我们提供了一种方式,让我们可以在不同种类的设备之间,尽可能多地共享我们写的代码,并且很容易地根据不同的设备进行行为、外观和工作流的自定义。


建立配置(Setting up Profile)

Device Profiles存在于一个应用的环境之中(context)。例如,如果我们想创建一个email应用为手机及平板使用,我们可以定义我们的app.js,如下

Ext.application({
    name: 'Mail',

    profiles: ['Phone', 'Tablet']
});

我们在上面的代码没有为应用定义一个启动的函数,因此,在(启动)那个时候它将会加载那两个配置。按照惯例,程序希望找到以下两个文件 app/profile/Phone.js 和 app/profile/Tablet.js 。下面是我们的适用于手机的配置文件:

Ext.define('Mail.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        name: 'Phone',
        views: ['Main']
    },

    isActive: function() {
        return Ext.os.is.Phone;
    }
});

适用于平板的配置文件也是跟随相同的模式。在我们的手机配置文件里,我们只提供了三项信息:配置文件名,当这个配置被激活时将被加载的view集,和一个isActive函数。

isActive函数的作用是决定当什么设备访问时可以激活这项配置。目前,最大的分割点就是为手机和平板创建配置(profiles),使用集成的 Ext.os.is.iPhone 和 Ext.os.is.Tablet 属性。你可以在isActive函数里面写任何你喜欢的代码,只要当设备运行时它总是返回 true 或 false 即可。


决定激活的配置(Determining the Active Profile)

一但配置文件被加载,它们的isActive函数就会被依次调用。第一个返回true的配置将为被Application用作启动配置。这个配置也会被Application设定为当前的配置,并且Application准备加载这个配置里的所有指定的依赖:数据模型(models), 视图(views),控制器(Controllers)和构成这个app的其它类。

例如,让我们修改一下我们的Application,让它能够加载它自己的一些 Models 和 Views:

Ext.application({
    name: 'Mail',

    profiles: ['Phone', 'Tablet'],

    models: ['User'],
    views: ['Navigation', 'Login']
});
当我们在手机是加载这个app 时,Phone配置将会被激活,并且Application将会加载以下文件:

  • app/model/User.js
  • app/view/Navigation.js
  • app/view/Login.js
  • app/view/phone/Main.js
前面三项是被指向于Application它自己的内部:User model,加上Navigation和Login views。第四项是被Phone配置指定,并遵循一种特殊形式。按照惯例,指定在配置里面的classes是希望被定义在以配置名称为名的子文件夹里。例如,在配置里指定的Main view将会在 app/view/phone/Main.js 被加载。反之,如果我们定义了Main在Application里,它将会在 app/view/Main.js 被加载。

这同样适用于所有的模型(Models)、视图(Views)、控制器(Controllers)和存储(Stores)在一个配置(Profile)中加载。这是非常重要的,它让我们可以很容易地在不同的配置中共享行为、视图逻辑及其它资源。如果你需要加载的类不适合这种约定的要求,你可以指定类的全称来代替:

Ext.define('Mail.profile.Phone', {
    extend: 'Ext.app.Profile',

    config: {
        name: 'Phone',
        views: ['Main', 'Mail.view.SpecialView'],
        models: ['Mail.model.Message']
    },

    isActive: function() {
        return Ext.os.is.Phone;
    }
});
正如上所见,你可以同时使用类的全名(例如:Mail.view.SomeView)进行匹配,以及使用相对路径的类名进行指定。所有定义在配置(Profile)里面的模型(Models)、视图(Views)、控制器(Controllers)和存储(Stores)都可以获得同样的代遇。这就意味着,如果你只想为平板加载多个模型(Models)或存储(Stores),但又不想加载如 Mail.model.tablet.User 这种相对路径的类,那你就必须通过使用类的全名来代替了(例如:Mail.model.User)。

启动过程(The Launch Process)

使用配置的启动过程几乎和不使用的情况一样。基于配置(Profile)的应用有三个阶段的启动过程。当全部依赖加载完成后,下面的事情就会发生:

1. 控制器被实例化,每一个控制器的 init 函数被调用;

2. 配置(Profile)的 launch 函数被调用;

3. Application 的launch 函数被调用。

当使用配置时,使用配置的launch函数去创建应用的初始化UI是常见的。在很多情况下,这意味着Application的launch函数几乎等于被移除了,因为在不同的配置中初始化的UI通常是不一样的(你依然可以使用Application范围的launch函数去做一些设备工作,例如分析或者配置无法预知的设置工作)。

一个典型的配置的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');
    }
});
p.s. Profile 和 Application的launch函数都是可选的,如果你没有定义它们,它们就不会被调用。


你可能感兴趣的:(Sencha Touch 2 快速入门系列(九) -- 配置(Profile))