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 user interface with JSF (page edited)
Date Wed, 08 Apr 2009 06:37: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+user+interface+with+JSF">Developing user interface with JSF</a>
        </span>
    </div>

     <p>
        <a href="http://cwiki.apache.org/confluence/display/GMOxDOC22/Developing+user+interface+with+JSF">Developing user interface with JSF</a>
        has been edited by             <a href="http://cwiki.apache.org/confluence/display/~sophia">Ying Tang</a>
            <span class="smallfont">(Apr 07, 2009)</span>.
     </p>
    
     <p>
                 <a href="http://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=93318&originalVersion=14&revisedVersion=15">(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 class='ScrollbarPrevIcon'><a href="/confluence/display/GMOxDOC22/Developing+a+Simple+JavaServer+Faces+application"><img border='0' align='middle' src='/confluence/images/icons/back_16.gif' width='16' height='16'></a></td><td width='33%' class='ScrollbarPrevName'><a href="/confluence/display/GMOxDOC22/Developing+a+Simple+JavaServer+Faces+application">Developing a Simple JavaServer Faces application</a>&nbsp;</td><td width='33%' class='ScrollbarParent'><sup><a href="/confluence/display/GMOxDOC22/Developing+JavaServer+faces+applications"><img border='0' align='middle' src='/confluence/images/icons/up_16.gif' width='8' height='8'></a></sup><a href="/confluence/display/GMOxDOC22/Developing+JavaServer+faces+applications">Developing JavaServer faces applications</a></td><td width='33%' class='ScrollbarNextName'>&nbsp;</td></tr></table></div>

<p>This tutorial illustrates the following aspects of JSF.</p>

<ul>
	<li>Various UI components of JSF (Text box, Combo box, Select box, Radio button, submit button).</li>
	<li>Associating validations to UI components.</li>
	<li>Configuring navigation rules using eclipse wizard.</li>
	<li>Configuring JSF managed beans.</li>
	<li>Associating managed bean actions to events.</li>
	<li>Using JPA to persist the data captured in JSPs through managed beans.</li>
</ul>


<p>The tutorial is divided into the following sections.</p>
<div>
<ul>
  <li><a href='#DevelopinguserinterfacewithJSF-SettinguptheEclipseenvironment'>Setting up the Eclipse environment</a></li>
  <li><a href='#DevelopinguserinterfacewithJSF-CreatingWEBapplicationwithentities'>Creating WEB application with entities</a>
<ul>
  <li><a href='#DevelopinguserinterfacewithJSF-CreatingadynamicWebprojectanddefiningJSFcapabilities'>Creating a dynamic Web project and defining JSF capabilities</a></li>
  <li><a href='#DevelopinguserinterfacewithJSF-Implementingpersistencefortheapplication'>Implementing persistence for the application</a></li>
  <li><a href='#DevelopinguserinterfacewithJSF-DefiningUIcomponents'>Defining UI components</a></li>
  <li><a href='#DevelopinguserinterfacewithJSF-ConfiguringJSFmanagedbeansandassociatingmanagedbeanactionstoevents'>Configuring JSF managed beans and associating managed bean actions to events</a></li>
</ul></li>
  <li><a href='#DevelopinguserinterfacewithJSF-SettingupthedatabasetablesandtheDatasource'>Setting up the database tables and the Datasource</a></li>
  <li><a href='#DevelopinguserinterfacewithJSF-Deployingthe%28war%29application'>Deploying the (war) application</a></li>
  <li><a href='#DevelopinguserinterfacewithJSF-Runningtheapplication'>Running the application</a></li>
</ul></div>

<p>In order to develop, deploy and run the application, the following environment is required.</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>The entire application can be downloaded from this <span class="nobr"><a href="/confluence/download/attachments/93318/EmployeeWEB.war?version=1" title="EmployeeWEB.war attached to Developing user interface with JSF">link<sup><img class="rendericon" src="/confluence/images/icons/link_attachment_7.gif" height="7" width="7" align="absmiddle" alt="" border="0"/></sup></a></span>.</p>

<h2><a name="DevelopinguserinterfacewithJSF-SettinguptheEclipseenvironment"></a>Setting up the Eclipse environment</h2>

<ol>
	<li>Download Apache Geronimo and install it on the server. Look into <a href="/confluence/display/GMOxDOC22/Getting+and+installing+Geronimo" title="Getting and installing Geronimo">Getting and installing Geronimo</a> for instructions.</li>
	<li>Install the eclipse IDE and download geronimo eclipse plugin and install it on top of eclipse. Look into <a href="/confluence/display/GMOxDOC22/Installing+Geronimo+Eclipse+Plugin" title="Installing Geronimo Eclipse Plugin">Installing Geronimo Eclipse Plugin</a> for instructions.</li>
	<li>Create a runtime environment for Apache Geronimo in Eclipse. Look into <a href="/confluence/display/GMOxDOC22/Defining+Geronimo+server+runtimes+and+servers" title="Defining Geronimo server runtimes and servers">Defining Geronimo server runtimes and servers</a> for instructions to install a runtime for Apache Geronimo.</li>
</ol>


<h2><a name="DevelopinguserinterfacewithJSF-CreatingWEBapplicationwithentities"></a>Creating WEB application with entities</h2>
<p>This section is organized in the following steps:</p>
<h3><a name="DevelopinguserinterfacewithJSF-CreatingadynamicWebprojectanddefiningJSFcapabilities"></a>Creating a dynamic Web project and defining JSF capabilities</h3>
<ol>
	<li>Start the eclipse wizard and right click on the <em>Project Explorer</em> and click on the <b>New -&gt; Dynamic Web Project</b>
<br clear="all" />
<img src="/confluence/download/attachments/93318/1.jpg" align="absmiddle" border="0" /> </li>
	<li>Enter the project name as <em>EmployeeWEB</em> and click on the <b>Next</b> button.<br/>
<img src="/confluence/download/attachments/93318/2.jpg" align="absmiddle" border="0" /> </li>
	<li>On the <em>New Dynamic Web Project</em> wizard, check on the <b>Project Facet</b> checkboxes and select the <em>version</em> values as below screen shot, and click on the <b>Next</b> button.
<br clear="all" />
<img src="/confluence/download/attachments/93318/3.jpg" align="absmiddle" border="0" /></li>
	<li>On the <em>Web Module</em> wizard, make sure that <b>Generate Deployment Descriptor</b> is checked as below and click on the <b>Next</b> button.
<br clear="all" />
<img src="/confluence/download/attachments/93318/4.jpg" align="absmiddle" border="0" /></li>
	<li>On the <em>Geronimo Deployment Plan</em> wizard, provide the moduleId values as below screen shot and click on the <b>Next</b> button.<br/>
<img src="/confluence/download/attachments/93318/5.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>On the <em>JSF Capabilities</em> wizard, check the second radio button and click on the <b>New</b> button by the side of the combo box. This will open <em>Create JSF Implementation Library</em> wizard.</li>
	<li>Provide the <em>Library Name</em> as <b>MyJSFLibrary</b> and add the following jars by clicking on the <b>Add</b> button. Finally, click on the <b>Finish</b> button.
	<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.6\myfaces-api-1.2.2.jar</li>
		<li>&lt;geronimo_home&gt;\repository\org\apache\myfaces\core\myfaces-impl\1.2.6\myfaces-impl-1.2.2.jar<br/>
<img src="/confluence/download/attachments/93318/6.jpg" align="absmiddle" border="0" /> </li>
	</ul>
	</li>
	<li>Now, on the <em>JSF Capabilities</em> wizard, add the <em>URL Mapping Patterns</em> as <b>&#42;.jsf</b> and click on the <b>Finish</b> button.<br/>
<img src="/confluence/download/attachments/93318/7.jpg" align="absmiddle" border="0" /> <br clear="all" /></li>
	<li>This will create <b>EmployeeWEB</b> application in the <em>Project Explorer</em> as below screen shot.<br/>
<img src="/confluence/download/attachments/93318/8.jpg" align="absmiddle" border="0" /> <br clear="all" /></li>
	<li>Right click on the <b>WEB-INF</b> folder and navigate to <b>New -&gt; Folder</b> and create a folder by name <em>tld</em> as given in the screen shot below.<br/>
<img src="/confluence/download/attachments/93318/9.jpg" align="absmiddle" border="0" /> <br clear="all" /></li>
	<li>Copy <tt>myfaces_core.tld</tt> and <tt>myfaces-html.tld</tt> files into the <em>tld</em> folder. These <tt>*.tld</tt> files are available in the <tt>myfaces-impl-1.2.6.jar</tt> file.</li>
	<li>We are going to use JPA to connect to EmployeeDB database created in the embedded Derby database. JPA uses <tt>persistence.xml</tt> file for configuration. Create a <em>META-INF</em> folder in the <em>EmployeeWEB -&gt; build -&gt; classes</em> folder in the <em>Project Explorer</em>.  The contents of the <tt>persistence.xml</tt> are as follows.<br/>
<img src="/confluence/download/attachments/93318/10.jpg" align="absmiddle" border="0" />
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>persistence.xml</b></div><div class="codeContent">
<pre class="code-xml"><span class="code-tag">&lt;?xml version=<span class="code-quote">"1.0"</span> encoding=<span class="code-quote">"UTF-8"</span> ?&gt;</span>
&lt;persistence xmlns=<span class="code-quote">"http://java.sun.com/xml/ns/persistence"</span>
 <span class="code-keyword">xmlns:xsi</span>=<span class="code-quote">"http://www.w3.org/2001/XMLSchema-instance"</span>
 xsi:schemaLocation="http://java.sun.com/xml/ns/persistence 
 http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd<span class="code-quote">" version="</span>1.0"&gt;

 <span class="code-tag">&lt;persistence-unit name=<span class="code-quote">"Employee"</span> transaction-type=<span class="code-quote">"JTA"</span>&gt;</span>  
  <span class="code-tag">&lt;provider&gt;</span>org.apache.openjpa.persistence.PersistenceProviderImpl<span class="code-tag">&lt;/provider&gt;</span>
  <span class="code-tag">&lt;non-jta-data-source&gt;</span>EmployeeDS<span class="code-tag">&lt;/non-jta-data-source&gt;</span>
 <span class="code-tag">&lt;/persistence-unit&gt;</span>
	
<span class="code-tag">&lt;/persistence&gt;</span></pre>
</div></div></li>
</ol>


<h3><a name="DevelopinguserinterfacewithJSF-Implementingpersistencefortheapplication"></a>Implementing persistence for the application</h3>
<ol>
	<li>Right click on the <b>EmployeeWEB</b> and navigate to <b>New -&gt; Class</b> and create <tt>Employee.java</tt> as given in the below screen shot. Click on the <b>Finish</b> button after providing the values.<br/>
<img src="/confluence/download/attachments/93318/11.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>The contents of the <tt>com.jpa.sample.Employee</tt> are as follows. This is the entity class used with JPA for persistence.
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>com.jpa.sample.Employee</b></div><div class="codeContent">
<pre class="code-java"><span class="code-keyword">package</span> com.jpa.sample;

<span class="code-keyword">import</span> javax.persistence.Entity;
<span class="code-keyword">import</span> javax.persistence.Id;
<span class="code-keyword">import</span> javax.persistence.Table;

@Entity
@Table(name = <span class="code-quote">"EMPLOYEE"</span>)
<span class="code-keyword">public</span> class Employee {

 @Id
 <span class="code-keyword">public</span> <span class="code-object">int</span> empNo;
 <span class="code-keyword">public</span> <span class="code-object">String</span> empName;
 <span class="code-keyword">public</span> <span class="code-object">String</span> deptName;
 <span class="code-keyword">public</span> <span class="code-object">String</span> sex;
 <span class="code-keyword">public</span> <span class="code-object">double</span> salary;
 <span class="code-keyword">public</span> <span class="code-object">String</span> band;

 <span class="code-keyword">public</span> <span class="code-object">int</span> getEmpNo() {
  <span class="code-keyword">return</span> empNo;
 }

 <span class="code-keyword">public</span> void setEmpNo(<span class="code-object">int</span> empNo) {
  <span class="code-keyword">this</span>.empNo = empNo;
 }

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

 <span class="code-keyword">public</span> void setEmpName(<span class="code-object">String</span> empName) {
  <span class="code-keyword">this</span>.empName = empName;
 }

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

 <span class="code-keyword">public</span> void setDeptName(<span class="code-object">String</span> deptName) {
  <span class="code-keyword">this</span>.deptName = deptName;
 }

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

 <span class="code-keyword">public</span> void setSex(<span class="code-object">String</span> sex) {
  <span class="code-keyword">this</span>.sex = sex;
 }

 <span class="code-keyword">public</span> <span class="code-object">double</span> getSalary() {
  <span class="code-keyword">return</span> salary;
 }

 <span class="code-keyword">public</span> void setSalary(<span class="code-object">double</span> salary) {
  <span class="code-keyword">this</span>.salary = salary;
 }

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

 <span class="code-keyword">public</span> void setBand(<span class="code-object">String</span> band) {
  <span class="code-keyword">this</span>.band = band;
 }

}</pre>
</div></div></li>
	<li>Similarly, create <tt>sample.jsf.Employee</tt>. The contents of the class are as follows. This is the managed bean used by JSF.
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>sample.jsf.Employee</b></div><div class="codeContent">
<pre class="code-java"><span class="code-keyword">package</span> sample.jsf;

<span class="code-keyword">import</span> java.util.ArrayList;

<span class="code-keyword">import</span> javax.faces.event.ActionEvent;
<span class="code-keyword">import</span> javax.faces.model.SelectItem;
<span class="code-keyword">import</span> javax.naming.Context;
<span class="code-keyword">import</span> javax.naming.InitialContext;
<span class="code-keyword">import</span> javax.persistence.EntityManager;
<span class="code-keyword">import</span> javax.persistence.PersistenceContext;
<span class="code-keyword">import</span> javax.transaction.UserTransaction;

<span class="code-keyword">public</span> class Employee {

 <span class="code-keyword">public</span> <span class="code-object">int</span> empNo;
 <span class="code-keyword">public</span> <span class="code-object">String</span> empName;
 <span class="code-keyword">public</span> <span class="code-object">String</span> deptName;
 <span class="code-keyword">public</span> <span class="code-object">String</span> sex;
 <span class="code-keyword">public</span> <span class="code-object">double</span> salary;
 <span class="code-keyword">public</span> <span class="code-object">String</span> band;
 ArrayList&lt;SelectItem&gt; deptOptions;

 @PersistenceContext    
 <span class="code-keyword">private</span> EntityManager em;

 <span class="code-keyword">public</span> Employee(){

  deptOptions = <span class="code-keyword">new</span> ArrayList&lt;SelectItem&gt;();
  
  SelectItem option = <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"Inventory"</span>, <span class="code-quote">"Inventory"</span>);
  deptOptions.add(option);

  option = <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"Production"</span>, <span class="code-quote">"Production"</span>);
  deptOptions.add(option);

  option = <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"Accounts"</span>, <span class="code-quote">"Accounts"</span>);
  deptOptions.add(option);

  option = <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"Finance"</span>, <span class="code-quote">"Finance"</span>);
  deptOptions.add(option);

  option = <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"Marketing"</span>, <span class="code-quote">"Marketing"</span>);
  deptOptions.add(option);

  option = <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"IncomeTax"</span>, <span class="code-quote">"IncomeTax"</span>);
  deptOptions.add(option);

  option = <span class="code-keyword">new</span> SelectItem(<span class="code-quote">"Engineering"</span>, <span class="code-quote">"Engineering"</span>);
  deptOptions.add(option);

 }

 <span class="code-keyword">public</span> <span class="code-object">int</span> getEmpNo() {
  <span class="code-keyword">return</span> empNo;
 }

 <span class="code-keyword">public</span> void setEmpNo(<span class="code-object">int</span> empNo) {
  <span class="code-keyword">this</span>.empNo = empNo;
 }

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

 <span class="code-keyword">public</span> void setEmpName(<span class="code-object">String</span> empName) {
  <span class="code-keyword">this</span>.empName = empName;
 }

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

 <span class="code-keyword">public</span> void setDeptName(<span class="code-object">String</span> deptName) {
  <span class="code-keyword">this</span>.deptName = deptName;
 }

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

 <span class="code-keyword">public</span> void setSex(<span class="code-object">String</span> sex) {
  <span class="code-keyword">this</span>.sex = sex;
 }

 <span class="code-keyword">public</span> <span class="code-object">double</span> getSalary() {
 <span class="code-keyword">return</span> salary;
 }

 <span class="code-keyword">public</span> void setSalary(<span class="code-object">double</span> salary) {
  <span class="code-keyword">this</span>.salary = salary;
 }

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

 <span class="code-keyword">public</span> void setBand(<span class="code-object">String</span> band) {
  <span class="code-keyword">this</span>.band = band;
 }

 <span class="code-keyword">public</span> void addEmployee(ActionEvent event){

  com.jpa.sample.Employee employeeDup = 
    em.find(com.jpa.sample.Employee.class, <span class="code-keyword">this</span>.empNo);
  
  <span class="code-keyword">if</span>(employeeDup != <span class="code-keyword">null</span>)
    <span class="code-keyword">throw</span> <span class="code-keyword">new</span> IllegalArgumentException
    ("Message : sample.jsf.Employee :
      Employee Already Exits (<span class="code-quote">"+<span class="code-keyword">this</span>.empNo+"</span>)");

  com.jpa.sample.Employee employee = 
   <span class="code-keyword">new</span> com.jpa.sample.Employee();

  employee.setBand(<span class="code-keyword">this</span>.band);
  employee.setDeptName(<span class="code-keyword">this</span>.deptName);
  employee.setEmpName(<span class="code-keyword">this</span>.empName);
  employee.setEmpNo(<span class="code-keyword">this</span>.empNo);
  employee.setSalary(<span class="code-keyword">this</span>.salary);
  employee.setSex(<span class="code-keyword">this</span>.sex);

  <span class="code-keyword">try</span>{

   Context ctx = <span class="code-keyword">new</span> InitialContext();
   UserTransaction ut = 
       (UserTransaction)ctx.lookup(<span class="code-quote">"java:comp/UserTransaction"</span>);
   ut.begin();
   em.persist(employee);
   ut.commit();

  }<span class="code-keyword">catch</span> (Exception e){
   <span class="code-keyword">throw</span> <span class="code-keyword">new</span> IllegalArgumentException
    (<span class="code-quote">"Message : sample.jsf.Employee : Exception :"</span>+e);
  }


}

 <span class="code-keyword">public</span> void editEmployee(ActionEvent event){

 <span class="code-keyword">try</span>{

  Context ctx = <span class="code-keyword">new</span> InitialContext();
  UserTransaction ut = (UserTransaction)
         ctx.lookup(<span class="code-quote">"java:comp/UserTransaction"</span>);
  ut.begin();
  com.jpa.sample.Employee employee = 
    em.find(com.jpa.sample.Employee.class, <span class="code-keyword">this</span>.empNo);
  employee.setBand(<span class="code-keyword">this</span>.band);
  employee.setDeptName(<span class="code-keyword">this</span>.deptName);
  employee.setEmpName(<span class="code-keyword">this</span>.empName);
  employee.setEmpNo(<span class="code-keyword">this</span>.empNo);
  employee.setSalary(<span class="code-keyword">this</span>.salary);
  employee.setSex(<span class="code-keyword">this</span>.sex);
  ut.commit();
 }<span class="code-keyword">catch</span> (Exception e){
  <span class="code-keyword">throw</span> <span class="code-keyword">new</span> IllegalArgumentException
  (<span class="code-quote">"Message : sample.jsf.Employee : Exception :"</span>+e);
 }

 }

 <span class="code-keyword">public</span> ArrayList&lt;SelectItem&gt; getDeptOptions() {
  <span class="code-keyword">return</span> deptOptions;
 }

 <span class="code-keyword">public</span> void setDeptOptions(ArrayList&lt;SelectItem&gt; deptOptions) {
  <span class="code-keyword">this</span>.deptOptions = deptOptions;
 }

 <span class="code-keyword">public</span> void retrieveEmployee(ActionEvent event){

  com.jpa.sample.Employee employeeDup = 
   em.find(com.jpa.sample.Employee.class, <span class="code-keyword">this</span>.empNo);

  <span class="code-keyword">if</span>(employeeDup == <span class="code-keyword">null</span>)
  <span class="code-keyword">throw</span> <span class="code-keyword">new</span> IllegalArgumentException
   (<span class="code-quote">"Message : sample.jsf.Employee : Employee does not exit ("</span>+<span class="code-keyword">this</span>.empNo+<span class="code-quote">")"</span>);

  <span class="code-keyword">this</span>.setBand(employeeDup.getBand());
  <span class="code-keyword">this</span>.setDeptName(employeeDup.getDeptName());
  <span class="code-keyword">this</span>.setEmpName(employeeDup.getEmpName());
  <span class="code-keyword">this</span>.setEmpNo(employeeDup.getEmpNo());
  <span class="code-keyword">this</span>.setSalary(employeeDup.getSalary());
  <span class="code-keyword">this</span>.setSex(employeeDup.getSex());

 }

}</pre>
</div></div></li>
</ol>


