Hands-On Sencha Touch 2: A Real-World App Approach

by Lee Boonstra

Overview

Get hands-on experience building speedy mobile web apps with Sencha Touch 2.3, the user interface JavaScript framework built specifically for the mobile Web. With this book, you’ll learn how to build a complete touch application, called Find a Cab, that has the look and feel of a native app on Android, iOS, Windows, and BlackBerry devices.

In the process, you’ll work with Sencha’s model-view-controller (MVC) components for form handling, styling, integration with outside data, and other elements. The Sencha Touch learning curve can be steep, but if you’re familiar with JavaScript, HTML5, CSS3, and JSON, this guide will get you up to speed through real-world examples.

• Learn the fundamentals, including the class and layout systems
• Use the Sencha MVC architecture to structure your code
• Implement data models and stores, and create an event controller
• Make remote connections by implementing server proxies
• Save data offline by implementing client proxies
• Work with view components such as maps, lists, and floating panels
• Implement and handle forms, and construct a custom theme
• Create production and native build packages

Product Details

ISBN-13:	9781449366520
Publisher:	O'Reilly Media, Incorporated
Publication date:	08/09/2014
Pages:	342
Product dimensions:	7.00(w) x 9.10(h) x 0.70(d)

About the Author

Lee Boonstra is a trainer for Sencha, teaching Sencha Touch & Ext JS to engineers from all over Europe. Previously a Java developer, she focuses on front-end development and has worked for creative agencies on mobile applications for Heineken and Philips.

Table of Contents

Preface xi

Part I Sencha Touch Essentials

1 Introduction to Sencha Touch 3

Licenses 3

Bundles 3

Touch Charts 4

Sencha Cmd 4

Sencha Network 6

Sencha Try 6

Sencha Market 7

Sencha Devs 7

Sencha.io Src 7

Where to Find Help 9

Learning Center 9

Sencha Forums 9

Sencha framings 10

Buy Support 10

API Documentation 10

Kitchen Sink 12

Required Software 12

Supported Browsers 12

Summary 13

2 Installation 15

Install the Required Software 16

IDE or Editor 16

Modern Browser 16

Ruby 16

Java 17

Sencha Cmd 17

Web Server 19

Sencha Touch 20

Install the Optional Software 20

Sass and Compass 20

Install NodeJS 21

Install PhoneGap and Cordova 21

Development SDK 22

Summary 23

3 The Fundamentals 25

Instantiating a Basic Component 26

Implementing Templates 29

Changing the Data at Runtime 29

Organizing Template Snippets 30

Implementing Advanced Templates 31

Making References to Components 32

Traversing Components 34

Making References to DOM Modes 35

Ext.get() 36

Ext.select() 36

Ext.getDom() 37

Handling Events 38

Firing Events 39

Removing Events 41

Firing Custom Events 42

Summary 43

4 The Class System 45

Defining Your Own Custom Class 45

Defining Getters and Setters 48

Defining Singletons and Static Members 51

Inherit from a Single Class 53

Inherit from Multiple Classes 56

Summary 58

5 The Layout System 61

Implementing a Horizontal Layout 62

Implementing a Vertical Layout 67

Implementing a Full-Screen (Fit) Layout 73

Implementing a Card Layout 75

Implementing the Default Layout 78

Docking Components 79

Summary 81

Part II Building the FindACab App

6 Structured Code 85

Design Patterns 85

The MVC Pattern 86

Sencha MVC 87

What Is Sencha Cmd? 90

Generating an Application with Sencha Cmd 91

Generating Workspaces 96

Generating a Model with Sencha Cmd 97

Implementing a Data Store 99

Implementing a View 101

Generating a Controller with Sencha Cmd 102

Referencing a Component from a Controller 104

Listening to Events from a Controller 106

Implementing the MVC Entry Point 107

Loading External Classes 110

Summary 112

7 Data Models 115

Validating a Model 117

Saving a Model to the Server 120

Cross-Domain Restrictions 122

Implementing a Model Association 123

Remote Associations 127

Summary 129

8 Remote Connections (Server Proxies) 131

Saving or Retrieving Data from the Same Domain with AJAX 132

Implementing AJAX Proxies 132

Implementing an AJAX Request 137

Retrieving Data from an External Domain with JSONP 140

Implementing JSONP Proxies 141

Implementing the JSONP Proxy for the FindACab App 142

Implementing a JSONP Request 146

Saving or Retrieving Data from an External Domain with AJAX 148

Implementing CORS 148

Summary 149

9 Data Stores 151

Loading Data in a Store 151

Sorting a Data Store Locally 154

Sorting Data on a Server 156

Grouping a Data Store 158

Filtering a Data Store Locally 159

Custom Filter Functions 160

Stacking Filters 160

Filtering Data on a Server 161

Syncing Data in a Store 163

Summary 166

10 Offline Storage (Client Proxies) 167

Saving Data into Local Storage 169

Saving Data into Session Storage 172

Saving Data into a Web SQL Database 173

Saving Data into a Web SQL Database for the FindACab App 175

Saving Assets Locally by Using the Application Cache 181

Summary 184

11 View Components 185

Implementing a Messagebox 186

Implementing Toolbars and Title Bars 190

Implementing Buttons 194

Implementing Lists 199

Implementing a List for the FindACab App 201

Implementing a Google Map 205

Implementing Overlays 216

Implementing Charts 223

Summary 229

12 Forms 231

Implementing a Form 233

Implementing the FindACab App Form 234

Implementing a Fieldset 234

Validating a Form 237

Validating a Form in the FindACab App 238

Submitting a Form 241

Implementing Form Handling 244

Summary 247

13 Themes and Styles 249

Sencha Touch Stylesheets 249

Using Sass 252

Using Platform-Specific, Out-of-the-Box Themes 253

Creating Your Own Custom Theme 258

The FindACab App Stylesheet 262

Incorporating Custom Fonts 263

Base64 Fonts 265

Incorporating Custom Icons 266

Optimizing Your Stylesheet for Best Performance 270

Minifying Your Stylesheet 270

Importing Only the Required Mixins in Your Stylesheet 271

Excluding Experimental Support for Uncommon Browsers 272

Excluding Default Fonts and Icons 273

Summary 273

14 Builds 275

Going Native 276

Build Resources 278

Adding Non-MVC Folders to Your Build Package 279

Adding Extra Resources to Your Build Package 279

Creating a Test Build with Sencha Cmd 281

Creating a Production Build with Sencha Cmd 282

Creating a Native Build with Sencha Cmd and Adobe PhoneGap 285

Sencha Mobile Packager 286

Apache Cordova 286

Adobe PhoneGap 286

Initialize a PhoneGap Project 287

The PhoneGap Folder Structure 288

The phonegap.local.properties File 288

The config.xml Settings 289

Building the Native Build Package 290

Testing a Native Build 292

Summary 293

A Help with iOS Certificates and Provisioning 295

B Custom Stylesheet for the FindACab App 301

Index 305