• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sencha Touch 2
 

Sencha Touch 2

on

  • 2,217 views

Sencha Touch 2 @ 4Developers (Poznan, Poland)

Sencha Touch 2 @ 4Developers (Poznan, Poland)

Statistics

Views

Total Views
2,217
Views on SlideShare
2,217
Embed Views
0

Actions

Likes
4
Downloads
87
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

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