Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-13425

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



      Following a discussion on Twitter and the Alloy Google Group, I've put together a test project to see how Carbon'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:

      My conclusions can be found in a blog post at:

      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:
              '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
      // Or just release all


          Issue Links



              • Assignee:
                emerriman Eric Merriman
                fokkezb Fokke Zandbergen
              • Watchers:
                15 Start watching this issue


                • Created:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration