piece by piece - an introduction to jquery-ui widget development
TRANSCRIPT
![Page 1: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/1.jpg)
Piece by pieceAn introduction to jQuery-UI widget development
Jakob Westhoff <[email protected]>
Confoo.caMarch 2, 2012
Piece by piece 1 / 55
![Page 2: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/2.jpg)
About Me
I More than 10 years ofprofessional PHPexperience
I More than 7 years ofprofessional JavaScriptexperience
I Open source enthusiastI Regular speaker at
(inter)national conferencesI Consultant, Trainer and
Author
Working with
Qafoopassion for software quality
Piece by piece 2 / 55
![Page 3: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/3.jpg)
About Me
I More than 10 years ofprofessional PHPexperience
I More than 7 years ofprofessional JavaScriptexperience
I Open source enthusiastI Regular speaker at
(inter)national conferencesI Consultant, Trainer and
Author
Working with
Qafoopassion for software quality
We help people to createhigh quality web
applications.
Piece by piece 2 / 55
![Page 4: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/4.jpg)
About Me
I More than 10 years ofprofessional PHPexperience
I More than 7 years ofprofessional JavaScriptexperience
I Open source enthusiastI Regular speaker at
(inter)national conferencesI Consultant, Trainer and
Author
Working with
Qafoopassion for software quality
We help people to createhigh quality web
applications.
http://qafoo.com
Piece by piece 2 / 55
![Page 5: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/5.jpg)
![Page 6: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/6.jpg)
![Page 7: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/7.jpg)
Questions answered today
1. What is jQuery?
2. What is jQuery UI?
3. What features and widgets does jQuery UI provide?
4. In which way can jQuery UI be used to write own widgets?
5. How does the jQuery UI Theme generation/usage work?
Piece by piece 5 / 55
![Page 8: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/8.jpg)
What comes next?
jQuery
Piece by piece 6 / 55
![Page 9: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/9.jpg)
jQuery about itself
I Fast and concise JavaScript library
I HTML document traversing
I Event handling
I Animation
I AJAX
Piece by piece 6 / 55
![Page 10: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/10.jpg)
Working with jQuery
$ ( ” . t o o l t i p ” ) . addClass ( ” h i g h l i g h t ” ) . fadeIn ( ” slow ” ) ;
I Document centric
I Operates on sets accessed using $ or jQueryI $(css selector).operationI jQuery(css selector).operation
I Fluent interface paradigmI operation().operation().operation()
Piece by piece 7 / 55
![Page 11: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/11.jpg)
Working with jQuery
$ ( ” . t o o l t i p ” ) . addClass ( ” h i g h l i g h t ” ) . fadeIn ( ” slow ” ) ;
I Document centric
I Operates on sets accessed using $ or jQueryI $(css selector).operationI jQuery(css selector).operation
I Fluent interface paradigmI operation().operation().operation()
Piece by piece 7 / 55
![Page 12: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/12.jpg)
What comes next?
jQuery-UI
Piece by piece 8 / 55
![Page 13: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/13.jpg)
jQuery-UI about itself
From the jQuery-UI Website:
jQuery UI provides abstractions for low-level interaction andanimation, advanced effects and high-level, themeable widgets,built on top of the jQuery JavaScript Library, that you can use tobuild highly interactive web applications.
Piece by piece 8 / 55
![Page 14: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/14.jpg)
jQuery-UI - A short overview
I A set of high level widgets
I Low level framework to create own Widgets, Behaviors andEffects
I Compatible with all major Browsers (thanks to jQuery)
I Modular code base between 5-220kb
I Fully themeable using a graphical tool: ThemeRoller
I Highly extensible
I Download: http://jqueryui.com
Piece by piece 9 / 55
![Page 15: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/15.jpg)
What comes next?
Widgets
Piece by piece 10 / 55
![Page 16: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/16.jpg)
Widgets included in jQuery UI
I Accordion
I Autocomplete
I Button
I Dialog
I Slider
I Tabs
I Datepicker
I Progressbar
Piece by piece 10 / 55
![Page 17: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/17.jpg)
Live Demo
Live Demo - jQuery UI Widgets
Live DemoNext section
Piece by piece 11 / 55
![Page 18: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/18.jpg)
Accordion
Piece by piece 12 / 55
![Page 19: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/19.jpg)
Accordion
Piece by piece 12 / 55
![Page 20: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/20.jpg)
Accordion
Piece by piece 12 / 55
![Page 21: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/21.jpg)
Autocomplete
Piece by piece 13 / 55
![Page 22: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/22.jpg)
Buttons
Piece by piece 14 / 55
![Page 23: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/23.jpg)
Dialog
Piece by piece 15 / 55
![Page 24: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/24.jpg)
Slider
Piece by piece 16 / 55
![Page 25: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/25.jpg)
Tabs
Piece by piece 17 / 55
![Page 26: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/26.jpg)
Datepicker
Piece by piece 18 / 55
![Page 27: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/27.jpg)
Progressbar
Piece by piece 19 / 55
![Page 28: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/28.jpg)
What comes next?
Behaviors
Piece by piece 20 / 55
![Page 29: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/29.jpg)
Behaviors included in jQuery UI
I Draggable
I Droppable
I Resizable
I Selectable
I Sortable
Piece by piece 20 / 55
![Page 30: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/30.jpg)
What comes next?
Effects
Piece by piece 21 / 55
![Page 31: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/31.jpg)
Effects included in jQuery UI
I Blind
I Bounce
I Clip
I Drop
I Explode
I Fold
I Highlight
I Pulsate
I ...
Piece by piece 21 / 55
![Page 32: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/32.jpg)
What comes next?
AnimationEnhancements
Piece by piece 22 / 55
![Page 33: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/33.jpg)
Animation Enhancements over default jQuery
I Color animations
I New easing functionsI easeInBounceI easeInQuadI ...
I CSS class based animation
Piece by piece 22 / 55
![Page 34: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/34.jpg)
What comes next?
Calling conventions
Piece by piece 23 / 55
![Page 35: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/35.jpg)
Calling conventions
I For each widget (behavior) one function is registered
I The function can be called on any created jQuery set(jQuery.fn)
I The widgets name is used as function name
I All interaction with the Widget is accomplished through thisfunction
Piece by piece 23 / 55
![Page 36: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/36.jpg)
Calling conventions
I Widget creation
$ ( ” # i d ” ) . autocomplete ( ) ;$ ( ” # i d ” ) . autocomplete ( { . . . } ) ;
I Invoking a method without arguments
$ ( ” # i d ” ) . autocomplete ( ” method ” ) ;
I Invoking a method with arguments
$ ( ” # i d ” ) . autocomplete ( ” method ” , arg1 , arg2 , . . . ) ;
Piece by piece 24 / 55
![Page 37: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/37.jpg)
Calling conventions
I Widget creation
$ ( ” # i d ” ) . autocomplete ( ) ;$ ( ” # i d ” ) . autocomplete ( { . . . } ) ;
I Invoking a method without arguments
$ ( ” # i d ” ) . autocomplete ( ” method ” ) ;
I Invoking a method with arguments
$ ( ” # i d ” ) . autocomplete ( ” method ” , arg1 , arg2 , . . . ) ;
Piece by piece 24 / 55
![Page 38: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/38.jpg)
Calling conventions
I Widget creation
$ ( ” # i d ” ) . autocomplete ( ) ;$ ( ” # i d ” ) . autocomplete ( { . . . } ) ;
I Invoking a method without arguments
$ ( ” # i d ” ) . autocomplete ( ” method ” ) ;
I Invoking a method with arguments
$ ( ” # i d ” ) . autocomplete ( ” method ” , arg1 , arg2 , . . . ) ;
Piece by piece 24 / 55
![Page 39: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/39.jpg)
What comes next?
Creating your ownWidget
Piece by piece 25 / 55
![Page 40: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/40.jpg)
Creating a Widget without jQuery-UI
I Widgets usually have a stateI Excessive use of .data methodI Nested closures and custom objects
I Different initialization phases
I Handling of default and user options
I Multiple public methods
I Destruct and remove Widget on request
Piece by piece 25 / 55
![Page 41: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/41.jpg)
What comes next?
Widget Factory
Piece by piece 26 / 55
![Page 42: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/42.jpg)
The Widget factory of jQuery-UI
I DOM-Instance based persistent states
I ”Magic” methods for different initialization phases
I Automatic merging of default and user supplied options
I Custom methods without namespace pollution
I Distinguish between public and private methods
Piece by piece 26 / 55
![Page 43: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/43.jpg)
What comes next?
Example Widget
Piece by piece 27 / 55
![Page 44: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/44.jpg)
The SparkleBar Widget
I A custom made progressbar
I Less flexible due to heavy usage of images
I More sophisticated graphical design possible
Piece by piece 27 / 55
![Page 45: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/45.jpg)
Live Demo
Live Demo - SparkleBar
Live Demo
Piece by piece 28 / 55
![Page 46: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/46.jpg)
Filename conventions
I Name of this widget: sparklebar
I Namespace of this widget: ui
I All widgets should follow a certain filename convention:I jquery.ui.sparklebar.jsI jquery.ui.sparklebar.cssI jquery.ui.sparklebar/image.pngI ...
Piece by piece 29 / 55
![Page 47: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/47.jpg)
The widget factory in action
I Call $.widget to create a new Widget
I First argument: namespace and identifier
I Namespaces do not protect against naming conflicts
I All default widgets use the ui namespace
I Using the ui namespace for your own widgets is just fine
Piece by piece 30 / 55
![Page 48: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/48.jpg)
The widget factory in action
1 $ . widget (2 ’ u i . spark lebar ’ ,3 {
4 /∗ Widget implementat ion ∗ /5 }
6 ) ;
Piece by piece 31 / 55
![Page 49: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/49.jpg)
What comes next?
Initialization
Piece by piece 32 / 55
![Page 50: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/50.jpg)
”Magic” create method
I create function is automatically invoked on widget creation
I Only called once for each widget
Piece by piece 32 / 55
![Page 51: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/51.jpg)
Access to the targeted element
I Targeted element stored in element property
I Saved as jQuery set
I Other magic properties exist: options, widgetName,widgetEventPrefix
Piece by piece 33 / 55
![Page 52: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/52.jpg)
”Magic” create method
1 $ . widget ( ” u i . spark lebar ” , {2 c rea te : function ( ) {3
4 th is . element . empty ( ) ;5
6 $ ( ’<img /> ’ ) . appendTo (7 th is . element8 ) ;9
10 / / . . . Set needed p r o p e r t i e s o f img . . .11
12 }
13 } ) ;
Piece by piece 34 / 55
![Page 53: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/53.jpg)
”Magic” create method
1 $ . widget ( ” u i . spark lebar ” , {2 c rea te : function ( ) {3
4 th is . element . empty ( ) ;5
6 $ ( ’<img /> ’ ) . appendTo (7 th is . element8 ) ;9
10 / / . . . Set needed p r o p e r t i e s o f img . . .11
12 }
13 } ) ;
Piece by piece 34 / 55
![Page 54: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/54.jpg)
”Magic” create method
1 $ . widget ( ” u i . spark lebar ” , {2 c rea te : function ( ) {3
4 th is . element . empty ( ) ;5
6 $ ( ’<img /> ’ ) . appendTo (7 th is . element8 ) ;9
10 / / . . . Set needed p r o p e r t i e s o f img . . .11
12 }
13 } ) ;
Piece by piece 34 / 55
![Page 55: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/55.jpg)
”Magic” create method
1 $ . widget ( ” u i . spark lebar ” , {2 c rea te : function ( ) {3
4 th is . element . empty ( ) ;5
6 $ ( ’<img /> ’ ) . appendTo (7 th is . element8 ) ;9
10 / / . . . Set needed p r o p e r t i e s o f img . . .11
12 }
13 } ) ;
Piece by piece 34 / 55
![Page 56: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/56.jpg)
”Magic” init method
I init is invoked every time the widget function is calledwithout a method name
I $("#id").sparklebar()
I $("#id").sparklebar({...})
I Little brother of the create function
I Called after create has been called
Piece by piece 35 / 55
![Page 57: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/57.jpg)
”Magic” init method
1 $ . widget ( ” u i . spark lebar ” , {2 i n i t : function ( ) {3
4 / / Set DOM p r o p e r t i e s based on provided opt ions5 / / I n i t i a l i z e s ta te o f the widget6
7 }
8 } ) ;
Piece by piece 36 / 55
![Page 58: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/58.jpg)
”Magic” init method
1 $ . widget ( ” u i . spark lebar ” , {2 i n i t : function ( ) {3
4 / / Set DOM p r o p e r t i e s based on provided opt ions5 / / I n i t i a l i z e s ta te o f the widget6
7 }
8 } ) ;
Piece by piece 36 / 55
![Page 59: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/59.jpg)
”Magic” init method
1 $ . widget ( ” u i . spark lebar ” , {2 i n i t : function ( ) {3
4 / / Set DOM p r o p e r t i e s based on provided opt ions5 / / I n i t i a l i z e s ta te o f the widget6
7 }
8 } ) ;
Piece by piece 36 / 55
![Page 60: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/60.jpg)
init and create
I Use create to prepare the DOM for the widget
I Use init to initialize widget based on options
Piece by piece 37 / 55
![Page 61: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/61.jpg)
What comes next?
Methods / Properties
Piece by piece 38 / 55
![Page 62: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/62.jpg)
Widget methods and properties
I Use custom properties and methods to structure your code
I Both are defined in the Widget object
1 $ . widget (2 ’ u i . spark lebar ’ ,3 {
4 ’ cur rentVa lue ’ : 425 ’ value ’ : function ( ) { . . . }6 }
7 ) ;
Piece by piece 38 / 55
![Page 63: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/63.jpg)
Widget methods and properties
I Use custom properties and methods to structure your code
I Both are defined in the Widget object
1 $ . widget (2 ’ u i . spark lebar ’ ,3 {
4 ’ cur rentVa lue ’ : 425 ’ value ’ : function ( ) { . . . }6 }
7 ) ;
Piece by piece 38 / 55
![Page 64: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/64.jpg)
One instance per Widget
I A new instance is created for each Widget invocation
I Properties are persistent
1 $ . widget ( ” u i . spark lebar ” , {2
3 ” value ” : function ( va l ) {4 th is . cur rentVa lue = va l ;5
6 / / D isp lay progressbar change7 }
8
9 } ) ;
Piece by piece 39 / 55
![Page 65: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/65.jpg)
One instance per Widget
I A new instance is created for each Widget invocation
I Properties are persistent
1 $ . widget ( ” u i . spark lebar ” , {2
3 ” value ” : function ( va l ) {4 th is . cur rentVa lue = va l ;5
6 / / D isp lay progressbar change7 }
8
9 } ) ;
Piece by piece 39 / 55
![Page 66: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/66.jpg)
Fluent interface and returned values
I Widget factory takes care of fluent interface handling
I Returning a value from a method circumvents this behavior
1 $ . widget ( ” u i . spark lebar ” , {2 getValue : function ( va l ) {3 return th is . cur rentVa lue ;4 }
5 } ) ;
Piece by piece 40 / 55
![Page 67: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/67.jpg)
Fluent interface and returned values
I Widget factory takes care of fluent interface handling
I Returning a value from a method circumvents this behavior
1 $ . widget ( ” u i . spark lebar ” , {2 getValue : function ( va l ) {3 return th is . cur rentVa lue ;4 }
5 } ) ;
Piece by piece 40 / 55
![Page 68: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/68.jpg)
Private methods
I Methods prefixed with underscore ( ) are private
I Properties are always private
1 $ . widget ( ” u i . spark lebar ” , {2 updateVisua lRepresenta t ion : function ( ) {3 . . .4 }
5 } ) ;
Piece by piece 41 / 55
![Page 69: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/69.jpg)
Private methods
I Methods prefixed with underscore ( ) are private
I Properties are always private
1 $ . widget ( ” u i . spark lebar ” , {2 updateVisua lRepresenta t ion : function ( ) {3 . . .4 }
5 } ) ;
Piece by piece 41 / 55
![Page 70: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/70.jpg)
What comes next?
Options
Piece by piece 42 / 55
![Page 71: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/71.jpg)
Configuration options for your widget
I Most widgets need configuration in order to be reusable
I Named options can be provided during widget creation
I Remember: $("#id").sparklebar({...})
Piece by piece 42 / 55
![Page 72: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/72.jpg)
Handling of Options
I Options are stored in the magic options property
I Options are always optional
I Default values need to be provided for each option
Piece by piece 43 / 55
![Page 73: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/73.jpg)
Handling of Options - options property
1 $ . widget ( ” u i . spark lebar ” , {2 opt ions : {3 co lo r : ’ orange ’ ,4 i n i t i a l V a l u e : 0 ,5 animate : true6 } ,7 } ) ;
Piece by piece 44 / 55
![Page 74: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/74.jpg)
Handling of Options - Access merged options
I Default options are automatically merged with user options
I Result is written back to the options property
Piece by piece 45 / 55
![Page 75: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/75.jpg)
Handling of Options - Access merged options
1 $ ( ” # i d ” ) . spark lebar ( { i n i t i a l V a l u e : 40 } ) ;2
3 $ . widget ( ’ u i . spark lebar ’ , {4 i n i t : function ( ) {5 th is . cur rentVa lue = th is . op t ions . i n i t i a l V a l u e ;6 } ,7 } ) ;
Piece by piece 46 / 55
![Page 76: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/76.jpg)
What comes next?
Excursion: Eventnamespaces
Piece by piece 47 / 55
![Page 77: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/77.jpg)
Event namespaces - a mostly unknown feature
I Group registered events by a certain identifier
I As usual use bind in order to listen for events
I Namespaces and event types separated using a dot (.)I eg. click.namespace
I Namespaces allow easy de-registration/managementI .unbind("click.namespace")I .unbind(".namespace")
Piece by piece 47 / 55
![Page 78: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/78.jpg)
Event namespaces in widget development
I Always use event namespaces inside your widgets
I Use the widget identifier as namespace
I No conflict between your event handlers and others
I Easy de-registration possible without remembering thecallback
Piece by piece 48 / 55
![Page 79: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/79.jpg)
What comes next?
Visual Appearance
Piece by piece 49 / 55
![Page 80: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/80.jpg)
CSS formatting in widgets
I Use CSS rules for visual formatting if possible
I Decoupling of functionality and representation
I Store CSS in appropriate positionI jquery.ui.sparklebar.css
I Always use classes not ids (multiple invocation)
I Use widget name and namespace as prefixI ui-sparklebar-container
I Follow the hierarchy of your elementsI ui-sparklebar-container-bar
Piece by piece 49 / 55
![Page 81: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/81.jpg)
ThemeRoller - An online theme creator
I ThemeRoller is a WYSIWYG application to design themes
I Specifically written for jQuery UI
I Realized as a web application
I Creates needed CSS themes & images on the fly
Piece by piece 50 / 55
![Page 82: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/82.jpg)
ThemeRoller
I Custom Widgets can profit from ThemeRoller as well
I Use jQuery-UI CSS framework for your elements
I Just a set of predefined CSS classes
Piece by piece 51 / 55
![Page 83: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/83.jpg)
ThemeRoller
I Structural helperI ui-helper-hidden, ui-helper-clearfix, ...
I Widget look and feelI ui-widget-header, ui-widget-content, ...
I Button and input element markerI ui-priority-primary, ui-state-default, ...
I Visual statesI ui-state-highlight, ui-state-error, ...
I IconsI ui-icon, ui-icon-folder-collapsed, ...
Piece by piece 52 / 55
![Page 84: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/84.jpg)
What comes next?
Conclusion
Piece by piece 53 / 55
![Page 85: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/85.jpg)
What you have learned today - In general
1. Obey the filename rules: jquery.namespace.widget.js
2. Use the Widget factory ($.widget)
3. Don’t be afraid of using many options
4. Always use Event namespaces to register events
5. Prefix your CSS classes with the widget name, follow thehierarchy
Piece by piece 53 / 55
![Page 86: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/86.jpg)
What you have learned today - In general
1. Obey the filename rules: jquery.namespace.widget.js
2. Use the Widget factory ($.widget)
3. Don’t be afraid of using many options
4. Always use Event namespaces to register events
5. Prefix your CSS classes with the widget name, follow thehierarchy
Piece by piece 53 / 55
![Page 87: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/87.jpg)
What you have learned today - In general
1. Obey the filename rules: jquery.namespace.widget.js
2. Use the Widget factory ($.widget)
3. Don’t be afraid of using many options
4. Always use Event namespaces to register events
5. Prefix your CSS classes with the widget name, follow thehierarchy
Piece by piece 53 / 55
![Page 88: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/88.jpg)
What you have learned today - In general
1. Obey the filename rules: jquery.namespace.widget.js
2. Use the Widget factory ($.widget)
3. Don’t be afraid of using many options
4. Always use Event namespaces to register events
5. Prefix your CSS classes with the widget name, follow thehierarchy
Piece by piece 53 / 55
![Page 89: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/89.jpg)
What you have learned today - In general
1. Obey the filename rules: jquery.namespace.widget.js
2. Use the Widget factory ($.widget)
3. Don’t be afraid of using many options
4. Always use Event namespaces to register events
5. Prefix your CSS classes with the widget name, follow thehierarchy
Piece by piece 53 / 55
![Page 90: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/90.jpg)
What you have learned today - About the factory
1. State of your Widget is preserved
2. Properties are always private, methods can be (underscore)
3. The fluent interface is taken care of if no value is returned
4. User options and defaults are automatically merged
5. create is the right place to manifest your widget in the DOM
6. init is the right place to initialize the widgets state
Piece by piece 54 / 55
![Page 91: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/91.jpg)
What you have learned today - About the factory
1. State of your Widget is preserved
2. Properties are always private, methods can be (underscore)
3. The fluent interface is taken care of if no value is returned
4. User options and defaults are automatically merged
5. create is the right place to manifest your widget in the DOM
6. init is the right place to initialize the widgets state
Piece by piece 54 / 55
![Page 92: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/92.jpg)
What you have learned today - About the factory
1. State of your Widget is preserved
2. Properties are always private, methods can be (underscore)
3. The fluent interface is taken care of if no value is returned
4. User options and defaults are automatically merged
5. create is the right place to manifest your widget in the DOM
6. init is the right place to initialize the widgets state
Piece by piece 54 / 55
![Page 93: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/93.jpg)
What you have learned today - About the factory
1. State of your Widget is preserved
2. Properties are always private, methods can be (underscore)
3. The fluent interface is taken care of if no value is returned
4. User options and defaults are automatically merged
5. create is the right place to manifest your widget in the DOM
6. init is the right place to initialize the widgets state
Piece by piece 54 / 55
![Page 94: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/94.jpg)
What you have learned today - About the factory
1. State of your Widget is preserved
2. Properties are always private, methods can be (underscore)
3. The fluent interface is taken care of if no value is returned
4. User options and defaults are automatically merged
5. create is the right place to manifest your widget in the DOM
6. init is the right place to initialize the widgets state
Piece by piece 54 / 55
![Page 95: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/95.jpg)
What you have learned today - About the factory
1. State of your Widget is preserved
2. Properties are always private, methods can be (underscore)
3. The fluent interface is taken care of if no value is returned
4. User options and defaults are automatically merged
5. create is the right place to manifest your widget in the DOM
6. init is the right place to initialize the widgets state
Piece by piece 54 / 55
![Page 96: Piece by piece - An introduction to jQuery-UI widget development](https://reader031.vdocument.in/reader031/viewer/2022021211/6206552d8c2f7b173006c34e/html5/thumbnails/96.jpg)
Thanks for Listening
Questions? Comments? Critics? Ideas?Please rate this talk at
https://joind.in/6103
Piece by piece 55 / 55