Workshop on Sencha Touch - Part 5 - UI components in sencha touch
Extending Sencha – Themes & Components
-
Upload
stefan-stoelzle -
Category
Technology
-
view
305 -
download
0
Transcript of Extending Sencha – Themes & Components
Confidential Information
Why do we need extensibility?
• Styling & Theming– Provide a consistent look & feel
to the application
– Provide customized branding for product implementations
• Custom Components– Components with enhanced
behaviour
– Improved interaction with users
Confidential Information
Sencha - Designed for Extension
• Theming Support– Well-organized style classes
– SASS-based structure
• Allows quick parameterization
• As well as larger changes
– Component-level styling
• Styling for individual components
• Custom Component Support– Well-organized class structure
• Segregated by responsibility
• Hierarchical structure
– Extensible Framework
• Ext.define : Define your own classes
• Ext.override : Override existing classes
– Plugins / Mixins
• Add behavior to components
Confidential Information
Styling v/s Theming
• Styling– Afterthought rather than design
philosophy
– Change the look & feel of an existing application
– Maintain existing functionality but make it look different/better
• Theming– Part of the branding of the
application/organization
– Application designed to be “theme-able”
– Provide a consistent look & feel
– Standardize styles of components
– Enable re-use of the style across applications
– Provide alternative look & feel for the same application
Confidential Information
What can you theme?
• ‘Theme-able’ Elements– Colors
– Fonts
– Spacing
• Margins / Padding
– Iconography
• Sencha Extensions to Theming– JS Overrides in themes
• Override properties or methods of classes for a particular theme
• Commonly used for RTL support
– Component Styling
• Create variations of look for the same component
• Requires some changes in the JS code
Confidential Information
Creating a Theme
• Configure Existing Themes– Select an existing theme
– Set theme variables
– Limited to minor changes
• base-color
• Icons
• Fonts
• Build your own theme– Start with a built-in theme
– Identify the style classes you wish to override
Confidential Information
Overriding JS in Themes
• Relatively low usage
• E.g. - Building RTL Support into Themes
Confidential Information
Building Component UIs
• Style specific instances within an application
• Supported on most visual components
• Watch out - images need to be copied
• Similar capabilities can be achieved by using “cls” attribute of component with css selectors
@include extjs-panel-ui(
$ui: 'highlight-framed',
$ui-header-background-color: red,
$ui-border-color: red,
$ui-header-border-color: red,
$ui-body-border-color: red,
$ui-border-width: 5px,
$ui-border-radius: 5px
);
items: [{
xtype: 'panel',
ui: 'highlight',
frame: true,
…..
}]
Confidential Information
Extension v/s Componentization
• Extension– Create a project-specific
component
– Features or capabilities that are specific to the project
– Bound to services/models of the project
• Componentization– Build a cross-project component
– Exists separately from project
– Completely independent of service/models of the project
– Requires long-term resource commitment
• Watch out for – Feature flooding
• Let’s add this one small thing…
• What happens if I do this…
– Feature debris
• Let’s add an flag to enable this…
• Leave it, we might use it later…
– Backward compatibility issues
Confidential Information
Building a custom component
• Conceptualize– Define the features boundaries
– Sketch the visual design
– Identify the base class
• Detail it out– Define config / properties
– Define the behavior
– Define the events
• Implement– Code the component
– Test the component
– Document the component
Confidential Information
Some common gotchas
• Choose the correct base class –use the closest class in the hierarchy with the features that you need
• Do NOT write code in event handlers – events can be suspended
• Use template methods of the base class, if possible
Confidential Information
Sample Components…
• Date Range Selector– Supports named date ranges
– Optional custom date range
Confidential Information
…Sample Components …
• Custom Date Range Selection– With custom date range activated
Confidential Information
…Sample Components
• Searchable List Selection– Auto-suggest
• Multi-column selection data– Remote Store Loading
Confidential Information
About Omniscient
• 7+ years of experience with Sencha tools & components since 2008 (ExtJS 2.X)
• Helping Sencha Users across Asia & the Americas on various design & development, re-engineering, performance improvement, custom component development & consulting engagements
• Team of 60+ engineers with experience on Sencha tools & components for Mobile, Touch & Browser UI’s
• Our customers include Financial Technology Companies, Banks, Corporate Treasuries, Exchanges & Financial Market Infrastructures.
• Unique experience on various UI-reengineering engagements to skin & replace legacy UI’s with ExtJS based UI’s
• Expertise on Sencha Touch based Apps supported across various iOS & Android devices
Confidential Information
you can reach us on this ID for any help related to your Sencha Projects!