41
Widget-Entwicklung für jQuery Mobile

Widget-Entwicklung für jQuery mobile - erweitern die Funktionalität Kürzere Entwicklung Stabil ... ("postit-style-" + this.options.theme); Semantik 29 | Widget-Entwicklung für

  • Upload
    dohanh

  • View
    218

  • Download
    3

Embed Size (px)

Citation preview

Widget-Entwicklung

für jQuery Mobile

Widget-Entwicklung für jQuery Mobile 2 |

Widget-Entwicklung für jQuery Mobile 3 |

Plugins…

Widget-Entwicklung für jQuery Mobile 4 |

Plugin

Plugins…

Widget-Entwicklung für jQuery Mobile 5 |

... von dritten

Plugins… erweitern die Funktionalität

Kürzere

Entwicklung

Stabil

Getestet

Zukunftsicher

Widget-Entwicklung für jQuery Mobile 6 |

Plugins…

Widget-Entwicklung für jQuery Mobile 7 |

... selbst entwickelt

Plugins… Wiederverwendung

Widget-Entwicklung für jQuery Mobile 8 |

l erstellen

l verwenden

l evtl. anpassen

l wiederverwenden

l -> profitieren

Plugins… Strukturierung

l Funktionalität strukturieren

l Übersicht wahren

l Fehler eingrenzen

l Erweiterungen erleichtern

Widget-Entwicklung für jQuery Mobile 9 |

Plugins…

Widget-Entwicklung für jQuery Mobile 10 |

... Action

Das Ziel

Widget-Entwicklung für jQuery Mobile 11 |

Das Ziel

Widget-Entwicklung für jQuery Mobile 12 |

Das Ziel

Widget-Entwicklung für jQuery Mobile 13 |

Das Ziel

Widget-Entwicklung für jQuery Mobile 14 |

<div data-role="postit">

jQuery UI widget factory

Widget-Entwicklung für jQuery Mobile 15 |

Just call me…

I will build the widget

you need!

jQuery UI widget factory

Widget-Entwicklung für jQuery Mobile 16 |

;

(function ( $, window) {

$.widget( "mobile.widgetName", $.mobile.widget, {

options: {

foo: true,

bar: false

},

_create: function() {...},

_destroy: function () {...},

publicMethod: function ( event ) {...},

_internalMethod: function () {...}

});

})( jQuery, this);

jQuery UI widget factory

Widget-Entwicklung für jQuery Mobile 17 |

;

(function ( $, window) {

$.widget( "mobile.widgetName", $.mobile.widget, {

options: {

foo: true,

bar: false

},

_create: function() {...},

_destroy: function () {...},

publicMethod: function ( event ) {...},

_internalMethod: function () {...}

});

})( jQuery, this);

Semikolon am Anfang

jQuery UI widget factory

Widget-Entwicklung für jQuery Mobile 18 |

;

(function ( $, window) {

$.widget( "mobile.widgetName", $.mobile.widget, {

options: {

foo: true,

bar: false

},

_create: function() {...},

_destroy: function () {...},

publicMethod: function ( event ) {...},

_internalMethod: function () {...}

});

})( jQuery, this);

Initialisierung und Optionen:

Name + Namespace

Optionen mit Defaults belegen!

jQuery UI widget factory

Widget-Entwicklung für jQuery Mobile 19 |

;

(function ( $, window) {

$.widget( "mobile.widgetName", $.mobile.widget, {

options: {

foo: true,

bar: false

},

_create: function() {...},

_destroy: function () {...},

publicMethod: function ( event ) {...},

_internalMethod: function () {...}

});

})( jQuery, this);

create: Erzeugung des Plugins

destroy: cleanup für Objekte und

Referenzen

jQuery UI widget factory

Widget-Entwicklung für jQuery Mobile 20 |

;

