Post on 30-May-2018
8/14/2019 JSF the MyFaces Custom Componenents
1/13
2005 Marty Hall
htt ://courses.coreservlets.com/ -- Hands-on, customized trainin for Java, servlets, JSP, Struts, and JSF.
JSF: The MyFacesCustom Components
(Tomahawk)
Core Servlets & JSPbook: www.coreservlets.comMore Servlets & JSPbook: www.moreservlets.com
Servlet/JSP/Struts/JSF Training: courses.coreservlets.com
2005 Marty Hall
htt ://courses.coreservlets.com/ -- Hands-on, customized trainin for Java, servlets, JSP, Struts, and JSF.
For live JSF training, please seeJSP/servlet/Struts/JSF training courses at
http://courses.coreservlets.com/.
Taught by the author ofCore Servlets and JSP, MoreServlets and JSP, and this tutorial. Available at
public venues, or customized versions can be heldon-site at your organization.
8/14/2019 JSF the MyFaces Custom Componenents
2/13
4 J2EE training and tutorials: http://www.coreservlets.com
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
5
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 JSFimplementation
Import the extended tag library
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
8/14/2019 JSF the MyFaces Custom Componenents
3/13
6 J2EE training and tutorials: http://www.coreservlets.com
Using the MyFaces Components(Components that Use JavaScript)
JavaScript support added in via veryobscure 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 beforeservlet 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
7
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 handextensionsFilter
org.apache.myfaces.component.html.util.ExtensionsFilter...
extensionsFilter*.faces
extensionsFilter/faces/*
8/14/2019 JSF the MyFaces Custom Componenents
4/13
8 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-mappingentries in web.xml needed. Even so, HTML source is not very readable because it
refers to JavaScript files that are not really on disk butwhich are supplied by the filter
9
J2EE training and tutorials: http://www.coreservlets.com
t:inputDate: Example Code
Main page
Date:
Beanpackage coreservlets;import java.util.*;
public class SampleBean {private Date date;
public Date getDate() { return(date); }
public void setDate(Date date) {
this.date = date;
}
}
8/14/2019 JSF the MyFaces Custom Componenents
5/13
10 J2EE training and tutorials: http://www.coreservlets.com
t:inputDate: Example Code
face-config
Date:
Results PageYou selected the following date:
11
J2EE training and tutorials: http://www.coreservlets.com
t:inputDate: Results
8/14/2019 JSF the MyFaces Custom Componenents
6/13
12 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 withint:panelTabbedPane
Non-tab content goes outside of t:panelTabbedPane
13
J2EE training and tutorials: http://www.coreservlets.com
t:panelTabbedPane:Example Code
Tab 1
Tab 2
Tab 3
8/14/2019 JSF the MyFaces Custom Componenents
7/13
14 J2EE training and tutorials: http://www.coreservlets.com
t:PanelTabbedPane: Result
15
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"
8/14/2019 JSF the MyFaces Custom Componenents
8/13
16 J2EE training and tutorials: http://www.coreservlets.com
t:newspaperTable:Example Code
State Name
Abbr.
< t:news a erTable>
17
J2EE training and tutorials: http://www.coreservlets.com
t:newspaperTable:Example Codepublic 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); }
}
}
8/14/2019 JSF the MyFaces Custom Componenents
9/13
18 J2EE training and tutorials: http://www.coreservlets.com
t:newspaperTable: Result
19
J2EE training and tutorials: http://www.coreservlets.com
JavaScript Menus
t:jsCookMenu
8/14/2019 JSF the MyFaces Custom Componenents
10/13
20 J2EE training and tutorials: http://www.coreservlets.com
t:tree and t:tree2
Simple and advanced trees
21
J2EE training and tutorials: http://www.coreservlets.com
t:fileUpload
Renders a file upload field Ie
MyFaces comes bundled with JakartaCommons File Upload Code commons-fileupload-1.0-jar must be in WEB-INF/lib
8/14/2019 JSF the MyFaces Custom Componenents
11/13
22 J2EE training and tutorials: http://www.coreservlets.com
t:inputCalendar
Renders a calendar But t:inputDate more generally useful
23
J2EE training and tutorials: http://www.coreservlets.com
t:popup
A JavaScript popup triggered by a mouseevent
8/14/2019 JSF the MyFaces Custom Componenents
12/13
24 J2EE training and tutorials: http://www.coreservlets.com
t:inputHTML
An inline HTML-based word processor
25
J2EE training and tutorials: http://www.coreservlets.com
Other Components
Many Additions and Extensions toh:dataTable Scrolling
Columns
Sorting
Etc. More constantly being added But documentation always lagging
8/14/2019 JSF the MyFaces Custom Componenents
13/13