Extending Sencha – Themes & Components

Confidential Information

Extending Sencha

15-May-2015


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


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


Extending Sencha

Using Themes


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


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


Sample Theme – Variant 1


Sample Theme – Variant 2


Sample Theme – Variant 3 (Redesigned)


Dashboard – Sencha Default


Dashboard – Redesigned With Theme


Query Screen – Sencha Default


Query Screen – Customized Theme


Mobile Application – Original Theme


Mobile Application – Revised Theme


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


Overriding JS in Themes

• Relatively low usage

• E.g. - Building RTL Support into Themes


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,

…..

}]


Customizing Sencha

Building Custom Components


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


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


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


Sample Components…

• Date Range Selector– Supports named date ranges

– Optional custom date range


…Sample Components …

• Custom Date Range Selection– With custom date range activated


…Sample Components

• Searchable List Selection– Auto-suggest

• Multi-column selection data– Remote Store Loading


About Us


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


[email protected]

you can reach us on this ID for any help related to your Sencha Projects!

Extending Sencha – Themes & Components

Technology

Transcript of Extending Sencha – Themes & Components