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: User Interface development with JSF (page edited)
Date Wed, 02 Jul 2008 09:13: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/User+Interface+development+with+JSF">User Interface development with JSF</a>
        </span>
    </div>

     <p>
        <a href="http://cwiki.apache.org/confluence/display/GMOxDOC21/User+Interface+development+with+JSF">User Interface development with JSF</a>
        has been edited by             <a href="http://cwiki.apache.org/confluence/display/~phanibalaji">Phani Balaji Madgula</a>
            <span class="smallfont">(Jul 02, 2008)</span>.
     </p>
    
     <p>
                 <a href="http://cwiki.apache.org/confluence/pages/diffpagesbyversion.action?pageId=89606&originalVersion=4&revisedVersion=5">(View changes)</a>
     </p>

    <span class="label">Content:</span><br/>
    <div class="greybox wiki-content"><p>JavaServer Faces technology provides </p>

<ul>
	<li>APIs for representing user interface components and managing their state, handling events triggered on them, validating inputs entered by user, defining page navigation, supporting internationalization and accessibility.</li>
</ul>


<ul>
	<li>A custom tag library for developing JSF interface within a JSP.</li>
</ul>


<p>JavaServer Faces is a flexible technology that uses the existing user interface and web tier mechanisms but it does not tie up the applications to a particular mark-up language, protocol and client device. It encapsulates various UI component functionality enabling it render data to various client devices by developing required custom tags. JavaServer Faces technology provides a custom renderer and a JSP custom tag library for rendering to an HTML client, allowing developers of Java Platform, Enterprise Edition (Java EE) applications to use JavaServer Faces technology in their applications. </p>

<p>JavaServer Faces technology clearly separates presentation logic from the application logic. Several development roles can be created and designated during the application development state. The JSF technology is developed through Java Community Process under JSR-127.</p>

<p>Apache geronimo v2.1 uses <span class="nobr"><a href="http://myfaces.apache.org/" title="Visit page outside Confluence" rel="nofollow">Apache MyFaces<sup><img class="rendericon" src="/confluence/images/icons/linkext7.gif" height="7" width="7" align="absmiddle" alt="" border="0"/></sup></a></span> v1.2.2 for JSF implementation. This tutorial illustrates the following aspects of JSF.</p>

