Over a million developers have joined DZone.

Sencha Touch: Working with Phone/Tablet Profiles

· Java Zone

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

Sencha Touch applications are built to use on a wide variety of devices, from phones to tablets. Usually people prefer to use phone apps while out of the house to rapidly gather some information or to perform some action – often in a very short time. Writing separate apps for each platform is time consuming, error-prone and plain boring.

Thankfully, Sencha Touch’s Device Profiles give us a simple way to share between device types as much code as needed, while making it easy to customize behavior, appearance, and workflows for each device.

Note: If you are new to Sencha Touch then please refer to my post to get started with Sencha Touch

Setting Up Profiles

Step 01) Generate the initial start-up using following sencha Cmd command.
sencha generate app TechZoo c:\SenchaWeb\profile

Step 02) Go to profile folder and execute following commands to generate profiles.

sencha generate profile Phone repeat to create Tablet profile
sencha generate profile Tablet

if you go to profile directory, you will see sencha has created two js file, each containing configuration of its respective profile (phone and tablet)
This profile can have its own Model, View and controllers which can be invoked when sencha detect the current user profile.

Ext.define('TechZoo.profile.Phone', {
  extend: 'Ext.app.Profile',
  
  //define any additional classes your Profile needs here
  config: {
    name: 'Phone',
    views: ['MainView'],
    models: [],
    stores: [],
    controllers: []
  },
    
  //this profile will be activated if we detect we're running on a Phone
  isActive: function(app) {
    console.log('Phone profile avtive: ' + Ext.os.is('Phone'));
    return Ext.os.is.Phone;
  },
  
  // Profile's launch will execute before Ext.application#launch()
  launch: function() {
    var view = Ext.create('TechZoo.view.phone.MainView');
    view.down('titlebar').setTitle('Current Profile : ' + this.getName());
    Ext.Viewport.add(view);
  }
});

Step 03) Create a Generic view called MainView which will serve as a Base Panel for Phone, Tablet views.

Ext.define('TechZoo.view.MainView', {
  extend  : 'Ext.Panel',
  xtype   : 'mainview',
  config: {
    items : [{
      docked: 'top',
      xtype: 'titlebar',
      title : 'Sencha Touch Profile'
    }],
    styleHtmlContent : true,
    title: 'Generic version',
    html: 'Generic Main View'
  },
  initialize: function() {
    console.log('Generic MainView...');
  }
});

Now create Two views (one for each Profile) which extends our Main view to use the benefits of Inheritance.

Ext.define('TechZoo.profile.Phone', {
  extend: 'Ext.app.Profile',
  
  //define any additional classes your Profile needs here
  config: {
    name: 'Phone',
    views: ['MainView'],
    models: [],
    stores: [],
    controllers: []
  },
    
  //this profile will be activated if we detect we're running on a Phone
  isActive: function(app) {
    console.log('Phone profile avtive: ' + Ext.os.is('Phone'));
    return Ext.os.is.Phone;
  },
  
  // Profile's launch will execute before Ext.application#launch()
  launch: function() {
    var view = Ext.create('TechZoo.view.phone.MainView');
    view.down('titlebar').setTitle('Current Profile : ' + this.getName());
    Ext.Viewport.add(view);
  }
});

Step 04) Update your app.js file to look similar to following.

Ext.application({
  name: 'TechZoo',
  
  views: ['MainView'],
  requires : ['Ext.TitleBar'],
  profiles: ['Phone', 'Tablet'],
  
  icon: {
    '57': 'resources/icons/Icon.png',
    '72': 'resources/icons/Icon~ipad.png',
    '114': 'resources/icons/Icon@2x.png',
    '144': 'resources/icons/Icon~ipad@2x.png'
  },

  isIconPrecomposed: true,

  startupImage: {
    '320x460': 'resources/startup/320x460.jpg',
    '640x920': 'resources/startup/640x920.png',
    '768x1004': 'resources/startup/768x1004.png',
    '748x1024': 'resources/startup/748x1024.png',
    '1536x2008': 'resources/startup/1536x2008.png',
    '1496x2048': 'resources/startup/1496x2048.png'
  },

  launch: function() {
    // Destroy the #appLoadingIndicator element
    Ext.fly('appLoadingIndicator').destroy();
    console.log('launching app...');
  }
  
});

Step 05) You are all set now to view your app in Phone, Tablet profile.

Start Sencha Cmd in-build webserver using sencha web start and hit http://localhost:1841/profile/index.html?deviceType=Phone URL. Note that you can view the tablet profile by passing deviceType=Tablet in above URL.

Output

Hit http://localhost:1841/profile/index.html?deviceType=Phone URL to view Phone profile in Action.

and use http://localhost:1841/profile/index.html?deviceType=Tablet URL to view Phone profile in Action.

happy Coding :)

View Tablet Profile / View Phone Profile

Sencha-Touch-Device-Profile Download

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.

Topics:

Published at DZone with permission of Tousif Khan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}