Document

Transcript Document

Introduction to
Reasonable Server Faces
Aaron Zeckoski
[email protected]
Creative Commons AttributionNonCommercial-ShareAlike 2.5 License
RSF Wiki
Reasonable Server Faces
• RSF is a Java web programming
framework
– Roughly the same scope as Sun’s JSF
– Includes the following
•
•
•
•
•
•
•
Navigation and View rendering
Server-side and client-side state management
Request cycle handling and abstraction
APIs for UI components and view producers
Pure XHTML templating
Lightweight Expression Language (EL)
Based on the Spring Framework
2
RSF major features
•
•
•
•
•
•
•
Pure XHTML templates
Tightly integrated with Spring framework
RESTful navigation
EL based data access
Excellent support for internationalization
User feedback messages support
Easy AJAX integration
3
Developer Benefits
• Full Spring integration
– Can be a negative if you do not know spring
• Easy to write ADD / EDIT pages with OTP
• Don’t have to worry about URLs
– Just tell RSF to go to a view
• Don’t have to deal with GET/POST vars
– Just control / access them via ViewParams
• Works like a normal RESTful webapp
4
Designer Benefits
• Pure XHTML templates mean designers
can modify your templates without
messing with code
• Templates will reload while servlet
container is running so new sets of
templates can be dropped on the server
without a restart
• CSS and AJAX work seamlessly so fun
things can be added without code changes
5
Theory vs. Practice
6
In theory
• Web applications that are as easy to create
as PHP but still well structured
– Easier to program
– Standard HTTP request cycle, zero server state
• Better scoping and separation
– Application/Session/Request
• Component bindings from UI to model
• True separation of the logic and presentation
– Wireframe is the view definition (easy design)
• Easy to configure for different environments
7
In practice
• Harder to work with than PHP but easier than most Java
based frameworks
– Basic understanding of the request cycle needed
• Especially if using Session beans
– No in-code dependence on Servlets
• Can use all of the capability of HTML
– Truly pure HTML templating (excellent for designers)
– Complete separation of UI and logic
• Knowledge of Spring important
– Does provide flexibility and configurability via Spring
– Full support for IoC and AOP for backing beans and producers
– Adds support for request scope IoC
• No globally visible state maintainers (stateless)
8
RSF structure and code
9
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)
ViewParams
(java)
Producer
(java)
requestContext
(xml)
Backing Bean
(java)
applicationContext
(xml)
Logic Layer
(rest of app)
model
(java)
10
RSF templates
Template
(html)
• 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
11
Sample template
<?xml version="1.0" encoding="UTF-8" ?>
<html><head><title>RSF Items</title></head><body>
Hello, <span rsf:id="current-user-name">Current User</span>
<form rsf:id="listItemsForm" method="post">
<table class="listHier">
<tr rsf:id="item-row:">
<td class="firstColumn">
<span rsf:id="item-title">Non updateable item</span>
<a rsf:id="item-update" href="AddItem.html?id=1">New item title</a>
</td>
<td rsf:id="item-dateCreated" class="secondColumn">
Sep 15, 2006 1:26 AM
</td>
</tr>
</table>
</form>
</body></html>
12
Producer
(java)
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
13
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 (Iterator iter = l.iterator(); iter.hasNext();) {
CrudPlusItem item = (CrudPlusItem) iter.next();
UIBranchContainer itemrow = UIBranchContainer.make(listform,
"item-row:", item.getId().toString() );
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() );
}
}
}
14
ViewParams
(java)
RSF ViewParams
• Controls the passing of data between
page views
– Uses query parameters (GET)
– extends SimpleViewParameters
• Should be used when data needs to be
sent from one view to another
– Works like standard web variables should
– Can be reused on multiple pages
15
Sample ViewParams
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";
}
}
16
requestContext
(xml)
RSF requestContext
• Request Scope Context
– Often called RSAC
• 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 speed
• Location of this file is set in the web.xml
17
Sample requestContext
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN"
"http://www.springframework.org/dtd/spring-beans.dtd">
<beans>

<bean id="itemsBean"
class="org.sakaiproject.crudplus.tool.ItemsBean"
init-method="init">
<property name="logic"
ref="org.sakaiproject.crudplus.logic.CrudPlusLogic" />
</bean>