<h3><a name="DevelopinguserinterfacewithJSF-DefiningUIcomponents"></a>Defining UI components</h3>
<ol>
	<li>Right click on the <b>EmployeeWEB</b> project and create <tt>index.jsp</tt> as follows.<br/>
<img src="/confluence/download/attachments/93318/12.jpg" align="absmiddle" border="0" />
<br clear="all" />
The contents of the <tt>index.jsp</tt> are 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;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;body&gt;
  &lt;a href="/EmployeeWEB/addEmployee.jsf"&gt;
    &lt;font size=4 color='blue'&gt;
      Add employee details
    &lt;/font&gt;&lt;/a&gt; &lt;br/&gt;

  &lt;a href="/EmployeeWEB/RetrieveEmployee.jsf"&gt;
  &lt;font size=4 color='blue'&gt;
   Edit employee details
  &lt;/font&gt;&lt;/a&gt; &lt;br/&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
</div></div></li>
	<li>Similarly, create <tt>addEmployee.jsp</tt> and the contents are as follows.
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>addEmployee.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;%@ page language="java" %&gt;

&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;%
<span class="code-object">String</span> path = request.getContextPath();
<span class="code-object">String</span> basePath = request.getScheme()+"://"
 +request.getServerName()+":"+request.getServerPort()+path+"/";
