Sencha touch 2
Upcoming SlideShare
Loading in...5
×
 

Sencha touch 2

on

  • 741 views

Sencha Touch 2 application development introduction from the SmartDevCon conference in Katowice, Poland

Sencha Touch 2 application development introduction from the SmartDevCon conference in Katowice, Poland

Statistics

Views

Total Views
741
Views on SlideShare
741
Embed Views
0

Actions

Likes
1
Downloads
658
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Sencha touch 2 Sencha touch 2 Presentation Transcript

  • 4Developers (Poznan, Poland) / April 18th 2012 Martin de Keijzer Building mobile web applications with Sencha Touch 2 woensdag 18 april 12
  • About me Martin de Keijzer Dutch web developer 2 @Martin1982 PHPBenelux Board Member Working for Ibuildings http://www.martindekeijzer.nl woensdag 18 april 12
  • Why mobile? 3 woensdag 18 april 12
  • Apps Languages Apple: Objective-C Android: Java Windows Phone: C# / Visual Basic 4 Distribution Methods Apple: AppStore Android: Market Windows Phone: Microsoft Market Place woensdag 18 april 12
  • Web Apps Available through the web Platform independent Can be transformed to an App-like experience Can be wrapped as native apps 5 woensdag 18 april 12
  • woensdag 18 april 12
  • The Sencha Touch way Building applications, not websites Pure JavaScript Touch framework MV(S)C Paradigm Based on ExtJS 4 Downloadable from http://www.sencha.com 7 woensdag 18 april 12
  • Getting started 8 woensdag 18 april 12
  • Quick start: Sencha Command 9 sencha generate app <name> <path> woensdag 18 april 12
  • Quick start: Sencha Command 10 •App •Resources •SDK (DO NOT TOUCH!) •app.js •.json files •index.html woensdag 18 april 12
  • Quick Start: Sencha Command 11 Webkit woensdag 18 april 12
  • User interface Abstraction of various app-interface ui elements: containers panels tabpanels carousels lists forms toolbars 12 woensdag 18 april 12
  • Creating views 13 app/view/Pictures.js woensdag 18 april 12
  • Creating views 14 woensdag 18 april 12
  • Creating views 15 /app.js woensdag 18 april 12
  • Creating views 16 app/view/Main.js woensdag 18 april 12
  • Creating views 17 woensdag 18 april 12
  • Creating views 17 woensdag 18 april 12
  • Taking control 18 woensdag 18 april 12
  • Bootstrapping and Controllers 19 /app.js Final point of bootstrapping, controllers & profiles go first woensdag 18 april 12
  • Bootstrapping and Controllers 20 woensdag 18 april 12
  • Events 21 Make the component selectable Create a new controller woensdag 18 april 12
  • Events 22 app/controller/PictureBox.js woensdag 18 april 12
  • Events 23 app/controller/PictureBox.js woensdag 18 april 12
  • Events 24 Querying Predefined events woensdag 18 april 12
  • Events 25 woensdag 18 april 12
  • Data Communication 26 woensdag 18 april 12
  • Data communication 27 woensdag 18 april 12
  • Model 28 Model Field Association Validation woensdag 18 april 12
  • Model 29 app/model/Talk.js woensdag 18 april 12
  • Store 30 Store Model Filter Grouper Sorter woensdag 18 april 12
  • Store 31 app/store/Schedule.js app.js woensdag 18 april 12
  • Proxy 32 Proxy Reader Writer Store Model woensdag 18 april 12
  • Proxy 33 app/model/Talk.js woensdag 18 april 12
  • Create a list 34 app/view/Schedule.js woensdag 18 april 12
  • Create a list 35 app.js woensdag 18 april 12
  • Create a list 36 app/view/Main.js woensdag 18 april 12
  • Data in action! 37 woensdag 18 april 12
  • Device profiles 38 woensdag 18 april 12
  • Device profiles Different devices require different options. Tablet has more screen real estate and can provide more user interaction than a phone. Sencha Touch 2 provides profiles to build concrete implementations of the device functionalities. 39 woensdag 18 april 12
  • Profile setup 40 woensdag 18 april 12
  • Profile overriding 41 app/controller/phone/PictureBox.js app/controller/tablet/PictureBox.js woensdag 18 april 12
  • Profile overriding 42 app/profile/Phone.js woensdag 18 april 12
  • Profile overriding 43 Desktop woensdag 18 april 12
  • Profile overriding 44 Phone woensdag 18 april 12
  • Profile overriding 45 Tablet woensdag 18 april 12
  • Theme editing 46 woensdag 18 april 12
  • woensdag 18 april 12
  • Installing Compass 48 gem install compass woensdag 18 april 12
  • The scss file 49 compass compile compass watch Extension: .scss woensdag 18 april 12
  • The scss file 50 woensdag 18 april 12
  • Compass Variables 51 sdk/resources/themes/ stylesheets/sencha-touch/ default/_variables.scss woensdag 18 april 12
  • Compass Mixins 52 woensdag 18 april 12
  • Tips and conclusions 53 woensdag 18 april 12
  • Quick Tips •Well documented on http://docs.sencha.com •Sencha Command •Sencha Designer 2 Beta •Keep your views clean, use controllers! •Mobile devices have limited hardware 54 woensdag 18 april 12
  • Need another look? 55 http://www.github.com/ Martin1982/4Developers woensdag 18 april 12
  • Hungry for more????? 56 June 7 - 8 - 9, 2012 Amsterdam RAI (The Netherlands) http://mobileconference.nl Dutch PHP Conference visitors can attend the mobile conference and vice versa! woensdag 18 april 12
  • Questions ? 57 woensdag 18 april 12
  • Thank you! Contact details: Twitter: @Martin1982 mdkeijzer@ibuildings.nl woensdag 18 april 12
  • Debugging explained 59 Bonus! woensdag 18 april 12