UI components in sencha touch

1. UI COMPONENTS IN SENCHA
TOUCH
- NITHYA
1

2. 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

3. 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

4. Component Life Cycle
© 2010, Cognizant Technology Solutions. Confidential 5

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

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

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

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…)

9. 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

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

11. 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

12. Common xtypes
© 2010, Cognizant Technology Solutions. Confidential 13

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

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

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

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

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