%&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;base href="&lt;%=basePath%&gt;"&gt;

&lt;script type="text/javascript"&gt;

&lt;/script&gt;
&lt;title&gt;Add employee details&lt;/title&gt;
&lt;/head&gt; 
&lt;body&gt;

&lt;f:view&gt; 
 &lt;h:form&gt;

 &lt;h:inputHidden id="id" value="#{Employee.empNo}"/&gt;

 &lt;h:panelGrid columns="2" border="0"&gt;

 &lt;h:outputText value="Employee No :" /&gt;

 &lt;h:inputText id="empNo" 
  value="#{Employee.empNo}" required="true"&gt;
 &lt;f:validateLongRange maximum="100000" minimum="1"/&gt;				     
 &lt;/h:inputText&gt;


 &lt;h:outputText value="Employee Name :" /&gt;

 &lt;h:inputText id="empName" 
 value="#{Employee.empName}" required="true"&gt;
 &lt;f:validateLength maximum="100" minimum="2"/&gt;					     
 &lt;/h:inputText&gt;

 &lt;h:outputText value="Department Name :" /&gt;

 &lt;h:selectOneMenu id="deptName" value="#{Employee.deptName}" 
  required="true" &gt;
  &lt;f:selectItems value="#{Employee.deptOptions}" /&gt;
 &lt;/h:selectOneMenu&gt;

 &lt;h:outputText value="Sex :" /&gt;

 &lt;h:selectOneRadio id="sex" value="#{Employee.sex}" required="true"&gt;
 &lt;f:selectItem id="male" itemLabel="Male" itemValue="male" /&gt;
 &lt;f:selectItem id="female" itemLabel="Female" itemValue="female" /&gt;
 &lt;/h:selectOneRadio&gt;

 &lt;h:outputText value="Salary :" /&gt;

 &lt;h:inputText id="salary" 
 value="#{Employee.salary}" required="true"&gt;
 &lt;f:validateDoubleRange minimum="1000.00" maximum="10000000.00"/&gt;					     
 &lt;/h:inputText&gt;

  &lt;h:outputText value="Employee Band :" /&gt;

  &lt;h:selectOneListbox id="band" value="#{Employee.band}" size="3" required="true"&gt;
  &lt;f:selectItem id="bandA" itemLabel="Band A" itemValue="A" /&gt;
  &lt;f:selectItem id="bandB" itemLabel="Band B" itemValue="B" /&gt;
 &lt;f:selectItem id="bandC" itemLabel="Band C" itemValue="C" /&gt;
 &lt;f:selectItem id="bandD" itemLabel="Band D" itemValue="D" /&gt;
  &lt;f:selectItem id="bandE" itemLabel="Band E" itemValue="E" /&gt;
  &lt;f:selectItem id="bandF" itemLabel="Band F" itemValue="F" /&gt;
  &lt;/h:selectOneListbox&gt;


  &lt;/h:panelGrid&gt;

  &lt;h:messages id="errors" 
  style="color:red;font-weight:bold" 
  layout="table" /&gt;

  &lt;h:commandButton value="Save" 
   action="saveEmployee" 
   actionListener="#{Employee.addEmployee}" /&gt;


  &lt;/h:form&gt;

 &lt;/f:view&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