<ul>
	<li>Various UI components of JSF.<br/>
 (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>

<ul>
	<li>Setting the Eclipse environment</li>
	<li>Creating WEB application with JSF configuration and entities</li>
	<li>Setting up the database tables and the Datasource.</li>
	<li>Deploying the (war) application</li>
	<li>Running the application</li>
</ul>


<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="error">&#91;link|^EmployeeWEB.war&#93;</span>.</p>

<h2><a name="UserInterfacedevelopmentwithJSF-SettingtheEclipseenvironment"></a>Setting the Eclipse environment</h2>

<p>1. Download Apache Geronimo2.1 and install it on the server. Look into the geronimo documentation for instructions.</p>

<p>2. Install the eclipse IDE and download geronimo eclipse plugin and install it on top of eclipse. Look into the geronimo eclipse plugin documentation for instructions.</p>

<p>3. Create a runtime environment for Apache Geronimo2.1 in the eclipse. Look into the geronimo eclipse plugin documentation for instructions to install a runtime for Apache Geronimo2.1.</p>

<h2><a name="UserInterfacedevelopmentwithJSF-CreatingWEBapplicationwithentities"></a>Creating WEB application with entities</h2>

<p>1. Start the eclipse wizard and right click on the <em>Project Explorer</em> and click on the <em>New =&gt; Dynamic Web Project</em></p>

<p><span class="error">Unable to render embedded object: File (1.jpg) not found.</span></p>

<p>2. Enter the project name as <em>EmployeeWEB</em> and click on the <em>Next</em> button.</p>

<p><span class="error">Unable to render embedded object: File (2.jpg) not found.</span></p>

<p>3. On the <em>New Dynamic Web Project</em> wizard, check on the <em>Project Facet</em> checkboxes and select the <em>version</em> values as below screen shot, and click on the <em>Next</em> button.</p>

<p><span class="error">Unable to render embedded object: File (3.jpg) not found.</span></p>

<p>4. On the <em>Web Module</em> wizard, make sure that <em>Generate Deployment Descriptor</em> is checked as below and click on the <em>Next</em> button.</p>

<p><span class="error">Unable to render embedded object: File (4.jpg) not found.</span></p>

<p>5. On the <em>Geronimo Deployment Plan</em> wizard, provide the moduleId values as below screen shot and click on the <em>Next</em> button.</p>

<p><span class="error">Unable to render embedded object: File (5.jpg) not found.</span></p>

<p>6. On the <em>JSF Capabilities</em> wizard, check the second radio button and click on the <em>New</em> button <br/>
   by the side of the combo box. This will open <em>Create JSF Implementation Library</em> wizard. <br/>
   Provide the <em>Library Name</em> as <em>MyJSFLibrary</em> and add the following jars by <br/>
   clicking on the <em>Add</em> button. Finally, click on the <em>Finish</em> button.</p>

<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</li>
</ul>



<p><span class="error">Unable to render embedded object: File (6.jpg) not found.</span></p>

<p>7. Now, on the <em>JSF Capabilities</em> wizard, add the <em>URL Mapping Patterns</em> as <em>*.jsf</em> and click on the <em>Finish</em> button.</p>

<p><span class="error">Unable to render embedded object: File (7.jpg) not found.</span></p>

<p>8. This will create <em>EmployeeWEB</em> application in the <em>Project Explorer</em> as below screen shot.</p>

<p><span class="error">Unable to render embedded object: File (8.jpg) not found.</span></p>

<p>9. Right click on the <em>WEB-INF</em> folder and navigate to <em>New =&gt; Folder</em> and create a folder by name <em>tld</em> as given in the screen shot below.</p>

<p><span class="error">Unable to render embedded object: File (9.jpg) not found.</span></p>

<p>10. 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-api-1.2.2.jar</tt> file.</p>

<p>11. 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.</p>

<p><span class="error">Unable to render embedded object: File (10.jpg) not found.</span></p>

<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"></pre>
</div></div>

<p>12. Right click on the <em>EmployeeWEB</em> and navigate to <em>New =&gt; Class</em> and create <tt>Employee.java</tt> as given in the below screen shot. Click on the <em>Finish</em> button after providing the values.</p>

<p><span class="error">Unable to render embedded object: File (11.jpg) not found.</span></p>

<p>13. The contents of the <tt>com.jpa.sample.Employee.java</tt> are as follows. This is the entity class used with JPA for persistence.</p>

<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>com.jpa.sample.Employee.java</b></div><div class="codeContent">
<pre class="code-java"></pre>
</div></div>


<p>14. Similarly, create <tt>sample.jsf.Employee.java</tt>. The contents of the class are as follows. This is the managed bean used by JSF. </p>

<div class="code" style="border-style: solid; "><div class="codeHeader" style="border-bottom-style: solid; "><b>sample.jsf.Employee.java</b></div><div class="codeContent">
<pre class="code-java"></pre>
</div></div>

<p>15. Right click on the <em>EmployeeWEB</em> project and create <tt>index.jsp</tt> as follows.</p>

<p><span class="error">Unable to render embedded object: File (12.jpg) not found.</span></p>

<p>The contents of the <tt>index.jsp</tt> are as follows.</p>

<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"></pre>
</div></div>

<p>16. Similarly, create <tt>addEmployee.jsp</tt> and the contents are as follows.</p>

<p>17. Similarly, create <tt>editEmployee.jsp</tt> and the contents are as follows.</p>

<p>18. Similarly, create <tt>RetrieveEmployee.jsp</tt> and the contents are as follows.</p>

<p>19. 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.</p>

<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"></pre>
</div></div>

<p>20. Click on the <tt>faces-config.xml</tt> to open <em>Faces Configuration Editor</em>. </p>

<p><span class="error">Unable to render embedded object: File (13.jpg) not found.</span></p>

<p>21. Click on the <em>ManagedBean</em> tab below and Click on the <em>Add</em> button. <br/>
    This will open <em>New Managed Bean Wizard</em>.</p>

<p><span class="error">Unable to render embedded object: File (14.jpg) not found.</span></p>

<p>22. Click on the browse button and search for <tt>sample.jsf.Employee</tt> class and click on the <em>OK</em> button.</p>

<p><span class="error">Unable to render embedded object: File (15.jpg) not found.</span></p>

<p>23. Click on the <em>Next</em> 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 <em>Next</em> button. </p>

<p><span class="error">Unable to render embedded object: File (16.jpg) not found.</span></p>


<p>24. Click on the <em>Next</em> button and finally, click on the <em>Finish</em> button. This will bring up the following screen shot as below.</p>

<p><span class="error">Unable to render embedded object: File (17.jpg) not found.</span></p>

<p>25. Click on the <em>Navigation Rule</em> tab and move the mouse over <em>Palette</em> to bring it to the front.</p>

<p><span class="error">Unable to render embedded object: File (18.jpg) not found.</span></p>

<p>26. Click on the <em>Page</em> and move the mouse over main area and click once. This will bring up <em>Select JSP File</em> wizard. Select the <tt>index.jsp</tt> and click on the <em>OK</em> button.</p>

<p><span class="error">Unable to render embedded object: File (19.jpg) not found.</span></p>

<p>27. Similarly, add other JSPs also to the main area as follows.</p>

<p><span class="error">Unable to render embedded object: File (20.jpg) not found.</span></p>

<p>28. Bring the <em>Palette</em> to the front and click on the <em>Link</em>. </p>

<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>
</ul>


<ul>
	<li>Similarly, click the mouse over <tt>RetrieveEmployee.jsp</tt> and move the mouse to <tt>index.jsp</tt> and click once.</li>
</ul>


<ul>
	<li>Click the mouse over <tt>RtrieveEmployee.jsp</tt> and move the mouse over <tt>editEmployee.jsp</tt> and click once.</li>
</ul>


<ul>
	<li>Click the mouse over <tt>editEmployee.jsp}}and move the mouse over {{RetrieveEmployee.jsp</tt> and click once.</li>
</ul>


<p>The above actions create navigation rules and look like the screen shot below.</p>

<p><span class="error">Unable to render embedded object: File (21.jpg) not found.</span></p>

<p>29. Press the escape button once and click on the link between <tt>addEmployee.jsp</tt> and <tt>index.jsp</tt>. <br/>
    On the <em>Properties</em> window at the bottom, go the <em>From Outcome</em> textbox <br/>
    and provide the value as <em>saveEmployee</em>.</p>

<p><span class="error">Unable to render embedded object: File (22.jpg) not found.</span></p>

<p>30. 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 the <em>From Outcome</em> textbox and provide the value as <em>cancel</em>.</p>

<p>32. 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 the <em>From Outcome</em> textbox and provide the value as <em>retrieveEmployee</em>.</p>

<p>33. 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 the <em>From Outcome</em> textbox and provide the value as <em>saveEmployee</em>.</p>


<p>34. Click on the <em>Source</em> button to view the XML content generated out of these navigations rules and configuration. The contents should be as follows.</p>

<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"></pre>
</div></div>

<p>35. This finishes the WEB application creation and JSF configuration. Export the <em>EmployeeWEB</em> to a <tt>EmployeeWEB.war</tt> file.</p>

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

<p>1. Start the geronimo server and click on the <em>Console Navigation =&gt; Embedded DB =&gt; DB manager</em>. Enter <em>EmployeeDB</em> in the <em>Create DB</em> textbox as shown in the below screen shot and click on the <em>Create</em> button.</p>

<p><span class="error">Unable to render embedded object: File (23.jpg) not found.</span></p>

<p>2. Create <em>Employee</em> table by entering the below SQL statement and clicking on the <em>Run SQL</em> button as shown in the below screen shot.</p>

<p><span class="error">Unable to render embedded object: File (24.jpg) not found.</span></p>

<p>3. Click on the <em>Console Navigation =&gt; Services =&gt; Database Pools</em>, and click on the <em>Using the Geronimo database pool wizard</em> link to create a new datasource.</p>

<p><span class="error">Unable to render embedded object: File (25.jpg) not found.</span></p>

<p>4. On the next screen, enter <em>EmployeeDS</em> in the <em>Name of Database Pool</em> textbox and select <em>Derby embedded</em> in the <em>Database Type</em> combo box. Click on the <em>Next</em> button.</p>

<p><span class="error">Unable to render embedded object: File (26.jpg) not found.</span></p>

<p>5. 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 <em>Deploy</em> button at the bottom.</p>

<p><span class="error">Unable to render embedded object: File (27.jpg) not found.</span></p>

<p>6. 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. </p>

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

<p>1. Deploy the <tt>EmployeeWEB.war</tt> file using the command prompt as follows.</p>

<p><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="UserInterfacedevelopmentwithJSF-Runningtheapplication"></a>Running the application</h2>

<p>1. 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.</p>

<p><span class="error">Unable to render embedded object: File (28.jpg) not found.</span></p>

<p>2. Click on the <em>Add employee details</em> link to get the below screen to add employees into the database. Just click on the <em>Save</em> button without entering any values. The JSF complains with validation errors as below.</p>

<p><span class="error">Unable to render embedded object: File (29.jpg) not found.</span></p>


<p>3. Enter the values as given in the screen below and click on the <em>Save</em> button. This will take back to the main page.</p>

<p><span class="error">Unable to render embedded object: File (30.jpg) not found.</span></p>

<p>4. Click on the <em>Edit employee details</em> link to get the below screen. Enter <em>Employee No</em> value as 10 and click on the <em>Retrieve</em> button.</p>

<p><span class="error">Unable to render embedded object: File (31.jpg) not found.</span></p>

<p>5. 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 <em>Save</em> button.</p>

<p><span class="error">Unable to render embedded object: File (32.jpg) not found.</span></p>


</div>


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

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

</div>

</body>
</html>


Mime
View raw message