$30 off During Our Annual Pro Sale. View Details »

Powerful UX, not just for desktops anymore - Conferencia Rails

Powerful UX, not just for desktops anymore - Conferencia Rails

How to build your own custom UI controls, powered by jQuery, and integrate them in your Rails application.

Lori M Olson

November 05, 2010

More Decks by Lori M Olson

Other Decks in Programming


  1. Powerful UX Not just for desktops anymore

  2. And you are? Lori Olson Blog: http://blog.dragonsharp.com Twitter: wndxlori email:

    lori@wndx.com Github: wndxlori
  3. Warning!

  4. None
  5. None
  6. None
  7. Child’s play!

  8. Ruby is magic!

  9. None
  10. None
  11. None
  12. Why Not? It’s not built in Don’t know how It’s

    too hard
  13. WHY? If it’s not built in, then ... build it!

    If you don’t know how... learn how! If it’s hard... don’t start from scratch!
  14. the problem Need to select from a list of choices

    so use jQuery UI Autocomplete
  15. Demo autocomplete

  16. Autocomplete code

  17. But... What if you need to make more than one

    selection http://jqueryui.com/demos/autocomplete/ http://www.danwellman.co.uk/demos/ autocomplete.html Not completely satisfying, users get confused
  18. Desktop solution Idioms! Add & Remove idiom

  19. Breakdown Select from list Selection to results add and add

    all buttons remove and remove all buttons optionally you can allow manual sorting
  20. Build it

  21. build it

  22. DEMO!

  23. BUT... What if your list of choices is REALLY large?

    In my case > 100K companies Hey, wait a minute, what about that Autocomplete thing....
  24. Controller Back to the jQuery UI Autocomplete Reduce! Reuse! Recycle

    autocomplete from the rails3-jquery- autocomplete plugin is the only controller code required
  25. Autocomplete autocomplete :player, :name

  26. build it

  27. DEMO!

  28. Next STeps Make it a plugin/gem http://guides.rubyonrails.org/plugins.html Use examples like

  29. build it Javascript just needs to be made generic/ consistent

    Create FormTagHelpers to construct the pieces
  30. DEMO!

  31. What’s Left? Testing Javascript especially Javascript needs some cleanup Prototype

    version Can it work on mobile?
  32. Thanks! Github example code git://github.com/wndxlori/cr.git Github plugin git://github.com/wndxlori/powerux-multiselect Call for