UI COMPONENTS IN SENCHA TOUCH - NITHYA
1
Basic Building blocks
Class:
» Similar to any java class
» contains methods Public properties, methods and Events
Component:
» also a class
» base class for all visual components
» All subclasses participate in the automated Ext component lifecycle
© 2010, Cognizant Technology Solutions. Confidential 2
Component
What is a component?
» visual classes you interact with in Sencha Touch
Basic Capabilities of a component?
» Render themselves onto the page using a template
» Show and hide themselves at any time
» Center themselves on the screen
» Enable and disable themselves
Advanced Capabilities:
» Float above other components (windows, message boxes and overlays)
» Change size and position on the screen with animation
» Dock other Components inside itself (useful for toolbars)
» Align to other components, allow themselves to be dragged around, make their content scrollable & more
Types of Components:
» Navigation Components
» Store-Bound components
» Form Components
» General Components
© 2010, Cognizant Technology Solutions. Confidential 3
Component Life Cycle
© 2010, Cognizant Technology Solutions. Confidential 5
Container
What is a container?
» Components usually nested one inside another
» Allows to render and arrange child Components inside them
» Most apps have a single top-level Container called a Viewport
Containers give the following extra functionality
» Adding child Components at instantiation and run time
» Removing child Components
» Specifying a Layout
© 2010, Cognizant Technology Solutions. Confidential 6
Class System in Sencha Touch
What is a Class?
» a class is just an object with functions and properties attached to it
How do you create a Class?
© 2010, Cognizant Technology Solutions. Confidential 7
Class System in Sencha Touch (Cont…)
Instantiate a class:
Invoke a method of the instance:
Creating a Sub Class:
© 2010, Cognizant Technology Solutions. Confidential 8
How can we manipulate Configuration properties?
» Auto generated Getters and Setters
» Recommended way to store data in a class
Every config property has the following :
» a getter function that returns the current value
» a setter function that sets a new value
» an applier function called by the setter that lets you run a function when a configuration changes
» a updater function called by the setter than run when the value for a configuration changes
Every component in Sencha Touch uses the class system - the generated functions always follow the same pattern
© 2010, Cognizant Technology Solutions. Confidential 9
Class System in Sencha Touch (Cont…)
Dependencies and Dynamic Loading
When is dependency created?
» Extend from a class
» Make use of different class inside our class
What is the risk involved?
» Need to guarantee that dependency classes are loaded on the page
How?
» Requires config attribute
What happens on requires?
» checks to see if specified class is already loaded and if not, loads the required class file immediately with AJAX.
Nested dependencies?
» Class mentioned itself may also have classes it depends on, which are then also loaded automatically in the background
Is it optimal for production?
» No, since loading files one by one over an internet connection is rather slow
» JSBuilder tool, which analyzes your app and creates a single file build that contains all of your classes
© 2010, Cognizant Technology Solutions. Confidential 10
All classes are defined using Ext.define
Most classes extend other classes, using the extend syntax
Classes are created using Ext.create
Use the config syntax to get automatic getters and setters and have a much cleaner codebase
© 2010, Cognizant Technology Solutions. Confidential 11
Class System in Sencha Touch - Summary
Component Instantiating
Ext. Create
» Components are created the same way as all other classes in Sencha Touch -
using Ext.create
Xtype method
» Xtype is a convenient way of creating Components without having to go through the process of using Ext.create
» Easy way to create Components without using the full class name
» a shorthand way of specifying a Component
© 2010, Cognizant Technology Solutions. Confidential 12
Common xtypes
© 2010, Cognizant Technology Solutions. Confidential 13
Configuring Components
Whenever you create a new Component you can pass in configuration options
You can pass in any number of configuration options when you instantiate the Component, and modify any of them at any point later
Every config has a getter method and a setter method - these are automatically generated and always follow the same pattern
© 2010, Cognizant Technology Solutions. Confidential 14
Adding/ Removing Components to Containers
Containers are special Components that can have child Components arranged by a Layout.
Add components Dynamically
» add()
Remove components dynamically
» remove()
© 2010, Cognizant Technology Solutions. Confidential 15
Showing and Hiding Components
Every Component in Sencha Touch can be shown or hidden with a simple API
Show components
Hide components
This will hide the mainPanel itself and any child Components inside it
© 2010, Cognizant Technology Solutions. Confidential 16
Docking Components
Sencha Touch has the ability to dock Components within other Containers
Dock options:
» left
» top
» bottom
» Right
© 2010, Cognizant Technology Solutions. Confidential 17
Destroying Components
Most mobile devices have a limited amount of memory - good idea to destroy Components - won't need them any more
a good way to optimize the experience - when you push the app into production
Removes the class from the DOM and remove any event listeners it has set up on specific DOM elements
What happens on Destroying Components?
» destroy any instances that the Panel uses internally
» call destroy on all of its child components – hence child components will be destroyed
» Removed from DOM
» References will not be valid
© 2010, Cognizant Technology Solutions. Confidential 18