</div></div></li>
	<li>Similarly, create <tt>editEmployee.jsp</tt> and the contents are as follows.
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>editEmployee.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;%@ page language="java" %&gt;

&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;%
<span class="code-object">String</span> path = request.getContextPath();
<span class="code-object">String</span> basePath = request.getScheme()+"://"+
  request.getServerName()+":"+
  request.getServerPort()+path+"/";
%&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;base href="&lt;%=basePath%&gt;"&gt;
&lt;title&gt;Edit employee details&lt;/title&gt;
&lt;/head&gt; 
&lt;body&gt;

 &lt;f:view&gt; 
  &lt;h:form&gt;

   &lt;h:inputHidden id="id" value="#{Employee.empNo}"/&gt;

  &lt;h:panelGrid columns="2" border="0"&gt;

  &lt;h:outputText value="Employee No :" /&gt;

 &lt;h:inputText id="empNo" disabled="true"
  value="#{Employee.empNo}" required="true"&gt;
  &lt;f:validateLongRange maximum="100000" minimum="1"/&gt;					     
  &lt;/h:inputText&gt;


  &lt;h:outputText value="Employee Name :" /&gt;

  &lt;h:inputText id="empName" 
   value="#{Employee.empName}" required="true"&gt;
    &lt;f:validateLength maximum="100" minimum="2"/&gt;						     
  &lt;/h:inputText&gt;

  &lt;h:outputText value="Department Name :" /&gt;

  &lt;h:selectOneMenu id="deptName" value="#{Employee.deptName}" required="true"&gt;
   &lt;f:selectItems value="#{Employee.deptOptions}" /&gt;
  &lt;/h:selectOneMenu&gt;

  &lt;h:outputText value="Sex :" /&gt;

  &lt;h:selectOneRadio id="sex" value="#{Employee.sex}" required="true"&gt;
   &lt;f:selectItem id="male" itemLabel="Male" itemValue="male" /&gt;
   &lt;f:selectItem id="female" itemLabel="Female" itemValue="female" /&gt;
  &lt;/h:selectOneRadio&gt;

  &lt;h:outputText value="Salary :" /&gt;

  &lt;h:inputText id="salary" 
    value="#{Employee.salary}" required="true"&gt;
    &lt;f:validateDoubleRange minimum="1000.00" maximum="10000000.00"/&gt;	
  &lt;/h:inputText&gt;

   &lt;h:outputText value="Employee Band :" /&gt;

  &lt;h:selectOneListbox id="band" value="#{Employee.band}" 
     size="3" required="true"&gt;
   &lt;f:selectItem id="bandA" itemLabel="Band A" itemValue="A" /&gt;
   &lt;f:selectItem id="bandB" itemLabel="Band B" itemValue="B" /&gt;
   &lt;f:selectItem id="bandC" itemLabel="Band C" itemValue="C" /&gt;
   &lt;f:selectItem id="bandD" itemLabel="Band D" itemValue="D" /&gt;
   &lt;f:selectItem id="bandE" itemLabel="Band E" itemValue="E" /&gt;
  &lt;f:selectItem id="bandF" itemLabel="Band F" itemValue="F" /&gt;
  &lt;/h:selectOneListbox&gt;


  &lt;/h:panelGrid&gt;

  &lt;h:messages id="errors" 
    style="color:red;font-weight:bold" 
   layout="table" /&gt;

   &lt;h:commandButton value="Save" 
   action="saveEmployee" 
   actionListener="#{Employee.editEmployee}"  /&gt;


   &lt;/h:form&gt;
  &lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div></div></li>
	<li>Similarly, create <tt>RetrieveEmployee.jsp</tt> and the contents are as follows.
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>RetrieveEmployee.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;%@ page language="java" %&gt;

