workshop on sencha touch - part 5 - ui components in sencha touch

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


Component Life Cycle


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


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?


Class System in Sencha Touch (Cont…)

Instantiate a class:

Invoke a method of the instance:

Creating a Sub Class:


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


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


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


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


Common xtypes


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


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


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


Docking Components

Sencha Touch has the ability to dock Components within other Containers

Dock options:

» left

» top

» bottom

» Right


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


workshop on sencha touch - part 5 - ui components in sencha touch

Mobile