© 2005 Marty Hall

JSF: The MyFaces

Custom Components
(Tomahawk)
Core Servlets & JSP book: www.coreservlets.com
More Servlets & JSP book: www.moreservlets.com
Servlet/JSP/Struts/JSF Training: courses.coreservlets.com
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.

© 2005 Marty Hall

For live JSF training, please see

JSP/servlet/Struts/JSF training courses at
http://courses.coreservlets.com/.
Taught by the author of Core Servlets and JSP, More
Servlets and JSP, and this tutorial. Available at
public venues, or customized versions can be held
on-site at your organization.
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.
 Topics in This Section
• Getting the MyFaces components
• Configuring MyFaces to use Tomahawk
• Three simplest components
– Date input
– Tabbed panes
– Tables with column flow
• Overview of other components

4 J2EE training and tutorials: http://www.coreservlets.com

Using the MyFaces Components

• Put tomahawk.jar in WEB-INF/lib
– Not needed if you use myfaces-all.jar
• Is included in the jsf-blank app at coreservlets.com
– Works in Sun Reference Implementation or any other JSF
implementation
• Import the extended tag library
<%@ taglib uri="http://myfaces.apache.org/extensions"
prefix="t"%>
– Notes
• Older documentation and examples use "x" as the prefix
– "x" for "extensions"
• Current recommendation is to use "t"
– "t" for "tomahawk"
• Bookmark the documentation
– http://myfaces.apache.org/tomahawk/overview.html
5 J2EE training and tutorials: http://www.coreservlets.com
 Using the MyFaces Components
(Components that Use JavaScript)
• JavaScript support added in via very
obscure servlet/JSP filter.
– Totally undocumented as of September 1, 2005!
• Need filter and filter-mapping entries
– In web.xml, not faces-config.xml
– The filter-mapping file extension must match the servlet-
mapping file extension
• So, if you change .faces to .jsf, and use extensions, you
need to change the url-pattern entry of both elements!
– In web.xml for servlets 2.4 (e.g., Tomcat 5), order of
elements in web.xml does not matter.
• But in 2.3 version (e.g., Tomcat 4), filter and filter-mapping
must come before servlet and servlet-mapping
– These web.xml entries are already present in the "full"
version of jsf-blank
• Download from JSF tutorial at www.coreservlets.com
6 J2EE training and tutorials: http://www.coreservlets.com

Using the MyFaces Components

(Components that Use JavaScript)
• Sample web.xml entries
– Cut and paste from example app or the jsf-blank Web
app: don't enter by hand
<filter>
<filter-name>extensionsFilter</filter-name>
<filter-class>
org.apache.myfaces.component.html.util.ExtensionsFilter
</filter-class>
...
</filter>

