1. Creative Commons Attribution- NonCommercial-ShareAlike 2.5 License RSF Wiki Introduction to Reasonable Server Faces Aaron Zeckoski and Antranig Basman

2. 2 Why use RSF? Core RSF Values: –Completely pure HTML templating Roundtrip with designers without loss Preview behaviour as well as appearance from the file system Templates can be reloaded on a live server just by dropping in files –IoC is built-in No need to "integrate with" Spring, RSF is built from Spring IoC in the request scope "refreshes the parts other IoC cannot reach" (universal portability without code changes)

3. 3 Why use RSF? (contd.) Core RSF Values: –Stateless design Lightweight EL system allows talk of data "in the future" as well as via web services/AJAX Request scope is completely flushed at the end of the request Sakai sessions can be > 50Mb per user. RSF encourages designs where session sizes are minimized Uses a more PHP-like "running off the DB" model

4. 4 A Sample RSF template RSF Items Hello, Current User Non updateable item New item title Oct 29, 2007 10:26 AM

5. 5 How to use this template? In RSF, there is a complete separation between markup and render logic –Markup: held in an XHTML template decorated with rsf:id markers –Logic: held in a Spring-managed (Java) bean known as a Producer The job of a Producer is to produce a tree of elementary ("primitive") UI components To see how this all fits together, let's look at the overall RSF app structure

6. 6 RSF structure and code

7. 7 RSF structure The template (always html) defines the interface The producer (java or xml) defines the view, populates the template, and handles navigation ViewParams define the values passed between views (get) The requestContext defines producer and backing beans The applicationContext defines app scope beans and handles rsf app config (via spring) Backing beans handle action processing Logic layer beans can be injected as defined in the context xml files Model is basic data POJO Template (html) Backing Bean (java) Logic Layer (rest of app) requestContext (xml) model (java) Producer (java) applicationContext (xml) ViewParams (java)

8. 8 RSF templates XHTML files –Must be valid XML or runtime error will occur No custom tags used or needed –Truly is a pure XHTML template Only uses one custom attribute –rsf:id - identifies this component for the producer Template (html)

9. 9 Sample template RSF Items Hello, Current User Non updateable item New item title Oct 29, 2007 10:26 AM

10. 10 RSF producer Controls displays logic and populates the template with dynamic information Defines a view uniquely –By setting a ViewID Recommend you create a public static VIEW_ID Implements ViewComponentProducer –Define start page by implementing DefaultView –Implement NavigationCaseReporter to control “submit” navigation –Implement ViewParamsReporter to receive query parameters from http request Producer (java)

