geronimo-scm mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From conflue...@apache.org
Subject [CONF] Apache Geronimo v2.2: Developing a Simple JavaServer Faces application (page edited)
Date Wed, 22 Oct 2008 21:14:00 GMT
<html>
<head>
    <base href="http://cwiki.apache.org/confluence" />
    <style type="text/css">
    <!--
    body, p, td, table, tr, .bodytext, .stepfield {
	font-family: Verdana, arial, sans-serif;
	font-size: 11px;
	line-height: 16px;
	color: #000000;
	font-weight: normal;
}
#PageContent {
	text-align: left;
	background-color: #fff;
	padding: 0px;
	margin: 0px;
    padding-bottom:20px;
}
/*
** when this stylesheet is used for the Tiny MCE Wysiwyg editor's edit area, we can't
** use an id=PageContent or class=wiki-content, so we must
** set the body style to that used for PageContent, and p to that used for wiki-content.
*/

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
    background-color: #f0f0f0;
}

@media print {

body {
    background-color: #fff;
}

}

.monospaceInput {
    font:12px monospace
}

.wiki-content p, .commentblock p {
    margin: 16px 0px 16px 0px;
    padding: 0px;
}

.wiki-content-preview {
    padding: 5px;
    border-left: 1px solid #3c78b5;
    border-right: 1px solid #3c78b5;
}

ul, ol {
    margin-top: 2px;
    margin-bottom: 2px;
    padding-top: 0px;
    padding-bottom: 0px;
}

pre {
    padding: 0px;
    margin-top: 5px;
    margin-left: 15px;
    margin-bottom: 5px;
    margin-right: 5px;
    text-align: left;
}

.helpheading {
    font-weight: bold;
    background-color: #D0D9BD;
        border-bottom: 1px solid #3c78b5;
        padding: 4px 4px 4px 4px;
        margin: 0px;
        margin-top: 10px;
}
.helpcontent {
        padding: 4px 4px 20px 4px;
    background-color: #f5f7f1;
}

.code {
 	border: 1px dashed #3c78b5;
    font-size: 11px;
	font-family: Courier;
    margin: 10px;
	line-height: 13px;
}

.focusedComment {
    background: #ffffce;
}

.commentBox, .focusedComment {
    padding: 10px;
    margin: 5px 0 5px 0;
    border: 1px #bbb solid;
}

.codeHeader {
    background-color: #f0f0f0;
 	border-bottom: 1px dashed #3c78b5;
    padding: 3px;
	text-align: center;
}

.codeContent {
    text-align: left;
    background-color: #f0f0f0;
    padding: 3px;
}

.preformatted {
 	border: 1px dashed #3c78b5;
    font-size: 11px;
	font-family: Courier;
    margin: 10px;
	line-height: 13px;
}

.preformattedHeader {
    background-color: #f0f0f0;
 	border-bottom: 1px dashed #3c78b5;
    padding: 3px;
	text-align: center;
}

.preformattedContent {
    background-color: #f0f0f0;
    padding: 3px;
}

.panel {
 	border: 1px dashed #3c78b5;
    margin: 10px;
    margin-top: 0px;
}

.panelHeader {
    background-color: #f0f0f0;
 	border-bottom: 1px dashed #3c78b5;
    padding: 3px;
	text-align: center;
}

.panelContent {
    background-color: #f0f0f0;
    padding: 5px;
}

.anonymousAlert {
    background-color: #f0f0f0;
 	border: 1px dashed red;
    font-size: 11px;
    padding: 10px 5px 10px 5px;
    margin: 4px;
	line-height: 13px;
}

.lockAlert {
    background-color: #f0f0f0;
    width: 50%;
 	border: 1px dashed red;
    font-size: 11px;
    padding: 10px 5px 10px 5px;
    margin: 4px;
	line-height: 13px;
}


.code-keyword {
  color: #000091;
  background-color: inherit;
}

.code-object {
  color: #910091;
  background-color: inherit;
}

.code-quote {
  color: #009100;
  background-color: inherit;
}

.code-comment {
  color: #808080;
  background-color: inherit;
}


.code-xml .code-keyword {
  color: inherit;
  font-weight: bold;
}

.code-tag {
  color: #000091;
  background-color: inherit;
}

.breadcrumbs {
    background-color: #f0f0f0;
 	border-color: #3c78b5;
	border-width: 1px 0px 1px 0px;
	border-style: solid;
    font-size: 11px;
    padding: 3px 0px 3px 0px;
}

.navmenu {
    border: 1px solid #ccc;
}

.menuheading {
    font-weight: bold;
    background-color: #f0f0f0;
 	border-bottom: 1px solid #3c78b5;
	padding: 4px 4px 2px 4px;
}

.menuitems {
	padding: 4px 4px 20px 4px;
}

.rightpanel {
    border-left: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

#helpheading {
    text-align: left;
    font-weight: bold;
    background-color: #D0D9BD;
 	border-bottom: 1px solid #3c78b5;
	padding: 4px 4px 4px 4px;
	margin: 0px;
}
#helpcontent {
	padding: 4px 4px 4px 4px;
    background-color: #f5f7f1;
}
.helptab-unselected {
    font-weight: bold;
	padding: 5px;
    background-color: #f5f7f1;
}
.helptab-selected {
    font-weight: bold;
    background-color: #D0D9BD;
	padding: 5px;
}
.helptabs {
    margin: 0px;
    background-color: #f5f7f1;
	padding: 5px;
}
.infopanel-heading {
    font-weight: bold;
	padding: 4px 0px 2px 0px;
}

.pagebody {
}

.pageheader {
	padding: 5px 5px 5px 0px;
 	border-bottom: 1px solid #3c78b5;
}

.pagetitle {
	font-size: 22px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	color: #003366;
}

.newpagetitle {
    color: #ccc !important;
}

.steptitle {
	font-size: 18px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	color: #003366;
	margin-bottom: 7px;
}

.substeptitle {
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #003366;
    margin: 2px 4px 4px 4px;
    padding: 2px 4px 1px 4px;
}

.stepdesc {
    font-family: Verdana, arial, sans-serif;
	font-size: 11px;
	line-height: 16px;
	font-weight: normal;
    color: #666666;
    margin-top: 7px;
    margin-bottom: 7px;
}

.steplabel {
    font-weight: bold;
    margin-right: 4px;
    color: black;
    float: left;
    width: 15%;
    text-align: right;
}

.stepfield {
    background: #f0f0f0;
    padding: 5px;
}

.submitButtons{
    margin-top:5px;
    text-align:right;
}

.formtitle {
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	color: #003366;
}

.sectionbottom {
    border-bottom: 1px solid #3c78b5;
}

.topRow {
    border-top: 2px solid #3c78b5;
}

.tabletitle {
	font-size: 14px;
	font-weight: bold;
	font-family: Arial, sans-serif;
    padding: 3px 0px 2px 0px;
    margin: 8px 4px 2px 0px;
	color: #003366;
	border-bottom: 2px solid #3c78b5;
}
.pagesubheading {
    color: #666666;
    font-size: 10px;
    padding: 0px 0px 5px 0px;
}

