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:
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:
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.
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.