yet another javascript widgets library

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

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

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

4. GvaScript Core

5. GvaScript-> Prototype core extends prototype framework fills in the blanks where prototype left off

6. GvaScriptCore 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. GvaScriptCore keyboard events handling GvaScript.KeyMap class binds a handler to a sequence of keys for a given element/document

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

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

10. GvaScript UI

11. GvaScriptAutocompleter 4 different types for datasource Static list Function Ajax JSONP

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

13. GvaScriptAutocompleter callbacks onBind onLegalValue onIllegalValue onLeave

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

15. GvaScriptTreeNavigator 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. GvaScriptTreeNavigator callbacks onOpen / onClose onSelect / onDeselect onBeforeLoadContent / onAfterLoadContent onPing => DEMO

17. GvaScriptCustomButtons 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. GvaScriptGrid 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. GvaScriptGrid callbacks onShow onPing onEmpty onCancel => DEMO

20. GvaScriptForm 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. GvaScriptForm Support for repeatable sections GvaScript.Form.add('authors') GvaScript.Form.remove('authors.1')

22. GvaScriptForm 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

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

24. GvaScriptForm callbacks onInit onChange onBeforeSubmit onSubmit onBeforeDestroy

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

26. GvaScriptForm#fire 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. GvaScriptForm Responders Global Responders Applicable to all GvaScript.Form instances Execute *after* instance callback

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

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

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

31. GvaScriptv2.0

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

33. library authors Laurent Dami Mona Remlawi collaborators Jean-Christophe Durand Sébastien Cuendet Thanks !! Questions ??