<filter-mapping>
<filter-name>extensionsFilter</filter-name>
<url-pattern>*.faces</url-pattern>
</filter-mapping>
<filter-mapping>
<filter-name>extensionsFilter</filter-name>
<url-pattern>/faces/*</url-pattern>
</filter-mapping>
7 J2EE training and tutorials: http://www.coreservlets.com
 t:inputDate
• Purpose
– To gather a java.util.Date value
• Attributes
– value
• the Date value
– type
• date, time, or both. Default is date
– popupCalendar
• If true, button added that pops up JavaScript calendar for
input. Default is false
• Notes
– A null input value results in the current date being shown
– Enabling JavaScript is tricky: filter and filter-mapping
entries in web.xml needed.
• Even so, HTML source is not very readable because it
refers to JavaScript files that are not really on disk but
8
which are supplied by the filter
J2EE training and tutorials: http://www.coreservlets.com

t:inputDate: Example Code

• Main page
<h:form>
Date: <t:inputDate value="#{sample.date}"
popupCalendar="true"/><BR>
<h:commandButton action="show-date"/>
</h:form>
• Bean
package coreservlets;
import java.util.*;

public class SampleBean {

private Date date;

public Date getDate() { return(date); }

public void setDate(Date date) {

this.date = date;
}
}
9 J2EE training and tutorials: http://www.coreservlets.com
 t:inputDate: Example Code
• face-config
<h:form>
Date: <t:inputDate value="#{sample.date}"
popupCalendar="true"/><BR>
<h:commandButton action="show-date"/>
</h:form>
• Results Page
<H2>You selected the following date:<BR>
<h:outputText value="#{sample.date}"/></H2>

10 J2EE training and tutorials: http://www.coreservlets.com

t:inputDate: Results

11 J2EE training and tutorials: http://www.coreservlets.com

 t:panelTabbedPane
• Purpose
– To use CSS layers to create tabbed panes
• Attributes
– bgColor
• The background color of the active tab
– activeTabStyleClass, inactiveTabStyleClass, etc.
• Many attributes for giving CSS styles
• Notes
– Per-tab content goes within t:panelTab
• Regular HTML must be inside f:verbatim
– Shared content goes outside of t:PanelTab but within
t:panelTabbedPane
– Non-tab content goes outside of t:panelTabbedPane
12 J2EE training and tutorials: http://www.coreservlets.com

t:panelTabbedPane:
Example Code
<t:panelTabbedPane bgcolor="#FFFFCC">

<t:panelTab label="Tab 1">

<f:verbatim><H1>Tab 1</H1></f:verbatim>
</t:panelTab>
<t:panelTab label="Tab 2">
<f:verbatim><H1>Tab 2</H1></f:verbatim>
</t:panelTab>
<t:panelTab label="Tab 3">
<f:verbatim><H1>Tab 3</H1></f:verbatim>
</t:panelTab>

<h:commandButton value="Common Button" action="..."/>

</t:panelTabbedPane>

13 J2EE training and tutorials: http://www.coreservlets.com

 t:PanelTabbedPane: Result

14 J2EE training and tutorials: http://www.coreservlets.com

t:newspaperTable
• Purpose
– To take a tall skinny table and turn it into a wider multi-
column table with a balanced # of entries per column.
• Attributes
– newspaperColumns
• The number of columns
– value
• The collection containing the values
– var
• The local variable set to each entry of the collection
– Many CSS entries
• Notes
– Usage is similar to h:dataTable; see later lecture
– Use h:column for each sub-piece of "var"
15 J2EE training and tutorials: http://www.coreservlets.com
 t:newspaperTable:
Example Code
<t:newspaperTable newspaperColumns="3"
value="#{sample.states}"
var="state">
<f:facet name="spacer">
<f:verbatim>&nbsp;&nbsp;</f:verbatim>
</f:facet>
<h:column>
<f:facet name="header">
<f:verbatim>State Name</f:verbatim>
</f:facet>
<h:outputText value="#{state[0]}"/>
</h:column>
<h:column>
<f:facet name="header">
<f:verbatim>Abbr.</f:verbatim>
</f:facet>
<h:outputText value="#{state[1]}"/>
</h:column>
16 </t:newspaperTable> J2EE training and tutorials: http://www.coreservlets.com

t:newspaperTable:
Example Code
public class SampleBean {
...

private String[][] states =

{ { "Alabama", "AL" },
{ "Alaska", "AK" },
{ "Arizona", "AZ" },
{ "Arkansas", "AR" },
{ "California", "CA" },
{ "Colorado", "CO" },
{ "Connecticut", "CT" },
{ "Delaware", "DE" },
{ "District of Columbia", "DC" } ... }

public String[][] getStates() {

{ return(states); }
}
}
17 J2EE training and tutorials: http://www.coreservlets.com
 t:newspaperTable: Result

18 J2EE training and tutorials: http://www.coreservlets.com

JavaScript Menus
• t:jsCookMenu

19 J2EE training and tutorials: http://www.coreservlets.com

 t:tree and t:tree2
• Simple and advanced trees

20 J2EE training and tutorials: http://www.coreservlets.com

t:fileUpload
• Renders a file upload field
– Ie <INPUT TYPE="FILE">
• MyFaces comes bundled with Jakarta
Commons File Upload Code
– commons-fileupload-1.0-jar must be in WEB-INF/lib

21 J2EE training and tutorials: http://www.coreservlets.com

 t:inputCalendar
• Renders a calendar
– But t:inputDate more generally useful

22 J2EE training and tutorials: http://www.coreservlets.com

t:popup
• A JavaScript popup triggered by a mouse
event

23 J2EE training and tutorials: http://www.coreservlets.com

 t:inputHTML
• An inline HTML-based word processor

24 J2EE training and tutorials: http://www.coreservlets.com

Other Components
• Many Additions and Extensions to
h:dataTable
– Scrolling
– Columns
– Sorting
– Etc.
• More constantly being added
– But documentation always lagging

25 J2EE training and tutorials: http://www.coreservlets.com

 Summary
• MyFaces supplies many powerful custom
components
– Documentation currently very poor
• But supposedly this will change soon
– More components being added
– MyFaces components can be used in any JSF
implementation
• Alternative
– Also consider Oracle ADF components
• http://www.oracle.com/technology/products/jdev/htdocs/
partners/addins/exchange/jsf/index.html

26 J2EE training and tutorials: http://www.coreservlets.com

© 2005 Marty Hall

Questions?

Core Servlets & JSP book: www.coreservlets.com

More Servlets & JSP book: www.moreservlets.com
Servlet/JSP/Struts/JSF Training: courses.coreservlets.com
http://courses.coreservlets.com/ -- Hands-on, customized training for Java, servlets, JSP, Struts, and JSF.