1. Mona Remlawi(mona.remlawi@gmail.com) 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 ??