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

2. Studying Advantages of Components A very academic approach...

3. Why Components are better! ...better than what ?

4. Components – Have Better Toys! ...using awesome Apotomo* widgets * the only real component framework for Rails!

6. Widgets

7. Statefulness

8. Events

9. Happiness

10. Dashboards.

11. Dashboards.

12. Dashboards.

13. Reuseability.

14. Dashboards.

15. Michał looks thirsty.

16. Michał looks thirsty.

18. Code.

19. Fix views.

20. Plug into controller.

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

23. Code.

24. Fix views.

25. Plug into controller.

26. Drink. class BeerCell < Apotomo::StatefulWidget def display render end end render display.html.erb!

28. Code.

29. Fix views.

30. Plug into controller.

31. Drink. <%= 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 .

33. Code.

34. Fix views.

35. Plug into controller.

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

38. Code.

39. Fix views.

40. Plug into controller.

41. Drink.

42. Wow!

44. Render widgets. I'm a Rails controller with 6 widgets.

46. Render widgets. 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')

47. Michał looks thirsty.

49. Trigger beerDropped event

50. Catch beerDropped event

51. Implement drinking state 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 !

53. Trigger beerDropped event

54. Catch beerDropped event

55. Implement drinking state <%= 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 !

57. Trigger beerDropped event

58. Catch beerDropped event

59. Implement drinking state beerDropped !

61. Trigger beerDropped event

62. Catch beerDropped event

63. Implement drinking state 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

65. Trigger beerDropped event

66. Catch beerDropped event

67. Implement drinking state 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 !

69. Trigger beerDropped event

70. Catch beerDropped event

71. Implement drinking state <%= 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!

72. Wow!

74. Encapsulation.

75. Statefulness.

76. Events.

77. Composability .

78. Testing

79. ... def drinking @beers += 1 respond_to_event

81. irc.freenode.org/#cells

82. Webhunter tutorial

83. http://apotomo.de/2009/10/how-to-catch-a-mouse-with-apotomo/