&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;%
<span class="code-object">String</span> path = request.getContextPath();
<span class="code-object">String</span> basePath = request.getScheme()+"://"+
request.getServerName()+":"+request.getServerPort()+path+"/";
%&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;base href="&lt;%=basePath%&gt;"&gt;
&lt;title&gt;Add employee details&lt;/title&gt;
&lt;/head&gt; 
&lt;body&gt;

 &lt;f:view&gt; 
  &lt;h:form&gt;
   &lt;h:panelGrid columns="2" border="0"&gt;

  &lt;h:outputText value="Employee No :" /&gt;

 &lt;h:inputText id="empNo" 
  value="#{Employee.empNo}"&gt;
  &lt;/h:inputText&gt;

  &lt;/h:panelGrid&gt;

&lt;h:messages id="errors" 
style="color:red;font-weight:bold" 
layout="table" /&gt;

&lt;h:commandButton value="Retrieve" 
action="retrieveEmployee" 
actionListener="#{Employee.retrieveEmployee}" /&gt;

&lt;h:commandButton value="Cancel" 
action="cancel"/&gt;


  &lt;/h:form&gt;
 &lt;/f:view&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
</div></div></li>
	<li>Open the <tt>geronimo-web.xml</tt> and replace the existing contents with the following contents. We explain the contents later when creating the datasource.
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>geronimo-web.xml</b></div><div class="codeContent">
<pre class="code-xml"><span class="code-tag">&lt;?xml version=<span class="code-quote">"1.0"</span> encoding=<span class="code-quote">"UTF-8"</span>?&gt;</span>

