Talk about Apotomo (stateful widget components) by Mike Pence and Nick Sutterer at RubyConf 2008. See http://apotomo.de for more info.

1. Finally living objects in your Rails UI

2. cells with interactive behaviour and statefulness

3. communicating through events

4. The name?

5. Apotomo

7. after this talk...

8. ...i want you to be scared of Apotomo

10. it's all about...

13. Any benefits? from this “stateful widget” thing?

21. I'm currently working on... wickedornot.com

22. wickedornot.com

23. a mixture of blog/game/community

24. wickedornot.com

25. you upload products and you can rate other users

26. wickedornot.com

27. you can comment stuff

28. wickedornot.com

29. you can upload pictures for that product

30. wickedornot.com

31. “interesting.”

33. let's look at the gallery

38. how do we implement that?

40. I start by adding a container widget

44. I keep adding fine-graind child widgets to the container

49. each widget has some corresponding view in the app

52. wow, we just covered...

55. How do we plug in these widgets into the actual application?

57. meaning we're referencing to the gallery container

58. #act_as_widget

59. #act_as_widget

61. and process its events

62. what we get is a nice, interactive gallery!

64. another composing examble would be the tabs!

65. a nice tab panel, within rails!

66. it's all about adding tabs to the panel

69. and adding actual content widets to the tabs

71. Tab and TabPanel are out-of-the-box widgets and are shipped with Apotomo (just for your convenience)

72. next: statefulness ?

73. example: the upload thing

74. it's a commonly used upload form

76. it is already added somewhere in the WidgetTree

78. a widget goes to its start state when it's rendered the first time

79. now we're going to look at the actual, concrete source of the upload widget

81. the new.html.erb looks like...

84. in other words...

85. ...when submitting the form we are sending the upload widget to another state

86. :new :create

87. let's look at the next state

88. once again, the widget code

90. either ways, the widget will automatically update its view on the screen

91. where did that @image come from?

93. the state is preserved! @image @image :new :create

97. so, this was an upload, but...

98. how do the fellow widgets know, there is a new image uploaded?

99. ?

100. why not use an event?

101. when the upload was ok...

102. ...we trigger an event

105. The answer: use an EventHandler !

108. let's have a quick look at the triggering process

109. the newImage event is triggered

111. ?

112. ?

114. and it fires the EventHandler we just attached with #watch

115. the fired EventHandler will advise the thumbnails widget to update itself

116. a new thumbnail appears

118. and the newly uploaded picture appears in full-screen

120. Great - although the upload widget didn't even know there is a thumbnail gallery...

121. it just updated a bunch of other widgets

123. and now? reusability ?

127. for example

130. this is a widget for rating a product

131. we could reuse that widget in an iPhone mobile version, too!

134. a mobile controller

135. again, we're referencing a widget in the widget tree in #act_as_widget

139. have a look at the mobile controller

142. Finally, some neat stuff!

143. Apotomo wraps YUI widgets

144. example: the DataTable in YUI

146. just to show off how awesome Apotomo is...

147. I'm gonna embed the DataTable in my wickedornot.com app

148. by adding a new Tab

149. embedding the DataTable

153. let's have a brief look at this cool MyDataTable widget

154. app/cells/my_data_table_cell.rb

155. all we gotta do...

156. inheriting from YUI::DataTable

157. adding columns

158. fill the data store with ...data

160. paging?

161. works all out-of-the-box

163. Come on, one more!

164. what about adding some observing widget?

165. watching for clicks in the DataTable ?

166. this could look like...

167. add an observing widget

168. the implementation in the WidgetTree would be...

172. again, the #watch just means

173. “watch out for a cellClick event!”

174. “if you see one, update the observer!”

175. CLICK!

177. to summarize that

179. I clicked a cell in the grid

180. this triggered an event, actually in Apotomo

182. Enough!

183. There is more!

184. Caching

185. Caching

188. Enough for today...

189. Enough for today... are you scared of Apotomo?