(function ( $, window) {

$.widget( "mobile.widgetName", $.mobile.widget, {

options: {

foo: true,

bar: false

},

_create: function() {...},

_destroy: function () {...},

publicMethod: function ( event ) {...},

_internalMethod: function () {...}

});

})( jQuery, this);

public Methoden um das Plugin

von außen zu beinflussen

interne Methode müssen mit

einem _ beginnen

Plugins…

Widget-Entwicklung für jQuery Mobile 21 |

... best practice

Auto initialization

Widget-Entwicklung für jQuery Mobile 22 |

Auto initialization

Widget-Entwicklung für jQuery Mobile 23 |

$.widget("mobile.postit"

… postit-plugin-code …

);

$(":jqmData(role='page')").live("pagecreate", function() {

$(":jqmData(role='postit')", this).each(function() {

$(this).postit();

});

});

Namespacing

Widget-Entwicklung für jQuery Mobile 24 |

Namespacing

Widget-Entwicklung für jQuery Mobile 25 |

<div data-role="postit"> some content </div>

<div data-exxcellent-role="postit"> some content </div>

Theming

Widget-Entwicklung für jQuery Mobile 26 |

Theming

Widget-Entwicklung für jQuery Mobile 27 |

Theming

Widget-Entwicklung für jQuery Mobile 28 |

this.options.theme = this.options.theme ||

$.mobile.getInheritedTheme(this.element, "c");

$(this.element).addClass("postit-style-" + this.options.theme);

Semantik

Widget-Entwicklung für jQuery Mobile 29 |

Wann immer möglich,

auf bestehende Semantik aufbauen

z.B. ein eigenes progress-Element, dass sich drehen lässt…

Semantik

Widget-Entwicklung für jQuery Mobile 30 |

<progress value="32" max="100"

data-orientation="90"> </progress>

Wann immer möglich,

auf bestehende Semantik aufbauen

z.B. ein eigenes progress-Element, dass sich drehen lässt…

Widget-Entwicklung für jQuery Mobile 31 |

Accessibility

Widget-Entwicklung für jQuery Mobile 32 |

Accessibility

$el.attr( "role", "dialog" )

Widget-Entwicklung für jQuery Mobile 33 |

Accessibility

$el.attr( "role", "dialog" )

RADIO

TREEITEM

Widget-Entwicklung für jQuery Mobile 34 |

Tests

Aktueller jQuery mobile Gerätepark

Widget-Entwicklung für jQuery Mobile 35 |

http://jquerymobile.com/blog/

Unit Tests

Widget-Entwicklung für jQuery Mobile 36 |

test("style applied", function() {

ok( $("#mydiv_1").hasClass( "postit" ),

"css class applied" )

});

test("style not applied", function() {

ok(!$("#mydiv_2").hasClass( "postit" ),

"css class not applied")

});

Widget-Entwicklung für jQuery Mobile 37 |

test("style applied", function() {

ok( $("#mydiv_1").hasClass( "postit" ),

"css class applied" )

});

test("style not applied", function() {

ok(!$("#mydiv_2").hasClass( "postit" ),

"css class not applied")

});

Dokumentation

l Mit Hilfe von jQuery mobile

l Methoden

l Events

l Beispiele

l Download URL

– Code + Kommentare

– minified Version

Widget-Entwicklung für jQuery Mobile 38 |

Widget-Entwicklung für jQuery Mobile 39 |

... Fazit

Fazit

Widget-Entwicklung für jQuery Mobile 40 |

Widget factory bietet

einen einfachen Ansatz!

best practice beachten:

auto initialization

namespacing

theming

semantik

wai-aria

testing

documentation

Widget-Entwicklung für jQuery Mobile 41 |

Danke!

Vielen Dank

für Ihre Aufmerksamkeit!

Referenzen:

http://jquerymobile.com/

“jQuery Mobile” von Jon Reid

O’Reilly Media

eXXcellent solutions GmbH

Beim Alten Fritz 2

89075 Ulm

http://www.exxcellent.de

[email protected]