Tweaking your application to configure itself using profiles_Sencha Touch Cookbook-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

Tweaking your application to configure itself using profiles

This recipe describes how you can set up multiple profiles for your application and let your application configure itself using the profile.

How to do it...

Carry out the following steps:

Create and open a new file named ch01_05.js in the ch01 folder and paste the following code into it:

new Ext.Application({
  name: 'MyApp',
  profiles: {
    phoneBlackberry: function() {
      return Ext.is.Blackberry;
    },
    phoneAndroid: function() {
      return Ext.is.Android;
    },
    tabletPortrait: function() {
      return Ext.is.Tablet && Ext.orientation == 'portrait';
    },
    tabletLandscape: function() {
      return Ext.is.Tablet && Ext.orientation == 'landscape';
    }
  },
  launch: function() {
    this.viewport = new Ext.Panel({
      fullscreen: true,
      items : [
        {
          html: 'Welcome to My App!' + ' - profile - ' + this.getProfile(),
          
        }
      ]
    });
  }
  
});

Remove the following line from index.html:

<script type="text/javascript" charset="utf-8" src="ch01/ch01_04.js"></script>

Include the following line in index.html:

<script type="text/javascript" charset="utf-8" src="ch01/ch01_05.js"></script>

Deploy and run the application.

How it works...

The Application class provides a property named profiles, which is used to set up multiple profiles, as shown in the preceding code. When the application is launched, each of the configured profile functions such as phoneBlackberry , phoneAndroid , and so on, is evaluated in the order of their definition. The first profile function that returns true is the one which becomes the profile of the application. For example, if we are running the application on the Android phone, then phoneAndroid is the first function that will return true and, hence, the profile of the application will be set to phoneAndroid.

The current profile can be fetched from the application or any component. You can use the getProfile() method which returns the name of the profile, for example, phoneAndroid.

The profile is applied, by default, at the time of the application launch.

There's more...

There are few more interesting options and features that the Application class provides to have a better control of the profiles and their application. Let's see what else can be done with the profiles.

Do not apply the profile at the time of application launch

As we saw, the profile is applied to the components at the time of application launch. It may not be desirable all the time. You may want to apply the profiles at a later stage in your application. For example, your application has a photo viewer which shows the photo on the left-hand side and the photo detail on the right-hand side of the page. Moreover, due to the layout, and to have a better view of the photo and its detail, say, you always want the user to switch to the landscape mode. In this case, you would like to wait until the user opens the viewer and that is when you would like to identify the profile and take action accordingly.

Applying the profile at the application launch time is controlled by the setProfilesOnLaunch property. By default, this is set to true. In your application initialization, you should pass the following additional config:

setProfilesOnLaunch : false

Therefore, the code would look something like this:

new Ext.Application({
    name: 'MyApp',
    setProfilesOnLaunch: false,
    profiles: {
……..

Do not apply the profile on the components, by default

By default, at the launch time, the current profile is applied to all the components of the application. If you do not want this to happen, then you will have to set autoUpdateComponentProfiles to false during your application initialization.

Ignoring the profile change

In some applications, you may want to ignore the effect of profile changes. To do so, we will have to implement the handler for the beforeprofilechange event and return false from it. The Application class raises this event after it has detected the profile change and before it would start to apply the profile to the components. If false is returned from the handler, it would not apply the profile to the components. The following code snippet shows how the handler needs to be written:

new Ext.Application({
    name: 'MyApp',
    setProfilesOnLaunch: false,
    profiles: {
……..
},
    beforeprofilechange: function(profile, oldProfile) {
      return false;
    }

Deferred application of profile

If you choose not to apply the profile at the time of launch, but defer it until the event of interest occurs, then you can achieve this by calling the determineProfile() method of the Application class. In addition, you will have to make sure that autoUpdateComponentProfiles is set to true before the method is called.