Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13425] Ti.UI.create(): An applyProperties-like way to create a whole view hierarchy at once

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionWon't Fix
Resolution Date2016-10-19T14:14:22.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsCore
LabelsCarbon, SDK, applyProperties, create, js, native, proxy, speed
ReporterFokke Zandbergen
AssigneeEric Merriman
Created2012-12-01T09:25:30.000+0000
Updated2017-03-29T17:51:06.000+0000

Description

Following a discussion on Twitter and the Alloy Google Group, I've put together a test project to see how [Carbon](http://carbon.appersonlabs.com)'s way of batching UI creation in a single create() or via JSON, could work for Titanium and it's new MVC Alloy. The test project and it's documentation can be found at: https://github.com/FokkeZB/nl.fokkezb.alloyCarbonized My conclusions can be found in a blog post at: http://fokkezb.nl/post/36942105712/alloycarbonized The tests show that passing a whole view-hierarchy to Carbon.UI.create() in one dictionary speeds up UI creation up to 200%. I guess this is exactly why in 3.x the applyProperties() methods are being introduced, to also minimize the number of trips from JS- to native-land. So my request is to continue on this path and add a Carbon.UI.create() like Ti.UI.create() to the SDK. Having done so, it would be just a small step to have Alloy make heavy use of this new method in the code it generates based on the XML and TSS files. Some ideas of how this would work:
// Ti.UI.create returns some kind of view-collection object
var views = Ti.UI.create({
  'Window': {
    fullscreen: false,
    backgroundColor: '#fff',

    // Non-hierarchy views can also be added like:
    titleControl: {
      'Label': {
        text: 'My title',
        font: { fontWeight: 'bold' }
      }
    },
    
    // Child views are added through a 'children' property
    children: [
      {
        'View': {

          // Only views that have an 'id' can be referenced in JS-land through a proxy object
          id: 'red',
          
          top: 100, left: 50,
          width: 200, height: 200,
          backgroundColor: '#f00',
          
          children: [
            'Label': {
              id: 'platform',

              // In Alloy this wouldn't be needed since platform branching is done at built-time,
              // but for usage without Alloy this would be really nice to have.
              platform: ['android'],
            
              top: 25, right: 25, bottom: 25, left: 25,
              backgroundColor: '#0f0',
              
              text: 'I am green Android'
            },
            'Label': {
              id: 'platform',
              platform: ['ios'],
              
              top: 25, right: 25, bottom: 25, left: 25,
              backgroundColor: '#00f',
              
              text: 'I am blue iOS'
            },

            // You could also include an existing Ti.UI object like this:
            someExistingView
          ]
        }
      },
      {
        'Label': {
          top: 400, left: 0, right: 0,
          height: Ti.UI.SIZE,
          
          text: 'I want Ti.UI.create()',

          // Events could also be added like this, but
          // it would compromise clear controller-view-separation
          onClick: myCallback,

          // Just like platform-branching, formFactor would be like:
          formFactor: ['tablet']
        }
      }
    ]
  }
});

// Views that have an 'id' can be referenced from JS-land
var redView = views.get('redView');

// Views you won't need anymore can be destroyed, including children
views.release('platform');

// Or just release all
views.release();

Comments

  1. Fokke Zandbergen 2012-12-02

    Added example for using existing views in Ti.UI.create() and including non-hierarchy views like a window's titleControl (or rightNavButton etc.)
  2. Fokke Zandbergen 2012-12-02

    Added example for formFactor and event support, so it now included pretty much everything Alloy could need from generating a single Ti.UI.create() call from it's XML and TSS file.
  3. Hans Knöchel 2016-10-19

    Some thought from my side: * At the time this ticket ticket was created, we didn't have a GA version of Alloy (released in 08/2013 along with Titanium 3.0.2), so the ability to create custom view-structures made more sense at that time * The design proposal does not include the handling custom namespaces e.g. Ti.UI.iOS or Ti.UI.Android * This structure could be created on the JavaScript side, without the need to change the core. You could just iterate through the data structure and call the namespaces from there, since they are usual objects (e.g. Ti.UI.ImageView = Ti.UI["Label"]). * The [Carbon library](https://github.com/iamyellow/Carbon) already has parts of this implemented and could be extended for those who really need this feature Considering that and the priority of other tickets that should be addresses instead, I will resolve this ticket for now, thanks!
  4. Lee Morris 2017-03-29

    Closing ticket with reference to the above comments.

JSON Source