Mona Remlawi  (mona.remlawi@gmail.com) Perl.it Workshop - October 2009
<ul><li>pronounced as “gee-vascript“ </li></ul><ul><li>javascript  library born in Geneva, Switzerland </li></ul>
<ul><li>Current Version 1.17 </li></ul><ul><li>CPAN   </li></ul><ul><li>http://search.cpan.org/dist/Alien-GvaScript/lib/Al...
 
core extends prototype framework fills in the blanks where prototype left off
<ul><li>events delegation </li></ul><ul><li>binds a handler to an event for elements matching a selector </li></ul><ul><li...
<ul><li>keyboard events handling </li></ul><ul><li>GvaScript.KeyMap class </li></ul><ul><li>binds a handler to a sequence ...
<ul><li>JSONP support </li></ul><ul><li>Prototype.getJSON(url, callback) </li></ul><ul><li>loads a JSON from a remote URL ...
<ul><li>misc extensions </li></ul><ul><li>Hash.expand </li></ul><ul><li>Hash.flatten </li></ul><ul><li>String.chomp </li><...
 
<ul><li>4 different types for datasource </li></ul><ul><ul><li>Static list </li></ul></ul><ul><ul><li>Function </li></ul><...
<ul><li>tons of options </li></ul><ul><ul><li>autoSuggest / autosuggestDelay </li></ul></ul><ul><ul><li>minimumChars </li>...
<ul><li>callbacks </li></ul><ul><ul><li>onBind </li></ul></ul><ul><ul><li>onLegalValue </li></ul></ul><ul><ul><li>onIllega...
<ul><li>easy mapping of dependent fields </li></ul><ul><ul><li>options.dependentFields = {src: target[, ]} </li></ul></ul>...
<ul><li>Easy keyboard navigation </li></ul><ul><ul><li>Arrows keys </li></ul></ul><ul><ul><li>Tab / Shift-Tab </li></ul></...
<ul><li>callbacks </li></ul><ul><ul><li>onOpen / onClose </li></ul></ul><ul><ul><li>onSelect / onDeselect </li></ul></ul><...
<ul><li>Neat rendering of buttons (CSS) </li></ul><ul><li>Hover / Focus styling </li></ul><ul><li>Easy navigation with key...
<ul><li>JSON datasource </li></ul><ul><li>Paginated </li></ul><ul><li>Easy navigation with keys </li></ul><ul><ul><li>Up /...
<ul><li>callbacks </li></ul><ul><ul><li>onShow </li></ul></ul><ul><ul><li>onPing </li></ul></ul><ul><ul><li>onEmpty </li><...
<ul><li>JSON datasource </li></ul><ul><li>Helpers to serialize/de-serialize form data </li></ul><ul><ul><li>GvaScript.Form...
<ul><li>Support for repeatable sections </li></ul>GvaScript.Form.add('authors') GvaScript.Form.remove('authors.1')
<ul><li>Uses event delegation to register events on the form level </li></ul><ul><li>Supports  all  W3C standard events </...
<ul><li>Handlers will receive  </li></ul><ul><ul><li>event object  </li></ul></ul><ul><ul><li>newvalue (change & init) </l...
<ul><li>callbacks </li></ul><ul><ul><li>onInit </li></ul></ul><ul><ul><li>onChange </li></ul></ul><ul><ul><li>onBeforeSubm...
new GvaScript.Form(...) onInit form.submit() onBeforeSubmit ? onSubmit onChange control change [return false] onBeforeDest...
<ul><li>Use fire method to fire custom events </li></ul><ul><li>GvaScript.Form#fire(‘XYZ’, arg) </li></ul><ul><ul><li>call...
<ul><li>Global Responders </li></ul><ul><li>Applicable to all GvaScript.Form instances </li></ul><ul><li>Execute  *after* ...
<ul><li>Global Responders </li></ul><ul><li>Applicable to all GvaScript.Form instances </li></ul><ul><li>Execute  *before*...
form.fire('XYZ'[, arg]) EarlyResponders Responders callback Execution chain will stop whenever *any* of the responders or ...
<ul><li>Global Responders can be used to  </li></ul><ul><ul><li>Define global behavior of forms </li></ul></ul><ul><ul><li...
 
<ul><li>i18n </li></ul><ul><li>Use GvaScript.KeyMap to extend DOM elements with  </li></ul><ul><ul><li>Element#keyListen(k...
Thanks !!  Questions ??
Upcoming SlideShare
Loading in …5
×

GvaScript Library

1,363 views

Published on

yet another javascript widgets library

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GvaScript Library

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

×