jsf the myfaces custom componenents

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.


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


3/13


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


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


4/13


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


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;

}

}


5/13


t:inputDate: Example Code

face-config

Date:

Results PageYou selected the following date:

11


t:inputDate: Results


6/13


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


t:panelTabbedPane:Example Code

Tab 1

Tab 2

Tab 3


7/13


t:PanelTabbedPane: Result

15


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


t:newspaperTable:Example Code

State Name

Abbr.

< t:news a erTable>

17


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); }

}

}


9/13


t:newspaperTable: Result

19


JavaScript Menus

t:jsCookMenu


10/13


t:tree and t:tree2

Simple and advanced trees

21


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


11/13


t:inputCalendar

Renders a calendar But t:inputDate more generally useful

23


t:popup

A JavaScript popup triggered by a mouseevent


12/13


t:inputHTML

An inline HTML-based word processor

25


Other Components

Many Additions and Extensions toh:dataTable Scrolling

Columns

Sorting

Etc. More constantly being added But documentation always lagging


13/13

jsf the myfaces custom componenents

Documents