Sencha Touch - Introduction

1,621 views

Published on

Smartphones zijn niet meer weg te denken uit het dagelijks leven. Bedrijven ontwikkelen steeds meer en meer toepassingen om hun producten of diensten via deze smartphones aan te bieden.
Sencha Touch stelt ontwikkelaars in staat om met behulp van HTML5, CSS en JavaScript applicaties te bouwen die zowel op Android als op iOS draaien.
Deze technische sessie wordt gegeven door Tom Druyts.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,621
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Je bentzelfverantwoordelijkom .validate() op teroepen ! Gebeurtnietautomatisch !
  • Network technologies on the right. Platform integration on the bottom. Device APIs on the left.Meestewebbrowser op iPhone, Android,… is beter in het rechterbovengedeelte. En slecht, of nietbestaandeaan de linkerkant.Je hebtdusgeentoegang tot de contactenlijst, sms, de camera, en alleandere device APIs… En het onderste is redelijkondersteund.Duswatkunnen we nu doen ? Het feitdat browser het rechterbovenstegedeeltegoedondersteunenwillen we nietverliezen, dusdatgaan we wrappen.
  • Wemakengebruik van een embedded webviewdatditgedeelteondersteunt.
  • En we stoppendeze embedded webview in een native wrapper. Onze native wrapper is dusgewooneenwebview, die al dezefunctionaliteitondersteunten waarin we onzeapplicatiedraait. Ditblijkteenenormpopulaireoplossing
  • Sencha Touch - Introduction

    1. 1. SENCHA TOUCH DRUYTS TOM
    2. 2. WHY MOBILE WEB APPS
    3. 3. WHY MOBILE WEB APPS
    4. 4. SENCHA TOUCHA framework to build HTML 5 mobile applications for iOS,Android and Blackberry
    5. 5. ARCHITECTURE Class System Event System Data package Widgets & Layouts …
    6. 6. THE CLASS SYSTEM Prototype- Class-based based
    7. 7. THE CLASS SYSTEM Flexibility Sencha class system = Predictability Programmer Familiarity
    8. 8. CLASS DEFINITIONExt.define(‘My.Sample.Person’, { constructor: function(name) { this.name = name }, walk: function(steps) { alert(this.name + ‘is walking’ + steps + ‘steps’); }});
    9. 9. HOW TO CREATE ANOBJECTvar person = new My.sample.Person(‘Tom’);person.walk();
    10. 10. INHERITENCEExt.define(‘My.sample.Person’, { constructor: function(name) { this.name = name; }, walk: function(steps) { alert(this.name + ‘ is walking ‘ + steps + ‘ steps’); }});Ext.define(‘My.sample.Developer’, { extend: ‘My.sample.Person’, code: function(language) { alert(this.name + ‘ is coding in ‘ + language); }});
    11. 11. INHERITENCEvar tom = new My.sample.Developer(‘tom’);tom.walk(5);tom.code(‘Javascript’);
    12. 12. MIXINSUsed to generate multiple inheritance
    13. 13. DEPENDENCYMANAGEMENT<html><script src=‘sencha-touch-debug.js’></script></html>
    14. 14. DEPENDENCYMANAGEMENT<html><script src=‘sencha-touch-debug.js’></script><script>var tom = new My.sample.Person(‘Tom’);</script></html>
    15. 15. DEPENDENCYMANAGEMENT<html><script src=‘sencha-touch-debug.js’></script><script src=‘My.sample.Person’></script><script>var tom = new My.sample.Person(‘Tom’);</script></html>
    16. 16. DEPENDENCYMANAGEMENT<html><script src=‘sencha-touch-debug.js’></script><script src=‘My.sample.Person’></script><script src=‘My.sample.Developer’></script><script>var tom = new My.sample.Person(‘Tom’);var developer = new My.sample.Developer(‘Tom’);</script></html>
    17. 17. DEPENDENCYMANAGEMENTWhat if we got 50 classes ?The order of the script tags is importantBecomes a nightmare to manage !
    18. 18. DEPENDENCYMANAGEMENTOnly include the sencha-touch-debug.js fileUse Ext.create to create new objects • Will automatically load the class if it isn’t loaded yet • No need to write the imports yourself anymore
    19. 19. DEPENDENCYMANAGEMENT<html><script src=‘sencha-touch-debug.js’></script>var tom = Ext.create(‘My.sample.Developer’, {name: ‘Tom’});</script></html>
    20. 20. CONFIGExt.define(‘My.Sample.Person’, { name: ‘’, constructor: function(name) { this.name = name }, getName: function() { return name; }, setName: function(newName) { this.name = newName; },});
    21. 21. CONFIGIf we got a lot of properties, you need to write a lot ofgetters and settersNobody likes writing getters and setters, it is just boringPut them in a config object, and get the setters andgetters for free
    22. 22. CONFIGExt.define(‘My.sample.Person’, { config: { name: ‘Unkown’ }, constructor: function(config) { this.initConfig(config); }});
    23. 23. CONFIGvar person = Ext.create(‘My.sample.Person’, {name: ‘Tom’, age: 25});person.getName() //Tomperson.getAge() //25
    24. 24. CONFIGGreat those auto generated settersBut what about validation ?What if I want to do more then just assigning the value tothe field ?
    25. 25. CONFIG: SETTERPROCESSBefore Set AfterValidation Actual assignment NotificationFiltering Updating dependenciesTransformation
    26. 26. CONFIG: SETTERPROCESS setFoo()Before processedValue = applyFoo(newValue, oldValue) Set This.foo = processedValueUpdate updateFoo(processedValue, oldValue)
    27. 27. Ext.define(‘My.sample.Person’, { config: { name: ‘Unkown’ }, constructor: function(config) { this.initConfig(config); }, applyName: function(newValue, oldValue) { return ‘De heer’ + newValue; }, updateName: function(newValue, oldValue) { alert(‘Value changed to:’ + name); }});
    28. 28. CLASS SYSTEMBasic understanding of the Class systemPowerful system built in the framework to make the lifeof developers much easierNow we can stop the boring stuff and start writingapplications
    29. 29. What are we going to build ?
    30. 30. TYPICAL APPLICATIONARCHITECTURE
    31. 31. TYPICAL APPLICATIONSTRUCTUREWhich translates to the following directory structure:
    32. 32. INDEX.HTMLInclude the correct buildInclude the CSS file from senchaInclude the app.js fileLeave the body tags empty
    33. 33. APP.JSDefines the entry point of the applicationThe launch function will automatically be called when theframework is loadedWithin the launch function, create your first view and addit to the viewport
    34. 34. VIEWSViews are what the user interacts with directlySencha Touch comes with a wide range of predefinedviews that you can use • Panels, Containers • Buttons • Lists • Textfields, checkboxes, toggle fields • …Must be created in the view subfolder
    35. 35. CONTROLLERSControllers are responsible for responding to events thatoccur within your appThey are automatically created when the application islaunchedMakes use of the powerful twin configuration:• Refs• Controls
    36. 36. CONTROLLERS: REFSUsed to get a reference to a componentMakes use of the ComponentQuery syntax to the locatecomponentsExample:Refs: { homeButton: ‘#home’}You get the getter for free !
    37. 37. CONTROLLERS:CONTROLSDefines the events on which the controller listens andhow to reactExample:control: { homeButton: { goHome: ‘showTheHomeView’ }}
    38. 38. CONTROLLERS: ROUTESSince Sencha Touch 2 controllers have support for RoutesEnables History supportExample:Routes: { ‘login’: ‘showLogin’}Will listen to http://myApp.com/#login
    39. 39. MODELSRepresents the data in our application
    40. 40. MODELS: FIELDSDefines the properties of the modelConsists of: • Name • Typefields: { {name: ‘id’, type: ‘int’} {name: ‘name’, type: ‘string’}}
    41. 41. MODELS: PROXIESDefines where and how to load/save the dataMainly used by storesYou must define: • Type of proxy • The URL • The reader (json or xml)
    42. 42. PROXIES: RESTExt.define(‘App.model.Broodje’, { extend: ‘Ext.data.Model’, config: { fiels: [‘id’, ‘name’], proxy: { type: ‘rest’, url: ‘data/broodjes’, reader: { type: ‘json’, root: ‘broodje’ } } }});
    43. 43. PROXIES: RESTvar broodje = Ext.create(‘App.model.Broodje’, {name: ‘smos kaas’});broodje.save() // POST /broodjesbroodje.destroy() //DELETE /broodjes/123If not happy with the default URLs, implement thebuildUrl method to customize the generated URLs
    44. 44. MODELS:ASSOCIATIONSMost applications have relations between modelsThe associations API enables developers to express thoserelationsPossibilities: • hasMany • belongsTo
    45. 45. MODELS:ASSOCIATIONSExt.define(‘App.model.Broodje’, { extend: ‘Ext.data.Model’, config: { hasMany: {model: ‘Ingredient’, name: ‘ingredients’} }});Ext.define(‘App.model.Ingredient’, { extend: ‘Ext.data.Model’, config: { belongsTo: ‘Ext.data.Model’ }});
    46. 46. ASSOCIATIONS: THEBENEFITSBenefits off defining associations: • Data of ‘child’ members get automatic loaded • Easy to traverse the associated databroodje.ingredients().each(function(ingredient) { console.log(ingredient);});
    47. 47. MODELS: VALIDATIONSModels have support for validationsPossible validations: • Presence • Length • Format • Inclusion • Exclusion
    48. 48. MODELS: VALIDATIONSExamples:{ type: presence, field: name },{ type: length, field: name, min: 5 },{ type: format, field: age, matcher: /d+/ },{ type: inclusion, field: gender, list: [male, female] },{ type: exclusion, field: name, list: [admin] }
    49. 49. MODELS: VALIDATIONSHow to use ?var newUser = Ext.create(User,{ name: admin, age: twenty-nine, gender: not a valid gender });var errors = newUser.validate();errors.isValid(); //returns false if there were validations errorserrors.items(); //returns an array of all errors
    50. 50. STORESIs just basically a collection of model instancesAre used to load data into a ListCan optionally use a Proxy to load the required dataSupport for sorting & grouping
    51. 51. HYBRID APPLICATIONSThis is all nice but we are still running in the browserWhat if we want a ‘real’ application ?What if we want to access device functionality like • Contacts list • Camera • Photos • …
    52. 52. HYBRID ?Site Web sites Web apps Native appApp Native
    53. 53. HYBRID ?Site Web sites Web apps Hybrid apps Native appApp Native
    54. 54. HYBRID ? WebFont Video Audio GraphicsCamera HTTP CSS Styling & LayoutLocation AJAX JavaScriptContacts Events Semantic HTML SMS Sockets Parralel Cross app File system processing messagin
    55. 55. HYBRID ? WebView WebFont Video Audio GraphicsCamera HTTP CSS Styling & LayoutLocation AJAX JavaScriptContacts Events Semantic HTML SMS Sockets Parralel Cross app File system processing messagin
    56. 56. Native wrapper WebView WebFont Video Audio GraphicsCamera HTTP CSS Styling & LayoutLocation AJAX JavaScriptContacts Events Semantic HTML SMS Sockets Parralel Cross app File system processing messagin
    57. 57. SENCHA TOOLSSencha Tools allows you to build a Native WrapperBuild your project with the Sencha Tools and you get anative appBut what about the left side ?
    58. 58. PHONEGAPTries to close the gap between web apps and access tothe device APIsDifferent on every platformAccess to: • Camera • Contacts • Notification • Storage • …
    59. 59. QUESTIONS ?

    ×