Manual
<h:selectOneMenu value="#{resumeBean.bgColor}"
disabled="#{!resumeBean.colorSupported}">
<f:selectItems value="#{resumeBean.availableColors}"/>
</h:selectOneMenu><BR>
<h:commandButton
value="#{resumeBean.colorSupportLabel}"
actionListener="#{resumeBean.toggleColorSupport}"
immediate="true"/>
<BR><HR WIDTH="25%"><BR>
Name:
<h:inputText value="#{resumeBean.name}"/><BR>
Job Title:
<h:inputText value="#{resumeBean.jobTitle}"/><P>
<h:commandButton value="Show Preview"
action="#{resumeBean.showPreview}"/>
</h:form>
</CENTER></BODY></HTML>
</f:view>
NOTE:
• JSP directives for using JSF and HTML tag libraries
The following JSP directives allow the JSP page to use the JSF Core and HTML tag libraries
that are provided in the JSF specification’s Reference Implementation.
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
• MyFaces User Interface components
JSF components such as <h:selectBooleanCheckbox>, <h:selectOneMenu> and so
on, used in the customize.jsp file, provide Faces enabled User Interface.
<h:selectOneMenu value="#{resumeBean.bgColor}” is called the JSF value binding
expression and provides direct linkage to the bgColor property of the managed bean
resumeBean.
Creating the same-color.jsp and show-preview.jsp Files
Create two new JSP files, named same-color.jsp and show-preview.jsp, in the
SkinSelector/WebContent/WEB-INF/results folder, by following the steps explained in
the Creating the index.jsp File section.
Modifying the same-color.jsp File
To modify the same-color.jsp file, complete the following steps:
1. Double-click the same-color.jsp file in the Project Explorer frame to open it.
2. Replace the default content of the same-color.jsp file with the following code:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD><TITLE>Color Error</TITLE>
<LINK REL="STYLESHEET"
HREF="./css/styles.css"
TYPE="text/css">
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER=5>
268 Getting Started with MyFaces