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

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

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/

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

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

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)

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

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

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 …

tons of options

autoSuggest / autosuggestDelay

minimumChars

typeAhead

strict / blankOK

caseSensitive

ignorePrefix

multivalued

minWidth / maxHeight / offsetX

…

callbacks onBind onLegalValue onIllegalValue onLeave

callbacks

onBind

onLegalValue

onIllegalValue

onLeave

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

easy mapping of dependent fields

options.dependentFields = {src: target[, ]}

<input ac:dependentFields=“{src: target[, ]}” />

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

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

callbacks

onOpen / onClose

onSelect / onDeselect

onBeforeLoadContent / onAfterLoadContent

onPing

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

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

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

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

callbacks

onShow

onPing

onEmpty

onCancel

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

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')

Support for repeatable sections

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

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)

Handlers will receive

event object

newvalue (change & init)

oldvalue (change)

callbacks onInit onChange onBeforeSubmit onSubmit onBeforeDestroy

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

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 *after* instance callback

Global Responders Applicable to all GvaScript.Form instances Execute *before* 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

Global Responders can be used to

Define global behavior of forms

Plugin form validation

Plugin form control masking

…

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

i18n

Use GvaScript.KeyMap to extend DOM elements with

Element#keyListen(keyRegex, handler)

Element#stopKeyListening(keyRegex[, handler])

You tell me ...

Thanks !! Questions ??