<bean class="org.sakaiproject.crudplus.tool.producers.ItemsProducer">
<property name="logic"
ref="org.sakaiproject.crudplus.logic.CrudPlusLogic" />
</bean>
<bean class="org.sakaiproject.crudplus.tool.producers.AddItemProducer">
<property name="logic"
ref="org.sakaiproject.crudplus.logic.CrudPlusLogic" />
</bean>
</beans>
18
applicationContext
(xml)
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
19
Sample applicationContext
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN"
"http://www.springframework.org/dtd/spring-beans.dtd">
<beans>

<bean parent="requestAddressibleParent">
<property name="value" value="itemsBean,infoMessages"/>
</bean>

<bean id="messageBeanScope" parent="beanScopeParent">
<property name="copyPreservingBeans" value="infoMessages" />
<property name="exclusive" value="true" />
</bean>
</beans>
20
Backing Bean
RSF Backing Bean
(java)
• 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
21
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";
}
}
22
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)
23
Output dynamic text
1
Hello, <span rsf:id="current-user-name">Current User</span>
UIOutput.make(tofill, "current-user-name",
logic.getCurrentUserDisplayName());
• 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
• Not recommended though
24
Loop structure
2
List l = logic.getAllVisibleItems();
for (Iterator iter = l.iterator(); iter.hasNext();) {
Item item = (Item) iter.next();
UIBranchContainer itemrow = UIBranchContainer.make(listform,
"item-row:", item.getId().toString() );
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() );
}
<table class="listHier">
<tr rsf:id="item-row:">
<td class="firstColumn">
<span rsf:id="item-title">Non updateable item</span>
<a rsf:id="item-update" href="AddItem.html?id=1">New item title</a>
</td>
<td rsf:id="item-dateCreated">Sep 15, 2006 1:26 AM</td>
</tr>
</table>
25
Optional rendering
3
if (item.getHidden().booleanValue()) {
UIOutput.make(itemrow, "item-title", item.getTitle() );
}
<span rsf:id="item-title">Hidden item title</span>
• HTML entities are rendered if the
component is tied via the rsf:id
– If there is no UI component for the id then the
render skips over it
• Can do this for single entities or for
UIBranchContainers to do a block
– Example: a surrounding <div>
26
Trigger actions
4
<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";
}
• Use a normal submit button with an id
– Use UICommand to tie to an action method in a
backing bean using EL
• Return string ties to a navigation case in the
producer
27
RSF in practice
28
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
29
RSF EL
#{requestwriteablebean.property1.subproperty2}
• A 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 page
URL: http://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=EL
30
OTP (One True Path)
<input rsf:id="title-input" size="60" name="title" type="text"/>
UIInput.make(form, "title-input", “EntryLocator.1.title");
public class EntryLocator implements BeanLocator {
…}
<bean id="EntryLocator" class=“uk.ac.cam.blogwow.tool.otp.EntryLocator“ />
• 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 can also do this for you if you use
Hibernate and RSF BeanGuards
31
Internationalization (i18n)
<b rsf:id=“remove-item">Are you sure you want to remove item (title)?</b>
UIMessage.make(tofill, “remove-item",
"remove.item.text", new Object[] { item.getTitle() } );
remove.item.text=Are you sure you want to remove item ({0})?
• Well supported with UIMessage concrete class
– Also MessageLocator
• Takes advantage of the standard Java language
properties bundle handling
• Uses the Spring MessageSource for resource
(properties file) loading
– Configurable in applicationContext
URL: http://www2.caret.cam.ac.uk/rsfwiki/Wiki.jsp?page=I18N
32
User feedback
<div rsf:id="message-for:*" class="alertMessage">
<ul style="margin:0px;"><li>Message for user here</li></ul>
</div>
messages.addMessage( new TargettedMessage(“user.message",
new Object[] { item.getTitle() },
TargettedMessage.SEVERITY_INFO));
user.message=New item saved ({0})
• 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
33
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
34
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=Component
35
RSF structure revisit
• The template is pure
html
– 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
Template
(html)
ViewParams
(java)
Producer
(java)
requestContext
(xml)
Backing Bean
(java)
applicationContext
(xml)
Logic Layer
– Can be mixed up
sometimes
• Backing beans are
really just simple beans
(rest of app)
model
(java)
36
RSF resources
• RSF Wiki (online documentation)
– http://www2.caret.cam.ac.uk/rsfwiki/
• RSF forums
– http://ponder.org.uk/rsf/
• RSF APIs
– http://saffron.caret.cam.ac.uk/projects/RSFUtil/apidocs/
• RSF SVN
– https://saffron.caret.cam.ac.uk/svn/
37
Questions?
• RSF
– http://www2.caret.cam.ac.uk/rsfwiki/
38

Document

Transcript Document

Directory