Overview | Library | Tag | Help
| FRAMES NO FRAMES

## ICEfaces EE Composite Components

Standard Syntax:
`<%@ taglib prefix="ice-cc" uri="http://www.icesoft.com/icefaces-composite-comps" %>
`
XML Syntax:
`<anyxmlelement xmlns:ice-cc="http://www.icesoft.com/icefaces-composite-comps" />
`

    ICEfaces EE Composite Components

Tag Library Information
Display Name | ICEfaces EE Composite Components
Version | 3.3.0
Short Name | ice-cc
URI | http://www.icesoft.com/icefaces-composite-comps

Tag Summary
autoSortTable | ## Auto-Sort Table Composite Component ### Features The Auto-Sort Table can be used with any List No code is required to sort Sorting is done automatically A Data Pager can be automatically included ### How to Use Create an instance of the AutoSortTableBean class in your managed bean Add the autoSortTable tag to your page Set the 'id' attribute on the tag Add an ice-cc:column tag for each column you would like to show in the table Bind the 'value' attribute of the column tag to a property of the Object in your list, using the 'row' variable name for the row-level variable Set the 'name' attribute of the column tag to the name of the property in your row-level Object ( eg. 'id' for the column for 'row.id')
column | ## Easy Column Composite Component ### Features Useful when creating basic tables with text headers and cell content. Does not require extra bean code. ### How To Use Create an ice:dataTable Use the 'title' attribute for the column title and the 'value' attribute for the cell contents If you wish to use ice:commandSortHeader, use the 'name' attribute to populate the ice:commandSortHeader columnName attribute and set the 'sortable' attribute to true
css | ICEfaces Composite Component Library CSS ### Features Apply style classes packaged in the icefaces-composite-comps.jar to ICEfaces composite components: RichDataGrid RichTabs RoundCorners Schedule SelectionTree Spinner TreeTable TriStateCheckBox ### How To Use In pages that use the components listed above, nest the ice-cc:css tag in the head tag.
dataPager | ## Easy Data Pager Composite Component ### Features Quickly add a paginator to your dataTable Does not require extra bean code ### How To Use Create an ice:dataTable Instead of typing out ice:dataPaginator with all the necessary child tags, use ice-cc:dataPager Use the 'forTable' attribute to bind the dataTable id to the composite component Note the previous 'for' attribute is deprecated. Add optional attributes
dataPagerInfo | ## Easy Data Pager Info Composite Component ### Features Quickly add a text based, informative paginator to your dataTable Does not require extra bean code ### How To Use Use an ice:dataTable Instead of typing out ice:dataPaginator with all the necessary child tags, use ice-cc:dataPagerInfo Use the 'forTable' attribute to bind the dataTable id to the composite component Note the previous 'for' attribute is deprecated. If you would like to customize the text, set the 'value' attribute
dateSpinner | ## Date Spinner Composite Component ### Features The Date Spinner allows you to scroll date values forward and back The increment and decrement step value can be set on the bean The date format can be set to short, medium, long, or full Changes to the underlying dateTimeConverter require a full post-back (ie. redirect) ### How To Use Create an instance of the DateSpinner class in your managed bean Use the dateSpinner tag in your page (eg. ice-cc:dateSpinner). Nest <ice-cc:css/> in your page <head> tag. Bind the 'bean' attribute on the tag to your managed bean property (eg. bean="#{myBean.spinner}) Set the 'incrementBy' property on the DateSpinner object (default is 1) Set the 'dateStyle' attribute on the dateSpinner tag (default is 'default', other valid values are 'short', 'medium', 'long', and 'full') Set the 'type' attribute on the dateSpinner tag (default is 'both', other valid values are 'date' for showing only the date, and 'time' for showing only the time) Set the 'width' attribute on the dateSpinner tag (default is '200px')
dialog | ## The Dynamic Dialog Composite Component A popup dialog that can be used for the whole application ### Features Choose between rendering okay/yes/no/cancel buttons. Programatically create and pass in Commands for these buttons. Choose dialog content with a Facelet include. ### How To Use Add the ice-cc:dialog tag to your application in a spot where it is not nested in a form Create a class extending DialogTypes and register it as a reqest scope bean named 'dialogTypes' in faces-config.xml Add at least one dialog in the constructor and a call to setDefaultDialog() To launch the dialog obtain a reference to the managed-bean named 'dialogState', retrieve the current Dialog, configure and set the Dialog to render
dualList | Dual List Composite Component ### Features The dual list supports the JSF SelectItem and any associated Object with a JSF Converter The list heights and widths can be customized ### How to Use Create an instance of the DualList class in your managed bean Bind the bean attribute on the tag to your managed bean property (eg: bean="#{myBean.dualList}")
easyPopup | ## The Easy Popup Panel Composite Component ### Features Less code than standard ICEfaces Popup Many configurable options ### How To Use Bind a boolean in your bean to the rendered attribute of the component Pass in a bean with a close popup actionListener Nest popup content in the ice-cc:easyPopup tag
editableList | ## The Editable List Composite Component ### Allows editing, adding and removing String items in a list ### Features The editable list allows you to let the user add and remove items from a list The list height and width can be customized ### How To Use Create an instance of the EditableList class in your managed bean If you would like to enforce unique items in the list, use the EditableList(boolean enforceUnique) constructor Use the editableList tag in your page Bind the 'bean' attribute on the tag to your managed bean property (eg. bean="#{myBean.editableList})
10. editableTable | ## The Editable Data Table Composite Component ### Features Offers direct, inline editing of row data Edits are done in a safe 'edit space' and the direct objects are untouched until the data is saved When a row is selected for editing, it becomes locked in edit mode until the changes are either saved or cancelled Supports editing of text, list, or date information Columns can be made editable or non-editable Supports a listener interface that will be called when a row is saved, so customized actions may be taken (eg. update the database) ### How To Use Add the <ice-cc:editableTable/> tag to your page. Nest <ice-cc:css/> in your page <head> tag. Bind the 'bean' attribute to an instance of EditableTableBean If you would like to use the listener interface, create a class that implements the IEditableTableEventListener, and use the EditableTableBean(List,IEditableTableEventListener) overloaded constructor Set the 'idProperty' attribute on the tag. This should correspond to the property on the row-level bean that is used to identify the row For each column that you wish to be editable, choose the <ice-cc:textColumn/>, <ice-cc:selectOneMenuColumn/>, <ice-cc:selectBooleanColumn/>, or <ice-cc:selectInputDateColumn/> tags Specify the 'title' attribute for each editable column tag Specify the 'property' attribute for each editable column tag Specify the 'width' attribute for each editable column tag For <ice-cc:selectOneMenuColumn/>s, bind the 'selectItems' attribute to a list of SelectItems to be used in the associated drop down list Nest converters and/or validators inside <ui:define name="converter"> and/or <ui:define name="validator"> tags:
         <ice-cc:selectInputDateColumn title="Birth Date"
         property="birthDate" width="150px"
         required="true">
         <ui:define name="converter">
         <f:convertDateTime dateStyle="short"/>
         </ui:define>
         </ice-cc:selectInputDateColumn>
