no text exists for this slide

Introduction
Introduction
Server Side MVC – in ColdFusion
New World for Clients
Intro to Sencha touch
What / How
Anatomy of a touch application
Hello World Baby
Touch Application
Touch and MVC Digging into MVC pattern
Book browser app
Resources

Bilal Soylu
Bilal Soylu
CTO Verian Technologies LLC (www.verian.com)
ColdFusion since mid 90s
Enough mistakes to know better ;o)
Open Source Contributor
Blog
http://BonCode.blogspot.com
@BmanClt

Writing complex applications.
Writing complex applications.
Let’s reinvent the wheel every time? Or not?
Fusebox to ColdBox
Model  manages the behaviour and data of the application domain
View  renders the model into a form suitable for interaction (UI)
Controller  A controller accepts input from the user and instructs the model and the view to perform actions based on that input
Provide structure/pattern that can be repeated
Our example uses CFWheels (cfwheels.org)

Quick view of backend MVC on CFWheels
Quick view of backend MVC on CFWheels
Book browser
Running on Railo
Demo

“Architecture is critical to server-side application, so why shouldn’t the same apply to client-side apps?” *
“Architecture is critical to server-side application, so why shouldn’t the same apply to client-side apps?” *
*Alex MacCaw – author “JavaScript Web Applications”

What is it?
What is it?
Relatively new (version 1 release 2010 )
JS application library for touch devices
Works with HTML5 and CSS3
Download (open source and commercial) free from sencha.com
 You will need web kit based browser (i.e. Google Chrome) or Device Emulator to test
Download contains example and docs (large)
API
Getting started

Self Contained App
Self Contained App
JavaScript generated (injected methodology) – UI
Made for Mobile (form factors, displays, behaviors)
Apps can be Packaged

‘da Curve
‘da Curve

no text exists for this slide

Deployment of Touch SDK
Deployment of Touch SDK
Download and extract zip to web directory
Can run on file system (not recommended)
Use from webserver   
Package App using containers (PhoneGap) for native deployment (App store)

All in the “Ext.” namespace
All in the “Ext.” namespace
new Ext.Button();
Add the configuration object uses JS object literal notation
{text:"My Button"}
Put together
new Ext.Button({text:"My Button"});

The Load
The Load
Style Sheet
JS library
The initialization (DOM and library are loaded)
OnReady, i.e. jquery $(document).ready(function () {}
Ext.setup  use for regular start
Ext.application  use for MVC

Demo and code of standard Sencha Touch
Demo and code of standard Sencha Touch

Downloaded already
Downloaded already
Button Example

Convention for organizing code.
Convention for organizing code.
App name is top folder
Library is in lib\touch
App is organized under app or www\app folder

Demo and Code
Demo and Code

API docs downloaded with each SDK
API docs downloaded with each SDK
Look at source code itself
http://tdg-i.com/blog
Sencha Forums (www.sencha.com)

Q & A
Q & A