Okay, the worlds simplest Java Server Faces program which I just created was pretty simple, but it was also pretty nascent with regards to using JSF in the view layer. Sure, the little application proved that indeed the JSF framework was working properly, handling throw the FacesServlet all requests that come into the server with a .faces mapping at the end of them. And we even got the FacesServlet to invoke our simple JSP view page when it was requested, but that view page was nothing but simple, static HTML. If we really want to boast about having a real, JSF-generated view, then we need to at least throw a couple of JSF custom tags on our JSP page.
The entire JSF API from Sun provides two, count them: two, custom tag libraries that we can use in our JSP pages. Java developers can define as many of their own custom tag libraries as they want, but as far as the standard API goes, Sun only provides you with two custom tag libraries. They are:
- The JSF Core Tags (http://java.sun.com/jsf/core)
- The JSF HTML Tags (http://java.sun.com/jsf/html)
There are 25 separate tags defined in the JSF HTML tag library, all of which pretty much have to do with generating HTML for a web based client. If you have an familiarity with web page development, you could probably guess what many of the JSF HTML tags, such as inputText, selectOneListbox and graphicImage, are designed to do. Just to appease your curiosity, here’s an alphabetical listing of the twenty-five tags that round out the JSF HTML tag library.
- column
- commandButton
- commandLink
- dataTable
- form
- graphicImage
- inputHidden
- inputSecret
- inputText
- inputTextarea
- message
- messages
- outputFormat
- outputLabel
- outputLink
- outputText
- panelGrid
- panelGroup
- selectBooleanCheckbox
- selectManyCheckbox
- selectManyListbox
- selectManyMenu
- selectOneListbox
- selectOneMenu
- selectOneRadio
So, as I said, there are two custom tag libraries associated with JSF. The HTML library contains tags for creating HTML markup. The other library, the JSF core tags, contain all of the tags that are not in the HTML tag library. :P
Okay, that’s a bit of a flippant definition of the core tag library, but it is remarkably accurate. The HTML library tags all generate some type of markup when they are used. The core library tags are not limited to just HTML markup, and provide functionality that allows for the creation of JSF view pages that can be viewed outside of a standard web browser. Looking at the following list of eighteen JSF Core tags, you will again see many that are probably self evident in their purpose, including tags such as convertDateTime, convertNumber, validateLength, and validateLongRange. Here’s the complete, alphabetical listing of all of the JSF core tags:
- actionListener
- attribute
- convertDateTime
- converter
- convertNumber
- facet
- loadBundle
- param
- selectItem
- selectItems
- subview
- validateDoubleRange
- validateLength
- validateLongRange
- validator
- valueChangeListener
- verbatim
- view
Anyways, I don’t want to try and include every single custom tag in my introductory JSF application. All I’d like to do is use one or two simple tags from each of the two JSF tag libraries in my JSP.
Let’s take a look at our nascent little helloworld.jsp as it currently stands:
<html>
<head><title>Simple JSF Page</title></head>
<body>
<p>Hello Cruel World!</p>
</body>
</html>
First of all, if we hope to use two custom tag libraries, we must first add in two taglib declarations at the top of the page, before the <html> tag. The standard syntax for the core and html custom taglib directives are as follows:
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
By convention, the core tags are always given the prefix “f” while the html tags are given the “h” prefix.
The Core JSF tag I was interested in using was the <f:view> tag. Actually, I’m forced to use it, because every JSF tag on a view page must, at some point in time, be contained within an <f:view> tag. So, with the opening and closing f:view tags added, our JSP page will look like this:
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<head>
<title>JSF Made Easy</title>
</head>
<f:view>
<body>
<p>Hello World! </p>
</body>
</f:view>
</html>
Of course, this change becomes more semantic than pedantic, as it doesn’t really change how our page displays in the web browser. The <f:view> tag really only sets our page up for the potential use of sexy and salacious JSF HTML tags, which can help us render hyper-text markup which can be displayed in a web browser. So, within our core view tag, we need some JSF HTML tags. The tags I was interested in playing with here are the outputLink and the outputText tags.
As you probably imagined, the outputLink tag simply generates a clickable, HTML link in the web browser. Of course, the outputLink really only creates the HTML anchor tag, without any text associated with the link, which basically means it creates a link that displays nothing for the client to click on. To have some clickable text, we must nest a handsome outputText tag within the outputLink tag. It’s all pretty simple. Here’s how it looks, as we emphasize that the taglib directive stated that the letter ‘h’ is associated with all JSF HTML custom tags.
<h:outputLink id="link01" value="http://www.scja.com">
<h:outputText id="output01" value="Get Java Certified!" />
</h:outputLink>
After adding a little “Now check out this link” preamble in the prose after ‘Hello World’, my JSP page is completed. Here’s how the complete JSP page looks:
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
<head>
<title>JSF Made Easy</title>
</head>
<f:view>
<body>
<p>Hello World! Now check out this link:</p>
<h:outputLink id="link01" value="http://www.scja.com">
<h:outputText id="output01" value="Get Java Certified!" />
</h:outputLink>
</body>
</f:view>
</html>
Here’s the HTML that actually gets generated by the Java Server Faces custom tags:
<html>
<head>
<title>JSF Made Easy</title>
</head>
<body>
<p>Hello World! Now check out this link:</p>
<a id="link01" href="http://www.scja.com">
<span id="output01">Get Java Certified!</span>
</a>
</body>
</html>
No comments:
Post a Comment