For any columns that you do not wish to be made editable, use the <ice-cc:column/> tag in the following manner <ice-cc:column title="ID" value="#{row.id}" name="id"/> where 'row' is always the 'var' name used to access the property in the source dataTable. Optionally specify whether the 1st ID column show be shown with the 'renderIdCol' attribute.
textColumn | The Text Column Composite Component is used in conjuction with the editableTable to render a column displayed as an inputText component when in editable mode. This component supports nested validator and converter tags.
selectInputDateColumn | The selectInputDateColumn Composite Component is used in conjuction with the editableTable to render a column displayed as a selectInputDate (Calendar) component when in editable mode. This component supports nested validator and converter tags.
selectBooleanColumn | The selectBooleanColumn Composite Component is used in conjunction with the editableTable to render a column displayed as a selectBooleanCheckbox component when in editable mode. This component supports nested validator and converter tags.
selectOneMenuColumn | The Select One Menu Column Composite Component is used in conjuction with the editableTable to render a column displayed as a drop down list when in editable mode. This component supports nested validator and converter tags.
inputRichTextColumn | The Input Rich Text Column Composite Component is used in conjuction with the editableTable to render a column displayed as a rich text editor component when in editable mode. This component supports nested validator and converter tags.
expandableTable | ## Expandable Data Table Composite Component ### Features The expandableTable tag consists of an ice:dataTable containing common elements required to add an expandable table to an application ### How To Use Wrap your dataTable records in com.icesoft.faces.facelets.component.expandabletable.ExpandableRecord, using the parent or child constructor as necessary. Use the expandableTable tag and specify the id and columns attributes.
filterTable | ## The Filter Table Composite Component ### Features Automatic row filtering No filtering code required Instantaneous filter updates on every keystroke Apply multiple filters at once ### How To Use Use the <ice-cc:filterTable/> tag on your page Bind the 'bean' attribute to an instance of FilterTableBean Use the <ice-cc:filterColumn/> tag for any columns that you wish to be filtered Use the <ice-cc:column/> tag for any columns that you do not wish to be filtered Specify the 'title' attribute for each column tag Specify the 'value' attribute for each column tag (please note that the variable name 'row' must be used, see example) Specify the 'property' attribute for each filterColumn tag. This must associate with the property name used in the column
filterColumn | The filterColumn Composite Component defines a filterable column in a filterTable
numberSpinner | ## Number Spinner Composite Component ### Features The Number Spinner allows you to scroll number values up and down The increment and decrement step value can be set on the bean A listener interface allows method callbacks on value change events Minimum and maxium values can be specified ### How To Use Create an instance of the NumberSpinner class in your managed bean Specify an instance of INumberSpinnerListener in the constructor if you would like to receive value change events Specify the minimum and maximum values for the spinner if you would like to limit the spinner's values Use the numberSpinner tag in your page (eg. ice-cc:numberSpinner). Nest <ice-cc:css/> in your page <head> tag. Bind the 'bean' attribute on the tag to your managed bean property (eg. bean="#{myBean.spinner}) Set the 'incrementBy' property on the NumberSpinner object (default is 1)
polling | ## The Polling Composite Component ### Features Provides an easy way to do client-side polling The polling interval is a configurable parameter of the component A PhaseListener will identify a polling request and perform the necessary bean logic ### How To Use If you would like to execute code at every poll, add PollingListener.java to your application, and register PollingListener as a phase-listener in your faces-config.xml Add the ice-cc:polling tag to your page, inside a form Set the 'interval' attribute of the tag (in milliseconds)
progressAsync | ## The Async Progress Composite Component The Async Progress Component allows you to monitor long-running server-side processes with a progress bar ### Features An indeterminate ice:outputProgress component monitors the progress of a Runnable Pass any managed bean Runnable into the ProgressAsyncBean ### How To Use Create a Runnable in your web application managed bean Include the icepush.jar in your application Add a reference to ProgressAsyncBean as a managed property to your managed bean In your managed bean setter for ProgressAsyncBean, also set ProgressAsyncBean's Runnable to the Runnable in your managed bean
progressInputFile | The Progress Input File Composite Component wraps the ace:fileEntry component. ### How To Use Add the <ice-cc:progressInputFile/> tag to your page Add the appropriate styleClass to the h:body tag: styleClass="ice-skin-rime" or styleClass="ice-skin-sam" Add the CSS file for the chosen theme to the bottom of the page (after closing h:body tag): <h:outputStylesheet library="org.icefaces.component.skins" name="rime.css" /> Bind the 'bean' attribute to an instance of ProgressInputFileBean
richDataGrid | ## The Rich Data Grid Composite Component ### Features Direct, inline editing of row data Column filtering Create new rows Delete rows Column reordering Column auto-sorting Column resizing Auto-pagination and pagination info Complete event model and listener callbacks for all table events Hide and show columns Edits are done in a safe 'edit space' and the direct objects are untouched until the data is saved When a row is selected for editing, it becomes locked in edit mode until the changes are either saved or cancelled Supports editing of text, list, date, and boolean data Columns can be made editable or non-editable ### How To Use Add the <ice-cc:richDataGrid/> tag to your page. Nest <ice-cc:css/> in your page <head> tag. Bind the 'bean' attribute to an instance of RichDataGridBean If you would like to receive event notifications, implement the IEditableTableEventListener class and pass it to the constructor of the RichDataGridBean For auto-generation of columns, simply pass in a List of items to the RichDataGridBean constructor To specify columns, pass in an array of IRichDataColumn objects to the RichDataGridBean constructor
richTabs | ## The Rich Tabs Composite Component ### Features The Rich Tabs composition component offers a more simplified and flexible mechanism for creating a tab-based layout Unlike the ice:panelTabSet, the Tabs component does not need to be included in a form, so tab content can be broken into multiple forms for performance The Rich Tabs component can include any other content, images, and components within the header The tabs can be reordered by dragging a tab between other tabs ### How To Use Use the <ice-cc:richTabs/> tag on your page. Nest <ice-cc:css/> in your page <head> tag. Bind the 'bean' attribute of the tag to an instance of TabsController. When creating the TabsController bean, add instances of Tab for each Tab you would like If you would like to nest forms within the tab content, set outsideForm='true' on the richTabs tag
roundCorners | ## The Round Corners Layout Composite Component ### Features The Round Corners Composition Component can be used to create rounded layouts ### How To Use Use the roundCorners tag in your page. Nest <ice-cc:css/> in your page <head> tag. Set the 'id' attribute of the tag Set the foreground color with the 'fgcolor' attribute Set the background color with the 'bgcolor' attribute Set the 'corners' attribute (space-separated list of corners, 'tl', 'tr', 'bl', 'br', or 'all')
schedule | ## The Schedule Composite Component ### Features The component is a viewer and does not create calendar events. You must implement CalendarViewService to supply the component with calendar events. The calendar has day, week, month and year views. Toggle between a 12 or 24 hour day view. CalendarEvents can be scheduled times or "all day" events. The component will only retrieve CalendarEvents associated with the current view. Configure the calendar to use the server timezone (default), hard code a timezone or use the EL to pass in a session scope timezone. The calendar has been styled to automatically resize to the available space. The calendar may be viewed in either 12 or 24 hour clock mode. ### How To Use Use CalendarEvent to represent a calendar event in your model Implement CalendarViewService in your model and register the implementing class as an application scope bean in faces-config Register CalendarController as a request scope bean in faces-config. Bind this bean to the schedule tag's 'bean' attribute Add the CalendarViewService implementation as a managed-property with property-name 'calendarViewService' to the CalendarController Register CalendarViewUtil as a session scope bean in faces-config with managed-bean-name "calendarViewUtil" By default the calendar will now format all Dates to the server TimeZone To change the default TimeZone add a managed-property to "calendarViewUtil" named "timeZoneId" with a valid TimeZone id value To apply a session scoped TimeZone to each instance of the calendar, use the EL in the "timeZoneId" value. For instance, #{User.timezoneId} Add <ice-cc:schedule/> to page(s) where you want to view the schedule. Nest <ice-cc:css/> in your page <head> tag.
selectDateInterval | ## The Select Date Interval Composite Component ### Features Set a start and end date Optionally add time (hours and minutes) Specify the component timezone ### How To Use Instantiate two SelectInputCalendar objects in your bean. One for the start date, one for the end date. If you wish to include time (hours, minutes) instantiate SelectInputTime objects instead. These objects will default to the server timezone. If you wish to specify a timezone, pass a TimeZone object in to the constructor. Add the <ice-cc:selectDateInterval/> tag to you page, binding the start and end dates in your bean to the 'start' and 'end' attributes. If you wish to include time, set the 'renderTime' attribute to true.
selectInputCalendar | Allows a simple input of date values
selectInputTime | The selectInputTime Composite Component allows time input
selectionTree | ## The Selection Tree Composite Component ### Renders a hierarchical tree view of selected nodes ### Features Selecting a checkbox in the tree will select all of its children Any parent in the tree will show partial selection if any of its children are checked ### How To Use Create an instance of the SelectionTreeModel class in your managed bean Create the tree model from SelectionTreeNode objects and attach the root node to the SelectionTreeModel Use the <ice-cc:selectionTree/> tag in your page. Nest <ice-cc:css/> in your page <head> tag. Bind the 'tree' attribute on the tag to your managed bean property (eg. spinner="#{myBean.tree})
selectLocale | ## The Locale Selector Composite Component ### Features The component will render an ice:selectOneMenu component with a list of the application's supported locales. Selecting a different language will dynamically apply the selected resource bundle to the user session. If no locales have been specified in the application, or only one locale is available, the component will not render anything. ### How To Use Add <ice-cc:selectLocale> to any page where you want to make a locale selection Add the attribute locale="#{localeController.sessionLocale}" to your view tag(s) Ensure a resource-bundle has been specified in faces-config.xml Ensure localized versions of the resource-bundle are present with language locale and possibly country locale. ie: messages_en.properties messages_en_US.properties Ensure each locale is registered as a supported-locale under locale-config in faces-config.xml
selectOneStateProvince | ## The Select State or Province Composite Component ### Dynamically choose a US state or Canadian province ### Features The component will render an ice:selectOneMenu component with a list of United States states or Canadian provinces. Selecting a different country will dynamically change the list bound to the component. If the United States or Canada are not specified, the component will not render. ### How To Use Add an instance of SelectOneStateProvince with getter and setter, to your bean Add an <ice-cc:selectOneStateProvince/> tag to your page Pass a reference to the bean into the component using the "bean" attribute Specify the country in the "country" attribute. Use ISO 3166-1 two-letter country codes US or CA Pass in the label (and value) of the first SelectItem using the "firstSelectItem" attribute
slider | ## The Slider Composite Component ### Features Can be used in vertical or horizontal position The rail size can be set to a custom length The image can be customized The min and max values can be customized ### How To Use Add the <ice-cc:slider/> tag to your page Add the appropriate styleClass to the h:body tag: styleClass="ice-skin-rime" or styleClass="ice-skin-sam" Add the CSS file for the chosen theme to the bottom of the page (after closing h:body tag): <h:outputStylesheet library="org.icefaces.component.skins" name="rime.css" /> Bind the 'value' attribute to an integer property on a managed bean Set the 'id' attribute Set the 'min' attribute (optional) Set the 'max' attribute (optional) Set the 'orientation' attribute (optional) Set the 'railSize' attribute (optional) Set the 'thumbImage', and 'handleCss' attributes to customize the image (optional) Set the 'singleSubmit' attribute (optional)
slideshow | ## The Slide Show Composite Component ### Features This component will generate a slide show that progresses automatically through the set of defined slides. the duration of the slides as well as the duration of the transitions can be configured. Does not require any bean code. ### How To Use Add an <ice-cc:slideshow/> tag to your page Set the slideDuration and transitionDuration attributes (each in seconds) Add an <ice-cc:slide image="image/path"/> elements as children of the slideshow element. Alternatively, you could use the <ice-cc:slides value="{valuebound array of strings}"/> to dynamically generate the list
slide | Slide Composite Component (for use with the slideshow Component)
slides | Slides Composite Component (for use with the slideshow Component)
statusBar | ## The Status Bar Composite Component ### Scrolls prominent information across the screen ### Features Hover over the Status Bar to stop the text from scrolling ### How To Use Use the <ice-cc:statusBar/> tag Set the width attribute to the desired length (in pixels) Set the value attribute to the message
tab | Tab used in the the tabView Composite Component
tabView | ## The Tab View Composite Component ### Features The Tab View composition component offers a more simplified and flexible mechanism for creating a tab-based layout, using the ICEfaces ACE tabset component Unlike the <ice:panelTabSet>, the <ice-cc:tabView> component does not need to be included in a form, so tab content can be broken into multiple forms for performance The Tabs component can include any other content, images, and components within the header ### How To Use Add the <ice-cc:tabView/> tag to your page. Set the id attribute Nest <ice-cc:tab/> tags for each tab you would like Add the appropriate styleClass to the h:body tag: styleClass="ice-skin-rime" or styleClass="ice-skin-sam" Add the CSS file for the chosen theme to the bottom of the page (after closing h:body tag): <h:outputStylesheet library="org.icefaces.component.skins" name="rime.css" /> If you would like to nest forms within the tab content, set outsideForm='true' on the tag
textSpinner | ## The Text Spinner Composite Component ### Features The Text Spinner allows you to scroll text values up and down The increment and decrement step value can be set on the bean ### How To Use Create an instance of the TextSpinner class in your managed bean Add the <ice-cc:textSpinner/> tag to your page. Nest <ice-cc:css/> in your page <head> tag. Bind the 'bean' attribute on the tag to your managed bean property (eg. bean="#{myBean.spinner})
treeTable | ## The Tree Table Composite Component ### Renders a tabular version of a tree model ### Features The Tree Table is driven by standard Swing TreeModel The Tree Table nodes can be expanded and collapsed by clicking on the folder icons Dynamic changes to the TreeModel and automatically shown in the Tree Table Tree Tables rows display colour-coding according to the level in the TreeModel ### How To Use Create an instance of the TreeTable class in your managed bean Create the tree model from TreeTableNode objects Add the <ice-cc:treeTable/> tag to your page. Nest <ice-cc:css/> in your page <head> tag. Bind the 'bean' attribute to your TreeTable bean Add <ice-cc:treeTableColumn/>s for each column you would like in your table In each <ice-cc:treeTableColumn/> use any other component and reference row-level properties through the 'row' variable name
treeTableColumn | The treeTableColumn Composite Component renders a column in the treeTable
dragAndDropTreeTable | ## The Drag and Drop Tree Table Composite Component Renders a tabular version of a tree model where node can be re-positioning in the tree, by being dragged to other branches ### Features The Tree Table is driven by standard Swing TreeModel The Tree Table nodes can be expanded and collapsed by clicking on the folder icons Dynamic changes to the TreeModel and automatically shown in the Tree Table Tree Tables rows display color-coding according to the level in the TreeModel Tree nodes can be dragged by clicking and dragging the folder or page icon to another folder Click and hold on an icon Drag the icon to onto another folder The backing TreeModel will be automatically updated with the new structure ### How To Use Create an instance of the TreeTable class in your managed bean Create the tree model from TreeTableNode objects Use the dragAndDropTreeTable tag on your page. Nest <ice-cc:css/> in your page <head> tag. Set the 'bean' attribute on the tag Add as many treeTableColumns as you would like in your table For each treeTableColumn you may use any other component and reference row-level properties through the 'row' variable name
triStateCheckbox | ## Tri State Checkbox Composite Component. ### Features The Tri State Checkbox has 3 associated states Unchecked Partially Checked Checked You can define the order of state-change. The default order is unchecked -> partially checked -> checked ### How To Use Create an instance of the SelectPartialCheckbox class in your managed bean Add the <ice-cc:triStateCheckboxcss/> tag to your page. Nest <ice-cc:css/> in your page <head> tag. Bind the bean attribute on the tag to your managed bean property (eg. bean="#{myBean.checkbox})

Overview | Library | Tag | Help
| FRAMES NO FRAMES

Java, JSP, and JavaServer Pages are trademarks or registered trademarks of Sun Microsystems, Inc. in the US and other countries. Copyright 2002-3 Sun Microsystems, Inc. 4150 Network Circle Santa Clara, CA 95054, U.S.A. All Rights Reserved.