/JSFDemoApp.war/resources/css/basecss.css
head { font-size: 12px;}
body { font-size: 12px;}
h1 { font-size:15px; }
h2 { color:blue; }
h3 { color:yellow; }
p { margin-left:50px;}
.alignTop td { vertical-align: top; }
.customButton { color: green; font-size: 24px; font-family: cursive; font-style: italic; }
/JSFDemoApp.war/index.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<h:head>
<title>Logged Out</title>
</h:head>
<h:body>
<!-- Display basic buttons to demonstrate basic JSF navigation -->
<h:form>
<h:outputStylesheet library="css" name="basecss.css" />
<h3>
Simple Text, not a component.<br/>
<h:commandLink value="commandLink - Click here to restart." action="startPage"/>
</h3>
<h:commandButton value="commandButton - Or click here to go again." style="color : red; font-size: 20pt" action="startPage"/><br/>
<h:commandButton value="commandButton - Or click here to try one more time." styleClass="customButton" action="startPage"/>
</h:form>
</h:body>
</html>
When we navigate to the page http://localhost:8080/JSFDemoApp/index.xhtml we get:
So, what just occured? Well, the faces servlet interpreted the jsf page and returned html to the browser such that it displayed the above.
Let us look at the JSF file piece by piece.
At the top of the jsf file we have:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This defined the file to be a well formed html document called xhtml, which simply means all tags must be closed in xml style. i.e. the html tag <br> is not valid, you must supply <br/>.
Next we have :
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
Which defines the name spaces for the types of tags we are using. We specified that any html tags will be prefaced by an h. If we had put xmlns:paul="http://java.sun.com/jsf/html". Then all the html tags would have been referenced like <paul:commandButton... Most libraries have a standard tag reference.
Here is a list of some libraries:
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
xmlns:sql="http://java.sun.com/jsp/jstl/sql"
xmlns:x="http://java.sun.com/jsp/jstl/xml"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
Then we start with the header:
<h:head>
<title>Logged Out</title>
</h:head>
Instead of putting <head> as we would for a straight HTML document, we put <h:head>. This way it will be validated and processed just like all the other tags.
In the header, we have other html tags. Notice, these do not start with the h: prefix, as they are not defined in the
http://java.sun.com/jsf/html name space. Not all the html tags are. But, head, body, form, buttons, inputs, and output tags are. Here is a great link for easy access to many of the standard tags (note it also includes Tomahawk tags which is another tag library). http://www.developersbook.com/jsf/tag-reference/jsf-tags.php. You can also get a list in Netbeans. The html tags that are not prefaced by a namespace tag will not be validated or processed. Then we have:
<h:body>
<!-- Display basic buttons to demonstrate basic JSF navigation -->
<h:form>
<h:outputStylesheet library="css" name="basecss.css" />
This form is the form that will be submitted when the user clicks on the submit button. Now, we haven't actually defined anything to submit, but, you can see how it would work. Also we include a tag that will render a style sheet into our page. We can reference the styles later in our components.
Next:
<h3>
Simple Text, not a component.<br/>
<h:commandLink value="commandLink - Click here to restart." action="startPage"/>
</h3>
<h:commandButton value="commandButton - Or click here to go again." style="color : red; font-size: 20pt" action="startPage"/><br/>
<h:commandButton value="commandButton - Or click here to try one more time." styleClass="customButton" action="startPage"/>
In the form, we have plain text which is passed through, and three components - a commandLink, and 2 commandButtons. Notice, I styled the components in three different ways. The first was to put it inside a <h3> tag. The second was to declare its style directly in the command button with the style attribute. And the third was to tell it to use the style class customButton. Now, on this last one, we did that by using the styleClass= attribute. This is a bit of a misnomer, as it is a stylesheet class, not a Java class. Most references to classes in JSF are java classes, but some are not. Don't assume.
And finally we end all the tags and finish the file.
</h:form>
</h:body>
</html>
Again, noting that the </html> tag is not a JSF tag.
It is instructional to review the html source passed to the client after the servlet has rendered the page:
<?xml version='1.0' encoding='UTF-8' ?>
<!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">
<head>
<link type="text/css" rel="stylesheet" href="/JSFDemoApp/javax.faces.resource/themes/sam/theme.css.xhtml?ln=primefaces&v=2.2.1" />
<link rel="stylesheet" type="text/css" href="basecss.css" />
<title>Logged Out</title>
</head>
<body>
<form id="j_idt7" name="j_idt7" method="post" action="/JSFDemoApp/index.xhtml" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt7" value="j_idt7" />
<h3>
Simple Text, not a component.<br />
<script type="text/javascript" src="/JSFDemoApp/javax.faces.resource/jsf.js.xhtml ln=javax.faces">
</script>
<a href="#" onclick="mojarra.jsfcljs(document.getElementById('j_idt7'),{'j_idt7:j_idt9':'j_idt7:j_idt9'},'');return false">Click here to restart.</a>
</h3>
<input type="submit" name="j_idt7:j_idt11" value="Or click here to go again." style="color : red; font-size: 20pt" />
<br />
<input type="submit" name="j_idt7:j_idt13" value="Or click here to try one more time." class="h1" />
<input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-3515480286518320194:8433896502956162656" autocomplete="off" />
</form>
</body>
</html>
Note: No JSF tags are present. The id's have arbitrary names. Even the page we will be redirected to has been removed from our view. In short, the page barely resembles the code we wrote. (Actually this is of a previous version that was slightly different, but you get the idea.) That is because much of what occurs in JSF occurs on the server side. We will discuss the JSF lifecycle later, but for now we need to understand the seperation of the view and the controller. In the Model/View/Controller methodology, we have components that service the view. HTML, Javascript, and possibly even JSP. We have a piece that acts as the controller - facelets. And we have the model - beans. There is much more to JSF, but since JSF is the view and we must be able to interact with the database and implement our business logic, we will first focus on the backend an explore beans.
Now that we have reviewed the whole file, the question remains, "What does this code do?" And the answer is, it displays a command link and two buttons in various fonts and colors that will redirect the client to /JSFDemoApp/startPage.xhtml. Exciting, yes?
No comments:
Post a Comment