Willow Interaction Tour
•Download as PPTX, PDF•
0 likes•293 views
Willow is a web interaction library that makes it easier to create AJAX-based web applications. It provides ready-to-use interactive components that abstract away complexity of hand-made AJAX calls. Components include fields, selections, containers, and more. Interactions are defined by messages like onTrigger that allow client-side execution, server-side evaluation, and rendering responses. Willow also supports features like serialization, DOM manipulation, and conditional responses.
Recommended
More Related Content
Similar to Willow Interaction Tour
Similar to Willow Interaction Tour (20)
More from FAST
More from FAST (20)
Recently uploaded
Recently uploaded (20)
Willow Interaction Tour
- 2. Hello! I am Maxi Tabacman Smalltalker since 2003 Comp.Sc. PhD at FCEN - UBA R&D at Mercap Software @mtabacman mtabacman@gmail.com 2
- 3. Agenda ▧ Intro ▧ Components ▧ Interaction affordances ▧ Real life examples ▧ Complex interactions ▧ Conclusion 3
- 4. Intro What is Willow? Is a Web Interaction Library that eases the burden of creating AJAX-based web applications... 4
- 5. … conforming an ecosystem with specific integrations. 5
- 7. Why Willow? So that people can stop writing things like these: 7
- 8. Why Willow? And start writing like these: 8
- 9. Features Ready to use interactive components Interactive components abstracts away a lot of the complexity of hand made AJAX calls. Frontend integration Component creation can be abstracted by using a component supplier, supporting: - Plain HTML5 - Bootstrap - Semantic UI - JQuery UI Seaside compatible Built on top of Seaside rendering capabilities. Seaside code can be mixed with Willow components. 9
- 10. Features Ready to use interactive components Interactive components abstracts away a lot of the complexity of hand made AJAX calls. Frontend integration Component creation can be abstracted by using a component supplier, supporting: - Plain HTML5 - Bootstrap - Semantic UI - JQuery UI Seaside compatible Built on top of Seaside rendering capabilities. Seaside code can be mixed with Willow components. 10
- 11. Features Ready to use interactive components Interactive components abstracts away a lot of the complexity of hand made AJAX calls. Frontend integration Component creation can be abstracted by using a component supplier, supporting: - Plain HTML5 - Bootstrap - Semantic UI - JQuery UI Seaside compatible Built on top of Seaside rendering capabilities. Seaside code can be mixed with Willow components. 11
- 12. Components Fields - Text Field - Date Field - Number Field Selection - Listbox - Dropdown List - Radio Groups - Checkbox Command Input - Buttons - Links - Dropdown menu Containers - Lists - Tables - Grids - Dialogs - Panels Misc - Images - Identified Views - Labeled Views - Tabs/Pills - Navigation Advanced - Periodically rendered - Delayed - Typeahead 12
- 13. Components Fields - Text Field - Date Field - Number Field Selection - Listbox - Dropdown List - Radio Groups - Checkbox Command Input - Buttons - Links - Dropdown menu Containers - Lists - Tables - Grids - Dialogs - Panels Misc - Images - Identified Views - Labeled Views - Tabs/Pills - Navigation Advanced - Periodically rendered - Delayed - Typeahead 13
- 14. Components Fields - Text Field - Date Field - Number Field Selection - Listbox - Dropdown List - Radio Groups - Checkbox Command Input - Buttons - Links - Dropdown menu Containers - Lists - Tables - Grids - Dialogs - Panels Misc - Images - Identified Views - Labeled Views - Tabs/Pills - Navigation Advanced - Periodically rendered - Delayed - Typeahead 14
- 15. Components Fields - Text Field - Date Field - Number Field Selection - Listbox - Dropdown List - Radio Groups - Checkbox Command Input - Buttons - Links - Dropdown menu Containers - Lists - Tables - Grids - Dialogs - Panels Misc - Images - Identified Views - Labeled Views - Tabs/Pills - Navigation Advanced - Periodically rendered - Delayed - Typeahead 15
- 16. Components Fields - Text Field - Date Field - Number Field Selection - Listbox - Dropdown List - Radio Groups - Checkbox Command Input - Buttons - Links - Dropdown menu Containers - Lists - Tables - Grids - Dialogs - Panels Misc - Images - Identified Views - Labeled Views - Tabs/Pills - Navigation Advanced - Periodically rendered - Delayed - Typeahead 16
- 17. Components Fields - Text Field - Date Field - Number Field Selection - Listbox - Dropdown List - Radio Groups - Checkbox Command Input - Buttons - Links - Dropdown menu Containers - Lists - Tables - Grids - Dialogs - Panels Misc - Images - Identified Views - Labeled Views - Tabs/Pills - Navigation Advanced - Periodically rendered - Delayed - Typeahead 17
- 18. Interaction affordances Each interactive component supports the #onTrigger message 18
- 19. Client Execution button onTrigger executeOnClient: [ :canvas | canvas javascript alert: ‘Hi’ ] 19
- 21. Client Execution button onTrigger executeOnClient: [:canvas | canvas javascript alert: ‘Hi’ ] 21
- 22. Server Evaluation button onTrigger evaluate: [ 'The button was clicked on the browser' inspect ] 22
- 25. Rendering companionView := IdentifiedWebView forSpanNamed: 'Companion' containing: [ :canvas | canvas strong: self currentTime ]. button onTrigger render: companionView 25
- 26. Rendering companionView := IdentifiedWebView forSpanNamed: 'Companion' containing: [ :canvas | canvas strong: self currentTime ]. button onTrigger render: companionView 26
- 27. Rendering 27
- 28. When working with form elements the contents must be serialized so that the server elements have the updated values. Here are some alternatives: ▧ serializeIt ▧ serializeWithHiddenInputs ▧ serializeForm: ▧ serializeContainerForm Serialization 28
- 29. Serialization button onTrigger serializeContainerForm; disable; determineBehaviorByEvaluating: [ :response | | answer | answer := self askDeveloper: input contents. response onReturn setValueTo: answer thenTriggerChangeOf: input ] 29
- 30. Serialization 30
- 31. Serialization 31
- 32. Several affordances are available to manipulate DOM elements: ▧ disable/enable ▧ focus ▧ remove: identifiedView ▧ transform: identifiedView into: renderable ▧ setValueTo: val thenTriggerChangeOf: input ▧ show: renderable whileCallingServerToRender: identifiedView ▧ and more… DOM Manipulation 32
- 33. ▧ addCssClass: ▧ changeCssClass:to: ▧ removeCssClass: ▧ toggleCssClass: ▧ and some variations… CSS Classes 33
- 34. ▧ closeLastDialog ▧ closeAllDialogs ▧ open: dialogView Dialogs 34
- 36. Combining Interactions toolbar onRunSelectedTestsTrigger transform: testResult into: SpinKitTripleBounce new; evaluate: [ self session runTests ]; render: testResult. 36
- 37. toolbar onRunSelectedTestsTrigger transform: testResult into: SpinKitTripleBounce new; evaluate: [ self session runTests ]; render: testResult. 37 toolbar runTestsButton onTrigger
- 39. Dialog Opening detailsLinkShowing: testResult | detailsAnchor | detailsAnchor := self componentSupplier asynchronicLinkActingAsButtonLabeled: 'See the details.' applying: [ :anchor | anchor addClass bootstrap alertLink ]. detailsAnchor onTrigger open: (WPTestRunnerTestResultDetailsDialog for: testResult). ^ showDetailsAnchor 39
- 41. Conditional response button onTrigger sendToMixpanel: [:mixpanel | mixpanel track: 'Clicked on "Search>Analyze"']; determineBehaviorByEvaluating: [:response | self applicationContext withBondUnderAnalysisDo: [:bond | response onReturn open: (BondInvestmentDialogWebView for: bond)] ifUnused: []]. 41
- 43. Send To Mixpanel is just syntactic sugar sendToMixpanel: aBlock ^self executeOnClient: [:canvas | | mixpanel | mixpanel := canvas mixpanel. aBlock cull: mixpanel cull: canvas. mixpanel] 43
- 44. Complex Interactions (the crazy stuff) 44
- 45. Passing client parameters | interpreter | interpreter := WebInteractionInterpreter forInstantEvaluation. userAgent := ''. interpreter evaluate: [:clientUserAgent | userAgent := clientUserAgent] with: (JSStream on: 'navigator') access: 'userAgent'. interpreter applyTo: aCanvas document on: aCanvas 45
- 46. Interaction with external JSObjects interpreter := WebInteractionInterpreter forEvaluationOf: #click: withAll: #(). interpreter determineBehaviorByEvaluating: [:response | self context setBondUnderAnalysisToBe: bond. response onReturn open: (BondInvestmentDialogWebView for: bond)]. events := HighchartsPlotOptionsScatterEvents new. interpreter applyTo: events on: aCanvas. ^events 46 Subclass of JSObject
- 47. Interaction with external JSObjects 47
- 48. Demo 48
- 49. ▧ Simplified interactions by using a wide range of ready to use components ▧ Seaside compatible ▧ Advanced components available ▧ Complex interactions still possible 49 Conclusions
- 50. Special thanks to: ▧ Gabriel Cotelli for improving the quality of this project and for the slides ▧ Mercap Software for the financial support to be here today ▧ The Mercap development team and external collaborators for using and improving the library 50 Acknowledgements
- 51. Thanks! Any questions? Willow is MIT licensed and you can find it on /ba-st 51
Editor's Notes
- Hi. I’m Maximiliano Tabacman. I’m an smalltalker since 2003 and work at Mercap Software.
- First, this is what we see in this talk. So, lets start it.
- First of all.. What is Willow? It’s a web interaction library that eases the burden of creating AJAX-based web apps.
- And it has an ecosystem of dependent projects providing integration with: Bootstrap, Semantic UI, JQuery UI, Mixpanel and others
- At the beginning our first web apps where doing a full refresh of the page when you interacted with it, but when we started doing AJAX calls and rendering parts of the DOM the code became a kind of javascript-like spaghetti.
- So that people can stop writing this kind of things: (by the way, this is a real example taken from some questions on the seaside mailing list)
- You can write it in Willow in this way. It’s not beautiful?
- These are the main features of Willow. It provides a collection of ready to use interactive components. This interactive part will be the focus of this talk.
- Supports several frontend integrations, and provides a facade to getting the components so you can switch more easily from say Bootstrap to Semantic UI
- It’s built on top of Seaside. So you can mix standard Seaside rendering code with Willow components.
- This is a brief list of the most important components available.
- So , each interactive component supports the onTrigger message, that provides access to the interaction affordances. So let’s see this affordances.
- This is the most ugly one, but will help us to understand the basics. #onTrigger binds an event to a JS function implementing the interaction described by the messages sent to it. In this case it is plain javascript Seaside code, and just includes some client interactivity.
- So far so good. Now to the interesting ones.
- Now , this variant configures the function to do an AJAX call eventually evaluating the callback provided in the block.
- And this is the code that gets generated.
- Another one. The IdentifiedWebView was briefly mentioned in the components slide. Basically it’s a component ensuring that it will have an id available when needed and providing a view to render. The view name is used as part of the id generation to ease it’s identification in the DOM when you need to debug something.
- In this case just replaces some DOM element with a new one
- Unlike the previous cases, an interest thing here is that the payload contains code.
- This kind of app will not perform a page submit, so you need to send the form information to the server using an AJAX call.
- So the difference here it’s that the AJAX call is now a POST. And it’s also serializing the input values inside the form.
- Transform: works client side. And the renderable will be rendered when the component triggering is rendered and not on the actual trigger, because it will not interact with the server. show:whileCallingServerToRender: is syntactic sugar basically doing a tranform: and render.
- I will not enter in detail here.
- Willow has an specific way of handling dialogs.
- Until now we saw isolated interactions, but usually you will do more than one interaction at the same time.
- We are here opening a dialog. I will say ok..component supplier please give me a link. And WPTestRunnerTestResultDetailsDialog, it’s an component that will render the dialog.
- This is what happens.
- This is getting more complicated. Mixpanel it’s a service to track events. So far, we are doing always the same thing when the event is triggered. But here it depends if we have or not something in the context.
- This is using the project providing the mixpanel integration, but it’s just syntacti sugar.
- If time allows, show the Test Runner, Live Docs and Abbaco apps.