Migrating from Touch 1.x to 2.0

2,887 views

Published on

Understand how to benefit from the latest capabilities of the Sencha Touch framework, and how to ensure your code is compatible when you upgrade.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,887
On SlideShare
0
From Embeds
0
Number of Embeds
915
Actions
Shares
0
Downloads
49
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Migrating from Touch 1.x to 2.0

  1. 1. Wednesday, November 2, 2011
  2. 2. MIGRATING TO TOUCH 2 Jamie Avins @jamieavinsWednesday, November 2, 2011
  3. 3. RenderingWednesday, November 2, 2011
  4. 4. Rendering in Touch 2 Touch 1 combinedthis process into two distinct pieces Touch 2 splits Element creation and DOM placement Creation PlacementWednesday, November 2, 2011
  5. 5. Rendering in Touch 2 Touch 1 combinedthis process into two distinct pieces Touch 2 splits Element creation and DOM placement Creation PlacementWednesday, November 2, 2011
  6. 6. Rendering in Touch 2 Touch 1 combinedthis process into two distinct pieces Touch 2 splits Element creation and DOM placement Creation PlacementWednesday, November 2, 2011
  7. 7. Rendering in Touch 2 The 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 DOMWednesday, November 2, 2011
  8. 8. Rendering in Touch 2 Touch 1 stored a DOM markup on the prototype Touch 2 stores a DOM element on the prototype element.cloneNode(true) for all instancesWednesday, November 2, 2011
  9. 9. Rendering in Touch 2 Adding 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 ViewPortWednesday, November 2, 2011
  10. 10. Rendering in Touch 2 Being 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(); } }Wednesday, November 2, 2011
  11. 11. Rendering in Touch 2 Being 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)); } }Wednesday, November 2, 2011
  12. 12. Rendering in Touch 2 Unsupported Methods: render afterRender The ‘render’ event is slated for deprecationWednesday, November 2, 2011
  13. 13. CSS LayoutsWednesday, November 2, 2011
  14. 14. Layouts in Touch 2 Layouts are now completely CSS BasedWednesday, November 2, 2011
  15. 15. Layouts in Touch 2 Layouts are now completely CSS Based .x-layout-hbox, .x-layout-vbox { .x-layout-card { display: -webkit-box; > * { .x-docking-horizontal { position: relative; -webkit-box-flex: 0; display: -webkit-box; overflow: hidden; } -webkit-box-flex: 1; } -webkit-box-orient: horizontal; > .x-layout-card-item { min-width: 100%; position: absolute !important; .x-layout-hbox { min-height: 100%; width: 100%; -webkit-box-orient: horizontal; } height: 100%; } } > .x-layout-box-item { .x-layout-fit { width: 0 !important; position: relative; .x-docking-vertical { } display: -webkit-box; display: -webkit-box; } -webkit-box-flex: 1; > * { -webkit-box-orient: vertical; .x-layout-vbox { -webkit-box-flex: 1; min-width: 100%; -webkit-box-orient: vertical; min-width: 100%; min-height: 100%; min-height: 100%; } > .x-layout-box-item { } height: 0 !important; } } }Wednesday, November 2, 2011
  16. 16. Layouts in Touch 2 Place elements in the appropriate DOM location Apply CSS Layout classes Apply layout configurations such as pack, flex, align, etc. Wrap components for docking and centeringWednesday, November 2, 2011
  17. 17. Layouts in Touch 2 Unsupported Methods: doLayout doComponentLayout afterLayoutWednesday, November 2, 2011
  18. 18. Layouts in Touch 2 Without afterLayout, how can you detect size changes? Scroller NavigationBar Slider DrawComponentWednesday, November 2, 2011
  19. 19. Layouts in Touch 2 Without afterLayout, how can you detect size changes? Scroller NavigationBar Slider DrawComponent new Ext.util.SizeMonitor({ element: this.element, callback: this.onSizeChange, scope: this });Wednesday, November 2, 2011
  20. 20. Layouts in Touch 2 How does SizeMonitor work? Target Element Add two absolutely Detect Shrinking positioned elements with scroll listeners If position and scroll don’t match, we run our callback Detect ExpandingWednesday, November 2, 2011
  21. 21. Layouts in Touch 2 Docking moved to ContainerWednesday, November 2, 2011
  22. 22. Layouts in Touch 2 Docking moved to Container Remove Panel overnesting Removed DataPanel ‘dockedItems’ deprecated Dynamic Docking - dock configuration now accepts a booleanWednesday, November 2, 2011
  23. 23. Layouts in Touch 2 Setting 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% },Wednesday, November 2, 2011
  24. 24. ConfigurationWednesday, November 2, 2011
  25. 25. Configuration in Touch 2 Proper configurations are now used throughout Touch 2 Using proper getter and setters maintains the configuration lifecycleWednesday, November 2, 2011
  26. 26. Configuration in Touch 2 Getters provide: Lazy instantiation of the configuration on the first call Ensures the initial configuration is passed through the setter Configuration dependency handlingWednesday, November 2, 2011
  27. 27. Configuration in Touch 2 Setters provide: Execution of an optional apply method A simple check for a change in value and a call to an optional update methodWednesday, November 2, 2011
  28. 28. Configuration in Touch 2 Using 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; },Wednesday, November 2, 2011
  29. 29. Configuration in Touch 2 Using 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; },Wednesday, November 2, 2011
  30. 30. Configuration in Touch 2 Using Apply effectively: Transformation applyLabel: function(config) { if (typeof config == "string") { config = { text: config }; } return Ext.factory(config, Ext.form.Label, this.getLabel()); },Wednesday, November 2, 2011
  31. 31. Configuration in Touch 2 Using 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(); } },Wednesday, November 2, 2011
  32. 32. Configuration in Touch 2 Wither initComponent initComponent : function() { ... if (!this.store) { this.store = new Ext.data.Store({ model: IndexBarModel }); } if (this.alphabet == true) { this.ui = this.ui || alphabet; }Wednesday, November 2, 2011
  33. 33. Configuration in Touch 2 Wither initComponentWednesday, November 2, 2011
  34. 34. THANK YOU! Jamie Avins @jamieavinsWednesday, November 2, 2011

×