&lt;web-app xmlns=<span class="code-quote">"http://geronimo.apache.org/xml/ns/j2ee/web-2.0.1"</span> 
 <span class="code-keyword">xmlns:naming</span>=<span class="code-quote">"http://geronimo.apache.org/xml/ns/naming-1.2"</span> 
  <span class="code-keyword">xmlns:sec</span>=<span class="code-quote">"http://geronimo.apache.org/xml/ns/security-2.0"</span> 
  <span class="code-keyword">xmlns:sys</span>=<span class="code-quote">"http://geronimo.apache.org/xml/ns/deployment-1.2"</span>&gt;
 
  <span class="code-tag">&lt;sys:environment&gt;</span>
   <span class="code-tag">&lt;sys:moduleId&gt;</span>
    <span class="code-tag">&lt;sys:groupId&gt;</span>EmployeeJSF<span class="code-tag">&lt;/sys:groupId&gt;</span>
    <span class="code-tag">&lt;sys:artifactId&gt;</span>WEB<span class="code-tag">&lt;/sys:artifactId&gt;</span>
    <span class="code-tag">&lt;sys:version&gt;</span>1.0<span class="code-tag">&lt;/sys:version&gt;</span>
    <span class="code-tag">&lt;sys:type&gt;</span>car<span class="code-tag">&lt;/sys:type&gt;</span>
  <span class="code-tag">&lt;/sys:moduleId&gt;</span>

 <span class="code-tag">&lt;dependencies&gt;</span>
  <span class="code-tag">&lt;dependency&gt;</span>
   <span class="code-tag">&lt;groupId&gt;</span>console.dbpool<span class="code-tag">&lt;/groupId&gt;</span>
   <span class="code-tag">&lt;artifactId&gt;</span>EmployeeDS<span class="code-tag">&lt;/artifactId&gt;</span>
  <span class="code-tag">&lt;/dependency&gt;</span>
 <span class="code-tag">&lt;/dependencies&gt;</span>

 <span class="code-tag">&lt;/sys:environment&gt;</span>

 <span class="code-tag">&lt;context-root&gt;</span>/EmployeeWEB<span class="code-tag">&lt;/context-root&gt;</span>
<span class="code-tag">&lt;/web-app&gt;</span></pre>
</div></div></li>
</ol>


<h3><a name="DevelopinguserinterfacewithJSF-ConfiguringJSFmanagedbeansandassociatingmanagedbeanactionstoevents"></a>Configuring JSF managed beans and associating managed bean actions to events</h3>
<ol>
	<li>Click on the <tt>faces-config.xml</tt> to open <em>Faces Configuration Editor</em>.<br/>
