Einführung in Ext JS 4
Thorsten Suckow-Homberg, Jahrgang 1976
PHP & Javascript seit 1999
Sencha seit 2007
Autor des conjoon Open Source Projektes...
Worum geht es hier?

Ext JS4 – HTML 5 Framework zur Erstellung webbasierter Applikationen
Geschichtlicher Überblick und Ei...
Sencha

Jack Slocum programmiert ExtJS auf Basis von YUI, um
eine erweiterte Sammlung von UI Controls anzubieten
Ende 2007...
Features

Charting
MVC
Powerful Grids
Theming
Component Query
Sandboxing
Verbessertes Klassensystem
SCREENSHOT SCIRCLES http://s-circles.com
Klassensystem
Klassensystem - Einführung

Sencha arbeitet mit einem eigenen System, um OOP
in JS abzubilden
Verwendet unter der Haube na...
Klassensystem - Einführung

var user = Ext.create('User');

var user = new User();
Klassensystem - Einführung

var user = Ext.create('User');

var user = new User();

var user = new User('Mustermann', 'Max...
Klassensystem - Vererbung

Ext.define('User.Customer', {
extend : 'User',
street

: '',

city

User

: '',

zipCode : ''
}...
Klassensystem - Mixins

Mixins erlauben es, Funktionalität anderer Klassen in
eine andere zu „streuen“
„Traits“ in PHP
Nur...
Komponenten
Komponenten
Komponenten – Component

Controls in ExtJS sind „Komponenten“ Ext.Component
Eigenschaften:
show/hide
enable/disable
xtype
...
Komponenten – Component > Container

Container - lateinisch continere ‚zusammenhalten',
‚enthalten'
Ext.Container - Basisk...
Komponenten – Component > Container (Layouts)

Wichtigsten:
hbox
vbox
card
fit
Komponenten – Component > Container (Layouts)

Zum Beispiel:

Quelle: http://www.sencha.com/docs/
Komponenten – Component > Container > Panel

in ExtJS Container für verschiedene funktionelle
Aufgaben:
TabPanel
TreePanel...
Ext.create('Ext.tab.Panel', {
width: 400,
height: 200,
renderTo: document.body,
items: [{
title: 'Tab 1'
}, {
title: 'Tab ...
Komponenten – Component > Container > Toolbar

Container zur Aufnahme von Steuer- oder
Eingabeelementen
Toolbars werden me...
Ext.create('Ext.tab.Panel', {
width: 400,
height: 200,
tabBar : {
weight : -1
},
renderTo: document.body,
dockedItems : [{...
Stores & Models
Model

Repräsentiert Datenstruktur einzelner Entitäten
Verfügt über Assoziationen
Ext.data.Association: hasMany, belongsTo...
Store

Kapselt eine Menge von Model Instanzen
Kommuniziert über Proxies mit angeschlossenem
Backend oder Cient (HTML5 Stor...
Proxy

Ext.data.Store/Model: „proxy“ property vom Typ
Ext.data.Proxy, über den auf Daten
lesend
schreibend

zugegriffen we...
Model – Beispiel Validierung
Ext.define(„Order“, {
extend : 'Ext.data.Model',

var order = Ext.create(„Order“);
var errors...
Model – Beispiel Assoziation
Ext.define(„Order“, {

var address =
Ext.create(„ShippingAddress“,{

// …

street : 'Comusstr...
Model – Proxy

Beispiel (Ext.data.proxy.Ajax):
proxy : {
type : 'ajax',
api : {

myOrder.save();

create

: '/order/add/',...
Aufbau einer
Applikation
Applikation - Grundgerüst

*.css

Server

index.html

*.js
Applikation – Bootstrapping

Bootstrapping über Ext.application
Einstiegspunkt ist launch() - ähnlich Ext.onReady
Wird auf...
Applikation - Verzeichnislayout

Typisches Verzeichnislayout:

Namespace: webcon
webcon.controller.*
webcon.model.*
webcon...
Applikation - Packages

/controller

/model

/view

/store

Ext.app.Controller

Ext.data.Model

Ext.Component

Ext.data.St...
Quellen

Folien und Quelltext:
http://thorsten.suckow-homberg.de/webcon-2013
Dokumentation:
http://sencha.com/docs
Twitter...
Einfuehrung in ExtJS 4
Einfuehrung in ExtJS 4
Einfuehrung in ExtJS 4
Einfuehrung in ExtJS 4
Upcoming SlideShare
Loading in...5
×

Einfuehrung in ExtJS 4

6,208

Published on

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

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

No Downloads
Views
Total Views
6,208
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
12
Comments
0
Likes
1
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.
  • 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×