Notes on JavaServer Faces Portlets

Following are some various notes taken in the course of JSF portlet development for WebSphere Portal.

Accessing JSF elements with JavaScript

Often, you may want to access JSF elements from JavaScript at run-time. If you look at the source code of an HTML page created from a JSF Portlet, you will see that all elements created by JSF components will get unique ID's that look like this:

<input type="submit"
       value="Save"
       name="viewPC_7_0_3TM_:form1:buttonSaveAll"
       id="viewPC_7_0_3TM_:form1:buttonSaveAll"
       disabled
       class="wpsButtonText" />

Notice the "viewPC_7_0_3TM_" part of the ID? That's the portlet's unique namespace that is generated at runtime. So, if you want to call on elements at runtime through JavaScript, you'll have to prepend the word "view" and the portlet's namespace and ":" to the element id. For JSR168 portlets, it is like this:

var saveButton = document.getElementById("view<%=renderResponse.getNamespace()%>:form1:buttonSaveAll");

And in an IBM API portlet, you do it like this:

var saveButton= document.getElementById("view<%=portletResponse.encodeNamespace(":form1:buttonSaveAll")%>");

That's it! Oh, there is some similar info here.

But don't forget that to submit a faces form from javascript, you can call submit() directly from any UI control like this:

<h:selectOneListbox immediate="true" styleClass="selectOneListbox"
     id="listboxGroupsIOwnA" onclick="submit();"
     valueChangeListener="#{pc_SGAdminView.handleListboxGroupsIOwnAValueChange}"
     value="#{authUser.selectedGroup.id}">
	<f:selectItems value="#{authUser.groupOptions}" />
</h:selectOneListbox>

Faces stylesheet.css conflicts with theme

When you drag and drop JSF components on a page using the Rational IDE, the IDE will automatically include a reference to /theme/stylesheet.css and it will automatically create the stylesheet.css file with default JSF classes. Something in this file conflicts with the theme on some browsers. You could remove the CSS include from your JSF pages, however, this is inconvenient because the reference will be replaced the next time you drop a new JSF component on the page. The recommended fix is to simply leave the /theme/stylesheet.css include in tact, but delete all the contents of the file.

Access Managed Beans Programmatically

Often, you may want to access JSF managed beans programmatically. Usually, you'll do this from an event listener method in your page backing bean. Following is the code necessary to access a managed bean called resultBean:

FacesContext context = FacesContext.getCurrentInstance();
ValueBinding currentBinding = context.getApplication().createValueBinding("#{resultBean}");
ResultBean myResultBean = (ResultBean) currentBinding.getValue(context);

There are essentially 3 things happening in the code listed above. First, we're getting the context. Second, we're getting the current binding to the resultBean. Finally, we get the bean.

Setting the bean is very similar as you'll see in the code below:

ResultBean myResultBean = new ResultBean();
// Set values in the bean
....
// Now save the bean so it's available as a Faces Managed Bean
FacesContext context = FacesContext.getCurrentInstance();
ValueBinding currentBinding = context.getApplication().createValueBinding("#{resultBean}");
currentBinding.setValue(context, myResultBean);

If this bean is accessed by other classes in your Faces application they will get the bean that is set above.