Daniel Gallo @DanielJGallo Building Cross-Platform Mobile Apps with Sencha Touch Bundle 

‣ About me and introduction ‣ The Sencha Touch Bundle ‣ Where Sencha fits in ‣ Example app ‣ Getting Started ‣ Questions Overview 

About Me ‣ Daniel Gallo (@DanielJGallo) ‣ Technical Sales Engineer for Sencha ‣ Based in the UK ‣ Using Sencha’s frameworks since 2009 ‣ Joined Sencha in February 2012 ‣ Background in web app development (ASP.NET C#) 

Sencha Rapid and easy development of rich web apps for the broadest range of devices from IE6 to the latest tablet 

Sencha Touch Bundle ‣ Suite of mobile development tools and components: ‣ Sencha Touch - Single page mobile app dev framework ‣ Sencha Architect - HTML5 visual app builder ‣ Sencha Eclipse Plugin - Enhances coding within Eclipse ‣ Sencha Touch Charts - Interactive HTML5 charts ‣ Sencha Mobile Packager - Device APIs and native wrapping ‣ Support - Technical support, code reviews, bug fix releases 

Frameworks 

‣ High-performance mobile HTML5 framework for building cross- platform apps ‣ Complete set of appealing and ready-to-use mobile UI components Sencha Touch 2 Mobile HTML5 Framework 

‣ Build applications that run on Android, Apple iOS, BlackBerry, and Windows Phone 8 ‣ Native packaging for iOS and Android from Windows and Mac Sencha Touch 2 Mobile HTML5 Framework 

‣ Bring your data to life without the need for any plugins ‣ Multi-touch gestures allow users to pinch and zoom through data, spin pie charts, pan line charts, and more Sencha Touch Charts 

Tools 

Sencha Architect App Builder for Sencha frameworks ‣ Visual app builder for desktop and mobile ‣ Generates live interfaces ‣ Build UI and code apps directly in Architect ‣ Connect to backends easily ‣ Best practices generated code 

Sencha Eclipse Plugin Code Intelligence for Sencha JavaScript frameworks ‣ Reduce coding errors and increase productivity with full code completion for Sencha Touch 2 ‣ Integrates in to existing Eclipse workflows ‣ Ease and simplify version migrations with type libraries for each framework version ‣ Support for mixins, classes, inheritance, overrides, defines, etc ‣ Code hints and suggestions for base framework and custom classes 

‣ Build native iOS and Android applications using Sencha Touch 2 ‣ Access native APIs from a Sencha Touch 2 app ‣ Package apps on Windows and Mac Sencha Mobile Packager 

Where Sencha Fits In Sencha Touch - Mobile and Tablet Sencha Ext JS - Desktop and Laptop Internet / Intranet Database Server SQL Server Oracle Sybase MySQL ... Application Server Java PHP ColdFusion .NET Ruby on Rails ... Web Server IIS Apache Tomcat Websphere ... JSON/XML Transport Layer 

Create a Sencha Touch app 

Packaging Apps 

‣ Device information ‣ In-app purchases ‣ SQLite ‣ Camera ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notification ‣ Orientation ‣ Push Ext.device.Camera.capture({ success: function(image) { imageView.setSrc(image); }, quality: 75, destination: 'data' }); Sencha Mobile Packager 

Ext.Viewport.add({ xtype: 'list', itemTpl: '{First} {Last}', store: { fields: ['First', 'Last'], data: Ext.device.Contacts.getContacts() } }); Sencha Mobile Packager ‣ Device information ‣ In-app purchases ‣ SQLite ‣ Camera ‣ Connection ‣ Contacts ‣ Geolocation ‣ Notification ‣ Orientation ‣ Push 

PhoneGap Build Sencha Mobile Packager Building Your App 

sencha package build settings.json From command line: Building Your App 

{ "applicationName": "Simple Camera App", "bundleSeedId": "Q8U8378N9L", "applicationId": "com.danielgallo.cameraapp", "outputPath": "../build/", "versionString": "1.0", "inputPath": "./", "icon": { "57": "resources/icons/icon.png", "72": "resources/icons/[email protected]", "114": "resources/icons/[email protected]", "144": "resources/icons/[email protected]" }, ... Building Your App 

... "configuration": "Debug", "platform": "iOS", "deviceType": "iPad", "certificateAlias": "iPhone Developer", "minOSVersion": "4.0", "orientations": [ "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" ] } Building Your App 

From Sencha Architect: Building Your App 

Building Your App build.phonegap.com 

Getting Started 

Sencha Touch Bundle sencha.com/products/touch-bundle ‣ Register for a 30-day trial 

Documentation and Examples docs.sencha.com 

Documentation and Examples docs.sencha.com 

Community-driven forum for seeking and o ering help. ‣ Over 400,000 registered members ‣ Ask questions ‣ O er help to others ‣ Powerful search facility ‣ Premium Forums for paid support subscribers ‣ Monitored by Sencha sta Sencha Forums sencha.com/forum 

Getting Involved 

Meetups meetup.com ‣ Sencha meetup groups organised by Sencha community ‣ Good opportunity to meet and discuss all things Sencha! 

‣ Sencha’s annual conference ‣ Interact with Sencha engineers and fellow developers ‣ 16th - 19th July in Orlando, Florida ‣ 1,000 developers ‣ 60+ technical sessions ‣ Hackathon senchacon.com 

Questions 

Create amazing apps built on web standards Daniel Gallo @DanielJGallo