HR {
	color: 3c78b5;
	height: 1;
}

A:link, A:visited, A:active, A:hover {
	color: #003366;
}

h1 A:link, h1 A:visited, h1 A:active {
	text-decoration: none;
}

h1 A:hover {
    border-bottom: 1px dotted #003366;
}

.wiki-content > :first-child, .commentblock > :first-child {
    margin-top: 3px;
}

.logocell {
    padding: 10px;
}

input {
	font-family: verdana, geneva, arial, sans-serif;
	font-size: 11px;
	color: #000000;
}

textarea, textarea.editor {
	font-family: verdana, geneva, arial, sans-serif;
	font-size: 11px;
	color: #333333;
}

/* use logoSpaceLink instead.
.spacenametitle {
	font: 21px/31px Impact, Arial, Helvetica;
    font-weight: 100;
    color: #999999;
	margin: 0px;
}
.spacenametitle img {
  margin: 0 0 -4px 0;
}
.spacenametitle a {
    text-decoration: none;
    color: #999999;
}
.spacenametitle a:visited {
    text-decoration: none;
    color: #999999;
}*/

.spacenametitle-printable {
	font: 20px/25px Impact, Arial, Helvetica;
    font-weight: 100;
    color: #999999;
	margin: 0px;
}
.spacenametitle-printable a {
    text-decoration: none;
    color: #999999;
}
.spacenametitle-printable a:visited {
    text-decoration: none;
    color: #999999;
}

.blogDate {
	font-weight: bold;
	text-decoration: none;
	color: black;
}

.blogSurtitle {
    background: #f0f0f0;
 	border: 1px solid #ddd;
	padding: 3px;
	margin: 1px 1px 10px 1px;
}

.blogHeading {
    font-size: 20px;
    line-height: normal;
    font-weight: bold;
    padding: 0px;
    margin: 0px;
}

.blogHeading a {
   text-decoration: none;
   color: black;
}

.endsection {
	align: right;
	color: #666666;
	margin-top: 10px;
}
.endsectionleftnav {
	align: right;
	color: #666666;
	margin-top: 10px;
}

h1 {
	font-size: 24px;
	line-height: normal;
	font-weight: bold;
	background-color: #f0f0f0;
	color: #003366;
 	border-bottom: 1px solid #3c78b5;
	padding: 2px;
	margin: 36px 0px 4px 0px;
}

h2 {
	font-size: 18px;
	line-height: normal;
	font-weight: bold;
	background-color: #f0f0f0;
 	border-bottom: 1px solid #3c78b5;
	padding: 2px;
	margin: 27px 0px 4px 0px;
}

h3 {
	font-size: 14px;
	line-height: normal;
	font-weight: bold;
	background-color: #f0f0f0;
	padding: 2px;
	margin: 21px 0px 4px 0px;
}

h4 {
	font-size: 12px;
	line-height: normal;
	font-weight: bold;
	background-color: #f0f0f0;
	padding: 2px;
	margin: 18px 0px 4px 0px;
}

h4.search {
	font-size: 12px;
	line-height: normal;
	font-weight: normal;
	background-color: #f0f0f0;
	padding: 4px;
	margin: 18px 0px 4px 0px;
}

h5 {
	font-size: 10px;
	line-height: normal;
	font-weight: bold;
	background-color: #f0f0f0;
	padding: 2px;
	margin: 14px 0px 4px 0px;
}

h6 {
	font-size: 8px;
	line-height: normal;
	font-weight: bold;
	background-color: #f0f0f0;
	padding: 2px;
	margin: 14px 0px 4px 0px;
}

.smallfont {
    font-size: 10px;
}
.descfont {
    font-size: 10px;
    color: #666666;
}
.smallerfont {
    font-size: 9px;
}
.smalltext {
    color: #666666;
    font-size: 10px;
}
.smalltext a {
    color: #666666;
}
.smalltext-blue {
    color: #3c78b5;
    font-size: 10px;
}
.surtitle {
    margin-left: 1px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #666666;
}

