Apotomo Goes Rubyconf
- 1. Finally living objects in your Rails UI
- 2. cells with interactive behaviour and statefulness
- 4. The name?
- 5. Apotomo
- 6. 油
- 8. ...i want you to be scared of Apotomo
- 9. What is Apotomo? an awesome plugin for Rails introducing stateful widgets and a GUI-like development feeling for (awesome) Rails developer
- 12. keep in mind: every Apotomo widget is basically a cell on steroids
- 13. Any benefits? from this stateful widget thing?
- 14. stateful persistence a persistent object, managing its states automatically
- 15. widget reusable reusable != throw-away code
- 16. widget composable arranging your UI with building blocks
- 17. widget independent where building blocks are not coupled to the outside world
- 18. widget wrapping connecting worlds, like JS and Ruby
- 19. widget and... event-driven! widgets talk about updates
- 20. Who's me? My name Nick Sutterer from Germany author of cells and Apotomo
- 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. i稼岳艶姻艶壊岳庄稼乙.
- 32. this is a Rails app completely apotomo-driven 2 controller actions ~60 widgets neatly arranged in a widget tree
- 33. let's look at the gallery
- 34. 油
- 36. full-size image
- 37. upload form
- 38. how do we implement that?
- 39. Start : the WidgetTree for defining your app UI in app/apotomo/application_widget_tree.rb an initial representation you can change it during runtime
- 40. I start by adding a container widget
- 41. 油
- 42. 油
- 43. 油
- 44. I keep adding fine-graind child widgets to the container
- 45. 油
- 46. 油
- 47. 油
- 48. 油
- 49. each widget has some corresponding view in the app
- 50. #cell shortcut to create a ...Cell widget you pass in cell class start state widget id
- 51. What we just got one big container widget smaller child widgets each widget implements a control in the gallery
- 52. wow, we just covered...
- 53. My widgets should be... persistent reusable composable independent wrapping and event-driven
- 54. meaning... we can nest widgets the parent widget takes care of its children
- 55. How do we plug in these widgets into the actual application?
- 56. #act_as_widget we're passing 'product_gallery'
- 57. meaning we're referencing to the gallery container
- 58. #act_as_widget
- 59. #act_as_widget
- 60. and render that widget to the app
- 61. and process its events
- 62. what we get is a nice, interactive gallery!
- 63. 油
- 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
- 67. 油
- 68. 油
- 69. and adding actual content widets to the tabs
- 70. 油
- 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
- 75. 油
- 76. it is already added somewhere in the WidgetTree
- 77. somewhere in the WidgetTree... we add that upload widget and assign its start state to :new
- 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
- 80. app/cells/product_image_cell.rb we're creating a ProductImage object returning nil rendering the corresponding view new.html.erb
- 81. the new.html.erb looks like...
- 82. app/cells/product_image/new.html.erb another brainless view where the first line is important!
- 83. Apotomo view helper method when submitted triggers an event
- 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
- 89. the state :create we check the input if valid jump back to :new else display errors, stay in :create
- 90. either ways, the widget will automatically update its view on the screen
- 91. where did that @image come from?
- 92. we're using @image that was created in :new it's simply there
- 93. the state is preserved! @image @image :new :create
- 94. So, this is stateful you don't have to restore your environment after requests
- 95. So, this is stateful it feels as if there is no request at all
- 96. My widgets should be... persistent reusable composable independent wrapping and event-driven
- 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
- 103. the upload widgets just triggered a newImage event
- 104. how can we catch that?
- 105. The answer: use an EventHandler !
- 106. adding EventHandlers I can be set up in the ApplicationWidgetTree can also be attached within widget states
- 107. adding EventHandlers II #watch attaches a listener watch out for newImage events
- 108. let's have a quick look at the triggering process
- 109. the newImage event is triggered
- 110. it bubbles up asking every widget on its way are you interested in the newImage event triggered by 'upload'?
- 111. ?
- 112. ?
- 113. yes! the container widget is interested! ?
- 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
- 117. 油
- 118. and the newly uploaded picture appears in full-screen
- 119. 油
- 120. Great - although the upload widget didn't even know there is a thumbnail gallery...
- 121. it just updated a bunch of other widgets
- 122. My widgets should be... persistent reusable composable independent wrapping and event-driven
- 123. and now? reusability ?
- 124. reusability sharing behaviour between projects
- 125. reusability sharing behaviour and
- 126. reusability sharing behaviour within projects
- 127. for example
- 128. 油
- 129. 油
- 130. this is a widget for rating a product
- 131. we could reuse that widget in an iPhone mobile version, too!
- 132. too bad, this widget sits deeeeeep in the WidgetTree
- 133. 油
- 134. a mobile controller
- 135. again, we're referencing a widget in the widget tree in #act_as_widget
- 136. 油
- 137. 油
- 138. we're extracting only a part of the app to a controller action
- 139. have a look at the mobile controller
- 140. 油
- 141. My widgets should be... persistent reusable composable independent wrapping and event-driven
- 142. Finally, some neat stuff!
- 143. Apotomo wraps YUI widgets
- 144. example: the DataTable in YUI
- 145. example: the DataTable in YUI it's like one line of code for rendering and event-processing
- 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
- 150. 油
- 151. 油
- 152. 油
- 153. let's have a brief look at this cool MyDataTable widget
- 155. all we gotta do...
- 156. inheriting from YUI::DataTable
- 157. adding columns
- 158. fill the data store with ...data
- 159. sorting?
- 160. paging?
- 162. My widgets should be... persistent reusable composable independent wrapping and event-driven
- 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...
- 169. 油
- 170. 油
- 171. 油
- 172. again, the #watch just means
- 173. watch out for a cellClick event!
- 174. if you see one, update the observer!
- 175. CLICK!
- 176. 油
- 177. to summarize that
- 178. I added an observing widget, looking out for cellClick event from the DataTable
- 179. I clicked a cell in the grid
- 180. this triggered an event, actually in Apotomo
- 181. so I processed a JS event in Ruby
- 182. Enough!
- 183. There is more!
- 184. Caching
- 185. Caching
- 186. Testing test just one widget test whole tree branches
- 187. http://apotomo.de samples docs http://github.org/apotonick/apotomo #cells on freenode ...
- 188. Enough for today...
- 189. Enough for today... are you scared of Apotomo?