Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Powerful UX, not just for desktops anymore - Conferencia Rails

Lori M Olson
November 05, 2010

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
Tweet

More Decks by Lori M Olson

Other Decks in Programming

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: [email protected]
    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