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.1: Developing a Simple Java Server Faces application (page edited)
Date Thu, 21 Feb 2008 21:16: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/GMOxDOC21">GMOxDOC21</a> :
            <a href="http://cwiki.apache.org/confluence/display/GMOxDOC21/Developing+a+Simple+Java+Server+Faces+application">Developing a Simple Java Server Faces application</a>
        </span>
    </div>

     <p>
        <a href="http://cwiki.apache.org/confluence/display/GMOxDOC21/Developing+a+Simple+Java+Server+Faces+application">Developing a Simple Java Server Faces application</a>
        has been edited by             <a href="http://cwiki.apache.org/confluence/display/~ashjain2@gmail.com">Ashish Jain</a>
            <span class="smallfont">(Feb 21, 2008)</span>.
     </p>
    
     <p>
                 <a href="http://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=76646&originalVersion=95&revisedVersion=96">(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/GMOxDOC21/Java+Server+Faces"><img border='0' align='middle' src='/confluence/images/icons/up_16.gif' width='8' height='8'></a></sup><a href="/confluence/display/GMOxDOC21/Java+Server+Faces">Java Server 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 Java Server 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>

<ul>
	<li>Sun JDK 5.0+ (J2SE 1.5)</li>
	<li>Eclipse 3.3.1.1 (Eclipse Classic package of Europa distribution), which is platform specific</li>
	<li>Web Tools Platform (WTP) 2.0.1</li>
	<li>Data Tools Platform (DTP) 1.5.1</li>
	<li>Eclipse Modeling Framework (EMF) 2.3.1</li>
	<li>Graphical Editing Framework (GEF) 3.3.1</li>
</ul>


<p>Details on installing eclipse are provided in the <a href="/confluence/display/GMOxDOC21/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" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (CreateWebProject.gif) not found.</span><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" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (WebProjectFields.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Check the box for JavaServerFaces and under the version tab select 1.2 as the version<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ProjectFileds.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Once done you can give default values for web module and Geronimo Deployment Plan. On the JSF capabilities window check the box and select new as shown in the figure<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (JSFCapabilities.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>The next window suggests to create JSF Implementation library. Give the library name as <b>JSFCustomLibrary</b> and add the following jars. Select Finish once done. See the figure below
	<ul>
		<li>&lt;GERONIMO_HOME&gt;\repository\commons-beanutils\commons-beanutils\1.6.1\commons-beanutils-1.6.1.jar</li>
		<li>&lt;GERONIMO_HOME&gt;\repository\commons-collections\commons-collections\3.1\commons-collections-3.1.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.2\myfaces-api-1.2.2.jar</li>
		<li>&lt;GERONIMO_HOME&gt;\repository\org\apache\myfaces\core\myfaces-impl\1.2.2\myfaces-impl-1.2.2.jar<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (JSFCustomLibrary.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	</ul>
	</li>
	<li>Check Deploy and modify the URL pattern to &#42;.jsf as shown in the figure. Select Finish.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (EclipseSetUpFinal.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" />
This finishes the setting up of Eclipse IDE for application development
<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefineandImplementtheapplicationModel%28M%29"></a>Define and Implement the application Model(M)</h1>
<p>Model 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></li>
	<li>Under the project explorer right click on the SimpleJSF project and create a new class<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (Model1.GIF) not found.</span><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 Finish once done<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (Model2.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Add the following code to the FirstName bean class<br clear="all" /> <br clear="all" /> <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 LastName 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 bean class.<br clear="all" /></p>
<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefineandimplementModel%28M%29objectstoController"></a>Define and implement Model(M) objects to Controller</h1></li>
	<li>In an JSF application controller is implemented by a configuration file WebContent/WEB-INF/faces-config.xml. Double Click on the file. This will open a Faces Configuration Editor.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ModelController.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select the ManagedBean tab in the editor. Choose Managed Bean of scope request and select Add.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ModelController2.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Using the <b>existing java class</b> option, select Browse. Give the search element as FirstName and select ok.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ModelController3.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select Finish on the next window. Similarly add the other bean LastName. Now select the Source tab in the Faces configuration Editor. It displays the bean components(Model) in the controller.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ModelController4.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" />
This completes the description of Model to Controller.<br clear="all" />
<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefineandimplementView%28V%29inapplication"></a>Define and implement View(V) in application</h1></li>
	<li>Right Click on WebContent and create a New Folder with the name pages<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (View.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Right Click on pages folder and create a jsp page login.jsp. Select Finish.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (View2.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Similarly create another jsp page welcome.jsp.</li>
	<li>Moving forward now we now have to include Tag Library Descriptors(TLD) in our application.<br/>
Geronimo comes packaged with the TLD's required for application. The TLD's can be found in
<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.2\myfaces-impl-1.2.2.jar\META-INF\myfaces-html.tld
and
&lt;GERONIMO_HOME&gt;\repository\org\apache\myfaces\core\myfaces-impl\1.2.2\myfaces-impl-1.2.2.jar\META-INF\myfaces_core.tld
</pre>
</div></div>
<p>#To add these two TLD's in the application, In Eclipse Under project Explorer right click on WEB-INF. Create a folder tld. Copy myfaces-html.tld and myfaces_core.tld to this folder.<br/>
#Next step is to populate login.jsp and welcome.jsp with data</p>
<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 login.jsp 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>&lt;f:view&gt;&#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. id="firstName" and value="#<div class="error"><span class="error">Unknown macro: {firstName.name}</span> </div>"<br/>
comes from the Managed Bean. Use the Faces Configuration Editor, Select firstName bean under Managed Bean tab. The <b>Managed Bean Name</b> is firstName. See the figure below<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (View3.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" />
This completes the implementation of View(V) in the application.<br/>
The other tags &lt;f:validateLength&gt; and &lt;h:commandButton&gt; will be explained in the next section.</p>
<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DefinetheValidatorComponent"></a>Define the Validator Component</h1>
<p>The &lt;f:validateLength minimum="4" maximum="10"/&gt; 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 Validate Long Range Tag, Validate Double Range Tag etc. JSF also provides a Validator interface which can be implemented to create custom validators.</p></li>
</ol>


<p>The code &lt;h:message for="" style="color: red;"/&gt; 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 color:red 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 suggests 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 for as a command button.<br clear="all" />
The code in the input.jsp <b>&lt;h:commandButton id="submit" action="validated" value="Enter" /&gt;</b> suggests that if all the inputs are valid. This is the button which submits the form to controller if all inputs are valid.<br clear="all" />
In this case the commandButton tells the controller to execute the validated action if all the inputs are valid.<br clear="all" />
The pages navigation in a JSF is defined by faces-config.xml. Follow the underlined steps to define the pages navigation.<br clear="all" /></p>
<ol>
	<li>Launch the Faces Configuration Editor by double clicking on faces-config.xml</li>
	<li>Select the Navigation tab in the Configuration Editor. Under the Palette window select Page. This will select a GUI object, page.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ViewController.GIF) not found.</span><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 Select JSP file window. Select login.jsp as shown in the figure and select OK.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ViewController2.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Similarly add the welcome.jsp page on the Navigation Rule window. See the figure below<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ViewController3.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select Link from the Palette window and join the two pages as shown in the figure<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ViewController4.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" /></li>
	<li>Select the link and 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 input are valid the action taken is validated. See the figure<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ViewController5.GIF) not found.</span><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 &lt;navigation-rule&gt; tag has been introduced into the faces-config.xml.&nbsp; This rule suggests the Controller that if you all the inputs are valid from a form in the /pages/login.jsp, and the action is 'validated', then go to page /pages/welcome.jsp.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (ViewController6.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" />
Now lets add a index.jsp under WEB-INF 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>Now what is this <b>login.jsf</b> in the forward path. If you look at the web.xml &#42;.jsf 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. Next step is to deploy and test the application.</p>
<h1><a name="DevelopingaSimpleJavaServerFacesapplication-DeployandTesttheapplication"></a>Deploy and Test the application</h1>
<p>Right Click on the project SimpleJSF and Select Run As-&gt; Run On Server. This will deploy the sample on Apache Geronimo Server and a Login page will be launched.<br clear="all" /> <br clear="all" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (Test.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" />
Lets give some sample inputs<br/>
<b>Sample Input1</b>:<br clear="all" />
<b>First Name:</b> Mickey<br/>
<b>Last Name:</b> Mouse<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 welcome.jsp page. <br clear="all" /> <br clear="all" /> <br clear="all" /> <span class="error">Unable to render embedded object: File (Test2.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" />
<b>Sample Input2:</b><br clear="all" />
<b>First Name:</b> Mic<br/>
<b>Last Name:</b> Mouse<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" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (Test3.GIF) not found.</span><br clear="all" /> <br clear="all" /> <br clear="all" />
<b>Sample Input3:</b><br clear="all" />
<b>First Name:</b> Mickey<br/>
<b>Last Name:</b> Mo<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" /> <br clear="all" />
<span class="error">Unable to render embedded object: File (Test4.GIF) not found.</span></p></li>
</ol>
</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