gvascript library
DESCRIPTION
yet another javascript widgets libraryTRANSCRIPT
- 1. Mona Remlawi([email protected]) Perl.it Workshop - October 2009
2.
- pronounced as gee-vascript
- javascriptlibrary born in Geneva, Switzerland
3.
- Current Version 1.17
- CPAN
- http://search.cpan.org/dist/Alien-GvaScript/lib/Alien/GvaScript.pm
- GoogleCode
- http://code.google.com/p/gvascript/
4. 5. core extends prototype framework fills in the blanks where prototype left off 6.
- events delegation
- binds a handler to an event for elements matching a selector
- Event.register&Event.unregister
- Element#register&Element#unregister
- document.register&document.unregister
7.
- keyboard events handling
- GvaScript.KeyMap class
- binds a handler to a sequence of keys for a given element/document
8.
- JSONP support
- Prototype.getJSON(url, callback)
- loads a JSON from a remote URL
- when ready -> callback(json_data)
9.
- misc extensions
- Hash.expand
- Hash.flatten
- String.chomp
- Element.autoScroll
- Element.flash
- Element.outerHTML
- Event.detailedStop
- RegEx.escape
- Class.checkOption
10. 11.
- 4 different types for datasource
-
- Static list
-
- Function
-
- Ajax
-
- JSONP
12.
- tons of options
-
- autoSuggest / autosuggestDelay
-
- minimumChars
-
- typeAhead
-
- strict / blankOK
-
- caseSensitive
-
- ignorePrefix
-
- multivalued
-
- minWidth / maxHeight / offsetX
13.
- callbacks
-
- onBind
-
- onLegalValue
-
- onIllegalValue
-
- onLeave
14.
- easy mapping of dependent fields
-
- options.dependentFields = {src: target[, ]}
=> DEMO 15.
- Easy keyboard navigation
-
- Arrows keys
-
- Tab / Shift-Tab
-
- Find as you type
-
- + & - to open & close
-
- * & / to explode & fold
- Support node lazy loading
- Support node HTML content
16.
- callbacks
-
- onOpen / onClose
-
- onSelect / onDeselect
-
- onBeforeLoadContent / onAfterLoadContent
-
- onPing
=> DEMO 17.
- Neat rendering of buttons (CSS)
- Hover / Focus styling
- Easy navigation with keys
-
- Tab / Shift-Tab
-
- Right / Left arrows
- Can have a type
-
- submit
-
- reset
- Or an explicit callback
=> DEMO 18.
- JSON datasource
- Paginated
- Easy navigation with keys
-
- Up / Down arrows
-
- Home / End
-
- Right / Left arrows
-
- PageUp / PageDn
-
- Ctrl-Home / Ctrl-End
- Easy inclusion of CustomButtons
19.
- callbacks
-
- onShow
-
- onPing
-
- onEmpty
-
- onCancel
=> DEMO 20.
- JSON datasource
- Helpers to serialize/de-serialize form data
-
- GvaScript.Form#fill_from_tree
-
- GvaScript.Form#to_hash
-
- GvaScript.Form#to_tree
- Easy inclusion of custom buttons
21.
- Support for repeatable sections
GvaScript.Form.add('authors') GvaScript.Form.remove('authors.1') 22.
- Uses event delegation to register events on the form level
- SupportsallW3C standard events
-
- click, mouseover, mouseout, focus, blur, change
- Supports a custom event init on form controls
- init gets fired when a control gets initialized with GvaScript.Form#init
23.
- Handlers will receive
-
- event object
-
- newvalue (change & init)
-
- oldvalue(change)
24.
- callbacks
-
- onInit
-
- onChange
-
- onBeforeSubmit
-
- onSubmit
-
- onBeforeDestroy
25. new GvaScript.Form(...) onInit form.submit() onBeforeSubmit ? onSubmit onChange control change [return false] onBeforeDestroy form.destroy() 26.
- Use fire method to fire custom events
- GvaScript.Form#fire(XYZ, arg)
-
- calls onXYZ callback if any
-
- passes instance as a first argument
-
- arg goes second
27.
- Global Responders
- Applicable to all GvaScript.Form instances
- Execute*after*instance callback
28.
- Global Responders
- Applicable to all GvaScript.Form instances
- Execute*before*instance callback
29. form.fire('XYZ'[, arg]) EarlyResponders Responders callback Execution chain will stop whenever *any* of the responders or instance callback returns *false* 30.
- Global Responders can be used to
-
- Define global behavior of forms
-
- Plugin form validation
-
- Plugin form control masking
=> DEMO 31. 32.
- i18n
- Use GvaScript.KeyMap to extend DOM elements with
-
- Element#keyListen(keyRegex, handler)
-
- Element#stopKeyListening(keyRegex[, handler])
- You tell me ...
33. Thanks !!Questions ??