<img src="/confluence/download/attachments/93318/13.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <em>ManagedBean</em> tab below and Click on the <b>Add</b> button. This will open <em>New Managed Bean Wizard</em>.<br/>
<img src="/confluence/download/attachments/93318/14.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <b>Browse</b> button and search for <tt>sample.jsf.Employee</tt> class and click on the <b>OK</b> button.<br/>
<img src="/confluence/download/attachments/93318/15.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <b>Next</b> button on the <em>New Managed Bean Wizard</em>. On the next screen, select <em>Scope</em> as <em>request</em> and click on the <b>Next</b> button.<br/>
<img src="/confluence/download/attachments/93318/16.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <b>Next</b> button and finally, click on the <b>Finish</b> button. This will bring up the following screen shot as below.<br/>
<img src="/confluence/download/attachments/93318/17.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <em>Navigation Rule</em> tab and move the mouse over <em>Palette</em> to bring it to the front.<br/>
<img src="/confluence/download/attachments/93318/18.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <b>Page</b> and move the mouse over main area and click once. This will bring up <em>Select JSP File</em> wizard. Select the <b>index.jsp</b> and click on the <b>OK</b> button.<br/>
<img src="/confluence/download/attachments/93318/19.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Similarly, add other JSPs also to the main area as follows.<br/>
<img src="/confluence/download/attachments/93318/20.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Bring the <em>Palette</em> to the front and click on the <b>Link</b>.
	<ul>
		<li>Place the mouse on <tt>addEmployee.jsp</tt> on the main area and click once and move it to <tt>index.jsp</tt> and click once.</li>
		<li>Similarly, click the mouse over <tt>RetrieveEmployee.jsp</tt> and move the mouse to <tt>index.jsp</tt> and click once.</li>
		<li>Click the mouse over <tt>RtrieveEmployee.jsp</tt> and move the mouse over <tt>editEmployee.jsp</tt> and click once.</li>
		<li>Click the mouse over <tt>editEmployee.jsp</tt> and move the mouse over <tt>RetrieveEmployee.jsp</tt> and click once.<br/>
The above actions create navigation rules and look like the screen shot below.<br/>
<img src="/confluence/download/attachments/93318/21.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	</ul>
	</li>
	<li>Press the escape button once and click on the link between <tt>addEmployee.jsp</tt> and <tt>index.jsp</tt>. On the <em>Properties</em> window at the bottom, go to the <em>From Outcome</em> textbox and provide the value as <em>saveEmployee</em>.<br/>
<img src="/confluence/download/attachments/93318/22.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Similarly, Click on the link between <tt>RetrieveEmployee.jsp</tt> and <tt>index.jsp</tt>, and on the <em>Properties</em> window at the bottom, go to the <em>From Outcome</em> textbox and provide the value as <em>cancel</em>.</li>
	<li>Similarly, Click on the link between <tt>RetrieveEmployee.jsp</tt> and <tt>editEmployee.jsp</tt>, and on the <em>Properties</em> window at the bottom, go to the <em>From Outcome</em> textbox and provide the value as <em>retrieveEmployee</em>.</li>
	<li>Similarly, Click on the link between <tt>editEmployee.jsp</tt> and <tt>RetrieveEmployee.jsp</tt>, and on the <em>Properties</em> window at the bottom, go to the <em>From Outcome</em> textbox and provide the value as <em>saveEmployee</em>.</li>
	<li>Click on <em>Source</em> to view the XML content generated out of these navigations rules and configuration. The contents should be as follows.
<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>faces-config.xml</b></div><div class="codeContent">
<pre class="code-xml"><span class="code-tag">&lt;?xml version=<span class="code-quote">"1.0"</span> encoding=<span class="code-quote">"UTF-8"</span>?&gt;</span>

&lt;faces-config
 xmlns=<span class="code-quote">"http://java.sun.com/xml/ns/javaee"</span>
 <span class="code-keyword">xmlns:xsi</span>=<span class="code-quote">"http://www.w3.org/2001/XMLSchema-instance"</span>
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
 version=<span class="code-quote">"1.2"</span>&gt;

  <span class="code-tag">&lt;navigation-rule&gt;</span>
   <span class="code-tag">&lt;description&gt;</span>Add Employee<span class="code-tag">&lt;/description&gt;</span>
   <span class="code-tag">&lt;from-view-id&gt;</span>/addEmployee.jsp<span class="code-tag">&lt;/from-view-id&gt;</span>
   <span class="code-tag">&lt;navigation-case&gt;</span>
    <span class="code-tag">&lt;from-outcome&gt;</span>saveEmployee<span class="code-tag">&lt;/from-outcome&gt;</span>
    <span class="code-tag">&lt;to-view-id&gt;</span>/index.jsp<span class="code-tag">&lt;/to-view-id&gt;</span>
   <span class="code-tag">&lt;/navigation-case&gt;</span>
 <span class="code-tag">&lt;/navigation-rule&gt;</span>


  <span class="code-tag">&lt;navigation-rule&gt;</span>
   <span class="code-tag">&lt;description&gt;</span>Retrieve Employee<span class="code-tag">&lt;/description&gt;</span>
   <span class="code-tag">&lt;from-view-id&gt;</span>/RetrieveEmployee.jsp<span class="code-tag">&lt;/from-view-id&gt;</span>
   <span class="code-tag">&lt;navigation-case&gt;</span>
    <span class="code-tag">&lt;from-outcome&gt;</span>retrieveEmployee<span class="code-tag">&lt;/from-outcome&gt;</span>
    <span class="code-tag">&lt;to-view-id&gt;</span>/editEmployee.jsp<span class="code-tag">&lt;/to-view-id&gt;</span>
   <span class="code-tag">&lt;/navigation-case&gt;</span>
 <span class="code-tag">&lt;/navigation-rule&gt;</span>

  <span class="code-tag">&lt;navigation-rule&gt;</span>
    <span class="code-tag">&lt;description&gt;</span>Retrieve Employee<span class="code-tag">&lt;/description&gt;</span>
    <span class="code-tag">&lt;from-view-id&gt;</span>/RetrieveEmployee.jsp<span class="code-tag">&lt;/from-view-id&gt;</span>
    <span class="code-tag">&lt;navigation-case&gt;</span>
     <span class="code-tag">&lt;from-outcome&gt;</span>cancel<span class="code-tag">&lt;/from-outcome&gt;</span>
      <span class="code-tag">&lt;to-view-id&gt;</span>/index.jsp<span class="code-tag">&lt;/to-view-id&gt;</span>
     <span class="code-tag">&lt;/navigation-case&gt;</span>
 <span class="code-tag">&lt;/navigation-rule&gt;</span>

  <span class="code-tag">&lt;navigation-rule&gt;</span>
    <span class="code-tag">&lt;description&gt;</span>Edit Employee<span class="code-tag">&lt;/description&gt;</span>
    <span class="code-tag">&lt;from-view-id&gt;</span>/editEmployee.jsp<span class="code-tag">&lt;/from-view-id&gt;</span>
    <span class="code-tag">&lt;navigation-case&gt;</span>
      <span class="code-tag">&lt;from-outcome&gt;</span>saveEmployee<span class="code-tag">&lt;/from-outcome&gt;</span>
      <span class="code-tag">&lt;to-view-id&gt;</span>/RetrieveEmployee.jsp<span class="code-tag">&lt;/to-view-id&gt;</span>
 <span class="code-tag">&lt;/navigation-case&gt;</span>
