Einfuehrung in ExtJS 4

6.672 Aufrufe

Veröffentlicht am

Der Vortrag gibt einen ersten Einblick in das Javascript/HTML5 Framework ExtJS4 (http://sencha.com).

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
6.672
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
32
Aktionen
Geteilt
0
Downloads
13
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie
  • Paradigmenwechseln:Hinweis auf unterschiedliche Benutzerführung.
    Mehr wird durch weniger realisiert: Komplexer tree wird bspw. Mit einer Nested List dargestellt.
  • Hinweis auf Getter und setterName, key und foreign key
  • Hinweis auf Getter und setterName, key und foreign key
  • Einfuehrung in ExtJS 4

    1. 1. Einführung in Ext JS 4
    2. 2. Thorsten Suckow-Homberg, Jahrgang 1976 PHP & Javascript seit 1999 Sencha seit 2007 Autor des conjoon Open Source Projektes (conjoon.org) arbeitet für die eyeworkers interactive GmbH, Karlsruhe ( jobs.eyeworkers.de ) @thorstensuckow
    3. 3. Worum geht es hier? Ext JS4 – HTML 5 Framework zur Erstellung webbasierter Applikationen Geschichtlicher Überblick und Einblicke in das Framework Sencha als Unternehmen Architektur, Klassensystem, Komponenten
    4. 4. Sencha Jack Slocum programmiert ExtJS auf Basis von YUI, um eine erweiterte Sammlung von UI Controls anzubieten Ende 2007: ExtJS2 – Meilenstein! 2011: Sench Touch 2011: ExtJS4 heute: Investment Capital, vlt. das populärste JS Framework: > 5000 Kunden, > 300.000 aktive community member, > 100 Mitarbeiter mehr als 1.6 Millionen Entwickler
    5. 5. Features Charting MVC Powerful Grids Theming Component Query Sandboxing Verbessertes Klassensystem
    6. 6. SCREENSHOT SCIRCLES http://s-circles.com
    7. 7. Klassensystem
    8. 8. Klassensystem - Einführung Sencha 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()
    9. 9. Klassensystem - Einführung var user = Ext.create('User'); var user = new User();
    10. 10. Klassensystem - Einführung var user = Ext.create('User'); var user = new User(); var user = new User('Mustermann', 'Max'); var user = Ext.create('User', { firstname : 'Max', lastname }); : 'Mustermann'
    11. 11. Klassensystem - Vererbung Ext.define('User.Customer', { extend : 'User', street : '', city User : '', zipCode : '' }); Customer
    12. 12. 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! Ext.define('Prism', { Ext.define('Internet', { mixins : { stayAnonymous : 'Prism' spy : function() { alert(„I'm watching you“); }, } invisible : function() { this.mixins.stayAnonymous.spy.call(this) }); } });
    13. 13. Komponenten
    14. 14. Komponenten
    15. 15. Komponenten – Component Controls in ExtJS sind „Komponenten“ Ext.Component Eigenschaften: show/hide enable/disable xtype child components via Ext.Container observable!
    16. 16. 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
    17. 17. Komponenten – Component > Container (Layouts) Wichtigsten: hbox vbox card fit
    18. 18. Komponenten – Component > Container (Layouts) Zum Beispiel: Quelle: http://www.sencha.com/docs/
    19. 19. Komponenten – Component > Container > Panel in ExtJS Container für verschiedene funktionelle Aufgaben: TabPanel TreePanel GridPanel ...
    20. 20. Ext.create('Ext.tab.Panel', { width: 400, height: 200, renderTo: document.body, items: [{ title: 'Tab 1' }, { title: 'Tab 2' }, { title: 'Tab 3' }] }); defaultType
    21. 21. Komponenten – Component > Container > Toolbar Container zur Aufnahme von Steuer- oder Eingabeelementen Toolbars werden meist „docked“ eingehangen top bottom
    22. 22. Ext.create('Ext.tab.Panel', { width: 400, height: 200, tabBar : { weight : -1 }, renderTo: document.body, dockedItems : [{ dock : 'top', xtype : 'toolbar', weight : -2, items : [{ text : 'Button 1' }, { text : 'Button 2' }] }], items: [{ title: 'Tab 1' }...] });
    23. 23. Stores & Models
    24. 24. Model Repräsentiert Datenstruktur einzelner Entitäten Verfügt über Assoziationen Ext.data.Association: hasMany, belongsTo Über Proxies können Änderungen an einzelnen Instanzen persistiert werden Außerdem: Feld-Definitionen Validierung (Ext.data.validations)
    25. 25. Store Kapselt eine Menge von Model Instanzen Kommuniziert über Proxies mit angeschlossenem Backend oder Cient (HTML5 Storage) filtern sortieren suchen
    26. 26. Proxy Ext.data.Store/Model: „proxy“ property vom Typ Ext.data.Proxy, über den auf Daten lesend schreibend zugegriffen werden kann Proxies lassen sich in zwei Gruppen unterteilen: Client Proxies Server Proxies
    27. 27. Model – Beispiel Validierung Ext.define(„Order“, { extend : 'Ext.data.Model', var order = Ext.create(„Order“); var errors = order.validate(); console.log(errors); fields : [{ name : 'customerName', type : 'string' }], var order = Ext.create(„Order“, { customerName : 'A. Scott' validations : [{ type : 'presence', field : 'customerName' }); var errors = order.validate(); console.log(errors); }] }); errors => [Ext.data.Errors].isValid():boolean
    28. 28. Model – Beispiel Assoziation Ext.define(„Order“, { var address = Ext.create(„ShippingAddress“,{ // … street : 'Comusstrasse 23' associations : [{ name : 'shippingAddress', type }); : 'hasOne', model : 'ShippingAddress' var order = Ext.create(„Order“, { customerName : 'D. Lightman' }] }); }); Ext.define(„ShippingAddress“, { extend : 'Ext.data.Model', fields : [{ name : 'street', type : 'string' }] }}); order.setShippingAddress(address);
    29. 29. Model – Proxy Beispiel (Ext.data.proxy.Ajax): proxy : { type : 'ajax', api : { myOrder.save(); create : '/order/add/', read : '/order/get', Order.load(123); update : '/order/set', myOrder.save(); Destroy : '/order/delete' } } myOrder.destroy();
    30. 30. Aufbau einer Applikation
    31. 31. Applikation - Grundgerüst *.css Server index.html *.js
    32. 32. 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
    33. 33. Applikation - Verzeichnislayout Typisches Verzeichnislayout: Namespace: webcon webcon.controller.* webcon.model.* webcon.store.* webcon.view.*
    34. 34. Applikation - Packages /controller /model /view /store Ext.app.Controller Ext.data.Model Ext.Component Ext.data.Store vermittelt zwischen Modelund View-Instanzen repräsentiert (relationale) Datenstrukturen UI Controls Repräsentiert einen Datencontainer und verwaltet n-Instanzen vom Typ Ext.data.Model
    35. 35. Quellen Folien und Quelltext: http://thorsten.suckow-homberg.de/webcon-2013 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

    ×