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