11. 11 Sample producer public class ItemsProducer implements ViewComponentProducer, DefaultView { public static final String VIEW_ID = "Items"; public String getViewID() { return VIEW_ID; } private CrudPlusLogic logic; public void setLogic(CrudPlusLogic logic) { this.logic = logic; } public void fillComponents(UIContainer tofill, ViewParameters viewparams, ComponentChecker checker) { UIOutput.make(tofill, "current-user-name", logic.getCurrentUserDisplayName()); UIForm listform = UIForm.make(tofill, "listItemsForm"); List l = logic.getAllVisibleItems(); for (CrudPlusItem item: l) { UIBranchContainer itemrow = UIBranchContainer.make(listform, "item-row:"); if (logic.canWriteItem(item)) { UIInternalLink.make(itemrow, "item-update", item.getTitle(), new AddItemViewParameters(AddItemProducer.VIEW_ID, item.getId()) ); } else { UIOutput.make(itemrow, "item-title", item.getTitle() ); } UIOutput.make(itemrow, "item-dateCreated", item.getDateCreated() ); }

12. 12 RSF ViewParams Controls the passing of data between page views –Represents query parameters (GET) and URL trunk in the abstract –extends SimpleViewParameters Should be used when data needs to be sent from one view to another –Uses URLs in the RESTful way they were designed –However, is abstract and typesafe –Can be reused on multiple pages ViewParams (java)

13. 13 Sample ViewParams Is a "Pea" (uses fields rather than getters/setters) getParseSpec method is unnecessary unless you want fine control over URL structure public class AddItemViewParameters extends SimpleViewParameters { public Long id; // an identifier for an item public AddItemViewParameters() { } public AddItemViewParameters(String viewID, Long id) { this.id = id; this.viewID = viewID; } public String getParseSpec() { // include a comma delimited list of the // public properties in this class return super.getParseSpec() + ",id"; }

14. 14 RSF requestContext Request Scope Context –Often called RSACRSAC All RSAC beans are lazy by default Standard Spring bean definition file –Uses the Spring file parser code –Only includes a subset of the standard functionality to increase speedincludes a subset Location of this file is set in the web.xml requestContext (xml)

15. 15 Sample requestContext <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd"> <bean id="itemsBean" class="org.sakaiproject.crudplus.tool.ItemsBean" init-method="init"> <property name="logic" ref="org.sakaiproject.crudplus.logic.CrudPlusLogic" /> <property name="logic" ref="org.sakaiproject.crudplus.logic.CrudPlusLogic" /> <property name="logic" ref="org.sakaiproject.crudplus.logic.CrudPlusLogic" />

16. 16 RSF applicationContext A standard Spring bean definition file –Puts the beans in the application context Mostly used for configuring RSF –Define child of requestAddressibleParent to specify beans which can be the target of EL –Define child of beanScopeParent to create a new session scope for session beans –Define a child of CRITemplateResolverStrategy to control the location of templates Location of this file set in web.xml applicationContext (xml)

17. 17 Sample applicationContext <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd"> <!-- For security purposes, only beans listed in the comma separated value list may be the target of EL operations coming in over the request -->

18. 18 RSF Backing Bean Typical bean with methods to handle actions and public properties –No RSF dependencies –Store data needed for processing the user actions using public properties –Control data model objects with public properties (using EL from producer) –Process actions using methods Can interact with logic layer –But so can the producers Created and destroyed in the request cycle by default (recommended practice) –Can override this behavior Backing Bean (java)

19. 19 Sample backing bean public class ItemsBean { public CrudPlusItem newItem = new CrudPlusItem(); public Map selectedIds = new HashMap();... private CrudPlusLogic logic; public void setLogic(CrudPlusLogic logic) { this.logic = logic; }... public String processActionAdd() { if (newItem.getHidden() == null) { // null here means that the box was not checked newItem.setHidden( DEFAULT_HIDDEN ); } logic.saveItem(newItem); return "added"; }

20. 20 Web app basics 4 key things you need to do in a webapp 1.Output dynamic text Render data to the screen 2.Loop structures Output collection or render tables 3.Optional rendering of components Render some components based on state 4.Trigger Actions User actions or data transmission In RSF, these all are done using one part in the template and another in the producer (and maybe the backing bean for an action method)

21. 21 Output dynamic text Hello, Current User Uses an rsf:id on an HTML entity to show where to place the dynamic text –Does not have to be a span or div only! UIOutput will send the escaped string to the ID location in the component tree –Non-escaped output using UIVerbatim Avoid this unless truly necessary UIOutput.make(tofill, "current-user-name", logic.getCurrentUserDisplayName()); 1

22. 22 Loop structure List l = logic.getAllVisibleItems(); for (Item item: l) { UIBranchContainer itemrow = UIBranchContainer.make(listform, "item-row:"); if (logic.canWriteItem(item)) { UIInternalLink.make(itemrow, "item-update", item.getTitle(), new AddItemViewParameters(AddItemProducer.VIEW_ID, item.getId()) ); } else { UIOutput.make(itemrow, "item-title", item.getTitle() ); } UIOutput.make(itemrow, "item-dateCreated", item.getDateCreated() ); } Non updateable item New item title Oct 29, 2007 10:26 AM 2 Use UIBranchContainer and colon tags for looping structures

23. 23 Optional rendering HTML entities are rendered if the component is tied via the rsf:id –If there is no UI component matching the id then the renderer skips over it A UIOutput can also peer with a tag in the template with further component children, to swap in or out a whole block of markup if (item.getHidden().booleanValue()) { UIOutput.make(itemrow, "item-title", item.getTitle() ); } Hidden item title 3

24. 24 Trigger actions Use a normal submit button with an id –Use UICommand to tie to an action method in a backing bean using EL –NB – "action methods" are considered an old-fashioned form of programming – try to use BeanGuards instead (more later) Return string ties to a navigation case in the producer <input rsf:id="add-update-item" type="submit" value="Add/Update Item" /> UICommand.make(addupdateitem, "add-update-item", "#{itemsBean.processActionAdd}"); public String processActionAdd() { logic.saveItem(updateItem); return "added"; } 4

25. 25 RSF in practice

26. 26 RSF experience RSF has a moderate learning curve –Mostly unlearning poor practices UI components are comprehensive –Cover all HTML entities, fairly flexible AJAX integration easy –Designed to work well with AJAX and JS Works like a webapp should –Normal REST, back button works Easy for UI designers to work with

27. 27 RSF EL A tiny subset of the functionality of JSF Expression Language –No logic in the expression –Sometimes called Value Language (VL) Works with any bean in the request or application context More info on the RSF EL pageRSF EL page #{requestwriteablebean.property1.subproperty2} URL: http://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=ELhttp://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=EL

28. 28 OTP (One True Path) Defines a single path (EL) to your data Points to a BeanLocator which allows you to tell RSF where to find your data –Point it at your logic/dao layer RSF 0.7.2+ has an automated "EntityBeanLocator" which will map to most DAO APIs UIInput.make(form, "title-input", “EntryLocator.1.title"); public class EntryLocator implements BeanLocator { … }

29. 29 Internationalization (I18n) Well supported with UIMessage concrete class –Also MessageLocator –Simple cases can be handled in the template with rsf:id="msg=key" Takes advantage of the standard Java language properties bundle handling Uses the Spring MessageSource for resource (properties file) loading –Configurable in applicationContext remove.item.text=Are you sure you want to remove item ({0})? UIMessage.make(tofill, “remove-item", "remove.item.text", new Object[] { item.getTitle() } ); Are you sure you want to remove item (title)? URL: http://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=I18Nhttp://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=I18N

30. 30 User feedback Allows for messages generated in a previous request to appear in the template –No code is required in the receiving template, only the element with the rsf:id –Format of the output messages is configurable Message for user here messages.addMessage( new TargettedMessage(“user.message", new Object[] { item.getTitle() }, TargettedMessage.SEVERITY_INFO)); user.message=New item saved ({0})

31. 31 Javascript and AJAX RSF does not use AJAX for its own purposes (not embedded) so there are no issues with collisions –There are some widgets and helpers that are included with RSF which use AJAX though RSF includes a Javascript library to make it easy to work with the RSF generated element ids –Can be tricky to work with because of the way the branch nesting works

32. 32 RSF component trees Binds the markup to the model –rsf:id in the template –EL in the producer Tree and components created and destroyed during the request cycle –Short lived, frees up resources –Rooted in a view and only kept around long enough to render the view URL: http://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=Componenthttp://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=Component

33. 33 RSF structure revisit The template is pure XHTML –Easy for UI designers The producer is simple and cleanly defines a view ViewParams abstract out the passing of values The requestContext and applicationContext are pure spring config –Can be mixed up sometimes Backing beans are really just simple beans Template (html) Backing Bean (java) Logic Layer (rest of app) requestContext (xml) model (java) Producer (java) applicationContext (xml) ViewParams (java)

34. 34 RSF resources RSF Wiki (online documentation) –http://www2.caret.cam.ac.uk/rsfwiki/http://www2.caret.cam.ac.uk/rsfwiki/ RSF forums –http://ponder.org.uk/rsf/http://ponder.org.uk/rsf/ RSF APIs –http://saffron.caret.cam.ac.uk/projects/RSFUtil/apidocs/http://saffron.caret.cam.ac.uk/projects/RSFUtil/apidocs/ RSF SVN –https://saffron.caret.cam.ac.uk/svn/https://saffron.caret.cam.ac.uk/svn/

35. 35 Questions? RSF –http://www2.caret.cam.ac.uk/rsfwiki/http://www2.caret.cam.ac.uk/rsfwiki/