31. Simple Ajax Tag Example Output: <h:outputText id="out1" value="#{echo.str}"/> <br/> Input: <h:inputText id="in1" value="#{echo.str}"> <f:ajax render="out1"/> </h:inputText> <br/> <!-- A no-op button, just to lose the focus --> <h:commandButton id="button1" value="Echo" type="button"/> <br/>
32. Another tag example <h:form id="countForm"> <h:outputText id="out1" value="#{ajaxrequest.count}"/> <h:commandButton id="button1" value="Count"> <f:ajax render="countForm:out1"/> </h:commandButton> <h:commandButton id="reset" value="reset" actionListener="#{ajaxrequest.resetCount}" > <f:ajax render="countForm:out1"/> </h:commandButton> </h:form> <h:outputText id="out2" value="#{ajaxrequest.count}"/>
33. Another tag example @ManagedBean(name="ajaxrequest") @ViewScoped public class AjaxRequestBean { private Integer count = 0; public Integer getCount() { return count++; } public void resetCount(ActionEvent ae) { count = 0; } }
54. Sample: Event and Error var statusUpdate = function statusUpdate(data) { // “statusArea” is a textArea in the page var statusArea = document.getElementById("statusArea"); var text = statusArea.value; text = text + "Name: "+data.source.id; if (data.type === "event") { text = text +" Event: "+data.status+""; } else { // otherwise, it's an error text = text + " Error: "+data.status+""; } statusArea.value = text; }; // Setup the statusUpdate function to // hear all events on the page jsf.ajax.addOnEvent(statusUpdate); jsf.ajax.addOnError(statusUpdate);
Heading should be V3 Express? Change the dates and names
The JSF lifecycle, simplified
What is a switchlist? You've seen it before... (read list above) As I mentioned, we'll put it in a page without any Ajax or making it a component, just to show we're not doing anything special. This is actually something you could do in 1.2, with only a few differences. First, let's describe the backing bean.
@ManagedBean annotation declares the bean. Name optional, will default to classname, with first letter in lower case. @SessionScoped declares the scope Can also use RequestScoped, ViewScoped, etc All overridable by faces-config.xml, but now that's mostly unnecessary. Defining data model here... getters and setters for two string arrays and two maps, with initialization.
Not much to see here, we're defining two action methods. Iterate through the selected items, move each selected item from one Map to the other.
How many folks here already know facelets? This is a Facelets page. It's XHTML We declare the JSF libraries we'll be using as namespaces, h and f respectively. We use h:head, h:body Output stylesheet puts the css file reference into the page – we'll come back to that.
SelectManyListBox – nothing special Uses list, which is String[] and items which is Map.
Two buttons in a panelGroup. Each button has an actionListener which calls the move method
Output stylesheet puts the css file reference into the page. It uses the resource facility, that's new in JSF2. (More on resources next page.)
Just so you can see what's going on here, this is the difference in appearance between the switchlist with and without the css and styling.
In case you're curious. Nothing special here. The only nifty bit is inline-block – it's how we get the buttons to stack vertically. So, I've now described switchlist as fully functional in the page.
Because a full page refresh is certainly overkill for such a small change.
Embedded inside each command button tag, we place an f:ajax tag. Each tag has two attributes, execute and render. The value of each attribute is a space delimited list of ID's. You're also allowed a few special values, such as @this, which refers to the component that embeds the tag. If you leave off execute, it defaults to @this, and the default for render is @none The values are looked up relative to the holding container, just like UIComponent.findComponent(id)
<slide> Just to illustrate how this would work, let's go over this in a non-Ajax component
Heading should be V3 Express? Change the dates and names