DHTML„Die Begriffe DHTML, dynamisches HTML (engl. dynamic HTML)oder auch DOM-Scripting bezeichnen bestimmte Webdesign-Meth...
(Mobile Development mit)Sencha Touch 2
Whos talking?   Thorsten Suckow-Homberg, Jahrgang 1986 1976       PHP & Javascript seit 1999       Sencha-Frameworks seit ...
Worum geht es hier?   Sencha Touch 2 – HTML 5 Framework zur Erstellung   „mobiler“ Applikationen   Geschichtlicher Überbli...
Sencha– das is dochn Tee, oder?
Sencha   Jack Slocum programmiert ExtJS auf Basis von YUI, um   eine erweiterte Sammlung von UI Controls anzubieten   Ende...
Features
Features   IOS (4+), Blackberry (OS 6+, Table OS 1), Android   (2.2+ als kleinster gemeinsamer Nenner, außerdem   noch Kin...
Features - Charts
Features – Sencha Architect                              Quelle: http://www.sencha.com/products/architect/
Sencha Touch – Das Ziel
Komponenten
Komponenten              Quelle: Sencha Touch in Action, Manning Publications, http://www.manning.com/garcia2/. Mit freund...
Komponenten - Component
Komponenten – Component   Controls in Sencha Touch sind „Komponenten“ -   Ext.Component   Eigenschaften:      show/hide   ...
Komponenten - Component
Komponenten - Container
Komponenten – Component > Container   Container - lateinisch continere ‚zusammenhalten,   ‚enthalten   Ext.Container - Bas...
Komponenten – Component > Container                            Layouts?
Komponenten – Component > Container (Layouts)   Wichtigsten:       hbox       vbox       card       fit
Komponenten – Component > Container (Layouts)   Zum Beispiel:                                                Quelle: http:...
Komponenten – Component > Container (Layouts)   Aufgepaßt!       Das „Wischen“ durch verschiedene Karten wird nicht       ...
Komponenten – Component > Container > Panel
Komponenten – Component > Container > Panel   in ExtJS noch Container für verschiedene funktionelle   Aufgaben, bspw. TabP...
Komponenten – Component > Container > Panel
Komponenten – Component > Container > TabPanel                                                 (traditionell)
Komponenten – Component > Container > Toolbar
Komponenten – Component > Container > Toolbar   Container zur Aufnahme von Steuer- oder   Eingabeelementen   Toolbars werd...
Komponenten – Component > Button
Komponenten – Component > Button   Ext.Button Repräsentiert einen „Button“   kann mit icons versehen werden (text,   icon/...
Komponenten – Component > Button (Generiertes HTML Markup)                                  ExtJS 3   ==
Komponenten – Component > Button (Generiertes HTML Markup)                                  ExtJS 3   ==                  ...
Komponenten – Component > Button (Template)template: [{  tag       : span,                                1  reference : b...
Komponenten – Component > Container > DataView > List
Komponenten – Component > Container > DataView > List   Ext.dataview.DataView – View für data stores   Ext.dataview.List –...
Komponenten – Component > Container > DataView > List
Komponenten – Model   Repräsentiert Datenstruktur einzelner Entitäten   Verfügt über Assoziationen   Über Proxies können Ä...
Komponenten - Store   Kapselt eine Kollektion von Model Instanzen   Kommuniziert über Proxies mit angeschlossenen   physik...
Unnu?
Klassensystem
Klassensystem - Einführung   ST arbeitet mit einem eigenen System, um OOP in JS   abzubilden   Verwendet unter der Haube n...
Klassensystem - Einführung             var User = function() {                                       };                   ...
Klassensystem - Einführung             var User = function() {                   User                };getFirstname(): Str...
Klassensystem - Einführung               var User = function() {                   User                  };getFirstname():...
Klassensystem - Einführungvar user = Ext.create(User);   var user = new User();
Klassensystem - Einführungvar user = Ext.create(User);                          var user = new User();                    ...
Klassensystem - Vererbung   Ext.define(User.Customer, {         extend : User,                                     User   ...
Klassensystem - Mixins    Mixins erlauben es, Funktionalität anderer Klassen in    eine andere zu „streuen“    „Traits“ in...
Klassensystem - Mixins Ext.define(User.Customer, {       extend : User,       mixins : [            Ext.util.Observable   ...
Aufbau einerApplikation
Applikation - Grundgerüst                                         *.css                            index.html       Server...
Applikation – Bootstrapping    Bootstrapping über Ext.application    Einstiegspunkt ist launch() - ähnlich Ext.onReady    ...
Applikation - Verzeichnislayout    Typisches Verzeichnislayout:
Applikation - Verzeichnislayout    Typisches Verzeichnislayout:                                   Namespace: webcon
Applikation - Verzeichnislayout    Typisches Verzeichnislayout:                                   Namespace: webcon       ...
Applikation - Packages        /controller                     /model                   /view               /store  Ext.app...
Applikation - Komponenten   Hauptansicht → webcon.view.MainView (Ext.tab.Panel)      Hauptscreen → Ext.navigation.View    ...
Applikation – Das Ergebnis
Quellen   Folien und Quelltext:   http://thorsten.suckow-homberg.de/webcon-2012   Dokumentation:   http://sencha.com/docs ...
Webcon 2012  Mobile Development mit Sencha Touch
Webcon 2012  Mobile Development mit Sencha Touch
Webcon 2012  Mobile Development mit Sencha Touch
Webcon 2012  Mobile Development mit Sencha Touch
Webcon 2012  Mobile Development mit Sencha Touch
Webcon 2012  Mobile Development mit Sencha Touch
Upcoming SlideShare
Loading in …5
×

Webcon 2012 Mobile Development mit Sencha Touch

1,011 views
926 views

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,011
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Paradigmenwechseln:Hinweis auf unterschiedliche Benutzerführung. Mehr wird durch weniger realisiert: Komplexer tree wird bspw. Mit einer Nested List dargestellt.
  • Webcon 2012 Mobile Development mit Sencha Touch

    1. 1. DHTML„Die Begriffe DHTML, dynamisches HTML (engl. dynamic HTML)oder auch DOM-Scripting bezeichnen bestimmte Webdesign-Methoden, bei denen während der Anzeige einer Webseite dieseselbst, ausgelöst durch Benutzereingaben, verändert wird.“ Quelle: http://de.wikipedia.org/wiki/Dynamic_HTML
    2. 2. (Mobile Development mit)Sencha Touch 2
    3. 3. Whos talking? Thorsten Suckow-Homberg, Jahrgang 1986 1976 PHP & Javascript seit 1999 Sencha-Frameworks seit 2007 Autor diverser ExtJS-Extensions (u.a. Ext.ux.Livegrid) sowie des conjoon Open Source Projektes (conjoon.org) arbeitet für die eyeworkers interactive GmbH, Karlsruhe ( jobs.eyeworkers.de :) ) Hobbys: Kaffee, Gitarre, Fahrrad, Einhörner
    4. 4. Worum geht es hier? Sencha Touch 2 – HTML 5 Framework zur Erstellung „mobiler“ Applikationen Geschichtlicher Überblick und Einblicke in das Framework Sencha als Unternehmen Vorstellung verfügbarer Komponenten Klassensystem Aufbau einer ST Applikation Beispielprogramm
    5. 5. Sencha– das is dochn Tee, oder?
    6. 6. Sencha Jack Slocum programmiert ExtJS auf Basis von YUI, um eine erweiterte Sammlung von UI Controls anzubieten Ende 2007: ExtJS2 – Meilenstein! Juni 2010: „[...] we combined forces with jQTouch and Raphaël to tackle this new challenge of creating awesome web applications on touch based devices [...]“ heute: Investment Capital, vlt. das populärste JS Framework: > 5000 Kunden, > 300.000 aktive community member, > 100 Mitarbeiter mehr als 1.6 Millionen Entwickler
    7. 7. Features
    8. 8. Features IOS (4+), Blackberry (OS 6+, Table OS 1), Android (2.2+ als kleinster gemeinsamer Nenner, außerdem noch Kindle Fire OS 6.2.2) SDK Tools Generieren und bundlen von Applikationen Native Packaging für PlayStore oder App Store Charting „Mobile HTML5 Charts“ (in 2.1?) Sencha Architect – Visual Editor für ST/ExtJS
    9. 9. Features - Charts
    10. 10. Features – Sencha Architect Quelle: http://www.sencha.com/products/architect/
    11. 11. Sencha Touch – Das Ziel
    12. 12. Komponenten
    13. 13. Komponenten Quelle: Sencha Touch in Action, Manning Publications, http://www.manning.com/garcia2/. Mit freundlicher Genehmigung von Jay Garcia.
    14. 14. Komponenten - Component
    15. 15. Komponenten – Component Controls in Sencha Touch sind „Komponenten“ - Ext.Component Eigenschaften: show/hide enable/disable template based rendering floatable sizeable positionable observable!
    16. 16. Komponenten - Component
    17. 17. Komponenten - Container
    18. 18. Komponenten – Component > Container Container - lateinisch continere ‚zusammenhalten, ‚enthalten Ext.Container - Basisklasse für alle Komponenten, die andere Komponenten aufnehmen können Toolbars Panels Fieldsets Container verwalten ihre Kindelemente über Layouts
    19. 19. Komponenten – Component > Container Layouts?
    20. 20. Komponenten – Component > Container (Layouts) Wichtigsten: hbox vbox card fit
    21. 21. Komponenten – Component > Container (Layouts) Zum Beispiel: Quelle: http://www.sencha.com/docs/
    22. 22. Komponenten – Component > Container (Layouts) Aufgepaßt! Das „Wischen“ durch verschiedene Karten wird nicht direkt über ein Layout realisiert, sondern mit Hilfe von Ext.carousel.Carousel
    23. 23. Komponenten – Component > Container > Panel
    24. 24. Komponenten – Component > Container > Panel in ExtJS noch Container für verschiedene funktionelle Aufgaben, bspw. TabPanel, TreePanel, GridPanel in Sencha Touch: Overlays (Ext.Sheet) durch den Paradigmenwechsel „stationär“ → „mobil“ sind die verwendeten Panel-Typen recht überschaubar (Ext.TabPanel, Ext.Container mit entsprechenden Layouts)
    25. 25. Komponenten – Component > Container > Panel
    26. 26. Komponenten – Component > Container > TabPanel (traditionell)
    27. 27. Komponenten – Component > Container > Toolbar
    28. 28. Komponenten – Component > Container > Toolbar Container zur Aufnahme von Steuer- oder Eingabeelementen Toolbars werden meist „docked“ eingehangen top bottom … und in Zusammenhang mit Navigation benutzt Container → Buttons (default Type ist Ext.Button)
    29. 29. Komponenten – Component > Button
    30. 30. Komponenten – Component > Button Ext.Button Repräsentiert einen „Button“ kann mit icons versehen werden (text, icon/iconCls) feuert entsprechende Events bei Interaktion
    31. 31. Komponenten – Component > Button (Generiertes HTML Markup) ExtJS 3 ==
    32. 32. Komponenten – Component > Button (Generiertes HTML Markup) ExtJS 3 == Sencha Touch !
    33. 33. Komponenten – Component > Button (Template)template: [{ tag : span, 1 reference : badgeElement, hidden : true}, { tag : span, 2 className : Ext.baseCSSPrefix + button-icon, reference : iconElement, hidden : true}, { tag : span, 3 reference : textElement, hidden : true}] 1 2 3
    34. 34. Komponenten – Component > Container > DataView > List
    35. 35. Komponenten – Component > Container > DataView > List Ext.dataview.DataView – View für data stores Ext.dataview.List – konkrete Implementierung (ähnlich „Grids“ in ExtJS) Gruppierung (grouped) Sortierung Index Leiste (indexBar → Ext.IndexBar) „Disclosures“
    36. 36. Komponenten – Component > Container > DataView > List
    37. 37. Komponenten – Model Repräsentiert Datenstruktur einzelner Entitäten Verfügt über Assoziationen Über Proxies können Änderungen an einzelnen Instanzen persistiert werden
    38. 38. Komponenten - Store Kapselt eine Kollektion von Model Instanzen Kommuniziert über Proxies mit angeschlossenen physikalischen Speichern (Backend, Client/HTML5 Storage) filtern sortieren suchen
    39. 39. Unnu?
    40. 40. Klassensystem
    41. 41. Klassensystem - Einführung ST arbeitet mit einem eigenen System, um OOP in JS abzubilden Verwendet unter der Haube natürlich weiterhin die Stärken des Prototyping Overrides, Mixins new fällt weg, dafür Ext.create() Klassendefinition über Ext.define()
    42. 42. Klassensystem - Einführung var User = function() { }; User User.prototype = {getFirstname(): String firstname : Max,setFirstname(String) lastname : Mustermann,getLastname(): StringsetLastname(String) setFirstname : function(fname) { this.firstname = fname }, getFirstname : function() { return this.firstname;Ext.define(User, { }, config : { setLastname : function(lname) { firstname : Max, this.lastname = lname lastname : Mustermann }, } getLastname : function() {}); return this.lastname; }, };
    43. 43. Klassensystem - Einführung var User = function() { User };getFirstname(): String User.prototype = {setFirstname(String) firstname : Max,getLastname(): String lastname : Mustermann,setLastname(String) setFirstname : function(fname) {Ext.define(User, { this.firstname = fname config : { }, firstname : Max, getFirstname : function() { lastname : Mustermann return this.firstname; } },}); setLastname : function(lname) { this.lastname = lname },getFirstname() getLastname : function() {setFirstname() return this.lastname;getLastname() },setLastname() };
    44. 44. Klassensystem - Einführung var User = function() { User };getFirstname(): String User.prototype = {setFirstname(String) firstname : Max,getLastname(): String lastname : Mustermann,setLastname(String) setFirstname : function(fname) {Ext.define(User, { this.firstname = fname config : { }, firstname : Max, getFirstname : function() { lastname : Mustermann return this.firstname; } },}); setLastname : function(lname) { this.lastname = lname },getFirstname() apply*() getLastname : function() {setFirstname() update*() return this.lastname;getLastname() },setLastname() };
    45. 45. Klassensystem - Einführungvar user = Ext.create(User); var user = new User();
    46. 46. Klassensystem - Einführungvar user = Ext.create(User); var user = new User(); var user = new User(Mustermann, Max); var user = Ext.create(User, { firstname : Max, lastname : Mustermann });
    47. 47. Klassensystem - Vererbung Ext.define(User.Customer, { extend : User, User config : { street : , city : , zipCode : } }); Customer
    48. 48. Klassensystem - Mixins Mixins erlauben es, Funktionalität anderer Klassen in eine andere zu „streuen“ „Traits“ in PHP Nur Verhalten wird kopiert, nicht aber der Typ! Beispiel: Ext.util.Observable In ExtJS noch eigenständige Klasse Klassen, deren Instanzen Ereignisse senden können („Events feuern“), übernehmen das Verhalten von Observable durch ein Mixin!
    49. 49. Klassensystem - Mixins Ext.define(User.Customer, { extend : User, mixins : [ Ext.util.Observable ], var cust = Ext.create(User.Customer); config : { street : , cust.on(addresschange, function() { city : , alert(„Address changed!“); ZipCode : }); }, cust.changeAddress(/*...*/); changeAddress : function(address) { // ... this.fireEvent(addresschange); } });
    50. 50. Aufbau einerApplikation
    51. 51. Applikation - Grundgerüst *.css index.html Server *.js
    52. 52. Applikation – Bootstrapping Bootstrapping über Ext.application Einstiegspunkt ist launch() - ähnlich Ext.onReady Wird aufgerufen, sobald Applikation initialisiert wurde Resourcen und Viewport werden hier initialisiert Folgt dem MVC Architekturmuster
    53. 53. Applikation - Verzeichnislayout Typisches Verzeichnislayout:
    54. 54. Applikation - Verzeichnislayout Typisches Verzeichnislayout: Namespace: webcon
    55. 55. Applikation - Verzeichnislayout Typisches Verzeichnislayout: Namespace: webcon webcon.controller.* webcon.model.* webcon.store.* webcon.view.*
    56. 56. Applikation - Packages /controller /model /view /store Ext.app.Controller Ext.data.Model Ext.Component Ext.data.Storevermittelt zwischen Model- repräsentiert (relationale) UI Controls Repräsentiert einenund View-Instanzen Datenstrukturen Datencontainer und verwaltet n-Instanzen vom Typ Ext.data.Model
    57. 57. Applikation - Komponenten Hauptansicht → webcon.view.MainView (Ext.tab.Panel) Hauptscreen → Ext.navigation.View Listenansicht → webcon.view.ListView (Ext.List) Datenbank → webcon.store.AttendeeStore (Ext.data.Store) Datenstruktur → webcon.model.Attendee (Ext.data.Model) Detailansicht → webcon.view.AttendeeDetailView (Ext.Container) Infoscreen → Ext.Container
    58. 58. Applikation – Das Ergebnis
    59. 59. Quellen Folien und Quelltext: http://thorsten.suckow-homberg.de/webcon-2012 Dokumentation: http://sencha.com/docs Twitter: http://twitter.com/ModusCreate, /ModusJesus, /msims84, /sencha ExtJS in Action Books: http://manning.com/garcia http://manning.com/garcia2 http://manning.com/garcia3 Forum: http://sencha.com/forum

    ×