Workshop on Sencha Touch - Part 5 - UI components in sencha touch
Sencha Frameworks: From desktops to smartphones - For the legacy and the modern web
-
Upload
stefan-stoelzle -
Category
Technology
-
view
418 -
download
1
Transcript of Sencha Frameworks: From desktops to smartphones - For the legacy and the modern web
Sencha FrameworksFrom Desktops to Smartphones
For the legacy and the modern web
Gautam Agrawal Sr. Director, Product Management
Ext JS History
2
(2007) Ext JS 2.x
Ext JS 3.x (2009)
(2010) Touch 1.x
(2011) Ext JS 4.x Touch 2.x
Ext JS 5.x (2014)
(2015) Ext JS 6.x
!==CoreSenc
ha E
xt JS
Sencha Touch
Classic Toolkit
Modern Toolkit
Views / UI Components
DOM
Class / Loader
Data Package
MVC / MVVM
Utilities
Views / UI Components
DOM
Class / Loader
Data Package
MVC / MVVM
Utilities
Sencha Ext JS 6
Ext JS & Sencha Touch Merged
Sencha Ext JS 6 SDKMost comprehensive Cross-browser, Cross-platform, Cross-device JavaScript framework for enterprise HTML5 application development
Ext JS 6 - Universal AppsSingle Framework
(All Devices – Desktop, Tablets, Smartphones)(All Browsers – Modern & Legacy)
Ext JS 6 - Universal Applications• Desktop, Tablets, Phones• Modern & Legacy Browsers• Device Specific UX
Ext JS 6 Package Structure
modern
core
classic
Ext JS
charts
ux
…
theme-*theme-*theme-*
theme-*theme-*
theme-*
app
resources
sass
model
view
controller
/
src
resources
sass
model
view
controller
classic
modern
classic
app.jsonToolkit-specific content
Shared content
Traditional Apps ! Universal Apps
app
resources
sass
modern
classic
/
app.json
sencha generate app -ext -modern MyApp apps/myapp
Modern or Classic Only
app
resources
sass
classic
modern
/
app.json
sencha generate app -ext -classic MyApp apps/myapp
"builds": { “classic”: { “toolkit”: “classic”, “theme”: “theme-triton” }, “modern”: { “toolkit”: “modern”, “theme”: “theme-triton” }}
Build Profile
Universal Apps – app.json
Ext.beforeLoad = function (tags) { // tags = platform, device, browser attributes var profile = tags.desktop ? 'classic' : 'modern’; // var profile = tags.phone ? 'modern' : 'classic';
var m = /[&?]profile\=([^&]+)/.exec(location.search); if (m && m[1]) { profile = m[1]; }
Ext.manifest = profile; // informs the Microloader
Universal Apps – index.html<script id="microloader" type="text/javascript" src="bootstrap.js"/>
Beyond Kitchen Sink• Kitchen Sink• A Collection of Components
• App Templates• Mimic Real World App UX• Built entirely with Ext JS 6• Triton as the Base Theme
• Adaptive Design• Targeted UX (device specific)
Triton• Minimalistic• No Rounded Corners• No Gradients• Nearly borderless
• Font Icons / Web Fonts• Lightweight / Imageless• Resolution Independent• Improved Network Load Time• Easily Modify Color Scheme
More Power to GridsPivot Grid & Accessibility Improvements
(Analytics Capabilities for Grid, Improved Keyboard Navigation)
Classic Ext JS Grid• What is John's total order?• What are total order amounts
by country?• How did sales team perform in
2015?• …
Sencha Pivot Grid Features• Sorting• Sub-totals and Grand-totals• Results Filtering• Results Grouping• Drill Down• Much more …
Accessibility Improvements• ARIA Functionality Integrated
into Components• No Need for Special “aria”
package• Screen Reader Support
without Special Inclusions• Grid Actionable Mode• Keyboard Navigation Cells
Sencha ToolsFocused on Enterprise App Development
Requirements, and integrating with popular Enterprise IDEs
for increased developer productivity
• Sencha IDE Plugins – Productivity • Sencha Inspector – Debugging • Sencha Cmd – Build Optimization • Sencha Architect – Visual Designer • Sencha Test Studio – Test Automation
Sencha IDE Plugins• No Dependencies• Supports Ext JS 4.2+ & Touch 2.1+ (non-minified versions)• Works with Custom Classes and Overrides• JetBrains (Commercial Versions of IntelliJ, WebStorm, etc.)• Available Now
• Eclipse• Early Access
• Visual Studio• Early Access
Sencha IDE Plugins• Template Creation• Code Generation• Code Completion• Code Inspection• Code Refactoring• Code Navigation• Spell Checking
Sencha Inspector – Debugging• Works on Sencha’s Object
Model, not Rendered DOM
• Inspect Sencha Apps• Component Tree• Data Stores• Layouts• Events• MVC/MVVM• Theme
Sencha Theme Compiler - Fashion• JavaScript-based Compiler for Sencha Themes• Accelerates Building Ext JS 6 Themes• Near Real-time Theming• Eliminates Ruby Dependency