GvaScript Library

Mona Remlawi (mona.remlawi@gmail.com) Perl.it Workshop - October 2009

pronounced as “gee-vascript“
javascript library born in Geneva, Switzerland

Current Version 1.17
CPAN
http://search.cpan.org/dist/Alien-GvaScript/lib/Alien/GvaScript.pm
GoogleCode
http://code.google.com/p/gvascript/

core extends prototype framework fills in the blanks where prototype left off

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

keyboard events handling
GvaScript.KeyMap class
binds a handler to a sequence of keys for a given element/document

JSONP support
Prototype.getJSON(url, callback)
loads a JSON from a remote URL
when ready -> callback(json_data)

misc extensions
Hash.expand
Hash.flatten
String.chomp
Element.autoScroll
Element.flash
Element.outerHTML
Event.detailedStop
RegEx.escape
Class.checkOption

4 different types for datasource
Static list
Function
Ajax
JSONP

tons of options
autoSuggest / autosuggestDelay
minimumChars
typeAhead
strict / blankOK
caseSensitive
ignorePrefix
multivalued
minWidth / maxHeight / offsetX
…

callbacks
onBind
onLegalValue
onIllegalValue
onLeave

easy mapping of dependent fields
options.dependentFields = {src: target[, ]}
<input ac:dependentFields=“{src: target[, ]}” />
=> DEMO

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

callbacks
onOpen / onClose
onSelect / onDeselect
onBeforeLoadContent / onAfterLoadContent
onPing
=> DEMO

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

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

callbacks
onShow
onPing
onEmpty
onCancel
=> DEMO

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

Support for repeatable sections
GvaScript.Form.add('authors') GvaScript.Form.remove('authors.1')

Uses event delegation to register events on the form level
Supports all W3C 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

Handlers will receive
event object
newvalue (change & init)
oldvalue (change)

callbacks
onInit
onChange
onBeforeSubmit
onSubmit
onBeforeDestroy

new GvaScript.Form(...) onInit form.submit() onBeforeSubmit ? onSubmit onChange control change [return false] onBeforeDestroy form.destroy()

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

Global Responders
Applicable to all GvaScript.Form instances
Execute *after* instance callback

Global Responders
Applicable to all GvaScript.Form instances
Execute *before* instance callback

form.fire('XYZ'[, arg]) EarlyResponders Responders callback Execution chain will stop whenever *any* of the responders or instance callback returns *false*

Global Responders can be used to
Define global behavior of forms
Plugin form validation
Plugin form control masking
…
=> DEMO

i18n
Use GvaScript.KeyMap to extend DOM elements with
Element#keyListen(keyRegex, handler)
Element#stopKeyListening(keyRegex[, handler])
You tell me ...

Thanks !! Questions ??

GvaScript Library

by Mona Remlawi on Oct 13, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

GvaScript Library — Presentation Transcript