Migrating from Touch 1.x to 2.0

Wednesday, November 2, 2011

Jamie Avins

@jamieavins

MIGRATING TO TOUCH 2


Rendering


Touch 2 splits this process into two distinct pieces

Rendering in Touch 2Touch 1 combined Element creation and DOM placement

Placement

Creation




Placement

Creation




Placement

Creation


Rendering in Touch 2The Element Creation process is now part of Component instantiation

The Elements initially exist outside the DOM

You don’t want measure elements until they enter the DOM


Rendering in Touch 2Touch 1 stored a DOM markup on the prototype

Touch 2 stores a DOM element on the prototype

element.cloneNode(true) for all instances


Rendering in Touch 2Adding a Component to a Container will move its elements inside the DOM - fires the ‘painted’ event

Removing a Component from a Container will move its elements outside the DOM - fires the ‘erased’ event

Component.show() will place the Component in the ViewPort


Rendering in Touch 2Being able to ‘erase’ components from the DOM and using clean configurations allows the recycling of components

for (; i >= 0; i--) { item = items[from + i]; if (cacheLn !== maxItemCache) { me.remove(item, false); item.removeCls([me.getPressedCls(), me.getSelectedCls()]); itemCache.push(item); cacheLn++; } else { item.destroy(); }}


Rendering in Touch 2Being able to ‘erase’ components from the DOM and using clean configurations allows the recycling of components

for (; i < ln; i++) { record = records[i]; if (cacheLn) { cacheLn--; item = itemCache.pop(); item.setRecord(record); items.push(item); } else { items.push(me.getDataItemConfig(xtype, record, itemConfig)); }}


Rendering in Touch 2Unsupported Methods:

renderafterRender

The ‘render’ event is slated for deprecation


CSS Layouts


Layouts in Touch 2Layouts are now completely CSS Based


Layouts in Touch 2Layouts are now completely CSS Based

.x-layout-fit { position: relative; display: -webkit-box;

> * { -webkit-box-flex: 1; min-width: 100%; min-height: 100%; }}

.x-layout-card { position: relative; overflow: hidden;

> .x-layout-card-item { position: absolute !important; width: 100%; height: 100%; }}

.x-layout-hbox, .x-layout-vbox { display: -webkit-box; > * { -webkit-box-flex: 0; } }

.x-layout-hbox { -webkit-box-orient: horizontal;

> .x-layout-box-item { width: 0 !important; } }

.x-layout-vbox { -webkit-box-orient: vertical;

> .x-layout-box-item { height: 0 !important; } }

.x-docking-horizontal { display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: horizontal; min-width: 100%; min-height: 100%;}

.x-docking-vertical { display: -webkit-box; -webkit-box-flex: 1; -webkit-box-orient: vertical; min-width: 100%; min-height: 100%;}


Layouts in Touch 2Place elements in the appropriate DOM location

Apply CSS Layout classes

Apply layout configurations such as pack, flex, align, etc.

Wrap components for docking and centering


Layouts in Touch 2Unsupported Methods:

doLayoutdoComponentLayoutafterLayout


Layouts in Touch 2Without afterLayout, how can you detect size changes?

ScrollerNavigationBarSliderDrawComponent


Layouts in Touch 2Without afterLayout, how can you detect size changes?

new Ext.util.SizeMonitor({ element: this.element, callback: this.onSizeChange, scope: this});

ScrollerNavigationBarSliderDrawComponent


Layouts in Touch 2How does SizeMonitor work?

Add two absolutely positioned elements with scroll listeners

If position and scroll don’t match, we run our callback

Target Element

Detect Shrinking

Detect Expanding


Layouts in Touch 2Docking moved to Container


Layouts in Touch 2

Remove Panel overnesting

Removed DataPanel

‘dockedItems’ deprecated

Dynamic Docking - dock configuration now accepts a boolean

Docking moved to Container


Layouts in Touch 2Setting top, left, bottom, or right will now float your component

‘floating’ configuration deprecated

percentage configuration for top, left, bottom, right, height, and width are now supported

config: { top: '20%', left: '10%', right: '10%', bottom: '20%'},


Configuration


Configuration in Touch 2Proper configurations are now used throughout Touch 2

Using proper getter and setters maintains the configuration lifecycle


Configuration in Touch 2Getters provide:

Lazy instantiation of the configuration on the first call

Ensures the initial configuration is passed through the setter

Configuration dependency handling


Configuration in Touch 2Setters provide:

Execution of an optional apply method

A simple check for a change in value and a call to an optional update method


Configuration in Touch 2Using Apply effectively: Filtering

applyValue: function(value) { var minValue = this.getMinValue(), maxValue = this.getMaxValue();

value = parseFloat(Math.min(Math.max(value, minValue), maxValue));

if (isNaN(value)) { value = this.getDefaultValue(); } return value;},


Configuration in Touch 2Using Apply effectively: Validation

applyActiveTab: function(activeTab) { if (!activeTab && activeTab !== 0) { return; }

var activeTabInstance = this.parseActiveTab(activeTab); if (!activeTabInstance) { // <debug warn> Ext.Logger.warn('Trying to set a non-existent activeTab'); // </debug> return; } return activeTabInstance;},


Configuration in Touch 2Using Apply effectively: Transformation

applyLabel: function(config) { if (typeof config == "string") { config = { text: config }; }

return Ext.factory(config, 'Ext.form.Label', this.getLabel());},


Configuration in Touch 2Using Update effectively: Updating Dependencies

updateContentEl: function(newContentEl, oldContentEl) { // Take care of the old contentEl if (oldContentEl) { oldContentEl.hide(); Ext.getBody().append(oldContentEl); } // Take care of the new contentEl if (newContentEl) { this.setHtml(newContentEl); newContentEl.show(); }},


Configuration in Touch 2Wither initComponent

initComponent : function() { ...

if (!this.store) { this.store = new Ext.data.Store({ model: 'IndexBarModel' }); }

if (this.alphabet == true) { this.ui = this.ui || 'alphabet'; }


Configuration in Touch 2Wither initComponent


Jamie Avins

@jamieavins

THANK YOU!


Technology

Migrating from Touch 1.x to 2.0