/* css hack found here:  http://www.fo3nix.pwp.blueyonder.co.uk/tutorials/css/hacks/ */
.navItemOver { font-size: 10px; font-weight: bold; color: #ffffff; background-color: #003366; cursor: hand; voice-family: '\'}\''; voice-family:inherit; cursor: pointer;}
.navItemOver a { color: #ffffff; background-color:#003366; text-decoration: none; }
.navItemOver a:visited { color: #ffffff; background-color:#003366; text-decoration: none; }
.navItemOver a:hover { color: #ffffff; background-color:#003366; text-decoration: none; }
.navItem { font-size: 10px; font-weight: bold; color: #ffffff; background-color: #3c78b5; }
.navItem a { color: #ffffff; text-decoration: none; }
.navItem a:hover { color: #ffffff; text-decoration: none; }
.navItem a:visited { color: #ffffff; text-decoration: none; }

div.padded { padding: 4px; }
div.thickPadded { padding: 10px; }
h3.macrolibrariestitle {
    margin: 0px 0px 0px 0px;
}

div.centered { text-align: center; margin: 10px; }
div.centered table {margin: 0px auto; text-align: left; }

.tableview table {
    margin: 0;
}

.tableview th {
    text-align: left;
    color: #003366;
    font-size: 12px;
    padding: 5px 0px 0px 5px;
    border-bottom: 2px solid #3c78b5;
}
.tableview td {
    text-align: left;
    border-color: #ccc;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    margin: 0;
    padding: 4px 10px 4px 5px;
}

.grid {
    margin: 2px 0px 5px 0px;
    border-collapse: collapse;
}
.grid th  {
    border: 1px solid #ccc;
    padding: 2px 4px 2px 4px;
    background: #f0f0f0;
    text-align: center;
}
.grid td  {
    border: 1px solid #ccc;
    padding: 3px 4px 3px 4px;
}
.gridHover {
	background-color: #f9f9f9;
}

td.infocell {
    background-color: #f0f0f0;
}
.label {
	font-weight: bold;
	color: #003366;
}

label {
	font-weight: bold;
	color: #003366;
}

.error {
	background-color: #fcc;
}

.errorBox {
	background-color: #fcc;
    border: 1px solid #c00;
    padding: 5px;
    margin: 5px;
}

.errorMessage {
	color: #c00;
}

.success {
	background-color: #dfd;
}

.successBox {
	background-color: #dfd;
    border: 1px solid #090;
    padding: 5px;
    margin-top:5px;
    margin-bottom:5px;
}

blockquote {
	padding-left: 10px;
	padding-right: 10px;
	margin-left: 5px;
	margin-right: 0px;
	border-left: 1px solid #3c78b5;
}

table.confluenceTable
{
    margin: 5px;
    border-collapse: collapse;
}

/* Added as a temporary fix for CONF-4223. The table elements appear to be inheriting the border: none attribute from the sectionMacro class */
table.confluenceTable td.confluenceTd
{
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    padding: 3px 4px 3px 4px;
}

/* Added as a temporary fix for CONF-4223. The table elements appear to be inheriting the border: none attribute from the sectionMacro class */
table.confluenceTable th.confluenceTh
{
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    padding: 3px 4px 3px 4px;
    background-color: #f0f0f0;
    text-align: center;
}

td.confluenceTd
{
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    padding: 3px 4px 3px 4px;
}

th.confluenceTh
{
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    padding: 3px 4px 3px 4px;
    background-color: #f0f0f0;
    text-align: center;
}

DIV.small {
	font-size: 9px;
}

H1.pagename {
	margin-top: 0px;
}

IMG.inline  {}

.loginform {
    margin: 5px;
    border: 1px solid #ccc;
}

/* The text how the "This is a preview" comment should be shown. */
.previewnote { text-align: center;
                font-size: 11px;
                    color: red; }

/* How the preview content should be shown */
.previewcontent { background: #E0E0E0; }

/* How the system messages should be shown (DisplayMessage.jsp) */
.messagecontent { background: #E0E0E0; }

/* How the "This page has been modified..." -comment should be shown. */
.conflictnote { }

.createlink {
    color: maroon;
}
a.createlink {
    color: maroon;
}
.templateparameter {
    font-size: 9px;
    color: darkblue;
}

.diffadded {
    background: #ddffdd;
    padding: 1px 1px 1px 4px;
	border-left: 4px solid darkgreen;
}
.diffdeleted {
    color: #999;
    background: #ffdddd;
    padding: 1px 1px 1px 4px;
	border-left: 4px solid darkred;
}
.diffnochange {
    padding: 1px 1px 1px 4px;
	border-left: 4px solid lightgrey;
}
.differror {
    background: brown;
}
.diff {
    font-family: lucida console, courier new, fixed-width;
	font-size: 12px;
	line-height: 14px;
}
.diffaddedchars {
    background-color:#99ff99;
    font-weight:bolder;
}
.diffremovedchars {
    background-color:#ff9999;
    text-decoration: line-through;
    font-weight:bolder;
}

.greybackground {
    background: #f0f0f0
}

.greybox {
 	border: 1px solid #ddd;
	padding: 3px;
	margin: 1px 1px 10px 1px;
}

.borderedGreyBox {
    border: 1px solid #cccccc;
    background-color: #f0f0f0;
    padding: 10px;
}

.greyboxfilled {
 	border: 1px solid #ddd;
    background: #f0f0f0;
    padding: 3px;
	margin: 1px 1px 10px 1px;
}

.navBackgroundBox {
    padding: 5px 5px 5px 5px;
    font-size: 22px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	color: white;
    background: #3c78b5;
    text-decoration: none;
}

.previewBoxTop {
	background-color: #f0f0f0;
    border-width: 1px 1px 0px 1px;
    border-style: solid;
    border-color: #3c78b5;
    padding: 5px;
    margin: 5px 0px 0px 0px;
    text-align: center;
}
.previewContent {
    background-color: #fff;
 	border-color: #3c78b5;
	border-width: 0px 1px 0px 1px;
	border-style: solid;
	padding: 10px;
	margin: 0px;
}
.previewBoxBottom {
	background-color: #f0f0f0;
    border-width: 0px 1px 1px 1px;
    border-style: solid;
    border-color: #3c78b5;
    padding: 5px;
    margin: 0px 0px 5px 0px;
    text-align: center;
}

.functionbox {
    background-color: #f0f0f0;
 	border: 1px solid #3c78b5;
	padding: 3px;
	margin: 1px 1px 10px 1px;
}

.functionbox-greyborder {
    background-color: #f0f0f0;
 	border: 1px solid #ddd;
	padding: 3px;
	margin: 1px 1px 10px 1px;
}

.search-highlight {
    background-color: #ffffcc;
}

/* normal (white) background */
.rowNormal {
    background-color: #ffffff;
 }

/* alternate (pale yellow) background */
.rowAlternate {
    background-color: #f7f7f7;
}

/* used in the list attachments table */
.rowAlternateNoBottomColor {
    background-color: #f7f7f7;
}

.rowAlternateNoBottomNoColor {
}

.rowAlternateNoBottomColor td {
    border-bottom: 0px;
}

.rowAlternateNoBottomNoColor td {
    border-bottom: 0px;
}

/* row highlight (grey) background */
.rowHighlight {
    background-color: #f0f0f0;

}

TD.greenbar {FONT-SIZE: 2px; BACKGROUND: #00df00; BORDER: 1px solid #9c9c9c; PADDING: 0px; }
TD.redbar {FONT-SIZE: 2px; BACKGROUND: #df0000; BORDER: 1px solid #9c9c9c; PADDING: 0px; }
TD.darkredbar {FONT-SIZE: 2px; BACKGROUND: #af0000; BORDER: 1px solid #9c9c9c; PADDING: 0px; }

TR.testpassed {FONT-SIZE: 2px; BACKGROUND: #ddffdd; PADDING: 0px; }
TR.testfailed {FONT-SIZE: 2px; BACKGROUND: #ffdddd; PADDING: 0px; }

.toolbar  {
    margin: 0px;
    border-collapse: collapse;
}

.toolbar td  {
    border: 1px solid #ccc;
    padding: 2px 2px 2px 2px;
    color: #ccc;
}

td.noformatting {
    border-width: 0px;
    border-style: none;
    text-align: center;
	padding: 0px;
}

.commentblock {
    margin: 12px 0 12px 0;
}

/*
 * Divs displaying the license information, if necessary.
 */
.license-eval, .license-none, .license-nonprofit {
    border-top: 1px solid #bbbbbb;
    text-align: center;
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

.license-eval, .license-none {
    background-color: #ffcccc;
}

.license-eval b, .license-none b {
    color: #990000
}

.license-nonprofit {
    background-color: #ffffff;
}

/*
 * The shadow at the bottom of the page between the main content and the
 * "powered by" section.
 */
.bottomshadow {
    height: 12px;
    background-image: url("$req.contextPath/images/border/border_bottom.gif");
    background-repeat: repeat-x;
}

/*
 * Styling of the operations box
 */
.navmenu .operations li, .navmenu .operations ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.navmenu .operations ul {
    margin-bottom: 9px;
}

.navmenu .label {
    font-weight: inherit;
}

/*
 * Styling of ops as a toolbar
 */
.toolbar div {
    display: none;
}

.toolbar .label {
    display: none;
}

.toolbar .operations {
    display: block;
}

.toolbar .operations ul {
    display: inline;
    list-style: none;
    margin-left: 10px;
    padding-left: 0;
}

.toolbar .operations li {
    list-style: none;
    display: inline;
}

/* list page navigational tabs */
#foldertab {
padding: 3px 0px 3px 8px;
margin-left: 0;
border-bottom: 1px solid #3c78b5;
font: bold 11px Verdana, sans-serif;
}

#foldertab li {
list-style: none;
margin: 0;
display: inline;
}

#foldertab li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #3c78b5;
border-bottom: none;
background: #3c78b5;
text-decoration: none;
}

#foldertab li a:link { color: #ffffff; }
#foldertab li a:visited { color: #ffffff; }

#foldertab li a:hover {
color: #ffffff;
background: #003366;
border-color: #003366;
}

#foldertab li a.current {
background: white;
border-bottom: 1px solid white;
color: black;
}

#foldertab li a.current:link { color: black; }
#foldertab li a.current:visited { color: black; }
#foldertab li a.current:hover {
background: white;
border-bottom: 1px solid white;
color: black;
}

/* alphabet list */
ul#squaretab {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
font: bold 8px Verdana, sans-serif;
}

#squaretab li {
display: inline;
list-style-type: none;
}

#squaretab a {
padding: 2px 6px;
border: 1px solid #3c78b5;
}

#squaretab a:link, #squaretab a:visited {
color: #fff;
background-color: #3c78b5;
text-decoration: none;
}

#squaretab a:hover {
color: #ffffff;
background-color: #003366;
border-color: #003366;
text-decoration: none;
}

#squaretab li a#current {
background: white;
color: black;
}

.blogcalendar * {
    font-family:verdana, arial, sans-serif;
    font-size:x-small;
    font-weight:normal;
    line-height:140%;
    padding:2px;
}


table.blogcalendar {
    border: 1px solid #3c78b5;
}

.blogcalendar th.calendarhead, a.calendarhead {
    font-size:x-small;
    font-weight:bold;
    padding:2px;
    text-transform:uppercase;
    background-color: #3c78b5;
    color: #ffffff;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.calendarhead:visited {color: white;}
.calendarhead:active {color: white;}
.calendarhead:hover {color: white;}

.blogcalendar th {
    font-size:x-small;
    font-weight:bold;
    padding:2px;
    background-color:#f0f0f0;
}

.blogcalendar td {
    font-size:x-small;
    font-weight:normal;
}

.searchGroup { padding: 0 0 10px 0; background: #f0f0f0; }
.searchGroupHeading { font-size: 10px; font-weight: bold; color: #ffffff; background-color: #3c78b5; padding: 2px 4px 1px 4px; }
.searchItem { padding: 1px 4px 1px 4px; }
.searchItemSelected { padding: 1px 4px 1px 4px; font-weight: bold; background: #ddd; }

/* permissions page styles */
.permissionHeading {
    border-bottom: #bbb; border-width: 0 0 1px 0; border-style: solid; font-size: 16px; text-align: left;
}
.permissionTab {
    border-width: 0 0 0 1px; border-style: solid; background: #3c78b5; color: #ffffff; font-size: 10px;
}
.permissionSuperTab {
    border-width: 0 0 0 1px; border-style: solid; background: #003366; color: #ffffff;
}
.permissionCell {
    border-left: #bbb; border-width: 0 0 0 1px; border-style: solid;
}

/* warning panel */
.warningPanel { background: #FFFFCE; border:#F0C000 1px solid; padding: 8px; margin: 10px; }
/* alert panel */
.alertPanel { background: #FFCCCC; border:#C00 1px solid; padding: 8px; margin: 10px; }
/* info panel */
.infoPanel { background: #D8E4F1; border:#3c78b5 1px solid; padding: 8px; margin: 10px; }

/* side menu highlighting (e.g. space content screen) */
.optionPadded { padding: 2px; }
.optionSelected { background-color: #ffffcc; padding: 2px; border: 1px solid #ddd; margin: -1px; }
.optionSelected a { font-weight: bold; text-decoration: none; color: black; }

/* information macros */
.noteMacro { border-style: solid; border-width: 1px; border-color: #F0C000; background-color: #FFFFCE; text-align:left; margin-top: 5px; margin-bottom: 5px}
.warningMacro { border-style: solid; border-width: 1px; border-color: #c00; background-color: #fcc; text-align:left; margin-top: 5px; margin-bottom: 5px}
.infoMacro { border-style: solid; border-width: 1px; border-color: #3c78b5; background-color: #D8E4F1; text-align:left; margin-top: 5px; margin-bottom: 5px}
.tipMacro { border-style: solid; border-width: 1px; border-color: #090; background-color: #dfd; text-align:left; margin-top: 5px; margin-bottom: 5px}
.informationMacroPadding { padding: 5px 0 0 5px; }

table.infoMacro td, table.warningMacro td, table.tipMacro td, table.noteMacro td, table.sectionMacro td {
    border: none;
}

table.sectionMacroWithBorder td.columnMacro { border-style: dashed; border-width: 1px; border-color: #cccccc;}

.pagecontent
{
    padding: 10px;
    text-align: left;
}

/* styles for links in the top bar */
.topBarDiv a:link {color: #ffffff;}
.topBarDiv a:visited {color: #ffffff;}
.topBarDiv a:active {color: #ffffff;}
.topBarDiv a:hover {color: #ffffff;}
.topBarDiv {color: #ffffff;}

.topBar {
    background-color: #003366;
}


/* styles for extended operations */
.greyLinks a:link {color: #666666; text-decoration:underline;}
.greyLinks a:visited {color: #666666; text-decoration:underline;}
.greyLinks a:active {color: #666666; text-decoration:underline;}
.greyLinks a:hover {color: #666666; text-decoration:underline;}
.greyLinks {color: #666666; display:block; padding: 10px}

.logoSpaceLink {color: #999999; text-decoration: none}
.logoSpaceLink a:link {color: #999999; text-decoration: none}
.logoSpaceLink a:visited {color: #999999; text-decoration: none}
.logoSpaceLink a:active {color: #999999; text-decoration: none}
.logoSpaceLink a:hover {color: #003366; text-decoration: none}

/* basic panel (basicpanel.vmd) style */
.basicPanelContainer {border: 1px solid #3c78b5; margin-top: 2px; margin-bottom: 8px; width: 100%}
.basicPanelTitle {padding: 5px; margin: 0px; background-color: #f0f0f0; color: black; font-weight: bold;}
.basicPanelBody {padding: 5px; margin: 0px}

.separatorLinks a:link {color: white}
.separatorLinks a:visited {color: white}
.separatorLinks a:active {color: white}

.greynavbar {background-color: #f0f0f0; border-top: 1px solid #3c78b5; margin-top: 2px}

div.headerField {
    float: left;
    width: auto;
    height: 100%;
}

.headerFloat {
    margin-left: auto;
    width: 50%;
}

.headerFloatLeft {
    float: left;
    margin-right: 20px;
    margin-bottom: 10px;
}

#headerRow {
    padding: 10px;
}

div.license-personal {
   background-color: #003366;
   color: #ffffff;
}

div.license-personal a {
   color: #ffffff;
}

.greyFormBox {
    border: 1px solid #cccccc;
    padding: 5px;
}

/* IE automatically adds a margin before and after form tags. Use this style to remove that */
.marginlessForm {
    margin: 0px;
}

.openPageHighlight {
    background-color: #ffffcc;
    padding: 2px;
    border: 1px solid #ddd;
}

.editPageInsertLinks, .editPageInsertLinks a
{
    color: #666666;
    font-weight: bold;
    font-size: 10px;
}

/* Style for label heatmap. */
.top10 a {
    font-weight: bold;
    font-size: 2em;
    color: #003366;
}
.top25 a {
    font-weight: bold;
    font-size: 1.6em;
    color: #003366;
}
.top50 a {
    font-size: 1.4em;
    color: #003366;
}
.top100 a {
    font-size: 1.2em;
    color: #003366;
}

.heatmap {
    list-style:none;
    width: 95%;
    margin: 0px auto;
}

.heatmap a {
    text-decoration:none;
}

.heatmap a:hover {
    text-decoration:underline;
}

.heatmap li {
    display: inline;
}

.minitab {
padding: 3px 0px 3px 8px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0px;
border-bottom: 1px solid #3c78b5;
font: bold 9px Verdana, sans-serif;
text-decoration: none;
float:none;
}
.selectedminitab {
padding: 3px 0.5em;
margin-left: 3px;
margin-top: 1px;
border: 1px solid #3c78b5;
background: white;
border-bottom: 1px solid white;
color: #000000;
text-decoration: none;
}
.unselectedminitab {
padding: 3px 0.5em;
margin-left: 3px;
margin-top: 1px;
border: 1px solid #3c78b5;
border-bottom: none;
background: #3c78b5;
color: #ffffff;
text-decoration: none;
}

a.unselectedminitab:hover {
color: #ffffff;
background: #003366;
border-color: #003366;
}

a.unselectedminitab:link { color: white; }
a.unselectedminitab:visited { color: white; }

a.selectedminitab:link { color: black; }
a.selectedminitab:visited { color: black; }

.linkerror { background-color: #fcc;}

a.labelOperationLink:link {text-decoration: underline}
a.labelOperationLink:active {text-decoration: underline}
a.labelOperationLink:visited {text-decoration: underline}
a.labelOperationLink:hover {text-decoration: underline}

a.newLabel:link {background-color: #ddffdd}
a.newLabel:active {background-color: #ddffdd}
a.newLabel:visited {background-color: #ddffdd}
a.newLabel:hover {background-color: #ddffdd}

ul.square {list-style-type: square}

.inline-control-link {
    background: #ffc;
    font-size: 9px;
    color: #666;
    padding: 2px;
    text-transform: uppercase;
    text-decoration: none;
}


.inline-control-link a:link {text-decoration: none}
.inline-control-link a:active {text-decoration: none}
.inline-control-link a:visited {text-decoration: none}
.inline-control-link a:hover {text-decoration: none}

.inline-control-link {
    background: #ffc;
    font-size: 9px;
    color: #666;
    padding: 2px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
}

div.auto_complete {
    width: 350px;
    background: #fff;
}
div.auto_complete ul {
    border: 1px solid #888;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
}
div.auto_complete ul li {
    margin: 0;
    padding: 3px;
}
div.auto_complete ul li.selected {
    background-color: #ffb;
}
div.auto_complete ul strong.highlight {
    color: #800;
    margin: 0;
    padding: 0;
}

/******* Edit Page Styles *******/
.toogleFormDiv{
    border:1px solid #A7A6AA;
    background-color:white;
    padding:5px;
    margin-top: 5px;
}

.toogleInfoDiv{
    border:1px solid #A7A6AA;
    background-color:white;
    display:none;
    padding:5px;
    margin-top: 10px;
}

.inputSection{
    margin-bottom:20px;
}

#editBox{
   border:1px solid lightgray;
   background-color:#F0F0F0;
}

/******* Left Navigation Theme Styles ********/
.leftnav li a {
    text-decoration:none;
    color:white;
    margin:0px;
    display:block;
    padding:2px;
    padding-left:5px;
    background-color: #3c78b5;
    border-top:1px solid #3c78b5;
}

.leftnav li a:active {color:white;}
.leftnav li a:visited {color:white;}
.leftnav li a:hover {background-color: #003366; color:white;}

/* Added by Shaun during i18n */
.replaced
{
    background-color: #33CC66;
}

.topPadding
{
    margin-top: 20px;
}

/* new form style */
.form-block {
    padding: 6px;
}
.form-error-block {
    padding: 6px;
    background: #fcc;
    border-top: #f0f0f0 1px solid;
    border-bottom: #f0f0f0 1px solid;
    margin-bottom: 6px;
    padding: 0 12px 0 12px;
}
.form-element-large {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #003366;
}

.form-element-small {
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    color: #003366;
}

.form-header {
    background: lightyellow;
    border-top: #f0f0f0 1px solid;
    border-bottom: #f0f0f0 1px solid;
    margin-bottom: 6px;
    padding: 0 12px 0 12px;
}
.form-header p, .form-block p, .form-error-block p {
    line-height: normal;
    margin: 12px 0 12px 0;
}
.form-example {
    color: #888;
    font-size: 11px;
}
.form-divider {
    border-bottom: #ccc 1px solid;
    margin-bottom: 6px;
}
.form-buttons {
    margin-top: 6px;
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    background: #f0f0f0;
    padding: 10px;
    text-align: center;
}
.form-buttons input {
    width: 100px;
}
.form-block .error {
    padding: 6px;
    margin-bottom: 6px;
}
    -->
    </style>
</head>
<body>

<div id="PageContent">
<table class="pagecontent" border="0" cellpadding="0" cellspacing="0" width="100%"><tr>
<td valign="top" class="pagebody">

    <div class="pageheader">
        <span class="pagetitle">
            Page Edited :
            <a href="http://cwiki.apache.org/confluence/display/GMOxDOC22">GMOxDOC22</a> :
            <a href="http://cwiki.apache.org/confluence/display/GMOxDOC22/Developing+a+Simple+JavaServer+Faces+application">Developing a Simple JavaServer Faces application</a>
        </span>
    </div>

     <p>
        <a href="http://cwiki.apache.org/confluence/display/GMOxDOC22/Developing+a+Simple+JavaServer+Faces+application">Developing a Simple JavaServer Faces application</a>
        has been edited by             <a href="http://cwiki.apache.org/confluence/display/~mcconne">Tim McConnell</a>
            <span class="smallfont">(Oct 22, 2008)</span>.
     </p>
    
     <p>
                 <a href="http://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=93311&originalVersion=104&revisedVersion=105">(View changes)</a>
     </p>

    <span class="label">Content:</span><br/>
    <div class="greybox wiki-content"><style type='text/css'>/*<![CDATA[*/
table.ScrollbarTable  {border: none;padding: 3px;width: 100%;padding: 3px;margin: 0px;background-color: #f0f0f0}
table.ScrollbarTable td.ScrollbarPrevIcon {text-align: center;width: 16px;border: none;}
table.ScrollbarTable td.ScrollbarPrevName {text-align: left;border: none;}
table.ScrollbarTable td.ScrollbarParent {text-align: center;border: none;}
table.ScrollbarTable td.ScrollbarNextName {text-align: right;border: none;}
table.ScrollbarTable td.ScrollbarNextIcon {text-align: center;width: 16px;border: none;}

/*]]>*/</style><div class="Scrollbar"><table class='ScrollbarTable'><tr><td width='33%' class='ScrollbarPrevName'>&nbsp;</td><td width='33%' class='ScrollbarParent'><sup><a href="/confluence/display/GMOxDOC22/JavaServer+Faces"><img border='0' align='middle' src='/confluence/images/icons/up_16.gif' width='8' height='8'></a></sup><a href="/confluence/display/GMOxDOC22/JavaServer+Faces">JavaServer Faces</a></td><td width='33%' class='ScrollbarNextName'>&nbsp;</td></tr></table></div>

<p>This application will make you understand how Model (M), View (V), Controller (C) architecture is implemented in JavaServer Faces. This application will make use of UI components, Validator, Navigation and Bean component available with  JSF.</p>

<p>Briefly describing the application, this application will take a user First Name and Last Name. Later these fields will be validated by JSF and using the controller bean and Navigation rule the output will be displayed. This application will also introduce a UI component which is a submit button.</p>

<p>To run this tutorial, as a minimum you will be required to have installed the following prerequisite software:</p>

<ol>
	<li>Sun JDK 6.0+ (J2SE 1.6)</li>
	<li>Eclipse IDE for Java EE Developers, which is platform specific</li>
	<li>Apache Geronimo Eclipse Plugin 2.1.x</li>
	<li>Apache Geronimo Server 2.1.x
<table cellpadding='5' width='85%' cellspacing='8px' class='noteMacro' border="0" align='center'><colgroup><col width='24'><col></colgroup><tr><td valign='top'><img src="/confluence/images/icons/emoticons/warning.gif" width="16" height="16" align="absmiddle" alt="" border="0"></td><td>
<p>Geronimo version 2.1.x, Java 1.5 runtime, and Eclipse Ganymede are used is used in this tutorial but other versions can be used instead (e.g., Geronimo version 2.2, Java 1.6, Eclipse Europa)</p></td></tr></table></li>
</ol>


<p>Details on installing eclipse are provided in the <a href="/confluence/display/GMOxDOC22/Development+environment" title="Development environment">Development environment</a> section. This tutorial is organized in the following sections:</p>

<p>The application development will take you through the following</p>
<div>
<ul>
  <li><a href='#DevelopingaSimpleJavaServerFacesapplication-SettingEclipseforApplicationdevelopment'>Setting Eclipse for Application development</a></li>
  <li><a href='#DevelopingaSimpleJavaServerFacesapplication-DefineandImplementtheapplicationModel%28M%29'>Define and Implement the application Model (M)</a></li>
  <li><a href='#DevelopingaSimpleJavaServerFacesapplication-DefineandimplementModel%28M%29objectstoController'>Define and implement Model (M) objects to Controller</a></li>
  <li><a href='#DevelopingaSimpleJavaServerFacesapplication-DefineandimplementView%28V%29inapplication'>Define and implement View (V) in application</a></li>
  <li><a href='#DevelopingaSimpleJavaServerFacesapplication-DefinetheValidatorComponent'>Define the Validator Component</a></li>
  <li><a href='#DevelopingaSimpleJavaServerFacesapplication-DefineandimplementtheViewnavigationbyController%28C%29'>Define and implement the View navigation by Controller (C)</a></li>
  <li><a href='#DevelopingaSimpleJavaServerFacesapplication-DeployandTesttheapplication'>Deploy and Test the application</a></li>
</ul></div>
<p>Once you have all the pre-requisites installed follow the following steps to create a project with Eclipse</p>

<h1><a name="DevelopingaSimpleJavaServerFacesapplication-SettingEclipseforApplicationdevelopment"></a>Setting Eclipse for Application development</h1>
<ol>
	<li>Launch Eclipse and create a dynamic web project as shown in the figure<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/CreateWebProject.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Give the fields for the Web Project as shown in the following figure<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/WebProjectFields.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select <b>Finish</b><br clear="all" /> <br clear="all" /></li>
	<li>Right-click on the <b>SimpleJSF</b> project and select properties. Select <b>Project Facets</b> <br clear="all" /> <br clear="all" /></li>
	<li>Check the box for <b>JavaServerFaces</b> and under the version tab select <b>1.2</b> as the version. Select the <img class="emoticon" src="/confluence/images/icons/emoticons/error.gif" height="16" width="16" align="absmiddle" alt="" border="0"/> <b>Further configuration required...</b> indicator to display the <b>JSF Capabilities</b> pane.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ProjectFileds.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>On the <b>JSF Capabilities</b> window check the box and select <b>new</b> as shown in the figure<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/JSFCapabilities.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>The next window is used to create a JSF Implementation library. Give the library name as <b>JSFCustomLibrary</b> and add the following jars. Select <b>Finish</b> once done. See the figure below:<br clear="all" />  <br clear="all" />
	<ul>
		<li>&lt;GERONIMO_HOME&gt;\repository\commons-beanutils\commons-beanutils\1.7.0\commons-beanutils-1.7.0.jar</li>
		<li>&lt;GERONIMO_HOME&gt;\repository\commons-collections\commons-collections\3.2\commons-collections-3.2.jar</li>
		<li>&lt;GERONIMO_HOME&gt;\repository\commons-digester\commons-digester\1.8\commons-digester-1.8.jar</li>
		<li>&lt;GERONIMO_HOME&gt;\repository\commons-logging\commons-logging\1.0.4\commons-logging-1.0.4.jar</li>
		<li>&lt;GERONIMO_HOME&gt;\repository\org\apache\myfaces\core\myfaces-api\1.2.3\myfaces-api-1.2.3.jar</li>
		<li>&lt;GERONIMO_HOME&gt;\repository\org\apache\myfaces\core\myfaces-impl\1.2.3\myfaces-impl-1.2.3.jar<br clear="all" /> <br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/JSFCustomLibrary.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	</ul>
	</li>
	<li>Check Deploy and modify the URL pattern to <b>&#42;.jsf</b> as shown in the figure. Select <b>Ok</b>.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/EclipseSetUpFinal.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" />
This finishes the setting up of the Eclipse IDE for application development.</li>
</ol>


<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefineandImplementtheapplicationModel%28M%29"></a>Define and Implement the application Model (M)</h1>
<p>The <b>Model</b> as suggested by MVC architecture handles data and logic of the application. In an enterprise application. Java Beans are used to represent collection of data and operation on that data. In JSF we use Java Beans to define the Model.<br clear="all" /></p>
<ol>
	<li>Under the project explorer right-click on the <b>SimpleJSF</b> project and create a new class<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/Model1.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Fill the <b>New Java Class</b> form with <b>jsf</b> as the package name and <b>FirstName</b> as the bean class name. Select <b>Finish</b> once done.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/Model2.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Add the following code to the <b>FirstName</b> bean class: <br clear="all" />
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>FirstName.java</b></div><div class="codeContent">
<pre class="code-java"><span class="code-keyword">package</span> jsf;

<span class="code-keyword">public</span> class FirstName {
	<span class="code-object">String</span> username;

	<span class="code-keyword">public</span> <span class="code-object">String</span> getName() {
		<span class="code-keyword">return</span> username;
	}

	<span class="code-keyword">public</span> void setName(<span class="code-object">String</span> name) {
		username = name;
	}

}</pre>
</div></div><br clear="all" /></li>
	<li>Create a second Bean class <b>LastName</b> and add the following code to the class:
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>LastName.java</b></div><div class="codeContent">
<pre class="code-java"><span class="code-keyword">package</span> jsf;

<span class="code-keyword">public</span> class LastName {
	<span class="code-object">String</span> lastname;

	<span class="code-keyword">public</span> <span class="code-object">String</span> getLName() 	{
		<span class="code-keyword">return</span> lastname;
	}

	<span class="code-keyword">public</span> void setLName(<span class="code-object">String</span> lname)
	{
		lastname = lname;
}
}</pre>
</div></div>
<p>This completes the Model definition and implementation of the bean classes.</p></li>
</ol>


<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefineandimplementModel%28M%29objectstoController"></a>Define and implement Model (M) objects to Controller</h1>
<ol>
	<li>In a JSF application the <b>Controller</b> is implemented by a configuration file called <b>WebContent/WEB-INF/faces-config.xml</b>. Double-click on the file. This will open the <b>Faces Configuration Editor</b>.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ModelController.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select the <b>ManagedBean</b> tab in the editor. Select the <b>request</b> Managed Bean Element and select <b>Add</b>.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ModelController2.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li><b>Using an existing Java class</b> option, select <b>Browse</b>. Give the search element as <b>FirstName</b> and select <b>Ok</b>.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ModelController3.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select <b>Finish</b> on the next window. Similarly add the other bean <b>LastName</b>. Now select the <b>Source</b> tab in the Faces configuration Editor. It displays the bean components (i.e., the Model) in the controller.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ModelController4.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" />
This completes the description of Model to Controller.</li>
</ol>


<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefineandimplementView%28V%29inapplication"></a>Define and implement View (V) in application</h1>
<ol>
	<li>Right-click on <b>WebContent</b> and create a new <b>Folder</b> with the name <b>pages</b><br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/View.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Right-click on <b>pages</b> folder and create a JSP called <b>login.jsp</b>. Select <b>Finish</b>.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/View2.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Similarly create another JSP page called <b>welcome.jsp</b>.<br clear="all" /> <br clear="all" /></li>
	<li>Now we have to include the Tag Library Descriptors (TLD) in our application. Geronimo comes packaged with the required TLD's, which can be found in:<br clear="all" />
<div class="preformatted" style="border-style: solid; "><div class="preformattedHeader" style="border-bottom-style: solid; "><b>Location of TLD</b></div><div class="preformattedContent">
<pre>&lt;GERONIMO_HOME&gt;\repository\org\apache\myfaces\core\myfaces-impl\1.2.3\myfaces-impl-1.2.3.jar\META-INF\myfaces-html.tld
and
&lt;GERONIMO_HOME&gt;\repository\org\apache\myfaces\core\myfaces-impl\1.2.3\myfaces-impl-1.2.3.jar\META-INF\myfaces_core.tld
</pre>
</div></div> <br clear="all" /></li>
	<li>To add these two TLD's in the application, in Eclipse under the Project Explorer right-click on <b>WEB-INF</b>. Create a folder called <b>tld</b>. Copy <b>myfaces-html.tld</b> and <b>myfaces_core.tld</b> to this folder.<br clear="all" /> <br clear="all" /></li>
	<li>The next step is to populate <b>login.jsp</b> and <b>welcome.jsp</b> with data
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>login.jsp</b></div><div class="codeContent">
<pre class="code-actionscript">&lt;%@ taglib uri="/WEB-INF/tld/myfaces-html.tld" prefix="h" %&gt;
&lt;%@ taglib uri="/WEB-INF/tld/myfaces_core.tld" prefix="f" %&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;title&gt;Welcome to Apache Geronimo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;f:view&gt;
    &lt;h1&gt;&lt;h:outputText value="Welcome to Apache Geronimo" /&gt;&lt;/h1&gt;
    &lt;h:form&gt;
        &lt;h:message <span class="code-keyword">for</span>="firstName" style="color: red;" /&gt;
        &lt;h:message <span class="code-keyword">for</span>="lastName" style="color: red;" /&gt;
        &lt;br&gt;
        &lt;h:outputText value="Enter your first name" /&gt;
        &lt;br&gt;
        &lt;h:inputText id="firstName" value="#{firstName.name}" required="true"&gt;
            &lt;f:validateLength minimum="4" maximum="10" /&gt;
        &lt;/h:inputText&gt;
        &lt;br&gt;
        &lt;h:outputText value="Enter your last name" /&gt;
        &lt;br&gt;
        &lt;h:inputText id="lastName" value="#{lastName.LName}" required="true"&gt;
            &lt;f:validateLength minimum="3" maximum="10" /&gt;
        &lt;/h:inputText&gt;
        &lt;br&gt;
        &lt;h:commandButton id="submit" action="validated" value="Enter" /&gt;
    &lt;/h:form&gt;
&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div></div>
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>welcome.jsp</b></div><div class="codeContent">
<pre class="code-actionscript">&lt;%@ taglib uri="/WEB-INF/tld/myfaces-html.tld" prefix="h"%&gt;
&lt;%@ taglib uri="/WEB-INF/tld/myfaces_core.tld" prefix="f"%&gt;
&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%&gt;
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;title&gt;Welcome&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;f:view&gt;
&lt;h3&gt;&lt;h:outputText value="You have successfully logged <span class="code-keyword">in</span>:, " /&gt; &lt;h:outputText value="#{firstName.name} " /&gt; &lt;h:outputText value="#{lastName.LName}" /&gt;
&lt;h:outputText value="!" /&gt;&lt;/h3&gt;
&lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div></div>
<p>Lets now try to understand what each line of code represents.</p></li>
	<li>The first two lines in <b>login.jsp</b> defines two tag libraries
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>Code Snippet from login.jsp</b></div><div class="codeContent">
<pre class="code-actionscript">&lt;%@ taglib uri="/WEB-INF/tld/myfaces-html.tld" prefix="h" %&gt;
and
&lt;%@ taglib uri="/WEB-INF/tld/myfaces_core.tld" prefix="f" %&gt;</pre>
</div></div>
<p>These two sets of tags are defined by JSF. First one with the namespace  "h" is used to generate html views. Second one with the namespace "f" handles the core functionalities of JSF like type conversions, validations and listeners for input from user.</p></li>
	<li>The next few lines contains the usual html tags
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>Code Snippet from login.jsp</b></div><div class="codeContent">
<pre class="code-actionscript">&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
&lt;title&gt;Welcome to Apache Geronimo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;</pre>
</div></div></li>
	<li><b>&lt;f:view&gt;</b> &#45;- This tag represents the start of JSF code.</li>
	<li><div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>Code Snippet from login.jsp</b></div><div class="codeContent">
<pre class="code-actionscript">&lt;h:inputText id="firstName" value="#{firstName.name}" required="true"&gt;</pre>
</div></div>
<p>Represents the input tag. <b>id="firstName"</b> and <b>value="firstName.name"</b> comes from the Managed Bean. </p></li>
	<li>Using the Faces Configuration Editor, select <b>firstName</b> bean under <b>Managed Bean</b> tab. The Managed Bean Name is <b>firstName</b>. See the figure below.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/View3.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> 
This completes the implementation of View (V) in the application. The other tags <b>&lt;f:validateLength&gt;</b> and <b>&lt;h:commandButton&gt;</b> will be explained in the next section.</li>
</ol>


<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefinetheValidatorComponent"></a>Define the Validator Component</h1>
<p>The <b>&lt;f:validateLength minimum="4" maximum="10"/&gt;</b> defines the input text length to be minimum of 4 characters and maximum of 10 characters. This is the standard validation provided by core tag libraries. Other examples of validators are <b>Validate Long Range</b> tag, <b>Validate Double Range</b> tag etc. JSF also provides a Validator interface which can be implemented to create custom validators.</p>

<p>The code <b>&lt;h:message for="" style="color: red;"/&gt;</b> defines the error message. When the user inputs the controller Validates each of the inputs. If the inputs are invalid Controller displays the same page again with an error message for the errors. The <b>color:red</b> suggests that the error message will be displayed in red color.</p>

<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefineandimplementtheViewnavigationbyController%28C%29"></a>Define and implement the View navigation by Controller (C)</h1>
<p>This step uses the JSP page navigation in the order of user inputs and validation by controller. If all the inputs are valid than the controller performs the action as suggested by the HTML form. This action is submitted by the HTML form as a command button.<br clear="all" /> <br clear="all" />
The code in the input.jsp <b>&lt;h:commandButton id="submit" action="validated" value="Enter" /&gt;</b> checks to determine if all the inputs are valid. This is the button which submits the form to controller if all inputs are valid. In this case the <b>commandButton</b> tells the controller to execute the validated action if all the inputs are valid.<br clear="all" /> <br clear="all" />
The pages navigation in a JSF applicaiton is defined by faces-config.xml. Follow the steps before to define the pages navigation.<br clear="all" /> </p>
<ol>
	<li>Launch the Faces Configuration Editor by double-clicking on <b>faces-config.xml</b> <br clear="all" /> <br clear="all" /></li>
	<li>Select the <b>Navigation Rule</b> tab in the Configuration Editor. Under the Palette window select <b>Page</b>. This will select a <b>PageFlow Page</b> GUI object.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ViewController.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Drag the mouse over the Navigation Rule Window and click on the window. This will give a <b>Select JSP File</b> window. Select the <b>login.jsp</b> as shown in the figure and select <b>OK</b>.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ViewController2.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Similarly add the <b>welcome.jsp</b> page on the Navigation Rule window. See the figure below:<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ViewController3.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select <b>Link</b> from the Palette window and join the two pages as shown in the figure:<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ViewController4.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select the link between the two pages and go to properties view and set the value for <b>From Outcome</b> field as <b>validated</b>. This is because of the tag <b>&lt;h:commandButton id="submit" action="validated" value="Enter" /&gt;</b>. Once all the inputs are valid the action taken is <b>validated</b>. See the figure<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ViewController5.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Once done have a look the <b>Source</b> tab in the Faces Navigation Editor. A <b>&lt;navigation-rule&gt;</b> tag has been introduced into the faces-config.xml.&nbsp; This rule instructs the Controller that if all the inputs are valid from a form in the /pages/login.jsp, and the action is <b>validated</b>, then go to page <b>/pages/welcome.jsp</b>.<br clear="all" /> <br clear="all" />
<img src="/confluence/download/attachments/93311/ViewController6.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Now lets add a <b>index.jsp</b> under <b>WebContent</b> as follows:
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>index.jsp</b></div><div class="codeContent">
<pre class="code-actionscript">&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%&gt;
&lt;\!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;body&gt;
&lt;jsp:forward page="/pages/login.jsf" /&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div></div>
<p>What is the <b>login.jsf</b> in the <b>forward path</b> tag ?? If you look at the web.xml <b>&#42;.jsf</b> is used as the URL pattern to suggest that forwarded page be taken care by Java Server Faces Servlet.<br clear="all" />
This completes the Application Development process. The next step is to deploy and test the application.</p></li>
</ol>


<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DeployandTesttheapplication"></a>Deploy and Test the application</h1>
<p>Right-click on the project <b>SimpleJSF</b> and select <b>Run As --&gt; Run On Server</b>. This will deploy the sample on the Apache Geronimo Server and a Login page will be launched.<br clear="all" /> <br clear="all" /> 
<img src="/confluence/download/attachments/93311/Test.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" />
Lets give some sample inputs:<br clear="all" /> <br clear="all" />
<b>Sample Input #1</b>:<br clear="all" /> <br clear="all" />
<b>First Name:</b> Mickey<br/>
<b>Last Name:</b> Mouse<br clear="all" /> <br clear="all" />
Both the First Name as well as Last Name fulfills the validation rules, so this form will be submitted to controller and according to the navigation rule controller will launch a <b>welcome.jsp</b> page. <br clear="all" /> <br clear="all" /> 
<img src="/confluence/download/attachments/93311/Test2.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" />
<b>Sample Input #2:</b><br clear="all" /> <br clear="all" />
<b>First Name:</b> Mic<br/>
<b>Last Name:</b> Mouse<br clear="all" /> <br clear="all" />
First Name should be minimum of length=4 but in this case First Name is of length=3. In this case validation will fail and an error message will be generated by controller for First Name field.<br clear="all" /> <br clear="all" /> 
<img src="/confluence/download/attachments/93311/Test3.png" align="absmiddle" border="0" /><br clear="all" /> <br clear="all" /> <br clear="all" /> 
<b>Sample Input #3:</b><br clear="all" /> <br clear="all" />
<b>First Name:</b> Mickey<br/>
<b>Last Name:</b> Mo<br clear="all" /> <br clear="all" />
Last Name should be minimum of length=3 but in this case Last Name is of length=2. In this case validation will fail and an error message will be generated by controller for Last Name field.<br clear="all" /> <br clear="all" /> 
<img src="/confluence/download/attachments/93311/Test4.png" align="absmiddle" border="0" /></p></div>


</td></tr></table></div>
<p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td height="12" background="http://cwiki.apache.org/confluence/images/border/border_bottom.gif"><img src="http://cwiki.apache.org/confluence/images/border/spacer.gif" width="1" height="1" border="0"/></td>
    </tr>
</table>

<div class="smalltext">
    Powered by
    <a href="http://www.atlassian.com/software/confluence/default.jsp?clicked=footer" class="smalltext">Atlassian Confluence</a>
    (Version: 2.2.9 Build:#527 Sep 07, 2006)
    -
    <a href="http://jira.atlassian.com/secure/BrowseProject.jspa?id=10470" class="smalltext">Bug/feature request</a><br/>
    <br>
    <a href="http://cwiki.apache.org/confluence/users/viewnotifications.action">Unsubscribe or edit your notifications preferences</a>

</div>

</body>
</html>


Mime
View raw message