Have Better Toys

413 views

Published on

How to build a simple Dashboard with Apotomo, the presentation I gave at the RuPy 2009 in Poznan/Poland.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
413
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Have Better Toys

  1. 2. Studying Advantages of Components A very academic approach...
  2. 3. Why Components are better! ...better than what ?
  3. 4. Components – Have Better Toys! ...using awesome Apotomo* widgets * the only real component framework for Rails!
  4. 5. Apotomo? <ul><li>Rails plugin (sorry!)
  5. 6. Widgets
  6. 7. Statefulness
  7. 8. Events
  8. 9. Happiness </li></ul>
  9. 10. Dashboards.
  10. 11. Dashboards.
  11. 12. Dashboards.
  12. 13. Reuseability.
  13. 14. Dashboards.
  14. 15. Michał looks thirsty.
  15. 16. Michał looks thirsty.
  16. 17. The BeerCell <ul><li>Generate.
  17. 18. Code.
  18. 19. Fix views.
  19. 20. Plug into controller.
  20. 21. Drink. </li></ul>dashboard$ script/generate widget Beer display exists app/cells/ create app/cells/beer create app/cells/beer_cell.rb create app/cells/beer/display.html.erb
  21. 22. The BeerCell <ul><li>Generate.
  22. 23. Code.
  23. 24. Fix views.
  24. 25. Plug into controller.
  25. 26. Drink. </li></ul>class BeerCell < Apotomo::StatefulWidget def display render end end render display.html.erb!
  26. 27. The BeerCell <ul><li>Generate.
  27. 28. Code.
  28. 29. Fix views.
  29. 30. Plug into controller.
  30. 31. Drink. </li></ul><%= image_tag 'beer.png' , :id => 'beer' %> <%= draggable_element 'beer' %> <%= image_tag 'beer.png' , :id => 'beer' %> <%= draggable_element 'beer' %> <%= image_tag 'beer.png' , :id => 'beer' %> <%= draggable_element 'beer' %> <%= image_tag 'beer.png' , :id => 'beer' %> <%= draggable_element 'beer' %> <%= image_tag 'beer.png' , :id => 'beer' %> <%= draggable_element 'beer' %> I'm ERB .
  31. 32. The BeerCell <ul><li>Generate.
  32. 33. Code.
  33. 34. Fix views.
  34. 35. Plug into controller.
  35. 36. Drink. </li></ul>class ExamplesController < ApplicationController def drink use_widgets do |root| root << cell(:beer, :display, 'a_beer') end @content = render_widget 'a_beer' render end class ExamplesController < ApplicationController def drink use_widgets do |root| root << cell(:beer, :display, 'a_beer') end @content = render_widget 'a_beer' render end class ExamplesController < ApplicationController def drink use_widgets do |root| root << cell (:beer, :display, 'a_beer') end @content = render_widget 'a_beer' render end class ExamplesController < ApplicationController def drink use_widgets do |root| root << cell (:beer, :display, 'a_beer') end @content = render_widget 'a_beer' render end I'm a Rails controller .
  36. 37. The BeerCell <ul><li>Generate.
  37. 38. Code.
  38. 39. Fix views.
  39. 40. Plug into controller.
  40. 41. Drink. </li></ul>
  41. 42. Wow!
  42. 43. The Dashboard <ul><li>Plug in widgets.
  43. 44. Render widgets. </li></ul>I'm a Rails controller with 6 widgets.
  44. 45. The Dashboard <ul><li>Plug in widgets.
  45. 46. Render widgets. </li></ul>class DesktopController < ApplicationController def index use_widgets do |root| root << cell(:weather, :forecast, 'my_weather') root << cell(:michal, :sober, 'drinker') root << cell(:todo, :add_item, 'my_form') root << cell(:todo, :count, 'my_counter') root << cell(:beer, :display, 'a_beer') class DesktopController < ApplicationController def index use_widgets do |root| root << cell(:weather, :forecast, 'my_weather') root << cell(: michal , :sober, 'drinker') root << cell(:todo, :add_item, 'my_form') root << cell(:todo, :count, 'my_counter') root << cell(:beer, :display, 'a_beer') class DesktopController < ApplicationController def index use_widgets do |root| root << cell(:weather, :forecast, 'my_weather') root << cell(: michal , : sober , 'drinker') root << cell(:todo, :add_item, 'my_form') root << cell(:todo, :count, 'my_counter') root << cell(:beer, :display, 'a_beer') class DesktopController < ApplicationController def index use_widgets do |root| root << cell(:weather, :forecast, 'my_weather') root << cell(: michal , : sober , ' drinker ') root << cell(:todo, :add_item, 'my_form') root << cell(:todo, :count, 'my_counter') root << cell(:beer, :display, 'a_beer') class DesktopController < ApplicationController def index use_widgets do |root| root << cell(:weather, :forecast, 'my_weather') root << cell(: michal , : sober , ' drinker ') root << cell(:todo, :add_item, 'my_form') root << cell(:todo, :count, 'my_counter') root << cell(:beer, :display, 'a_beer') end @slot_2 = render_widget ('drinker')
  46. 47. Michał looks thirsty.
  47. 48. The drinker widget <ul><li>Implement sober state
  48. 49. Trigger beerDropped event
  49. 50. Catch beerDropped event
  50. 51. Implement drinking state </li></ul>class MichalCell < Apotomo::StatefulWidget def sober @beers = 0 render end class MichalCell < Apotomo::StatefulWidget def sober @beers = 0 render end class MichalCell < Apotomo::StatefulWidget def sober @beers = 0 render end class MichalCell < Apotomo::StatefulWidget def sober @beers = 0 render end class MichalCell < Apotomo::StatefulWidget def sober @beers = 0 render end render sober.html.erb !
  51. 52. The drinker widget <ul><li>Implement sober state
  52. 53. Trigger beerDropped event
  53. 54. Catch beerDropped event
  54. 55. Implement drinking state </li></ul><%= image_tag 'michal-sober.jpg', :id => :michal %> <%= drop_receiving_element :michal, :url => trigger_event (:beerDropped) %> <%= image_tag 'michal-sober.jpg', :id => :michal %> <%= drop_receiving_element :michal, :url => trigger_event (:beerDropped) %> <%= image_tag 'michal-sober.jpg', :id => :michal %> <%= drop_receiving_element :michal, :url => trigger_event (:beerDropped) %> I'm sober.html.erb !
  55. 56. The drinker widget <ul><li>Implement sober state
  56. 57. Trigger beerDropped event
  57. 58. Catch beerDropped event
  58. 59. Implement drinking state </li></ul>beerDropped !
  59. 60. The drinker widget <ul><li>Implement sober state
  60. 61. Trigger beerDropped event
  61. 62. Catch beerDropped event
  62. 63. Implement drinking state </li></ul>class MichalCell < Apotomo::StatefulWidget def sober @beers = 0 render end class MichalCell < Apotomo::StatefulWidget def sober respond_to_event @beers = 0 render end class MichalCell < Apotomo::StatefulWidget def sober @beers = 0 render end class MichalCell < Apotomo::StatefulWidget def sober respond_to_event :beerDropped, :with => :drinking @beers = 0 render end
  63. 64. The drinker widget <ul><li>Implement sober state
  64. 65. Trigger beerDropped event
  65. 66. Catch beerDropped event
  66. 67. Implement drinking state </li></ul>def sober respond_to_event :beerDropped, :with => :drinking @beers = 0 render end def drinking @beers += 1 render end def sober respond_to_event :beerDropped, :with => :drinking @beers = 0 render end def drinking @beers += 1 render end def sober respond_to_event :beerDropped, :with => :drinking @beers = 0 render end def drinking @beers += 1 render end def sober respond_to_event :beerDropped, :with => :drinking @beers = 0 render end def drinking @beers += 1 render end def sober respond_to_event :beerDropped, :with => :drinking @beers = 0 render end def drinking @beers += 1 render end I'm stateful ! Render drinking.html.erb !
  67. 68. The drinker widget <ul><li>Implement sober state
  68. 69. Trigger beerDropped event
  69. 70. Catch beerDropped event
  70. 71. Implement drinking state </li></ul><%= image_tag &quot;michal-having-#{@beers}-beers.jpg&quot;, :id => :michal %> <%= drop_receiving_element :michal, :url => trigger_event(:beerDropped) %> <%= image_tag &quot;michal-having-#{@beers}-beers.jpg&quot;, :id => :michal %> <%= drop_receiving_element :michal, :url => trigger_event(:beerDropped) %> <%= image_tag &quot;michal-having-#{ @beers }-beers.jpg&quot;, :id => :michal %> <%= drop_receiving_element :michal, :url => trigger_event(:beerDropped) %> I'm drinking.html.erb ! Load michal-having-1-beers.jpg! Load michal-having-2-beers.jpg! Load michal-having-3-beers.jpg! Load michal-having-4-beers.jpg!
  71. 72. Wow!
  72. 73. So what? <ul><li>Reusability.
  73. 74. Encapsulation.
  74. 75. Statefulness.
  75. 76. Events.
  76. 77. Composability .
  77. 78. Testing
  78. 79. ... </li></ul>def drinking @beers += 1 respond_to_event
  79. 80. Contribute! <ul><li>http://apotomo.de
  80. 81. irc.freenode.org/#cells
  81. 82. Webhunter tutorial
  82. 83. http://apotomo.de/2009/10/how-to-catch-a-mouse-with-apotomo/ </li></ul>

×