Our applications are fully operational by now, using several WebLogic Server features that enable us to expose and consume web services and JMS queues, secure access to these components, read and write business entities from and to a database, and so on.
In this chapter, we're going to check out some features of the presentation layer:
- A very interesting JavaServer Faces resource that helps us improve development speed and composite components and provides a way to create and use reusable pieces of code by applying templates
- Deprecated and new features of Servlet 3.0, such as asynchronous request processing and dynamic component creation
- How to open a direct communication channel between server and browser with WebSockets, a new feature introduced by Version 12.1.2
The main presentation layer technology of Java EE 6 is JSF Version 2.0, which brings a couple of interesting enhancements to the previous version (Version 1.2), such as:
- Composite components that give us the flexibility to combine existing UI tags with new ones
- Native Ajax support
JSF 2.0 has been around for quite some time now, so its features have matured before getting packaged into WebLogic Server 12c, giving us a solid and reliable implementation.
WebLogic Server has native support for JSF Version 2.1 and JSTL 1.2, and these libraries are enabled by default when a server is started; it is available from the classpath. Although the framework is enabled by default, we added it as a shared library to our environment in Chapter 2, Setting Up the Environment, mostly to show how it is done. Also, this approach avoids having to deal with server configuration when you need to update the library, so use it whenever possible.
There's also a shared library for JSF 1.2, in case you're porting an application that needs an older version. You just need to deploy this package that can be found inside /wlserver/common/deployable-libraries of your WebLogic Server installation.
With this JavaServer Faces feature, we can create (compose) new reusable components, which are pretty much like small templates, by aggregating other existing JSF components, such as the ones available in PrimeFaces that gives us a flexible and quick way to group these in a common reusable unit that can even be shared as a component library between projects for speeding up development. Basically, this is all done through the Facelets framework, so any XHTML page can be converted into a composite component having input data, validators, converters, or even listeners.
A composite component is declared by using a few extra markup tags. Here's an example of a simple one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:composite="http://java.sun.com/jsf/composite">
<head />
<body>
<composite:interface>
<composite:attribute name="label" required="true"/>
<composite:attribute name="value" required="false"/>
</composite:interface>
<composite:implementation>
<span>
<h:outputText value="#{cc.attrs.label}" style="font-weight:bold" />: <h:inputText value="#{cc.attrs.value}" style="width: 300px;" />
</span>
</composite:implementation>
</body>
</html>The preceding declaration creates a component that expects two parameters, label and value, and the output is a span tag with an input field preceded by its label. We just need to declare the attributes expected by the component and their names in the interface tag and the necessary code in the implementation tag.
The name you give the file, which must have the .xhtml suffix, will be used as the tag name; field is going to be the name of the sample composite. Also, you have to save it inside a specific folder named components that is inside the resources folder of your project:
This way, it will be recognized automatically by both Eclipse (at development time) and WebLogic Server (at runtime).
To use the new tag, we have to add a namespace declaration on our JSF page that reflects the folder structure created inside the component folder. For your example, the namespace would be http://java.sun.com/jsf/composite/components as the tag is at the base folder. Here's the complete declaration using the index.xhtml file of the Store project as its basis:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:store="http://java.sun.com/jsf/composite/components">
You can use any prefix you want to reference your folder, so we will use store—the name of the project—as the alias.
With this declaration in place, go ahead and use the tag in your page. Here's what it would look like:
<store:field label="Some field" value="initial value"/>
After declaring the namespace in the page, OEPE recognizes it as a component folder and enables code completion for tag names declared in it. Unfortunately, there's no autocomplete for the tags' attributes yet.
That's it; just publish the project and open the page to check the result. This is a pretty easy feature to use, giving developers a very quick and easy way to create complex user interface components.
In another practical example, we have created a <store:login/> component that's capable of rendering the login form on the login.xhtml page and on the top.xhtml page. So, in cases where the same components and logic are used in different places, you have an opportunity to leverage the composite components. This example is part of the code bundle of this chapter.
Tip
There are other features associated with composites, such as listeners, actions, and validators that you can explore—take a look at http://javaserverfaces.java.net/nonav/docs/2.0/pdldocs/facelets/composite/tld-summary.html to learn more about them.