JavaScript Sencha: Sencha Touch

This course is included in the Everything IT Self-Paced training package.

Overview

Sencha Touch is an HTML5 mobile web application development framework for cross platform development. This course covers developing a simple app in Sencha Touch, and deploying and testing it through the android mobile SDK.

Target Audience

JavaScript developers looking to develop mobile and web applications using Sencha Ext JS and Touch

Prerequisites

None

Expected Duration

90 min.

Course Objectives

Course Introduction

Download Sencha Touch

  • download and install Sencha Touch along with Ruby in order to build your app
  • Generate a Sencha Touch App

  • launch Sencha Touch to generate and name a new app
  • Explore the Generated App

  • describe the file structure created when using the Sencha command to generate an app in JavaScript Sencha
  • Create an App Home Page

  • edit the app.js file to create a simple app structure for a home page
  • Create a Container

  • create a basic container
  • Add a Container to an App

  • create and add a subscriber list container to an app by using code
  • Add a Touch Controller

  • use Sencha Touch to add an EventListener controller to an app
  • Refractor Components for Better Encapsulation

  • use a component’s initialize function and alias property in an app’s view code
  • Use an Alias to Create a Component

  • create an app component using an alias in Javascript Sencha
  • Create a List View

  • render a basic list by extending the List class, creating an alias, and providing content that includes loading text, emptying text, and listing item specifications
  • Add a Component to a Container

  • add a component to a container by adding a reference in the view config, and defining the view in the container
  • Create a Sencha Touch Model

  • create and name a model for an app
  • Add Validation to a Model

  • add validation to a model and set its type and field
  • Create a Data Store

  • set up and manage a data store within an existing model
  • Display Store Data in a View

  • set up a store in a view by using a controller and adding specific config files to your application
  • Create a Sencha Touch Form

  • use Sencha Touch’s configs and xtypes to customize the view and various properties for a form
  • Rendering a View on an Event

  • render a view with an event in another view by adding a reference to the view that will be rendered to the Controller
  • Editing Records

  • fire an onListDisclose event that calls the same editor form and passes the existing data to it
  • Configuring LocalStorage

  • enable browser-based applications to store data locally on the user’s hard drive by loading the LocalStorage class from the proxy package, and adding functionality to the Save button on an editor form
  • Save Data with LocalStorage

  • write a save function for the Controller to transfer data from an editable form to the LocalStorage
  • Deleting Records from LocalStorage

  • add an event handler to the delete button, then write a function in the Controller that calls the remove function from the Store
  • Navigating the App

  • configure an app’s Home button to return the user to the main screen
  • Download the Android SDK

  • download the Android SDK from the Android Developer’s site
  • Build Your App Using Apache Cordova

  • install Node.js to support Apache Cordova
  • Enable Cordova Support and Configure the App

  • enable Cordova support and configure an app
  • Emulating the App with Cordova

  • emulate an app with Cordova
  • Create an Android Emulator

  • open AVD Manager to create and set up an Android emulator in order to test a custom app
  • Load and Test Your App on the Android Emulator

  • run the Android emulator in order to install and test the functionality of an app created in Sencha
  • Creating a config.xml file for PhoneGAP

  • create and edit the config.xml file of an application ready for use with PhoneGAP
  • Use ConfiGAP to Create a config.xml File

  • use the ConfiGAP application to create a config.xml file
  • Building Your App with PhoneGAP Build

  • use PhoneGap Build to build an application for an Android device
  • This Course is included in our Everything IT Self-Paced Training Package.

      Learn More