<span class="code-tag">&lt;/navigation-rule&gt;</span>


  <span class="code-tag">&lt;managed-bean&gt;</span> 
    <span class="code-tag">&lt;description&gt;</span>
     Employee Bean
   <span class="code-tag">&lt;/description&gt;</span>
   <span class="code-tag">&lt;managed-bean-name&gt;</span>Employee<span class="code-tag">&lt;/managed-bean-name&gt;</span>
   <span class="code-tag">&lt;managed-bean-class&gt;</span>sample.jsf.Employee<span class="code-tag">&lt;/managed-bean-class&gt;</span>
   <span class="code-tag">&lt;managed-bean-scope&gt;</span>request<span class="code-tag">&lt;/managed-bean-scope&gt;</span> 
  <span class="code-tag">&lt;/managed-bean&gt;</span>


<span class="code-tag">&lt;/faces-config&gt;</span></pre>
</div></div>
<p>This finishes the WEB application creation and JSF configuration. Export the <em>EmployeeWEB</em> to a <tt>EmployeeWEB.war</tt> file.</p></li>
</ol>


<h2><a name="DevelopinguserinterfacewithJSF-SettingupthedatabasetablesandtheDatasource"></a>Setting up the database tables and the Datasource</h2>

<ol>
	<li>Start the geronimo server and click on the <b>Console Navigation -&gt; Embedded DB -&gt; DB manager</b>. Enter <em>EmployeeDB</em> in the <em>Create DB</em> textbox as shown in the below screen shot and click on the <b>Create</b> button.<br/>
<img src="/confluence/download/attachments/93318/23.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Create the <b>Employee</b> table by entering the below SQL statement and clicking on the <b>Run SQL</b> button as shown in the below screen shot.<br/>
<img src="/confluence/download/attachments/93318/24.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <b>Console Navigation -&gt; Services -&gt; Database Pools</b>, and click on the <b>Using the Geronimo database pool wizard</b> link to create a new datasource.<br/>
<img src="/confluence/download/attachments/93318/25.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>On the next screen, enter <em>EmployeeDS</em> in the <em>Name of Database Pool</em> textbox and select <b>Derby embedded</b> in the <em>Database Type</em> combo box. Click on the <b>Next</b> button.<br/>
<img src="/confluence/download/attachments/93318/26.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>On the next screen, select the configuration in the <em>Driver JAR</em> select box and enter <em>EmployeeDB</em> in the <em>Database Name</em> textbox, and click on the <b>Deploy</b> button at the bottom.<br/>
<img src="/confluence/download/attachments/93318/27.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>This will deploy the <em>EmployeeDS</em> database pool. The moduleId of the database pool is <tt>console.dbpool/EmployeeDS/1.0/rar</tt> which is declared as a dependency in the <tt>geronimo-web.xml</tt>. This is because, JPA uses this database source to persist entities.</li>
</ol>


<h2><a name="DevelopinguserinterfacewithJSF-Deployingthe%28war%29application"></a>Deploying the (war) application</h2>

<p>Deploy the <tt>EmployeeWEB.war</tt> file using the command prompt as follows.<br/>
<font color="white"><br/>
<div class="preformatted" style="border-style: solid; "><div class="preformattedContent" style="background-color: #000000; ">
<pre>C:\Geronimo-2.1\bin&gt;deploy.bat --user system --password manager deploy EmployeeWEB.war
Using GERONIMO_BASE:   C:\Geronimo-2.1
Using GERONIMO_HOME:   C:\Geronimo-2.1
Using GERONIMO_TMPDIR: var\temp
Using JRE_HOME:        C:\SDK-May-31-2007\jre
    Deployed EmployeeJSF/WEB/1.0/car @ /EmployeeWEB
</pre>
</div></div></font></p>

<h2><a name="DevelopinguserinterfacewithJSF-Runningtheapplication"></a>Running the application</h2>
<ol>
	<li>Open a browser window and hit the URL <tt><span class="nobr"><a href="http://localhost:8080/EmployeeWEB/" title="Visit page outside Confluence" rel="nofollow">http://localhost:8080/EmployeeWEB/<sup><img class="rendericon" src="/confluence/images/icons/linkext7.gif" height="7" width="7" align="absmiddle" alt="" border="0"/></sup></a></span></tt>. This will bring up the below screen.<br/>
<img src="/confluence/download/attachments/93318/28.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <b>Add employee details</b> link to get the below screen to add employees into the database. Just click on the <b>Save</b> button without entering any values. The JSF complains with validation errors as below.<br/>
<img src="/confluence/download/attachments/93318/29.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Enter the values as given in the screen below and click on the <b>Save</b> button. This will take back to the main page.<br/>
<img src="/confluence/download/attachments/93318/30.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>Click on the <b>Edit employee details</b> link to get the below screen. Enter <em>Employee No</em> value as 10 and click on the <b>Retrieve</b> button.<br/>
<img src="/confluence/download/attachments/93318/31.jpg" align="absmiddle" border="0" />
<br clear="all" /></li>
	<li>This will bring up the details of the employee whose employee number is 10. We can edit the values as required and click on the <b>Save</b> button.<br/>
<img src="/confluence/download/attachments/93318/32.jpg" align="absmiddle" border="0" /></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