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.

Transcript

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!
7. Child’s play!
8. Ruby is magic!
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 will-paginate
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 action