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
   

   View Slide

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

   View Slide

3. Warning!
   

   View Slide

4. View Slide

5. View Slide

6. View Slide

7. Child’s play!
   

   View Slide

8. Ruby
   is
   magic!
   

   View Slide

9. View Slide

10. View Slide

11. View Slide

12. Why Not?
    It’s not built in
    Don’t know how
    It’s too hard
    

    View Slide

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!
    

    View Slide

14. the problem
    Need to select from a list of choices
    so use jQuery UI Autocomplete
    

    View Slide

15. Demo autocomplete
    

    View Slide

16. Autocomplete code
    

    View Slide

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
    

    View Slide

18. Desktop solution
    Idioms!
    Add & Remove idiom
    

    View Slide

19. Breakdown
    Select from list
    Selection to results
    add and add all buttons
    remove and remove all buttons
    optionally you can allow manual sorting
    

    View Slide

20. Build it
    

    View Slide

21. build it
    

    View Slide

22. DEMO!
    

    View Slide

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

    View Slide

24. Controller
    Back to the jQuery UI Autocomplete
    Reduce! Reuse! Recycle
    autocomplete from the rails3-jquery-
    autocomplete plugin is the only controller
    code required
    

    View Slide

25. Autocomplete
    autocomplete :player, :name
    

    View Slide

26. build it
    

    View Slide

27. DEMO!
    

    View Slide

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

    View Slide

29. build it
    Javascript just needs to be made generic/
    consistent
    Create FormTagHelpers to construct the pieces
    

    View Slide

30. DEMO!
    

    View Slide

31. What’s Left?
    Testing
    Javascript especially
    Javascript needs some cleanup
    Prototype version
    Can it work on mobile?
    

    View Slide

32. Thanks!
    Github example code
    git://github.com/wndxlori/cr.git
    Github plugin
    git://github.com/wndxlori/powerux-multiselect
    Call for action
    

    View Slide