jsf the myfaces custom componenents

Upload: hassounbs

Post on 30-May-2018

228 views

Category:

Documents


0 download

TRANSCRIPT

  • 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