Author: artdaw Date: 2009-08-18 13:11:51 -0400 (Tue, 18 Aug 2009) New Revision: 15207 Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_actionparam.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_ajaxListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandButton.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandLink.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_form.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_htmlCommandLink.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_include.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_jsFunction.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_keepAlive.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadBundle.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadScript.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadStyle.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_log.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_mediaOutput.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_outputPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_poll.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_portlet.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_push.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_queue.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_region.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_repeat.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_status.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_support.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_ajaxValidator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_beanValidator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_calendar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_changeExpandListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_colorPicker.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_column.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columnGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columns.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_comboBox.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_componentControl.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_contextMenu.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataDefinitionList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataFilterSlider.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataGrid.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataOrderedList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_datascroller.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dndParam.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragIndicator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragSupport.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropDownMenu.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropSupport.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_editor.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_extendedDataTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_fileUpload.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_gmap.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_graphValidator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_hotKey.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSlider.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSpinner.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_insert.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_jQuery.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layout.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layoutPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_listShuttle.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuItem.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuSeparator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_message.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_messages.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_nodeSelectListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_orderingList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_paint2D.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBarItem.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenu.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuItem.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_pickList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_progressBar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_recursiveTreeNodesAdaptor.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_scrollableDataTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_separator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_simpleTogglePanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_spacer.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_subTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_suggestionbox.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tabPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toggleControl.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_togglePanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBarGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolTip.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tree.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNode.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNodesAdaptor.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_virtualEarth.xml Removed: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator1.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listener.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.desc.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.xml Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.xml branches/community/3.3.X/docs/userguide/en/src/main/docbook/master.xml branches/community/3.3.X/docs/userguide/pom.xml Log: https://jira.jboss.org/jira/browse/RF-7275 - components were restructured Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_actionparam.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_actionparam.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_actionparam.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,147 @@ +<section role="NotInToc" id="a4j_actionparam"> + <title> + &lt; + a4j:actionparam + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section role="NotInToc"> + <sectioninfo> + <keywordset> + <keyword>a4j:actionparam</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:actionparam&gt;</property> + </emphasis> component combines the functionality of both JSF <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;f:actionListener&gt;</property> + </emphasis> + and allows to assign the value to the property of the manager bean directly using the <emphasis> + <property>assignTo</property> + </emphasis> attribute. + </para> + + </section> + <section> + <title>Details of Usage</title> + <para> + The component <emphasis role="bold"> + <property>&lt;a4j:actionparam&gt;</property> + </emphasis> is a combination of the functionality of two JSF tags: + <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;f:actionListener&gt;</property> + </emphasis>. + </para> + <para>At the render phase, it's decoded by parent component (<emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis> or like) as usual. + At the process request phase, if the parent component performs an action event, update the <emphasis> + <property>"value"</property> + </emphasis> specified in the + <emphasis> + <property>"assignTo"</property> + </emphasis>attribute as its <emphasis> + <property>"value"</property> + </emphasis>. + If a <emphasis> + <property>"converter"</property> + </emphasis> attribute is specified, use it to encode and decode the <emphasis> + <property>"value"</property> + </emphasis> to a string stored in the html parameter. + To make the <emphasis> + <property>"assignTo"</property> + </emphasis> attribute usable add the <code>actionParam</code> instance to the parent component as an action listener. + </para> + <para> + <emphasis role="bold"> + <property>&lt;a4j:actionparam&gt;</property> + </emphasis>has a <emphasis> + <property>"noEscape"</property> + </emphasis> attribute. + If it is set to <property>"true"</property>, the <emphasis> + <property>"value"</property> + </emphasis> is evaluated as a JavaScript code. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;script&gt; + ... + var foo = "bar"; + ... +&lt;/script&gt; +... +&lt;a4j:actionparam noEscape="true" name="param1" value="foo" assignTo="#{bean.prop1}" /&gt; +...</programlisting> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:param&gt;</property> + </emphasis> extends <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis>, + so the <emphasis> + <property>"name"</property> + </emphasis> attribute is mandatory. + Otherwise, the <emphasis> + <property>"value"</property> + </emphasis> misses due missing the request parameter name for it. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/actionparam.html">Table of + &lt;a4j:actionparam&gt; + attributes</ulink>. + </para> + <table frame="all"> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.ActionParameter</entry> + </row> + + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlActionParameter</entry> + </row> + + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/actionparam... page</ulink> at RichFaces LiveDemo for examples of component usage abd their sources. + </para> + <para> + More information can be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>. + </para> + <para> + More information about <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;f:actionListener&gt;</property> + </emphasis>can be found <ulink url="http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs/ind... Sun JSF TLD documentation</ulink>. + </para> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_ajaxListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_ajaxListener.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_ajaxListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,152 @@ +<section role="NotInToc" id="a4j_ajaxListener"> + <title> + &lt; + a4j:ajaxListener + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component adds an action listener to a parent component to provide possibility of Ajax update. + It works like the <emphasis role="bold"> + <property>&lt;f:actionListener&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;f:valueChangeListener&gt;</property> + </emphasis> JSF components + but for the whole Ajax container. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>The listener is invoked for Ajax requests only</para> + </listitem> + <listitem> + <para>The listener is always guaranteed to be invoked</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:ajaxListener&gt;</property> + </emphasis> component adds an action listener to a parent component, which needs to be provided with Ajax support. + That listener is invoked on each Ajax request during the "Render Response" JSF phase. + In comparison with JSF <emphasis role="bold"> + <property>&lt;f:actionListener&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;f:valueChangeListener&gt;</property> + </emphasis> + the invocation of the <emphasis role="bold"> + <property>&lt;a4j:ajaxListener&gt;</property> + </emphasis> is not skipped in case when validation of Update Model fails. + The <emphasis role="bold"> + <property>&lt;a4j:ajaxListener&gt;</property> + </emphasis> is guarantied to be invoked for each Ajax response. + </para> + + <note> + <para> + Ajax listener is not invoked for non-Ajax requests and when RichFaces works in the "Ajax Request generates Non-Ajax Response" mode. + </para> + </note> + + <para> + As example of the <emphasis role="bold"> + <property>&lt;a4j:ajaxListener&gt;</property> + </emphasis> component usage one can cite an updating the list of re-rendered components. +</para> + + <para> + The <emphasis> + <property>"type"</property> + </emphasis> attribute defines the fully qualified Java class name for the listener. + This Java class implements <code> + <ulink url="&apidoc_framework;org/ajax4jsf/event/AjaxListener.html"> + <property>org.ajax4jsf.event.AjaxListener</property> + </ulink> + </code>interface, which is base interface for all listeners, capable for receiving Ajax events. + The source of the event could be accessed using the <code> + <ulink url="http://java.sun.com/j2se/1.4.2/docs/api/java/util/EventObject.h... + <property>java.util.EventObject.getSource()</property> + </ulink> + </code> call. +</para> + + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;a4j:commandLink id="cLink" value="Click it To Send Ajax Request"&gt; + &lt;a4j:ajaxListener type="demo.Bean"/&gt; +&lt;/a4j:commandLink&gt; +...</programlisting> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="JAVA">package demo; + +import org.ajax4jsf.event.AjaxEvent; + +public class Bean implements org.ajax4jsf.event.AjaxListener{ + ... + public void processAjax(AjaxEvent arg){ + //Custom Developer Code + } + ... +}</programlisting> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/ajaxListener.html">Table of + &lt;a4j:ajaxListener&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + + <row> + <entry>listener-class</entry> + <entry>org.ajax4jsf.event.AjaxListener</entry> + </row> + <row> + <entry>event-class</entry> + <entry>org.ajax4jsf.event.AjaxEvent</entry> + </row> + + <row> + <entry>tag-class</entry> + <entry>org.ajax4jsf.taglib.html.jsp.AjaxListenerTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/ajaxListene... page at RichFaces Livedemo for examples of component usage and their sources. + </para> + <para> + Check Sun JSF TLD documentation for more information on <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... tag</ulink>. + </para> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandButton.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandButton.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandButton.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,204 @@ +<section role="NotInToc" id="a4j_commandButton"> + <title> + &lt; + a4j:commandButton + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:commandButton</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>component is very similar to JSF <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis>, the only difference is that an Ajax form submit is generated on a click and it allows dynamic rerendering after a response comes back. + </para> + + <figure> + <title> + The <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> component rendered in Blue Sky skin + </title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/commandButton_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> component is used in the same way as JSF <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis>. + The difference is that in case of <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> the components to be updated should be specified. + </para> + + <para> + The example <link linkend="CB_example">above</link> generates the following HTML code: + </para> + + <programlisting role="XML">&lt;input type="submit" onclick="A4J.AJAX.Submit(request parameters);return false;" value="Button"/&gt;</programlisting> + + <para> + Сlicking the generated anchor fires the utility method <code>A4J.AJAX.Submit()</code> that perfroms Ajax request. + </para> + + <note> + <title>Note:</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> already has Ajax support built-in and there is no need to add <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>. + </para> + </note> + + <para> + The usage of the keyword <code>'this'</code> in JavaScript code in the value for <emphasis> + <property>"oncomplete"</property> + </emphasis> attribute depends on the location of <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>. + If the <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> is situated outside the re-rendered region it is possible to use keyword <property>'this'</property> as in the following example: + </para> + <programlisting role="XML">&lt;h:form&gt; + &lt;a4j:commandButton action="director.rollCamera" onclick="this.disabled=true" oncomplete="this.disabled=false" /&gt; +&lt;/h:form&gt;</programlisting> + + <para> + Otherwise, if the <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> is contained in a re-rendered region + than the <emphasis> + <property>"oncomplete"</property> + </emphasis> attribute has a problem with obtaining a reference of the + <property>commandButton</property> object when using the keyword <code>'this'</code>. + In this case use the <emphasis> + <property>"oncomplete"</property> + </emphasis> attribute as in the following example: + </para> + + <programlisting role="XML">&lt;h:form id="form"&gt; + &lt;a4j:commandButton id="cbutton" action="director.rollCamera" onclick="this.disabled=true" oncomplete="document.getElementById('form:cbutton').disabled=false" /&gt; +&lt;/h:form&gt;</programlisting> + + <para> + Common JSF navigation could be performed after an Ajax submit and partial rendering, but Navigation Case must be defined as <emphasis role="bold"> + <property>&lt;redirect/&gt;</property> + </emphasis> in order to avoid problems with some browsers. + </para> + + <para> + As any Core Ajax component that sends Ajax requests and processes server responses the <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> has all attributes that provide the required behavior of requests (delay, limitation of submit area and rendering, etc.) + </para> + + <note> + <title>Note:</title> + <para> + When attaching a JavaScript API function to the <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> with the help of the <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> do not use the <emphasis> + <property>"attachTo"</property> + </emphasis> attribute of the last one. + The attribute adds event handlers using <code>Event.observe</code> but <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> has no such event. + The example below will not work: + </para> + <programlisting role="XML">&lt;a4j:commandButton value="Show Current Selection" reRender="table" action="#{dataTableScrollerBean.takeSelection}" id="button"&gt; + &lt;rich:componentControl attachTo="button" for="panel" event="oncomplete" operation="show" /&gt; +&lt;/a4j:commandButton&gt;</programlisting> + + <para> + This one should work properly: + </para> + <programlisting role="XML">&lt;a4j:commandButton value="Show Current Selection" reRender="table" action="#{dataTableScrollerBean.takeSelection}" id="button"&gt; + &lt;rich:componentControl for="panel" event="oncomplete" operation="show" /&gt; +&lt;/a4j:commandButton&gt;</programlisting> + </note> + + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the "<link linkend="process">Decide what to process</link>" guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/commandButton.html">Table of + &lt;a4j:commandButton&gt; + attributes</ulink>. + </para> + <table frame="all"> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.CommandButton</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Command</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxCommandButton</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxCommandButtonRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para>Visit + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandButt... demo</ulink> page at RichFaces + live demo for examples of component usage and their sources. + </para> + <!-- + <para>Useful articles:</para> + <itemizedlist> + <listitem> + <para> + + </para> + </listitem> + </itemizedlist> + --> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandLink.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandLink.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_commandLink.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,152 @@ +<section role="NotInToc" id="a4j_commandLink"> + <title> + &lt; + a4j:commandLink + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:commandLink</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> The <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis>component is very similar to the <emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis> component, the only difference is that an Ajax form submit is generated on a click and it allows dynamic rerendering after a response comes back. It's not necessary to plug any support into the component, as Ajax support is already built in.</para> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis> component is used in the same way as JSF <emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis>. + The difference is that in case of <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis> the components to be updated should be specified. + In this chapter we will use the code from <link linkend="RichFacesGreeterindex">RichFaces Greeter</link> and change there <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis> to <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis>: + </para> + + <programlisting role="XML">... +&lt;a4j:commandLink value="Get greeting" reRender="greeting" /&gt; +...</programlisting> + + <para> + It's not necessary to add nested <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> as the <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis> has an Ajax support already built-in. + As a result of our changes we will get a form with "Get greeting" link instead of the button: + </para> + <figure> + <title> + The RicjFaces greeter with <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis> + </title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/commandLink_init.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The example <link linkend="CL_example">above</link> generates the following HTML code: + </para> + + <programlisting role="XML">&lt;a href="#" onclick="A4J.AJAX.Submit(?"request parameters"); return false;"&gt;&lt;span&gt;Get greeting&lt;/span&gt;&lt;/a&gt;</programlisting> + + <para> + If you click on the generated anchor the utility method <code>A4J.AJAX.Submit()</code> will be fired. + + </para> + <note> + <title>Note:</title> + <para> + Common JSF navigation could be performed after Ajax submit and partial rendering, but Navigation Case must be defined as <emphasis role="bold"> + <property>&lt;redirect/&gt;</property> + </emphasis> in order to avoid problems with some browsers. + </para> + </note> + + <para> + As any Core Ajax component that sends Ajax requests and processes server responses the <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis> has all attributes that provide the required behavior of requests (delay, limitation of submit area and rendering, etc.) + </para> + + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find "<link linkend="process">Decide what to process</link>" guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/commandLink.html">Table of + &lt;a4j:commandLink&gt; + attributes</ulink>. + </para> + <table frame="all"> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.CommandLink</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Command </entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxCommandLink</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxCommandLinkRenderer </entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para>Visit + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandLink... demo</ulink> page at RichFaces + live demo for examples of component usage and their sources. + </para> + <para>Useful articles:</para> + <itemizedlist> + <listitem> + <para> + <ulink url="http://www.jboss.org/community/docs/DOC-11850">How to use "window.confirm" JavaScript with &lt;a4j:commandLink&gt; "onclick" attribute</ulink> + in RichFaces cookbook at JBoss portal. + </para> + </listitem> + </itemizedlist> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_form.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_form.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_form.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,140 @@ +<section role="NotInToc" id="a4j_form"> + <title> + &lt; + a4j:form + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:form</keyword> + <keyword>component</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:form&gt;</property> + </emphasis> component is very similar to JSF <emphasis role="bold"> + <property>&lt;h:form&gt;</property> + </emphasis> the only difference is in generation of links inside and possibility of default Ajax submission. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The difference with the original component is that all hidden fields + required for command links are always rendered and it doesn't depend + on links rendering on the initial page. It solves the problem with + invalid links that weren't rendered on a page immediately, but after + some Ajax request.</para> + <para>Beginning with release 1.0.5 additional attributes that make this form + variant universal have appeared. </para> + <para> If <emphasis> + <property>"ajaxSubmit"</property> + </emphasis> attribute is true, it becomes possible to set Ajax + submission way for any components inside with the help of the javascript + <code>A4J.AJAX.Submit(...)</code>call. In this case, the <emphasis> + <property>"reRender"</property> + </emphasis> attribute contains a list of Ids of components defined for + re-rendering. If you have <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis> inside the form, they work as <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:form id="helloForm" ajaxSubmit="true" reRender="table"&gt; + ... + &lt;t:dataTable id="table"... &gt; + ... + &lt;/t:dataTable&gt; + ... + &lt;t:datascroller for="table"... &gt; + ... + &lt;/t:datascroller&gt; + ... +&lt;/a4j:form&gt; +</programlisting> + <para> + This example shows that in order to make <emphasis role="bold"> + <property>&lt;t:datascroller&gt;</property> + </emphasis> submissions to be Ajax ones it's required only to place this <emphasis role="bold"> + <property>&lt;t:datascroller&gt;</property> + </emphasis> into <emphasis role="bold"> + <property>&lt;a4j:form&gt;</property> + </emphasis>. + In the other case it is necessary to redefine renders for its child links elements that are defined as <emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis> and can't be made Ajax ones with using e.g. <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>. + </para> + <para> + With the help of <emphasis> + <property>"limitToList"</property> + </emphasis> attribute you can limit areas, which are updated after the responses. + If <emphasis> + <property>"limitToList"</property> + </emphasis> is true, only the reRender attribute is taken in account. + Therefore, if you use blocks of text wrapped with <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> and <code>ajaxRendered= "true"</code>, blocks of text are ignored. + </para> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the "<link linkend="process">Decide what to process</link>" guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/form.html">Table of + &lt;a4j:form&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Form</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Form</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxForm</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.FormRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf?c=... at RichFaces Livedemo for examples of component usage and their sources. + a</para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_htmlCommandLink.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_htmlCommandLink.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_htmlCommandLink.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,96 @@ +<section role="NotInToc" id="a4j_htmlCommandLink"> + <title> + &lt; + a4j:htmlCommandLink + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:htmlCommandLink</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:htmlCommandLink&gt;</property> + </emphasis> component is very similar to the same component from the JSF HTML library, the only slight difference is in links generation and problem solving that occurs when an original component is used.</para> + </section> + <section> + <title>Details of Usage</title> + <para>The difference with the original component is that all hidden fields required for command links with the child <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> elements are always rendered and it doesn't depend on links rendering on the initial page. It solves the problem with invalid links that weren't rendered on a page immediately, but after some Ajax request.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:form&gt; + ... + &lt;a4j:htmlComandLink action="action" value="link" rendered="#{bean.rendered}"&gt; + &lt;f:param .../&gt; + &lt;a4j:htmlComandLink&gt; + ... +&lt;/a4j:form&gt; +</programlisting> + <para>In this example <emphasis role="bold"> + <property>&lt;a4j:htmlCommandLink&gt;</property> + </emphasis>works as standard <emphasis role="bold"> + <property>&lt;h:commandLink&gt;</property> + </emphasis>, but here hidden fields required for correct functionality are rendered before the first downloading of a page, though it doesn't happen if its attribute isn't set to "false".</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/htmlCommandLink.html">Table of + &lt;a4j:htmlCommandLink&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>javax.faces.HtmlCommandLink</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Command</entry> + </row> + <row> + <entry>component-class</entry> + <entry>javax.faces.component.html.HtmlCommandLink</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.HtmlCommandLinkRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/htmlCommand... RichFaces LiveDemo page </ulink> you can found some additional information for <emphasis role="bold"> + <property>&lt;a4j:htmlCommandLink&gt;</property> + </emphasis> component usage. + </para> + <para> + <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... RichFaces LiveDemo page </ulink> you can found some additional information about <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> component. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_include.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_include.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_include.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,108 @@ +<section role="NotInToc" id="a4j_include"> + <title> + &lt; + a4j:include + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:include</keyword> + <keyword>component</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:include&gt;</property> + </emphasis> component is used to include one view as part of another and navigate there using standard JSF navigation. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The component is used to include one view as part of another and may be put anywhere in the page code. + The <emphasis> + <property>'viewID'</property> + </emphasis> attribute is used to point at the part to be included and should present a full context-relative path of the resource in order to be used as from-view and to-view in the JSF navigation cases. + In general the component functions as Fecelets <emphasis role="bold"> + <property>&lt;ui:include&gt;</property> + </emphasis> tag but with partial page navigation in Ajax mode as an advantage. + </para> + <note> + <title>Note:</title> + <para> + To make the RichFaces<emphasis role="bold"> + <property>&lt;a4j:include&gt;</property> + </emphasis> component (as well as Facelets<emphasis role="bold"> + <property>&lt;ui:include&gt;</property> + </emphasis> tag) work properly when including the part of the page check that included page does not generates extra HTML &lt;!DOCTYPE&gt;, &lt;html&gt;, &lt;body&gt; tags. + </para> + </note> + + <para> + The navigation rules could look as following: + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;navigation-rule&gt; + &lt;from-view-id&gt;/pages/include/first.xhtml&lt;/from-view-id&gt; + &lt;navigation-case&gt; + &lt;from-outcome&gt;next&lt;/from-outcome&gt; + &lt;to-view-id&gt;/pages/include/second.xhtml&lt;/to-view-id&gt; + &lt;/navigation-case&gt; +&lt;/navigation-rule&gt;</programlisting> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/include.html">Table of + &lt;a4j:include&gt; + attributes</ulink>. + </para> + <table frame="all"> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Include</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Output</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.Include</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxIncludeRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/include.jsf... page</ulink> for examples of component usage and their sources. + </para> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_jsFunction.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_jsFunction.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_jsFunction.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,143 @@ +<section role="NotInToc" id="a4j_jsFunction"> + <title> + &lt; + a4j:jsFunction + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:jsFunction</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:jsFunction&gt;</property> + </emphasis> component allows to perform Ajax requests directly from JavaScript code, invoke server-side data and return it in a JSON format to use in a client JavaScript calls. + </para> + </section> + <section> + <title>Details of Usage</title> + + <para> + As the component uses Ajax request to get data from server it has all common Ajax Action attributes. + Hence, <emphasis> + <property>"action"</property> + </emphasis> and<emphasis> + <property> "actionListener" </property> + </emphasis>can be invoked, and reRendering some parts of + the page fired after calling function. </para> + <para> When using the <emphasis role="bold"> + <property>&lt;a4j:jsFunction&gt;</property> + </emphasis> it's possible to initiate the Ajax request from the JavaScript and + perform partial update of a page and/or invoke the JavaScript function with data returned by + Ajax response. </para> + <programlisting role="XML">&lt;body onload="callScript()"&gt; + &lt;h:form&gt; + ... + &lt;a4j:jsFunction name="callScript" data="#{bean.someProperty1}" reRender="someComponent" oncomplete="myScript(data.subProperty1, data.subProperty2)"&gt; + &lt;a4j:actionparam name="param_name" assignTo="#{bean.someProperty2}"/&gt; + &lt;/a4j:jsFunction&gt; + ... + &lt;/h:form&gt; + ... + &lt;/body&gt;</programlisting> + + <para> + The <emphasis role="bold"> + <property>&lt;a4j:jsFunction&gt;</property> + </emphasis> allows to use <emphasis role="bold"> + <property>&lt;a4j:actionparam&gt;</property> + </emphasis> or pure <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> for passing any number of parameters of the JavaScript function into Ajax request. + <emphasis role="bold"> + <property>&lt;a4j:jsFunction&gt;</property> + </emphasis> is similar to <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>, but it could be activated from the JavaScript code. + It allows to invoke some server-side functionality and use the returned data in the JavaScript function invoked from <emphasis> + <property>"oncomplete"</property> + </emphasis> attribute. + Hence it's possible to use <emphasis role="bold"> + <property>&lt;a4j:jsFunction&gt;</property> + </emphasis> instead of <emphasis role="bold"> + <property>&lt;a4j:commandButton&gt;</property> + </emphasis>. + You can put it anywhere, just don't forget to use <emphasis role="bold"> + <property>&lt;h:form&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;/h:form&gt;</property> + </emphasis> around it. + </para> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find "<link linkend="process">Decide what to process</link>" guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/jsFunction.html">Table of + &lt;a4j:jsFunction&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Function</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.components.ajaxFunction</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlajaxFunction</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.ajaxFunctionRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/jsFunction.... page</ulink> at RichFaces LiveDemo for component usage and sources for the given examples. + </para> + + <para> + Useful articles: + </para> + <itemizedlist> + <listitem> + <para> + "<ulink url="http://www.jboss.org/community/docs/DOC-11856">JsFuncti... article in the RichFaces Cookbook describes how to use <emphasis role="bold"> + <property>"a4j:jsFunction"</property> + </emphasis> to call the jsonTest backing bean that generates some random data in a JSON String; + </para> + </listitem> + + </itemizedlist> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_keepAlive.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_keepAlive.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_keepAlive.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,106 @@ +<section role="NotInToc" id="a4j_keepAlive"> + <title> + &lt; + a4j:keepAlive + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:keepAlive</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:keepAlive&gt;</property> + </emphasis> tag allows to keep a state of a bean between + requests.</para> + + </section> + <section> + <title>Details of Usage</title> + <para> + If a managed bean is declared with <property>request</property> scope in the configuration file with the help of <emphasis role="bold"> + <property>&lt;managed-bean-scope&gt;</property> + </emphasis> tag then the life-time of this bean instance is valid only for the current request. Any attempts to make a reference to the bean instance after the request end will throw in Illegal Argument Exception by the server. + To avoid these kinds of Exceptions component <emphasis role="bold"> + <property>&lt;a4j:keepAlive&gt;</property> + </emphasis> is used to maintain the state of the whole bean object among subsequent request. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">&lt;a4j:keepAlive beanName = "#{myClass.testBean}"/&gt;</programlisting> + + <para> The <emphasis> + <property>"beanName"</property> + </emphasis> attribute defines the request scope bean name you'd like to re-use. Note that this attribute must point to a legal JSF EL expression which resolves to a managed mean instance. + For example for the above code the class definition may look like this one: + </para> + <programlisting role="JAVA">class MyClass{ + ... + private TestBean testBean; + // Getters and Setters for testBean. + ... +} +</programlisting> + + <para> + The <emphasis> + <property>"ajaxOnly"</property> + </emphasis> attribute declares whether the value of the bean should be available during a non-Ajax request. + If the value of this attribute is "true" a request scope bean keeps the same value during Ajax requests from the given page. + If a non-Ajax request is sent from this page the bean is re-created as a regular request scope bean. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/keepAlive.html">Table of + &lt;a4j:keepAlive&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.components.KeepAlive</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.components.AjaxKeepAlive</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.components.AjaxKeepAlive</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/keepAlive.j... page</ulink> at RichFaces Livedemo for examples of component usage and their sources. + </para> + + <para> + Search the <ulink url="http://www.jboss.org/index.html?module=bb&amp;op=viewforum&... Users forum</ulink> for some additional information about usage of component. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadBundle.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadBundle.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadBundle.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,228 @@ +<section role="NotInToc" id="a4j_loadBundle"> + <title> + &lt; + a4j:loadBundle + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:loadBundle</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:loadBundle&gt;</property> + </emphasis> component is similar to JSF <emphasis role="bold"> + <property>&lt;f:loadBundle&gt;</property> + </emphasis>: + it loads a resource bundle localized for the Locale of the current view and stores properties as a Map in the current request attributes of the current request. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + Internationalization and Localization are the processes of adaptation of web applications for different languages and cultures. + When you develop English and German versions of a site it can be said that you localize the site for England and Germany. + Language is not the only thing that undergoes the localization — dates, times, numbers, currencies, phone numbers, addresses, graphics, icons, colors, personal titles and even favourite sounds are also varies from country to country. + It means that an internationalized application may have lots of different types information, which should be changed depending on user location. + </para> + <para> + There are several approaches of organizing the localization. + The JSF <emphasis role="bold"> + <property>&lt;h:loadBundle&gt;</property> + </emphasis> loads bundles into the request scope when page is being rendered and updates all the needed areas in a crowd. + Bundle information loaded in such way becomes unavailable when dealing with Ajax requests that work in their own request scopes. + The approach provided by RichFaces <emphasis role="bold"> + <property>&lt;a4j:loadBundle&gt;</property> + </emphasis> component enriches one given by the JSF <emphasis role="bold"> + <property>&lt;h:loadBundle&gt;</property> + </emphasis> with Ajax capability: + it allows to use reference to a particular bundle item during an Ajax update. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:loadBundle&gt;</property> + </emphasis> usage is pretty simple. + Imagine a small application that says "Hello!" in different languages, where switching between translations (localizations, in our case) occurs when corresponding links are being clicked, like you have used to see on lots of sites. + In our JSF with RichFaces application (those who feel not strong with that should better read the "<link linkend="GettingStarted">Getting started with RichFaces</link>" chapter) create resource bundles with "Hello!" message for three different languages: English, German and Italian. + Resource bundles are represented with <code>*.properties</code> extention files that keep items in <code>key(name) - value</code> pairs. + A key for an item should be the same for all locales. + </para> + <figure> + <title> + Resource bundles <code>*.properties</code> files with Keys and Values for multi-language application. + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/loadBundle_init.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + Мessage resource bundles should be registered in the Faces configuration (<code>faces-config.xml</code>) file of your application as <code>&lt;message-bundle&gt;</code> inside the <code>&lt;application&gt;</code> element. + Name of a resource should be specified without language or country code and without <code>.properties</code> extension. + Supported locales should be specified inside the <code>&lt;supported-locale&gt;</code> element. + </para> + <para> + <emphasis role="bold">Registering resource bundles in the Faces configuration file:</emphasis> + </para> + <programlisting role="XML">&lt;application&gt; + &lt;locale-config&gt; + &lt;default-locale&gt;en&lt;/default-locale&gt; + &lt;supported-locale&gt;en&lt;/supported-locale&gt; + &lt;supported-locale&gt;de&lt;/supported-locale&gt; + &lt;supported-locale&gt;it&lt;/supported-locale&gt; + &lt;/locale-config&gt; + &lt;message-bundle&gt;demo.message&lt;/message-bundle&gt; +&lt;/application&gt;</programlisting> + + <para> + For the application we will use JSF <code>javax.faces.component.UIViewRoot.setLocale</code> method that will set a needed Locale + (each link will invoke corresponding method — there are, off course, another ways to do that). + </para> + <para> + <emphasis role="bold"> + <code>ChangeLocale</code> Java class with three methods for setting the correponding Locale:</emphasis> + </para> + <programlisting role="JAVA">package demo; + + import java.util.Locale; + import javax.faces.context.FacesContext; + + public class ChangeLocale { + public String germanAction() { + FacesContext context = FacesContext.getCurrentInstance(); + context.getViewRoot().setLocale(Locale.GERMAN); + return null; + } + + public String englishAction() { + FacesContext context = FacesContext.getCurrentInstance(); + context.getViewRoot().setLocale(Locale.ENGLISH); + return null; + } + + public String italianAction() { + FacesContext context = FacesContext.getCurrentInstance(); + context.getViewRoot().setLocale(Locale.ITALIAN); + return null; + } +}</programlisting> + + <para> + Recently, the JSP page will look as following: + </para> + + <programlisting role="XML">&lt;h:form&gt; + &lt;a4j:loadBundle var="msg" basename="demo.message"/&gt; + &lt;h:outputText id="messageBundle" value="#{msg.greeting}"/&gt; + &lt;a4j:commandLink value="De" action="#{changeLocale.germanAction}" reRender="messageBundle" /&gt; + &lt;a4j:commandLink value="Eng" action="#{changeLocale.englishAction}" reRender="messageBundle" /&gt; + &lt;a4j:commandLink value="It" action="#{changeLocale.italianAction}" reRender="messageBundle" /&gt; +&lt;/h:form&gt; </programlisting> + + <para> + As an output we will get a simple application with English "Hello!" by default. + Clicking on links "De", "Eng" and "It" will show the messages specified within the corresponding <code>*.properties</code> file. + To reference to a particular bundle item during an Ajax update it is necessary to point the component(s) that shold be re-rendered (in this example it is done with the help of <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis> + <emphasis> + <property>"reRender"</property> + </emphasis> attribute). + </para> + + <figure> + <title> + Using of the RichFaces <emphasis role="bold"> + <property>&lt;a4j:loadBundle&gt;</property> + </emphasis> component for application localization. + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/loadBundle2.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/loadBundle.html">Table of + &lt;a4j:loadBundle&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Bundle</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.Bundle</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxLoadBundle</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/bundle.jsf?... page</ulink> at RichFaces LiveDemo for additional information on the component. + </para> + <para> + More useful examples and articles: + </para> + <itemizedlist> + <listitem> + <para> + <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... tag reference</ulink> at java.sun portal; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://java.sun.com/docs/books/tutorial/i18n/resbundle/propfile... a ResourceBundle with Properties Files</ulink> at java.sun portal; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://www.objectsource.com/j2eechapters/Ch19-I18N_and_L10N.htm... and Localization of J2EE application</ulink> explains main principles of the internationalization of a web application; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://www.laliluna.de/javaserver-faces-message-resource-bundle-tutorial.html">one more useful tutorial</ulink> explains the internationalization of a web application using JSF message resource bundle; + </para> + </listitem> + + <listitem> + <para> + <ulink url="http://www.i-coding.de/www/en/jsf/application/locale.html">Some special problem with JSF internationalization</ulink> and solution from the i-coding.de portal. + </para> + </listitem> + + </itemizedlist> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadScript.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadScript.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadScript.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,92 @@ +<section role="NotInToc" id="a4j_loadScript"> + <title> + &lt; + a4j:loadScript + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>loadScript</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:loadScript&gt;</property> + </emphasis> component allows to load scripts from alternative sources like a jar files, etc. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The main attribute of the <emphasis role="bold"> + <property>&lt;a4j:loadScript&gt;</property> + </emphasis> is <emphasis> + <property>"src"</property> + </emphasis>, wich defines the context relative path to the script. + The value of the attribute does not require a prefix of an application. + Leading slash in the path means the root of the web context. + It is also possible to use <code>resource:///</code> prefix to access the script file using RichFaces resource framework. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:loadScript src="resource:///org/mycompany/assets/script/focus.js" /&gt;</programlisting> + <para> + The <emphasis> + <property>"src"</property> + </emphasis> attribute passses value to the <code>getResourceURL()</code> method of the ViewHandler of the application, + The result is passed through the <code>encodeResourceURL()</code> method of the ExternalContext. + </para> + + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/loadScript.html">Table of + &lt;a4j:loadScript&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.LoadScript</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.LoadScript</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlLoadScript</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.LoadScriptRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/script.jsf?... page at RichFaces LiveDemo</ulink> for examples of component usage abd their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadStyle.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadStyle.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_loadStyle.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,92 @@ +<section role="NotInToc" id="a4j_loadStyle"> + <title> + &lt; + a4j:loadStyle + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>loadStyle</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:loadStyle&gt;</property> + </emphasis> component allows to load a style sheet file from alternative sources like a jar file, etc. + It inserts stylesheet links to the head element. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The main attribute of the <emphasis role="bold"> + <property>&lt;a4j:loadStylet&gt;</property> + </emphasis> is <emphasis> + <property>"src"</property> + </emphasis>, wich defines the context relative path to the script. + The value of the attribute does not require a prefix of an application. + Leading slash in the path means the root of the web context. + It is also possible to use <code>resource:///</code> prefix to access the script file using RichFaces resource framework. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:loadStyle src="resource:///org/mycompany/assets/script/focus.js" /&gt;</programlisting> + <para> + The <emphasis> + <property>"src"</property> + </emphasis> attribute passses value to the <code>getResourceURL()</code> method of the ViewHandler of the application, + The result is passed through the <code>encodeResourceURL()</code> method of the ExternalContext. + </para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/loadStyle.html">Table of + &lt;a4j:loadStyle&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.LoadStyle</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.LoadStyle</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlLoadStyle</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.LoadStyleRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf?c... page at RichFaces LiveDemo</ulink> for examples of component usage abd their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_log.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_log.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_log.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,111 @@ +<section role="NotInToc" id="a4j_log"> + <title> + &lt; + a4j:log + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:log</keyword> + <keyword>component</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:log &gt;</property> + </emphasis> component generates JavaScript that opens a debug window with useful debug information.</para> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:log &gt;</property> + </emphasis> component generates JavaScript that opens a log window with useful debug information, + which contains data on requests and responses, DOM tree changes et al. + The log could be generated not only in a new window, but also on the current page in a separate <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> element. + This feature is controlled with the component <emphasis> + <property>"popup"</property> + </emphasis> attribute. + The window is opened on pressing of "CTRL+SHIFT+L", which is default registered key. + The hot key could be changed with the <emphasis> + <property>"hotkey"</property> + </emphasis> attribute, where it's necessary to define one letter that together with "CTRL+SHIFT" opens a window. + </para> + + + <para> + The <emphasis> + <property>"level"</property> + </emphasis> attribute has several possible values "FATAL", "ERROR", "WARN", "INFO", "ALL" and is used when it is necessary to change a logging level. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:log level="ALL" popup="false" width="400" height="200"/&gt;</programlisting> + + <para> + The component defined this way is decoded on a page as <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> inside a page, where all the information beginning with informational message is generated.</para> + <note> + <title>Note:</title> + <para> + <emphasis role="bold"> + <property>&lt;a4j:log&gt;</property> + </emphasis> is getting renewed automatically after execution of Ajax requests. Do not renew <emphasis role="bold"> + <property>&lt;a4j:log&gt;</property> + </emphasis> by using reRender!</para> + </note> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/log.html">Table of + &lt;a4j:log&gt; + attributes</ulink>. + </para> + <table frame="all"> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Log</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.Log</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxLog</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.LogRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/log.jsf?c=l... page</ulink> at RichFaces LiveDemo for example of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_mediaOutput.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_mediaOutput.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_mediaOutput.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,215 @@ +<section role="NotInToc" id="a4j_mediaOutput"> + <title> + &lt; + a4j:mediaOutput + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:mediaOutput</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:mediaOutput&gt;</property> + </emphasis> component is a facility for generating images, video, sounds and other binary resources defined by you on-the-fly. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:mediaOutput&gt;</property> + </emphasis> component is used for generating images, videos or sounds on-the-fly. + Let's consider an image creation and generate a JPEG image with verification digits for captcha (the image will include just digits without any graphical noise and distortion). + </para> + <para> + Write the following line on the page: + </para> + <programlisting role="XML">&lt;a4j:mediaOutput element="img" cacheable="false" session="false" createContent="#{mediaBean.paint}" value="#{mediaData}" mimeType="image/jpeg"/&gt;</programlisting> + + <para> + As You see from the example above, first it is necessary to specify the kind of media data You want to generate. + This can be done with the help of <emphasis> + <property>"element"</property> + </emphasis> attribute, which possible values are <code>img</code>, <code>object</code>, <code>applet</code>, <code>script</code>, <code>link</code> or <code>a</code>. + </para> + <para> + The <emphasis> + <property>"cacheable"</property> + </emphasis> defines whether the response will be cached or not. In our case we don't need our image to be cached, cause we need it to be changed every time we refresh the page. + </para> + <para> + The <emphasis> + <property>"mimeType"</property> + </emphasis> attribute defines the type of output content. It is used to define the corresponded type in the header of an HTTP response. + </para> + + <para>The <emphasis role="bold"> + <property>&lt;a4j:mediaOutput&gt;</property> + </emphasis> attribute has two main attributes:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"createContent"</property> + </emphasis> specifies a method that will be used for content creating. + The method accepts two parameters. + The first one — with an <code>java.io.OutputStream</code> type — is a reference to the stream that should be used for output. + An output stream accepts output bytes and sends them to a recipient. + The second parameter is a reference to the component's <emphasis> + <property>"value"</property> + </emphasis> attribute and has <code>java.lang.Object</code> type. + This parameter contains deserialized object with data specified in the <emphasis> + <property>"value"</property> + </emphasis> attribute. + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"value"</property> + </emphasis> attribute specifies a bean class that keeps data for transmitting it into a stream in the method specified with <emphasis> + <property>"createContent"</property> + </emphasis> . + </para> + </listitem> + </itemizedlist> + + <para> + Now let's create the <code>MediaBean</code> class and specify there a primitive random-number generator and <code>paint</code> method that will convert the generated numbers into an output stream and give a JPEG image as a result. + The code for <code>MediaBean</code> class is going to look as following: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA">package demo; + +import java.awt.Graphics2D; +import java.awt.image.BufferedImage; +import java.io.IOException; +import java.io.OutputStream; +import java.util.Random; +import javax.imageio.ImageIO; + +public class MediaBean { + public void paint(OutputStream out, Object data) throws IOException{ + Integer high = 9999; + Integer low = 1000; + Random generator = new Random(); + Integer digits = generator.nextInt(high - low + 1) + low; + if (data instanceof MediaData) { + MediaData paintData = (MediaData) data; + BufferedImage img = new BufferedImage(paintData.getWidth(),paintData.getHeight(),BufferedImage.TYPE_INT_RGB); + Graphics2D graphics2D = img.createGraphics(); + graphics2D.setBackground(paintData.getBackground()); + graphics2D.setColor(paintData.getDrawColor()); + graphics2D.clearRect(0,0,paintData.getWidth(),paintData.getHeight()); + graphics2D.setFont(paintData.getFont()); + graphics2D.drawString(digits.toString(), 20, 35); + ImageIO.write(img,"png",out); + } + } +}</programlisting> + + <para> + Now it is necessary to create a class that will keep transmissional data that will be used as input data for a content creation method. + The code for <code>MediaData</code> class is going to be as following: +</para> + <note> + <title>Note:</title> + <para>A bean class transmitted into value should implement <code>Serializable</code> interface in order to be encoded to the URL of the resource. + </para> + </note> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA">package demo; + +import java.awt.Color; +import java.awt.Font; +import java.io.Serializable; + +public class MediaData implements Serializable{ + + private static final long serialVersionUID = 1L; + Integer Width=110; + Integer Height=50; + Color Background=new Color(190, 214, 248); + Color DrawColor=new Color(0,0,0); + Font font = new Font("Serif", Font.TRUETYPE_FONT, 30); + + /* Corresponding getters and setters */ + +}</programlisting> + <para> + As a result the <emphasis role="bold"> + <property>&lt;a4j:mediaOutput&gt;</property> + </emphasis> component will generate the following image that will be updated on each page refresh: + </para> + <figure> + <title> + Using the <emphasis role="bold"> + <property>&lt;a4j:mediaOutput&gt;</property> + </emphasis> for generating an image for captcha</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/mediaOutput_init.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Hence, when using the component it's possible to output your data of any type on a page with Ajax requests.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/mediaOutput.html">Table of + &lt;a4j:mediaOutput&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.MediaOutput</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.Resource</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.MediaOutput</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.MediaOutputRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/mediaOutput... page</ulink> at RichFaces LiveDemo for more examples of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_outputPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_outputPanel.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_outputPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,219 @@ +<section role="NotInToc" id="a4j_outputPanel"> + <title> + &lt; + a4j:outputPanel + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>CommandLink</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para>The component is used for components grouping in the Ajax output area, which offers several additional output opportunities such as inserting of non-present in tree components, saving of transient elements after Ajax request and some others.</para> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> component is used when one or more components should be always updated. + The component job is similar to that the <emphasis> + <property>"reRender"</property> + </emphasis> attribute does, but instead of specifying a comma separated list of components it wraps the components to be updated. + This could be useful in cases when some components aren't rendered during the primary non-ajax response. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">&lt;a4j:support reRender="mypanel"/&gt; +... +&lt;a4j:outputPanel id="mypanel"&gt; + &lt;h:panelGrid rendered="#{not empty foo.bar}"&gt; + ... + &lt;/h:panelGrid&gt; +&lt;/a4j:outputPanel&gt;</programlisting> + + <para> + By default the <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> is rendered as opening and closing HTML <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis> tags and functions as container. + With the help of the <emphasis> + <property>"layout"</property> + </emphasis> attribute this output way could be set to any of three variants: + </para> + <itemizedlist> + <listitem> + <para>"inline" (default)</para> + </listitem> + <listitem> + <para>"block"</para> + </listitem> + <listitem> + <para>"none"</para> + </listitem> + </itemizedlist> + + <para> + If <code>layout="block"</code> is set, the component is rendered as a pair of opening and closing <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> tags. + In this case it is possible to apply available for <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> elements style attributes. + <code>layout ="none"</code> helps to avoid an unnecessary tag around a context that is rendered or not according to the <emphasis> + <property>"rendered"</property> + </emphasis> attribute value. + In case an inner context isn't rendered the <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> is rendered in a <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis> tags with ID equal to ID of a child component and <code>display:none</code> style. + If a child component is rendered, <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> doesn't present at all in a final code. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:support reRender="mypanel"/&gt; + ... +&lt;a4j:outputPanel layout="none"&gt; + &lt;h:panelGrid id="mypanel" rendered="#{not empty foo.bar}"&gt; + ... + &lt;/h:panelGrid&gt; +&lt;/a4j:outputPanel&gt;</programlisting> + + <para> + As you see, the code is very similar to the one shown above, but <emphasis> + <property>"reRender "</property> + </emphasis> attribute refers directly to the updating panelGrid and not to the framing outputPanel, + and it's more semantically correct. + </para> + + <para> + The <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> allows to update a part of a page basing on its own flag. + The flag is defined by the <emphasis> + <property>"ajaxRendered"</property> + </emphasis> attribute. + The flag is commonly used when a part of a page must be updated or can be updated on any response. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:outputPanel ajaxRendered="true"&gt; + &lt;h:messages/&gt; +&lt;/a4j:outputPanel&gt;</programlisting> + + <para> + The <emphasis role="bold"> + <property>&lt;a4j:outPanel&gt;</property> + </emphasis> should be used for non-JSF component part framing, which is to be updated on Ajax response, as RichFaces specifies the list of updating areas as a list of an existing JSF component. + </para> + <para> On default non-JSF context isn't saved in a component tree, but is rendered + anew every time. To accelerate the processing speed and Ajax response input speed, + RichFaces saves non-JSF context in a component tree on default. This option could be + canceled by <emphasis> + <property>"keepTransient"</property> + </emphasis> attribute that cancels transient flag forced setting for child components. + This flag setting keeps the current value set by child components. </para> + <note> + <title>Note:</title> + <para> In JSF 1.1 implementation and lower, where non-JSF context should be framed with + the <emphasis role="bold"> + <property>&lt;f:verbatim&gt;</property> + </emphasis> component, <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> doesn't improve this JSF implementation option in any way, so + you still have to use this tag where it's necessary without RichFaces + usage. </para> + </note> + <para> RichFaces allows setting Ajax responses rendering directly basing on component tree + nodes without referring to the JSP (XHTML) page code. It could be defined by <emphasis> + <property>"selfRendered"</property> + </emphasis> attribute setting to "true" on <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> and could help considerably speed up a response output. However, if a + transient flag is kept as it is, this rapid processing could cause missing of transient + components that present on view and don't come into a component tree. Hence, + for any particular case you could choose a way for you application optimization: speed + up processing or redundant memory for keeping tree part earlier defined a transient. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/outputPanel.html">Table of + &lt;a4j:outputPanel&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.OutputPanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Panel</entry> + </row> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.ajax.OutputPanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry> org.ajax4jsf.component.html.HtmlAjaxOutputPanel </entry> + </row> + <row> + <entry>renderer-type</entry> + <entry> org.ajax4jsf.components.AjaxOutputPanelRenderer </entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/outputPanel... page</ulink> at RichFaces Livedemo for examples of component usage and their sources. + </para> + + <para> + Useful articles: + </para> + <itemizedlist> + <listitem> + <para> + search the <ulink url="http://www.jboss.org/index.html?module=bb&amp;op=viewforum&... Users Forum</ulink> for some additional information on component usage; + </para> + </listitem> + + </itemizedlist> + + + + </section> +</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> - <section> - <sectioninfo> - <keywordset> - <keyword>component</keyword> - <keyword>page</keyword> - </keywordset> - </sectioninfo> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:page&gt;</property></emphasis> component encodes the full HTML-page structure and used for solving some incompatibility in JSP environment with MyFaces in early Ajax4Jsf versions. - </para> - </section> -</root> Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_page.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,133 +1,140 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:page</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.components.Page</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.components.AjaxRegion</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlPage</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxPageRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the component with a Page Tag</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:page&gt;</property></emphasis> should be the only child of <emphasis role="bold"><property>&lt;f:view&gt;</property></emphasis>: - </para> - <programlisting role="XML"><![CDATA[<f:view> - <a4j:page> - <f:facet name="head"> - <!--Head Content--> - </f:facet> - <!--Page Content--> - </a4j:page> -</f:view>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlPage; -... -HtmlPage myPage = new HtmlPage(); -...]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - <para> - The component solves the problem with MyFaces for early Ajax4Jsf versions: in MyFaces implementation the <emphasis role="bold"><property>&lt;f:view&gt;</property></emphasis> JSP tag doesn&apos;t get control for encoding contents during the <property>RENDER_RESPONSE</property> phase, - thus Ajax can&apos;t neiher get a control nor make a response. - The <emphasis role="bold"><property>&lt;a4j:page&gt;</property></emphasis> solves this problem by wrapping the Ajax updatable areas. - In the last versions of both frameworks the problem is successfully fixed and no <emphasis role="bold"><property>&lt;a4j:page&gt;</property></emphasis> usage is required. - </para> - - <para> - The component uses <property>facet</property> <emphasis><property>&quot;head&quot;</property></emphasis> for defining the contents corresponding to the HTML HEAD. - There is no need to use <emphasis><property>&quot;body&quot;</property></emphasis> facet in order to define first <property>body</property> section. - The attribute <emphasis><property>&quot;format&quot;</property></emphasis> defines page layout format for encoding DOCTYPE. - The attribute <emphasis><property>&quot;pageTitle&quot;</property></emphasis> is rendered as <property>title</property> section. - </para> - - <para> - According to the described above, the component defined at page as following - </para> - <programlisting role="XML"><![CDATA[<a4j:page format="xhtml" pageTitle="myPage"> - <f:facet name="head"> - <!--Head Content here--> - </f:facet> - <!--Page Content Here--> -</a4j:page>]]></programlisting> - - <para id="exampl"> - will be rendered on a page as - </para> - <programlisting role="XML"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> -<html> - <head> - <title>myPage</title> - <!--Head Content here--> - </head> - <body> - <!--Page Content Here--> - </body> -</html>]]></programlisting> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>head</entry> - <entry>Defines a head content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/page.jsf?c=... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - </section> - -</chapter> +<section role="NotInToc" id="a4j_page"> + <title> + &lt; + a4j:page + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>component</keyword> + <keyword>page</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:page&gt;</property> + </emphasis> component encodes the full HTML-page structure and used for solving some incompatibility in JSP environment with MyFaces in early Ajax4Jsf versions. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The component solves the problem with MyFaces for early Ajax4Jsf versions: in MyFaces implementation the <emphasis role="bold"> + <property>&lt;f:view&gt;</property> + </emphasis> JSP tag doesn't get control for encoding contents during the <property>RENDER_RESPONSE</property> phase, + thus Ajax can't neiher get a control nor make a response. + The <emphasis role="bold"> + <property>&lt;a4j:page&gt;</property> + </emphasis> solves this problem by wrapping the Ajax updatable areas. + In the last versions of both frameworks the problem is successfully fixed and no <emphasis role="bold"> + <property>&lt;a4j:page&gt;</property> + </emphasis> usage is required. + </para> + + <para> + The component uses <property>facet</property> + <emphasis> + <property>"head"</property> + </emphasis> for defining the contents corresponding to the HTML HEAD. + There is no need to use <emphasis> + <property>"body"</property> + </emphasis> facet in order to define first <property>body</property> section. + The attribute <emphasis> + <property>"format"</property> + </emphasis> defines page layout format for encoding DOCTYPE. + The attribute <emphasis> + <property>"pageTitle"</property> + </emphasis> is rendered as <property>title</property> section. + </para> + + <para> + According to the described above, the component defined at page as following + </para> + <programlisting role="XML">&lt;a4j:page format="xhtml" pageTitle="myPage"&gt; + &lt;f:facet name="head"&gt; + &lt;!--Head Content here--&gt; + &lt;/f:facet&gt; + &lt;!--Page Content Here--&gt; +&lt;/a4j:page&gt;</programlisting> + + <para id="exampl"> + will be rendered on a page as + </para> + <programlisting role="XML">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; +&lt;html&gt; + &lt;head&gt; + &lt;title&gt;myPage&lt;/title&gt; + &lt;!--Head Content here--&gt; + &lt;/head&gt; + &lt;body&gt; + &lt;!--Page Content Here--&gt; + &lt;/body&gt; +&lt;/html&gt;</programlisting> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/page.html">Table of + &lt;a4j:page&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.components.Page</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.components.AjaxRegion</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlPage</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxPageRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>head</entry> + <entry>Defines a head content</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/page.jsf?c=... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_poll.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_poll.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_poll.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,241 @@ +<section role="NotInToc" id="a4j_poll"> + <title> + &lt; + a4j:poll + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section id="poll_d"> + <sectioninfo> + <keywordset> + <keyword>a4j:poll</keyword> + <keyword>component</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component allows periodical sending of Ajax requests to a server and is + used for a page updating according to a specified time interval.</para> + </section> + <section> + <title>Details of Usage</title> + <para id="attributes"> + The <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> componet is used for periodical polling of server data. + In order to use the component it's necessary to set an update interval. + The <emphasis> + <property>"interval"</property> + </emphasis> attribute defines an interval in milliseconds between the previous response and the next request. + The total period beetween two requests generated by the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component is a sum of an<emphasis> + <property>"interval"</property> + </emphasis> attribute value and server response time. + Default value for <emphasis> + <property>"interval"</property> + </emphasis> attribute is set to "1000" milliseconds (1 second). + See an example of definition in the "<link linkend="creating">Creating the component with a Page Tag</link>" section. + </para> + <para> + The <emphasis> + <property>"timeout"</property> + </emphasis> attribute defines response waiting time in milliseconds. + If a response isn't received during this period a connection is aborted and the next request is sent. + Default value for <emphasis> + <property>"timeout"</property> + </emphasis> attribute isn't set. + </para> + + <para> + The <emphasis> + <property>"enabled"</property> + </emphasis> attribute defines should the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> send request or not. + It's necessary to render the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> to apply the current value of <emphasis> + <property>"enabled"</property> + </emphasis> attribute. + You can use an EL-expression for <emphasis> + <property>"enabled"</property> + </emphasis> attribute to point to a bean property. + An example of usage of mentioned above attributes is placed below: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;a4j:region&gt; + &lt;h:form&gt; + &lt;a4j:poll id="poll" interval="1000" enabled="#{userBean.pollEnabled}" reRender="poll,grid"/&gt; + &lt;/h:form&gt; +&lt;/a4j:region&gt; +&lt;h:form&gt; + &lt;h:panelGrid columns="2" width="80%" id="grid"&gt; + &lt;h:panelGrid columns="1"&gt; + &lt;h:outputText value="Polling Inactive" rendered="#{not userBean.pollEnabled}" /&gt; + &lt;h:outputText value="Polling Active" rendered="#{userBean.pollEnabled}" /&gt; + &lt;a4j:commandButton style="width:120px" id="control" value="#{userBean.pollEnabled?'Stop':'Start'} Polling" reRender="poll, grid"&gt; + &lt;a4j:actionparam name="polling" value="#{!userBean.pollEnabled}" assignTo="#{userBean.pollEnabled}"/&gt; + &lt;/a4j:commandButton&gt; + &lt;/h:panelGrid&gt; + &lt;h:outputText id="serverDate" style="font-size:16px" value="Server Date: #{userBean.date}"/&gt; + &lt;/h:panelGrid&gt; +&lt;/h:form&gt; +...</programlisting> + + <para> + The example shows how date and time are updated on a page in compliance with data taken from a server. + The <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> componet sends requests to the server every second. + <emphasis> + <property>"reRender"</property> + </emphasis> attribute of the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> contains poll's own <code>Id</code>. + Hence, it is self rendered for applying the current value of <emphasis> + <property>"enabled"</property> + </emphasis> attribute. + </para> + <note> + <title>Notes:</title> + <itemizedlist> + <listitem> + <para> + The form around the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component is required. + </para> + </listitem> + + <listitem> + <para> + To make the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component send requests periodically when it <code>limitToList</code> is set to "true", + pass the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> ID to it <code>reRender</code> attribute. + </para> + </listitem> + + </itemizedlist> + </note> + + <!--para>The component decodes all necessary JavaScript for time count and on the expiry of some + interval for calling of a RichFaces utility method for Ajax request sending (A4J.AJAX.Submit + (Some request parameters)). </para> + <para> The timer could be stopped or started in any time. The current state is controlled on the + component with the <emphasis> + <property>"enabled"</property> + </emphasis> attribute: </para> + <programlisting role="XML"><![CDATA[<a4j:poll interval="1000" enabled="#{bean.boolProperty}"/> +]]></programlisting> + <para>As any RichFaces Action component, <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> has all described in the <emphasis role="bold"> + <property> + <ulink url="index.html#support">&lt;a4j:support&gt;</ulink> + </property> + </emphasis> chapter attributes to provide the necessary behavior of request sending (delay, + limitation of a submit and render area, requests frequency, and etc.). For detailed + information on these attributes see again the <emphasis role="bold"> + <property> + <ulink url="index.html#support">&lt;a4j:support&gt;</ulink> + </property> + </emphasis> component description. </para--> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find "<link linkend="process">Decide what to process</link>" guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/poll.html">Table of + &lt;a4j:poll&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Poll</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.components.AjaxPoll</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxPoll</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxPollRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/poll.jsf?c=... page</ulink> at RichFaces LiveDemo for examples of the component usage and their sources. + </para> + + <para> + Useful examples and articles: + </para> + <itemizedlist> + <listitem> + <para> + "<ulink url="http://www.jboss.org/community/wiki/CreateABannerUsingEffectsAn... a Banner Using Effects and Poll</ulink>" article at RichFaces Wiki + gives an example of how to create an image banner using <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis>components; + </para> + </listitem> + <listitem> + <para> + "<ulink url="http://www.jboss.org/community/wiki/CreateAHTMLBannerUsingEffec... an HTML Banner Using Effects and Poll</ulink>" article at RichFaces Wiki + brings the code of the way of creating an HTML banner banner using <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis>components; + </para> + </listitem> + <listitem> + <para> + "<ulink url="http://www.jboss.org/index.html?module=bb&amp;op=viewtopic&... and Slideshow</ulink>" thread in the RichFaces users forum contains an information and code on making a Slide Show with the help of the <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> component; + </para> + </listitem> + </itemizedlist> + <para> + Manage the <ulink url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink> for fresh issues about the component usage. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_portlet.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_portlet.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_portlet.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,103 @@ +<section role="NotInToc" id="a4j_portlet"> + <title> + &lt; + a4j:portlet + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:portlet</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:portlet&gt;</property> + </emphasis> component is DEPRECATED as far as JSR-301 was defined a same functionality for a UIViewRoot component. Thus, it is implicitly defined by mandatory + <emphasis role="bold"> + <property>&lt;f:view&gt;</property> + </emphasis> component. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The main component purpose is realization of possibility to create several instances the same portlet on one page. + But clientId of elements should be different for each window. In that case namespace is used for each portlet. + The <emphasis role="bold"> + <property>&lt;a4j:portlet&gt;</property> + </emphasis> + <code>implemets NaimingContainer</code> interface and adds namespace to all componets on a page. + All portlet content should be wrapped by <emphasis role="bold"> + <property>&lt;a4j:portlet&gt;</property> + </emphasis> for resolving problems mentioned before. + </para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/portlet.html">Table of + &lt;a4j:portlet&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Portlet</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.component.Portlet</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlPortlet</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/portlet.jsf... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + + <para> + Useful publications: + </para> + <itemizedlist> + <listitem> + <para> + <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink> — check the forum for additional information about component usage; + </para> + </listitem> + <listitem> + <para> + <ulink url="http://anonsvn.jboss.org/repos/ajax4jsf/trunk/samples/portal-ec... application</ulink> — Portlet Sample, could be checked out from JBoss SVN; + </para> + </listitem> + <listitem> + <para> + <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... snapshot with Portal environment support</ulink> contains usage instructions for the Portlet Sample demo. + </para> + </listitem> + </itemizedlist> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_push.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_push.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_push.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,175 @@ +<section role="NotInToc" id="a4j_push"> + <title> + &lt; + a4j:push + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:push</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis>periodically perform Ajax request to server, to simulate 'push' data.</para> + <para>The main difference between <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> components is that <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> + makes request to minimal code only (not to JSF tree) in order to check the presence of messages in the queue. + If the message exists the complete request is performed. The component doesn't poll registered beans + but registers <code>EventListener</code> which receives messages about events.</para> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> implements reverse Ajax technique. </para> + + <para>The bean, for example, could be subscribed to Java Messaging Service + (<ulink url="http://java.sun.com/products/jms/">JMS</ulink>) + topic or it could be implemented as Message Driven Bean (MDB) in order + to send a message to the <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> component about an event presence. In the presence of the + event some action occurs.</para> + + <para>Thus, a work paradigm with the <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> component corresponds to an anisochronous model, but not + to pools as for <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> + <link linkend="poll">component</link>. See the simplest example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA">... +class MyPushEventListener implements PushEventListener { + public void onEvent(EventObject evt) { + System.out.println(evt.getSource()); + //Some action + } +} +...</programlisting> + + <para>Code for <code>EventListener</code> registration in the bean is placed + below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA">... +public void addListener(EventListener listener) { + synchronized (listener) { + if (this.listener != listener) { + this.listener = (PushEventListener) listener; + } + } +} +...</programlisting> + + <para>A page code for this example is placed below.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;a4j:status startText="in progress" stopText="done"/&gt; +&lt;a4j:form&gt; + &lt;a4j:region&gt; + &lt;a4j:push reRender="msg" eventProducer="#{pushBean.addListener}" interval="2000"/&gt; + &lt;/a4j:region&gt; + &lt;a4j:outputPanel id="msg"&gt; + &lt;h:outputText value="#{pushBean.date}"&gt; + &lt;f:convertDateTime type="time"/&gt; + &lt;/h:outputText&gt; + &lt;/a4j:outputPanel&gt; + &lt;a4j:commandButton value="Push!!" action="#{pushBean.push}" ajaxSingle="true"/&gt; +&lt;/a4j:form&gt; +...</programlisting> + + <para>The example shows how date is updated on a page in compliance with data + taken from a server. In the example <emphasis> + <property>"interval"</property> + </emphasis> attribute has value "2000". This + attribute defines an interval in milliseconds between the previous + response and the next request. Default value is set to + "1000" milliseconds (1 second). It's + possible to set value equal to "0". In this case + connection is permanent. </para> + <para>The <emphasis> + <property>"timeout"</property> + </emphasis> attribute defines response waiting time in milliseconds. + If a response isn't received during this period a connection + is aborted and the next request is sent. Default value for <emphasis> + <property>"timeout"</property> + </emphasis> attribute isn't set. Usage of <emphasis> + <property>"interval"</property> + </emphasis> and <emphasis> + <property>"timeout"</property> + </emphasis> attributes gives an opportunity to set short polls of + queue state or long connections.</para> + + <note> + <title>Note:</title> + <para> The form around the <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> component is required.</para> + </note> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/push.html">Table of + &lt;a4j:push&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Push</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.components.AjaxPush</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.AjaxPush</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxPushRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/push.jsf?c=... RichFaces LiveDemo page </ulink> you can found some additional information for + <emphasis role="bold"> + <property>&lt;a4j:push&gt;</property> + </emphasis> component usage. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_queue.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_queue.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_queue.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,247 @@ +<section role="NotInToc" id="a4j_queue"> + <title> + &lt; + a4j:queue + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.3.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:queue&gt;</property> + </emphasis> component enqueues set of Ajax requests sent from client. + The RichFaces components with built-in Ajax can reference the queue to optimize Ajax requests. + </para> + </section> + <section> + <title>Details of Usage</title> + + <para> + The RichFaces Queue has four different types: global default, view scoped default, view scoped named and form-based default queue (general Queue principles are good documented in the "<link linkend="QueuePrinciples">Queue Principles</link>" section). + The current section will take closer to the form based queue. The usage of other types is similar. + </para> + + <para> + In order to disable or enable the <emphasis role="bold"> + <property>&lt;a4j:queue&gt;</property> + </emphasis> component on the page you can use the <emphasis> + <property>"disabled"</property> + </emphasis> attribute. + </para> + + <para> + The <emphasis> + <property>"requestDelay"</property> + </emphasis> attribute defines delay time for all the requests fired by the action components. + </para> + + <para> + The <emphasis> + <property>"size"</property> + </emphasis> attribute specifies the number of requests that can be stored in the queue at a time. + The attribute helps to prevent server overloading. + It is also possible to determine queue's behaviour when it's size is exceeded. + Use the <emphasis> + <property>"sizeExceededBehavior"</property> + </emphasis> for this purpose. + There are four possible strategies of exceeded queue's behavior: + </para> + <itemizedlist> + <listitem> + <para>"dropNext" drops next request that should be fired</para> + </listitem> + <listitem> + <para>"dropNew" drops the incoming request</para> + </listitem> + <listitem> + <para>"fireNext" immediately fires the next request in line to be fired</para> + </listitem> + <listitem> + <para>"fireNew" immediately fires the incoming request.</para> + </listitem> + </itemizedlist> + + <para> + <emphasis role="bold"> Example: </emphasis> + </para> + <programlisting role="XML">&lt;h:form&gt; + &lt;a4j:queue size="2" requestDelay="500" sizeExceededBehavior="dropNext" onsizeexceeded="alert('The size of the queue is exceeded')" /&gt; + &lt;h:inputText value="#{bean.a}"&gt; + &lt;a4j:support event="onkeyup" /&gt; + &lt;/h:inputText&gt; + &lt;h:inputText value="#{bean.b}"&gt; + &lt;a4j:support event="onblur" /&gt; + &lt;/h:inputText&gt; + &lt;h:selectBooleanCheckbox value="#{bean.check}" id="checkboxID"&gt; + &lt;a4j:support id="checkboxSupport" event="onchange" /&gt; + &lt;/h:selectBooleanCheckbox&gt; +&lt;/h:form&gt;</programlisting> + <para> + In this example if the queue has more than 2 requests waiting to be processed the next event will be dropped and a message (the <emphasis> + <property>"onsizeexceeded"</property> + </emphasis> attribute fires a JavaScript function) saying that the queues is exceeded will be displayed. + </para> + + <para> + The <emphasis> + <property>"ignoreDupResponses"</property> + </emphasis> attribute that takes a boolean value can also help optimize your Ajax requests. + If set to true, response processing for request will not occur if a similar request is already waiting in the queue. New request will be fired immediately when the response from the previous one returns. + + </para> + + <para> + <emphasis role="bold"> Example: </emphasis> + </para> + <programlisting role="XML">&lt;h:form&gt; + &lt;a4j:queue requestDelay="500" ignoreDupResponses="true" /&gt; + &lt;h:inputText value="#{bean.a}"&gt; + &lt;a4j:support event="onkeyup" /&gt; + &lt;/h:inputText&gt; +&lt;/h:form&gt;</programlisting> + + <para>In this example, the requests are glued together and only the last one is submitted.</para> + + <para> + Another key attribute that easies server load is <emphasis> + <property>"timeout"</property> + </emphasis>. + The attribute specifies the amount of time an item can be in the queue before the sent event is be aborted and dropped from the queue. + </para> + + <para> + If the request is sent and response is not returned within the time frame defined in this attribute - the request is aborted, and the next one is sent. + </para> + <para> + <emphasis role="bold"> Example: </emphasis> + </para> + <programlisting role="XML">&lt;h:form&gt; + &lt;a4j:queue timeout="1000" /&gt; + &lt;h:inputText value="#{bean.a}"&gt; + &lt;a4j:support event="onkeyup" /&gt; + &lt;/h:inputText&gt; +&lt;/h:form&gt;</programlisting> + + <para> + In this case if the sever doesn't respond within a second the request will be aborted. + </para> + + <para> + As you can see the implementation of the queue provides some custom event handlers that you may use to call JavaScript functions.</para> + <para> + The <emphasis> + <property>"oncomplete"</property> + </emphasis>is fired after request completed. + In this event handler request object is be passed as a parameter. + Thus queue is be accessible using <code>request.queue</code>. + And the element which was a source of the request is available using <code>this</code>. + </para> + + <para> + <emphasis role="bold"> Example: </emphasis> + </para> + <programlisting role="XML">&lt;h:form&gt; + &lt;a4j:queue oncomplete="alert(request.queue.getSize())" requestDelay="1000" /&gt; + &lt;h:inputText value="#{bean.a}"&gt; + &lt;a4j:support event="onkeyup" /&gt; + &lt;/h:inputText&gt; + &lt;h:selectBooleanCheckbox value="#{bean.check}"&gt; + &lt;a4j:support event="onchange"/&gt; + &lt;/h:selectBooleanCheckbox&gt; +&lt;/h:form&gt;</programlisting> + <para>In this example you can see how the number of requests waiting in the queue change. You will get a message with the number of the requests in the queue.</para> + + <para>The <emphasis> + <property>"onbeforedomupdate"</property> + </emphasis> event handler called before + updating DOM on a client side.</para> + + <para> The <emphasis> + <property>"onrequestqueue"</property> + </emphasis> event handler called after the new request has been added to queue. + And the <emphasis> + <property>"onrequestdequeue"</property> + </emphasis> event handler called after the request has been removed from queue. </para> + <para> The <emphasis> + <property>"onsubmit"</property> + </emphasis> event handler called + after request is completed. This attribute allows to invoke JavaScript code before an + Ajax request is sent. </para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/queue.html">Table of + &lt;a4j:queue&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.Queue</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlQueue</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.QueueRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.ajax4jsf.taglib.html.jsp.QueueTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>getSize()</entry> + <entry>Returns the current size to the queue</entry> + + </row> + <row> + <entry>getMaximumSize()</entry> + <entry>Returns the maximum size to the queue, specified in the "size" attribute</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/queue.jsf?c... Page</ulink> at the RichFaces LiveDemo for examples of component usage and their sources. + </para> + + <para> + Useful articles: + </para> + <para>"<link linkend="QueuePrinciples">Queue Principles</link>" section of the RichFaces developer guide describes general Queue principles.</para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_region.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_region.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_region.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,237 @@ +<section role="NotInToc" id="a4j_region"> + <title> + &lt; + a4j:region + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> component specifies the part of the component tree to be processed on server. + If no <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> is defined the whole View functions as a region. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> component specifies the part of the component tree to be processed on server. + The processing includes data handling during decoding, conversion, validation and model update. + Note that the whole Form is still submitted but only part taken into region will be processed. + + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;h:form&gt; + ... + &lt;a4j:region&gt; + &lt;a4j:commandLink/&gt; + &lt;/a4j:region&gt; + ... +&lt;h:form&gt;</programlisting> + + <para>The whole Form on the schematic listing above will be submitted by request invoked with the <emphasis role="bold"> + <property>&lt;a4j:commandLink&gt;</property> + </emphasis>. + The only part that is going to be processed on the server is enclosed with <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;/a4j:region&gt;</property> + </emphasis> tags. + If no <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> is defined the whole View functions as a region. + </para> + + <!-- <para>The region is a component used for manipulation with components sent to the server. + It sets particular processing parameters for an area on the server, i.e. the region deals with data input on the server and has no direct impact on output. + To read more on the components responsible for out, see <ulink url="http://java.sun.com/javaee/javaserverfaces/reference/index.html... official documentation</ulink>. + </para> + + <para>The region marks an area page that is decoded on the server. This component helps to reduce data quantity processed by the server, but the region doesn&apos;t influence on the standard submission rules. It means that:<itemizedlist> + <listitem><para> + The area that is to be submitted onto the server should be embedded in <emphasis role="bold"> + <property>&lt;h:form&gt;</property>/<property>&lt;a4j:form&gt;</property> +</emphasis> component. + </para></listitem> + <listitem><para> + The whole form is submitted on Ajax response and not a region that request is performed from. + </para></listitem> + </itemizedlist></para> + --> + + <para>The regions could be nested. Server picks out and decodes only the region, which contains the component that initiates the request.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;h:form&gt; + ... + &lt;a4j:region&gt; + &lt;a4j:commandLink value="Link 1" id="link1"/&gt; + &lt;a4j:region&gt; + &lt;a4j:commandLink value="Link 2" id="link2"/&gt; + &lt;/a4j:region &gt; + &lt;/a4j:region&gt; + ... +&lt;h:form&gt;</programlisting> + <para> + The external region is decoded for <code>link1</code> and the internal one is decoded for <code>link2</code>. + </para> + + <para> + The <emphasis> + <property>"renderRegionOnly"</property> + </emphasis> attribute is used when it is necessary to exclude all the components from the outside of the region from updating on the page during Renderer Response phase. + Such manipulation allows region to be passed straight into Encode and reduces performance time. + This optimization should be implemented carefully because it doesn't allow data from the outside of active region to be updated. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;h:form&gt; + ... + &lt;a4j:region renderRegionOnly="true"&gt; + &lt;a4j:commandLink value="Link 1" id="link1"/&gt; + &lt;/a4j:region&gt; + ... + &lt;a4j:region renderRegionOnly="false"&gt; + &lt;a4j:commandLink value="Link 2" id="link2"/&gt; + &lt;/a4j:region&gt; + ... +&lt;/h:form&gt;</programlisting> + <para> + On the example above the first region only will be updated if <code>link1</code> initiates a request. + When a request is initiated by <code>link2</code> both regions will be updated. + In this case search for components to include them into Renderer Response will be performed on the whole component tree. + </para> + + + <para> + <property>RichFaces</property> allows setting Ajax responses rendering basing on component tree nodes directly, without referring to the JSP (XHTML) code. + This speeds up a response output considerably and could be done by setting the <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> + <emphasis> + <property>"selfRendered"</property> + </emphasis> attribute to "true". + However, this rapid processing could cause missing of transient components that present on view and don't come into a component tree as well as omitting of <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> usage described below. +</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:region selfRendered ="true"&gt; + &lt;a4j:commandLink value="Link" id="link"/&gt; + &lt;!--Some HTML content--&gt; +&lt;/a4j:region&gt;</programlisting> + <para>In this case the processing is quicker and going on without referring to the page code. + The HTML code is not saved in a component tree and could be lost. + Thus, such optimization should be performed carefully and additional <property>RichFaces</property> components usage (e.g. <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis>) is required.</para> + + + + <para> + Starting from <property>RichFaces 3.2.0</property> the <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> can be used together with iterative components (e.g. <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis>, etc.). + It became possible to re-render a particular row in a table without updating the whole table and without any additional listeners. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;rich:column&gt; + &lt;a4j:region&gt; + &lt;a4j:commandLink reRender="out"/&gt; + &lt;/a4j:region&gt; +&lt;/rich:column&gt; +&lt;rich:column&gt; + &lt;h:outputText id="out"&gt; +&lt;/rich:column&gt;</programlisting> + + <para> + In most cases there is no need to use the <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis> as <code>ViewRoot</code> is a default one. + </para> + + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/region.html">Table of + &lt;a4j:region&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.AjaxRegion</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.AjaxRegion</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxRegion</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxRegionRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para>Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/region.jsf?... demo page</ulink> at +RichFaces live demo for examples of component usage and their sources. + </para> + <para>Useful articles and examples:</para> + <itemizedlist> + <listitem> + <para> + <ulink url="http://www.jboss.org/community/docs/DOC-11866">&lt;... and two &lt;h:inputTexts&gt;</ulink> in RichFaces cookbook at JBoss portal; + </para> + </listitem> + <listitem> + <para> + "<ulink url="http://ishabalov.blogspot.com/2007/08/sad-story-about-uiinput.h... sad story about UIInput</ulink>" at personal blog of I.Shabalov and <ulink url="http://livedemo.exadel.com/richfaces-local-value-demo/pages/loc... example</ulink> of solving the problem with the help of <emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis>. + </para> + </listitem> + + </itemizedlist> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_repeat.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_repeat.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_repeat.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,138 @@ +<section role="NotInToc" id="a4j_repeat"> + <title> + &lt; + a4j:repeat + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:repeat</keyword> + <keyword>component</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component implements a basic iteration component that allows to update a set of its children with Ajax. + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component is similar to Facelets <emphasis role="bold"> + <property>&lt;ui:repeat&gt;</property> + </emphasis> tag, + which is used to iterate through a collection of objects binded with JSF page as EL expression. + The main difference of the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> is a possibility to update particular components (it's children) instead of all using Ajax requests. + The feature that makes the component different is a special <emphasis> + <property>"ajaxKeys"</property> + </emphasis> attribute that defines row that are updated after an Ajax request. + As a result it becomes easier to update several child components separately without updating the whole page. + </para> + + + <programlisting role="XML">... +&lt;table&gt; + &lt;tbody&gt; + &lt;a4j:repeat value="#{repeatBean.items}" var="item" ajaxKeys="#{updateBean.updatedRow}"&gt; + &lt;tr&gt; + &lt;td&gt;&lt;h:outputText value="#{item.code}" id="item1" /&gt;&lt;/td&gt; + &lt;td&gt;&lt;h:outputText value="#{item.price}" id="item2" /&gt;&lt;/td&gt; + &lt;/tr&gt; + &lt;/a4j:repeat&gt; + &lt;/tbody&gt; +&lt;/table&gt; + ...</programlisting> + + <para> + The example above the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> points to an method that contains row keys to be updated. + </para> + <note> + <title>Note:</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component is defined as fully updated, + but really updated there are only the row keys which defined in the <emphasis> + <property>"ajaxKeys"</property> + </emphasis> attribute. + </para> + </note> + + + <para> + One more benefit of this component is absence of strictly defined markup as JSF HTML DataTable and TOMAHAWK DataTable has. + Hence the components could be used more flexibly anywhere where it's necessary to output the results of selection from some collection. + </para> + + <para>The next example shows collection output as a plain HTML list:</para> + <programlisting role="XML">&lt;ul&gt; + &lt;a4j:repeat ...&gt; + &lt;li&gt;...&lt;li/&gt; + ... + &lt;li&gt;...&lt;li/&gt; + &lt;/a4j:repeat&gt; +&lt;/ul&gt;</programlisting> + <para>All other general attributes are defined according to the similar + attributes of iterative components (<emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;ui:repeat&gt;</property> + </emphasis>) and are used in the same way.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/repeat.html">Table of + &lt;a4j:repeat&gt; + attributes</ulink>. + </para> + <table frame="all"> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Repeat</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Data</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxRepeat</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.RepeatRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_status.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_status.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_status.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,178 @@ +<section role="NotInToc" id="a4j_status"> + <title> + &lt; + a4j:status + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:status</keyword> + <keyword>component</keyword> + </keywordset> + </sectioninfo> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> component generates elements for displaying of the current Ajax requests status. + There are two status modes: Ajax request is in process or finished.</para> + </section> + <section> + + + <title>Details of Usage</title> + <para>There are two ways for the components or containers definition, which Ajax requests status is tracked by a component.<itemizedlist> + <listitem> + <para> + Definition with the <emphasis> + <property>"for"</property> + </emphasis> +attribute on the <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> component. Here <emphasis> + <property>"for"</property> + </emphasis> + attribute should point at an Ajax container (<emphasis role="bold"> + <property>&lt;a4j:region&gt;</property> + </emphasis>) <property>id</property>, which requests are tracked by a component. + </para> + </listitem> + </itemizedlist> + <itemizedlist> + <listitem> + <para> + Definition with the <emphasis> + <property>"status"</property> + </emphasis> +attribute obtained by any RichFaces library action component. The attribute should point at the <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> component <property>id</property>. Then this <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> component shows the status for the request fired from this action component. + </para> + </listitem> + </itemizedlist> + </para> + <para>The component creates two <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> + elements depending on attribute <emphasis> + <property>"layout"</property> + </emphasis> + with content defined for each status, one of the elements (start) is initially hidden. At the beginning of an Ajax request, elements state is inversed, hence the second element is shown and the first is hidden. At the end of a response processing, elements display states return to its initial values.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a4j:status startText="Started" stopText="stopped" /&gt;</programlisting> + <para>The code shown in the example above is decoded on a page as:</para> + <programlisting role="XML">&lt;span id="j_id20:status.start" style="display: none"&gt; + Started +&lt;/span&gt; +&lt;span id="j_id20:status.stop"&gt; + Stopped +&lt;/span&gt;</programlisting> + <para>and after the generation of an Ajax response is changed to:</para> + <programlisting role="XML">&lt;span id="j_id20:status.start"&gt; + Started +&lt;/span&gt; +&lt;span id="j_id20:status.stop" style="display: none"&gt; + Stopped +&lt;/span&gt;</programlisting> + <para>There is a possibility to group a <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> elements content into <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> elements, instead of <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis>. To use it, just redefine the <emphasis> + <property>"layout"</property> + </emphasis> + attribute from "inline" (default) to "block".</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/status.html">Table of + &lt;a4j:status&gt; + attributes</ulink>. + </para> + <table frame="all"> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Status</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Panel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxStatus</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxStatusRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>start</entry> + <entry>Redefines the content for display on starting request</entry> + </row> + <row> + <entry>stop</entry> + <entry>Redefines the content for display on request complete</entry> + </row> + </tbody> + </tgroup> + + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?... page</ulink> at RichFaces Livedemo for examples of component usage and their sources. + </para> + <para> + Useful articles at JBoss portal: + </para> + <itemizedlist> + <listitem> + <para> + <ulink url="http://wiki.jboss.org/wiki/RichFacesPleaseWaitBox">Rich... describes how to show a "Please Wait" box and block the input while the Ajax request is processed using combination of <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis>. + </para> + </listitem> + </itemizedlist> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_support.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_support.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/a4j_support.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,283 @@ +<section role="NotInToc" id="a4j_support"> + <title> + &lt; + a4j:support + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <sectioninfo> + <keywordset> + <keyword>a4j:support</keyword> + <keyword>component</keyword> + </keywordset> + </sectioninfo> + + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> component + is the most important core component in the RichFaces library. + It enriches any existing non-Ajax JSF or RichFaces component with Ajax capability. + All other RichFaces Ajax components are based on the same principles + <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> has. + <!-- + The requests are invoked by definite user activity and used for updating + and re-rendering page contents partially after a response from server. + --> + </para> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> + component has two key attributes: + </para> + <itemizedlist> + <listitem> + <para> + mandatory + <emphasis> + <property>"event"</property> + </emphasis> attribute that defines the JavaScript event + the Ajax support will be attached to + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"reRender"</property> + </emphasis> attribute that defines id(s) + of JSF component(s) that should be rerendered after an Ajax request + </para> + </listitem> + </itemizedlist> + <para> + As mentioned above, the <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> component + adds Ajax capability to non-Ajax JSF components. + Let's create ajaxed <emphasis role="bold"> + <property>&lt;h:selectOneMenu&gt;</property> + </emphasis> called + "Planets and Their Moons". + </para> + <para> + We begin with the common behavior description. When a page is rendered you see only one select box with the list of planets. + When you select a planet the <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> + containing moons of the selected planet appears. + </para> + <para> + In other words we need <emphasis role="bold"> + <property>&lt;h:selectOneMenu&gt;</property> + </emphasis> + with the nested <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> component that + is attached to the <property>onchange</property> event. + </para> + <para> + When an Ajax response comes back the <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> + is re-rendered on the server side and updated on the client. + </para> + <programlisting role="XML">... +&lt;h:form id="planetsForm"&gt; + &lt;h:outputLabel value="Select the planet:" for="planets" /&gt; + &lt;h:selectOneMenu id="planets" value="#{planetsMoons.currentPlanet}" valueChangeListener="#{planetsMoons.planetChanged}"&gt; + &lt;f:selectItems value="#{planetsMoons.planetsList}" /&gt; + &lt;a4j:support event="onchange" reRender="moons" /&gt; + &lt;/h:selectOneMenu&gt; + &lt;h:dataTable id="moons" value="#{planetsMoons.moonsList}" var="item"&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{item}"/&gt; + &lt;/h:column&gt; + &lt;/h:dataTable&gt; +&lt;/h:form&gt; +...</programlisting> + <para> + Finally we need a backing bean: + </para> + <programlisting role="JAVA">... +public class PlanetsMoons { + private String currentPlanet=""; + public List&lt;SelectItem&gt; planetsList = new ArrayList&lt;SelectItem&gt;(); + public List&lt;String&gt; moonsList = new ArrayList&lt;String&gt;(); + private static final String [] EARTH = {"The Moon"}; + private static final String [] MARS = {"Deimos", "Phobos"}; + private static final String [] JUPITER = {"Europa", "Gamymede", "Callisto"}; + + public PlanetsMoons() { + SelectItem item = new SelectItem("earth", "Earth"); + planetsList.add(item); + item = new SelectItem("mars", "Mars"); + planetsList.add(item); + item = new SelectItem("jupiter", "Jupiter"); + planetsList.add(item); + } + + public void planetChanged(ValueChangeEvent event){ + moonsList.clear(); + String[] currentItems; + if (((String)event.getNewValue()).equals("earth")) { + currentItems = EARTH; + }else if(((String)event.getNewValue()).equals("mars")){ + currentItems = MARS; + }else{ + currentItems = JUPITER; + } + for (int i = 0; i &lt; currentItems.length; i++) { + moonsList.add(currentItems[i]); + } + } + + //Getters and Setters + ... +} +</programlisting> + <para> + There are two properties <code>planetsList</code> and <code>moonsList</code>. + The <code>planetsList</code> is filled with planets names in the constructor. + After you select the planet, + the <code>planetChanged()</code> listener is called and + the <code>moonsList</code> is populated with proper values of moons. + </para> + <para> + With the help of + <emphasis> + <property>"onsubmit"</property> + </emphasis> + and + <emphasis> + <property>"oncomplete"</property> + </emphasis> + attributes the <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> component + allows to use JavaScript calls before and after an Ajax request + respectively. + Actually the JavaScript specified in the <emphasis> + <property>"oncomplete"</property> + </emphasis> attribute + will be executed in any case whether the Ajax request is completed successfully or not. + </para> + <para> + You can easily add confirmation dialog for the planet select box and colorize + <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> after the Ajax response: + </para> + <programlisting role="XML">... +&lt;h:form id="planetsForm"&gt; + &lt;h:outputLabel value="Select the planet:" for="planets" /&gt; + &lt;h:selectOneMenu id="planets" value="#{planetsMoons.currentPlanet}" valueChangeListener="#{planetsMoons.planetChanged}"&gt; + &lt;f:selectItems value="#{planetsMoons.planetsList}" /&gt; + &lt;a4j:support event="onchange" reRender="moons" + onsubmit="if(!confirm('Are you sure to change the planet?')) {form.reset(); return false;}" + oncomplete="document.getElementById('planetsForm:moonsPanel').style.backgroundColor='#c8dcf9';" /&gt; + &lt;/h:selectOneMenu&gt; + &lt;h:dataTable id="moons" value="#{planetsMoons.moonsList}" var="item"&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{item}"/&gt; + &lt;/h:column&gt; + &lt;/h:dataTable&gt; +&lt;/h:form&gt; +...</programlisting> + <para> + There is the result: + </para> + <figure> + <title> + "Planets and Their Moons" + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/supportSample.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + Information about the + <emphasis> + <property>"process"</property> + </emphasis> + attribute usage you can find in the " + <link linkend="process">Decide what to process</link> + " guide section. + </para> + + <note> + <title>Tip:</title> + <para> + The + <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> + component created on a page as following + </para> + <programlisting role="XML">&lt;h:inputText value="#{bean.text}"&gt; + &lt;a4j:support event="onkeyup" reRender="output" action="#{bean.action}"/&gt; +&lt;/h:inputText&gt;</programlisting> + <para>is decoded in HTML as</para> + <programlisting role="XML">&lt;input onkeyup="A4J.AJAX.Submit( Some request parameters )"/&gt;</programlisting> + </note> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;a4j/support.html">Table of + &lt;a4j:support&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.ajax4jsf.Support</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.ajax4jsf.AjaxSupport</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.ajax4jsf.component.html.HtmlAjaxSupport</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.ajax4jsf.components.AjaxSupportRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf... demo page</ulink> + at RichFaces live demo for examples of component usage and their + sources. + </para> + + </section> +</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,16 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> -<section role="NotInToc"> - <sectioninfo> - <keywordset> - <keyword>a4j:actionparam</keyword> - </keywordset> - </sectioninfo> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:actionparam&gt;</property></emphasis> component combines the functionality of both JSF <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;f:actionListener&gt;</property></emphasis> - and allows to assign the value to the property of the manager bean directly using the <emphasis><property>assignTo</property></emphasis> attribute. - </para> - -</section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/actionparam.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,102 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset><keyword>a4j:actionparam</keyword> - </keywordset> - </chapterinfo> - <para> - <table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.ActionParameter</entry> - </row> - - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlActionParameter</entry> - </row> - - </tbody> - </tgroup> - </table> - </para> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Simple component definition example:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:actionparam noEscape="true" name="param1" value="getMyValue()" assignTo="#{bean.prop1}" />]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlActionParameter; -... -HtmlActionParameter myActionParameter = new HtmlActionParameter(); -... -]]></programlisting> - </section> - - - - - <section> - <title>Details of usage</title> - <para> - The component <emphasis role="bold"><property>&lt;a4j:actionparam&gt;</property></emphasis> is a combination of the functionality of two JSF tags: - <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;f:actionListener&gt;</property></emphasis>. - </para> - <para>At the render phase, it&apos;s decoded by parent component (<emphasis role="bold"><property>&lt;h:commandLink&gt;</property></emphasis> or like) as usual. - At the process request phase, if the parent component performs an action event, update the <emphasis><property>&quot;value&quot;</property></emphasis> specified in the - <emphasis><property>&quot;assignTo&quot;</property></emphasis>attribute as its <emphasis><property>&quot;value&quot;</property></emphasis>. - If a <emphasis><property>&quot;converter&quot;</property></emphasis> attribute is specified, use it to encode and decode the <emphasis><property>&quot;value&quot;</property></emphasis> to a string stored in the html parameter. - To make the <emphasis><property>&quot;assignTo&quot;</property></emphasis> attribute usable add the <code>actionParam</code> instance to the parent component as an action listener. - </para> - <para> - <emphasis role="bold"><property>&lt;a4j:actionparam&gt;</property></emphasis>has a <emphasis><property>&quot;noEscape&quot;</property></emphasis> attribute. - If it is set to <property>&quot;true&quot;</property>, the <emphasis><property>&quot;value&quot;</property></emphasis> is evaluated as a JavaScript code. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<script> - ... - var foo = "bar"; - ... -</script> -... -<a4j:actionparam noEscape="true" name="param1" value="foo" assignTo="#{bean.prop1}" /> -...]]></programlisting> - <para> - The <emphasis role="bold"><property>&lt;a4j:param&gt;</property></emphasis> extends <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis>, - so the <emphasis><property>&quot;name&quot;</property></emphasis> attribute is mandatory. - Otherwise, the <emphasis><property>&quot;value&quot;</property></emphasis> misses due missing the request parameter name for it. - </para> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/actionparam... page</ulink> at RichFaces LiveDemo for examples of component usage abd their sources. - </para> - <para> - More information can be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>. - </para> - <para> - More information about <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;f:actionListener&gt;</property></emphasis>can be found <ulink url="http://java.sun.com/javaee/javaserverfaces/1.2/docs/tlddocs/ind... Sun JSF TLD documentation</ulink>. - </para> - - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,24 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:ajaxListener</keyword> - </keywordset> - </sectioninfo> - - <section> - <title>Description</title> - <para>The component adds an action listener to a parent component to provide possibility of Ajax update. - It works like the <emphasis role="bold"><property>&lt;f:actionListener&gt;</property></emphasis> or <emphasis role="bold"><property>&lt;f:valueChangeListener&gt;</property></emphasis> JSF components - but for the whole Ajax container. - </para> - </section> - - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>The listener is invoked for Ajax requests only</para></listitem> - <listitem><para>The listener is always guaranteed to be invoked</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,132 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:ajaxListener</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - - <row> - <entry>listener-class</entry> - <entry>org.ajax4jsf.event.AjaxListener</entry> - </row> - <row> - <entry>event-class</entry> - <entry>org.ajax4jsf.event.AjaxEvent</entry> - </row> - - <row> - <entry>tag-class</entry> - <entry>org.ajax4jsf.taglib.html.jsp.AjaxListenerTag</entry> - </row> - </tbody> - </tgroup> - </table> - - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of the <emphasis role="bold"><property>a4j:ajaxListener</property></emphasis> component on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<a4j:ajaxListener type="demo.Bean"/> -...]]></programlisting> - </section> - -<section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[package demo; - -public class ImplBean implements import org.ajax4jsf.event.AjaxListener{ -... -} -]]></programlisting> - - <programlisting role="JAVA"><![CDATA[import demo.ImplBean; -... -ImplBean myListener = new ImplBean(); -...]]></programlisting> - - </section> - - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"><property>&lt;a4j:ajaxListener&gt;</property></emphasis> component adds an action listener to a parent component, which needs to be provided with Ajax support. - That listener is invoked on each Ajax request during the &quot;Render Response&quot; JSF phase. - In comparison with JSF <emphasis role="bold"><property>&lt;f:actionListener&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;f:valueChangeListener&gt;</property></emphasis> - the invocation of the <emphasis role="bold"><property>&lt;a4j:ajaxListener&gt;</property></emphasis> is not skipped in case when validation of Update Model fails. - The <emphasis role="bold"><property>&lt;a4j:ajaxListener&gt;</property></emphasis> is guarantied to be invoked for each Ajax response. - </para> - - <note> - <para> - Ajax listener is not invoked for non-Ajax requests and when RichFaces works in the &quot;Ajax Request generates Non-Ajax Response&quot; mode. - </para> - </note> - -<para> - As example of the <emphasis role="bold"><property>&lt;a4j:ajaxListener&gt;</property></emphasis> component usage one can cite an updating the list of re-rendered components. -</para> - -<para> - The <emphasis><property>&quot;type&quot;</property></emphasis> attribute defines the fully qualified Java class name for the listener. - This Java class implements <code><ulink url="&apidoc_framework;/org/ajax4jsf/event/AjaxListener.html"><property>org.ajax4jsf.event.AjaxListener</property></ulink></code>interface, which is base interface for all listeners, capable for receiving Ajax events. - The source of the event could be accessed using the <code><ulink url="http://java.sun.com/j2se/1.4.2/docs/api/java/util/EventObject.h... call. -</para> - - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<a4j:commandLink id="cLink" value="Click it To Send Ajax Request"> - <a4j:ajaxListener type="demo.Bean"/> -</a4j:commandLink> -...]]></programlisting> - -<para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="JAVA"><![CDATA[package demo; - -import org.ajax4jsf.event.AjaxEvent; - -public class Bean implements org.ajax4jsf.event.AjaxListener{ - ... - public void processAjax(AjaxEvent arg){ - //Custom Developer Code - } - ... -}]]></programlisting> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/ajaxListene... page at RichFaces Livedemo for examples of component usage and their sources. - </para> - <para> - Check Sun JSF TLD documentation for more information on <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... tag</ulink>. - </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,25 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="ajaxValidator" role="new"> - <sectioninfo> - <keywordset> - <keyword>rich:ajaxValidator</keyword> - </keywordset> - <releaseinfo>3.2.2</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The<emphasis role="bold"> - <property>&lt;rich:ajaxValidator&gt;</property> - </emphasis>is a component designed to provide Ajax validation inside for JSF inputs.</para> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Skips all JSF processing except validation</para></listitem> - <listitem><para>Possibility to use both standard and custom validation</para></listitem> - <listitem><para>Possibility to use Hibernate Validation</para></listitem> - <listitem><para>Event based validation triggering</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/ajaxValidator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,261 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:ajaxValidator</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.ajaxValidator</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlajaxValidator</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.ajaxValidator</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.ajaxValidatorRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.ajaxValidatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:outputText value="Name:" /> -<h:inputText value="#{userBean.name}" id="name" required="true"> - <f:validateLength minimum="3" maximum="12"/> - <rich:ajaxValidator event="onblur"/> -</h:inputText> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlCalendar; -... -HtmlAjaxValidator myAjaxValidator= new HtmlAjaxValidator(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - - <para>The <emphasis role="bold"> - <property>&lt;rich:ajaxValidator&gt;</property> - </emphasis> component should be added as a child component to an input - JSF tag which data should be validated and an event that triggers - validation should be specified as well. The component is ajaxSingle by - default so only the current field will be validated.</para> - - - <para>The following example demonstrates how the <emphasis role="bold"> - <property>&lt;rich:ajaxValidator&gt;</property> - </emphasis> adds Ajax functionality to standard JSF validators. The - request is sent when the input field loses focus, the action is - determined by the <emphasis> - <property>&quot;event&quot;</property> - </emphasis> attribute that is set to - <code>&quot;onblur&quot;</code>. </para> - - - - <programlisting role="XML"><![CDATA[... -<rich:panel> - <f:facet name="header"> - <h:outputText value="User Info:" /> - </f:facet> - <h:panelGrid columns="3"> - <h:outputText value="Name:" /> - <h:inputText value="#{userBean.name}" id="name" required="true"> - <f:validateLength minimum="3" maximum="12"/> - <rich:ajaxValidator event="onblur"/> - </h:inputText> - <rich:message for="name" /> - - <h:outputText value="Age:" /> - <h:inputText value="#{userBean.age}" id="age" required="true"> - <f:convertNumber integerOnly="true"/> - <f:validateLongRange minimum="18" maximum="99"/> - <rich:ajaxValidator event="onblur"/> - </h:inputText> - <rich:message for="age"/> - </h:panelGrid> -</rich:panel> -...]]></programlisting> - - <para>This is the result of the snippet. </para> - - - <figure> - <title>Simple example of <emphasis role="bold"> - <property>&lt;rich:ajaxValidator&gt;</property> - </emphasis>with </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/ajaxValidator1.png"/> - </imageobject> - </mediaobject> - </figure> - - - <para>In the example above it's show how to work with standard JSF validators. - The <emphasis role="bold"> - <property>&lt;rich:ajaxValidator&gt;</property> - </emphasis> component also works perfectly with custom validators - enhancing their usage with Ajax. </para> - - <para> Custom validation can be performed in two ways: </para> - - <itemizedlist> - <listitem> - <para>Using JSF Validation API is available in - javax.faces.validator package</para> - </listitem> - <listitem> - <para>Using Hibernate Validator, specifying a constraint for - the data to be validated. A reference on Hibernate - Validator can be found <ulink - url="http://www.hibernate.org/hib_docs/validator/reference/en/html_s... - >in Hibernated documentation</ulink>. - </para> - </listitem> - </itemizedlist> - - <para> The following example shows how the data entered by user can be validated - using Hibernate Validator. </para> - - <programlisting role="XML"><![CDATA[... -<rich:panel> - <f:facet name="header"> - <h:outputText value="User Info:" /> - </f:facet> - <h:panelGrid columns="3"> - <h:outputText value="Name:" /> - <h:inputText value="#{validationBean.name}" id="name" required="true"> - <rich:ajaxValidator event="onblur" /> - </h:inputText> - <rich:message for="name" /> - - <h:outputText value="Email:" /> - <h:inputText value="#{validationBean.email}" id="email"> - <rich:ajaxValidator event="onblur" /> - </h:inputText> - <rich:message for="email" /> - - <h:outputText value="Age:" /> - <h:inputText value="#{validationBean.age}" id="age"> - <rich:ajaxValidator event="onblur" /> - </h:inputText> - <rich:message for="age" /> - </h:panelGrid> -</rich:panel> -...]]></programlisting> - - - <para>Here is the source code of the managed bean.</para> - - - <programlisting role="JAVA"><![CDATA[package org.richfaces.demo.validation; - -import org.hibernate.validator.Email; -import org.hibernate.validator.Length; -import org.hibernate.validator.Max; -import org.hibernate.validator.Min; -import org.hibernate.validator.NotEmpty; -import org.hibernate.validator.NotNull; -import org.hibernate.validator.Pattern; - -public class ValidationBean { - - private String progressString="Fill the form please"; - - @NotEmpty - @Pattern(regex=".*[^\\s].*", message="This string contain only spaces") - @Length(min=3,max=12) - private String name; - @Email - @NotEmpty - private String email; - - @NotNull - @Min(18) - @Max(100) - private Integer age; - - public ValidationBean() { - } - - /* Corresponding Getters and Setters */ - -}]]></programlisting> - - <para>By default the Hibernate Validator generates an error message in 10 - language, though you can redefine the messages that are displayed to a - user when validation fails. In the shows example it was done by adding - <code>(message=&quot;wrong email - format&quot;)</code> to the <code>@Email</code> annotation.</para> - - <para>This is how it looks. </para> - <figure> - <title>Validation using Hibernate validator </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/ajaxValidator2.png"/> - </imageobject> - </mediaobject> - </figure> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/ajaxValidat... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,23 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="beanValidator" role="new"> - <sectioninfo> - <keywordset> - <keyword>rich:beanValidator</keyword> - <keyword>RichFaces</keyword> - </keywordset> - <releaseinfo>3.2.2</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The<emphasis role="bold"><property>&lt;rich:beanValidator&gt;</property></emphasis> component designed to provide validation using Hibernate model-based constraints. - </para> - </section> - - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Validation using Hibernate constraints</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/beanValidator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,201 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:beanValidator</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.beanValidator</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlbeanValidator</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.beanValidator</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.beanValidatorRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.beanValidatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para> - To create the simplest variant of the component on a page use the following syntax: - </para> - - <programlisting role="XML"><![CDATA[<h:inputText value="#{validationBean.email}" id="email"> - <rich:beanValidator summary="Invalid email"/> -</h:inputText>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlCalendar; -... -HtmlbeanValidator mybeanValidator= new HtmlbeanValidator(); -... -]]></programlisting> - </section> - - - <section> - <title>Details of Usage</title> - - <para>Starting from 3.2.2 GA version Rich Faces provides support for model-based constraints defined using Hibernate Validator. - Thus it's possible to use Hibernate Validators the same as for Seam based applications. - </para> - <para> - The <emphasis role="bold"><property>&lt;rich:beanValidator&gt;</property></emphasis> component is defined in the same way as any JSF validator. - Look at the example below. - </para> - <programlisting role="XML"><![CDATA[<rich:panel> - <f:facet name="header"> - <h:outputText value="#{validationBean.progressString}" id="progress"/> - </f:facet> - <h:panelGrid columns="3"> - <h:outputText value="Name:" /> - <h:inputText value="#{validationBean.name}" id="name"> - <rich:beanValidator summary="Invalid name"/> - </h:inputText> - <rich:message for="name" /> - - <h:outputText value="Email:" /> - <h:inputText value="#{validationBean.email}" id="email"> - <rich:beanValidator summary="Invalid email"/> - </h:inputText> - <rich:message for="email" /> - - <h:outputText value="Age:" /> - <h:inputText value="#{validationBean.age}" id="age"> - <rich:beanValidator summary="Wrong age"/> - </h:inputText> - <rich:message for="age" /> - <f:facet name="footer"> - <a4j:commandButton value="Submit" action="#{validationBean.success}" reRender="progress"/> - </f:facet> - </h:panelGrid> -</rich:panel>]]></programlisting> - - <para> - Please play close attention on the bean code that contains the constraints defined with Hibernate annotation which perform validation of the input data. - </para> - - <programlisting role="JAVA"><![CDATA[ - -package org.richfaces.demo.validation; - -import org.hibernate.validator.Email; -import org.hibernate.validator.Length; -import org.hibernate.validator.Max; -import org.hibernate.validator.Min; -import org.hibernate.validator.NotEmpty; -import org.hibernate.validator.NotNull; -import org.hibernate.validator.Pattern; - -public class ValidationBean { - - private String progressString="Fill the form please"; - - @NotEmpty - @Pattern(regex=".*[^\\s].*", message="This string contain only spaces") - @Length(min=3,max=12) - private String name; - @Email - @NotEmpty - private String email; - - @NotNull - @Min(18) - @Max(100) - private Integer age; - - public ValidationBean() { - } - - /* Corresponding Getters and Setters */ - - public void success() { - setProgressString(getProgressString() + "(Strored successfully)"); - } - - public String getProgressString() { - return progressString; - } - - public void setProgressString(String progressString) { - this.progressString = progressString; - } -}]]></programlisting> - - <para>The following figure shows what happens if validation fails</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:beanValidator&gt;</property> - </emphasis> usage</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/beanValidator1.png" - /> - </imageobject> - </mediaobject> - </figure> - <para>As you can see from the example that in order to validate the - <emphasis role="bold"> - <property>&lt;rich:beanValidator&gt;</property> - </emphasis> should be nested into a input JSF or RichFaces - component. </para> - - <para>The component has the only attribute - <emphasis> - <property>&quot;summary&quot;</property> - </emphasis>which displays validation messages about - validation errors.</para> - </section> - - - - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/beanValidat... - On RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"><property>&lt;rich:beanValidator&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,34 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:calendar</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> component is used to create inputs for date and time and enter them inline or using pup-up calendar that allows to navigate through monthes and years. - </para> - <figure> - <title><emphasis role="bold"> <property>&lt;rich:calendar&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Popup representation</para></listitem> - <listitem><para>Disablement support</para></listitem> - <listitem><para>Smart and user-defined positioning</para></listitem> - <listitem><para>Cells customization</para></listitem> - <listitem><para>Macro substitution based on tool bars customization</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/calendar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,2028 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:calendar</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.Calendar</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlCalendar</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.Calendar</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.CalendarRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.CalendarTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - <programlisting role="XML"><![CDATA[<rich:calendar />]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlCalendar; -... -HtmlCalendar myCalendar = new HtmlCalendar(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para> - The <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> component can work properly in two ways of data loading - defined by the <emphasis><property>&quot;mode&quot;</property></emphasis> attribute. - The attribute has two possible values: - </para> - <itemizedlist> - <listitem> - <para> - <code>client</code> — the default mode. - In this mode calendar loads an initial portion of data within a definite date range. - The range is specified with the help of <emphasis><property>&quot;preloadDateRangeBegin&quot;</property></emphasis> and <emphasis><property>&quot;preloadDateRangeEnd&quot;</property></emphasis> attributes - that are designed for this mode only! - Additional data requests are not sent. - </para> - </listitem> - </itemizedlist> - <itemizedlist> - <listitem> - <para> - <code>ajax</code> — in this mode the <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> requests portions of data for element rendering from special Data Model. - The default calendar Data Model could be redefined with the help of <emphasis><property>dataModel</property></emphasis> attribute that points to the object that implements <code><ulink url="&apidoc_framework;/org/richfaces/model/CalendarDataModel.html">CalendarDataModel</ulink></code> interface. - If <emphasis><property>&quot;dataModel&quot;</property></emphasis> attribute has <emphasis><property>&quot;null&quot;</property></emphasis> value, data requests are not sent. - In this case the &quot;<code>ajax</code>&quot; mode is equal to the &quot;<code>client</code>&quot;. - </para> - </listitem> - </itemizedlist> - - <para> - The <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> could be represented on a page in two ways (a) the calendar itself without input field and button and - (b) date input with button and popping-up calendar. - This is defined with <emphasis><property>&quot;popup&quot; </property></emphasis> attribute, which is <emphasis><property>&quot;true&quot;</property></emphasis> by default. - For popup rendering a &quot;lazy&quot; loading is implemented: a client side script method builds the popup after request is completed. - Such improvement speeds up page loading time. - </para> - - <figure> - <title>The <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> with <emphasis><property>popup=&quot;false&quot;</property></emphasis> (a) and default representation (b)</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar7.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - By default the <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> is rendered as input filed with a button and calendar hidden in a pop-up. - The button is represented with calendar pictogramm. - This pictogramm could be easily changed with the help of <emphasis><property>&quot;buttonIcon&quot;</property></emphasis> - and <emphasis><property>&quot;buttonIconDisabled&quot;</property></emphasis> attributes, which specify the icon for button enabled and disabled states respectively. - To change the button appearance from icon to usual button define the value for the <emphasis><property>&quot;buttonLabel&quot;</property></emphasis> attribute. - In this case <emphasis><property>&quot;buttonIcon&quot;</property></emphasis> and <emphasis><property>&quot;buttonIconDisabled&quot;</property></emphasis> attributes are ignored. - </para> - - <figure> - <title>The <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> with <emphasis><property>buttonLabel=&quot;Open calendar&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar8.png"/> - </imageobject> - </mediaobject> - </figure> - - - <para> - There are two attributes that specify the place where the popup calendar is rendered relative to the input field and icon: - <emphasis><property>&quot;jointPoint&quot;</property></emphasis> and <emphasis><property>&quot;direction&quot;</property></emphasis> attributes. - By default the pop-up calendar appears under input and aligned with it left border (see Fig. 6.211, b). - Speaking in terms of RichFaces it means that <emphasis role="bold"><property>&lt;rich:calendar&gt;</property></emphasis> <emphasis><property>jointPoint=&quot;bottom-left&quot;</property></emphasis> - and <emphasis><property>direction=&quot;bottom-right&quot;.</property></emphasis> - There are four possible joint-points and four possible directions for each joint-point. - Besides that, the values of <emphasis><property>&quot;jointPoint&quot;</property></emphasis> and <emphasis><property>&quot;direction&quot;</property></emphasis> could be set to - <emphasis><property>&quot;auto&quot;</property></emphasis> that activates smart pop-up positioning. - </para> - - <figure> - <title>Four possible positions of joint-points (red) and four possible directions (black) shown for bottom-left joint-point.</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar9.png"/> - </imageobject> - </mediaobject> - </figure> - - - - <para>Usage <emphasis> - <property>&quot;currentDate&quot;</property> - </emphasis> attribute isn&apos;t available in the popup mode.</para> - <para>With help of the <emphasis> - <property>&quot;currentDate&quot;</property> - </emphasis> attribute you can define month and year which will be - displayed currently.</para> - <para>The <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute stores selected date currently.</para> - - <para>The difference between the value and currentDate attributes </para> - <para> The <emphasis> - <property>&quot;todayControlMode&quot;</property> - </emphasis> attribute defines the mode for &quot;today&quot; - control. Possible values are: </para> - <itemizedlist> - <listitem> - <para>&quot;hidden&quot; - in this mode - &quot;Today&quot; button will not be - displayed</para> - </listitem> - <listitem> - <para>&quot;select&quot; - (default) in this state - &quot;Today&quot; button activation will - scroll the calendar to the current date and it - become selected date</para> - </listitem> - <listitem> - <para>&quot;scroll&quot; - in this mode - &quot;Today&quot; activation will simply - scroll the calendar to current month without - changing selected day.</para> - </listitem> - </itemizedlist> - - - - <para> - With the help of the - <emphasis> - <property>&quot;readonly&quot;</property> - </emphasis> - attribute you can make date, time and input field unavailable, but you can look through the next/previous month or the next/previous year. - </para> - <para> - In order to disable the component, use the <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> attribute. With its help both controls are disabled in the - <emphasis> - <property>&quot;popup&quot;</property> - </emphasis> - mode. - </para> - <figure> - <title>Using the <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> attribute.</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar6.png"/> - </imageobject> - </mediaobject> - </figure> - - - - - <para><emphasis> - <property>&quot;ondateselect&quot;</property> - </emphasis> attribute is used to define an event that is triggered - before date selection.</para> - <para><emphasis> - The <property>&quot;ondateselected&quot;</property> - </emphasis> attribute is used to define an event that is triggered - after date selection. </para> - <para>For example, to fire some event after date selection you should use - <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis>. And it should be bound to <emphasis> - <property>&quot;ondateselected&quot;</property> - </emphasis> event as it&apos;s shown in the example below:</para> - <programlisting role="XML"><![CDATA[... -<rich:calendar id="date" value="#{bean.dateTest}"> - <a4j:support event="ondateselected" reRender="mainTable"/> -</rich:calendar> -...]]></programlisting> - <note> - <title>Note:</title> - <para> - When a timePicker was fulfilled, the <emphasis><property>&quot;ondateselected&quot;</property></emphasis> attribute does not allow you to submit a selected date. It happens because this event rose when the date is selected but the input hasn't been updated with new value yet. - - </para> - </note> - <para><emphasis> - <property>&quot;ondateselect&quot;</property> - </emphasis> could be used for possibility of date selection canceling. - See an example below:</para> - <programlisting role="XML"><![CDATA[... -<rich:calendar id="date" value="#{bean.dateTest}" ondateselect="if (!confirm('Are you sure to change date?')){return false;}"/> -...]]></programlisting> - <para> - <emphasis> - <property>&quot;oncurrentdateselected&quot;</property> - </emphasis> event is fired when the "next/previous month" or - "next/previous year" button is pressed, and the value is applied. </para> - <para> - <emphasis> - <property>&quot;oncurrentdateselect&quot;</property> - </emphasis> event is fired when the "next/previous month" or - "next/previous year" button is pressed, but the value is not applied - yet (you can change the logic of applying the value). Also this event - could be used for possibility of "next/previous month" or - "next/previous year" selection canceling. See an example below: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:calendar id="date" value="#{bean.dateTest}" oncurrentdateselect="if (!confirm('Are you sure to change month(year)?')){return false;}" - oncurrentdateselected="alert('month(year) select:'+event.rich.date.toString());"/> -...]]></programlisting> - <para>How to use these attributes see also on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find <link linkend="process" - >in the corresponding section </link>. </para> - - - - - - - - <para> The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and - the message that the component (indirectly) produced. This attribute - defines the parameters of localized error and informational messages - that occur as a result of conversion, validation, or other application - actions during the request processing lifecycle. With the help of this - attribute you can replace the last parameter substitution token shown - in the messages. For example, {1} for - <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, - {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> - <para>The <emphasis> - <property>&quot;defaultTime&quot;</property> - </emphasis> attribute to set the default time value for the current - date in two cases:</para> - <itemizedlist> - <listitem> - <para> If time is not set </para> - </listitem> - <listitem> - <para> If another date is selected and the value of the <emphasis> - <property>&quot;resetTimeOnDateSelect&quot;</property> - </emphasis> attribute is set to - &quot;true&quot; </para> - </listitem> - </itemizedlist> - <para> The <emphasis> - <property> &quot;enableManualInput&quot; </property> - </emphasis> attribute enables/disables input field, so when <code> - enableManualInput = &quot;false&quot; </code>, user - can only pick the date manually and has no possibility to type in the - date (default value is &quot;false&quot;). </para> - <para>The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component allows to use <emphasis> - <property>&quot;header&quot;</property> - </emphasis>, <emphasis> - <property>&quot;footer&quot;</property> - </emphasis>, <emphasis> - <property>&quot;optionalHeader&quot;</property> - </emphasis>, <emphasis> - <property>&quot;optionalFooter&quot;</property> - </emphasis> facets. The following elements are available in these - facets: <code>{currentMonthControl}</code>, - <code>{nextMonthControl}</code>, <code>{nextYearControl}</code>, - <code>{previousYearControl}</code>, - <code>{previousMonthControl}</code>, - <code>{todayControl}</code>, <code>{selectedDateControl}</code>. These - elements could be used for labels output.</para> - <para>Also you can use <emphasis> - <property>&quot;weekNumber&quot;</property> - </emphasis> facet with available <code>{weekNumber}</code>, - <code>{elementId}</code> elements and <emphasis> - <property>&quot;weekDay&quot;</property> - </emphasis> facet with <code>{weekDayLabel}</code>, - <code>{weekDayLabelShort}</code>, - <code>{weekDayNumber}</code>, <code>{isWeekend}</code>, - <code>{elementId}</code> elements. - <code>{weekNumber}</code>, <code>{weekDayLabel}</code>, - <code>{weekDayLabelShort}</code>, - <code>{weekDayNumber}</code> elements could be used for labels output, - <code>{isWeekend}</code>, <code>{elementId}</code> - for - additional processing in JavaScript code.</para> - <para>These elements are shown on the picture below.</para> - - <figure> - <title>Available elements</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>Simple example of usage is placed below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -<!-- Styles for cells --> -<style> - .width100{ - width:100%; - } - .talign{ - text-align:center; - } -</style> -...]]></programlisting> - - <programlisting role="XML"><![CDATA[... -<rich:calendar id="myCalendar" popup="true" locale="#{calendarBean.locale}" value="#{bean.date}" - preloadRangeBegin="#{bean.date}" preloadRangeEnd="#{bean.date}" cellWidth="40px" cellHeight="40px"> - - <!-- Customization with usage of facets and accessible elements --> - <f:facet name="header"> - <h:panelGrid columns="2" width="100%" columnClasses="width100, fake"> - <h:outputText value="{selectedDateControl}" /> - <h:outputText value="{todayControl}" style="font-weight:bold; text-align:left"/> - </h:panelGrid> - </f:facet> - <f:facet name="weekDay"> - <h:panelGroup style="width:60px; overflow:hidden;" layout="block"> - <h:outputText value="{weekDayLabelShort}"/> - </h:panelGroup> - </f:facet> - <f:facet name="weekNumber"> - <h:panelGroup> - <h:outputText value="{weekNumber}" style="color:red"/> - </h:panelGroup> - </f:facet> - <f:facet name="footer"> - <h:panelGrid columns="3" width="100%" columnClasses="fake, width100 talign"> - <h:outputText value="{previousMonthControl}" style="font-weight:bold;"/> - <h:outputText value="{currentMonthControl}" style="font-weight:bold;"/> - <h:outputText value="{nextMonthControl}" style="font-weight:bold;"/> - </h:panelGrid> - </f:facet> - <h:outputText value="{day}"></h:outputText> -</rich:calendar> -...]]></programlisting> - - <para>This is a result:</para> - <figure> - <title>Facets usage</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it&apos;s shown on the picture above - <code>{selectedDateControl}</code>, <code>{todayControl}</code> - elements are placed in the <emphasis> - <property>&quot;header&quot;</property> - </emphasis> facet, <code>{previousMonthControl}</code>, - <code>{currentMonthControl}</code>, - <code>{nextMonthControl}</code> - in the <emphasis> - <property>&quot;footer&quot;</property> - </emphasis> facet, <code>{weekDayLabelShort}</code> - in the <emphasis> - <property>&quot;weekDay&quot;</property> - </emphasis> facet, <code>{nextYearControl}</code>, - <code>{previousYearControl}</code> are absent. Numbers of - weeks are red colored.</para> - - <para> It is possible to show and manage date. Except scrolling controls you can - use quick month and year selection feature. It&apos;s necessary to - click on its field, i.e. current month control, and choose required - month and year. </para> - <figure> - <title>Quick month and year selection</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar5.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Also the <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component allows to show and manage time. It&apos;s - necessary to define time in a pattern (for example, it could be - defined as &quot;<code>d/M/yy HH:mm</code>&quot;). Then after - you choose some data in the calendar, it becomes possible to manage - time for this date. For time editing it&apos;s necessary to click - on its field (see a picture below). To clean the field click on the - &quot;Clean&quot;.</para> - - <figure> - <title>Timing</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar4.png"/> - </imageobject> - </mediaobject> - </figure> - - - <para>It&apos;s possible to handle events for calendar from JavaScript code. - A simplest example of usage JavaScript API is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:calendar value="#{calendarBean.selectedDate}" id="calendarID" - locale="#{calendarBean.locale}" - popup="#{calendarBean.popup}" - datePattern="#{calendarBean.pattern}" - showApplyButton="#{calendarBean.showApply}" style="width:200px"/> -<a4j:commandLink onclick="$('formID:calendarID').component.doExpand(event)" value="Expand"/> -...]]></programlisting> - - <para>Also the discussion about this problem can be found on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - - - - <!-- <para>The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component provides the possibility to use a special Data - Model to define data for element rendering. Data Model includes two - major interfaces: </para> - <itemizedlist> - <listitem> - <para> - <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... - - </para> - </listitem> - <listitem> - <para> <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... - - </para> - </listitem> - </itemizedlist> - - - <para><code>CalendarDataModel</code> provides the following function:</para> - <itemizedlist> - <listitem> - <para><code>CalendarDataModelItem[] - getData(Date[])</code>;</para> - </listitem> - </itemizedlist> - <para>This method is called when it&apos;s necessary to represent the next - block of <code>CalendarDataModelItem</code>. It happens during navigation - to the next (previous) month or in any other case when calendar - renders. This method is called in <emphasis> - <property>&quot;Ajax&quot;</property> - </emphasis> mode when the calendar renders a new page. </para> - <para><code>CalendarDataModelItem</code> provides the following function:</para> - <itemizedlist> - <listitem> - <para>Date <code>getDate()</code> - returns date from the - item. Default implementation returns date.</para> - </listitem> - <listitem> - <para>Boolean <code>isEnabled()</code> - returns - &quot;true&quot; if date is <emphasis> - <property>&quot;selectable&quot;</property> - </emphasis> on the calendar. Default - implementation returns - &quot;true&quot;.</para> - </listitem> - <listitem> - <para>String <code>getStyleClass()</code> - returns string - appended to the style class for the date span. For - example it could be &quot;relevant - holyday&quot;. It means that the class could - be defined like the - &quot;rich-cal-day-relevant-holyday&quot; - one. Default implementation returns empty - string.</para> - </listitem> - <listitem> - <para>Object <code>getData()</code> - returns any additional - payload that must be JSON-serializable object. It - could be used in the custom date representation on - the calendar (inside the custom facet).</para> - </listitem> - </itemizedlist> - ---> - - - <para> The <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component provides the possibility to use - internationalization method to redefine and localize the labels. You - could use application resource bundle and define - <code>RICH_CALENDAR_APPLY_LABEL</code>, - <code>RICH_CALENDAR_TODAY_LABEL</code>, - <code>RICH_CALENDAR_CLOSE_LABEL</code>, - <code>RICH_CALENDAR_OK_LABEL</code>, - <code>RICH_CALENDAR_CLEAN_LABEL</code>, - <code>RICH_CALENDAR_CANCEL_LABEL </code> there. </para> - <para>You could also pack <code>org.richfaces.renderkit.calendar</code> - <ulink - url="&apidoc;/org/richfaces/renderkit/CalendarRendererBase.html#CALENDAR_BUNDLE" - >resource</ulink> bundle with your JARs defining the same - properties. </para> - <note> - <title>Note:</title> - <para>Only for Internet Explorer 6 and later. To make <emphasis - role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> inside <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> rendered properly, enable the - standards-compliant mode. Explore <ulink - url="http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx" - >!DOCTYPE reference at MSDN</ulink> to find out - how to do this. </para> - </note> - - </section> - - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>selectDate(date)</entry> - - <entry>Selects the date specified. If - the date isn&apos;t in - current month - performs - request to select</entry> - </row> - - <row> - <entry role="tbi">isDateEnabled(date)</entry> - - <entry role="tbi">Checks if given date - is selectable (to be - implemented)</entry> - </row> - - <row> - <entry role="tbi">enableDate(date)</entry> - - <entry role="tbi">Enables date cell - control on the calendar (to be - implemented)</entry> - </row> - - <row> - <entry role="tbi">disableDate(date)</entry> - - <entry role="tbi">Disables date cell - control on the calendar (to be - implemented)</entry> - </row> - - <row> - <entry role="tbi">enableDates(date[])</entry> - - <entry role="tbi">Enables dates cell - controls set on the calendar - (to be implemented)</entry> - </row> - - <row> - <entry role="tbi">disableDates(date[])</entry> - - <entry role="tbi">Disables dates cell - controls set on the calendar - (to be implemented)</entry> - </row> - - <row> - <entry>nextMonth()</entry> - - <entry>Navigates to next month</entry> - </row> - - <row> - <entry>nextYear()</entry> - - <entry>Navigates to next year</entry> - </row> - - <row> - <entry>prevMonth()</entry> - - <entry>Navigates to previous month - </entry> - </row> - - <row> - <entry>prevYear()</entry> - - <entry>Navigates to previous - year</entry> - </row> - - <row> - <entry>today()</entry> - - <entry>Selects today date</entry> - </row> - - <row> - <entry>getSelectedDate()</entry> - - <entry>Returns currently selected - date</entry> - </row> - - <row> - <entry>Object getData()</entry> - - <entry>Returns additional data for the - date</entry> - </row> - - <!-- - <row> - <entry>enable()</entry> - - <entry>Enables calendar</entry> - </row> - - <row> - <entry>disable()</entry> - - <entry>Disables calendar</entry> - </row> - --> - - <row> - <entry>getCurrentMonth()</entry> - - <entry>Returns number of the month - currently being viewed</entry> - </row> - - <row> - <entry>getCurrentYear()</entry> - - <entry>Returns number of the year - currently being viewed</entry> - </row> - - <row> - <entry>doCollapse()</entry> - - <entry>Collapses calendar - element</entry> - </row> - - <row> - <entry>doExpand()</entry> - - <entry>Expands calendar element</entry> - </row> - - <row> - <entry>resetSelectedDate()</entry> - - <entry>Clears a selected day - value</entry> - </row> - - <row> - <entry>doSwitch()</entry> - - <entry>Inverts a state for the popup - calendar</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - - - <section> - <title> - Facets - </title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Redefines calendar header. Related attribute is &quot;showHeader&quot;</entry> - </row> - <row> - <entry>footer</entry> - <entry>Redefines calendar footer. Related attribute is &quot;showFooter&quot;</entry> - </row> - <row> - <entry>optionalHeader</entry> - <entry>Defines calendar&apos;s optional header</entry> - </row> - <row> - <entry>optionalFooter</entry> - <entry>Defines calendar&apos;s optional footer</entry> - </row> - <row> - <entry>weekNumber</entry> - <entry>Redefines week number</entry> - </row> - <row> - <entry>weekDay</entry> - <entry>Redefines names of the week days. Related attributes are &quot;weekDayLabels&quot; and &quot;weekDayLabelsShort&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a popup element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for headers (header, optional - header)</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-bottom-color</entry> - </row> - - <row> - <entry>additionalBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for footers (footer, optional - footer) and names of working days</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-top-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-right-color</entry> - </row> - - <row> - <entry>additionalBackgroundColor</entry> - - <entry>background</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for weeks numbers</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-bottom-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-right-color</entry> - </row> - - <row> - <entry>additionalBackgroundColor</entry> - - <entry>background</entry> - </row> - - <row> - <entry>calendarWeekBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a toolBar and names of months</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>headerSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>headerFamilyFont</entry> - - <entry>font-family</entry> - </row> - - <row> - <entry>headerWeightFont</entry> - - <entry>font-weight</entry> - </row> - - <row> - <entry>headerTextColor</entry> - - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for cells with days</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-bottom-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-right-color</entry> - </row> - - <row> - <entry>generalBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for holiday</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>calendarHolidaysBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>calendarHolidaysTextColor</entry> - - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for cell with a current date</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>calendarCurrentBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>calendarCurrentTextColor</entry> - - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a selected day</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>headerTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>headerWeightFont</entry> - - <entry>font-weight</entry> - </row> - - </tbody> - </tgroup> - </table> - - <!-- Quick year & month selection--> - <table> - <title>Skin parameters redefinition for a popup element during quick - month and year selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a shadow</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>shadowBackgroundColor</entry> - <entry>background-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a selected month and year</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>calendarCurrentBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>calendarCurrentTextColor</entry> - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a hovered month and year</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - <row> - <entry>calendarSpecBackgroundColor</entry> - <entry>background</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a month items near split line</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a hovered toolbar items</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>calendarWeekBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - <row> - <entry>tableBackgroundColor</entry> - <entry>border-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a pressed toolbar items</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - <row> - <entry>tableBackgroundColor</entry> - <entry>border-right-color</entry> - </row> - - <row> - <entry>tableBackgroundColor</entry> - <entry>border-bottom-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for &quot;ok&quot; and - &quot;cancel&quot; buttons</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>additionalBackgroundColor</entry> - <entry>background</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <!-- Time selection--> - - <table> - <title>Skin parameters redefinition for a popup element during time - selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>additionalBackgroundColor</entry> - <entry>background</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a wrapper &lt;td&gt; - element for an input field</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - <row> - <entry>subBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - - <row> - <entry>subBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for an input field</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>buttonSizeFont</entry> - <entry>font-size</entry> - </row> - - <row> - <entry>buttonFamilyFont</entry> - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a wrapper &lt;td&gt; - element for spinner buttons</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component - elements.</para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_cn1.png" - scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_cn2.png" - scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_cn3.png" - scalefit="1"/> - </imageobject> - </mediaobject> - - </figure> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_cn4.png" - scalefit="1"/> - </imageobject> - </mediaobject> - - </figure> - <table id="tab_cn3"> - <title>Classes names that define an input field and a button - appearance</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-calendar-input </entry> - - <entry>Defines styles for an input - field</entry> - </row> - - <row> - <entry>rich-calendar-button</entry> - - <entry>Defines styles for a popup - button</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a days appearance</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>rich-calendar-days</entry> - - <entry>Defines styles for names of - working days in a - header</entry> - </row> - - <row> - <entry>rich-calendar-weekends</entry> - - <entry>Defines styles for names of - weekend in a header</entry> - </row> - - <row> - <entry>rich-calendar-week</entry> - - <entry>Defines styles for weeks - numbers</entry> - </row> - - <row> - <entry>rich-calendar-today</entry> - - <entry>Defines styles for cell with a - current date</entry> - </row> - - <row> - <entry>rich-calendar-cell</entry> - - <entry>Defines styles for cells with - days</entry> - </row> - - <row> - <entry>rich-calendar-holly</entry> - - <entry>Defines styles for - holiday</entry> - </row> - - <row> - <entry>rich-calendar-select</entry> - - <entry>Defines styles for a selected - day</entry> - </row> - - <row> - <entry>rich-calendar-hover</entry> - - <entry>Defines styles for a hovered - day</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a popup element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-calendar-popup</entry> - - <entry>Defines styles for a popup - element</entry> - </row> - <row> - <entry>rich-calendar-exterior</entry> - - <entry>Defines styles for a popup - element exterior</entry> - </row> - - <row> - <entry>rich-calendar-tool</entry> - - <entry>Defines styles for - toolbars</entry> - </row> - - <row> - <entry>rich-calendar-month</entry> - - <entry>Defines styles for names of - months</entry> - </row> - - <row> - <entry>rich-calendar-header-optional</entry> - - <entry>Defines styles for an optional - header</entry> - </row> - - <row> - <entry>rich-calendar-footer-optional</entry> - - <entry>Defines styles for an optional - footer</entry> - </row> - - <row> - <entry>rich-calendar-header</entry> - - <entry>Defines styles for a - header</entry> - </row> - - <row> - <entry>rich-calendar-footer</entry> - - <entry>Defines styles for a - footer</entry> - </row> - - <row> - <entry>rich-calendar-boundary-dates</entry> - - <entry>Defines styles for an active - boundary button</entry> - </row> - - <row> - <entry>rich-calendar-btn</entry> - - <entry>Defines styles for an inactive - boundary date</entry> - </row> - - <row> - <entry>rich-calendar-toolfooter</entry> - - <entry>Defines styles for a today - control date</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a popup element during quick month - and year selection</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-calendar-date-layout</entry> - <entry>Defines styles for a popup - element during quick year - selection</entry> - </row> - <row> - <entry>rich-calendar-editor-layout-shadow</entry> - <entry>Defines styles for a - shadow</entry> - </row> - <row> - <entry>rich-calendar-editor-btn</entry> - <entry>Defines styles for an inactive - boundary date</entry> - </row> - <row> - <entry>rich-calendar-date-layout-split</entry> - <entry>Defines styles for a wrapper - &lt;td&gt; element for - month items near split - line</entry> - </row> - <row> - <entry>rich-calendar-editor-btn-selected</entry> - <entry>Defines styles for an selected - boundary date</entry> - </row> - <row> - <entry>rich-calendar-editor-btn-over</entry> - <entry>Defines styles for a boundary - date when pointer was moved - onto</entry> - </row> - - <row> - <entry>rich-calendar-editor-tool-over</entry> - <entry>Defines styles for a hovered - toolbar items</entry> - </row> - - <row> - <entry>rich-calendar-editor-tool-press</entry> - <entry>Defines styles for a pressed - toolbar items</entry> - </row> - - <row> - <entry>rich-calendar-date-layout-ok</entry> - <entry>Defines styles for a - &quot;ok&quot; - button</entry> - </row> - <row> - <entry>rich-calendar-date-layout-cancel</entry> - <entry>Defines styles for a - &quot;cancel&quot; - button</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a popup element during time selection</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-calendar-time-layout</entry> - <entry>Defines styles for a popup - element during time - selection</entry> - </row> - <row> - <entry>rich-calendar-editor-layout-shadow</entry> - <entry>Defines styles for a - shadow</entry> - </row> - <row> - <entry>rich-calendar-time-layout-fields</entry> - <entry>Defines styles for a wrapper - &lt;td&gt; element for - input fields and - buttons</entry> - </row> - <row> - <entry>rich-calendar-spinner-input-container</entry> - <entry>Defines styles for a wrapper - &lt;td&gt; element for - an input field</entry> - </row> - <row> - <entry>rich-calendar-spinner-input</entry> - <entry>Defines styles for an input - field</entry> - </row> - <row> - <entry>rich-calendar-spinner-buttons</entry> - <entry>Defines styles for a wrapper - &lt;td&gt; element for - spinner buttons</entry> - </row> - <row> - <entry>rich-calendar-spinner-up</entry> - <entry>Defines styles for a - &quot;up&quot; - button</entry> - </row> - <row> - <entry>rich-calendar-spinner-down</entry> - <entry>Defines styles for a - &quot;down&quot; - button</entry> - </row> - <row> - <entry>rich-calendar-time-layout-ok</entry> - <entry>Defines styles for a - &quot;ok&quot; - button</entry> - </row> - <row> - <entry>rich-calendar-time-layout-cancel</entry> - <entry>Defines styles for a - &quot;cancel&quot; - button</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="tab_cn3"> above</link>) and define necessary - properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-calendar-today { - background-color: #FF0000; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example an active cell background color was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myFontClass{ - font-style: italic; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;inputClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:calendar&gt; </property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:calendar ... inputClass="myFontClass"/>]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/calendar_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for output text - was changed.</para> - - - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/calendar.js... - >On the component LiveDemo page</ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> usage and sources for the given example. </para> - <para>How to use JavaScript API see on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,23 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:changeExpandListener</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - - <section> - <title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:changeExpandListener&gt;</property></emphasis> - represents an action listener method that is notified on an expand/collapse event on the node. - </para> - </section> - - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Allows to define some "changeExpand" listeners for the component</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/changeExpandListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,121 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>rich:changeExpandListener</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - - <row> - <entry>listener-class</entry> - <entry>org.richfaces.event.NodeExpandedListener</entry> - </row> - <row> - <entry>event-class</entry> - <entry>org.richfaces.event.NodeExpandedEvent</entry> - </row> - - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ChangeExpandListenerTag</entry> - </row> - - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:changeExpandListener type="demo.Bean"/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis></para> - <programlisting role="JAVA"><![CDATA[package demo; -public class ImplBean implements org.richfaces.event.NodeExpandedListener{ - ... -} -]]></programlisting> - - <programlisting role="JAVA"><![CDATA[import demo.ImplBean; -... -ImplBean myListener = new ImplBean(); -... -]]></programlisting> - - </section> - - <section> - <title>Details of Usage</title> - -<para> - The <emphasis role="bold"><property>&lt;rich:changeExpandListener&gt;</property></emphasis> is used as a nested tag with <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> - and <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property></emphasis> components. -</para> -<para> -Attribute <emphasis><property>&quot;type&quot;</property></emphasis> defines the fully qualified Java class name for the listener. - This class should implement <ulink url="&apidoc_framework;/org/richfaces/event/TreeListenerEventsProducer.html#addChangeExpandListener(org.richfaces.event.NodeExpandedListener)"><code>org.richfaces.event.NodeExpandedListener</code></ulink>interface. -</para> - - <para> - <emphasis role="bold">The typical variant of using:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:tree switchType="server" value="#{project.data}" var="item" nodeFace="#{item.type}"> - <rich:changeExpandListener type="demo.ListenerBean"/> - ... - <!-- Tree nodes --> - ... -</rich:tree> -... -]]></programlisting> - - <para> - <emphasis role="bold">Java bean source:</emphasis> - </para> - - <programlisting role="JAVA"><![CDATA[package demo; -import org.richfaces.event.NodeExpandedEvent; -public class ListenerBean implements org.richfaces.event.NodeExpandedListener{ - ... - public void processExpansion(NodeExpandedEvent arg0){ - //Custom Developer Code - } - ... -} -...]]></programlisting> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para><emphasis role="bold"> - <property>&lt;rich:changeExpandListener&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component isn&apos;t visual.</para> - </section> - - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,49 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:colorPicker</keyword> - <keyword>colorPicker</keyword> - </keywordset> - <releaseinfo>3.3.1</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The - <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> - component - lets you visually choose a color or define it in hex, RGB, or HSB input fields. - </para> - <figure> - <title> - Simple - <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> - component - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/colorPicker_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>Possibility to get color in hex, or RGB color models</para> - </listitem> - <listitem> - <para>Flat/inline representation</para> - </listitem> - <listitem> - <para>Highly customizable look and feel</para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/colorPicker.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,505 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:colorPicker</keyword> - <keyword>colorPicker</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ColorPicker</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlColorPicker</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ColorPicker</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ColorPickerRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ColorPickerTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example of how the component can be used on a page:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <!-- itemLabels has to have realy value--> - <programlisting role="XML"> -<![CDATA[... -<rich:colorPicker value="#{bean.color}" /> -...]]> - </programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"> -<![CDATA[import org.richfaces.component.html.colorPicker; -... -HtmlColorPicker myColorPicker = new ColorPicker(); -...]]> - </programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> The <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> component allows you easily select a color or define it in hex, RGB, or HSB input - fields. There are two squares in the widget that help you to compare the currently selected - color and the already selected color. </para> - <para> The <property> - <emphasis>&quot;value&quot;</emphasis> - </property> attribute stores the selected color. </para> - <para> The value of the <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> component could be saved in hex or RGB color models. You can explicitly define a - color model in the <property> - <emphasis>&quot;colorMode&quot;</emphasis> - </property> attribute. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"> -<![CDATA[... -<rich:colorPicker value="#{bean.color}" colorMode="rgb" /> -...]]> - </programlisting> - <para>This is the result:</para> - <figure> - <title> Usage of the <property> - <emphasis>&quot;colorMode&quot;</emphasis> - </property> attribute. </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/colorPicker_rgb.png"/> - </imageobject> - </mediaobject> - </figure> - <para> The <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> component has two representation states: flat and inline. With the help of the <property> - <emphasis>&quot;flat&quot;</emphasis> - </property> attribute you can define whether the component is rendered flat. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"> -<![CDATA[... -<rich:colorPicker value="#{bean.color}" flat="true" /> -...]]> - </programlisting> - - <para>The component specific event handler <property><emphasis>&quot;onbeforeshow&quot;</emphasis></property> captures the event which occurs before - the <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> widget is opened. The <property><emphasis>&quot;onbeforeshow&quot;</emphasis></property> attribute could be used in order to cancel this - event. See the example below:</para> - <programlisting role="XML"> -<![CDATA[... -<rich:colorPicker value="#{bean.color}" onbeforeshow="if (!confirm('Are you sure you want to change a color?')){return false;}" /> -...]]> - </programlisting> - - <para> The <property> - <emphasis>&quot;showEvent&quot;</emphasis> - </property> attribute defines the event that shows <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> widget. The default value is &quot;onclick&quot;. </para> - <para> The <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> component allows to use the <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> facet. </para> - <para> You can also customize <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> rainbow slider ( <inlinemediaobject> - <imageobject> - <imagedata fileref="images/colorPicker_arrows.png"/> - </imageobject> - </inlinemediaobject> ) with the help of the <property> - <emphasis>&quot;arrows&quot;</emphasis> - </property> facet. </para> - <programlisting role="XML"> -<![CDATA[... -<rich:colorPicker value="#{bean.color}"> - <f:facet name="icon"> - <h:graphicImage value="/pages/colorPicker_ico.png" /> - </f:facet> - <f:facet name="arrows"> - <f:verbatim> - <div style="width: 33px; height: 5px; border: 1px solid #bed6f8; background:none;" /> - </f:verbatim> - </f:facet> -</rich:colorPicker> -...]]> - </programlisting> - <para>This is the result:</para> - <figure> - <title> Usage of the <emphasis> - <property>&quot;icon&quot;</property> - </emphasis>, and <emphasis> - <property>&quot;arrows&quot;</property> - </emphasis> facets </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/colorPicker_facets.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - <listitem> - <para> Add style classes used by a <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> component to your style sheets</para> - </listitem> - </itemizedlist> - </para> - </section> - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for the input field that contains selected color</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for the wrapper &lt;div&gt; element of a - widget</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for the icon, color palette, current color, and new - color</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for the hex, RGB, and HSB input fileds</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for the &quot;Apply&quot; and - &quot;Cancel&quot; button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>buttonFontSize</entry> - <entry>font-size</entry> - </row> - <row> - <entry>buttonFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <!-- Definition of Custom Style Classes--> - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component - elements.</para> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/colorPicker_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <table id="colorPicker_cn_inline"> - <title> Classes names for the representation of the input field and icon containing selected - color </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Selector name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>.rich-colorpicker-span input</entry> - <entry>Defines styles for the input field that contains selected color</entry> - </row> - <row> - <entry>.rich-colorpicker-icon</entry> - <entry>Defines styles for the icon</entry> - </row> - </tbody> - </tgroup> - </table> - <table id="colorPicker_cn_widget"> - <title>Classes names for the widget</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>.rich-colorpicker-ext</entry> - <entry>Defines styles for the wrapper &lt;div&gt; element of a widget</entry> - </row> - <row> - <entry>.rich-colorpicker-color</entry> - <entry>Defines styles for the color palette</entry> - </row> - <row> - <entry>.rich-colorpicker-current-color</entry> - <entry>Defines styles for the currently selected color</entry> - </row> - <row> - <entry>.rich-colorpicker-new-color</entry> - <entry>Defines styles for the already selected color</entry> - </row> - <row> - <entry>.rich-colorpicker-colors-input</entry> - <entry>Defines styles for the hex, RGB, and HSB input fileds</entry> - </row> - </tbody> - </tgroup> - </table> - <table id="colorPicker_cn_buttons"> - <title>Classes names for the buttons representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>.rich-colorpicker-submit</entry> - <entry>Defines styles for the &quot;Apply&quot; button</entry> - </row> - <row> - <entry>.rich-colorpicker-cancel</entry> - <entry>Defines styles for the &quot;Cancel&quot; button</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link - linkend="colorPicker_cn_inline"> above</link>) and define necessary properties in them. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-colorPicker-ext{ - background-color: #ecf4fe; -} -...]]></programlisting> - - <para>This is the result:</para> - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/colorPicker_pc.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the shown example the background color for the widget is changed.</para> - - <!--para>It&apos;s aslo possible to change styles of a particular - <emphasis role="bold"> <property>&lt;rich:colorPicker&gt;</property></emphasis> component. - In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property>&lt;rich:colorPicker&gt;</property></emphasis> <property>styleClass</property> attributes. - An example is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass { - background-color:#bed6f8; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;viewClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:colorPicker&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:colorPicker value="click to edit" viewClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style and background color in <property>view</property> state is changed.</para--> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/colorPicker... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:colorPicker&gt;</property> - </emphasis> component usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,30 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:column</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component for row rendering for a UIData component.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Completely skinned table rows and child elements</para></listitem> - <listitem><para>Possibility to combine columns with the help of <emphasis ><property>&quot;colspan&quot;</property></emphasis></para></listitem> - <listitem><para>Possibility to combine rows with the help of <emphasis ><property>&quot;rowspan&quot;</property></emphasis> and <emphasis ><property>&quot;breakBefore&quot;</property></emphasis></para></listitem> - <listitem><para><link linkend="sort">Sorting column values</link></para></listitem> - <listitem><para><link linkend="filter">Filtering column values</link></para></listitem> - </itemizedlist> -</section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/column.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,719 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:column</keyword> - <keyword>colspan</keyword> - <keyword>breakBefore</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Column</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlColumn</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Column</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ColumnRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ColumnTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>column</property> on a page, - use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable var="set"> - <rich:column> - <h:outputText value="#{set.property1}"/> - </rich:column> - <!--Set of another columns and header/footer facets--> -</rich:dataTable> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlColumn; -... -HtmlColumn myColumn = new HtmlColumn(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>To output a simple table, the <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> component is used the same way as the standard <emphasis - role="bold"> - <property>&lt;h:column&gt;</property> - </emphasis>, i.e. the following code on a page is used:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> - <rich:column> - <f:facet name="header">State Flag</f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> - <rich:column> - <f:facet name="header">State Name</f:facet> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column > - <f:facet name="header">State Capital</f:facet> - <h:outputText value="#{cap.name}"/> - </rich:column> - <rich:column> - <f:facet name="header">Time Zone</f:facet> - <h:outputText value="#{cap.timeZone}"/> - </rich:column> -</rich:dataTable> -... -]]></programlisting> - <para>The result is:</para> - <figure> - <title>Generated <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Now, in order to group columns with text information into one row in one - column with a flag, use the <emphasis> - <property>&quot;colspan&quot;</property> - </emphasis> attribute, which is similar to an HTML one, specifying - that the first column contains 3 columns. In addition, it&apos;s - necessary to specify that the next column begins from the first row - with the help of the - <code>breakBefore=&quot;true&quot;</code>.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> - <rich:column colspan="3"> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column > - <h:outputText value="#{cap.name}"/> - </rich:column> - <rich:column> - <h:outputText value="#{cap.timeZone}"/> - </rich:column> -</rich:dataTable> -... -]]></programlisting> - <para>As a result the following structure is rendered:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> modified with <emphasis> - <property>&quot;colspan&quot;</property> - </emphasis> and <emphasis> - <property>&quot;breakbefore&quot;</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column3.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The same way is used for <property>columns</property> grouping with the <emphasis> - <property>&quot;rowspan&quot;</property> - </emphasis> attribute that is similar to an HTML one responsible for - rows quantity definition occupied with the current one. The only thing - to add in the example is an instruction to move onto the next row for - each next after the second column.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> - <rich:column rowspan="3"> - <f:facet name="header">State Flag</f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> - <rich:column> - <f:facet name="header">State Info</f:facet> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="#{cap.name}"/> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="#{cap.timeZone}"/> - </rich:column> -</rich:dataTable> -... -]]></programlisting> - <para>As a result:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> generated with <emphasis> - <property>&quot;rowspan&quot;</property> - </emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column4.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Hence, additionally to a standard output of a particular row provided with - the <emphasis role="bold"> - <property>&lt;h:column&gt;</property> - </emphasis> component, it becomes possible to group easily the rows - with special HTML attribute.</para> - <para>The columns also could be grouped in a particular way with the help of the - <emphasis role="bold"> - <property>&lt;h:columnGroup&gt;</property> - </emphasis> component that is described in <link linkend="columnGroup" - >the following chapter</link>.</para> - <para><ulink url="http://wiki.jboss.org/wiki/DynamicColumns">In the Dynamic Columns Wiki article</ulink> you - can find additional information about dynamic columns.</para> - </section> - - <section id="sortAndFilter"> - <title>Sorting and Filtering</title> - <section id="sort"> - <title>Sorting</title> - <para> In order to sort the columns you should use <emphasis> - <property>&quot;sortBy&quot;</property> - </emphasis> attribute that indicates what values to be - sorted.This attribute can be used only with the <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> component. - In order to sort the column you should click on its - header. See the following example. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px"> - <f:facet name="header"> - <h:outputText value="Sorting Example"/> - </f:facet> - <rich:column sortBy="#{cap.state}"> - <f:facet name="header"> - <h:outputText value="State Name"/> - </f:facet> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column sortBy="#{cap.name}"> - <f:facet name="header"> - <h:outputText value="State Capital"/> - </f:facet> - <h:outputText value="#{cap.name}"/> - </rich:column> - </rich:dataTable> -</h:form> -...]]></programlisting> - <para>This is result:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> with <emphasis> - <property>&quot;sortBy&quot;</property> - </emphasis> attribute </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column5.png" - /> - </imageobject> - </mediaobject> - </figure> - <para>The <emphasis> - <property>&quot;sortExpression&quot;</property> - </emphasis> attribute defines a bean property which is used - for sorting of a column. This attribute can be used only with the <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> component. - The following example is a example of the attribute usage. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:scrollableDataTable id="carList" - value="#{dataTableScrollerBean.allCars}" sortMode="single" - binding="#{dataTableScrollerBean.table}"> - <rich:column id="make" sortExpression="#{cap.make}"> - <f:facet name="header"> - <h:outputText styleClass="headerText" value="Make" /> - </f:facet> - <h:outputText value="#{category.make}" /> - </rich:column> - <rich:column id="model"> - <f:facet name="header"> - <h:outputText styleClass="headerText" value="Model" /> - </f:facet> - <h:outputText value="#{category.model}" /> - </rich:column> - <rich:column id="price"> - <f:facet name="header"> - <h:outputText styleClass="headerText" value="Price" /> - </f:facet> - <h:outputText value="#{category.price}" /> - </rich:column> -</rich:scrollableDataTable> -...]]></programlisting> - <!-- <figure> - <title>The <emphasis> - <property>&quot;sortExpression&quot;</property> - </emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column7.png" - /> - </imageobject> - </mediaobject> - </figure>--> - <para> The <emphasis> - <property>&quot;selfSorted&quot;</property> - </emphasis> attribute that would add the possibility of - automatic sorting by clicking the column header. Default - value is &quot;true&quot;. In the example below the - second column is unavailable for sorting. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap"> - <rich:column> - <f:facet name="header"> - <h:outputText value="State Flag"/> - </f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> - <rich:column sortBy="#{cap.state}" selfSorted="false"> - <f:facet name="header"> - <h:outputText value="State Name"/> - </f:facet> - <h:outputText value="#{cap.state}"/> - </rich:column> -</rich:dataTable> -...]]></programlisting> - <para> - <emphasis> - <property>&quot;sortOrder&quot;</property> - </emphasis> attribute is used for changing the sorting of - columns by means of external controls. </para> - <para>Possible values are:</para> - <itemizedlist> - <listitem> - <para> &quot;ASCENDING&quot; - column is - sorted in ascending </para> - </listitem> - <listitem> - <para> &quot;DESCENDING&quot; - column is - sorted in descending </para> - </listitem> - <listitem> - <para> &quot;UNSORTED&quot; - column - isn&apos;t sorted </para> - </listitem> - </itemizedlist> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px"> - <f:facet name="header"> - <h:outputText value="Sorting Example"/> - </f:facet> - <rich:column sortBy="#{cap.state}" sortOrder="ASCENDING"> - <f:facet name="header"> - <h:outputText value="State Name"/> - </f:facet> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column sortBy="#{cap.name}" sortOrder="DESCENDING"> - <f:facet name="header"> - <h:outputText value="State Capital"/> - </f:facet> - <h:outputText value="#{cap.name}"/> - </rich:column> - </rich:dataTable> -</h:form> -...]]></programlisting> - <para>Below you can see the result:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> with <emphasis> - <property>&quot;sortOrder&quot;</property> - </emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column6.png" - /> - </imageobject> - </mediaobject> - </figure> - <para> In the example above the first column is sorted in descending - order. But if recurring rows appear in the table the - relative second column are sorted in ascending order. </para> - - <para>If the values of the columns are complex, the <emphasis> - <property>&quot;sortOrder&quot;</property> - </emphasis> attribute should point to a bean property containing the sort order. - See how it&apos;s done in the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/columns.jsf... - for <emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis>.</para> - - <para>You can customize the sorting&apos;s icon element using - &quot;rich-sort-icon&quot; class.</para> - <note> - <title>Note</title> - <para> - In order to sort a column with the values not in English you can add the <code>org.richfaces.datatableUsesViewLocale</code> context parameter in your web.xml. - Its value should be &quot;true&quot;. - </para> - </note> - <!-- <para> The <emphasis> - <property>&quot;sortPriority&quot;</property> - </emphasis> attribute defines a set of column - <property>ids</property> in the order the columns could be - set. </para> - <para> If the columns sort order changed externally sort priorities - could be used to define which columns will be sorted first. </para> --> - <!--para> - Note that <emphasis><property>&quot;sortPriority&quot;</property></emphasis> attribute is defined in - the <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> component! - </para--> - <note> - <title>Note:</title> - <para> - The <emphasis><property>&quot;sortBy&quot;</property></emphasis> and the <emphasis><property>&quot;selfSorted&quot;</property></emphasis> attributes used with the <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> component. - Also the <emphasis><property>&quot;selfSorted&quot;</property></emphasis> can be used with the <emphasis role="bold"><property>&lt;rich:extendedDataTable&gt;</property></emphasis>. - </para> - <para> The <emphasis> - <property>&quot;sortable&quot;</property> - </emphasis> and the <emphasis><property>&quot;sortExpression&quot;</property></emphasis> attributes used with the <emphasis - role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> component.</para> - </note> - </section> - - <section id="filter"> - <title>Filtering</title> - - <para> There are two ways to filter the column value: </para> - <itemizedlist> - <listitem> - <para> Using built-in filtering. It uses - <code>startsWith()</code> - function to make filtering. In this case - you need to define <emphasis> - <property>&quot;filterBy&quot;</property> - </emphasis> attribute at column you want - to be filterable. This attribute defines - iterable object property which is used - when filtering performed. </para> - <para> The <emphasis> - <property>&quot;filterValue&quot;</property> - </emphasis> attribute is used to get or - change current filtering value. It could - be defined with initial filtering value - on the page or as value binding to - get/change it on server. If the <emphasis> - <property>&quot;filterValue&quot;</property> - </emphasis> attribute isn&apos;t - empty from the beginning table is - filtered on the first rendering. </para> - <para> You can customize the input form using - &quot;rich-filter-input&quot; - CSS class. </para> - <para> In order to change filter event you could - use <emphasis> - <property>&quot;filterEvent&quot;</property> - </emphasis> attribute on column, e.g. - &quot;onblur&quot;(default - value). </para> - <!--para> - The <emphasis><property>&quot;filterDefaultLabel&quot;</property></emphasis> attribute defines the label that appears instead of input field. - </para--> - <para>Below you can see the example:</para> - <para> - <emphasis role="bold" - >Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px"> - <rich:column filterBy="#{cap.state}" filterValue="#{filterName.filterBean}" filterEvent="onkeyup"> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column filterBy="#{cap.name}" filterEvent="onkeyup"> - <h:outputText value="#{cap.name}"/> - </rich:column> -</rich:dataTable> -...]]></programlisting> - <para> This is the result: </para> - <figure> - <title>Built-in filtering feature usage</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/column8.png" - /> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para> Using external filtering. In this case you - need to write your custom filtering - function or expression and define - controls. </para> - <para> The <emphasis> - <property>&quot;filterExpression&quot;</property> - </emphasis> attribute is used to define - expression evaluated to boolean value. - This expression checks if the object - satisfies filtering condition. </para> - <para> The <emphasis> - <property>&quot;filterMethod&quot;</property> - </emphasis> attribute is defined with - method binding. This method accepts on - Object parameter and return boolean - value. So, this method also could be - used to check if the object satisfies - filtering condition. The usage of this - attribute is the best way for - implementing your own complex business - logic. </para> - <para>See the following example:</para> - <para> - <emphasis role="bold" - >Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" id="table"> - <rich:column filterMethod="#{filteringBean.filterStates}"> - <f:facet name="header"> - <h:inputText value="#{filteringBean.filterValue}" id="input"> - <a4j:support event="onkeyup" reRender="table" - ignoreDupResponses="true" requestDelay="700" focus="input" /> - </h:inputText> - </f:facet> - <h:outputText value="#{cap.state}" /> - </rich:column> - <rich:column filterExpression="#{fn:containsIgnoreCase(cap.timeZone, filteringBean.filterZone)}"> - <f:facet name="header"> - <h:selectOneMenu value="#{filteringBean.filterZone}"> - <f:selectItems value="#{filteringBean.filterZones}" /> - <a4j:support event="onchange" reRender="table" /> - </h:selectOneMenu> - </f:facet> - <h:outputText value="#{cap.timeZone}" /> - </rich:column> -</rich:dataTable> -...]]></programlisting> - </listitem> - </itemizedlist> - </section> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Defines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Defines the footer content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method</property>. - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <para>Skin parameters redefinition for <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="SPR">component</link>.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>Custom style classes for <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="DofCCS">component</link>. </para> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="SPR"> above</link>) and define necessary - properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-table-cell{ - font-style: italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example cells font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight: bolder; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:column&gt; </property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:column styleClass="myClass"> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font weight for second - column was changed.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para>Vizit - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... page at - RichFaces live demo for examples of component usage and their sources.</para> - <para>&quot; - <ulink url="http://www.jboss.org/community/docs/DOC-9607">Using the "rendered" attribute of &lt;rich:column&gt;</ulink>&quot; article - in RichFaces cookbook at JBoss portal gives an example of code of the component usage case. - </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,28 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:columnGroup</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component combines columns in one row to organize complex subparts of a table.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columnGroup_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Completely skinned table columns and child elements</para></listitem> - <listitem><para>Possibility to combine columns and rows inside</para></listitem> - <listitem><para>Possibility to update a limited set of strings with Ajax </para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columnGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,289 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>rich:columnGroup</keyword> -<keyword>HtmlcolumnGroup</keyword> -</keywordset> -</sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ColumnGroup</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlColumnGroup</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ColumnGroup</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ColumnGroupRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ColumnGroupTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>columnGroup</property> on a page, use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:columnGroup> - <rich:column> - <h:outputText value="Column1"/> - </rich:column> - <rich:column> - <h:outputText value="Column2"/> - </rich:column> -</rich:columnGroup> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlColumnGroup; -... -HtmlColumnGroup myRow = new HtmlColumnGroup(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property></emphasis> component combines columns set wrapping them into the <emphasis role="bold"><property>&lt;tr&gt;</property></emphasis> element and outputting them - into one row. Columns are combined in a group the same way as when the <emphasis ><property>&quot;breakBefore&quot;</property></emphasis> attribute is used for - columns to add a moving to the next rows, but the first variant is clearer from a source code. Hence, the - following simple examples are very same.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> - <rich:column colspan="3"> - <f:facet name="header">State Flag</f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> - <rich:columnGroup> - <rich:column> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column > - <h:outputText value="#{cap.name}"/> - </rich:column> - <rich:column > - <h:outputText value="#{cap.timeZone}"/> - </rich:column> - </rich:columnGroup> -</rich:dataTable> -... -]]></programlisting> -<para>And representation without a grouping:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> -<programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"> - <rich:column colspan="3"> - <f:facet name="header">State Flag</f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="#{cap.state}"/> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="#{cap.name}"/> - </rich:column> - <rich:column > - <h:outputText value="#{cap.timeZone}"/> - </rich:column> -</rich:dataTable> -.... -]]></programlisting> -<para>The result is:</para> -<figure> - <title>Generated <emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property></emphasis> component - with <emphasis ><property>&quot;breakBefore&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columnGroup2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>It&apos;s also possible to use the component for output of complex headers in a table. For example adding - of a complex header to a facet for the whole table looks the following way:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<f:facet name="header"> - <rich:columnGroup> - <rich:column rowspan="2"> - <h:outputText value="State Flag"/> - </rich:column> - <rich:column colspan="3"> - <h:outputText value="State Info"/> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="State Name"/> - </rich:column> - <rich:column> - <h:outputText value="State Capital"/> - </rich:column> - <rich:column> - <h:outputText value="Time Zone"/> - </rich:column> - </rich:columnGroup> -</f:facet> -... -]]></programlisting> -<para>Generated on a page as:</para> -<figure> - <title><emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property></emphasis>with complex headers</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columnGroup3.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:columnGroup&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:columnGroup&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <para>Skin parameters redefinition for <emphasis role="bold"><property>&lt;rich:columnGroup&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> <link linkend="SPR">component</link>.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>Custom style classes for <emphasis role="bold"> - <property>&lt;rich:columnGroup&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis><link linkend="DofCCS">component</link>. - </para> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:columnGroup&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="SPR"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-table-cell{ - color: #316ac5; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columnGroup_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example cells color was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:columnGroup&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:columnGroup&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color: #c0c0c0; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;columnClasses&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:columnGroup&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:columnGroup columnClasses="myClass"> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columnGroup_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the background color for columns was changed.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:columnGroup&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,36 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:columns</keyword> - </keywordset> - <releaseinfo>3.2.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> is a component, that allows you to create a <property>dynamic</property> set of columns from your model.</para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columns_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Dynamic tables creation</para></listitem> - <listitem><para>Possibility to combine columns with the help of <emphasis ><property>&quot;colspan&quot;</property></emphasis> and <emphasis ><property>&quot;breakBefore&quot;</property></emphasis></para></listitem> - <listitem><para>Possibility to combine rows with the help of <emphasis ><property>&quot;rowspan&quot;</property></emphasis> </para></listitem> - <listitem><para><link linkend="sort">Sorting column values</link></para></listitem> - <listitem><para><link linkend="filter">Filtering column values</link></para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/columns.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,493 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:columns</keyword> - <keyword>columns</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Column</entry> - </row> - <!--row> - <entry>component-class</entry> - <entry></entry> - </row> - <row> - <entry>component-family</entry> - <entry></entry> - </row> - <row> - <entry>renderer-type</entry> - <entry></entry> - </row--> - <row> - <entry>tag-class</entry> - <entry> org.richfaces.taglib.ColumnsTagHandler - </entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para> To create the simplest variant on a page use the following syntax: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap"> - <rich:columns value="#{capitalsBean.labels}" var="col" index="index"> - <h:outputText value="#{cap[index]}" /> - </rich:columns> -</rich:dataTable> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlColumn; -... -HtmlColumn myColumns = new HtmlColumn(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> The <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> component gets a list from data model and outputs - corresponding set of columns inside <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> on a page. It is possible to use <emphasis> - <property>&quot;header&quot;</property> - </emphasis> and <emphasis> - <property>&quot;footer&quot;</property> - </emphasis> facets with <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> component. </para> - <para> The <emphasis> - <property>&quot;value&quot;</property> - </emphasis> and <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attributes are used to access the values of collection. </para> - <para>The simple example is placed below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap"> - <rich:columns value="#{capitalsBean.labels}" var="col" index="index"> - <f:facet name="header"> - <h:outputText value="#{col.text}" /> - </f:facet> - <h:outputText value="#{cap[index]}" /> - <f:facet name="footer"> - <h:outputText value="#{col.text}" /> - </f:facet> - </rich:columns> -</rich:dataTable> -...]]></programlisting> - <para> The <emphasis> - <property>&quot;columns&quot;</property> - </emphasis> attribute defines the count of columns. </para> - <para> The <emphasis> - <property>&quot;rowspan&quot;</property> - </emphasis> attribute defines the number of rows to be displayed. If - the value of this attribute is zero, all remaining rows in the table - are displayed on a page. </para> - <para> The <emphasis> - <property>&quot;begin&quot;</property> - </emphasis> attribute contains the first iteration item. Note, that - iteration begins from zero. </para> - <para> The <emphasis> - <property>&quot;end&quot;</property> - </emphasis> attribute contains the last iteration item. </para> - <para> With the help of the attributes described below you can customize the - output, i.e. define which columns and how many rows appear on a page. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap"> - <rich:columns value="#{capitalsBean.labels}" var="col" index="index" rowspan="0" columns="3" begin="1" end="2"> - <f:facet name="header"> - <h:outputText value="#{col.text}" /> - </f:facet> - <h:outputText value="#{cap[index]}" /> - </rich:columns> -</rich:dataTable> -...]]></programlisting> - <para> In the example below, columns from first to second and all rows are shown - in the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> . </para> - <para>The result is:</para> - <figure> - <title> Generated <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> with columns from first to second and all rows </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columns2.png"/> - </imageobject> - </mediaobject> - </figure> - <para> The <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> component does not prevent to use <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> . In the following example one column renders in any way - and another columns could be picked from the model. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{rowBean.rows}" var="row"> - <rich:column> - <h:outputText value ="#{row.columnValue}"/> - </rich:column> - <rich:columns value="#{colBean.columns}" var="col"> - <f:facet name="header"> - <h:outputText value="#{col.header}"/> - </f:facet> - <h:outputText value="#{row.columnValue}"/> - <f:facet name="footer"> - <h:outputText value="#{col.footer}"/> - </f:facet> - </rich:columns> -</rich:dataTable> -...]]></programlisting> - <para> - Now, you can use a few <emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis> together with <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> within the one table: - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{dataTableScrollerBean.model}" var="model" width="500px" rows="5"> - <f:facet name="header"> - <h:outputText value="Cars Available"></h:outputText> - </f:facet> - <rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"> - <f:facet name="header"> - <h:outputText value="#{columns.header}" /> - </f:facet> - <h:outputText value="#{model[ind].model} " /> - </rich:columns> - <rich:column> - <f:facet name="header"> - <h:outputText value="Price" /> - </f:facet> - <h:outputText value="Price" /> - </rich:column> - <rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"> - <f:facet name="header"> - <h:outputText value="#{columns.header}" /> - </f:facet> - <h:outputText value="#{model[ind].mileage}$" /> - </rich:columns> -</rich:dataTable> -...]]> - </programlisting> - - <para> In order to group columns with text information into one row, use the <emphasis> - <property>&quot;colspan&quot;</property> - </emphasis> attribute, which is similar to an HTML one. In the - following example the third column contains 3 columns. In addition, - it&apos;s necessary to specify that the next column begins from - the first row with the help of the <code>breakBefore = - &quot;true&quot;</code> . </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{columns.data1}" var="data"> - <rich:column> - <h:outputText value="#{column.Item1}" /> - </rich:column> - <rich:column> - <h:outputText value="#{column.Item2}" /> - </rich:column> - <rich:column> - <h:outputText value="#{column.Item3}" /> - </rich:column> - <rich:columns columns="3" colspan="3" breakBefore="true"> - <h:outputText value="#{data.str0}" /> - </rich:columns> -</rich:dataTable> -...]]></programlisting> - - <!--para>As a result the following structure is rendered:</para> - <figure> - <title>&lt;rich:column&gt; modified with colspan and breakbefore attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column3.png"/> - </imageobject> - </mediaobject> - </figure--> - - <para> The same way is used for <property>columns</property> grouping with the <emphasis> - <property>&quot;rowspan&quot;</property> - </emphasis> attribute that is similar to an HTML. The only thing to - add in the example is an instruction to move onto the next row for - each next after the second column. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{columns.data1}" var="data"> - <rich:columns columns="2" rowspan="3"> - <h:outputText value="#{data.str0}" /> - </rich:columns> - <rich:column> - <h:outputText value="#{column.Item1}" /> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="#{column.Item2}" /> - </rich:column> - <rich:column breakBefore="true"> - <h:outputText value="#{column.Item3}" /> - </rich:column> -</rich:dataTable> -... -]]></programlisting> - - <!--para>As a result:</para> - <figure> - <title>&lt;rich:column&gt; generated with rowspan attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/column4.png"/> - </imageobject> - </mediaobject> - </figure--> - <note> - <title>Note:</title> - <para> The <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> tag is initialized during components tree - building process. This process precedes page rendering at - &quot;Render Response&quot; JSF phase. To be - rendered properly the component needs all it variables to be - initialized while the components tree is being building. A - <emphasis>javax.servlet.jsp.JspTagException</emphasis> - occurs if <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> uses variables passed from other components, if - these variables are initialized during rendering. Thus, when - <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> is asking for such variables they do not already - exist. Use <property>&lt;c:forEach&gt;</property> - JSP standard tag as workaround. Compare two examples below. </para> - <para> This code calls the exception: </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{bean.data}" var="var"> - <rich:columns value="#{var.columns}"> - ... - </rich:columns> -</rich:dataTable> -...]]></programlisting> - <para> This code works properly: </para> - <programlisting role="XML"><![CDATA[... -<c:forEach items="#{bean.data}" var="var"> - <rich:columns value="#{var.columns}"> - ... - </rich:columns> -</c:forEach> -...]]></programlisting> - </note> - - -<note><title>Note:</title> - <para>Since 3.3.0GA <emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis> requires explicit definition of <emphasis><property>&quot;id&quot;</property></emphasis> for children components to ensure that decode process works properly. - The example of how you can define unique <emphasis><property>&quot;id&quot;</property></emphasis> for children component: </para> - <programlisting role="XML"><![CDATA[... -<rich:columns value="#{bean.columns}" var="col" index="ind" ... > - <h:inputText id="input#{ind}" value=""> - <a4j:support id="support#{ind}" event="onchange" reRender="someId" /> - </h:inputText> -</rich:columns> -...]]></programlisting> - <para>Only if <emphasis><property>&quot;id&quot;</property></emphasis> defined as shown above Ajax after onchange event will be processed as expected. </para> - -</note> - - - - <para>Sorting and filtering for the <emphasis role="bold"><property>&lt;rich:columns&gt;</property></emphasis> component works the same - as for <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis>. See the <link linkend="sortAndFilter">&quot;Sorting and Filtering&quot;</link> section.</para> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Defines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Defines the footer content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para> For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis> - </para> - <para> There are two ways to redefine the appearance of all <emphasis - role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> components at once: </para> - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - <listitem> - <para> Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> component </para> - </listitem> - </itemizedlist> - </section> - <section> - <title>Skin Parameters Redefinition</title> - - <para> Skin parameters redefinition for <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="SPR">component</link> . </para> - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para> Custom style classes for <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="DofCCS">component</link> . </para> - - <para> In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="SPR">above</link> ) and define necessary - properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-table-subheadercell{ - color: #a0a0a0; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columns_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> In the example column header cells color was changed. </para> - - <para> Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass { - font-style: oblique; -} -...]]></programlisting> - <para> The <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:columns styleClass="myClass"> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title> Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/columns_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> As it could be seen on the picture above, the font style for columns was - changed. </para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... - > On the component LiveDemo page </ulink> you can found some additional information - for <emphasis role="bold"> - <property>&lt;rich:columns&gt;</property> - </emphasis> component usage. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,50 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:comboBox</keyword> - </keywordset> - <releaseinfo>3.2.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> is a component creates combobox element with built-in Ajax capability. - </para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>Client-side suggestions</para> - </listitem> - <listitem> - <para>Browser like selection</para> - </listitem> - <listitem> - <para>Smart user-defined positioning</para> - </listitem> - <!--listitem>Possible to set the popup appearance delay through <emphasis><property>&quot;showDelay&quot;</property></emphasis> - or <emphasis><property>&quot;minChars&quot;</property></emphasis> attributes - </listitem--> - <listitem> - <para>Seam entity converter support</para> - </listitem> - <listitem> - <para>Highly customizable look and feel</para> - </listitem> - <listitem> - <para>Disablement support</para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/comboBox.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,921 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:comboBox</keyword> - <keyword>comboBox</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ComboBox</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlComboBox</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ComboBox</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.ComboBoxRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ComboBoxTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page: </para> - <programlisting role="XML"><![CDATA[... -<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" /> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlComboBox; -... -HtmlComboBox myComboBox = new HtmlComboBox(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> - is a simplified suggestion box component, that provides input with client-side suggestions. - <!-- - component consists of an <property>input field</property>, the <property>button</property> and the <property>popup list</property> of suggestions - attached to input. If you want to see the popup list you can press the <property>button</property> or type the first letter of suggested word in the <property>input field</property>. - --> - - The component could be in two states: - - <!-- NEED DESCRIPTION "HOW TO MANAGE THIS"--> - - <itemizedlist> - <listitem><para>Default - only input and button is shown</para></listitem> - <listitem><para>Input, button and a popup list of suggestions attached to input is shown</para></listitem> - </itemizedlist> - </para> - <para> - There are two ways to get values for the popup list of suggestions: - </para> - <itemizedlist> - <listitem> - <para>Using the <emphasis><property>&quot;suggestionValues&quot;</property></emphasis> attribute, that defines the suggestion collection</para> - <programlisting role="XML"><![CDATA[... -<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" /> -...]]></programlisting> - </listitem> - <listitem> - <para> - Using the <emphasis role="bold"><property>&lt;f:selectItem /&gt;</property></emphasis> or <emphasis role="bold"> - <property>&lt;f:selectItems /&gt;</property></emphasis> JSF components. - </para> - - <programlisting role="XML"><![CDATA[... -<rich:comboBox value="#{bean.state}" valueChangeListener="#{bean.selectionChanged}"> - <f:selectItems value="#{bean.selectItems}"/> - <f:selectItem itemValue="Oregon"/> - <f:selectItem itemValue="Pennsylvania"/> - <f:selectItem itemValue="Rhode Island"/> - <f:selectItem itemValue="South Carolina"/> -</rich:comboBox> -...]]></programlisting> - <note> - <title>Note:</title> - <para> - These JSF components consider only the <emphasis><property>&quot;value&quot;</property></emphasis> attribute for this component. - </para> - </note> - </listitem> - </itemizedlist> - <para> Popup list content loads at page render time. No additional requests could be performed on the popup calling. - </para> - <para> - The <emphasis><property> &quot;value&quot;</property></emphasis> attribute stores value from input after submit. - </para> - <para> - The <emphasis><property> &quot;directInputSuggestions&quot;</property></emphasis> attribute defines, how the first value from the suggested one appears in an input field. - If it&apos;s &quot;true&quot; the first value appears with the suggested part highlighted. - </para> - - <programlisting role="XML"><![CDATA[... -<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" directInputSuggestions="true" /> -...]]></programlisting> - <para>This is a result:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> with <emphasis><property> &quot;directInputSuggestions&quot;</property></emphasis> attribute.</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - The <emphasis><property> &quot;selectFirstOnUpdate&quot;</property></emphasis> attribute defines if the first value from suggested is selected in a popup list. - If it&apos;s &quot;false&quot; nothing is selected in the list before a user hovers some item with the mouse. - </para> - - <programlisting role="XML"><![CDATA[... -<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" selectFirstOnUpdate="false" /> -...]]></programlisting> - <para>This is a result:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> with <emphasis><property> &quot;selectFirstOnUpdate&quot;</property></emphasis> attribute.</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox4.png"/> - </imageobject> - </mediaobject> - </figure> - - <!--para> - The <emphasis><property> &quot;filterNewValues&quot;</property></emphasis> attribute defines the appearance of values in the list. - If it&apos;s &quot;true&quot; only the part of a list, which satisfies the prefix entered appears in a popup list. - If it&apos;s &quot;false&quot; all values appear in the popup list and the list is scrolled to the first value that satisfies the prefix. - </para--> - <para> - The <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attribute defines the default label of the input element. Simple example is placed below. - </para> - - <programlisting role="XML"><![CDATA[... -<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." /> -...]]></programlisting> - <para>This is a result:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> with <emphasis><property> &quot;defaultLabel&quot;</property></emphasis> attribute.</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox5.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - With the help of the <emphasis><property>&quot;disabled&quot;</property></emphasis> attribute you can disable the whole - <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component. See the following example. - </para> - - <programlisting role="XML"><![CDATA[... -<rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." disabled="true" /> -...]]></programlisting> - <para>This is a result:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> with <emphasis><property> &quot;disabled&quot;</property></emphasis> attribute.</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox6.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - The <emphasis><property>&quot;enableManualInput&quot;</property></emphasis> attribute enables/disables input field, so when <code>enableManualInput = &quot;false&quot;</code>, - user can only pick the value manually and has no possibility to type in the value (default value is &quot;false&quot;). - </para> - <!--para> - The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component provides the possibility to use - specific event attribute <emphasis><property> &quot;onlistcall&quot;</property></emphasis> which is fired before the list opening. - </para--> - - <para> - The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component provides to use - specific event attributes: - <itemizedlist> - <listitem><para> - <emphasis><property> &quot;onlistcall&quot;</property></emphasis>which is fired before the list opening and gives you a possibility to cancel list popup/update - </para></listitem> - <listitem><para> - <emphasis><property> &quot;onselect&quot;</property></emphasis>which gives you a possibility to send Ajax request when item is selected - </para></listitem> - </itemizedlist> - </para> - - <para> - The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component allows to use sizes attributes: - <itemizedlist> - <listitem><para> - <emphasis><property> &quot;listWidth&quot;</property></emphasis> and <emphasis><property> &quot;listHeight&quot;</property></emphasis> attributes - specify popup list sizes with values in pixels - </para></listitem> - <listitem><para> - <emphasis><property> &quot;width&quot;</property></emphasis> attribute customizes the size of input element with values in pixels. - </para></listitem> - </itemizedlist> - </para> - <!-- <para>It&apos;s possible to handle events for comboBox from JavaScript code. A simplest example of usage JavaScript API is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:comboBox defaultLabel="Enter some value" id="comboBoxID"> - ... - </rich:comboBox> -... -<h:commandButton value="Enable" onclick="#{rich:component('comboBoxID')}.enable(event)"/> -...]]></programlisting> --> - - </section> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>showList()</entry> - <entry>Shows the popup list</entry> - </row> - <row> - <entry>hideList()</entry> - <entry>Hides the popup list</entry> - </row> - <row> - <entry> enable()</entry> - <entry > Enables the control for input</entry> - </row> - <row> - <entry> disable()</entry> - <entry >Disables the control for input</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a popup list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a button background, inactive button background, button background in pressed and disabled state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-left-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for an inactive button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-left-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a disabled button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-left-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a hovered button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a font</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a font in inactive state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a font in disabled state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerFamilyFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for an input field</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for an inactive input field</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a disabled input field</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for an item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a selected item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox_cn1.png"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox_cn2.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="comboBoxC"> - <title>Classes names that define popup list representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-combobox-shell</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a list</entry> - </row> - <row> - <entry>rich-combobox-list-position</entry> - <entry>Defines position of a list</entry> - </row> - <row> - <entry>rich-combobox-list-decoration</entry> - <entry>Defines styles for a list</entry> - </row> - <row> - <entry>rich-combobox-list-scroll</entry> - <entry>Defines styles for a list scrolling</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define font representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-combobox-font</entry> - <entry>Defines styles for a font</entry> - </row> - <row> - <entry>rich-combobox-font-inactive</entry> - <entry>Defines styles for an inactive font</entry> - </row> - <row> - <entry>rich-combobox-font-disabled</entry> - <entry>Defines styles for a disabled font</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define input field representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-combobox-input</entry> - <entry>Defines styles for an input field</entry> - </row> - <row> - <entry>rich-combobox-input-disabled</entry> - <entry>Defines styles for an input field in disabled state</entry> - </row> - <row> - <entry>rich-combobox-input-inactive</entry> - <entry>Defines styles for an inactive input field</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define item representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-combobox-item</entry> - <entry>Defines styles for an item</entry> - </row> - <row> - <entry>rich-combobox-item-selected</entry> - <entry>Defines styles for a selected item</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define button representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-combobox-button</entry> - <entry>Defines styles for a button</entry> - </row> - <row> - <entry>rich-combobox-button-inactive</entry> - <entry>Defines styles for an inactive button</entry> - </row> - <row> - <entry>rich-combobox-button-disabled</entry> - <entry>Defines styles for a button in disabled state</entry> - </row> - <row> - <entry>rich-combobox-button-hovered</entry> - <entry>Defines styles for a hovered button</entry> - </row> - <row> - <entry>rich-combobox-button-background</entry> - <entry>Defines styles for a button background</entry> - </row> - <row> - <entry>rich-combobox-button-background-disabled</entry> - <entry>Defines styles for a disabled button background</entry> - </row> - <row> - <entry>rich-combobox-button-background-inactive</entry> - <entry>Defines styles for an inactive button background</entry> - </row> - <row> - <entry>rich-combobox-button-pressed-background</entry> - <entry>Defines styles for a pressed button background</entry> - </row> - <row> - <entry>rich-combobox-button-icon</entry> - <entry>Defines styles for a button icon</entry> - </row> - <row> - <entry>rich-combobox-button-icon-inactive</entry> - <entry>Defines styles for an inactive button icon</entry> - </row> - <row> - <entry>rich-combobox-button-icon-disabled</entry> - <entry>Defines styles for a disabled button icon</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define shadow representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-combobox-shadow</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a shadow</entry> - </row> - <row> - <entry>rich-combobox-shadow-tl</entry> - <entry>Defines styles for a top-left element of a shadow</entry> - </row> - <row> - <entry>rich-combobox-shadow-tr</entry> - <entry>Defines styles for a top-right element of a shadow</entry> - </row> - <row> - <entry>rich-combobox-shadow-bl</entry> - <entry>Defines styles for a bottom-left element of a shadow</entry> - </row> - <row> - <entry>rich-combobox-shadow-br</entry> - <entry>Defines styles for a bottom-right element of a shadow</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:comboBox&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="comboBoxC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-combobox-list-decoration{ - background-color:#ecf4fe; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example background color for popup list was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:comboBox&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:comboBox&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight:bold; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;listClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:comboBox&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:comboBox ... listClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>&quot;styleClass&quot;</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/comboBox_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font weight for items was changed.</para> - - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/comboBox.js... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,26 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:commandButton</keyword> - </keywordset> - </sectioninfo> -<title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>component is very similar to JSF <emphasis role="bold"><property>&lt;h:commandButton&gt;</property></emphasis>, the only difference is that an Ajax form submit is generated on a click and it allows dynamic rerendering after a response comes back. - </para> - - <figure> - <title> - The <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> component rendered in Blue Sky skin - </title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/commandButton_init.png" /> - </imageobject> - </mediaobject> - </figure> -</section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandButton.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,157 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:commandButton</keyword> - </keywordset> - </chapterinfo> - <para><table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.CommandButton</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Command</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxCommandButton</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxCommandButtonRenderer</entry> - </row> - </tbody> - </tgroup> - </table></para> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant of the component on a page use the following syntax: - </para> - <para id="CB_example"> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:commandButton reRender="someData" action="#{bean.action}" value="Button"/>]]></programlisting> - <para> - The example above creates a button on a page clicking on which causes an Ajax form submit on the server, <code>&quot;action&quot;</code> method performance, - and rendering the component with <code>&quot;someData&quot;</code> ID after response comes back. - </para> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxCommandButton; -... -HtmlAjaxCommandButton myButton = new HtmlAjaxCommandButton(); -...]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> component is used in the same way as JSF <emphasis role="bold"><property>&lt;h:commandButton&gt;</property></emphasis>. - The difference is that in case of <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> the components to be updated should be specified. - </para> - - <para> - The example <link linkend="CB_example">above</link> generates the following HTML code: - </para> - - <programlisting role="XML"><![CDATA[<input type="submit" onclick="A4J.AJAX.Submit(request parameters);return false;" value="Button"/>]]></programlisting> - - <para> - Сlicking the generated anchor fires the utility method <code>A4J.AJAX.Submit()</code> that perfroms Ajax request. - </para> - - <note> - <title>Note:</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> already has Ajax support built-in and there is no need to add <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis>. - </para> - </note> - - <para> - The usage of the keyword <code>&apos;this&apos;</code> in JavaScript code in the value for <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute depends on the location of <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>. - If the <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> is situated outside the re-rendered region it is possible to use keyword <property>&apos;this&apos;</property> as in the following example: - </para> - <programlisting role="XML"><![CDATA[<h:form> - <a4j:commandButton action="director.rollCamera" onclick="this.disabled=true" oncomplete="this.disabled=false" /> -</h:form>]]></programlisting> - - <para> - Otherwise, if the <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> is contained in a re-rendered region - than the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute has a problem with obtaining a reference of the - <property>commandButton</property> object when using the keyword <code>&apos;this&apos;</code>. - In this case use the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute as in the following example: - </para> - - <programlisting role="XML"><![CDATA[<h:form id="form"> - <a4j:commandButton id="cbutton" action="director.rollCamera" onclick="this.disabled=true" oncomplete="document.getElementById('form:cbutton').disabled=false" /> -</h:form>]]></programlisting> - - <para> - Common JSF navigation could be performed after an Ajax submit and partial rendering, but Navigation Case must be defined as <emphasis role="bold"><property>&lt;redirect/&gt;</property></emphasis> in order to avoid problems with some browsers. - </para> - - <para> - As any Core Ajax component that sends Ajax requests and processes server responses the <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> has all attributes that provide the required behavior of requests (delay, limitation of submit area and rendering, etc.) - </para> - - <note> - <title>Note:</title> - <para> - When attaching a JavaScript API function to the <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> with the help of the <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> do not use the <emphasis><property>&quot;attachTo&quot;</property></emphasis> attribute of the last one. - The attribute adds event handlers using <code>Event.observe</code> but <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> has no such event. - The example below will not work: - </para> - <programlisting role="XML"><![CDATA[<a4j:commandButton value="Show Current Selection" reRender="table" action="#{dataTableScrollerBean.takeSelection}" id="button"> - <rich:componentControl attachTo="button" for="panel" event="oncomplete" operation="show" /> -</a4j:commandButton>]]></programlisting> - - <para> - This one should work properly: - </para> - <programlisting role="XML"><![CDATA[<a4j:commandButton value="Show Current Selection" reRender="table" action="#{dataTableScrollerBean.takeSelection}" id="button"> - <rich:componentControl for="panel" event="oncomplete" operation="show" /> -</a4j:commandButton>]]></programlisting> - </note> - - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find in the &quot;<link linkend="process">Decide what to process</link>&quot; guide section. - </para> - </section> - - <section> - <title>Relevant resources links</title> - <para>Vizit - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandButt... demo</ulink> page at RichFaces - live demo for examples of component usage and their sources. - </para> - <!-- - <para>Useful articles:</para> - <itemizedlist> - <listitem> - <para> - - </para> - </listitem> - </itemizedlist> - --> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,16 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:commandLink</keyword> - </keywordset> - </sectioninfo> -<title>Description</title> - <para> The <emphasis role="bold"> - <property>&lt;a4j:commandLink&gt;</property> - </emphasis>component is very similar to the <emphasis role="bold"> - <property>&lt;h:commandLink&gt;</property> - </emphasis> component, the only difference is that an Ajax form submit is generated on a click and it allows dynamic rerendering after a response comes back. It&apos;s not necessary to plug any support into the component, as Ajax support is already built in.</para> -</section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/commandLink.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,135 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:commandLink</keyword> - </keywordset> - </chapterinfo> - <table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.CommandLink</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Command </entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxCommandLink</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxCommandLinkRenderer </entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of the component on a page use the following syntax:</para> - <para id="CL_example"> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:commandLink value="Follow this link" reRender="some ID" action="#{bean.action}" />]]></programlisting> - <para> - The example above creates a link on a page clicking on which causes an Ajax form submit on the server, <code>&quot;action&quot;</code> method performance, - and rendering the component with <code>&quot;someData&quot;</code> ID after response comes back. - </para> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxCommandLink; -... -HtmlAjaxCommandLink myLink = new HtmlAjaxCommandLink(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> component is used in the same way as JSF <emphasis role="bold"><property>&lt;h:commandLink&gt;</property></emphasis>. - The difference is that in case of <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> the components to be updated should be specified. - In this chapter we will use the code from <link linkend="RichFacesGreeterindex">RichFaces Greeter</link> and change there <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis> to <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis>: - </para> - - <programlisting role="XML"><![CDATA[... -<a4j:commandLink value="Get greeting" reRender="greeting" /> -...]]></programlisting> - - <para> - It&apos;s not necessary to add nested <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> as the <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> has an Ajax support already built-in. - As a result of our changes we will get a form with &quot;Get greeting&quot; link instead of the button: - </para> - <figure> - <title> - The RicjFaces greeter with <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> - </title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/commandLink_init.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - The example <link linkend="CL_example">above</link> generates the following HTML code: - </para> - - <programlisting role="XML"><![CDATA[<a href="#" onclick="A4J.AJAX.Submit(?"request parameters"); return false;"><span>Get greeting</span></a>]]></programlisting> - - <para> - If you click on the generated anchor the utility method <code>A4J.AJAX.Submit()</code> will be fired. - - </para> - - <note> - <title>Note:</title> - <para> - Common JSF navigation could be performed after Ajax submit and partial rendering, but Navigation Case must be defined as <emphasis role="bold"><property>&lt;redirect/&gt;</property></emphasis> in order to avoid problems with some browsers. - </para> - </note> - - <para> - As any Core Ajax component that sends Ajax requests and processes server responses the <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> has all attributes that provide the required behavior of requests (delay, limitation of submit area and rendering, etc.) - </para> - - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find &quot;<link linkend="process">Decide what to process</link>&quot; guide section. - </para> - </section> - - <section> - <title>Relevant resources links</title> - <para>Vizit - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/commandLink... demo</ulink> page at RichFaces - live demo for examples of component usage and their sources. - </para> - <para>Useful articles:</para> - <itemizedlist> - <listitem> - <para> - <ulink url="http://www.jboss.org/community/docs/DOC-11850">How to use "window.confirm" JavaScript with &lt;a4j:commandLink&gt; "onclick" attribute</ulink> - in RichFaces cookbook at JBoss portal. - </para> - </listitem> - </itemizedlist> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,40 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:componentControl</keyword> - <keyword>componentControl</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis> allows to call JavaScript API functions on components after defined events.</para> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para> - Management of components JavaScript API - </para> - </listitem> - <listitem> - <para> - Customizable initialization variants - </para> - </listitem> - <listitem> - <para> - Customizable activation events - </para> - </listitem> - <listitem> - <para> - Possibility to pass parameters to the target component - </para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/componentControl.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,346 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:componentControl</keyword> - <keyword>componentControl</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.ComponentControl</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlComponentControl</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.ComponentControl</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.ComponentControlRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.ComponentControlTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - <programlisting role="XML"><![CDATA[... -<rich:componentControl attachTo="doExpandCalendarID" for="ccCalendarID" event="onclick" operation="Expand" /> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlComponentControl; -... -HtmlComponentControl myComponentControl = new HtmlComponentControl(); -...]]></programlisting> - </section> - - - - <section> - <title>Details of Usage</title> - <para> - <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> is a command component, that allows to call JavaScript API function on some defined event. - Look at the example: - </para> - <programlisting role="XML"><![CDATA[... -<rich:componentControl attachTo="doExpandCalendarID" event="onclick" operation="Expand" for="ccCalendarID" /> -... -]]></programlisting> - <para> - In other words it means &quot;clicking on the component with ID <code>doExpandCalendarID</code> expands the component with ID <code>ccCalendarID</code>&quot;. - It can be said, that <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> makes interact two components with the help of JavaScript API function. - </para> - <para> - The ID of the component the event that invokes JavaScript API function is applied, is defined with <emphasis><property>&quot;attachTo&quot;</property></emphasis> attribute (see the exapmle above). - If <emphasis><property>&quot;attachTo&quot;</property></emphasis> attribute is not specified, the <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> is supposed to be attached to it's parent. - </para> - - <programlisting role="XML"><![CDATA[<h:commandButton value="Show Modal Panel"> - <!--componentControl is attached to the commandButton--> - <rich:componentControl for="ccModalPanelID" event="onclick" operation="show"/> -</h:commandButton>]]></programlisting> - <para> - It is possible to invoke the <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> handler operation as usual JavaScript function. - For this purpose it is necessary to specify the name of the JS function with the help of the <emphasis><property>&quot;name&quot;</property></emphasis> attribute: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="text/javascript"><![CDATA[function func (event) { -}]]></programlisting> - <programlisting role="XML"><![CDATA[<rich:componentControl name="func" event="onRowClick" for="menu" operation="show" />]]></programlisting> - - <para> - An important <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> feature, is that it allows transferring parameters, with the help of special attribute <emphasis><property>&quot;params&quot;</property></emphasis>: - </para> - - <programlisting role="XML"><![CDATA[... -<rich:componentControl name="func" event="onRowClick" for="menu" operation="show" params="#{car.model}"/> -...]]></programlisting> - <para> - The alternative way for parameters transferring uses <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> attribute. - As the code above, the following code will represent the same functionality: - </para> - - <programlisting role="XML"><![CDATA[... -<rich:componentControl event="onRowClick" for="menu" operation="show"> - <f:param value="#{car.model}" name="model"/> -</rich:componentControl> -...]]></programlisting> - - - - - - - - - - - <!-- In order to use the <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> with another components you need to take the following steps: - - - </para> - <itemizedlist> - <listitem><para>Define a name of a function that is generated (definition is similar to a - definition of <emphasis role="bold"> - <property>&lt;a4j:jsFunction&gt;</property> - </emphasis>). An &quot;<code>event</code>&quot; argument is passed to this function.</para></listitem> - </itemizedlist> - <para>An example is placed below:</para> - <programlisting role="XML"><![CDATA[... -<rich:componentControl name="ffunction" for="comp_ID" operation="show"/> -... -]]></programlisting> - <para>According to this code a function with name <code>ffunction</code> - is generated. It is used in JavaScript code to trigger an operation on the target component - with defined <code>id=&quot;comp_ID&quot;</code>.</para> - <para>The generated function is shown below:</para> - <programlisting role="JAVA"><![CDATA[function ffunction (event) { -} -]]></programlisting> - <itemizedlist> - <listitem><para>Attach to a parent component (usage is similar to <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> component).</para></listitem> - </itemizedlist> - <para>An example is placed below:</para> - - <programlisting role="XML"><![CDATA[... -<rich:modalPanel id="ccModalPanelID" onshow="alert(event.parameters.show)" onhide="alert(event.parameters.hide)"> - <h:outputText value="#{bean.text}"/> -</rich:modalPanel> -<h:commandButton value="Show Modal Panel"> - <rich:componentControl for="ccModalPanelID" event="onclick" disableDefault="true" operation="show"> - <f:param name="show" value="componentControl work(show)"/> - <rich:componentControl/> -</h:commandButton> -... -]]></programlisting> - <para>In the example the <emphasis> - <property>&quot;for&quot;</property> - </emphasis> attribute contains value of an <property>id</property> of <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> component. The <emphasis> - <property>&quot;operation&quot;</property> - </emphasis> attribute contains a name of JavaScript API function. An <emphasis> - <property>&quot;event&quot;</property> - </emphasis> attribute is used to trigger an operation defined with the <emphasis> - <property>&quot;operation&quot;</property> - </emphasis> attribute. A set of parameters is defined with <emphasis role="bold"> - <property>&lt;f:param&gt;</property> - </emphasis>. As an alternative, the <emphasis> - <property>&quot;params&quot;</property> - </emphasis> attribute can be used. Thus, one of main features is that <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis> allows to transfer parameters. The <emphasis> - <property>&quot;disableDefault&quot;</property> - </emphasis> attribute with &quot;true&quot; value is used instead - of <code>onclick="return false;"</code> attribute for <emphasis role="bold"> - <property>&lt;h:commandButton&gt;</property> - </emphasis> to avoid a problem with form submit and <property>modalPanel</property> showing.</para> - <itemizedlist> - <listitem><para>Attach with <emphasis> - <property>&quot;attachTo&quot;</property> - </emphasis> attribute.</para></listitem> - </itemizedlist> - <para>An example is placed below:</para> - - <programlisting role="XML"><![CDATA[... -<rich:calendar popup="#{componentControl.calendarPopup}" id="ccCalendarID" /> - ... -<f:verbatim> - <a href="#" id="doExpandCalendarID">Calendar (nextYear)</a> -</f:verbatim> -<rich:componentControl attachTo="doExpandCalendarID" for="ccCalendarID" event="onclick" disableDefault="true" operation="nextYear" /> -... -]]></programlisting> - <para>In the example the <emphasis> - <property>&quot;attachTo&quot;</property> - </emphasis> attribute contais a value of an <property>id</property> of <emphasis role="bold"><property>&lt;a&gt;</property></emphasis> element. - The <emphasis> - <property>&quot;for&quot;</property> - </emphasis> attribute contains value of an <property>id</property> of <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> component. The <emphasis> - <property>&quot;operation&quot;</property> - </emphasis> attribute contains a name of JavaScript API function. Thus, clicking on the link - represents the next year on the calendar. - </para> --> - - - - - <para> - With the help of the <emphasis><property>&quot;attachTiming&quot;</property></emphasis> attribute you can define the page loading phase when - <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> is attached to source component. Possible values are: - </para> - <itemizedlist> - <listitem> - <para> - <code>immediate</code> — attached during execution of <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> script - </para> - </listitem> - <listitem> - <para> - <code>onavailable</code> — attached after the target component is initialized - </para> - </listitem> - <listitem> - <para> - <code>onload</code> — attached after the page is loaded - </para> - </listitem> - </itemizedlist> - <para> - <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis> interacts with such components as: - -<emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis>, <emphasis role="bold"> - <property>&lt;rich:toolTip&gt;</property> - </emphasis>, <emphasis role="bold"> - <property>&lt;rich:modalPanel &gt;</property> - </emphasis>, <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis>, <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis>, <emphasis role="bold"> - <property>&lt;rich:calendar&gt;</property> - </emphasis> - - </para> - <para> - In order to use <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> with another component you should place the id of this component into <emphasis><property>&quot;for&quot;</property></emphasis> attribute field. - All operations with defined component you can find in the JavaScript API section of defined component. - </para> - - <programlisting role="XML"><![CDATA[<h:form> - <rich:toolTip id="toolTip" mode="ajax" value="and then just touch me." direction="top-right" /> -</h:form> -<h:commandButton id="ButtonID" value="Push me"> - <rich:componentControl attachTo="ButtonID" event="onmouseover" operation="show" for="toolTip" /> -</h:commandButton>]]></programlisting> - <para>This is a result:</para> - <figure> - <title> - <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is shown with the help of <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis>. - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/componentControl_init.png"/> - </imageobject> - </mediaobject> - </figure> - - <!--para>One more example of <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis> usage is placed below:</para> - <programlisting role="XML"><![CDATA[... - <rich:panelMenu id="ccContextMenuPanelMenuID"> - <h:outputText value="click text" /> - </rich:panelMenu> - <rich:contextMenu id="ccContextMenuID" submitMode="ajax"> - <rich:menuItem icon="/pics/header.png" value="tab1" reRender="cmInfoID"> - <f:param name="cmdParam" value="menu" /> - </rich:menuItem> - <rich:menuSeparator /> - <rich:menuItem icon="/pics/info.png" value="a" reRender="cmInfoID"> - <f:param name="cmdParam" value="a" /> - </rich:menuItem> - <rich:menuItem icon="/pics/info.png" value=" b" reRender="cmInfoID"> - <f:param name="cmdParam" value="b" /> - </rich:menuItem> - <rich:menuItem icon="/pics/info.png" value="c" reRender="cmInfoID"> - <f:param name="cmdParam" value="c" /> - </rich:menuItem> - </rich:contextMenu> - <rich:componentControl event="oncontextmenu" attachTo="ccContextMenuPanelMenuID" for="ccContextMenuID" disableDefault="true" operation="Show" /> -... -]]></programlisting--> - - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para><emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component isn&apos;t visual.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/componentCo... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - <para> - Information on JSF <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> component You can find at <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... TLD reference</ulink> in Java Server Faces technology section at Sun portal. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:contextMenu</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;rich:contextMenu&gt;</property></emphasis> component is used for creation of multilevelled context menus that are activated after defined events like <emphasis><property>&quot;onmouseover&quot;</property></emphasis>, <emphasis><property>&quot;onclick&quot;</property></emphasis> etc. - The component could be applied to any element on the page. - </para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/contextMenu_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para><emphasis><property>&quot;oncontextmenu&quot;</property></emphasis> event support</para></listitem> - <listitem><para>Disablement support</para></listitem> - <listitem><para>Pop-up appearance event customization</para></listitem> - <listitem><para>Usage of shared instance of a menu on a page</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/contextMenu.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,614 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:contextMenu</keyword> - <keyword>contextMenu</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ContextMenu</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.ContextMenu</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ContextMenu</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DropDownMenuRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ContextMenuTagHandler</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - <programlisting role="XML"><![CDATA[<rich:contextMenu />]]></programlisting> - </section> - <section> - - <title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.ContextMenu; -... -html.ContextMenu myContextMenu = new html.ContextMenu(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> is a support-like component. Context menu itself is an invisible panel that - appears after a particular client-side event (<emphasis><property>&quot;onmouseover&quot;</property></emphasis>, <emphasis><property>&quot;onclick&quot;</property></emphasis>, etc.) occurred on a - parent component. The event is defined with an <emphasis> - <property>&quot;event&quot;</property> - </emphasis> attribute. The component uses <emphasis> - <property>&quot;oncontextmenu&quot;</property> - </emphasis> event by default to call a context menu by clicking on the right mouse - button.</para> - - <para> - <property><link linkend="menuGroup">&lt;rich:menuGroup&gt;</link></property>, <property><link linkend="menuItem">&lt;rich:menuItem&gt;</link></property> and <property><link linkend="menuSeparator">&lt;rich:menuSeparator&gt;</link></property> components - can be used as nested elements for <emphasis role="bold"><property>&lt;rich:contextMenu&gt;</property></emphasis>in the same way as for <emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis>. - </para> - <para> - By default, the <emphasis role="bold"><property>&lt;rich:contextMenu&gt;</property></emphasis> disables right mouse click on a page in the context menu area only. - But if you want to disable browser&apos;s context menu completely you should set the <emphasis><property>&quot;disableDefaultMenu&quot;</property></emphasis> attribute value to &quot;true&quot;. - </para> - <para> - If <emphasis><property>&quot;attached&quot;</property></emphasis> value is &quot;true&quot; (default value), component is attached to the parent component or to the component, - which <emphasis><property>&quot;id&quot;</property></emphasis> is specified in the <emphasis><property>&quot;attachTo&quot;</property></emphasis> attribute: - </para> - - <programlisting role="XML"><![CDATA[<rich:contextMenu event="oncontextmenu" attachTo="pic1" submitMode="none"> - <rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"/> - <rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"/> -</rich:contextMenu> -<h:panelGrid columns="1" columnClasses="cent"> - <h:panelGroup id="picture"> - <h:graphicImage value="/richfaces/jQuery/images/pic1.png" id="pic"/> - </h:panelGroup> -</h:panelGrid> -<h:panelGrid columns="1" columnClasses="cent"> - <h:panelGroup id="picture1"> - <h:graphicImage value="/richfaces/jQuery/images/pic2.png" id="pic1"/> - </h:panelGroup> -</h:panelGrid>]]></programlisting> - <para>The <code>&quot;enlarge()&quot;</code> and - <code>&quot;decrease()&quot;</code> functions definition is placed - below.</para> - <programlisting role="JAVA"><![CDATA[<script type="text/javascript"> - function enlarge(){ - document.getElementById('pic').width=document.getElementById('pic').width*1.1; - document.getElementById('pic').height=document.getElementById('pic').height*1.1; - } - function decrease(){ - document.getElementById('pic').width=document.getElementById('pic').width*0.9; - document.getElementById('pic').height=document.getElementById('pic').height*0.9; - } -</script>]]></programlisting> - - <para>In the example a picture zooming possibility with <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> component usage was shown. The picture is placed on the <emphasis - role="bold"> - <property>&lt;h:panelGroup&gt;</property> - </emphasis> component. The <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> component is not nested to <emphasis role="bold"> - <property>&lt;h:panelGroup&gt;</property> - </emphasis> and has a value of the<emphasis> - <property>&quot;attachTo&quot;</property> - </emphasis> attribute defined as <code>&quot;pic1&quot;</code>. Thus, - the context menu is attached to the component, which - <emphasis><property>&quot;id&quot;</property></emphasis> is <code>&quot;pic1&quot;</code>. - The context menu has two items to zoom in (zoom out) a picture by <emphasis><property>&quot;onclick&quot;</property></emphasis> event. - For earch item corresponding JavaScript function is defined to provide necessary action - as a result of the clicking on it. For the menu is defined an <emphasis> - <property>&quot;oncontextmenu&quot;</property> - </emphasis> event to call the context menu on a right click mouse event.</para> - - <para>In the example the context menu is defined for the parent <emphasis role="bold"> - <property>&lt;h:panelGroup&gt;</property> - </emphasis> component with a value of <emphasis> - <property>&quot;id&quot;</property> - </emphasis> attribute equal to &quot;<code>picture</code>&quot; You - should be careful with such definition, because a client context menu is looked for a - DOM element with a client Id of a parent component on a server. If a parent component - doesn&apos;t encode an Id on a client, it can&apos;t be found by the <emphasis - role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> and it&apos;s attached to its closest parent in a DOM tree.</para> - - <para> If the <emphasis> - <property>&quot;attached&quot;</property> - </emphasis> attribute has &quot;false&quot; value, - component activates via JavaScript API with assistance of <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis>. An example is placed below.</para> - <para id="ex"> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form id="form"> - <rich:contextMenu attached="false" id="menu" submitMode="ajax"> - <rich:menuItem ajaxSingle="true"> - <b>{car} {model}</b> details - <a4j:actionparam name="det" assignTo="#{ddmenu.current}" value="{car} {model} details"/> - </rich:menuItem> - <rich:menuGroup value="Actions"> - <rich:menuItem ajaxSingle="true"> - Put <b>{car} {model}</b> To Basket - <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Put {car} {model} To Basket"/> - </rich:menuItem> - <rich:menuItem value="Read Comments" ajaxSingle="true"> - <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Read Comments"/> - </rich:menuItem> - <rich:menuItem ajaxSingle="true"> - Go to <b>{car}</b> site - <a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Go to {car} site"/> - </rich:menuItem> - </rich:menuGroup> - </rich:contextMenu> - - <h:panelGrid columns="2"> - <rich:dataTable value="#{dataTableScrollerBean.tenRandomCars}" var="car" id="table" onRowMouseOver="this.style.backgroundColor='#F8F8F8'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rowClasses="cur"> - <rich:column> - <f:facet name="header">Make</f:facet> - <h:outputText value="#{car.make}"/> - </rich:column> - <rich:column> - <f:facet name="header">Model</f:facet> - <h:outputText value="#{car.model}"/> - </rich:column> - <rich:column> - <f:facet name="header">Price</f:facet> - <h:outputText value="#{car.price}" /> - </rich:column> - <rich:componentControl event="onRowClick" for="menu" operation="show"> - <f:param value="#{car.model}" name="model"/> - <f:param value="#{car.make}" name="car"/> - </rich:componentControl> - </rich:dataTable> - <a4j:outputPanel ajaxRendered="true"> - <rich:panel> - <f:facet name="header">Last Menu Action</f:facet> - <h:outputText value="#{ddmenu.current}"></h:outputText> - </rich:panel> - </a4j:outputPanel> - </h:panelGrid> -</h:form>]]></programlisting> - <para>This is a result:</para> - <figure> - <title>The <emphasis> - <property>&quot;attached&quot;</property> - </emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/contextMenu2.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the context menu is activated (by clicking on the left mouse button) on - the table via JavaScript API with assistance of <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis>. The attribute <emphasis> - <property>&quot;for&quot;</property> - </emphasis> contains a value of the <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> Id. For menu appearance Java Script API function - <code>&quot;show()&quot;</code> is used. It is defined with <emphasis> - <property>&quot;operation&quot;</property> - </emphasis> attribute for the <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis> component. Context menu is recreated after the every call on a client and - new {car} and {model} values are inserted in it. In the example for a menu customization - macrosubstitutions were used.</para> - - <para>The <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> component can be defined once on a page and can be used as shared for - different components (this is the main difference from the <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> component). It&apos;s necessary to define it once on a page (as it was - shown in the example <link linkend="ex">above</link>) and activate it on required - components via JavaScript API with assistance of <emphasis role="bold"> - <property>&lt;rich:componentControl&gt;</property> - </emphasis>.</para> - - <para>The <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> - <emphasis> - <property>&quot;submitMode&quot;</property> - </emphasis> attribute can be set to three possible parameters:</para> - - <itemizedlist> - <listitem> - <para><code>Server</code> — default value, uses regular form submition request;</para> - </listitem> - </itemizedlist> - - <itemizedlist> - <listitem> - <para><code>Ajax</code> — Ajax submission is used for switching;</para> - </listitem> - </itemizedlist> - - <itemizedlist> - <listitem> - <para><code>None</code> — neither <code>Server</code> nor <code>Ajax</code> is used.</para> - </listitem> - </itemizedlist> - - <para>The <emphasis> - <property>&quot;action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;actionListener&quot;</property> - </emphasis> item&apos;s attributes are ignored. Menu items don't fire any submits - themselves. The behavior is fully defined by the components nested inside items.</para> - - <note> - <title>Notes:</title> - <itemizedlist> - <listitem> - <para> - When nesting <emphasis role="bold"><property>&lt;rich:contextMenu&gt;</property></emphasis> into JSF <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis>, - specify an <code>id</code> for <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis>, otherwise, do not nest the <emphasis role="bold"><property>&lt;rich:contextMenu&gt;</property></emphasis> to make it work properly. - </para> - </listitem> - </itemizedlist> - - <itemizedlist> - <listitem> - <para> - As the <emphasis role="bold"><property>&lt;rich:contextMenu&gt;</property></emphasis> component doesn't provide its own form, - use it between <emphasis role="bold"><property>&lt;h:form&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;/h:form&gt;</property></emphasis> tags. - </para> - </listitem> - </itemizedlist> - </note> - - - <!-- <para>It&apos;s possible to handle events for contextMenu from JavaScript code. A simplest example of usage JavaScript API is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:contextMenu ... id="cmID"> - ... - </rich:contextMenu> - ... -<h:commandButton value="Show" onclick="#{rich:component('cmID')}.show(event)"/> -...]]></programlisting> --> - - <!-- Will be done for latest version --> - <!--para> It&apos;s possible to define the direction for list appear in the <emphasis> - <property>&quot;direction&quot;</property> - </emphasis>attribute. If the accordance of the popup corner to corner of the label isn&apos;t - set <emphasis> - <property>&quot;direction&quot;</property> - </emphasis> attribute must set next accordances: </para> - <itemizedlist> - <listitem> - <para>top-left - a menu drops to the top and left</para> - </listitem> - - <listitem> - <para>top-right - a menu drops to the top and right</para> - </listitem> - - <listitem> - <para>bottom-left - a menu drops to the bottom and left</para> - </listitem> - - <listitem> - <para>bottom-right - a menu drops to the bottom and right</para> - </listitem> - - <listitem> - <para>auto(default) - smart positioning activation</para> - </listitem> - </itemizedlist> - <para><emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> provides <emphasis> - <property>&quot;jointPoint&quot;</property> - </emphasis> attribute to set the point on the label element to connect popup. Possible - values are:</para> - - <itemizedlist> - <listitem> - <para>tr - a menu is attached to the top-right point of the button element</para> - </listitem> - - <listitem> - <para>tl - a menu is attached to the top-left point of the button element</para> - </listitem> - - <listitem> - <para>br - a menu is attached to the bottom-right point of the button element</para> - </listitem> - - <listitem> - <para>bl - a menu is attached to the bottom-left point of the button element</para> - </listitem> - - <listitem> - <para>auto(default) - smart positioning activation</para> - </listitem> - </itemizedlist> - - <para>In order to set the offset for the menu popup relatively to label, you can use <emphasis> - <property>&quot;horizontalOffset&quot;</property> - </emphasis> and <emphasis> - <property>&quot;verticalOffset&quot;</property> - </emphasis> attributes. Values can be negative.</para--> - - <!-- For menuItem, not for contexMenu --> - <!--para><property>menuItem</property> provides <emphasis> - <property>&quot;submitMode&quot;</property> - </emphasis> attribute to define the way of submission. Possible values : <itemizedlist> - <listitem> - <para>Server (default)</para> - </listitem> - </itemizedlist> - <para>The standard form submission is performed and the page is completely refreshed.</para> - <itemizedlist> - <listitem> - <para>Ajax</para> - </listitem> - </itemizedlist> - <para>An Ajax form submission is performed, and specified elements in the <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute are rerendered.</para> - <itemizedlist> - <listitem> - <para>None</para> - </listitem> - </itemizedlist> - <para> The <emphasis> - <property>&quot;action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;actionListener&quot;</property> - </emphasis> item&apos;s attributes are ignored. Menu items don't fire any submits - themselves. The behavior is fully defined by the components nested inside items.</para> - <template - <para>emphasis role="bold"> - <property>&lt;contextMenu&gt;</property> - </emphasis> could not be generated for every component where it&apos;s defined. Templating could - be used instead. So only representation data could be loaded from server. And markup - could be evaluated on client side. So it&apos;s should accept macrosubstitutions like - {value} </para> - - </para--> - </section> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="3"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - <entry>Apply to</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>hide()</entry> - <entry>Hides component or group</entry> - <entry>Component, group</entry> - </row> - <row> - <entry>show(event, context)</entry> - <entry>Shows component or group</entry> - <entry>Component, group</entry> - </row> - <!--row> - <entry>Enable()</entry> - <entry>Enable component, item, group</entry> - <entry>Component, Item, Group</entry> - </row> - <row> - <entry>Disable()</entry> - <entry>Disable component, item or group</entry> - <entry>Component, Item, Group</entry> - </row--> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a border</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a background</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>border-left-color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - - <figure> - <title>Style classes</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/contextMenu_cn.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - - <table id="cMC"> - <title>Classes names that define the contextMenu element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-menu-list-border</entry> - <entry>Defines styles for borders</entry> - </row> - <row> - <entry>rich-menu-list-bg</entry> - <entry>Defines styles for a general background list</entry> - </row> - <row> - <entry>rich-menu-list-strut</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element for a strut - of a popup list</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:contextMenu&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="cMC"> above</link>) and define necessary properties in them. </para> - - <programlisting role="CSS"><![CDATA[... -.rich-menu-item{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/contextMenu_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for row items was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:contextMenu&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:contextMenu&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight:bold; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;rowClasses&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;h:panelGrid&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <programlisting role="XML"><![CDATA[<h:panelGrid ... rowClasses="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/contextMenu_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font weight for row items was changed.</para> - - - - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/contextMenu... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:dataDefinitionList</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component to render definition lists that allows choosing data from a model - and obtains built-in support of Ajax updates.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:dataDefinitionList&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataDefinitionList_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Completely skinned table rows and child elements</para></listitem> - <listitem><para>Possibility to update a limited set of rows with Ajax</para></listitem> - <listitem><para>Possibility to receive values dynamically from a model</para></listitem> - </itemizedlist> -</section> - </section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataDefinitionList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,290 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>HtmlDataDefinitionList</keyword> -<keyword>rich:dataDefinitionList</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataDefinitionList</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataDefinitionList</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DataDefinitionList</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataDefinitionListRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataDefinitionListTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>dataDefinitionList</property> on a page, use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataDefinitionList value="#{bean.capitals}" var="caps"> - <f:facet name="term">Cars</f:facet> - <h:outputText value="#{car.model}"/> -</rich:dataDefinitionList> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataDefinitionList; -... -HtmlDataDefinitionList myList = new HtmlDataDefinitionList(); -... -]]></programlisting> -</section> -<section> -<title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:dataDefinitionList&gt;</property> - </emphasis> component allows to generate a definition list from a model.</para> - <para>The component has the <emphasis> - <property>&quot;term&quot;</property> - </emphasis> facet, which corresponds to the <emphasis> - <property>&quot;type&quot;</property> - </emphasis> parameter for the <emphasis role="bold"> - <property>&lt;dt&gt;</property> - </emphasis> HTML element.</para> - <para>Here is an example:</para> - - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:dataDefinitionList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" first="4" title="Cars"> - <f:facet name="term"> - <h:outputText value="#{car.make} #{car.model}"></h:outputText> - </f:facet> - <h:outputText value="Price:" styleClass="label"></h:outputText> - <h:outputText value="#{car.price}" /><br/> - <h:outputText value="Mileage:" styleClass="label"></h:outputText> - <h:outputText value="#{car.mileage}" /><br/> - </rich:dataDefinitionList> -</h:form> -... -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:dataDefinitionList&gt;</property> - </emphasis> component with <emphasis> - <property>&quot;term&quot;</property> - </emphasis> facet</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataDefinitionList2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the <emphasis> - <property>&quot;rows&quot;</property> - </emphasis> attribute limits a number of output elements of the list.</para> - - <para>The <emphasis> - <property>&quot;first&quot;</property> - </emphasis> attribute defines the first element for output. <emphasis> - <property>&quot;title&quot;</property> - </emphasis> is used for a popup title.</para> - - <para>The <emphasis role="bold"> - <property>&lt;rich:dataDefinitionList&gt;</property> - </emphasis> component could be partially updated with Ajax. The <emphasis> - <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute allows to define row keys that are updated after an Ajax request, you need to pass an array with key (lines) of the list that you want to be updated after the Ajax request is executed.</para> - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataDefinitionList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" - binding="#{listBean.dataList}" id="list"> - ... -</rich:dataDefinitionList> -... -<a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/> -... -]]></programlisting> - - <para> In the example the <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute contains value of <emphasis> - <property>&quot;id&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:dataDefinitionList&gt;</property> - </emphasis> component. As a result the component is updated after an Ajax request.</para> - -</section> - - <section> - - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:dataDefinitionList&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:dataDefinitionList&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataDefinitionList_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_dDL"> - <title>Classes names that define a list appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-deflist</entry> - <entry>Defines styles for an html &lt;dl&gt; element</entry> - </row> - <row> - <entry>rich-definition</entry> - <entry>Defines styles for an html &lt;dd&gt; element</entry> - </row> - <row> - <entry>rich-definition-term</entry> - <entry>Defines styles for an html &lt;dt&gt; element</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataDefinitionList&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_dDL"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-definition-term{ - font-weight:bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataDefinitionList_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a term font weight was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:dataDefinitionList&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:dataDefinitionList&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style: italic; -} -...]]></programlisting> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:dataDefinitionList ... rowClasses="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataDefinitionList_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for rows was changed.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:dataDefinitionList&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,33 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:dataFilterSlider</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A slider-based action component is used for filtering table data.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:dataFilterSlider&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataFilterSlider_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Filter any UIData based component in dependency on its child&apos;s values</para></listitem> - <listitem><para>Fully skinnable control and input elements</para></listitem> - <listitem><para>Optional value text field with an attribute-managed position</para></listitem> - <listitem><para>Optional disablement of the component on a page</para></listitem> - <listitem><para>Optional toolTip to display the current value while a handle is dragged</para></listitem> - <listitem><para>Dragged state is stable after the mouse moves</para></listitem> - <listitem><para>Optional manual input possible if a text input field is present</para></listitem> - <listitem><para>Validation of manual input</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataFilterSlider.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,146 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dataFilterSlider</keyword> - <keyword>HtmldataFilterSlider</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.dataFilterSlider</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataFilterSlider</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DataFilterSlider</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataFilterSliderRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.dataFilterSliderTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataFilterSlider sliderListener="#{mybean.doSlide}" startRange="0" - endRange="50000" increment="10000" handleValue="1" /> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataFilterSlider; -... -HtmlDataFilterSlider mySlider = new HtmlDataFilterSlider(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>dataFilterSlider</property> - </emphasis> component is bound to some UIData component using a <emphasis> - <property>&quot;for&quot;</property> - </emphasis> attribute and filters data in a table. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataFilterSlider sliderListener="#{mybean.doSlide}" - startRange="0" - endRange="50000" - increment="10000" - handleValue="1" - for="carIndex" - forValRef="inventoryList.carInventory" - filterBy="getMileage" /> -... -<h:dataTable id="carIndex"> - ... -</h:dataTable> -...]]></programlisting> - <para>In this example other two attributes are used for filtering:</para> - <itemizedlist> - <listitem><para> - <emphasis> - <property>&quot;forValRef&quot;</property> - </emphasis> is a string which is used in a value attribute of the target UIData component. - It&apos;s designed for resetting the UIData component back to the original list provided - by a backing bean. </para></listitem> - <listitem><para> - <emphasis> - <property>&quot;filterBy&quot;</property> - </emphasis> is a getter of an object member that is to be compared to a slider value. - It&apos;s a value that is used in results filtering. </para></listitem> - </itemizedlist> - <para><emphasis> - <property>&quot;handleValue&quot;</property> - </emphasis> is an attribute for keeping the current handle position on the - <property>dataFilterSlider</property> component. Based on the current value, appropriate - values obtained from a getter method defined in <emphasis> - <property>&quot;filterBy&quot;</property> - </emphasis> are filtered.</para> - <para>One more important attribute is a <emphasis> - <property>&quot;storeResults&quot;</property> - </emphasis> one that allows the <property>dataFilterSlider</property> component to keep UIData - target object in session.</para> - <para>If it&apos;s necessary the component submits a form on event of a handle state - changing, use the <emphasis> - <property>&quot;submitOnSlide&quot;</property> - </emphasis> attribute. When the attribute definition is <code>&quot;true&quot;</code>, submission on this event is - defined.</para> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find in the<link linkend="process"> &quot;Decide what to process &quot; </link> guide section. - </para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:dataFilterSlider&gt;</property> - </emphasis> component has no skin parameters and special <emphasis> - <property>style classes</property></emphasis>, as it consists of one element generated with a your method on the server. To - define some style properties such as an indent or a border, it&apos;s possible to use <emphasis> - <property>&quot;style&quot;</property> - </emphasis> and <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attributes on the component.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataFilterS... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:dataFilterSlider&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:dataGrid</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component to render data as a grid that allows choosing data from a model - and obtains built-in support of Ajax updates.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:dataGrid&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataGrid_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>A completely skinned table and child elements</para></listitem> - <listitem><para>Possibility to update a limited set of rows with Ajax</para></listitem> - <listitem><para>Possibility to receive values dynamically from a model</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataGrid.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,313 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>grid</keyword> - <keyword>rich:dataGrid</keyword> - <keyword>HtmlDataGrid</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataGrid</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataGrid</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DataGrid</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataGridRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataGridTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>dataGrid</property> on a page, use the - following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car"> - <h:outputText value="#{car.model}"/> -</rich:dataGrid> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataGrid; -... -HtmlDataGrid myList = new HtmlDataGrid(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The component takes a list from a model and outputs it the same way as with <emphasis - role="bold"> - <property>&lt;h:panelGrid&gt;</property> - </emphasis> for inline data. To define grid properties and styles, use the same definitions as - for <emphasis role="bold"><property>&lt;h:panelGrid&gt;</property>.</emphasis></para> - <para>The component allows to:</para> - <itemizedlist> - <listitem><para>Use <emphasis> - <property>&quot;header&quot;</property> - </emphasis> and <emphasis> - <property>&quot;footer&quot;</property> - </emphasis> facets for output</para></listitem> - <listitem><para>Limit number of output elements (<emphasis> - <property>&quot;elements&quot;</property> - </emphasis> attribute) and define first element for output (<emphasis> - <property>&quot;first&quot;</property> - </emphasis> attribute)</para></listitem> - <listitem><para>Bind pages with <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:panel style="width:150px;height:200px;"> - <h:form> - <rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" columns="2" elements="4" first="1"> - <f:facet name="header"> - <h:outputText value="Car Store"></h:outputText> - </f:facet> - <rich:panel> - <f:facet name="header"> - <h:outputText value="#{car.make} #{car.model}"></h:outputText> - </f:facet> - <h:panelGrid columns="2"> - <h:outputText value="Price:" styleClass="label"></h:outputText> - <h:outputText value="#{car.price}"/> - <h:outputText value="Mileage:" styleClass="label"></h:outputText> - <h:outputText value="#{car.mileage}"/> - </h:panelGrid> - </rich:panel> - <f:facet name="footer"> - <rich:datascroller></rich:datascroller> - </f:facet> - </rich:dataGrid> - </h:form> -</rich:panel> -... -]]></programlisting> - <para>This is a result:</para> - - <figure> - <title>Component usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataGrid2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>The component was created basing on the <emphasis role="bold"> - <property>&lt;a4j:repeat&gt;</property> - </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> - <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute allows to define row keys that are updated after an Ajax request.</para> - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" - binding="#{listBean.dataGrid}" id="grid" elements="4" columns="2"> - ... -</rich:dataGrid> -... -<a4j:commandButton action="#{listBean.action}" reRender="grid" value="Submit"/> -...]]></programlisting> - - <para> In the example <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute contains value of <emphasis> - <property>&quot;id&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> component. As a result the component is updated after an Ajax request.</para> - </section> - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Defines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Defines the footer content</entry> - </row> - <row> - <entry>caption</entry> - <entry>Defines the caption content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - - </section> - <section> - <title>Skin Parameters Redefinition</title> - - <para>Skin parameters redefinition for <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="SPR">component</link>.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>Custom style classes for <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="DofCCS">component</link>. </para> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible <link linkend="dTC"> classes</link> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-table-footercell{ - color:#ff7800; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataGrid_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example color of footercell was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:dataGrid&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:dataGrid&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style:italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;columnClasses&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:dataGrid&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:dataGrid ... columnClasses="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataGrid_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for columns was changed.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataGrid.js... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:dataGrid&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:dataList</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component to render unordered lists that allows choosing data from a model - and obtains built-in support of Ajax updates.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:dataList&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataList_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>A completely skinned list and child elements</para></listitem> - <listitem><para>Possibility to update a limited set of rows with Ajax</para></listitem> - <listitem><para>Possibility to receive values dynamically from a model</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,305 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>grid</keyword> - <keyword>rich:dataList</keyword> - <keyword>HtmlDataList</keyword> - <keyword>unordered list</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataList</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataList</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DataList</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataListRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataListTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>dataList</property> on a page, use the - following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" > - <h:outputText value="#{car.model}"/> -</rich:dataList> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataList; -... -HtmlDataList myList = new HtmlDataList(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> component allows to generate a list from a model.</para> - <para>The component has the <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute, which corresponds to the <emphasis> - <property>&quot;type&quot;</property> - </emphasis> parameter for the <emphasis role="bold"> - <property>&lt;ul&gt;</property> - </emphasis> HTML element and defines a marker type. Possible values for <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute are: &quot;disc&quot;, - &quot;circle&quot;, - &quot;square&quot;.</para> - <para>Here is an example:</para> - - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="disc" title="Car Store"> - <h:outputText value="#{car.make} #{car.model}"/><br/> - <h:outputText value="Price:" styleClass="label"></h:outputText> - <h:outputText value="#{car.price} "/><br/> - <h:outputText value="Mileage:" styleClass="label"></h:outputText> - <h:outputText value="#{car.mileage} "/><br/> - </rich:dataList> -</h:form> -... -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> component with <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataList2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the <emphasis> - <property>&quot;rows&quot;</property> - </emphasis> attribute limits a number of output elements of the list.</para> - - <para>The <emphasis> - <property>&quot;first&quot;</property> - </emphasis> attribute defines the first element for output. <emphasis> - <property>&quot;title&quot;</property> - </emphasis> is used for a popup title. See the picture below:</para> - - <figure> - <title>The <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> component with <emphasis> - <property>&quot;title&quot;</property> - </emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataList3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>The <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> - component could be partially updated with - Ajax. The <emphasis> - <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute allows to define row keys that are updated after an Ajax request.</para> - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" - binding="#{listBean.dataList}" id="list" rows="5" type="disc"> - ... -</rich:dataList> -... -<a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/> -... -]]></programlisting> - - <para> In the example <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute contains the value of <emphasis> - <property>&quot;id&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> component. As a result the component is updated after an Ajax request.</para> - </section> - <section> - - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataList_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="dataLC"> - <title>Classes names that define a list appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-datalist</entry> - <entry>Defines styles for an html &lt;ul&gt; element</entry> - </row> - <row> - <entry>rich-list-item</entry> - <entry>Defines styles for an html &lt;li&gt; element</entry> - </row> - </tbody> - </tgroup> - </table> - - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="dataLC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-list-item{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataList_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for the text of the list item was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:dataList&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:dataList&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color:#ffead9; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:dataList&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:dataList ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataList_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color for <emphasis role="bold"><property>&lt;rich:dataList&gt; </property></emphasis> was changed.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:dataList&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:dataOrderedList</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component to render ordered lists that allows choosing data from a model - and obtains built-in support of Ajax updates.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:dataOderedList&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataOrderedList_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>A completely skinned list and child elements</para></listitem> - <listitem><para>Possibility to update a limited set of rows with Ajax</para></listitem> - <listitem><para>Possibility to receive values dynamically from a model</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataOrderedList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,395 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dataOrderedList</keyword> - <keyword>HtmlDataOrderedList</keyword> - <keyword>ordered list</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataOrderedList</entry> - </row> - <row> - <entry>component-class</entry> - <entry> - org.richfaces.component.html.HtmlDataOrderedList - </entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DataOrderedList</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataOrderedListRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry> - org.richfaces.taglib.DataOrderedListTag - </entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant of - <property>dataOrderedList</property> - on a page, use the following syntax: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataOrderedList var="car" value="#{dataTableScrollerBean.allCars}" > - <h:outputText value="#{car.model}"/> -</rich:dataOrderedList> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataOrderedList; -... -HtmlDataOrderedList myList = new HtmlDataOrderedList(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - The - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - component allows to generate an ordered list from a model. - </para> - <para> - The component has the - <emphasis> - <property>&quot;type&quot;</property> - </emphasis> - attribute, which corresponds to the - <emphasis> - <property>&quot;type&quot;</property> - </emphasis> - parameter for the - <emphasis role="bold"> - <property>&lt;ol&gt;</property> - </emphasis> - HTML element and defines a marker type. Possible values for - <emphasis> - <property>&quot;type&quot;</property> - </emphasis> - attribute are: &quot;A&quot;, &quot;a&quot;, &quot;I&quot;, &quot;i&quot;, &quot;1&quot;. - </para> - <para>Here is an example:</para> - - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:dataOrderedList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="1" title="Car Store"> - <h:outputText value="#{car.make} #{car.model}"/><br/> - <h:outputText value="Price:" styleClass="label"></h:outputText> - <h:outputText value="#{car.price}" /><br/> - <h:outputText value="Mileage:" styleClass="label"></h:outputText> - <h:outputText value="#{car.mileage}" /><br/> - </rich:dataOrderedList> -</h:form> -... -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - component with the - <emphasis> - <property>&quot;type&quot;</property> - </emphasis> - attribute - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataOrderedList2.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - In the example the - <emphasis> - <property>&quot;rows&quot;</property> - </emphasis> - attribute limits a number of output elements of the list. - </para> - - <para>The - <emphasis> - <property>&quot;first&quot;</property> - </emphasis> - attribute defines the first element for output. - <emphasis> - <property>&quot;title&quot;</property> - </emphasis> - is used for a popup title. - </para> - - <para> - The <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - component could be partially updated with - Ajax. The - <emphasis> - <property>&quot;ajaxKeys&quot;</property> - </emphasis> - attribute allows to define row keys that are updated after - an Ajax request. - </para> - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataOrderedList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" - binding="#{listBean.dataList}" id="list"> - ... -</rich:dataOrderedList> -... -<a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/> -... -]]></programlisting> - - <para> - In the example - <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> - attribute contains value of the - <emphasis> - <property>&quot;id&quot;</property> - </emphasis> - attribute for the - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - component. As a result the component is updated after an - Ajax request. - </para> - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para> - For skinnability implementation, the components use a - <emphasis> - <property>style class redefinition method.</property> - </emphasis> - Default style classes are mapped on - <emphasis> - <property>skin parameters.</property> - </emphasis> - </para> - - <para> - There are two ways to redefine the appearance of all - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - components at once: - </para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para> - Add to your style sheets - <emphasis> - <property>style classes</property> - </emphasis> - used by a - <emphasis role="bold"> - <property> - &lt;rich:dataOrderedList&gt; - </property> - </emphasis> - component - </para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para> - On the screenshot there are classes names that define styles - for component elements. - </para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataOrderedList_cn.png" /> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_dOL"> - <title>Classes names that define a list appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-orderedlist</entry> - <entry> - Defines styles for an html &lt;ol&gt; - element - </entry> - </row> - <row> - <entry>rich-list-item</entry> - <entry> - Defines styles for an html &lt;li&gt; - element - </entry> - </row> - </tbody> - </tgroup> - </table> - - <para> - In order to redefine styles for all - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - components on a page using CSS, it&apos;s enough to create - classes with the same names (possible classes could be found - in the tables - <link linkend="tab_dOL">above</link> - ) and define necessary properties in them. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-orderedlist{ - background-color: #ebf3fd; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataOrderedList_pc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para>In the example background color was changed.</para> - - <para> - Also it&apos;s possible to change styles of particular - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - component. In this case you should create own style classes - and use them in corresponding - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> - attributes. An example is placed below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style: italic; -} -...]]></programlisting> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:dataOrderedList ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title> - Redefinition styles with own classes and - <emphasis> - <property>styleClass</property> - </emphasis> - attributes - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataOrderedList_oc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - As it could be seen on the picture above, the font style was - changed. - </para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... - On the component LiveDemo page - </ulink> - you can see the example of - <emphasis role="bold"> - <property>&lt;rich:dataOrderedList &gt;</property> - </emphasis> - usage and sources for the given example. - </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,34 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dataTable</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Description</title> - <para>The component for tables rendering that allows choosing data from a model and obtains - built-in support of Ajax updates.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataTable_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>A completely skinned table and child elements</para></listitem> - <listitem><para>Possibility to insert the complex subcomponents - <property>&quot;colGroup&quot;</property> and - <property>&quot;subTable&quot;</property></para></listitem> - <listitem><para>Possibility to update a limited set of strings with Ajax</para></listitem> - <listitem><para>Possibility to sort and to filter of columns</para></listitem> - <listitem><para><link linkend="sort">Sorting column values</link></para></listitem> - <listitem><para><link linkend="filter">Filtering column values</link></para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dataTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,585 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> - -<section> - <sectioninfo> - <keywordset> - <keyword>table</keyword> - <keyword>rich:dataTable</keyword> - <keyword>HtmlDataTable</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DataTable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDataTable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DataTable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataTableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DataTableTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:dataTable value="#{capitalsBean.capitals}" var="capitals"> - <rich:column> - ... - </rich:column> -</rich:dataTable> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically from Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDataTable; -... -HtmlDataTable myTable = new HtmlDataTable(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> component is similar to the <emphasis role="bold"> - <property>&lt;h:dataTable&gt;</property> - </emphasis> one, except Ajax support and skinnability. Ajax support is possible, because the - component was created basing on the <emphasis role="bold"> - <property>&lt;a4j:repeat&gt;</property> - </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> - <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute allows to define row keys that is updated after an Ajax request.</para> - - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="capitals" - ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}" id="table"> - ... -</rich:dataTable> -... -<a4j:commandButton action="#{tableBean.action}" reRender="table" value="Submit"/> -... -]]></programlisting> - - <para> In the example <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute contains value of <emphasis> - <property>&quot;id&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> component. As a result the component is updated after an Ajax request.</para> - - <para id="table_ex">The component allows to use <emphasis> - <property>&quot;header&quot;</property> - </emphasis>, <emphasis> - <property>&quot;footer&quot;</property> - </emphasis> and <emphasis> - <property>&quot;caption&quot;</property> - </emphasis> facets for output. See an example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> - <f:facet name="caption"> - <h:outputText value="United States Capitals" /> - </f:facet> - <f:facet name="header"> - <h:outputText value="Capitals and States Table" /> - </f:facet> - <rich:column> - <f:facet name="header">State Flag</f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - <f:facet name="footer">State Flag</f:facet> - </rich:column> - <rich:column> - <f:facet name="header">State Name</f:facet> - <h:outputText value="#{cap.state}"/> - <f:facet name="footer">State Name</f:facet> - </rich:column> - <rich:column > - <f:facet name="header">State Capital</f:facet> - <h:outputText value="#{cap.name}"/> - <f:facet name="footer">State Capital</f:facet> - </rich:column> - <rich:column> - <f:facet name="header">Time Zone</f:facet> - <h:outputText value="#{cap.timeZone}"/> - <f:facet name="footer">Time Zone</f:facet> - </rich:column> - <f:facet name="footer"> - <h:outputText value="Capitals and States Table" /> - </f:facet> -</rich:dataTable> -... -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> component with facets</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataTable2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Information about sorting and filtering you can find <link linkend="sortAndFilter">in the corresponding section</link>.</para> - <para> - You can find information how to remove header's gradient <ulink url="http://wiki.jboss.org/wiki/RichFacesDataTableBackgroundOut"... in the &quot;How to remove rich:dataTable header background &quot; article</ulink>. - </para> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Redefines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Redefines the footer content</entry> - </row> - <row> - <entry>caption</entry> - <entry>Defines the caption content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section id="SPR"> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a table</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a footer</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableFooterBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a column header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a column footer</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableSubfooterBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for cells</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section id="DofCCS"> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> class names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataTable_cn.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - - <table id="dTC"> - <title>Classes names that define a whole component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-table</entry> - <entry>Defines styles for all table</entry> - </row> - <row> - <entry>rich-table-caption</entry> - <entry>Defines styles for a &quot;caption&quot; facet element</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define header and footer elements</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-table-header</entry> - <entry>Defines styles for a table header row</entry> - </row> - - <row> - <entry>rich-table-header-continue</entry> - <entry>Defines styles for all header lines after the first</entry> - </row> - <row> - <entry>rich-table-subheader</entry> - <entry>Defines styles for a column header</entry> - </row> - - <row> - <entry>rich-table-footer</entry> - <entry>Defines styles for a footer row</entry> - </row> - - <row> - <entry>rich-table-footer-continue</entry> - <entry>Defines styles for all footer lines after the first</entry> - </row> - <row> - <entry>rich-table-subfooter</entry> - <entry>Defines styles for a column footer</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define rows and cells of a table</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-table-headercell</entry> - <entry>Defines styles for a header cell</entry> - </row> - - <row> - <entry>rich-table-subheadercell</entry> - <entry>Defines styles for a column header cell</entry> - </row> - <row> - <entry>rich-table-cell</entry> - <entry>Defines styles for a table cell</entry> - </row> - <row> - <entry>rich-table-row</entry> - <entry>Defines styles for a table row</entry> - </row> - <row> - <entry>rich-table-firstrow</entry> - <entry>Defines styles for a table&apos;s first row</entry> - </row> - - <row> - <entry>rich-table-footercell</entry> - <entry>Defines styles for a footer cell</entry> - </row> - - <row> - <entry>rich-table-subfootercell</entry> - <entry>Defines styles for a column footer cell</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="dTC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-table-cell{ - font-weight:bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataTable_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font weight for table cell was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:dataTable&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:dataTable&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style:italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;headerClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:dataTable&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:dataTable ... headerClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dataTable_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for header was changed.</para> - - <para> - Detailed information on how to set - <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - border to &quot;0px&quot; you can find in the - <ulink - url="http://www.jboss.org/community/docs/DOC-11861"> - &quot; How to set rich:dataTable border to 0px article &quot; - </ulink> - . - </para> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> usage and sources for the given example. </para> - <para>The article about <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> flexibility can be found in the <ulink - url="http://www.jboss.org/community/docs/DOC-11847"> &quot;rich:dataTable Flexibility &quot; article </ulink>.</para> - <para> - <ulink url="http://www.jboss.org/community/docs/DOC-11848">Article on dataTable skinability</ulink> provides you a simple example of skinnability. - - </para> - <para>More information about using <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> could be found on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>. - </para> - <para>How to use <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> in a context of Extended Data Model see on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - - <para>From <ulink url="http://www.jboss.org/community/docs/DOC-11861">&quo... border to 0px &quot;</ulink> article you'll figure out how to set rich:dataTable border to 0px </para> - <para><ulink url="http://www.jboss.org/community/docs/DOC-11860">dataTable Background Out </ulink> tells you how to remove rich:dataTable header background</para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,42 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:datascroller</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component designed for providing the functionality of tables scrolling using Ajax - requests.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:datascroller&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller_init.png"/> - </imageobject> - </mediaobject> - </figure> -</section> - <section> - <title>Key Features</title> - - <itemizedlist> - <listitem> - <para>Provides table scrolling functionality</para> - </listitem> - - <listitem> - <para>Built-in Ajax processing</para> - </listitem> - - <listitem> - <para>Provides fast controls</para> - </listitem> - - <listitem> - <para>Skin support</para> - </listitem> - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/datascroller.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,770 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>scroller</keyword> - <keyword>rich:datascroller</keyword> - <keyword>Htmldatascroller</keyword> - <keyword>tables</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Datascroller</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDatascroller</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Datascroller</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DataScrollerRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DatascrollerTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:dataTable id="table"> - ... -</h:dataTable> -... -<rich:datascroller for="table"/> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDatascroller; -... -HtmlDatascroller myScroll = new HtmlDatascroller(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> component provides table scrolling functionalitity the - same as TOMAHAWK scroller but with Ajax requests usage.</para> - <para> The - <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> component should be reRendered also with <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> when you changing filter in order to be updated according to the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> current model. - </para> - <para>The component should be placed into footer of the parent table or be bound - to it with the <emphasis> - <property>&quot;for&quot;</property> - </emphasis> attribute. Note, that <emphasis> - <property>&quot;for&quot;</property> - </emphasis> is evaluated on view build, not on view render, that is - why it will ignore JSTL tags.</para> - <para>The table should also have the defined <emphasis> - <property>&quot;rows&quot;</property> - </emphasis> attribute limiting the quantity of inputted table rows.</para> - <para>The scroller could limit the maximum quantity of rendered links on the - table pages with the help of the <emphasis> - <property>&quot;maxPages&quot;</property> - </emphasis> attribute.</para> - <para>Component provides two controllers groups for switching:</para> - <itemizedlist> - <listitem> - <para>Page numbers for switching onto a particular - page</para> - </listitem> - <listitem> - <para>The controls of fast switching: <emphasis> - <property>&quot;first&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;last&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;next&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;previous&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;fastforward&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;fastrewind&quot;</property> - </emphasis></para> - </listitem> - </itemizedlist> - <para>The controls of fast switching are created adding the facets component - with the corresponding name:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[ ... -<rich:datascroller for="table" maxPages="10"> - <f:facet name="first"> - <h:outputText value="First"/> - </f:facet> - <f:facet name="last"> - <h:outputText value="Last"/> - </f:facet> -</rich:datascroller> -...]]></programlisting> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> controls of fast switching</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The screenshot shows one controller from each group.</para> - <para> There are also facets used to create the disabled states: - <code>&quot;first_disabled&quot;,</code> - <code>&quot;last_disabled&quot;,</code> - <code>&quot;next_disabled&quot;,</code> - <code>&quot;previous_disabled&quot;,</code> - <code>&quot;fastforward_disabled&quot;,</code> - <code>&quot;fastrewind_disabled&quot;</code>. </para> - <para>For the - <code>&quot;fastforward&quot;/&quot;fastrewind&quot;</code> - controls customization the additional <emphasis> - <property>&quot;fastStep&quot;</property> - </emphasis> attribute is used. The attribute indicates pages quantity - to switch onto when fast scrolling is used. </para> - - <para> The <emphasis> - <property>&quot;page&quot;</property> - </emphasis> is a value-binding attribute used to define and save - current page number. The example is placed below. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form id="myForm"> - <rich:dataTable id="carList" rows="7" value="#{dataTableScrollerBean.allCars}" var="category"> - <f:facet name="header"> - <rich:columnGroup> - <h:column> - <h:outputText value="Make" /> - </h:column> - <h:column> - <h:outputText value="Model" /> - </h:column> - <h:column> - <h:outputText value="Price" /> - </h:column> - </rich:columnGroup> - </f:facet> - <h:column> - <h:outputText value="#{category.make}" /> - </h:column> - <h:column> - <h:outputText value="#{category.model}" /> - </h:column> - <h:column> - <h:outputText value="#{category.price}" /> - </h:column> - </rich:dataTable> - <rich:datascroller id="sc2" for="carList" reRender="sc1" maxPages="7" page="#{dataTableScrollerBean.scrollerPage}" /> - <h:panelGrid> - <h:panelGroup> - <h:outputText value="Set current page number:" /> - <h:inputText value="#{dataTableScrollerBean.scrollerPage}" id="sc1" size="1"/> - <h:commandButton value="Set" /> - </h:panelGroup> - </h:panelGrid> -</h:form> -...]]></programlisting> - - <para> In the example above you can enter the page number you want and set it by - clicking on the <emphasis role="bold"> - <property>&lt;h:commandButton&gt;</property> - </emphasis>. By the way, if you use <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> page links the input field rerenders and current page - number changes. </para> - <para>The result should be like below: </para> - <figure> - <title>The <emphasis> - <property>&quot;page&quot;</property> - </emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller3.png"/> - </imageobject> - </mediaobject> - </figure> - <!-- - The <emphasis><property>&quot;pageIndexVar&quot;</property></emphasis> and <emphasis> - <property>&;pagesVar&quot;</property> - </emphasis> attributes provide an ability to show the current page and the number of pages in - the <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis>. - --> - - - <para> The <emphasis> - <property>&quot;pageIndexVar&quot;</property> - </emphasis> and <emphasis> - <property>&quot;pagesVar&quot;</property> - </emphasis> attributes define a request scope variables and provide an - ability to show the current page and the number of pages in the - <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis>. </para> - <para> These attributes are used for definition the names of variables, that is - used in the facet with name <emphasis> - <property>&quot;pages&quot;</property> - </emphasis>. An example can be found below: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"> - <rich:column> - <h:outputText value="#{cap.name}" /> - </rich:column> - <f:facet name="footer"> - <rich:datascroller pageIndexVar="pageIndex" pagesVar="pages"> - <f:facet name="pages"> - <h:outputText value="#{pageIndex} / #{pages}" /> - </f:facet> - </rich:datascroller> - </f:facet> - </rich:dataTable> -</h:form> -... -]]></programlisting> - <para> It&apos;s possible to insert optional separators between controls. - For this purpose use a <emphasis> - <property>&quot;controlsSeparator&quot;</property> - </emphasis> facet. An example is placed below. </para> - <programlisting role="XML"><![CDATA[ ... -<f:facet name="controlsSeparator"> - <h:graphicImage value="/image/sep.png"/> -</f:facet> -...]]></programlisting> - <para> Starting from 3.2.1 of RichFaces multiple <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> instances behavior and page bindings are corrected. - Incorrect page after model changes handling is added. Phase Listener - called before RenderResponce scans the page for the <emphasis - role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> and performs the following operations: </para> - <itemizedlist> - <listitem> - <para> Checks if the <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> is rendered. (If the checking - generates an exception, the <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> is considered to be not rendered ) - </para> - </listitem> - <listitem> - <para> If the <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> is rendered - the table to which the - <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> is attached gets the value of the page - attribute of <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis>. </para> - </listitem> - </itemizedlist> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find in the <link linkend="process" - >&quot; Decide what to process &quot; </link> guide section. </para> - <note> - <title>Note:</title> - <para>Make sure, that all <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> components, defined for a table, have same - values for all<emphasis> - <property>&quot;page&quot;</property> - </emphasis> attributes. The page, specified in the last <emphasis> - <property>&quot;page&quot;</property> - </emphasis>, will be rendered in browser. </para> - </note> - </section> - - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>switchToPage(page)</entry> - <entry>Switches to the defined page, "page" is Number or String </entry> - </row> - <row> - <entry>next()</entry> - <entry>Navigates to the next page</entry> - </row> - <row> - <entry>previous()</entry> - <entry>Navigates to the previous page</entry> - </row> - <row> - <entry>first()</entry> - <entry>Navigates to the first page</entry> - </row> - <row> - <entry>last()</entry> - <entry>Navigates to the last page</entry> - </row> - <row> - <entry>fastForward()</entry> - <entry>Navigates ahead over a certain number of pages. The number of pages to traverse is defined with fastStep attribute</entry> - </row> - <row> - <entry>fastRewind()</entry> - <entry>Navigates backwards over a certain number of pages. The number of pages to traverse is defined with fastStep attribute</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlsSeparator</entry> - <entry>Redefines optional separators between controls</entry> - </row> - <row> - <entry>first</entry> - <entry>Redefines the &quot;first&quot; button with the content set</entry> - </row> - <row> - <entry>first_disabled</entry> - <entry>Redefines the disabled &quot;first&quot; button with the content set</entry> - </row> - <row> - <entry>last</entry> - <entry>Redefines the &quot;last&quot; button with the content set</entry> - </row> - <row> - <entry>last_disabled</entry> - <entry>Redefines the disabled &quot;last&quot; button with the content set</entry> - </row> - <row> - <entry>fastrewind</entry> - <entry>Redefines the &quot;fastrewind&quot; button with the content set</entry> - </row> - <row> - <entry>fastrewind_disabled</entry> - <entry>Redefines the disabled &quot;fastrewind&quot; button with the content set</entry> - </row> - <row> - <entry>fastforward</entry> - <entry>Redefines the &quot;fastforward&quot; button with the content set</entry> - </row> - <row> - <entry>fastforward_disabled</entry> - <entry>Redefines the disabled &quot;fastforward&quot; button with the content set</entry> - </row> - <row> - <entry>previous</entry> - <entry>Redefines the &quot;previous&quot; button with the content set</entry> - </row> - <row> - <entry>previous_disabled</entry> - <entry>Redefines the disabled &quot;previous&quot; button with the content set</entry> - </row> - <row> - <entry>next</entry> - <entry>Redefines the &quot;next&quot; button with the content set</entry> - </row> - <row> - <entry>next_disabled</entry> - <entry>Redefines the disabled &quot;next&quot; button with the content set</entry> - </row> - <row> - <entry>pages</entry> - <entry>Redefines the pages buttons with the content set</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a wrapper element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for an active button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for an inactive button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component - elements.</para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_cn2"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-datascr</entry> - <entry>Defines styles for a wrapper - &lt;div&gt; element of - a datascroller</entry> - </row> - <row> - <entry>rich-dtascroller-table</entry> - <entry>Defines styles for a wrapper - &lt;table&gt; element of a - datascroller</entry> - </row> - <row> - <entry>rich-datascr-button</entry> - <entry>Defines styles for a - button</entry> - </row> - - <row> - <entry>rich-datascr-ctrls-separator</entry> - <entry>Defines styles for a separator - between buttons</entry> - </row> - </tbody> - - </tgroup> - </table> - <table> - <title>Classes names that define a buttons appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-datascr-act</entry> - <entry>Defines styles for an active - button</entry> - </row> - <row> - <entry>rich-datascr-inact</entry> - <entry>Defines styles for an inactive - button</entry> - </row> - <row> - <entry>rich-datascr-button-dsbld</entry> - <entry>Defines styles for a disabled - button</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the table <link linkend="tab_cn2">above</link>) and define necessary - properties in them. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-datascr-button{ - color: #CD6600; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example an input text font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> - <emphasis role="italic"> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color: #C6E2FF; -} -...]]></programlisting> - <para>The <emphasis role="italic"> - <property>&quot;styleClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:datascroller&gt; </property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:datascroller ... selectedStyleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/datascroller_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color of the selected - cell on scroller was changed.</para> - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc... - >On the component LiveDemo page</ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> usage and sources for the given example. </para> - <para> The solution about how to do correct pagination using datascroller (load - a part of data from database) can be found on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>. </para> - <para>How to use <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;rich:datascroller&gt;</property> - </emphasis> in a context of Extended Data Model see on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,14 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>dndParam</keyword> - </keywordset> - </sectioninfo> - - <section> -<title>Description</title> - <para>This component is used for passing parameters during drag-and-drop - operations.</para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dndParam.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,188 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>drag and drop</keyword> - - <keyword>rich:dndParam</keyword> - - <keyword>HtmlDndParam</keyword> - - <keyword>drop Zone</keyword> - </keywordset> - </sectioninfo> - - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.DndParam</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlDndParam</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.DndParamTag</entry> - </row> - </tbody> - </tgroup> - </table> - - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>Here is a simple example as it could be used on a page, nested in one of the drag-and-drop components:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dragSupport dragType="file"> - <rich:dndParam name="testDrag" value="testDragValue" - type="drag"/> -</rich:dragSupport> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDndParam; -... -HtmlDndParam myDparam = new HtmlDndParam(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para><property>dndParam</property> is used during drag-and-drop - operations to pass parameters to an indicator. At first, a parameter type - is defined with the type attribute (to specify parameter functionality), - then a parameter name could be defined with the name and value attribute. - Although, it&apos;s possible to use nested content defined inside - <property>dndParam</property> for value definition, instead of the - attribute.</para> - - <para>Variants of usage:</para> - - <itemizedlist> - <listitem><para>Parameters passing for a drag icon when an indicator is in - drag.</para></listitem> - </itemizedlist> - - <para>In this case, <property>dndParam</property> is of a drag type - and is defined in the following way:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dragSupport ... > - <rich:dndParam type="drag" name="dragging"> - <h:graphicImage value="/img/product1_small.png"/> - </rich:dndParam> - <h:graphicImage value="product1.png"/> -</rich:dragSupport> -... -]]></programlisting> - - <para>Here <property>dndParam</property> defines an icon that is used by - an indicator when a drag is on the place of a default icon (e.g. a - minimized image of a draggable element)</para> - - <itemizedlist> - <listitem><para>Parameters passing for an indicator informational part during - a drag.</para></listitem> - </itemizedlist> - - <para>In this case <property>dndParam</property> is of a drag type - and is defined in the following way:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dragSupport ... > - <rich:dndParam type="drag" name="label" value="#{msg.subj}"/> - ... -</rich:dragSupport> -... -]]></programlisting> - - <para>The parameter is transmitted into an indicator for usage in an - informational part of the <property>dragIndicator</property> component (inside an indicator a - call to {label} happens)</para> - - <itemizedlist> - <listitem><para>Parameters passing happens when dragged content is brought - onto some zone with <property>dropSupport</property></para></listitem> - </itemizedlist> - - <para>In this case <property>dndParam</property> is of a drop type and is - defined in the following way:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dropSupport ... > - <rich:dndParam type="drop" name="comp" > - <h:graphicImage height="16" width="16" value="/images/comp.png"/> - </rich:dndParam> - ... -</rich:dropSupport > -... -]]></programlisting> - - <para>Here, <property>dndParam</property> passes icons into an indicator, - if dragged content of a comp type is above the given drop zone that - processes it on the next drop event.</para> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para><emphasis role="bold"> - <property>&lt;rich:dndParam&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component isn&apos;t visual.</para> - </section> - - <section> - <title>Relevan Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:dndParam&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,31 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="ch1"> - <sectioninfo> - <keywordset> - <keyword>rich:dragIndicator</keyword> - </keywordset> - </sectioninfo> - - <section> - <title>Description</title> - <para>This is a component for defining what appears under the mouse cursor during drag-and-drop - operations. The displayed drag indicator can show information about the dragged elements.</para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> component</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dragIndicator_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Customizable look and feel</para></listitem> - <listitem><para>Customizable marker according to the type of dragable elements</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,298 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>dragged element</keyword> - <keyword>rich:dragIndicator</keyword> - <keyword>HtmlDragIndicator</keyword> - <keyword>dndParam</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Draggable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDragIndicator</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DragIndicator</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DragIndicatorRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DragIndicatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dragIndicator id="indicator"> - <f:facet name="single"> - <f:verbatim> - <b>Single item</b> {DragInfo} - </f:verbatim> - </f:facet> -</rich:dragIndicator> -... -<rich:dragSupport dragType="text" dragIndicator="indicator"/> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDragIndicator; -... -HtmlDragIndicator myDragIndicator = new HtmlDragIndicator(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> In the simplest way the component could be defined empty - in that case a default - indicator is shown like this: </para> - <figure> - <title>The simplest <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dragIndicator3.png"/> - </imageobject> - </mediaobject> - </figure> - <para>For indicator customization you need to define one of the following facets:</para> - <itemizedlist> - <listitem> - <para> - <emphasis><property>&quot;single&quot;</property></emphasis> — indicator shown when dragging a single item; - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;multiple&quot;</property></emphasis> — indicator shown when dragging several items. - </para> - </listitem> - </itemizedlist> - - <note> - <title> - Note: - </title> - <para> - The current implementation of the <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> component - does not support multiple items selection. The feature is described for future releases. - </para> - </note> - - <para>Thus for specify a look-and-feel you have to define one of these facets and include into - it a content that should be shown in indicator.</para> - <section> - <title>Macro definitions</title> - <para>To place some data from drag or drop zones into component you can use macro definitions. - They are being defining in the following way:</para> - <itemizedlist> - <listitem><para> - <emphasis role="bold"> - <property>&lt;rich:dndParam&gt;</property> - </emphasis> component with a specific name and value is being included into a drag/drop - support component (an image can be defined as placed inside <emphasis role="bold"> - <property>&lt;rich:dndParam&gt;</property> - </emphasis> without defining a value). </para></listitem> - <listitem><para> in needed place a parameter value is included into the marking of indicator using - syntax (name of parameter)</para></listitem> - </itemizedlist> - <para> For instance, this:</para> - <programlisting role="XML"><![CDATA[... -<rich:dropSupport...> - <rich:dndParam name="testDrop"> - <h:graphicImage value="/images/file-manager.png" /> - </rich:dndParam> -</rich:dropSupport> -... -]]></programlisting> - <para>Is placed into indicator as follows:</para> - <programlisting role="XML"><![CDATA[... -<f:facet name="single"> - {testDrop} -</f:facet> -... -]]></programlisting> - </section> - <section> - <title>Predefined macro definitions</title> - <para> Indicator can accept two default macro definitions:</para> - <itemizedlist> - <listitem><para>marker</para></listitem> - <listitem><para>label</para></listitem> - </itemizedlist> - <para>Thus including one of these elements in the marking of indicator, in other words after - setting up appropriate parameters in DnD components and defining only default indicator - - without specifying facets - a developer gets these parameters values displayed in indicator - in the order &quot;marker - label&quot;.</para> - </section> - - <section> - <title>Marker customization</title> - <para>The macro definition <emphasis> - <property>&quot;marker&quot;</property> - </emphasis> can be customized depending on what a draggable element is located over. For - that you should define one of these three parameters (specify a parameter with one of three - names):</para> - <itemizedlist> - <listitem><para><code>accept</code> </para></listitem> - </itemizedlist> - <para>Parameter will be set instead of {marker} into indicator when a draggable element is - positioned over drop zone that accept this type of elements</para> - - <itemizedlist> - <listitem><para><code>reject</code></para></listitem> - </itemizedlist> - <para>Parameter is set instead of {marker} into indicator when a draggable element is - positioned over drop zone that doesn&apos;t accept this type of elements </para> - - <itemizedlist> - <listitem><para><code>default</code></para></listitem> - </itemizedlist> - <para>Parameter is set instead of {marker} into indicator when a draggable element is - positioned over all the rest of page elements</para> - </section> - - <note> - <title> - Note: - </title> - <para> - If you use <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> inside a form - do not forget to use id like <code>formId:indicatorID</code> - defined in <emphasis role="bold"><property>&lt;rich:dragSupport&gt;</property></emphasis> indicator attribute. - </para> - </note> - - </section> - - <!--section> - <title>Details of Usage</title> - <para>The component seems to be combined of two elements: an icon on the left and informational - part on the right. The definition and usage is described further for each element.</para> - <section> - <title>Indicator informational part</title> - <para>Inside the component, the definition should present for two facets with single and - multiple names providing templates for rendering during dragging one or several elements. - The facets define the right side of the <property>indicator</property> element.</para> - <para>The following elements on a page are obtained for a code defined in the example:</para> - <figure> - <title>DragIndicator informational part</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dragIndicator2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Hence, defining dndParam corresponding to drag areas, information transmitted into an - <property>indicator</property> is defined.</para> - </section> - <section> - <title>Indicator icon element</title> - <para>Inside the component there also could be definitions for three faces with - <emphasis><property>&quot;accept&quot;</property>,</emphasis> - <emphasis> - <property>&quot;reject&quot;</property> - </emphasis> and <emphasis> - <property>&quot;default&quot;</property> - </emphasis> names that specify icons on the left side according to states when an - <property>indicator</property> is above:</para> - <itemizedlist> - <listitem> a drop zone that processes the facets written in the <emphasis> - <property>&quot;acceptedTypes&quot;</property> - </emphasis> attribute of this drop zone </listitem> - <listitem> a drop zone that doesn&apos;t process the facets </listitem> - <listitem> not above any drop zone </listitem> - </itemizedlist> - <para>Here is an example for an accept facet:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <f:dndParam name="accept"> - <h:graphicImage value="./images/1.png"/> - </f:dndParam> -... -]]></programlisting> - <para>Each of these three facets have a default structure for icons rendering on the left - side.</para> - <para>When it&apos;s necessary to define individual icons for dragged above elements of a - <property>drop zone</property> from each particular drag area, use a <property>drop zone</property> - <emphasis> - <property>&quot;typeMapping&quot;</property> - </emphasis> attribute for the corresponding icons.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:dropSupport acceptedTypes="[iconsDragged, textDragged]" typeMapping="{iconsDragged: DropIcon}"> - <dnd:dndParam name="DropIcon"> - <h:graphicImage value="/images/drop-icon.png"/> - </dnd:dndParam> - <rich:dropSupport/> -... -]]></programlisting> - <para>Here, drag areas that are to be processed with this drop zone are of iconsDragged and - textDragged type. An icon is redefined for iconsDragged with the help of the drop zone <emphasis> - <property>&quot;typeMapping&quot;</property> - </emphasis> attribute defined with the <emphasis role="bold"> - <property>&lt;rich:dndParam&gt;</property> - </emphasis>component.</para> - - </section> - </section--> - - <section> - <title>Look-and-Feel Customization</title> - <para>The <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> component has no skin parameters and special <emphasis> - <property>style classes</property></emphasis>, as it consists of one element - generated with a your method on the server. To define some style properties such as an indent - or a border, it&apos;s possible to use <emphasis> - <property>&quot;style&quot;</property></emphasis> and <emphasis> - <property>&quot;styleClass&quot;</property></emphasis> attributes on the component.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:dragIndicator&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator1.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator1.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragIndicator1.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,147 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>dragged element</keyword> -<keyword>rich:dragIndicator</keyword> -<keyword>HtmlDragIndicator</keyword> -<keyword>dndParam</keyword> -</keywordset> -</sectioninfo> - <section> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Draggable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDragIndicator</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DragIndicator</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DragIndicatorRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DragIndicatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <dnd:dragIndicator id="indicator"> - <f:facet name="single"> - <f:verbatim> - <b>Single item</b> {DragInfo} - </f:verbatim> - </f:facet> - </dnd:dragIndicator> - ... -<dnd:dragSupport dragType="text" dragIndicator="indicator"> - ... - </section> - <section> -<title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDragIndicator; -HtmlDragIndicator myDragIndicator = new HtmlDragIndicator(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The component seems to be combined of two elements: an icon on the left and informational - part on the right. The definition and usage is described further for each element.</para> - <section> - <title>Indicator informational part</title> - <para>Inside the component, the definition should present for two facets with single and multiple - names providing templates for rendering during dragging one or several elements. The facets - define the right side of the <property>indicator</property> element.</para> - <para>The following elements on a page are obtained for a code defined in the example:</para> - <figure> - <title>DragIndicator informational part</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dragIndicator2.png"/> - </imageobject> - </mediaobject> - </figure> -<para>Hence, defining dndParam corresponding to drag areas, information transmitted into an - <property>indicator</property> - is defined.</para> - </section> - <section> - <title>Indicator icon element</title> - <para>Inside the component there also could be definitions for three faces with - <emphasis ><property>&quot;accept&quot;</property>,</emphasis> - <emphasis ><property>&quot;reject&quot;</property></emphasis> and - <emphasis ><property>&quot;default&quot;</property></emphasis> names that specify icons on the left side according to states when an - <property>indicator</property> is above:</para> -<itemizedlist> - <listitem><para> - a drop zone that processes the facets written in the - <emphasis ><property>&quot;acceptedTypes&quot;</property></emphasis> attribute - of this drop zone - </para></listitem> - <listitem><para> - a drop zone that doesn&apos;t process the facets - </para></listitem> - <listitem><para> - not above any drop zone - </para></listitem> - </itemizedlist> - <para>Here is an example for an accept facet:</para> - <programlisting role="XML"><![CDATA[ - <f:facet name="accept"> - <h:graphicImage value="./images/1.png"/> - </f:facet> -]]></programlisting> -<para>Each of these three facets have a default structure for icons rendering on the left side.</para> -<para>When it&apos;s necessary to define individual icons for dragged above elements of a <property>drop zone</property> from each - particular drag area, use the <property>drop zone</property> - <emphasis ><property>&quot;typeMapping&quot;</property></emphasis> attribute for the - corresponding icons.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> -<programlisting role="XML"><![CDATA[<rich:dropSupport acceptedTypes="[iconsDragged, textDragged]" - typeMapping="{iconsDragged: DropIcon}"> - - <dnd:dndParam name="DropIcon"> - <h:graphicImage value="/images/drop-icon.png" /> - </dnd:dndParam> -... -]]></programlisting> -<para>Here, drag areas that are to be processed with this drop zone are of iconsDragged and -textDragged type. An icon is redefined for iconsDragged with the help of the drop zone - <emphasis ><property>&quot;typeMapping&quot;</property></emphasis> attribute - defined with the <emphasis role="bold"><property>&lt;rich:dndParam&gt;</property></emphasis>component.</para> -</section> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,23 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dragListener</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - - <section> - <title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:dragListener&gt;</property></emphasis> - represents an action listener method that is notified after a drag operation. - </para> - </section> - - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Allows to define some drag listeners for the components with "Drag and Drop" support</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,160 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>rich:dragListener</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - - <row> - <entry>listener-class</entry> - <entry>org.richfaces.event.DragListener</entry> - </row> - <row> - <entry>event-class</entry> - <entry>org.richfaces.event.DragEvent</entry> - </row> - - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DragListenerTag</entry> - </row> - - </tbody> - </tgroup> - </table> - - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following - syntax: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:dragListener type="demo.Bean"/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[package demo; - -public class ImplBean implements org.richfaces.event.DragListener{ - ... -} -]]></programlisting> - - <programlisting role="JAVA"><![CDATA[ -import demo.ImplBean; -... -ImplBean myDragListener = new ImplBean(); -... -]]></programlisting> - - </section> - - <section> - <title>Details of Usage</title> - - <para> - The - <emphasis role="bold"> - <property>&lt;rich:dragListener&gt;</property> - </emphasis> - is used as a nested tag with components like - <emphasis role="bold"> - <property>&lt;rich:dragSupport&gt;</property> - </emphasis> - , - <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> - and - <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> - . - </para> - <para> - Attribute - <emphasis> - <property>&quot;type&quot;</property> - </emphasis> - defines the fully qualified Java class name for a listener. - This class should implement - - <ulink - url="&apidoc_framework;/org/richfaces/event/DropListener.html"> - <code>org.richfaces.event.DropListener</code> - </ulink> - interface. - </para> - - <para> - <emphasis role="bold"> - The typical variant of using: - </emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<h:panelGrid id="dragPanel"> - <rich:dragSupport dragType="item"> - <rich:dragListener type="demo.ListenerBean"/> - </rich:dragSupport> - <!--Some content to be dragged--> -</h:panelGrid> -... -]]></programlisting> - - <para> - <emphasis role="bold">Java bean source:</emphasis> - </para> - - <programlisting role="JAVA"><![CDATA[package demo; - -import org.richfaces.event.DragEvent; - -public class ListenerBean implements org.richfaces.event.DragListener{ -... - public void processDrag(DragEvent arg0){ - //Custom Developer Code - } -... -} -]]></programlisting> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para> - <emphasis role="bold"> - <property>&lt;rich:dragListener&gt;</property> - </emphasis> - has no skin parameters and custom - <property>style classes</property> - , as the component isn&apos;t visual. - </para> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,46 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dragSupport</keyword> - </keywordset> - </sectioninfo> -<section> -<title>Description</title> - <para>This component defines a subtree of the component tree as draggable - for drag-and-drop operations. Within such a "drag zone," you can click - the mouse button on an item and drag it to any component that supports drop - operations (a "drop zone"). It encodes all the necessary JavaScript for - supporting drag-and-drop operations.</para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:dragSupport&gt;</property></emphasis> component</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dragSupport_init.png" /> - </imageobject> - </mediaobject> - </figure> -</section> - <section> - <title>Key Features</title> - - <itemizedlist> - <listitem><para> - Encodes all necessary JavaScript to perform drag - actions - </para></listitem> - - <listitem><para> - Can be used within any component type that provides the - required properties for drag operations - </para></listitem> - - <listitem><para> - Supports drag-and-drop between different forms - </para></listitem> - - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dragSupport.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,292 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dragSupport</keyword> - - <keyword>HtmlDragSupport</keyword> - </keywordset> - </sectioninfo> - - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.DragSupport</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry> - org.richfaces.component.html.HtmlDragSupport - </entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.DragSupport</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.DragSupportRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.DragSupportTag</entry> - </row> - </tbody> - </tgroup> - </table> - - - <section> - <title>Creating the Component with a Page Tag</title> - - <para> - Here is a simple example as it could be used on a page: - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:panelGrid id="drag1"> - <rich:dragSupport dragType="item"/> - <!--Some content to be dragged--> -</h:panelGrid> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDragSupport; -... -HtmlDragSupport myDragZone = new HtmlDragSupport(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para> - The - <property>dragSupport</property> - tag inside a component completely specifies the events and - JavaScript required to use the component and it&apos;s children - for dragging as part of a drag-and-drop operation. In order - to work, though, - <property>dragSupport</property> - must be placed inside a wrapper component that outputs child - components and that has the right events defined on it. - Thus, this example won't work, because the - <emphasis role="bold"><property>&lt;h:column&gt;</property></emphasis> - tag doesn't provide the necessary properties for redefining - events on the client: - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:column> - <rich:dragSupport dragIndicator=":form:iii" dragType="text"> - <a4j:actionparam value="#{caps.name}" name="name"/> - </rich:dragSupport> - <h:outputText value="#{caps.name}"/> -</h:column> -... -]]></programlisting> - - <para> - However, using - <property>a4j:outputPanel</property> - as a wrapper inside - <emphasis role="bold"><property>&lt;h:column&gt;</property></emphasis> - , the following code could be used successfully: - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:column> - <a4j:outputPanel> - <rich:dragSupport dragIndicator=":form:iii" dragType="text"> - <a4j:actionparam value="#{caps.name}" name="name"/> - </rich:dragSupport> - <h:outputText value="#{caps.name}"/> - </a4j:outputPanel> -</h:column> -... -]]></programlisting> - - <para>This code makes all rows of this column draggable.</para> - - <para> - One of the main attributes for - <property>dragSupport</property> - is - <emphasis> - <property>"dragType"</property> - , - </emphasis> - which associates a name with the drag zone. Only drop zones - with this name as an acceptable type can be used in - drag-and-drop operations. Here is an example: - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:panelGrid id="drag1"> - <rich:dragSupport dragType="singleItems" .../> - <!--Some content to be dragged--> -</h:panelGrid> -... -<h:panelGrid id="drag2"> - <rich:dragSupport dragType="groups" .../> - <!--Some content to be dragged--> -</h:panelGrid> -... -<h:panelGrid id="drop1"> - <rich:dropSupport acceptedTypes="singleItems" .../> - <!--Drop zone content--> -</h:panelGrid> -... -]]></programlisting> - - <para> - In this example, the - <code>drop1</code> - panel grid is a drop zone that invokes drag-and-drop for - drops of items from the first - <code>drag1</code> - panel grid, but not the second - <code>drag2</code> - panel grid. In the section about - <property>dropSupport</property> - , you will find an example that shows more detailed - information about moving data between tables with drag and - drop. - </para> - - <para> - The - <property>dragSupport</property> - component also has a - <emphasis> - <property>"value"</property> - </emphasis> - attribute for passing data into the processing after a drop - event. - </para> - - <para> - One more important attribute for - <emphasis role="bold"> - <property>&lt;rich:dragSupport&gt;</property> - </emphasis> - is the - <emphasis> - <property>"dragIndicator"</property> - </emphasis> - attribute that point to the component id of the - <emphasis role="bold"> - <property>&lt;rich:dragIndicator&gt;</property> - </emphasis> - component to be used for dragged items from this drag zone. - If it isn't defined, a default indicator for drag operations - is used. - </para> - - <para> - Finally, the component has the following extra attributes - for event processing on the client: - </para> - - <itemizedlist> - <listitem> - <para><emphasis><property>&quot;ondragstart&quot;</property></emphasis></para> - </listitem> - - <listitem> - <para><emphasis><property>&quot;ondragend&quot;</property></emphasis></para> - </listitem> - </itemizedlist> - - <para> - You can use your own custom JavaScript functions to handle - these events. - </para> - - - <note> - <title>Note:</title> - <para> - If you define width for a outputPanel, in Internet - Explorer 6 you can perform a drag and drop operation, - placing the mouse cursor on the text in the outputPanel - only. - </para> - </note> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para> - <emphasis role="bold"> - <property>&lt;rich:dragSupport&gt;</property> - </emphasis> - has no skin parameters and custom - <property>style classes</property> - , as the component isn&apos;t visual. - </para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... - On the component Live Demo page - </ulink> - you can see the example of - <emphasis role="bold"> - <property>&lt;rich:dragSupport&gt;</property> - </emphasis> - usage and sources for the given example. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,32 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:draggable</keyword> -</keywordset> -</sectioninfo> -<section> - <title>Description</title> - <para>A <property>draggable</property> zone of page, where it&apos;s possible to press a mouse - button on the content and drag it to any drop zone. It encodes all necessary JavaScript - code for supporting drag operations.</para> - <figure> - <title>&lt;rich:draggable&gt; component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/draggable1.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Encodes all necessary JavaScript code for supporting drag operations in drag and drop</para></listitem> - <listitem><para>Drag zone supports all content inside that can be needed for Drag and Drop</para></listitem> - <listitem><para>Managing zones to drop components dragged from this zone with an attribute</para></listitem> - <listitem><para>Simple management Indicator for zones</para></listitem> - <listitem><para>Easy management of parameters to send to a target drop zone</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/draggable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,123 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>draggable zone</keyword> -<keyword>rich:draggable</keyword> -<keyword>HtmlDraggable</keyword> -<keyword>drop zone</keyword> -</keywordset> -</sectioninfo> - <section> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Draggable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDraggable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Draggable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DraggableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DraggableTag</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:toolBar> - <rich:draggable dragType="file"> - <!--Some Content to be Dragged--> - </rich:draggable> - ... - </rich:toolBar> -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[... -org.richfaces.component.html.HtmlDraggable myDragZone = new org.richfaces.component.html.HtmlDraggable(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it shown in the example, a key attribute is <emphasis ><property>&quot;dragType&quot;</property></emphasis>, where a name for an obtaining Drag-area is defined. Basing on this name, Drop-zones on a page decide whether to accept Drag-area content or not (with the help of Drag-areas lists accepted for processing that are defined in Drop-zones).</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... - <rich:draggable dragType="dragTextBlocks"> - <!--Some Components There--> - </rich:draggable> - <rich:draggable dragType="dragIcons"> - <!--Some Components There--> - </rich:draggable> - ... - <rich:dropZone acceptedTypes="[dragIcons]"> - <!--Some Content Representing DropZone--> - <rich:dropZone> -... -]]></programlisting> - <para>The example shows that Drop zone calls the corresponding drop event processing in it, only - if a drop is generated from the second drop zone. </para> - <para>Another important attribute for - <emphasis role="bold"><property>&lt;rich:draggable&gt;</property></emphasis> is <emphasis ><property>&quot;dragIndicator&quot;</property></emphasis> where the -<emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> component id is defined for this drag area. If it isn&apos;t defined drag area -creates a default indicator for drag operation. Additional information on <emphasis role="bold"> - <property>&lt;rich:dragIndicator&gt;</property> - </emphasis>and its usage with a drag, could be found on the following chapter <ulink url="ch06s04.html"> - dragIndicator</ulink>.</para> - <para>Thus, it&apos;s necessary only to define the following:</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... - <rich:draggable dragType="dragText"> - <h:outputText value="Hello"></h:outputText> - </rich:draggable> -... -]]></programlisting> - <para>in order to be able to drag this string on a page.</para> - <para>The component also provide important components for redefinition of the corresponding - events called with the drag operations (ondragstart and ondragend), where it possible to define - your own additional JavaScript functions that are called on the corresponding events.</para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>As it has been mention above, the component defines components wrapper for drag areas, i.e. - it doesn&apos;t has its own representation. Therefore, for customization of a wrapper - <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element of the component it&apos;s - possible to use a component attribute <emphasis ><property>&quot;styleClass&quot;</property></emphasis> or - redefine rich-draggable class in your own CSS files that is added to all <property>draggable</property> components - style on default.</para> - </section> - - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,55 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dropDownMenu</keyword> - </keywordset> - </sectioninfo> - - <section> - <title>Description</title> - - <para>The <emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis> component is used for creating - multilevel drop-down menus.</para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis> component</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dropDownMenu_init.png" /> - </imageobject> - </mediaobject> - </figure> - </section> - - <section> - <title>Key Features</title> - - <itemizedlist> - <listitem> - <para>Highly customizable look-and-feel</para> - </listitem> - - <listitem> - <para>Pop-up appearance event customization</para> - </listitem> - - <listitem> - <para>Different submission modes</para> - </listitem> - - <listitem> - <para>Ability to define a complex representation for elements</para> - </listitem> - - <listitem> - <para>Support for disabling</para> - </listitem> - - <listitem> - <para>Smart user-defined positioning</para> - </listitem> - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropDownMenu.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,713 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dropDownMenu</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DropDownMenu</entry> - </row> - - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDropDownMenu</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.DropDownMenu</entry> - </row> - - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DropDownMenuRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DropDownMenuTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>Here is a simple example as it could be used on a page:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu value="Item1"> - <!--Nested menu components--> -</rich:dropDownMenu> -...]]></programlisting> - - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDropDownMenu; -... -HtmlDropDownMenu myDropDownMenu = new HtmlDropDownMenu(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para>All attributes except <emphasis> - <property>"value"</property> - </emphasis> are optional. The <emphasis> - <property>"value"</property> - </emphasis> attribute defines text to be represented. If you can use the <emphasis> - <property>"label"</property> - </emphasis> facet, you can even not use the <emphasis> - <property>"value"</property> - </emphasis> attribute.</para> - - <para>Here is an example:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<f:facet name="label"> - <h:graphicImage value="/images/img1.png"/> -</f:facet> -...]]></programlisting> - - <para>Use the <emphasis> - <property>"event"</property> - </emphasis> attribute to define an event for the represented element that triggers a menu - appearance. An example of a menu appearance on a click can be seen below.</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu event="onclick" value="Item1"> - <!--Nested menu components--> -</rich:dropDownMenu> -...]]></programlisting> - - <para>The <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> - <emphasis> - <property>"submitMode"</property> - </emphasis> attribute can be set to three possible parameters:</para> - - <itemizedlist> - <listitem> - <para><code>Server</code> (default)</para> - </listitem> - </itemizedlist> - - <para>Regular form submission request is used.</para> - - <itemizedlist> - <listitem> - <para><code>Ajax</code></para> - </listitem> - </itemizedlist> - - <para>Ajax submission is used for switching.</para> - - <itemizedlist> - <listitem> - <para><code>None</code></para> - </listitem> - </itemizedlist> - - <para>The <emphasis> - <property>"action"</property> - </emphasis> and <emphasis> - <property>"actionListener"</property> - </emphasis> item&apos;s attributes are ignored. Menu items don&apos;t fire any submits themselves. The - behavior is fully defined by the components nested into items.</para> - - <note><title>Note:</title><para> As the <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> component doesn't provide its own form, use it between <emphasis role="bold"><property>&lt;h:form&gt;</property></emphasis> and - <emphasis role="bold"><property>&lt;/h:form&gt;</property></emphasis> tags.</para></note> - - <para>The <emphasis> - <property>"direction"</property> - </emphasis> and <emphasis> - <property>"jointPoint"</property> - </emphasis> attributes are used for defining aspects of menu appearance.</para> - - <para>Possible values for the <emphasis> - <property>"direction"</property> - </emphasis> attribute are:</para> - - <itemizedlist> - <listitem> - <para>&quot;top-left&quot; - a menu drops to the top and left</para> - </listitem> - - <listitem> - <para>&quot;top-right&quot; - a menu drops to the top and right</para> - </listitem> - - <listitem> - <para>&quot;bottom-left&quot; - a menu drops to the bottom and left</para> - </listitem> - - <listitem> - <para>&quot;bottom-right&quot; - a menu drops to the bottom and right</para> - </listitem> - - <listitem> - <para>&quot;auto&quot; - smart positioning activation</para> - </listitem> - </itemizedlist> - - <para>Possible values for the <emphasis> - <property>"jointPoint"</property> - </emphasis> attribute are:</para> - - <itemizedlist> - <listitem> - <para>&quot;tr&quot; - a menu is attached to the top-right point of the button element</para> - </listitem> - - <listitem> - <para>&quot;tl&quot; - a menu is attached to the top-left point of the button element</para> - </listitem> - - <listitem> - <para>&quot;br&quot; - a menu is attached to the bottom-right point of the button element</para> - </listitem> - - <listitem> - <para>&quot;bl&quot; - a menu is attached to the bottom-left point of the button element</para> - </listitem> - - <listitem> - <para>&quot;auto&quot; - smart positioning activation</para> - </listitem> - </itemizedlist> - - <para>By default, the <emphasis> - <property>"direction"</property> - </emphasis> and <emphasis> - <property>"jointPoint"</property> - </emphasis> attributes are set to &quot;auto&quot;.</para> - - <para>Here is an example:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu value="File" direction="bottom-right" jointPoint="bl"> - <rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}"/> - <rich:menuItem submitMode="ajax" value="Open" action="#{ddmenu.doOpen}"/> - <rich:menuGroup value="Save As..."> - <rich:menuItem submitMode="ajax" value="Text File" action="#{ddmenu.doSaveText}"/> - <rich:menuItem submitMode="ajax" value="PDF File" action="#{ddmenu.doSavePDF}"/> - </rich:menuGroup> - <rich:menuItem submitMode="ajax" value="Close" action="#{ddmenu.doClose}"/> - <rich:menuSeparator id="menuSeparator11"/> - <rich:menuItem submitMode="ajax" value="Exit" action="#{ddmenu.doExit}"/> -</rich:dropDownMenu> -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Using the <emphasis role="bold"><property>"direction"</property></emphasis> and <emphasis><property>"joinPoint"</property></emphasis> attributes</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dropDownMenu2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>You can correct an offset of the pop-up list relative to the label using the following - attributes: <emphasis> - <property>"horizontalOffset"</property> - </emphasis> and <emphasis> - <property>"verticalOffset"</property> - </emphasis>.</para> - - <para>Here is an example:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu value="File" direction="bottom-right" jointPoint="tr" horizontalOffset="-15" verticalOffset="0"> - <rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}"/> - <rich:menuItem submitMode="ajax" value="Open" action="#{ddmenu.doOpen}"/> - <rich:menuGroup value="Save As..."> - <rich:menuItem submitMode="ajax" value="Text File" action="#{ddmenu.doSaveText}"/> - <rich:menuItem submitMode="ajax" value="PDF File" action="#{ddmenu.doSavePDF}"/> - </rich:menuGroup> - <rich:menuItem submitMode="ajax" value="Close" action="#{ddmenu.doClose}"/> - <rich:menuSeparator id="menuSeparator11"/> - <rich:menuItem submitMode="ajax" value="Exit" action="#{ddmenu.doExit}"/> -</rich:dropDownMenu> -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Using the <emphasis><property>"horizontalOffset"</property></emphasis> and <emphasis><property>"verticalOffset"</property></emphasis> attributes</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dropDownMenu3.png"/> - </imageobject> - </mediaobject> - </figure> - - <!--para> The <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> attribute is used for disabling whole <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis>, <emphasis role="bold"> - <property>&lt;rich:menuGroup&gt;</property> - </emphasis> or <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property>. - </emphasis> - </para> - <para>An example of a menu appearance with <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> attribute can be seen below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... - <rich:dropDownMenu value="Item1"> - <rich:menuItem id="menuItem1" value="Active1"/> - <rich:menuItem id="menuItem2" value="Disabled1" disabled="true"/> - <rich:menuGroup id="menuGroup1" value="Group1"> - <rich:menuItem id="menuGroup1Item1" value="Active"/> - <rich:menuItem id="menuGroup1Item2" value="Active"/> - </rich:menuGroup> - <rich:menuItem id="menuItem3" value="Active2"/> - <rich:menuGroup id="menuGroup1Dsbld" value="Group1 dsbld." disabled="true" /> - </rich:dropDownMenu> -... -]]></programlisting--> - -<para> - The <emphasis><property>&quot;disabled&quot;</property></emphasis> attribute is used for disabling whole - <emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis> component. In this case it is - necessary to define <emphasis><property>&quot;disabled&quot;</property></emphasis> attribute as &quot;true&quot;. - An example is placed below. -</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu value="File" disabled="true"> - ... -</rich:dropDownMenu> -...]]></programlisting> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>label</entry> - <entry>Redefines the content set of label</entry> - </row> - <row> - <entry>labelDisabled</entry> - <entry>Redefines the content set of disabled label</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title> Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a label &lt;div&gt; element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a selected label</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - - <row> - <entry>controlBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>generalTextColor</entry> - - <entry>background-colorcolor</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a border</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - - <row> - <entry>additionalBackgroundColor</entry> - - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a background</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - - <entry>border-top-color</entry> - </row> - - <row> - <entry>additionalBackgroundColor</entry> - - <entry>border-left-color</entry> - </row> - - <row> - <entry>additionalBackgroundColor</entry> - - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dropDownMenu_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_cn4"> - <title>Classes names that define a label</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-label-text-decor</entry> - - <entry>Defines text style for a representation element</entry> - </row> - - <row> - <entry>rich-ddmenu-label</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a representation - element</entry> - </row> - - <row> - <entry>rich-ddmenu-label-select</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a selected - representation element</entry> - </row> - - <row> - <entry>rich-ddmenu-label-unselect</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of an unselected - representation element </entry> - </row> - - <row> - <entry>rich-ddmenu-label-disabled</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element of a disabled - representation element </entry> - </row> - </tbody> - </tgroup> - </table> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dropDownMenu_cn2.png"/> - </imageobject> - </mediaobject> - </figure> - - <table> - <title>Classes names that define a popup element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-menu-list-border</entry> - - <entry>Defines styles for borders</entry> - </row> - - <row> - <entry>rich-menu-list-bg</entry> - - <entry>Defines styles for a general background list</entry> - </row> - - <row> - <entry>rich-menu-list-strut</entry> - - <entry>Defines styles for a wrapper &lt;div&gt; element for a strut of a popup - list</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the table <link linkend="tab_cn4">above</link>) and define necessary properties in them. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-ddmenu-label-select{ - background-color: #fae6b0; - border-color: #e5973e; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dropDownMenu_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a label select background color and border color were changed.</para> - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:dropDownMenu&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:dropDownMenu&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style: italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;itemClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:dropDownMenu&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:dropDownMenu ... itemClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dropDownMenu_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for items was changed.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:dropDownMenu&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,23 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dropListener</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - - <section> - <title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:dropListener&gt;</property></emphasis> - represents an action listener method that is notified after a drop operation. - </para> - </section> - - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Allows to define some drop listeners for the components with "Drag and Drop" support</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,160 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>rich:dropListener</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - - <row> - <entry>listener-class</entry> - <entry>org.richfaces.event.DropListener</entry> - </row> - <row> - <entry>event-class</entry> - <entry>org.richfaces.event.DropEvent</entry> - </row> - - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DropListenerTag</entry> - </row> - - </tbody> - </tgroup> - </table> - - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following - syntax: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:dropListener type="demo.Bean"/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[package demo; - -public class ImplBean implements org.richfaces.event.DropListener{ - ... -} -]]></programlisting> - - <programlisting role="JAVA"><![CDATA[ -import demo.ImplBean; -... -ImplBean myListener = new ImplBean(); -... -]]></programlisting> - - </section> - - <section> - <title>Details of Usage</title> - - <para> - The - <emphasis role="bold"> - <property>&lt;rich:dropListener&gt;</property> - </emphasis> - is used as a nested tag with components like - <emphasis role="bold"> - <property>&lt;rich:dropSupport&gt;</property> - </emphasis> - , - <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> - and - <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> - . - </para> - <para> - Attribute - <emphasis> - <property>&quot;type&quot;</property> - </emphasis> - defines the fully qualified Java class name for the - listener. This class should implement - <ulink - url="&apidoc_framework;/org/richfaces/event/DropListener.html"> - <code>org.richfaces.event.DropListener</code> - </ulink> - interface. - . - </para> - - <para> - <emphasis role="bold"> - The typical variant of using: - </emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:panel style="width:100px;height:100px;"> - <f:facet name="header">Drop Zone</f:facet> - <rich:dropSupport acceptedTypes="text"> - <rich:dropListener type="demo.ListenerBean"/> - </rich:dropSupport> -</rich:panel> -... -]]></programlisting> - - <para> - <emphasis role="bold">Java bean source:</emphasis> - </para> - - <programlisting role="JAVA"><![CDATA[package demo; - -import org.richfaces.event.DropEvent; - -public class ListenerBean implements org.richfaces.event.DropListener{ -... - public void processDrop(DropEvent arg0){ - //Custom Developer Code - } -... -} -]]></programlisting> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para> - <emphasis role="bold"> - <property>&lt;rich:dropListener&gt;</property> - </emphasis> - has no skin parameters and custom - <property>style classes</property> - , as the component isn&apos;t visual. - </para> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,45 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dropSupport</keyword> - </keywordset> - </sectioninfo> -<section> -<title>Description</title> - <para>This component transforms a parent component into a target zone for - drag-and-drop operations. When a draggable element is moved and dropped onto - the area of the parent component, Ajax request processing for this event is - started.</para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:dropSupport&gt;</property></emphasis> component</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dropSupport_init.png" /> - </imageobject> - </mediaobject> - </figure> -</section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para> - Encodes all necessary JavaScript to perform drop actions - </para></listitem> - - <listitem><para> - Can be used within any component type that provides the required properties for drop operations - </para></listitem> - - <listitem><para> - Built-in Ajax processing - </para></listitem> - - <listitem><para> - Supports drag-and-drop between different forms - </para></listitem> - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropSupport.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,366 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:dropSupport</keyword> - - <keyword>HtmlDropSupport</keyword> - </keywordset> - </sectioninfo> - - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.DropSupport</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry> - org.richfaces.component.html.HtmlDropSupport - </entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.DropSupport</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.DropSupportRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.DropSupportTag</entry> - </row> - </tbody> - </tgroup> - </table> - - - <section> - <title>Creating the Component with a Page Tag</title> - - <para> - This simple example shows how to make a panel component a - potential drop target for drag-and-drop operations using - "text" elements as the dragged items. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panel> - <rich:dropSupport acceptedTypes="text"/> -</rich:panel> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDropSupport; -... -HtmlDropSupport myDragZone = new HtmlDropSupport(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para>The key attribute for <emphasis role="bold"><property>&lt;rich:dropSupport&gt;</property></emphasis> is <emphasis><property>"acceptedTypes"</property></emphasis>. - It defines, which types of dragable items (zones) could be accepted by the current drop zone. Check the example below: - </para> - <programlisting role="XML"><![CDATA[... -<rich:panel styleClass="dropTargetPanel"> - <f:facet name="header"> - <h:outputText value="PHP Frameworks" /> - </f:facet> - - <rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP" dropListener="#{eventBean.processDrop}" reRender="phptable, src"> - </rich:dropSupport> - ... -</rich:panel> -... -]]></programlisting> - <para>and here is what happens on the page:</para> - <figure> - <title>Drop zone accepts dragable item with "PHP" type only</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dropSupport1.png" /> - </imageobject> - </mediaobject> - </figure> - - <para>Using the <emphasis><property>"typeMapping"</property></emphasis> attribute. Previous example shows that a drop zone could accept a dragable item or not. - Special markers, which are placed at <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis>, inform user about drop zone’s possible behaviors: - "checkmark" appears if drop is accepted and "No" symbol if it is not. - Moreover, some extra information (e.g. text message) could be put into the Indicator to reinforce the signal about drop zone’s behavior or pass some other additional sense. - This reinforcement could be programmed and attributed to drop zone via <emphasis><property>"typeMapping"</property></emphasis> attribute using JSON syntax. - The type of dragged zone (dragType) should be passed as &quot;key&quot; and name of <emphasis role="bold"><property>&lt;rich:dndParam&gt;</property></emphasis> - that gives needed message to Indicator as &quot;value&quot;: - </para> - <programlisting role="XML"><![CDATA[... -<rich:panel styleClass="dropTargetPanel"> - <f:facet name="header"> - <h:outputText value="PHP Frameworks" /> - </f:facet> - - <rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP" dropListener="#{eventBean.processDrop}" reRender="phptable, src" - typeMapping="{PHP: text_for_accepting, DNET: text_for_rejecting}"> - <rich:dndParam name="text_for_accepting" value="Drop accepted!" /> - <rich:dndParam name="text_for_rejecting" value="Drop is not accepted!" /> - </rich:dropSupport> - ... -</rich:panel> -... -]]></programlisting> - <para>What happens on the page:</para> - <figure> - <title><emphasis><property>"typeMapping"</property></emphasis> helps to add some extra information to <emphasis role="bold"><property>&lt;rich:dragIndicator&gt;</property></emphasis> </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dropSupport1a.png" /> - </imageobject> - </mediaobject> - </figure> - - <para>In examples above dropping a dragable item triggers the use a parameter in the event processing; Ajax request is sent and dropListener defined for the component is called. - </para> - - <para> - Here is an example of moving records between tables. The - example describes all the pieces for drag-and-drop. (To get - extra information on these components, read the sections for - these components.) - </para> - - <para> - As draggable items, this table contains a list of such items - designated as being of type - <code>"text"</code> - : - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="caps"> - <f:facet name="caption">Capitals List</f:facet> - <h:column> - <a4j:outputPanel> - <rich:dragSupport dragIndicator=":form:ind" dragType="text"> - <a4j:actionparam value="#{caps.name}" name="name"/> - </rich:dragSupport> - <h:outputText value="#{caps.name}"/> - </a4j:outputPanel> - </h:column> -</rich:dataTable> -... -]]></programlisting> - - <para> - As a drop zone, this panel will accept draggable items of - type - <code>text</code> - and then rerender an element with the ID of - <code>box</code> - : - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:panel style="width:100px;height:100px;"> - <f:facet name="header">Drop Zone</f:facet> - <rich:dropSupport acceptedTypes="text" reRender="box" - dropListener="#{capitalsBean.addCapital2}"/> -</rich:panel> -... -]]></programlisting> - - <para> - As a part of the page that can be updated in a partial page - update, this table has an ID of - <code>box</code> - : - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals2}" var="cap2" id="box"> - <f:facet name="caption">Capitals chosen</f:facet> - <h:column> - <h:outputText value="#{cap2.name}"/> - </h:column> -</rich:dataTable> -...]]></programlisting> - - <para> - And finally, as a listener, this listener will implement the - dropped element: - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[... -public void addCapital2(DropEvent event) { - FacesContext context = FacesContext.getCurrentInstance(); - Capital cap = new Capital(); - cap.setName(context.getExternalContext().getRequestParameterMap().get("name").toString()); - capitals2.add(cap); -} -... -]]></programlisting> - - <para> - Here is the result after a few drops of items from the first - table: - </para> - - <figure> - <title>Results of drop actions</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/dropSupport2.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - In this example, items are dragged element-by-element from - the rendered list in the first table and dropped on a panel - in the middle. After each drop, a drop event is generated - and a common Ajax request is performed that renders results - in the third table. - </para> - - <para> - As with every Ajax action component, - <emphasis role="bold"> - <property>&lt;rich:dropSupport&gt;</property> - </emphasis> - has all the common attributes ( - <emphasis> - <property>"timeout"</property> - , - </emphasis> - <emphasis> - <property>"limitToList"</property> - , - </emphasis> - <emphasis> - <property>"reRender"</property> - , - </emphasis> - etc.) for Ajax request customization. - </para> - - <para> - Finally, the component has the following extra attributes - for event processing on the client: - </para> - - <itemizedlist> - <listitem> - <para><emphasis><property>&quot;ondragenter&quot;</property></emphasis></para> - </listitem> - - <listitem> - <para><emphasis><property>&quot;ondragexit&quot;</property></emphasis></para> - </listitem> - - <listitem> - <para><emphasis><property>&quot;ondrop&quot;</property></emphasis></para> - </listitem> - - <listitem> - <para><emphasis><property>&quot;ondropend&quot;</property></emphasis></para> - </listitem> - </itemizedlist> - - <para> - Developers can use their own custom JavaScript functions to - handle these events. - </para> - <para> - Information about the - <emphasis> - <property>&quot;process&quot;</property> - </emphasis> - attribute usage you can find in the - <link linkend="process"> &quot;Decide what to process&quot; </link> guide section - . - </para> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para> - <emphasis role="bold"> - <property>&lt;rich:dropSupport&gt;</property> - </emphasis> - has no skin parameters and custom - <emphasis> - <property>style classes</property> - </emphasis> - , as the component isn&apos;t visual. - </para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... - On the component Live Demo page - </ulink> - you can see the example of - <emphasis role="bold"> - <property>&lt;rich:dropSupport&gt;</property> - </emphasis> - usage and sources for the given example. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,30 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:dropZone</keyword> -</keywordset> -</sectioninfo> -<section> - <title>Description</title> - <para>The &quot;target zone&quot; for a drag operation. When a draggable element is moved and - dropped onto the area of this component, <property>dropZone</property> performs an Ajax request - processing this event.</para> - <figure> - <title>&lt;rich:dropZone&gt; with dragged element</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/dropZone.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para></para></listitem> - <listitem><para></para></listitem> - <listitem><para></para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/dropZone.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,139 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>target zone</keyword> -<keyword>rich:dropZone</keyword> -<keyword>HtmlDropZone</keyword> -</keywordset> -</sectioninfo> - <section> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.DropZone</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlDropZone</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DropZone</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.DropZoneRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.DropZoneTag</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:toolBar> - <rich:draggable dragType="DropIcons"> - <!-- Draggable content that can be dropped to next drop zone--> - </rich:draggable> - ... - <rich:dropZone acceptedTypes="[DropIcons]"> - <!--Some content to represent drop zone--> - </rich:dropZone> - ... - </rich:toolBar> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[... -org.richfaces.component.html.HtmlDropZone myDragZone = new org.richfaces.component.html.HtmlDropZone(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it&apos;s shown in the example, a key attribute is - <emphasis ><property>&quot;acceptedTypes&quot;</property></emphasis>, where some - Drag-zones names of drop elements responsible for drop-zone processing are defined, i.e. in the - example of component creation on a page, drop zone calls the corresponding drop event processing, - only if a drop comes from the above mentioned drag zone of the corresponding type. All zones of - another type are ignored.</para> - <para>Another important attribute for - <emphasis role="bold"><property>&lt;rich:dropZone&gt;</property></emphasis> is - <emphasis ><property>&quot;typeMapping&quot;</property></emphasis>, where - corresponding order of <emphasis role="bold"><property>&lt;rich:dndParam&gt;</property></emphasis> - wrapping is defined for a drop from each drag-zone type</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... - <rich:dropZone acceptedTypes="[iconsDragged, textDragged]" - typeMapping="{iconsDragged: DropIcon}"> - <rich:dndParam name="DropIcon"> - <h:graphicImage value="/images/drop-icon.png" /> - </rich:dndParam> - ... - </rich:dropZone> -... -]]></programlisting> - <para>Thus, here is a drag zone indicator of iconsDragged type that obtains DropIcon parameter - the same one as richParam gets. </para> - <para>As any Ajax action, <property>dropZone</property> has all custom attributes of Ajax requests - customization (<emphasis ><property>&quot;timeout&quot;</property></emphasis>, - <emphasis ><property>&quot;limitToList&quot;</property></emphasis>, - <emphasis ><property>&quot;reRender&quot;</property></emphasis>, etc). To read more - about the attributes, follow - <ulink url="https://ajax4jsf.dev.java.net/nonav/documentation/ajax-document... - Developer Guide</ulink> link.</para> - <para>For <property>dropZone</property> layout could be defined with a - <emphasis ><property>&quot;layout&quot;</property></emphasis> attribute with inline - (default) and block values.</para> - <para>As any action component - <emphasis role="bold"><property>&lt;rich:dropZone&gt;</property></emphasis> has server-side - action Listener defined with - <emphasis ><property>&quot;dropListener&quot;</property></emphasis> attribute as - well as a definition of attributes for all required events processing on the client:</para> - <itemizedlist> - <listitem><para> - ondragenter - </para></listitem> - <listitem><para> - ondragexit - </para></listitem> - <listitem><para> - oncomplete - </para></listitem> - </itemizedlist> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>As it has been mention above, the component defines a components wrapper for drag areas, - i.e. it doesn&apos;t have its own representation. Therefore, for a wrapper - <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element customization it&apos;s - possible to use a component attribute <emphasis ><property>&quot;styleClass&quot;</property></emphasis> or - redefine a rich-dropzone class in your own CSS files that is added to all - <property>dropZone</property> components style on default.</para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,42 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section role="updated"> - <sectioninfo> - <keywordset> - <keyword>editor</keyword> - <keyword>rich:editor</keyword> - </keywordset> - <releaseinfo>3.3.0</releaseinfo> -</sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:editor&gt;</property> - </emphasis> component is used for creating a WYSIWYG editor on a page. - </para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:editor&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editor1.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> -<section> - <title>Key Features</title> - - <itemizedlist> - - <listitem><para>Seam text support</para></listitem> - <listitem><para>Manageable global configurations</para></listitem> - <listitem><para>Possibility to use custom plug-ins</para></listitem> - <listitem><para>Support of all TinyMCE&apos;s parameters through <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis></para></listitem> - - </itemizedlist> - -</section> -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/editor.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,1037 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:editor</keyword> - <keyword>editor</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.component.editor</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.Htmleditor</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.editor</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.editorRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.editorTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:editor /> -...]]></programlisting> - </section> - - - <section> - - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.Htmleditor; -... -Htmleditor myeditor = new Htmleditor(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> is fully based on TinyMCE web based Javascript HTML WYSIWYG editor control and supports all of the features it has. - The <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> adapts the TinyMCE editor for JSF environment and adds some functional capabilities. - </para> - <para> - The easiest way to place the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> on a page is as follows: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> -<programlisting role="XML"><![CDATA[<rich:editor value="#{bean.editorValue}" />]]></programlisting> - <para> - Implementation of <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> provides three ways to define the properties of the component: - </para> - - <orderedlist> - <listitem><para>Using attributes</para></listitem> - <listitem><para>Using using <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> JSF tag</para></listitem> - <listitem><para>Using configuration files that allow you to set up multiple configurations for all editors in your application and change them in the runtime</para></listitem> - </orderedlist> - - <para>The three methods are described in details in the chapter.</para> - <para> - The most important properties are implemented as attributes and you can define them as any other attribute. - The attributes of the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> component match the corresponding properties of TinyMCE editor. - </para> - <para> - For example, a theme for the editor can be defined using the <emphasis><property>&quot;theme&quot;</property></emphasis> attribute like this: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[ -<rich:editor value="#{bean.editorValue}" theme="advanced" /> -]]></programlisting> - <para>Setting a different skin for the editor can be done using the <emphasis><property>&quot;skin&quot;</property></emphasis> attribute.</para> - <para> - Another useful property that is implemented at attribute level is <emphasis><property>&quot;viewMode&quot;</property></emphasis>. - The attribute switches between &quot;visual&quot; and &quot;source&quot; modes, toggling between modes is performed setting the attribute to &quot;visual&quot; and &quot;source&quot; respectively. - Implementation of <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> also implies that you can change the modes dynamically setting the value of the <emphasis><property>&quot;viewMode&quot;</property></emphasis> attribute using EL-expression. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:editor value="#{editor.submit}" theme="advanced" viewMode="#{editor.viewMode}" > - ... - <h:selectOneRadio value="#{editor.viewMode}" onchange="submit();"> - <f:selectItem itemValue="visual" itemLabel="visual" /> - <f:selectItem itemValue="source" itemLabel="source" /> - </h:selectOneRadio> - ... -</rich:editor> -...]]></programlisting> - <para> - Most configuration options that TinyMCE provides can be applied using <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> JSF tag. - The syntax is quite simple: the <emphasis><property>&quot;name&quot;</property></emphasis> attribute should contain the option, - the <emphasis><property>&quot;value&quot;</property></emphasis> attribute assigns some value to the option. - </para> - <para> - For example, this code adds some buttons to the editor and positions the toolbar. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> -<programlisting role="XML"><![CDATA[... -<rich:editor value="#{bean.editorValue}" theme="advanced" plugins="save,paste" > - <f:param name="theme_advanced_buttons1" value="bold,italic,underline, cut,copy,paste,pasteword"/> - <f:param name="theme_advanced_toolbar_location" value="top"/> - <f:param name="theme_advanced_toolbar_align" value="left"/> -</rich:editor> -...]]></programlisting> - <para>This is what you get as a result:</para> - <figure> - <title> Setting configuration options with &lt;f:param&gt; - - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editor2.png"/> - </imageobject> - </mediaobject> - </figure> - - - <para>The third way to configure the <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> is - to use configuration file (.properties)</para> - - <para> - This method eases your life if you need to configure multiple instances - of the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis>: you configure the editor once - and in one spot and the configuration properties can be applied to any - <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> in your application. - </para> - <para>To implement this type of configuration you need to take a few steps:</para> - <itemizedlist> - <listitem> - <para> - Create a configuration file (.properties) in the classpath folder and add some properties to it. - Use standard syntax for the .properties files: <code>parameter=value</code>. - Here is an example of configuration file: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[theme="advanced" -plugins="save,paste" -theme_advanced_buttons1="bold,italic,underline, cut,copy,paste,pasteword" -theme_advanced_toolbar_location="top" -theme_advanced_toolbar_align="left" -]]></programlisting> - - </listitem> - <listitem> - <para> - The properties stored in configuration file are passed to the - <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> via - <emphasis><property>&quot;configuration&quot;</property></emphasis> attribute which takes the name of the configuration file - as a value (with out .properties extension). - </para> - <para> - For example, if you named the configuration file &quot;editorconfig&quot;, you would address it as follows: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:editor value="#{bean.editorValue}" configuration="editorconfig"/> -...]]></programlisting> - - </listitem> - <listitem> - <para> - Alternately, you can use a EL-expression to define a configuration file. - This way you can dynamically change the sets of configuration properties. - </para> - - <para> - For example, you have two configuration files &quot;configurationAdvanced&quot; and &quot;configurationSimple&quot; and you want them to be - applied under some condition. - </para> - <para> - To do this you need to bind <emphasis><property>&quot;configuration&quot;</property></emphasis> - attribute to the appropriate bean property like this. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> -<programlisting role="XML"><![CDATA[... -<rich:editor value="#{bean.editorValue}" configuration="#{editor.configuration}" /> -...]]></programlisting> - <para>Your Java file should look like this.</para> - - <programlisting role="JAVA"><![CDATA[... -String configuration; - -if(some condition){//defines some condition - configuration = "configurationAdvanced"; //the name on the file with advanced properties -} -else{ - configuration= "configurationSimple"; //the name on the file with simplified properties -} -...]]></programlisting> - - - </listitem> - - </itemizedlist> - - - <para> - You also might want to add some custom plug-ins to your editor. - You can read about how to create a plugin in <ulink url="http://wiki.moxiecode.com/index.php/TinyMCE:Creating_Plugin&quo... Wiki article</ulink>. - </para> - - <para> - Adding a custom plugin also requires a few steps to take. Though, the procedure is very similar to adding a configuration file. - - </para> - - <para>This is what you need to add a plugin:</para> - <itemizedlist> - <listitem> - <para>Create a .properties file and put the name of the plug-in and a path to it into the file. - The file can contain multiple plug-in declarations. Your .properties file should be like this. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -pluginName=/mytinymceplugins/plugin1Name/editor_plugin.js -...]]></programlisting> - - </listitem> - <listitem> - <para> - Use the <emphasis><property>&quot;customPlugins&quot;</property></emphasis> attribute to specify the .properties file with a plugin name and a path to it. - </para> - <para> - If your .properties file is named "myPlugins", then your will have this code on the page. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:editor theme="advanced" customPlugins="myPlugins" plugins="pluginName" /> -...]]></programlisting> - - </listitem> - </itemizedlist> - <note> - <title>Note:</title> - <para> -Some plug-ins which available for download might have some dependencies on TinyMCE scripts. -For example, dialog pop-ups require tiny_mce_popup.js script file. -Assuming that you will not plug custom plugins to the RF jar with editor component -(standard TinyMCE plugins creation implies that plugins are put into TinyMCE&apos;s corresponding directory) - you should manually add required TinyMCE scripts to some project folder and correct the js includes. - </para> - </note> - <para> - The implementation of the <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> component has two methods for handling - events. - </para> - <para>The attributes take some function name as a value with is triggered on the appropriate event. You need to use standard JavaScript function calling syntax. </para> - - <itemizedlist> - <listitem> - <para>Using attributes (<emphasis><property>&quot;onchange&quot;</property></emphasis>, - <emphasis><property>&quot;oninit&quot;</property></emphasis>, - <emphasis><property>&quot;onsave&quot;</property></emphasis>, - <emphasis><property>&quot;onsetup&quot;</property></emphasis>) - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:editor value="#{bean.editorValue}" onchange="myCustomOnChangeHandler()" /> -...]]></programlisting> - </listitem> - <listitem> - <para> - Using <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> as a child element defining the <emphasis><property>&quot;name&quot;</property></emphasis> attribute - with one of the TinyMCE&apos;s callbacks and the - <emphasis><property>&quot;value&quot;</property></emphasis> attribute takes the function name you want to be called - on the corresponding event as the value. Note, that the syntax in this case is a bit different: parentheses are not required. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:editor value="#{bean.editorValue}"> - <f:param name="onchange" value="myCustomOnChangeHandler" /> -</rich:editor> -...]]></programlisting> - </listitem> - </itemizedlist> - - <para>The <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> - component has a build-in converter that renders HTML code generated by the editor - to Seam text (you can read more on Seam in <ulink url="http://docs.jboss.org/seam/1.1.5.GA/reference/en/html/text.html... guide</ulink>.), it also interprets Seam text - passed to the <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> and renders it to HTML. - The converter can be enable with the <emphasis><property>&quot;useSeamText&quot;</property></emphasis> attribute.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <para>This HTML code generated by editor</para> - <programlisting role="XML"><![CDATA[... -<p><a href="http://mysite.com">Lorem ipsum</a> <i>dolor sit</i> amet, ea <u>commodo</u> consequat.</p> -...]]></programlisting> - <para>will be parsed to the following Seam text:</para> - - <programlisting role="XML"><![CDATA[... -[Lorem ipsum=>http://mysite.com] *dolor sit* amet, ea _commodo_ consequat. -...]]></programlisting> - <para>Accordingly, if the Seam text is passed to the component it will be parsed to HTML code.</para> - - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:editor&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem> - <para>Redefine the corresponding skin - parameters</para> - </listitem> - <listitem> - <para> Add to your style sheets style classes used - by a <emphasis role="bold"> - <property>&lt;rich:editor&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </para> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for containers</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for external controls</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Skin parameters redefinition for layout</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-left-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for buttons</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for list box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for color split button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for hovered color split button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for menu</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for menu item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for progress and resize states</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalBackgroundColor</entry> - <entry>background</entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Skin parameters redefinition for link in dialog box</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>hoverLinkColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for link in dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>hoverLinkColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for fieldset in dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for fieldset legend in dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalLinkColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for input elements in dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>warningColor</entry> - <entry>color</entry> - </row> - <row> - <entry>warningColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>controlBackgroundColor</entry> - <entry>background</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for panel wrapper in dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for headers in dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalLinkColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for links in tabs in dialog box</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for main text area</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section id="EditorDefinitionofCustomStyleSelectors"> - <title>Definition of Custom Style Selectors</title> - - <para>On the screenshot there are CSS selectors that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editor3.png"/> - </imageobject> - </mediaobject> - </figure> - - <table> - <title>CSS selectors for the layout of the editor</title> - <tgroup cols="4"> - <thead> - <row> - <entry>Class name (selector)</entry> - <entry>Description</entry> - <entry>Skin Parameter</entry> - <entry>CSS property</entry> - </row> - </thead> - <tbody> - <row> - <entry>.richfacesSkin .mceButton</entry> - <entry>Defines styles for the buttons</entry> - <entry>n/a</entry> - <entry>background-image</entry> - </row> - - <row> - <entry>.richfacesSkin .mceButtonDisabled .mceIcon </entry> - <entry>Defines styles for the icons</entry> - <entry>n/a</entry> - <entry>opacity</entry> - </row> - - <row> - <entry>.richfacesSkin .mceIframeContainer</entry> - <entry>Defines styles for the container</entry> - <entry>panelBorderColor</entry> - <entry>border-top-color, border-bottom-color</entry> - </row> - - <row> - <entry morerows="2">.richfacesSkin .mceListBox .mceText</entry> - <entry morerows="2">Defines styles for the list box</entry> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBackgroundColor</entry> - <entry>background</entry> - </row> - - <row> - <entry>.richfacesSkin .mceExternalToolbar</entry> - <entry>Defines styles for the toolbar</entry> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - <row> - <entry>.richfacesSkin .mceMenu</entry> - <entry>Defines styles for the menus</entry> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - - <row> - <entry>.richfacesSkin .mceMenu .mceMenuItemActive</entry> - <entry>Defines styles for the active menu items</entry> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>.richfacesSkin .mceSeparator</entry> - <entry>Defines styles for the buttons separator</entry> - <entry>n/a</entry> - <entry>background-image</entry> - </row> - - <row> - <entry>.richfacesSkin table.mceLayout</entry> - <entry>Defines styles for the table layout</entry> - <entry>panelBorderColor</entry> - <entry>border-left-color, border-right-color</entry> - </row> - - <row> - <entry>.richfacesSkin table.mceToolbar</entry> - <entry>Defines styles for the rows of icons within toolbar</entry> - <entry>n/a</entry> - <entry>padding</entry> - </row> - </tbody> - </tgroup> - </table> - - - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:editor&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="EditorDefinitionofCustomStyleSelectors">above</link>) and define necessary properties in them. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.richfacesSkin .mceButton { - border: 1px solid red; -} -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Redefinition styles with predefined selectors</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/editor4.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>It&apos;s also possible to change styles of a particular - <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding - <emphasis role="bold"><property>&lt;rich:editor&gt;</property></emphasis> <emphasis><property>&quot;styleClass&quot;</property></emphasis> attributes. An example is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - margin-top: 20px; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:editor&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:editor value="#{bean.text}" styleClass="myClass"/> -]]></programlisting> - - - - </section> - - <section> - <title>Relevant Resources Links</title> - - <para>The <emphasis role="bold"> <property>&lt;rich:editor&gt;</property></emphasis> is based on TinyMCE editor and supports almost all its features and properties some of which are not described here since you can find more detailed documentation on them on the official <ulink url="http://wiki.moxiecode.com/index.php/TinyMCE:Index">web site.</ulink></para> - - - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/editor.jsf?... - >On RichFaces LiveDemo page </ulink> you can see an example of <emphasis - role="bold"> - <property>&lt;rich:editor&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,23 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:effect</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> utilizes a set of effects provided by the scriptaculous JavaScript library. - It allows to attach effects to JSF components and html tags. - </para> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>No developers JavaScript writing needed to use it on pages</para></listitem> - <listitem><para>Presents scriptaculous JavaScript library functionality</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/effect.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,252 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>effect</keyword> - <keyword>rich:effect</keyword> - <keyword>HtmlEffect</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Effect</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlEffect</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Effect</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.EffectRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.EffectTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> on a page, use the - following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:effect for="componentId" type="Appear"/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlRichEffect; -... -HtmlRichEffect myEffect = new HtmlRichEffect(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> It is possible to use <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> in two modes: <itemizedlist> - <listitem><para>attached to the JSF components or html tags and triggered by a particular event. - Wiring effect with JSF components might occur on the server or client. Wiring with html - tag is possible only on the client side </para></listitem> - <listitem><para>invoking from the JavaScript code by an effect name. During the rendering, - <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> generates the JavaScript function with defined name. - When the function is called, the effect is applied </para></listitem> - </itemizedlist> - </para> - <para> - <emphasis role="bold">Those a the typical variants of using:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<!-- attaching by event --> -<rich:panel> - <rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" /> - <!--panel content--> -</rich:panel> -... - -<!-- invoking from JavaScript --> -<div id="contentDiv"> - <!--div content--> -</div> - -<input type="button" onclick="hideDiv({duration:0.7})" value="Hide" /> -<input type="button" onclick="showDiv()" value="Show" /> - -<rich:effect name="hideDiv" for="contentDiv" type="Fade" /> -<rich:effect name="showDiv" for="contentDiv" type="Appear" /> - -<!-- attaching to window on load and applying on particular page element --> -<rich:effect for="window" event="onload" type="Appear" params="targetId:'contentDiv',duration:0.8,from:0.3,to:1.0" /> -... -]]></programlisting> - - <figure> - <title>Initial</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/effect_init.png"/> - </imageobject> - </mediaobject> - </figure> - - <figure> - <title>When the mouse cursor is over</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/effect_2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - <emphasis> - <property>&quot;name&quot;</property> - </emphasis> attribute defines a name of the JavaScript function that is be generated on a page - when the component is rendered. You can invoke this function to activate the effect. The - function accesses one parameter. It is a set of effect options in JSON format. </para> - - <para> - <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute defines the type of an effect. For example, "Fade", "Blind", "Opacity". - Have a look at <ulink url="http://script.aculo.us">scriptaculous documentation</ulink> for set - of available effect. </para> - - <para> - <emphasis> - <property>&quot;for&quot;</property> - </emphasis> attribute defines the id of the component or html tag, the effect is attached - to. RichFaces converts the <emphasis> - <property>&quot;for&quot;</property> - </emphasis> attribute value to the client id of the component if such component is found. If - not, the value is left as is for possible wiring with on the DOM element&apos;s id on the client - side. By default, the target of the effect is the same element that effect pointed to. - However, the target element is might be overridden with <emphasis> - <property>&quot;targetId&quot;</property> - </emphasis> option passed with <emphasis> - <property>&quot;params&quot;</property> - </emphasis> attribute of with function paramenter. </para> - - <para> - <emphasis> - <property>&quot;params&quot;</property> - </emphasis> attribute allows to define the set of options possible for particurar effect. For - example, 'duration', 'delay', 'from', 'to'. Additionally to the options used by the effect - itself, there are two option that might override the <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> - attribute. Those are: <itemizedlist> - <listitem><para><emphasis> - <property>&quot;targetId&quot;</property> - </emphasis> allows to re-define the target of effect. The option is override the value of <emphasis> - <property>&quot;for&quot;</property> - </emphasis> attribute.</para></listitem> - <listitem><para><emphasis> - <property>&quot;type&quot;</property> - </emphasis> defines the effect type. The option is override the value of <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute.</para></listitem> - </itemizedlist> - </para> - - <para> You can use a set of effects directly without defining the <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> component on a page if it&apos;s convenient for you. For that, load the - scriptaculous library to the page with the following code: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<a4j:loadScript src="resource://scriptaculous/effect.js" /> -... -]]></programlisting> - <para> If you do use the <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis>component, there is no need to include this library because it&apos;s already here. </para> - - <para>For more information look at <ulink - url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... - Users Forum</ulink>.</para> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para><emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component isn&apos;t visual.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://wiki.jboss.org/wiki/CreateABannerUsingEffectsAndPoll&quo... - Here - </ulink> - you can get additional information how to create an image banner - using - <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> - and - <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> - components and figure out how to create an HTML banner from - <ulink - url="http://wiki.jboss.org/auth/wiki/CreateAHTMLBannerUsingEffectsAn... - &quot;Creating HTML Banner Using Effects And Poll RichFaces Wiki&quot; article - </ulink> - . - </para> - <para>In the - <ulink url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/SlideShow&quo... Cookbook article</ulink> - you can find information how to make a Slide Show with help of the - <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> - and <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> components. - </para> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis> usage. </para> - <para>How to save <emphasis role="bold"> - <property>&lt;rich:effect&gt;</property> - </emphasis>status see on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,66 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> - -<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.3CR3//EN" "http://www.oasis-open.org/docbook/xml/4.3CR3/docbookx.dtd" -[ -<!ENTITY extDataTable "rich:extendedDataTable"> -] -> - -<section> - <sectioninfo> - <keywordset> - <keyword>&extDataTable;</keyword> - </keywordset> - <releaseinfo>3.2.2</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The component for tables extending standard component <emphasis - role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis>.</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/extendedDataTable_init.png" - width="75%"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>Possibility to scroll data</para> - </listitem> - <listitem> - <para>Possibility to add an attribute to set the kind of - selection (none, single line or multiple - lines)</para> - </listitem> - <listitem> - <para>Possibility to change the sequence of the displayed - columns by dragging the column-header to another - position</para> - </listitem> - <listitem> - <para>Possibility to show or hide columns by selecting or - deselecting them in a context menu</para> - </listitem> - <listitem> - <para>Possibility to save the current settings (visible - columns, column width, sequence of the columns) to - be reused the next time the page will be - shown</para> - </listitem> - <listitem> - <para>Possibility to combine rows to groups</para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/extendedDataTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,633 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.3CR3//EN" "http://www.oasis-open.org/docbook/xml/4.3CR3/docbookx.dtd" -[ -<!ENTITY extDataTable "rich:extendedDataTable"> -] -> - -<section role="new"> - <sectioninfo> - <keywordset> - <keyword>table</keyword> - <keyword>&extDataTable;</keyword> - <keyword>HtmlDataTable</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ExtendedDataTable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlExtendedDataTable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ExtendedDataTable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ExtendedDataTableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ExtendedDataTableTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:extendedDataTable value="#{extendedDT.dataModel}" var="edt"> - <rich:column> - ... - </rich:column> -</rich:extendedDataTable> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically from Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlExtendedDataTable; -... -HtmlExtendedDataTable myTable = new HtmlExtendedDataTable(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component is similar to the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis>. The data in component is scrollable. You can also set the - type of selection (<emphasis> - <property>&quot;none&quot;,</property> - </emphasis> - <emphasis> - <property>&quot;single&quot;</property> - </emphasis> or <emphasis> - <property>&quot;multi&quot;</property> - </emphasis> lines). Selection of multiple lines is possible using - Shift and Ctrl keys.</para> - - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:extendedDataTable id="edt" value="#{extendedDT.dataModel}" var="edt" width="500px" height="500px" selectedClass="dataTableSelectedRow" sortMode="single" selectionMode="multi" selection="#{extendedDT.selection}" rowKeyVar="rkvar" tableState="#{extendedDT.tableState}"> - <rich:column id="id" headerClass="dataTableHeader" width="50" label="Id" sortable="true" sortBy="#{edt.id}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon"> - <f:facet name="header"> - <h:outputText value="Id" /> - </f:facet> - <h:outputText value="#{edt.id}" /> - </rich:column> - <rich:column id="name" width="300" headerClass="dataTableHeader" label="Name" sortable="true" sortBy="#{edt.name}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon" filterBy="#{edt.name}" filterEvent="onkeyup" visible="false"> - <f:facet name="header"> - <h:outputText value="Name" /> - </f:facet> - <h:outputText value="#{edt.name}" /> - </rich:column> - <rich:column id="date" width="100" headerClass="dataTableHeader" label="Date" sortable="true" comparator="#{extendedDT.dateComparator}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon"> - <f:facet name="header"> - <h:outputText value="Date" /> - </f:facet> - <h:outputText value="#{edt.date}"><f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" /> - </h:outputText> - </rich:column> - <rich:column id="group" width="50" headerClass="dataTableHeader" label="Group" sortable="true" sortBy="#{edt.group}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon"> - <f:facet name="header"> - <h:outputText value="Group" /> - </f:facet> - <h:outputText value="#{edt.group}" /> - </rich:column> -</rich:extendedDataTable> -...]]></programlisting> - - <figure> - <title><emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component with selected multiple lines</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/extendedDataTable_init2.png" - width="75%"/> - </imageobject> - </mediaobject> - </figure> - <para>Information about sorting and filtering can be found in <link linkend="sort" - >RichFaces Developer Guide section on sorting</link>. - </para> - <para> - For external filtering - <emphasis role="bold"><property>&lt;&extDataTable;&gt;</property></emphasis> - component supports <emphasis><property>&quot;filter&quot;</property></emphasis> facet - for <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> component. - In this facet you can define your own controls for filtering which will be positioned like built-in filter controls. - Rest of the filter scenario is the same as described <link linkend="filter">RichFaces Developer Guide section on filtering</link>. - </para> - - <para> In the example <emphasis> - <property>&quot;selection&quot;</property> - </emphasis> attribute contains object with selected rows. </para> - - <note> - <title>Note:</title> - <para> Attribute<emphasis> - <property>&quot;height&quot;</property> - </emphasis>is mandatory. The default value is <emphasis> - <property>&quot;500px&quot;</property> - </emphasis>. </para> - </note> - - <para> Menu on the right side of the column header is used to perform action: - sorting, grouping, hiding columns. </para> - - <para>This is an example:</para> - - <figure> - <title>Column menu</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/extendedDataTable_init3.png" - width="50%"/> - </imageobject> - </mediaobject> - </figure> - - <para> After selecting a "Group by this column" option, you can see the data - grouped. You can collapse and expand groups by clicking on a group - header. </para> - - <para>This is an example:</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component with grouped data</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/extendedDataTable_init4.png" - width="75%"/> - </imageobject> - </mediaobject> - </figure> - - <para> The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute in <emphasis role="bold"> - <property>&lt;rich:column&gt;</property> - </emphasis> sets the name of the column, which is used when dragging - columns (in drag window) and in context menu, in "Columns" submenu. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:column id="name" label="#{msg['name']}" -...]]></programlisting> - - <figure> - <title><emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component with Drag&amp;Drop column 'Name'</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/extendedDataTable_init5.png" - width="75%"/> - </imageobject> - </mediaobject> - </figure> - - <para> In the component <emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> columns can hidden: </para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component with hidden column 'Id' and 'Group'</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/extendedDataTable_init6.png" - width="75%"/> - </imageobject> - </mediaobject> - </figure> - - <!-- <para> - For each column can be set the filter. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:column id="name" - filterBy="#{entity.name}" filterEvent="onkeyup"> -... -]]></programlisting> - - <figure> - <title><emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component with filtered column 'Name'</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/extendedDataTable_filtered.png" width="75%"/> - </imageobject> - </mediaobject> - </figure> - --> - <para><emphasis> - <property>&quot;tableState&quot;</property> - </emphasis> attribute can be used to bind state of the table (column - width, column position, visible, sequence, grouping...) to a - backing-bean string property, for a later used. This state can be for - example saved to a database, and it is different form standard JSF - state saving mechanisms.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:extendedDataTable tableState="#{extendedDT.tableState}"> -... -]]></programlisting> - - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Redefines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Redefines the footer content</entry> - </row> - <row> - <entry>caption</entry> - <entry>Redefines the caption content</entry> - </row> - </tbody> - </tgroup> - - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section id="ExtSPR"> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a table</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a footer</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableFooterBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a column header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a column footer</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableSubfooterBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for cells</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section id="ExtDofCCS"> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component - elements.</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> class names</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/extendedDataTable_cn.png" - width="100%"/> - </imageobject> - </mediaobject> - </figure> - - <table id="ExtdTC"> - <title>Classes names that define a whole component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-extdt</entry> - <entry>Defines styles for all - table</entry> - </row> - <row> - <entry>rich-extdt-caption</entry> - <entry>Defines styles for a - &quot;caption&quot; - facet element</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define header and footer elements</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-extdt-header</entry> - <entry>Defines styles for a table header - row</entry> - </row> - - <row> - <entry>rich-extdt-header-continue</entry> - <entry>Defines styles for all header - lines after the first</entry> - </row> - <row> - <entry>rich-extdt-subheader</entry> - <entry>Defines styles for a column - header</entry> - </row> - - <row> - <entry>rich-extdt-footer</entry> - <entry>Defines styles for a footer - row</entry> - </row> - - <row> - <entry>rich-extdt-footer-continue</entry> - <entry>Defines styles for all footer - lines after the first</entry> - </row> - <row> - <entry>rich-extdt-subfooter</entry> - <entry>Defines styles for a column - footer</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define rows and cells of a table</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-extdt-headercell</entry> - <entry>Defines styles for a header - cell</entry> - </row> - - <row> - <entry>rich-extdt-subheadercell</entry> - <entry>Defines styles for a column - header cell</entry> - </row> - <row> - <entry>rich-extdt-cell</entry> - <entry>Defines styles for a table - cell</entry> - </row> - <row> - <entry>rich-extdt-row</entry> - <entry>Defines styles for a table - row</entry> - </row> - <row> - <entry>rich-extdt-firstrow</entry> - <entry>Defines styles for a table start - row</entry> - </row> - - <row> - <entry>rich-extdt-footercell</entry> - <entry>Defines styles for a footer - cell</entry> - </row> - - <row> - <entry>rich-extdt-subfootercell</entry> - <entry>Defines styles for a column - footer cell</entry> - </row> - - <row> - <entry>rich-extdt-group-cell</entry> - <entry>Defines styles for a grouping row cell</entry> - </row> - </tbody> - </tgroup> - </table> - - <para> An example of use the styles for component <emphasis role="bold"> - <property>&lt;&extDataTable;&gt;</property> - </emphasis> is similar to <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - </para> - - </section> - -<section> - <title>Relevant resources links</title> - <para> - Some additional information about usage of component can be found - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDat... its LiveDemo page</ulink>.</para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,44 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section role="updated"> - <sectioninfo> - <keywordset> - <keyword>fileUpload</keyword> - <keyword>rich:fileUpload</keyword> - </keywordset> - <releaseinfo>3.2.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component designed to perform Ajax-ed files upload to server. - </para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> -<section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>ProgressBar shows the status of downloads</para></listitem> - <listitem><para>Restriction on File type, file size and number of files to be uploaded</para></listitem> - <listitem><para>Multiple files upload support</para></listitem> - <listitem><para>Embedded Flash module</para></listitem> - <listitem><para>Possibility to cancel the request</para></listitem> - <listitem><para>One request for every upload</para></listitem> - <listitem><para>Automatic uploads</para></listitem> - <listitem><para>Supports standard JSF internationalization</para></listitem> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Disablement support</para></listitem> - </itemizedlist> -</section> -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/fileUpload.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,1393 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:fileUpload</keyword> - <keyword>fileUpload</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.component.FileUpload</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlFileUpload</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.FileUpload</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.FileUploadRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.FileUploadTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload /> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlFileUpload; -... -HtmlFileUpload myFileUpload = new HtmlFileUpload(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component consists of two parts:<itemizedlist> - <listitem> - <para> - <property>List of files</property> which contains the list of currently - chosen files to upload with possibility to manage every file </para> - </listitem> - <listitem> - <para> - <property>Component controls</property> - the bar with controls for managing - the whole component </para> - </listitem> - </itemizedlist> - </para> - - - <para> There are two places where the uploaded files are stored: </para> - <itemizedlist> - <listitem> - <para> In the temporary folder (depends on OS) if the value of the - <code>createTempFile</code> parameter in <property>Ajax4jsf - Filter</property> (in web.xml) section is &quot;true&quot; (by Default) </para> - <programlisting role="XML"><![CDATA[... -<init-param> - <param-name>createTempFiles</param-name> - <param-value>true</param-value> -</init-param> -...]]></programlisting> - </listitem> - <listitem> - <para> In the RAM if the value of the <code>createTempFile</code> parameter in - <property>Ajax4jsf Filter</property> section is &quot;false&quot;. - This is a better way for storing small-sized files. </para> - </listitem> - </itemizedlist> - - <para> The <emphasis> - <property>&quot;uploadData&quot;</property> - </emphasis> attribute defines the collection of files uploaded. See the example below. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload uploadData="#{bean.data}"/> -...]]></programlisting> - - <para>The <emphasis> - <property>&quot;fileUploadedListener&quot;</property> - </emphasis> is called at server side after every file uploaded and used for the saving - files from temporary folder or RAM. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}"/> - ...]]></programlisting> - <para> The following methods for processing the uploaded files are available: </para> - <itemizedlist> - <listitem> - <para> - <code>isMultiUpload()</code>. It returns &quot;true&quot; if several - files have been uploaded </para> - </listitem> - <listitem> - <para> - <code>getUploadItems()</code>. It returns the list of the uploaded files. If one - file was uploaded, the <code>getUploadItems()</code> method will return the list - consisting of one file </para> - </listitem> - <listitem> - <para> - <code>getUploadItem()</code>. It returns the whole list in case of uploading one - file only. If several files were uploaded, the <code>getUploadItem()</code> - method will return the first element of the uploaded files list. </para> - </listitem> - </itemizedlist> - <para> Automatically files uploading could be performed by means of the <emphasis> - <property> &quot;immediateUpload&quot;</property> - </emphasis> attribute. If the value of this attribute is &quot;true&quot; files - are uploaded automatically once they have been added into the list. All next files in - the list are uploaded automatically one by one. If you cancel uploading process next - files aren&apos;t started to upload till you press the &quot;Upload&quot; - button or clear the list. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}" immediateUpload="true"/> - ...]]></programlisting> - - <para> The <emphasis> - <property> &quot;autoclear&quot;</property> - </emphasis> attribute is used to remove automatically files from the list after upload - completed. See the simple example below. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload uploadData="#{bean.data}" autoclear="true"/> -...]]></programlisting> - <para> Each file in list waiting for upload has link &quot;Cancel&quot; opposite its name. - Clicking this link invokes JS API <code>remove()</code> function, which gets <code>$(&apos;id&apos;).component.entries[i]</code> as a parameter - and removes the particular file from list and from the queue for upload. - After a file has been uploaded the link &quot;Cancel&quot; changes to &quot;Clear&quot;. - Clicking &quot;Clear&quot; invokes <code>clear()</code> JS API function, which also gets ID of the particular entry and removes it from the list. - Uploaded to server file itself is kept untouched. - </para> - - <!--RESTRICTIONS--> - - <para> The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component provides following restrictions: </para> - <itemizedlist> - <listitem> - <para> On <property> file types</property>, use <emphasis> - <property> &quot;acceptedTypes&quot;</property> - </emphasis> attribute to define file types accepted by component. In the example - below only files with &quot;html&quot; and &quot;jpg&quot; - extensions are accepted to upload. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload acceptedTypes="html, jpg"/> -...]]></programlisting> - </listitem> - <listitem> - <para> On <property> file size</property>, use the <code>maxRequestSize</code> - parameter(value in bytes) inside <property>Ajax4jsf Filter</property> section in - <property>web.xml</property>: </para> - <programlisting role="XML"><![CDATA[... -<init-param> - <param-name>maxRequestSize</param-name> - <param-value>1000000</param-value> -</init-param> -...]]></programlisting> - </listitem> - <listitem> - <para> On <property>max files quantity</property>, use the <emphasis> - <property> &quot;maxFilesQuantity&quot;</property> - </emphasis> attribute to define max number of files allowed to be uploaded. - After a number of files in the list equals to the value of this attribute - &quot;Add&quot; button is disabled and nothing could be uploaded even if - you clear the whole list. In order to upload files again you should rerender the - component. As it could be seen in the example below, only 2 files are accepted - for uploading. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload maxFilesQuantity="2"/> -...]]></programlisting> - <para> This is the result: </para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis>with <emphasis> - <property> &quot;maxFilesQuantity&quot;</property> - </emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload2.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - </itemizedlist> - - - - - <para id="fileUploadEventAttributes">The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component provides a number of specific event attributes: </para> - <itemizedlist> - - <listitem> - <para> The <emphasis> - <property> &quot;onadd&quot;</property> - </emphasis>a event handler called on an add file operation </para> - </listitem> - - <listitem> - <para> The <emphasis> - <property> &quot;onupload&quot;</property> - </emphasis> which gives you a possibility to cancel the upload at client side - </para> - </listitem> - <listitem> - <para> The <emphasis> - <property> &quot;onuploadcomplete&quot;</property> - </emphasis> which is called after all files from the list are uploaded </para> - </listitem> - <listitem> - <para> The <emphasis> - <property> &quot;onuploadcanceled&quot;</property> - </emphasis> which is called after upload has been canceled via cancel control - </para> - </listitem> - <listitem> - <para> The <emphasis> - <property> &quot;onerror&quot;</property> - </emphasis> which is called if the file upload was interrupted according to any - errors </para> - </listitem> - </itemizedlist> - - - - - <!--Flash Module--> - <para> The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component has an embedded Flash module that adds extra functionality to the - component. The module is enabled with <emphasis> - <property> &quot;allowFlash&quot;</property> - </emphasis> attribute set to &quot;true&quot;. </para> - <para>These are the additional features that the Flash module provides:</para> - - <itemizedlist> - <listitem> - <para>Multiple files choosing;</para> - </listitem> - <listitem> - <para>Permitted file types are specified in the &quot;Open File&quot; dialog - window;</para> - </listitem> - <listitem> - <para>A number of additional entry object properties are also available, which can - be found <link linkend="objectProperties">RichFaces Developer Guide section on object properties</link>. </para> - </listitem> - </itemizedlist> - - <para>Apart from uploading files to the sever without using Ajax, the Flash module provides - a number of useful API functions that can be used to obtain information about the - uploaded file. </para> - - <para>There are 2 ways to obtain the data stored in the FileUploadEntry object. </para> - - <itemizedlist> - <listitem> - <para>By means of JavaScript on the client side. Use the following syntax for that - <code>entries[i].propertyName</code>. For example - <code>entries[0].state</code> will return the state of the file the is being - processed or has just been processed.</para> - </listitem> - - - <listitem> - <para>The properties of <code>FileUploadEntry</code> object can be retrieved using - the <code>entry.propertyName</code> expression in the specific event attributes. - For example, - <code>onupload=&quot;alert(event.memo.entry.fileName);&quot; </code> - will display a message with the name of the file at the very moment when upload - operation starts. A full list of properties can be found in <link - linkend="objectPropertiesWithAttributes">RichFaces Developer Guide section on properties and their attributes</link>.</para> - </listitem> - - - </itemizedlist> - <para>The given bellow code sample demonstrates how the properties can be used. Please study - it carefully. </para> - <programlisting role="XML"><![CDATA[... -<head> - <script> - function _onaddHandler (e) { - var i = 0; - for (; i < e.memo.entries.lenght; i++) { - alert(e.memo.entries[i].creator); //Shows creators of the added files - } - } - - function _onerrorhandle(e) { - alert(e.memo.entry.fileName + "file was not uploaded due transfer error"); - } - </script> -</head> - ...]]></programlisting> - - - - <para> Moreover, embedded Flash module provides a smoother representation of progress bar - during the uploading process: the polling is performed is not by Ajax, but my means of - the flash module. </para> - <figure> - <title> Uploading using Flash module <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/flash_fileUpload.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>However, the Flash module doens&apos;t perform any visual representation of the - component.</para> - - <!--End of Flash Module--> - - - - - - <para> In order to customize the information regarding the ongoing process you could use <emphasis> - <property>&quot;label&quot;</property> - </emphasis> facet with the following macrosubstitution: <itemizedlist> - <listitem> - <para> - <code> {B}</code>, <code>{KB}</code>, <code>{MB}</code> contains the size of - file uploaded in bytes, kilobytes, megabytes respectively </para> - </listitem> - <listitem> - <para> - <code>{_B}</code>, <code>{_KB}</code>, <code>{_MB}</code> contains the - remain file size to upload in bytes, kilobytes, megabytes respectively - </para> - </listitem> - <listitem> - <para> - <code>{ss}</code>, <code>{mm}</code>, <code>{hh}</code> contains elapsed - time in seconds, minutes and hours respectively </para> - </listitem> - </itemizedlist> - </para> - - <!-- - There is a number of facets providing for this component: - <emphasis> - <property> &quot;header&quot;</property></emphasis> - - <emphasis> - <property> &quot;footer&quot;</property></emphasis> - <emphasis> - <property> &quot;label&quot;</property></emphasis>. could be used to provide displaying the progress of uploading. - --> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}"> - <f:facet name="label"> - <h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}" /> - </f:facet> -</rich:fileUpload> -...]]></programlisting> - <para>This is the result:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> with <emphasis> - <property> &quot;label&quot;</property> - </emphasis> facet </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>You could define labels of the <property>component controls</property> with the help - of <emphasis> - <property> &quot;addControlLabel&quot;</property> - </emphasis>, <emphasis> - <property> &quot;clearAllControlLabel&quot;</property> - </emphasis>, <emphasis> - <property> &quot;clearControlLabel&quot;</property> - </emphasis>, <emphasis> - <property> &quot;stopEntryControlLabel&quot;</property> - </emphasis>, <emphasis> - <property> &quot;uploadControlLabel&quot;</property> - </emphasis> attributes. See the following example. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload addControlLabel="Add file..." clearAllControlLabel="Clear all" clearControlLabel="Clear" - stopEntryControlLabel="Stop process" uploadControlLabel="Upload file"/> -...]]></programlisting> - <para> This is the result: </para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> with labels </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload4.png"/> - </imageobject> - </mediaobject> - </figure> - <para> The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component allows to use sizes attributes: </para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property> &quot;listHeight&quot;</property> - </emphasis> attribute specify height for list of files in pixels </para> - </listitem> - <listitem> - <para> - <emphasis> - <property> &quot;listWidth&quot;</property> - </emphasis> attribute specify width for list of files in pixels </para> - </listitem> - </itemizedlist> - - <para> In order to disable the whole component you could use the <emphasis> - <property> &quot;disabled&quot;</property> - </emphasis> attribute. See the following example. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload disabled="true"/> -...]]></programlisting> - <para>This is the result:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis>with <emphasis> - <property> &quot;disabled&quot;</property> - </emphasis> attribute </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload5.png"/> - </imageobject> - </mediaobject> - </figure> - <para>It&apos;s possible to handle events for fileUpload using JavaScript code. A - simplest example of usage JavaScript API is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:fileUpload id="upload" disabled="false"/> -<h:commandButton onclick="${rich:component('upload')}.disable();" value="Disable" /> -...]]></programlisting> - - <para> - <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component also provides a number of JavaScript property, that can be used to - process uploaded files, file states etc. The given below example illustrates how the - <code>entries[0].state</code> property can be used to get access to the file state. - Full list of JavaScript properties can be found <link linkend="objectProperties" - >below</link>. </para> - - - <programlisting role="XML"><![CDATA[... -<rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" - maxFilesQuantity="#{fileUploadBean.uploadsAvailable}" - id="upload" - immediateUpload="#{fileUploadBean.autoUpload}" - acceptedTypes="jpg, gif, png, bmp"/> - <a4j:support event="onuploadcomplete" reRender="info" /> -</rich:fileUpload> -<h:commandButton onclick="if($('j_id232:upload').component.entries[0].state == FileUploadEntry.UPLOAD_SUCCESS) alert ('DONE');" value="Check file state"/> -...]]></programlisting> - - - <para>The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component allows to use internationalization method to redefine and localize - the labels. You could use application resource bundle and define - <code>RICH_FILE_UPLOAD_CANCEL_LABEL</code>, - <code>RICH_FILE_UPLOAD_STOP_LABEL</code>, <code>RICH_FILE_UPLOAD_ADD_LABEL</code>, - <code>RICH_FILE_UPLOAD_UPLOAD_LABEL</code>, - <code>RICH_FILE_UPLOAD_CLEAR_LABEL</code>, - <code>RICH_FILE_UPLOAD_CLEAR_ALL_LABEL</code>, - <code>RICH_FILE_UPLOAD_PROGRESS_LABEL</code>, - <code>RICH_FILE_UPLOAD_SIZE_ERROR_LABLE</code>, - <code>RICH_FILE_UPLOAD_TRANSFER_ERROR_LABLE</code>, - <code>RICH_FILE_UPLOAD_ENTRY_STOP_LABEL</code>, - <code>RICH_FILE_UPLOAD_ENTRY_CLEAR_LABEL</code>, - <code>RICH_FILE_UPLOAD_ENTRY_CANCEL_LABEL</code> there. </para> - - - - <!--para> The <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component could work together with Seam framework. <ulink - url="http://www.jboss.org/file-access/default/members/jbossrichfaces... - >On RichFaces LiveDemo page </ulink> you can see how to configure filter for this framework in web.xml file - in order to handle <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> requests. </para--> - <para>To make <property>&lt;rich:fileUpload&gt;</property> component work properly - with MyFaces extensions, the order in which filters are defined and mapped in web.xml, - is important. See <ulink - url="http://www.jboss.org/community/docs/DOC-13537" - >corresponding FAQ chapter</ulink>. </para> - - </section> - <!-- JavaScript API--> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>beforeSubmit()</entry> - <entry>Sets up necessary request parameters for file uploading and submits - form to server by command button. This method should be used together - with commands. </entry> - </row> - - <row> - <entry>clear()</entry> - <entry>Removes all files from the list. The function can also get the <code>$(&apos;id&apos;).component.entries[i]</code> as a parameter to remove a particular file.</entry> - </row> - - <row> - <entry>disable()</entry> - <entry>Disables the component</entry> - </row> - - <row> - <entry>enable()</entry> - <entry>Enables the component</entry> - </row> - - <row> - <entry>remove()</entry> - <entry>Cancels the request for uploading a file by removing this file from - upload list and upload queue. Gets <code>$(&apos;id&apos;).component.entries[i]</code> as a parameter.</entry> - </row> - - <row> - <entry>stop()</entry> - <entry>Stops the uploading process</entry> - </row> - - <row> - <entry>submitForm()</entry> - <entry>Submits form to server. All added files will be put to model and - event.</entry> - </row> - - </tbody> - </tgroup> - </table> - - - - <table id="objectProperties"> - <title>Client-side object properties</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Property</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>entries</entry> - <entry>Returns a array of all files in the list </entry> - </row> - - - - <row> - <entry>entries.length</entry> - <entry>Returns the number of files in the list </entry> - </row> - - - <row> - <entry>entries[i].fileName</entry> - <entry>Returns the file name, that is retrieved by the array index </entry> - </row> - - - - <row> - <entry>entries[i].state </entry> - <entry>Returns the file state. Possible states are <itemizedlist> - - <listitem> - <para>&quot;initialized&quot; - the file is added, - corresponds to FileUploadEntry.INITIALIZED constant </para> - </listitem> - <listitem> - <para>&quot;progress&quot; - the file is being uploaded, - corresponds to FileUploadEntry.UPLOAD_IN_PROGRESS - constant</para> - </listitem> - <listitem> - <para>&quot;ready&quot; - uploading is in process, - corresponds to FileUploadEntry.READY constant The file will - be uploaded on queue order.</para> - </listitem> - <listitem> - <para>&quot;canceled&quot; - uploading of the file is - canceled, corresponds to FileUploadEntry.UPLOAD_CANCELED - constant </para> - </listitem> - <listitem> - <para>&quot;done&quot; - the file is uploaded - successfully, corresponds to FileUploadEntry.UPLOAD_SUCCESS - constant</para> - </listitem> - <listitem> - <para>&quot;transfer_error&quot; - a file transfer error - occurred, corresponds to - FileUploadEntry.UPLOAD_TRANSFER_ERROR constant </para> - </listitem> - <listitem> - <para>&quot;size_error&quot; - the file exceeded maximum - size, corresponds to FileUploadEntry.UPLOAD_SIZE_ERROR - constant</para> - </listitem> - - - </itemizedlist> - </entry> - </row> - - - - <row> - <entry>entries[i].size</entry> - <entry> Returns the size of the file. Available in flash enabled version - only</entry> - </row> - <row> - <entry>entries[i].Type</entry> - <entry>Returns the mime type of the file. Available in flash enabled version - only</entry> - </row> - <row> - <entry>entries[i].creator </entry> - <entry>Returns the name of the author of the file. Available in flash - enabled version only</entry> - </row> - <row> - <entry>entries[i].creationDate</entry> - <entry>Returns the date when the file was created. Available in flash - enabled version only</entry> - </row> - <row> - <entry>entries[i].modificationDate</entry> - <entry>Returns the date of the last file modification. Available in flash - enabled version only</entry> - </row> - - - - - </tbody> - </tgroup> - </table> - - - - - <table id="objectPropertiesWithAttributes"> - <title>Client-side object properties available with specific <link - linkend="fileUploadEventAttributes"> event attributes</link></title> - <tgroup cols="2"> - <thead> - <row> - <entry>Property</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - - - - <row> - <entry>entry.state </entry> - <entry>Returns the file state. Possible states are <itemizedlist> - - <listitem> - <para>&quot;initialized&quot; - the file is added, - corresponds to FileUploadEntry.INITIALIZED constant </para> - </listitem> - <listitem> - <para>&quot;progress&quot; - the file is being uploaded, - corresponds to FileUploadEntry.UPLOAD_IN_PROGRESS - constant</para> - </listitem> - <listitem> - <para>&quot;ready&quot; - uploading is in process, - corresponds to FileUploadEntry.READY constant The file will - be uploaded on queue order.</para> - </listitem> - <listitem> - <para>&quot;canceled&quot; - uploading of the file is - canceled, corresponds to FileUploadEntry.UPLOAD_CANCELED - constant </para> - </listitem> - <listitem> - <para>&quot;done&quot; - the file is uploaded - successfully, corresponds to FileUploadEntry.UPLOAD_SUCCESS - constant</para> - </listitem> - <listitem> - <para>&quot;transfer_error&quot; - a file transfer error - occurred, corresponds to - FileUploadEntry.UPLOAD_TRANSFER_ERROR constant </para> - </listitem> - <listitem> - <para>&quot;size_error&quot; - the file exceeded maximum - size, corresponds to FileUploadEntry.UPLOAD_SIZE_ERROR - constant</para> - </listitem> - - - </itemizedlist> - </entry> - </row> - - <row> - <entry>entry.fileName </entry> - <entry>Returns the file&apos;s name. This property works with all event - handlers except for &quot;onadd&quot;. </entry> - </row> - - - - <row> - <entry>entry.size</entry> - <entry> Returns the size of the file. Available in flash enabled version - only</entry> - </row> - <row> - <entry>entry.Type</entry> - <entry>Returns the mime type of the file. Available in flash enabled version - only</entry> - </row> - <row> - <entry>entry.creator </entry> - <entry>Returns the name of the author of the file. Available in flash - enabled version only</entry> - </row> - <row> - <entry>entry.creationDate</entry> - <entry>Returns the date when the file was created. Available in flash - enabled version only</entry> - </row> - <row> - <entry>entry.modificationDate</entry> - <entry>Returns the date of the last file modification. Available in flash - enabled version only</entry> - </row> - - - - - </tbody> - </tgroup> - </table> - - - - </section> - <!-- End of JavaScript API--> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>label</entry> - <entry>Defines the information regarding the ongoing process</entry> - </row> - <row> - <entry>progress</entry> - <entry>Defines the information regarding the uploading process</entry> - </row> - - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - <listitem> - <para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </para> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a component</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a font</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a toolbar</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>tableBackgroundColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>tableBackgroundColor</entry> - <entry>border-left-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for items in the list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a &quot;Cancel&quot;, - &quot;Clear&quot; links</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalLinkColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a button border</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a highlighted button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a pressed button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for &quot;Upload&quot;, - &quot;Clean&quot; buttons</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a disabled &quot;Start&quot; button - icon</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a disabled &quot;Clear&quot; button - icon</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>The following picture illustrates how CSS classes define styles for component - elements.</para> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload_cn2.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="fileUploadCN"> - <title>Classes names that define a component representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-fileupload-list-decor</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a - fileUpload</entry> - </row> - <row> - <entry>rich-fileupload-font</entry> - <entry>Defines styles for a font of buttons and items</entry> - </row> - <row> - <entry>rich-fileupload-toolbar-decor</entry> - <entry>Defines styles for a toolbar</entry> - </row> - <row> - <entry> rich-fileupload-list-overflow</entry> - <entry>Defines styles for a list of files</entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Classes names that define buttons representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-fileupload-button</entry> - <entry>Defines styles for a buttons</entry> - </row> - <row> - <entry>rich-fileupload-button-border</entry> - <entry>Defines styles for a border of buttons</entry> - </row> - <row> - <entry>rich-fileupload-button-light</entry> - <entry>Defines styles for a highlight of button</entry> - </row> - <row> - <entry>rich-fileupload-button-press</entry> - <entry>Defines styles for a pressed button</entry> - </row> - <row> - <entry>rich-fileupload-button-dis</entry> - <entry>Defines styles for a disabled button</entry> - </row> - <row> - <entry>rich-fileupload-button-selection</entry> - <entry>Defines styles for &quot;Upload&quot;, - &quot;Clean&quot; buttons</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define the representation of the buttons' icons</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-fileupload-ico</entry> - <entry>Defines styles for an icon</entry> - </row> - <row> - <entry>rich-fileupload-ico-add</entry> - <entry>Defines styles for a &quot;Add&quot; button icon</entry> - </row> - <row> - <entry>rich-fileupload-ico-start</entry> - <entry>Defines styles for a &quot;Upload&quot; button icon</entry> - </row> - <row> - <entry>rich-fileupload-ico-stop</entry> - <entry>Defines styles for a &quot;Stop&quot; button icon</entry> - </row> - <row> - <entry>rich-fileupload-ico-clear</entry> - <entry>Defines styles for a &quot;Clear&quot; button icon</entry> - </row> - <row> - <entry>rich-fileupload-ico-add-dis</entry> - <entry>Defines styles for a disabled &quot;Add&quot; button - icon</entry> - </row> - <row> - <entry>rich-fileupload-ico-start-dis</entry> - <entry>Defines styles for a disabled &quot;Upload&quot; button - icon</entry> - </row> - <row> - <entry>rich-fileupload-ico-clear-dis</entry> - <entry>Defines styles for a disabled &quot;Clear&quot; button - icon</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define list items representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-fileupload-table-td</entry> - <entry>Defines styles for a wrapper &lt;td&gt; element of a list - items</entry> - </row> - <row> - <entry>rich-fileupload-anc</entry> - <entry>Defines styles for &quot;Cancel&quot;, - &quot;Stop&quot;, &quot;Clear&quot; links</entry> - </row> - </tbody> - </tgroup> - </table> - - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with - the same names (possible classes could be found in the tables <link - linkend="fileUploadCN"> above</link>) and define necessary properties in them. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-fileupload-anc{ - font-weight:bold; - text-decoration:none; -} -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example above the font weight and text decoration for - &quot;Cancel&quot; and &quot;Clear&quot; links are changed.</para> - - <para> Also it&apos;s possible to change styles of particular <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> component. In this case you should create own style classes and use them in - the corresponding <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight:bold; -} -...]]></programlisting> - <para> The <emphasis> - <property>&quot;addButtonClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:fileUpload ... addButtonClass="myClass"/> -]]></programlisting> - - <para>This is the result:</para> - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/fileUpload_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for &quot;Add&quot; - button is changed.</para> - - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.... - >On RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> - <property>&lt;rich:fileUpload&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <section> - <sectioninfo> - <keywordset> - <keyword>a4j:form</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:form&gt;</property></emphasis> component is very similar to JSF <emphasis role="bold"><property>&lt;h:form&gt;</property></emphasis> the only difference is in generation of links inside and possibility of default Ajax submission. - </para> - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/form.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,120 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:form</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Form</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Form</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxForm</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.FormRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Component definition on a page is similar to definition of the original - component from JSF HTML library. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:form> - <h:panelGrid> - <h:commandButton value="Button" action="#{userBean.nameItMark}" /> - </h:panelGrid> -</a4j:form> -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxForm; -... -AjaxForm myForm = new AjaxForm(); -...]]></programlisting> - </section> - <section> - <title>Details of usahe</title> - <para> - The difference with the original component is that all hidden fields - required for command links are always rendered and it doesn't depend - on links rendering on the initial page. It solves the problem with - invalid links that weren't rendered on a page immediately, but after - some Ajax request.</para> - <para>Beginning with release 1.0.5 additional attributes that make this form - variant universal have appeared. </para> - <para> If <emphasis><property>&quot;ajaxSubmit&quot;</property> - </emphasis> attribute is true, it becomes possible to set Ajax - submission way for any components inside with the help of the javascript - <code>A4J.AJAX.Submit(...)</code>call. In this case, the <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute contains a list of Ids of components defined for - re-rendering. If you have <emphasis role="bold"> - <property>&lt;h:commandButton&gt;</property> - </emphasis> or <emphasis role="bold"> - <property>&lt;h:commandLink&gt;</property> - </emphasis> inside the form, they work as <emphasis role="bold"> - <property>&lt;a4j:commandButton&gt;</property> - </emphasis>. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:form id="helloForm" ajaxSubmit="true" reRender="table"> - ... - <t:dataTable id="table"... > - ... - </t:dataTable> - ... - <t:datascroller for="table"... > - ... - </t:datascroller> - ... -</a4j:form> -]]></programlisting> - <para> - This example shows that in order to make <emphasis role="bold"><property>&lt;t:datascroller&gt;</property></emphasis> submissions to be Ajax ones it&apos;s required only to place this <emphasis role="bold"><property>&lt;t:datascroller&gt;</property></emphasis> into <emphasis role="bold"><property>&lt;a4j:form&gt;</property></emphasis>. - In the other case it is necessary to redefine renders for its child links elements that are defined as <emphasis role="bold"><property>&lt;h:commandLink&gt;</property></emphasis> and can't be made Ajax ones with using e.g. <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis>. - </para> - <para> - With the help of <emphasis><property>&quot;limitToList&quot;</property></emphasis> attribute you can limit areas, which are updated after the responses. - If <emphasis><property>&quot;limitToList&quot;</property></emphasis> is true, only the reRender attribute is taken in account. - Therefore, if you use blocks of text wrapped with <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> and <code>ajaxRendered= &quot;true&quot;</code>, blocks of text are ignored. - </para> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find in the &quot;<link linkend="process">Decide what to process</link>&quot; guide section. - </para> - </section> - <section> - <title>Relevant resources links</title> - <para> - Vizit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/form.jsf?c=... at RichFaces Livedemo for examples of component usage and their sources. - a</para> - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,28 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:gmap</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>Component that presents the Google <property>map</property> in the JSF applications.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:gmap&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/gmap_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Presents all the Google <property>map</property> functionality</para></listitem> - <listitem><para>Highly customizable via attributes</para></listitem> - <listitem><para>No developers JavaScript writing needed to use on a pages</para></listitem> - </itemizedlist> -</section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/gmap.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,422 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>map</keyword> - <keyword>gmapVar</keyword> - <keyword>HtmlGmap</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Gmap</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlGmap</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Gmap</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.GmapRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.GmapTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following - syntax: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:gmap gmapKey="..."/> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlGmap; -... -HtmlGmap myMap = new HtmlGmap(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - To use - <emphasis> - <property>Google Map</property> - </emphasis> - in your application, generate a key on - <ulink url="http://google.com/apis/maps"> - Google Map official resource - </ulink> - . One key could be used for one directory on the server. - </para> - <para> - Here are the main settings of initial rendering performed - with a component - <property>map</property> - that are accessible with the following attributes: - </para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;zoom&quot;</property> - </emphasis> - defines an approximation size (boundary values 1-18) - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;lat&quot;</property> - </emphasis> - specifies an initial latitude coordinate in degrees, - as a number between -90 and +90 - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;lng&quot;</property> - </emphasis> - specifies an initial longitude coordinate in - degrees, as a number between -180 and +180 - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;mapType&quot;</property> - </emphasis> - specifies a type of a rendered map (<code>G_NORMAL_MAP</code>, - <code>G_SATELLITE_MAP</code> (DEFAULT), <code>G_HYBRID_MAP</code>) - </para> - </listitem> - </itemizedlist> - <para> - For example, the city of Paris is shown after rendering with - the following initial settings: - <code>lat = &quot;48.44&quot;</code> - , - <code>lng = &quot;2.24&quot;</code> - and - <code>zoom = &quot;5&quot;</code> - . - </para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - initial rendering - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/gmap2.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - It&apos;s also possible to set accessible controls on the - <property>map</property> - with the help of the attributes: - </para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property> - &quot;showGMapTypeControl&quot; - </property> - </emphasis> - determines whether the controls for a map type - definition are switched on - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property> - &quot;showGScaleControl&quot; - </property> - </emphasis> - determines whether the controls for scaling are - switched on - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property> - &quot;showGLargeMapControl&quot; - </property> - </emphasis> - determines whether the control for - <property>map</property> - scale rendering is rendered - </para> - </listitem> - </itemizedlist> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - accessible controls - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/gmap3.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - To set the controls as well as to perform other activities (Zoom - In/Out etc.) is possible with your JavaScript, i.e. declare - a name of a <property>map</property> object in the - <emphasis> - <property>&quot;gmapVar&quot;</property> - </emphasis> - attribute and then call the object directly with - <emphasis> - <property>Google Maps</property> - </emphasis> API. - </para> - - <para> - For instance, if you have <code>gmapVar = &quot;map&quot;</code> declared for your component, to zoom in a map you should call <code>map.zoomIn()</code> on an - event. See also an example of <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> usage on the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=... Live Demo</ulink>. - </para> - - <tip> - <title>Tip:</title> - <para>You do not need to use reRender to perform uptades for the <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> component. Use the <emphasis> - <property>&quot;gmapVar&quot;</property></emphasis> attribute and - <ulink url="http://code.google.com/intl/ru/apis/maps/documentation/referenc... Maps native API</ulink> instead as it&apos;s described above.</para> - </tip> - - <para> - Moreover, to add e.g. some JavaScript effects, events - defined on it are used. - </para> - <itemizedlist> - <listitem> - <para><emphasis><property>&quot;onmouseover&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onclick&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onmouseout&quot;</property></emphasis></para> - </listitem> - <listitem> - <para>etc.</para> - </listitem> - </itemizedlist> - - <note> - <para> - Google Map does not support XHTML format of the page. - Thus, if you use Facelets and JSF 1.2, do not forget to - put the following tags somewhere on the page: - </para> - <programlisting role="XML"><![CDATA[... -<f:view contentType="text/html">...</f:view> -... -]]></programlisting> - </note> - - </section> - <section> - <title>Look-and-Feel Customization</title> - <para> - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - component isn&apos;t tied to skin parameters, as there is no - additional elements on it, except the ones provided with - <emphasis> - <property>Google Map</property> - . - </emphasis> - </para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <table id="gC"> - <title> - Classes names that define a component appearance - </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-gmap</entry> - <entry> - Defines styles for a wrapper &lt;div&gt; - element of a component - </entry> - </row> - </tbody> - </tgroup> - </table> - - <para> - In order to redefine styles for all - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - components on a page using CSS, it&apos;s enough to create - classes with the same names (possible classes could be found - in the tables - <link linkend="gC">above</link> - ) and define necessary properties in them. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-gmap{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/gmap_pc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - In the example the font style for buttons was changed. - </para> - - <para> - Also it&apos;s possible to change styles of particular - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - component. In this case you should create own style classes - and use them in corresponding - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - <property>styleClass</property> - attributes. An example is placed below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight:bold; -} -...]]></programlisting> - <para> - The - <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> - attribute for - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - is defined as it&apos;s shown in the example below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:gmap ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title> - Redefinition styles with own classes and - <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> - attributes - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/gmap_oc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - As it could be seen on the picture above, the font weight - for buttons was changed. - </para> - - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=... - On the component Live Demo page - </ulink> - you can see the example of - <emphasis role="bold"> - <property>&lt;rich:gmap&gt;</property> - </emphasis> - usage and sources for the given example. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,23 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="graphValidator" role="new"> - <sectioninfo> - <keywordset> - <keyword>rich:graphValidator</keyword> - </keywordset> - <releaseinfo>3.2.2</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The<emphasis role="bold"> - <property>&lt;rich:graphValidator&gt;</property> - </emphasis>component allows to register Hibernate Validators for multiple input components.</para> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Skips all JSF processing except validation</para></listitem> - - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/graphValidator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,175 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:graphValidator</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.graphValidator</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlgraphValidator</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.graphValidator</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.graphValidatorRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.graphValidatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:outputText value="Name:" /> -<h:inputText value="#{userBean.name}" id="name" required="true"> - <f:validateLength minimum="3" maximum="12"/> - <rich:graphValidator event="onblur"/> -</h:inputText> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlCalendar; -... -HtmlgraphValidator mygraphValidator= new HtmlgraphValidator(); -...]]></programlisting> - </section> - -<section> - <title>Details of usage</title> - <para> - The<emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property></emphasis>component behaves basically the same way as the <emphasis role="bold"> - <property>&lt;rich:beanValidator&gt;</property> - </emphasis> The deference between these two components is that in order to - validate some input data with a <emphasis role="bold"> - <property>&lt;rich:beanValidator&gt;</property> - </emphasis> component, it should be a nested element of an input component, - whereas <emphasis role="bold"> - <property>&lt;rich:graphValidator&gt;</property> - </emphasis> wraps multiple input components and validates the data received from - them. </para> - - <para>The following example demonstrates a pattern of how the <emphasis role="bold"> - <property>&lt;rich:graphValidator&gt;</property> - </emphasis> can be used:</para> - <programlisting role="XML"><![CDATA[... -<rich:graphValidator> - <h:panelGrid columns="3"> - <h:outputText value="Name:" /> - <h:inputText value="#{validationBean.name}" id="name"> - <f:validateLength minimum="2" /> - </h:inputText> - <rich:message for="name" /> - <h:outputText value="Email:" /> - <h:inputText value="#{validationBean.email}" id="email" /> - <rich:message for="email" /> - </h:panelGrid> -</rich:graphValidator> -...]]></programlisting> - - <para>The data validation can be also performed using Hibernate Validator, the same way as - it is done with <emphasis role="bold"> - <property>&lt;rich:beanValidator&gt;</property> - </emphasis>. </para> - - - - <para>The components&apos;s architecture provides an option to bind the component to a - managed bean, which is done with the <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute. The attribute ensures that the entered data is valid - after the model is updated by revalidating the bean properties.</para> - <para>Please look at the example below.</para> - - - <programlisting role="XML"><![CDATA[... -<rich:graphValidator summary="Invalid values: " value="#{dayStatistics}"> - <a4j:repeat value="#{dayStatistics.dayPasstimes}" var="pt" id="table"> - <h:outputText value="#{pt.title}" /> - <rich:inputNumberSpinner minValue="0" maxValue="24" value="#{pt.time}" id="time" /> - <rich:message for="time" /> - </a4j:repeat> -</rich:graphValidator> -...]]></programlisting> - - -<para>Hence, the given above code will provide the functionality that is illustrated on the images below.</para> - - <figure> - <title>&quot;Games&quot; field did not pass validation</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/graphValidator11.png"/> - </imageobject> - </mediaobject> - </figure> - <para>As you can see from the picture the &quot;Games&quot; field did not pass validation, as <emphasis role="bold"><property>&lt;rich:graphValidator&gt;</property> - </emphasis> can be used to perform validation of a single input item. - </para> - - <figure> - <title>Total sum of all input values is incorrect</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/graphValidator12.png"/> - </imageobject> - </mediaobject> - </figure> - <para> The figure above shows that the entered data was revalidated after all fields were completed, and the data did not pass revalidation since the total sum was incorrect. </para> -</section> - - <section> - <title>Relevant Resources Links</title> - <para> - Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/graphValida... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,50 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>hotKey</keyword> - <keyword>rich:hotKey</keyword> - </keywordset> - <releaseinfo>3.2.2</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:hotKey&gt;</property> - </emphasis> component allows to register hot keys for the page or particular elements and to define client-side processing functions for these keys. - </para> - </section> -<section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para> - Includes all features of the <ulink url="http://code.google.com/p/js-hotkeys/">Javascript jQuery Hotkeys Plugin</ulink> - </para> - </listitem> - <listitem> - <para> - Hot key registration by request through JavaScript API - </para> - </listitem> - <listitem> - <para> - Possibility to attach <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> to a whole page or - to a particular element using <emphasis><property>&quot;selector&quot;</property></emphasis> attribute - </para> - </listitem> - <listitem> - <para> - Hot key registration timing - </para> - </listitem> - - <listitem> - <para> - Enabling/disabling the <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> using JavaScript API - </para> - </listitem> - </itemizedlist> -</section> -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/hotKey.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,227 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:hotKey</keyword> - <keyword>hotKey</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.HotKey</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlHotKey</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.HotKey</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.HotKeyRenderer</entry> - </row> - <!--row> - <entry>tag-class</entry> - <entry></entry> - </row--> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:hotKey key="alt+a" handler="alert('alt+A is pressed')" /> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlHotKey; -... -HtmlHotKey myHotKey = new HtmlHotKey(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - There are two ways to register <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis>: - </para> - <itemizedlist> - <listitem> - <para> - just place it anywhere on the page. In this case the <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> - component is attached to the whole page (<property>html[0] element</property>). This is default scenario. - </para> - </listitem> - <listitem> - <para> - attach it with <emphasis><property>&quot;selector&quot;</property></emphasis> attribute to all the elements defined using this selector. - This attribute uses defined by <ulink url="http://www.w3.org">w3c consortium</ulink> syntax for CSS rule selector with some jQuery extensions. - </para> - </listitem> - </itemizedlist> - <para> - The <emphasis><property>&quot;key&quot;</property></emphasis> attribute defines the hot key itself - which is processed by the component. - </para> - <para> - After the hot key has been registered and defined you could set the <emphasis><property>&quot;handler&quot;</property></emphasis> - attribute which determines a JavaScript function to be called every time when corresponding keys are pressed. - </para> - <para> - <emphasis role="bold"> - Example: - </emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:listShuttle var="cap" sourceValue="#{capitalsBean.capitals}" id="ls"> - <rich:column> - <f:facet name="header"> - <h:outputText value="State flag"/> - </f:facet> - <h:graphicImage value="#{cap.stateFlag}"/> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="State name"/> - </f:facet> - <h:outputText value="#{cap.name}"/> - </rich:column> -</rich:listShuttle> -<rich:hotKey selector="#ls" key="right" handler="#{rich:component('ls')}.copy()"/> -<rich:hotKey selector="#ls" key="left" handler="#{rich:component('ls')}.remove()"/> -<rich:hotKey selector="#ls" key="end" handler="#{rich:component('ls')}.copyAll()"/> -<rich:hotKey selector="#ls" key="home" handler="#{rich:component('ls')}.removeAll()"/> -...]]></programlisting> - <para> - In the example above the <emphasis><property>&quot;selector&quot;</property></emphasis> attribute is used. - So the keys work only if <emphasis role="bold"><property>&lt;rich:listShuttle&gt;</property></emphasis> component is focused. - </para> - <para> - You could press <property>Right</property> or <property>Left</property> keys in order to move some selected items between lists. - You could press <property>Home</property> or <property>End</property> buttons in order to move all items between lists. - </para> - <para> - With the help of the <emphasis><property>&quot;timing&quot;</property></emphasis> attribute - you could manage <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> registration timing. - There are three possible values of this attribute: - </para> - <itemizedlist> - <listitem> - <para> - &quot;immediate&quot; - the component is rendered in browser immediately (by default) - </para> - </listitem> - <listitem> - <para> - &quot;onload&quot; - the component is rendered after the page is fully loaded - </para> - </listitem> - <listitem> - <para> - &quot;onregistercall&quot; - the component is rendered only after JavaScript API for the key registration is used. - </para> - </listitem> - </itemizedlist> - <para> - The <emphasis><property>&quot;type&quot;</property></emphasis> attribute defines the type of keyboard event. Possible values are: - &quot;onkeyup&quot;, &quot;onkeypress&quot; and &quot;onkeydown&quot;. - </para> -<!--EXAMPLE --> - <para> - The <emphasis><property>&quot;disableInInput&quot;</property></emphasis> attribute disables the <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> if it is activated on input elements and the value of this attribute is &quot;true&quot;. - </para> - <para> - The <emphasis><property>&quot;checkParent&quot;</property></emphasis> attribute defines the hotkey handling of events generated by child components nested into the parent component to which the <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> is attached. - </para> - <para> - The <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> component also provides a number of JavaScript API functions. There is an example below. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form id="myForm"> - <rich:hotKey id="myKey" key="ctrl+g" handler="alert('Ctrl+G is pressed')" /> - <button onclick="${rich:component('myKey')}.enable(); return false;">Turn Ctrl+G On</button> - <button onclick="${rich:component('myKey')}.disable(); return false;">Turn Ctrl+G Off</button> -</h:form> -...]]></programlisting> - <para> - In the example above the <property>Ctrl+G</property> is registered as a global hotkey, - so if you press this key combination the alert window with the <property>&quot;Ctrl+G is pressed&quot;</property> text appears. With the help - of <property>enable()</property>, <property>disable()</property> JavaScript API fucntions you could enable or disable registered hotkey. - </para> - </section> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry> - add(selector, key, handler) - </entry> - <entry> - Adds the hotkey(from key param) for elements targeted by selector. it assigns a handler function to the key - </entry> - </row> - <row> - <entry>remove()</entry> - <entry>Removes hotkey registration</entry> - </row> - <row> - <entry>enable()</entry> - <entry>Enables registered hotkey</entry> - </row> - <row> - <entry>disable()</entry> - <entry>Disables registered hotkey</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para><emphasis role="bold"> - <property>&lt;rich:hotKey&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component isn&apos;t visual.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/hotKey.jsf?... RichFaces LiveDemo page </ulink> you can see an example of - <emphasis role="bold"><property>&lt;rich:hotKey&gt;</property></emphasis> usage and sources for the given example. - </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:htmlCommandLink</keyword> - </keywordset> - </sectioninfo> - -<title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:htmlCommandLink&gt;</property> - </emphasis> component is very similar to the same component from the JSF HTML library, the only slight difference is in links generation and problem solving that occurs when an original component is used.</para> -</section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/htmlCommandLink.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,94 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:htmlCommandLink</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>javax.faces.HtmlCommandLink</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Command</entry> - </row> - <row> - <entry>component-class</entry> - <entry>javax.faces.component.html.HtmlCommandLink</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.HtmlCommandLinkRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Component definition on a page is the same as for the original component from the JSF HTML library.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:htmlCommandLink value="value" action="action"/> -]]></programlisting> -</section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import javax.faces.component.html.HtmlCommandLink; -... -HtmlCommandLink myCommandLink = new HtmlCommandLink(); -... -]]></programlisting> - </section> - <section> - <title>Key attributes and ways of usage</title> - <para>The difference with the original component is that all hidden fields required for command links with the child <emphasis role="bold"> - <property>&lt;f:param&gt;</property> - </emphasis> elements are always rendered and it doesn't depend on links rendering on the initial page. It solves the problem with invalid links that weren&apos;t rendered on a page immediately, but after some Ajax request.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:form> - ... - <a4j:htmlComandLink action="action" value="link" rendered="#{bean.rendered}"> - <f:param .../> - <a4j:htmlComandLink> - ... -</a4j:form> -]]></programlisting> -<para>In this example <emphasis role="bold"> - <property>&lt;a4j:htmlCommandLink&gt;</property> - </emphasis>works as standard <emphasis role="bold"> - <property>&lt;h:commandLink&gt;</property> - </emphasis>, but here hidden fields required for correct functionality are rendered before the first downloading of a page, though it doesn't happen if its attribute isn't set to &quot;false&quot;.</para> - </section> - - <section> - <title>Relevant resources links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/htmlCommand... RichFaces LiveDemo page </ulink> you can found some additional information for <emphasis role="bold" - ><property>&lt;a4j:htmlCommandLink&gt;</property></emphasis> component usage. - </para> - <para> - <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... RichFaces LiveDemo page </ulink> you can found some additional information about <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> component. - </para> - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,16 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <section> - <sectioninfo> - <keywordset> - <keyword>a4j:include</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> - - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:include&gt;</property></emphasis> component is used to include one view as part of another and navigate there using standard JSF navigation. - </para> - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/include.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,97 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:include</keyword> - </keywordset> - </chapterinfo> - <table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Include</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Output</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.Include</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxIncludeRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant of the component on a page use the following syntax: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:panelGrid> - <a4j:include viewId="/pages/include/first.xhtml" /> -</rich:panelGrid>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - This component cannot be created dynamically. - </para> - </section> - - <section> - <title>Details of usage</title> - <para> - The component is used to include one view as part of another and may be put anywhere in the page code. - The <emphasis><property>&apos;viewID&apos;</property></emphasis> attribute is used to point at the part to be included and should present a full context-relative path of the resource in order to be used as from-view and to-view in the JSF navigation cases. - In general the component functions as Fecelets <emphasis role="bold"><property>&lt;ui:include&gt;</property></emphasis> tag but with partial page navigation in Ajax mode as an advantage. - </para> - <note> - <title>Note:</title> - <para> - To make the RichFaces<emphasis role="bold"><property>&lt;a4j:include&gt;</property></emphasis> component (as well as Facelets<emphasis role="bold"><property>&lt;ui:include&gt;</property></emphasis> tag) work properly when including the part of the page check that included page does not generates extra HTML &lt;!DOCTYPE&gt;, &lt;html&gt;, &lt;body&gt; tags. - </para> - </note> - - <para> - The navigation rules could look as following: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<navigation-rule> - <from-view-id>/pages/include/first.xhtml</from-view-id> - <navigation-case> - <from-outcome>next</from-outcome> - <to-view-id>/pages/include/second.xhtml</to-view-id> - </navigation-case> -</navigation-rule>]]></programlisting> - - </section> - - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/include.jsf... page</ulink> for examples of component usage and their sources. - </para> - - </section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,50 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>inplaceInput</keyword> - <keyword>rich:inplaceInput</keyword> - </keywordset> - <releaseinfo>3.2.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:inplaceInput&gt;</property> - </emphasis> is an input component used for displaying and editing data inputted. </para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>View/changed/edit states highly customizable representations</para> - </listitem> - <listitem> - <para>Changing state event customization</para> - </listitem> - <listitem> - <para>Possibility to call custom JavaScript function on state changes</para> - </listitem> - <listitem> - <para>Optional &quot;inline&quot; or &quot;block&quot; element rendering on a page</para> - </listitem> - <listitem> - <para>Edit mode activation when the component gets focus with the &quot;Tab&quot;</para> - </listitem> - <listitem> - <para>Sizes synchronizations between modes</para> - </listitem> - <listitem> - <para>Controls customization</para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceInput.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,824 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:inplaceInput</keyword> - <keyword>inplaceInput</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.inplaceInput</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlInplaceInput</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.inplaceInput</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.inplaceInputRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.inplaceInputTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example of how the component can be used on a page: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput value="#{bean.value}"/> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.inplaceInput; -... -HtmlInpaceInput myInplaceInput = new InplaceInput(); -...]]></programlisting> - </section> - - <!-- Start Details of Usage--> - <section> - <title>Details of Usage</title> - - <para> - The - <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> - component was designed to facilitate displaying and inputting(editing) some data. - </para> - - <para> - The <emphasis><property>&quot;value&quot;</property></emphasis> attribute is a value-binding expression for the current value of the component. - </para> - - <!--para> - However, if - <emphasis><property>&quot;value&quot;</property></emphasis> - attribute is not defined, you can use - <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attribute - which displays some default text while - <emphasis><property>&quot;value&quot;</property></emphasis> - attribute stays undefined. - </para--> - - <para> - The component has three functional states: - </para> - <itemizedlist> - <listitem> - <para> - <property>View</property> state displays default label with the value taken from - <emphasis><property>&quot;value&quot;</property></emphasis> or <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attributes. - </para> - <para> - If the initial value of the <emphasis><property>&quot;value&quot;</property></emphasis> - attribute is &quot;null&quot; or <property>empty string</property> - the <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attribute is used to define default label. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput value="#{bean.value}" defaultLabel="click to edit"/> -...]]> </programlisting> - -<!-- <para> - The managed bean code: - </para>--> -<!-- <programlisting role="JAVA"><![CDATA[... -private String value = null; -...]]> </programlisting>--> - <para> - In the example above the <emphasis><property>&quot;value&quot;</property></emphasis> attribute is not initialized - therefore &quot;<code>click to edit</code>&quot; text, that - <emphasis><property>&quot;defaultLabel&quot;</property></emphasis>, contains is displayed. - </para> - <para> - This is the result: - </para> - <figure> - <title>View state</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput2.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para> - <property>Edit</property> state - input representation to allow value edit - </para> - <figure> - <title>Edit state</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput3.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para><property>Changed</property> state - value representation after it was changed</para> - <figure> - <title>Changed state</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput4.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - </itemizedlist> - - <para> - The <emphasis><property>&quot;editEvent&quot;</property></emphasis> attribute provides an option to assign a JavaScript action - to initiate the change of the state from <property>view</property>/<property>changed</property> to <property>edit</property>. - The default value is &quot;onclick&quot;. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput value="#{bean.value}" editEvent="ondblclick"/> -...]]> </programlisting> - - <!--note> - <title>Note:</title> - <para> - Do not use &quot;on&quot; prefix applying event action. E.g. use &quot;click&quot; instead of &quot;onClick&quot;, use &quot;mouseover&quot; instead of &quot;onMouseOver&quot;. - </para> - </note--> - - - <para> - The <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> - component provides specific event attributes: - </para> - <itemizedlist> - <listitem> - <para> - <emphasis><property>&quot;oneditactivation&quot;</property></emphasis> which is fired on <property>edit</property> state activation - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;oneditactivated&quot;</property></emphasis> which is fired when <property>edit</property> state is activated - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;onviewactivation&quot;</property></emphasis> which is fired on <property>view</property> state activation - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;onviewactivated&quot;</property></emphasis> which is fired after the component is changed to representation state - </para> - </listitem> - </itemizedlist> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput value="#{bean.value}" oneditactivation="if (!confirm('Are you sure you want to change the value?')){return false;}" /> -...]]> </programlisting> - <para> - The given code illustrates how <emphasis><property>&quot;oneditactivation&quot;</property></emphasis> attribute works, - namely when the state is being changed from <property>view</property> to <property>edit</property>, - a confirmation window with a message <code>&quot;Are you sure you want to change value?&quot;</code> comes up. - </para> - - <para> - Using the boolean <emphasis><property>&quot;selectOnEdit&quot;</property></emphasis> attribute set to true, - the text in the input field will be selected when - the change from <property>view</property>/<property>changed</property> state to <property>edit</property> occurs. - </para> - - <para>This is the result:</para> - - <figure> - <title>Usage of the <emphasis><property>&quot;selectOnEdit&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput5.png"/> - </imageobject> - </mediaobject> - </figure> - - - - <para> - If the <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> loses focus, input data is saved automatically - and the component displays a new value. Additionally, the data is saved when &quot;Enter&quot; is pressed. - Nevertheless, you can use the <emphasis><property>&quot;showControls&quot;</property></emphasis> - attribute, which makes &quot;Save&quot; and &quot;Cancel&quot; buttons appear next to the input field. - If the controls are used, data is not saved automatically when the form loses focus: user has to confirm that he/she wants to save/discard the data explicitly. - In both cases(with controls or without them) the input data can be discarded by pressing &quot;Esc&quot; key. - - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput value="#{bean.value}" showControls="true"/> -...]]> </programlisting> - - <figure> - <title>Usage <emphasis><property>&quot;showControls&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput6.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - You can also position the controls relatively to the input field, by means of - </para> - <itemizedlist> - <listitem> - <para> - The <emphasis><property>&quot;controlsHorizontalPosition&quot;</property></emphasis> attribute - with &quot;left&quot;, &quot;right&quot; and &quot;center&quot; definitions - </para> - </listitem> - <listitem> - <para> - The <emphasis><property>&quot;controlsVerticalPosition &quot;</property></emphasis> attribute - with &quot;bottom&quot;, &quot;center&quot; and &quot;top&quot; definitions - </para> - </listitem> - </itemizedlist> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput value="#{bean.value}" showControls="true" controlsVerticalPosition="bottom" controlsHorizontalPosition="left"/> -...]]> </programlisting> - <para> - This is the result: - </para> - <figure> - <title>Positioning of &quot;Save&quot; and &quot;Cancel&quot; buttons</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput7.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - It is also possible to use <emphasis><property>&quot;controls&quot;</property></emphasis> facet in order to replace the default controls with facets content. - See the example below. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput defaultLabel="Click here to edit" showControls="true" controlsHorizontalPosition="left" controlsVerticalPosition="bottom" id="inplaceInput"> - <f:facet name="controls"> - <h:commandButton value="Save" onclick="#{rich:component('inplaceInput')}.save();" type="button" /> - <h:commandButton value="Cancel" onclick="#{rich:component('inplaceInput')}.cancel();" type="button" /> - </f:facet> -</rich:inplaceInput> -...]]> </programlisting> - <para> - This is the result: - </para> - <figure> - <title><emphasis><property>&quot;controls&quot;</property></emphasis> facet usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput8.png"/> - </imageobject> - </mediaobject> - </figure> - - <note> - <title>Note:</title> - <para> - The <emphasis> <property>&quot;controls&quot;</property></emphasis>facet also implies using - <emphasis><property>&quot;showControls&quot;</property></emphasis> - attribute and it has to be defined as &quot;true&quot;. - </para> - </note> - <para> - Redefinition of the - &quot;save&quot; and &quot;cancel&quot; icons can be performed using - <emphasis><property>&quot;saveControlIcon&quot;</property></emphasis> - and - <emphasis><property>&quot;cancelControlIcon&quot;</property></emphasis> - attributes. You need to define the path to where your images are located. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:inplaceInput value="#{bean.value}" defaultLabel='click to edit' - showControls="true" - controlsHorizontalPosition="left" - controlsVerticalPosition="top" - saveControlIcon="/images/cancel.gif" - cancelControlIcon="/images/save.gif"/> - ...]]> </programlisting> - <figure> - <title>Redefining of &quot;save&quot; and &quot;cancel&quot; buttons</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput9.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - The <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> component could be rendered with - <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> or <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> - elements to display its value. - In order to change default <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> output, - use <emphasis><property>&quot;layout&quot;</property></emphasis> attribute with &quot;block&quot; value. - </para> - - <para> - The <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> component supports standard - <emphasis><property>&quot;tabindex&quot;</property></emphasis> attribute. - When the component gets focus the <property>edit</property> mode is activated. - </para> - - <para> - The - <emphasis><property>&quot;inputWidth&quot;</property></emphasis>, - <emphasis><property>&quot;minInputWidth&quot;</property></emphasis>, - <emphasis><property>&quot;maxInputWidth&quot;</property></emphasis> - attributes are provided to specify the width, minimal width and maximal width for the input element respectively. - </para> - - <table> - <title>Keyboard usage</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Keys and combinations </entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>ENTER</entry> - <entry>Saves the input data, and changes the state from edit to changed</entry> - </row> - <row> - <entry>ESC</entry> - <entry>Changes the state from edit to view or changed, value is not affected</entry> - </row> - <row> - <entry>TAB</entry> - <entry>Switches between the components</entry> - </row> - </tbody> - </tgroup> - </table> - - - </section> - <!-- End. Details of Usage--> - - - <!-- JavaScript API--> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>edit()</entry> - <entry>Changes the state to edit </entry> - </row> - <row> - <entry>cancel()</entry> - <entry>Changes its state to the previous one before editing (changed or view)</entry> - </row> - <row> - <entry>save()</entry> - <entry>Changes its state to changed with a new value</entry> - </row> - <row> - <entry>getValue()</entry> - <entry>Gets the current value</entry> - </row> - <row> - <entry>setValue(newValue) </entry> - <entry>Sets the current value (to be implemented)</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <!-- End of JavaScript API--> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>controls</entry> - <entry>Defines the contols contents. Related attributes are &quot;saveControlIcon&quot; and &quot;cancelControlIcon&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <!-- Look-and-Feel Customization--> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:inplaceInput&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:inplaceInput&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for &quot;save&quot; and &quot;cancel&quot; controls</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - - - - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for view state</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>editorBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>border-bottom-color</entry> - </row> - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters redefinition for &quot;Changed&quot; state</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>editorBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>generalTextColo</entry> - <entry>border-bottom-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define input field look and feel in edit state </title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>editBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - - </section>--> - <!-- END Skin Parameters Redefinition--> - - <!-- Definition of Custom Style Classes--> - - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace</entry> - <entry>Defines styles for a wrapper &lt;span&gt; (or &lt;div&gt;) element of a component</entry> - </row> - <row> - <entry>rich-inplace-input</entry> - <entry>Defines styles for the component input field</entry> - </row> - </tbody> - </tgroup> - </table> - - <table id="tab_cn_iI"> - <title>Class name for the view state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace-view</entry> - <entry>Defines styles for the view state</entry> - </row> - <row> - <entry>rich-inplace-input-view-hover</entry> - <entry>Defines styles for hovered text in the view state </entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Class name for the input field in edit state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace-field</entry> - <entry>Defines styles for the input field look and feel in edit state</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Class name for the &quot;Changed&quot; state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace-changed</entry> - <entry>Defines styles for the &quot;Changed&quot; state</entry> - </row> - <row> - <entry> rich-inplace-input-changed-hover </entry> - <entry>Defines styles for the hovered text in the &quot;Changed&quot; state</entry> - </row> - </tbody> - </tgroup> - </table> - - - - - <table> - <title>Classes names for &quot;save&quot; and &quot;cancel&quot; controls in Edit state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-inplace-control</entry> - <entry>Defines styles for the controls</entry> - </row> - <row> - <entry>rich-inplace-control-press</entry> - <entry>Defines styles for the controls when either of the buttons is pressed</entry> - </row> - <row> - <entry>rich-inplace-shadow-size</entry> - <entry>Defines size of the shadow</entry> - </row> - <row> - <entry>rich-inplace-shadow-tl</entry> - <entry>Defines styles for the shadow in the top left corner </entry> - </row> - <row> - <entry>rich-inplace-shadow-tr</entry> - <entry>Defines styles for the shadow in the top right corner</entry> - </row> - <row> - <entry>rich-inplace-shadow-bl</entry> - <entry>Defines styles for the shadow in the bottom left corner</entry> - </row> - <row> - <entry>rich-inplace-shadow-br</entry> - <entry>Defines styles for the shadow in the bottom right corner</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para> - In order to redefine styles for all <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> components on a page using CSS, - it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_cn_iI"> above</link>) and define necessary properties in them. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-inplace-field { - font-style: italic; -} -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput_pc.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the shown example the font in <property>edit</property> state is changed to bold.</para> - - <para> - It&apos;s aslo possible to change styles of a particular <emphasis role="bold"> <property>&lt;rich:inplaceInput&gt;</property></emphasis> component. - In this case you should create own style classes and use them in corresponding - <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis><emphasis><property>styleClass</property></emphasis> attributes. - An example is placed below: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass { - color: #008cca; -} -...]]></programlisting> - <para> - The <emphasis><property>&quot;viewClass&quot;</property></emphasis> attribute for - the <emphasis role="bold"><property>&lt;rich:inplaceInput&gt;</property></emphasis> is defined as it&apos;s shown in the example below: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:inplaceInput value="click to edit" styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceInput_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font color of the text on the component was changed.</para> - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inplaceInpu... the component Live Demo page</ulink> - you can see the example of <emphasis role="bold"> - <property>&lt;rich:inplaceIput&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,50 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:inplaceSelect</keyword> - </keywordset> - <releaseinfo>3.2.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:inplaceSelect&gt;</property> - </emphasis> is used for creation select based inputs: it shows the value as text in one state and enables editing the value, providing a list of options in another state</para> - - <figure> - <title>Three states of <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>View/changed/edit states highly customizable representations</para> - </listitem> - <listitem> - <para>Optional &quot;inline&quot; or &quot;block&quot; element rendering on a page</para> - </listitem> - <listitem> - <para>Changing state event customization</para> - </listitem> - <listitem> - <para>Possibility to call custom JavaScript function on state changes</para> - </listitem> - <listitem> - <para>Edit mode activation when the component got focus with the &quot;Tab&quot;</para> - </listitem> - <listitem> - <para>Sizes synchronizations between modes</para> - </listitem> - <listitem> - <para>Highly customizable look and feel</para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inplaceSelect.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,934 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:inplaceSelect</keyword> - <keyword>inplaceSelect</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.InplaceSelect</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlInplaceSelect</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.InplaceSelect</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.InplaceSelectRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.InplaceSelectTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example of how the component can be used on a page: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <!-- itemLabels has to have realy value--> - - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}"> - <f:selectItem itemValue="1" itemLabel="factory"/> -</rich:inplaceSelect> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.inplaceSelect; -... -HtmlInpaceSelect myInplaceSelect = new InplaceSelect(); -...]]></programlisting> - </section> - - <!-- Start Details of Usage--> - <section> - <title>Details of Usage</title> - - - <para> - The <emphasis><property>&quot;value&quot;</property></emphasis> attribute is a value-binding expression for the current value of the component. - </para> - <para> - The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property> </emphasis> component has three functional states: - </para> - <itemizedlist> - <listitem> - <para> - <property>View</property> state displays default label with the value taken from - <emphasis><property>&quot;value&quot;</property></emphasis> or <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attributes. - </para> - <para> - If the initial value of the <emphasis><property>&quot;value&quot;</property></emphasis> - attribute is &quot;null&quot; or <property>empty string</property> - the <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attribute is used to define default label. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.value}" defaultLabel="click to edit"> - <f:selectItems value="#{bean.selectItems}" /> -</rich:inplaceSelect> -...]]> </programlisting> - <!-- <para> - The managed bean code: - </para> - <programlisting role="JAVA"><![CDATA[... -private String value = ""; -...]]> </programlisting>--> - - - <para> - In the example above the <emphasis><property>&quot;value&quot;</property></emphasis> attribute is not initialized - therefore &quot;<code>click to edit</code>&quot; text, that - <emphasis><property>&quot;defaultLabel&quot;</property></emphasis>, contains is displayed. - </para> - <para> - This is the result: - </para> - <figure> - <title>View state</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect2.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para> - <property>Edit </property>state - select representation to allow value edit - </para> - <figure> - <title>Edit state</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect3.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - <listitem> - <para> - <property>Changed</property> state - value representation after it was changed - </para> - <figure> - <title>Changed state</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect4.png"/> - </imageobject> - </mediaobject> - </figure> - </listitem> - </itemizedlist> - - <para> - You can form the list of the options using <emphasis role="bold"><property>&lt;f:selectItem/&gt;</property></emphasis> and - <emphasis role="bold"><property>&lt;f:selectItems/&gt;</property></emphasis> JSF components. - </para> - <para> - Please, see the example below. - </para> - <para> - <emphasis role="bold">Example:</emphasis> -</para> -<programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="click to edit"> - <f:selectItems value="#{bean.selectItems}"/> - <f:selectItem itemValue="1" itemLabel="factory"/> - <f:selectItem itemValue="2" itemLabel="newspaper"/> -</rich:inplaceSelect> -...]]></programlisting> - -<para> - In the example above the value of the selected item is available via <emphasis><property>&quot;value&quot;</property></emphasis> attribute. -</para> - <para> - The <emphasis><property>&quot;editEvent&quot;</property></emphasis> attribute provides an option to assign an JavaScript action - that initiates the change of the state from <property>view</property> to <property>edit</property>. - The default value is &quot;onclick&quot;. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="Double Click to edit" editEvent="ondblclick"> - <f:selectItems value="#{demo.selectItems}" /> -</rich:inplaceSelect> -...]]></programlisting> - <para> - The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> - component provides specific event attributes: - </para> - <itemizedlist> - <listitem> - <para> - <emphasis><property>&quot;oneditactivation&quot;</property></emphasis> fired on <property>edit</property> state activation - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;oneditactivated&quot;</property></emphasis> fired when <property>edit</property> state is activated - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;onviewactivation&quot;</property></emphasis> fired on <property>view</property> state activation - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;onviewactivated&quot;</property></emphasis> fired after the component is changed to representation state - </para> - </listitem> - </itemizedlist> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" oneditactivation="if (!confirm('Are you sure you want to change the value?')){return false;}"> - <f:selectItems value="#{demo.selectItems}" /> -</rich:inplaceSelect> -...]]> </programlisting> - <para> - The given code illustrates how <emphasis><property>&quot;oneditactivation&quot;</property></emphasis> attribute works, - namely when the state is being changed from <property>view</property> to <property>edit</property>, - a confirmation window with a message <code>&quot;Are you sure you want to change value?&quot;</code> comes up. - </para> - -<!-- <para> - The <emphasis><property>&quot;selectOnEdit&quot;</property></emphasis> (with possible values &quot;true&quot;, &quot;false&quot;) gives you an - option to make the text in the input field selected right after the change from <property>view</property> state to <property>edit</property> occurs. - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" selectOnEdit="true"> - <f:selectItems value="#{bean.selectItems}"/> -</rich:inplaceSelect> -...]]></programlisting> --> - - - - <para> - To prevent opening the drop-down list by default, once <property>edit</property> state is activated, - set the <emphasis><property>&quot;openOnEdit&quot;</property></emphasis> attribute to &quot;false&quot;. - The default value is &quot;true&quot;. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" showControls="true" openOnEdit="false"> - <f:selectItems value="#{bean.selectItems}"/> -</rich:inplaceSelect> -...]]></programlisting> - - - <para> - This is the result: - </para> - <figure> - <title>The <emphasis><property>&quot;openOnEdit&quot;</property></emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect5.png"/> - </imageobject> - </mediaobject> - </figure> - - - <para> - Nowever, if you want to confirm the data saving explicitly you can use the <emphasis><property>&quot;showControls&quot;</property></emphasis> attribute, - which makes &quot;Save&quot; and &quot;Cancel&quot; buttons (displayed as icons) appear next to the input field. - <property>Edit</property> state can be deactivated by pressing &quot;Esc&quot; key. - An option in the drop-drown list can be also selected by pressing &quot;Enter&quot;. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" showControls="true"> - <f:selectItems value="#{bean.selectItems}"/> -</rich:inplaceSelect> -...]]></programlisting> - <para> - This is the result: - </para> - <figure> - <title>The <emphasis><property>&quot;showControls&quot;</property></emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect6.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - You can also position the controls relatively to the input field, by means of - </para> - <itemizedlist> - <listitem> - <para> - The <emphasis><property>&quot;controlsHorizontalPosition&quot;</property></emphasis> attribute - with &quot;left&quot;, &quot;right&quot; and &quot;center&quot; definitions - </para> - </listitem> - <listitem> - <para> - The <emphasis><property>&quot;controlsVerticalPosition &quot;</property></emphasis> attribute - with &quot;bottom&quot; and &quot;top&quot; definitions - </para> - </listitem> - </itemizedlist> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" controlsHorizontalPosition="left" controlsVerticalPosition="center" showControls="true"> - <f:selectItems value="#{bean.selectItems}"/> -</rich:inplaceSelect> -...]]> </programlisting> - <para> - This is the result: - </para> - <figure> - <title>Controls positioning</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect7.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>It is also possible to use <emphasis><property>&quot;controls&quot;</property></emphasis> - facet in order to replace the default controls with facets content. See the example below. - </para> - <para>Please, see the example.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect value="#{bean.inputValue}" showControls="true"> - <f:facet name="controls"> - <button onclick="#{rich:component('inplaceSelect')}.save();" type="button">Save</button> - <button onclick="#{rich:component('inplaceSelect')}.cancel();" type="button">Cancel</button> - </f:facet> - <f:selectItems value="#{bean.selectItems}"/> -</rich:inplaceSelect> -...]]> </programlisting> - <para> - This is the result: - </para> - <figure> - <title><emphasis><property>&quot;controls&quot;</property></emphasis> facet usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect8.png"/> - </imageobject> - </mediaobject> - </figure> - <note> - <title>Note:</title> - <para> - The <emphasis> <property>&quot;controls&quot;</property></emphasis>facet also implies using - <emphasis><property>&quot;showControls&quot;</property></emphasis> - attribute and it has to be defined as &quot;true&quot;. - </para> - </note> - - - <!--Icons redefinitions--> - <!--para> - Redefinition of the - &quot;save&quot; and &quot;cancel&quot; icons can be performed using - <emphasis><property>&quot;saveControlIcon&quot;</property></emphasis> - and - <emphasis><property>&quot;cancelControlIcon&quot;</property></emphasis> - attributes r. You need to define the path to where your images are located. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:inplaceSelect - value="#{inplaceComponentsBean.inputValue}" defaultLabel="Click to edit" showControls="true" - showControls="true" - controlsHorizontalPosition="left" - controlsVerticalPosition="top" - saveControlIcon="/richfaces-demo/richfaces/cancel.gif" - cancelControlIcon="/richfaces-demo/richfaces/save.gif"> - -<f:selectItem itemValue="0" itemLabel="oil well"/> -<f:selectItem itemValue="1" itemLabel="factory"/> -<f:selectItem itemValue="2" itemLabel="newspaper"/> -</rich:inplaceSelect> - ...]]> </programlisting--> - - - <para> - The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> component could be rendered with - <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> or <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> - elements to display its value. - In order to change default <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> output, - use the <emphasis><property>&quot;layout&quot;</property></emphasis> attribute with &quot;block&quot; value. - </para> - - <para> - The <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> component supports standard - <emphasis><property>&quot;tabindex&quot;</property></emphasis> attribute. - When the component gets focus the <property>edit</property> mode is activated and drop-down list is opened. - </para> - <para> - The - <emphasis><property>&quot;selectWidth&quot;</property></emphasis>, - <emphasis><property>&quot;minSelectWidth&quot;</property></emphasis> and - <emphasis><property>&quot;maxSelectWidth&quot;</property></emphasis> - attributes are provided to specify the width, minimal width and maximal width for the input element respectively. - </para> - <para> - In order to specify the height and width parameters for the list items of the component, you can use - <emphasis><property>&quot;listHeight&quot;</property></emphasis> and - <emphasis><property>&quot; listWidth&quot;</property></emphasis> attributes. - - - </para> - </section> - <!-- End. Details of Usage--> - - - <!-- JavaScript API--> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>edit()</entry> - <entry>Changes the state to edit </entry> - - </row> - <row> - <entry>cancel()</entry> - <entry>Changes its state to the previous one before editing (changed or view)</entry> - - </row> - - - <row> - <entry>save()</entry> - <entry>Changes its state to changed with a new value</entry> - </row> - - <row> - <entry>getValue()</entry> - <entry>Gets the current value</entry> - </row> - - <row> - <entry >setValue(newValue)</entry> - <entry >Sets the current value and name</entry> - </row> - - </tbody> - </tgroup> - </table> - </section> - <!-- End of JavaScript API--> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>controls</entry> - <entry>Defines the contols contents. Related attributes are &quot;saveControlIcon&quot; and &quot;cancelControlIcon&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <!-- Look-and-Feel Customization--> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:inplaceSelect&gt;</property> - </emphasis> components at once: - <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:inplaceSelect&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - - -<section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for view state</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>editorBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>generaTextColor</entry> - - <entry>border-bottom-color</entry> - </row> - - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for input field in edit state</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>editBackgroundColor</entry> - - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters redefinition for control</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>tabBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for pressed control</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>tabBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for list</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>editBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for selected item</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - - </section> - - <!-- END Skin Parameters Redefinition--> - - <!-- Definition of Custom Style Classes--> - - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="cn3"> - <title>Class name for the view state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace-select-view</entry> - <entry>Defines styles for the select view</entry> - </row> - - - </tbody> - </tgroup> - </table> - <table> - <title>Class name for the input field in edit state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace-select-field</entry> - <entry>Defines styles for the select field</entry> - </row> - - </tbody> - </tgroup> - </table> - - - - - - - <table> - <title>Class name for the control</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace-select-control</entry> - <entry>Defines styles for the select control</entry> - </row> - <row> - <entry>rich-inplace-select-control-press</entry> - <entry>Defines styles for the pressed select control</entry> - </row> - - </tbody> - </tgroup> - </table> - - - <table> - <title>Class name for the list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-inplace-select-list-decoration</entry> - <entry>Defines styles for a wrapper &lt;table&gt; element of an inplaceSelect</entry> - </row> - - </tbody> - </tgroup> - </table> - - - - - <table> - <title>Classes names for the selected item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-inplace-select-selected-item</entry> - <entry>Defines styles for the selected item</entry> - </row> - - - </tbody> - </tgroup> - </table> - <table> - <title>Classes names for the shadow</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-inplace-select-shadow-tl</entry> - <entry>Defines styles for the top-left shadow</entry> - </row> - <row> - <entry>rich-inplace-select-shadow-tr</entry> - <entry>Defines styles for the top-right shadow</entry> - </row> - <row> - <entry>rich-inplace-select-shadow-bl</entry> - <entry>Defines styles for the bottom-left shadow</entry> - </row> - <row> - <entry>rich-inplace-select-shadow-br</entry> - <entry>Defines styles for the bottom-right shadow</entry> - </row> - - - </tbody> - </tgroup> - </table> - - - - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:inplaceSelect&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="cn3"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-inplace-select-list-decoration{ - background-color: #ecf4fe; -} -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect_pc.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the shown example the background color for list is changed.</para> - - - - - - <para>It&apos;s aslo possible to change styles of a particular - <emphasis role="bold"> <property>&lt;rich:inplaceSelect&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold"><property>&lt;rich:inplaceSelect&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass { - background-color:#bed6f8; - font-style:italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;viewClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:inplaceSelect&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:inplaceSelect value="click to edit" viewClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inplaceSelect_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style and background color in <property>view</property> state is changed.</para> - - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inplaceSele... the component Live Demo page</ulink> - you can see the example of <emphasis role="bold"> - <property>&lt;rich:inplaceSelect&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,43 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> - -<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.3CR3//EN" "http://www.oasis-open.org/docbook/xml/4.3CR3/docbookx.dtd" -[ -<!ENTITY slider "rich:inputNumberSlider"> -] -> -<section> -<sectioninfo> -<keywordset> - <keyword>&slider;</keyword> - <keyword>rich:inputNumberSlider</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> component is a slider component. A handler&apos;s position corresponds to a definite value on the slider track. In order to change the value you can slide a handler or set the necessary value into the input field. - You can dispose it horizontally or vertically on the page.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> component, horizontal and vertical views</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inputNumberSlider_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Fully skinnable control and input elements</para></listitem> - <listitem><para>Optional value text field with an attribute-managed position</para></listitem> - <listitem><para>Optional disablement of the component on a page</para></listitem> - <listitem><para>Optional toolTip to display the current value while a handle is dragged</para></listitem> - <listitem><para>Dragged state is stable after the mouse moves</para></listitem> - <listitem><para>Optional manual input possible if a text input field is present</para></listitem> - <listitem><para>Validation of manual input</para></listitem> - <listitem><para>Possibility to display 2 controls that increase/decrease the value by the defined step width, when they will be clicked.</para></listitem> - <listitem><para>Attribute &quot;orientation&quot; that can have the values &quot;vertical&quot; and &quot;horizontal&quot; to define in which direction the slider should be movable. - </para></listitem> - </itemizedlist> -</section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSlider.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,667 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> - -<!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.3CR3//EN" "http://www.oasis-open.org/docbook/xml/4.3CR3/docbookx.dtd" -[ -<!ENTITY slider "rich:inputNumberSlider"> -] -> - -<section> - <sectioninfo> - <keywordset> - <keyword>dragged handle control</keyword> - <keyword>&slider;</keyword> - <keyword>rich:inputNumberSlider</keyword> - <keyword>HtmlInputNumberSlider</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.inputNumberSlider</entry> - </row> - <row> - <entry>component-class</entry> - <entry> - org.richfaces.component.html.HtmlInputNumberSlider - </entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.inputNumberSlider</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry> - org.richfaces.InputNumberSliderRenderer - </entry> - </row> - <row> - <entry>tag-class</entry> - <entry> - org.richfaces.taglib.InputNumberSliderTag - </entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following - syntax: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inputNumberSlider minValue="0" maxValue="100" step="1"/> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlInputNumberSlider; -... -HtmlInputNumberSlider mySlider = new HtmlInputNumberSlider(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - is used to facilitate your data input with rich UI Controls. - </para> - <para> - Here is the simplest variant of a slider definition with - <emphasis> - <property>&quot;minValue&quot;</property> - , - </emphasis> - <emphasis> - <property>&quot;maxValue&quot;</property> - </emphasis> - and - <emphasis> - <property>&quot;step&quot;</property> - </emphasis> - (on default is &quot;1&quot;) attributes, which define the - beginning and the end of a numerical area and a - <property>slider</property> - property step. - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:inputNumberSlider></rich:inputNumberSlider>]]></programlisting> - - <para>It's generated on a page:</para> - <figure> - <title> - Generated - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inputNumberSlider2.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - Using - <emphasis> - <property>&quot;showInput&quot;</property> - </emphasis> - (default is &quot;true&quot;) and - <emphasis> - <property>&quot;enableManualInput&quot;</property> - </emphasis> - (default value is &quot;true&quot;) attributes, it&apos;s possible to - output the input area near the slider, and make it read-only - or editable. - </para> - <para> - To remove input area use - <code>showInput = &quot;false&quot;</code> - : - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="1" maxValue="100" showInput="false"/>]]></programlisting> - <para>It's displayed at a page like:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - without input field - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inputNumberSlider3.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - It&apos;s also possible to switch off displaying of - &quot;boundary values&quot; and a toolTip showing on a - handle drawing. This could be performed with the help of the - component defined attributes: - <emphasis> - <property>&quot;showBoundaryValues&quot;</property> - </emphasis> - which is responsible for &quot;boundary values&quot; - displaying (default is true) and - <emphasis> - <property>&quot;showToolTip&quot;</property> - </emphasis> - which is responsible for tooltTip displaying (default is - &quot;true&quot;). - </para> - - <para> - Moreover, to add e.g. some JavaScript effects, events - defined on it are used. - </para> - <itemizedlist> - <listitem> - <para><emphasis><property>&quot;onchange&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onmouseover&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onclick&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onfocus&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onmouseout&quot;</property></emphasis></para> - </listitem> - <listitem> - <para>etc.</para> - </listitem> - </itemizedlist> - <para> - The - <emphasis> - <property>&quot;label&quot;</property> - </emphasis> - attribute is a generic attribute. The - <emphasis> - <property>&quot;label&quot;</property> - </emphasis> - attribute provides an association between a component, and - the message that the component (indirectly) produced. This - attribute defines the parameters of a localized error and - informational messages that occur as a result of conversion, - validation, or other application actions during the request - processing lifecycle. With the help of this attribute you - can replace the last parameter substitution token shown in - the messages. For example, {1} for - <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code> - , {2} for - <code>&quot;ShortConverter.SHORT&quot;</code>. - </para> - <!-- <para>Using the - <emphasis> - <property>&quot;orientation&quot;</property> - </emphasis> - attribute (default is &quot;horizontal&quot;) is possible to change slider position. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="0" maxValue="100" value="84" orientation="vertical"/>]]></programlisting> - <para>It looks at page like:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;&slider;&gt;</property> - </emphasis> - in a vertical orientation. - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inputNumberSlider_vertical.png" /> - </imageobject> - </mediaobject> - </figure>--> - - <para>The <emphasis><property>&quot;showArrows&quot;</property></emphasis> boolean attribute when set to &quot;true&quot; enables additional controls for increasing and decreasing slider value. - The controls (arrows by default) are placed in the beginning and in the end of slider track:</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:inputNumberSlider&gt;</property></emphasis> with additional controls</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/inputNumberSlider4.png" /> - </imageobject> - </mediaobject> - </figure> - <para>Clicking an arrow changes the driven value on the amount defined with <emphasis><property>&quot;step&quot;</property></emphasis> attribute. - Keepeng an arrow control pressed changes the value continuous. - Time that value takes to change from one step to another is definded with <emphasis><property>&quot;delay&quot;</property></emphasis> attribute. - </para> - - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para> - For skinnability implementation, the components use a - <emphasis> - <property>style class redefinition method.</property> - </emphasis> - Default style classes are mapped on - <emphasis> - <property>skin parameters.</property> - </emphasis> - </para> - - <para> - There are two ways to redefine the appearance of all - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - components at once: - </para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para> - Add to your style sheets - <emphasis> - <property>style classes</property> - </emphasis> - used by a - <emphasis role="bold"> - <property> - &lt;rich:imputNumberSlider&gt; - </property> - </emphasis> - component - </para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a bar</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for numbers</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>line-height</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a text field</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>controlTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a hint</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tipBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tipBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>Style classes names that define styles for component elements are shown on the picture below: - </para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSlider_cn.png" /> - </imageobject> - </mediaobject> - </figure> - - - <table id="tab_cn"> - <title> - Classes names that define a component appearance - </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-slider</entry> - <entry> - Defines styles for a wrapper table element - of a component - </entry> - </row> - <row> - <entry>rich-inslider-track</entry> - <entry>Defines styles for a bar</entry> - </row> - <row> - <entry>rich-inslider-handler</entry> - <entry> - Defines styles for a slider handler - </entry> - </row> - <row> - <entry>rich-inslider-handler-selected</entry> - <entry> - Defines styles for a selected handler - </entry> - </row> - <row> - <entry>rich-inslider-field</entry> - <entry>Defines styles for a text field</entry> - </row> - <row> - <entry>rich-inslider-right-num</entry> - <entry> - Defines styles for the right number - </entry> - </row> - <row> - <entry>rich-inslider-left-num</entry> - <entry> - Defines styles for the left number - </entry> - </row> - <row> - <entry>rich-inslider-track-border</entry> - <entry> - Defines styles for track border - </entry> - </row> - <row> - <entry>rich-inslider-tip</entry> - <entry>Defines styles for a hint</entry> - </row> - <row> - <entry>inputNumberSlider-increase-vertical</entry> - <entry>Defines styles for the top arrow</entry> - </row> - <row> - <entry>inputNumberSlider-decrease-vertical</entry> - <entry>Defines styles for the bottom arrow</entry> - </row> - <row> - <entry>inputNumberSlider-increase-horizontal</entry> - <entry>Defines styles for the right arrow</entry> - </row> - <row> - <entry>inputNumberSlider-decrease-horizontal</entry> - <entry>Defines styles for the left arrow</entry> - </row> - </tbody> - </tgroup> - </table> - <para> - In order to redefine styles for all - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - components on a page using CSS, it&apos;s enough to create - classes with the same names (possible classes could be found - in the table - <link linkend="tab_cn">above</link> - ) and define necessary properties in them. An example is - placed below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-inslider-tip{ - background-color: #FFDAB9; - font-family: Arial Black; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSlider_pc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - In the example a tip background color and font family was - changed. - </para> - - <para> - Also it&apos;s possible to change styles of particular - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - component. In this case you should create own style classes - and use them in corresponding - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> - attributes. An example is placed below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style: italic; - font-weight:bold; - font-size:12px; -} -...]]></programlisting> - <para> - The - <emphasis> - <property>&quot;inputClass&quot;</property> - </emphasis> - attribute for - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - is defined as it&apos;s shown in the example below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich: inputNumberSlider ... inputClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title> - Redefinition styles with own classes and - <emphasis> - <property>styleClass</property> - </emphasis> - attributes - </title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSlider_oc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - As it could be seen on the picture above, the font style for - input text was changed. - </para> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... - On the component Live Demo page - </ulink> - you can see the example of - <emphasis role="bold"> - <property>&lt;rich:inputNumberSlider&gt;</property> - </emphasis> - usage and sources for the given example. - </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,64 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:inputNumberSpinner</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Description</title> - <para>A single line input field that lets selecting a number using controls near - a text field. It&apos;s possible to change a value using - &quot;Up/Down&quot; keyboard keys. The keyboard input in a - field is possible if it isn&apos;t locked by the <emphasis> - <property>&quot;enableManualInput&quot;</property> - </emphasis> attribute. When arrow controls are pressed, the cursor can - be moved in any way without losing a dragged state.</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSpinner_init.png" - /> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>Fully skinnable control and input elements</para> - </listitem> - <listitem> - <para>3D look and feel with an easily customizable - appearance</para> - </listitem> - <listitem> - <para>Attribute-managed positions of the controls - (inside/outside of the input field)</para> - </listitem> - <listitem> - <para>Keyboard controls support</para> - </listitem> - <listitem> - <para>Optional disablement of the component on a page</para> - </listitem> - <listitem> - <para>Optional <emphasis> - <property>&quot;cycled&quot;</property> - </emphasis> mode of scrolling values</para> - </listitem> - <listitem> - <para>Optional manual/controls-only input into a value text - field</para> - </listitem> - <listitem> - <para>Validation of manual input</para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/inputNumberSpinner.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,432 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>input field</keyword> - <keyword>rich:inputNumberSpinner</keyword> - <keyword>HtmlInputNumberSpinner</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.inputNumberSpinner</entry> - </row> - <row> - <entry>component-class</entry> - <entry> - org.richfaces.component.html.HtmlInputNumberSpinner - </entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.inputNumberSpinner</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry> org.richfaces.InputNumberSpinnerRenderer - </entry> - </row> - <row> - <entry>tag-class</entry> - <entry> org.richfaces.taglib.InputNumberSpinnerTag - </entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> To create the simplest variant on a page use the following syntax: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inputNumberSpinner minValue="0" maxValue="100" step="1"/> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlInputNumberSpinner; -... -HtmlInputNumberSpinner mySpinner = new HtmlInputNumberSpinner (); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> - <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> is used to facilitate your data input with rich UI - Controls. </para> - <para> Here is the simplest variant of <property>spinner</property> definition - with <emphasis> - <property>&quot;minValue&quot;</property> , </emphasis> - <emphasis> - <property>&quot;maxValue&quot;</property> - </emphasis> and <emphasis> - <property>&quot;step&quot;</property> - </emphasis> (on default is &quot;1&quot;) attributes, which - define the beginning and the end of numerical area and a - <property>spinner</property> step. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:inputNumberSpinner minValue="1" maxValue="100"/> -... -]]></programlisting> - <para>It generates on a page:</para> - <figure> - <title> Generated <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> - </title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSpinner2.png" - /> - </imageobject> - </mediaobject> - </figure> - <para> There are also several attributes to define functionality peculiarities: </para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;cycled&quot;</property> - </emphasis> if the attribute is - &quot;true&quot; after the current value - reaches the border value it&apos;s be reversed - to another border value after next - increasing/decreasing. In other case possibilities - of next increasing/decreasing are locked </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> is an attribute that defines whether a - component is active on a page </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;enableManualInput&quot;</property> - </emphasis> is an attribute that defines whether a - keyboard input is possible or only UI controls - could be used </para> - </listitem> - </itemizedlist> - <para> Moreover, to add e.g. some JavaScript effects, events defined on it are - used </para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;onchange&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onmouseover&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onclick&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onfocus&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onmouseout&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para>etc.</para> - </listitem> - </itemizedlist> - <para> The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and - the message that the component (indirectly) produced. This attribute - defines the parameters of localized error and informational messages - that occur as a result of conversion, validation, or other application - actions during the request processing lifecycle. With the help of this - attribute you can replace the last parameter substitution token shown - in the messages. For example, {1} for - <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code> - , {2} for <code>&quot;ShortConverter.SHORT&quot;</code> . - </para> - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para> For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis> - </para> - - <para> There are two ways to redefine the appearance of all <emphasis - role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> components at once: </para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para> Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property> - &lt;rich:inputNumberSpinner&gt; - </property> - </emphasis> component </para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a container</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title> Skin parameters redefinition for an input field </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>buttonSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>buttonFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - <section> - <title>Definition of Custom Style Classes</title> - <para> On the screenshot there are classes names that define styles for - component elements. </para> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSpinner_cn.png" - /> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_cn1"> - <title> Classes names that define a component appearance </title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-spinner-c</entry> - <entry> Defines styles for a wrapper - table element of a component - </entry> - </row> - <row> - <entry>rich-spinner-input-container</entry> - <entry>Defines styles for a - container</entry> - </row> - <row> - <entry>rich-spinner-input</entry> - <entry> Defines styles for a wrapper - &lt;td&gt; element for - input fields </entry> - </row> - <row> - <entry>rich-spinner-button</entry> - <entry>Defines styles for a - button</entry> - </row> - <row> - <entry>rich-spinner-buttons</entry> - <entry>Defines styles for all - buttons</entry> - </row> - </tbody> - </tgroup> - </table> - - <para> In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the table <link linkend="tab_cn1">above</link> ) and define necessary - properties in them. An example is placed below: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-spinner-input{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSpinner_pc.png" - /> - </imageobject> - </mediaobject> - </figure> - - <para> In the example an input text font style was changed. </para> - - <para> Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-family: Arial Black; -} -...]]></programlisting> - <para> The <emphasis> - <property>&quot;inputClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich: inputNumberSpinner ... inputClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title> Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes </title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/inputNumberSpinner_oc.png" - /> - </imageobject> - </mediaobject> - </figure> - - <para> As it could be seen on the picture above, the font family for input text - was changed. </para> - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... - > On the component Live Demo page </ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:inputNumberSpinner&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,22 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:insert</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:insert&gt;</property> - </emphasis> component is used for highlighting, source code inserting and, optionally, format the file from the application context into the page.</para> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Source code highlighting</para></listitem> - <listitem><para>Variety of formats for source code highlighting</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/insert.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,136 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:insert</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.ui.Insert</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.ui.component.html.HtmlInsert</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.ui.Insert</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.ui.InsertRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.ui.taglib.InsertTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:insert src="/pages/sourcePage.xhtml" highlight="xhtml"/> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.ui.component.html.HtmlInsert; -... -HtmlInsert myInsert = new HtmlInsert(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para>The are two basic attributes. The <emphasis> - <property>&quot;src&quot;</property> - </emphasis> attribute defines the path to the file with source code. The <emphasis> - <property>&quot;highlight&quot;</property> - </emphasis> attribute defines the type of a syntax highlighting.</para> - <para>If <emphasis> - <property>&quot;highlight&quot;</property> - </emphasis> attribute is defined and <ulink url="https://jhighlight.dev.java.net/"> - JHighlight</ulink> open source library is in the classpath, the text from the file is - formated and colorized.</para> - <para>An example is placed below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:insert src="/pages/sourcePage.xhtml" highlight="xhtml"/> -...]]></programlisting> - - <para>The result of using <emphasis role="bold"> - <property>&lt;rich:insert&gt;</property> - </emphasis> component is shown on the picture:</para> - <figure> - <title>Source code highlighting</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/insert_init.png"/> - </imageobject> - </mediaobject> - </figure> - <para>The <emphasis role="bold"> - <property>&lt;rich:insert&gt;</property> - </emphasis> component provides the same functionality as <ulink - url="https://jhighlight.dev.java.net/">JHighlight</ulink>;. Thus, all names of highlight - style classes for source code of particular language could be changed to your names, which are - used by the <ulink url="https://jhighlight.dev.java.net/">JHighlight</ulink> library.</para> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para><emphasis role="bold"> - <property>&lt;rich:insert&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component doesn&apos;t have own visual representation.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/insert.jsf?... - >On RichFaces LiveDemo page </ulink> you can found some additional information for <emphasis role="bold" - ><property>&lt;rich:insert&gt;</property></emphasis> component usage. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,28 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:jQuery</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> allows to apply styles and behaviour to DOM objects.</para> - - <!--mediaobject> - <imageobject> - <imagedata fileref="images/jQuery.png"/> - </imageobject> - </mediaobject--> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Presents jQuery JavaScript framework functionality</para></listitem> - <listitem><para>Able to apply onto JSF components and other DOM objects.</para></listitem> - <listitem><para>Works without conflicts with prototype.js library</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jQuery.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,360 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:jQuery</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.JQuery</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlJQuery</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.JQuery</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.JQueryRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.JQueryTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page, use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:jQuery selector="#customList tr:odd" timing="onload" query="addClass(odd)" /> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlJQuery; -... -HtmlJQuery myJQuery = new HtmlJQuery(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para><emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> can be used in two main modes:</para> - <itemizedlist> - <listitem><para>as a one-time query applied immediately or on a document ready event</para></listitem> - <listitem><para>as a JavaScript function that can be invoked from the JavaScript code</para></listitem> - </itemizedlist> - <para>The mode is chosen with <emphasis> - <property>&quot;timing&quot;</property> - </emphasis> attribute that has the following options:</para> - <itemizedlist> - <listitem><para>&quot;immediate&quot; - applying a query immediately</para></listitem> - <listitem><para>&quot;onload&quot; - applying a query when a document is loaded</para></listitem> - <listitem><para>onJScall - applying a query by invoked JavaScript function defined with the <emphasis> - <property>&quot;name&quot;</property> - </emphasis> attribute</para></listitem> - </itemizedlist> - <para>Definition of the <emphasis> - <property>&quot;name&quot;</property> - </emphasis> attribute is mandatory when the value of <emphasis> - <property>&quot;timing&quot;</property> - </emphasis> attribute is &quot;onJScall&quot;. If the<emphasis> - <property>&quot;name&quot;</property> - </emphasis> attribute is defined when <emphasis> - <property>&quot;timing&quot;</property> - </emphasis> value equals to &quot;immediate&quot; or - &quot;onload&quot;, the query is applied according to this - value, but you still have an opportunity to invoke it by a function name.</para> - <para>The <emphasis> - <property>&quot;selector&quot;</property> - </emphasis> attribute defines an object or a list of objects. The query is defined with the <emphasis> - <property>&quot;query&quot;</property> - </emphasis>attribute.</para> - <para>Here is an example of how to highlight odd rows in a table:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -<style> - .odd { - background-color: #FFC; - } -</style> -...]]></programlisting> - - <programlisting role="XML"><![CDATA[... -<rich:table id="customList" ...> - ... -</rich:table> -... -<rich:jQuery selector="#customList tr:odd" timing="onload" query="addClass(odd)" /> -...]]></programlisting> - <para>The <emphasis> - <property>&quot;selector&quot;</property> - </emphasis> attribute uses defined by w3c consortium syntax for CSS rule <ulink - url="http://www.w3.org/TR/REC-CSS2/selector.html">selector&l... with some jQuery - extensions </para> - <para>Those are typical examples of using selector in the <emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> component.</para> - - <table> - <title>Examples of using selector</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Selector</entry> - - <entry>Comment</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>&quot;p[a]&quot;</entry> - <entry>In a document all &quot;p&quot; tags with &quot;a&quot; tag - inside are selected</entry> - </row> - - <row> - <entry>&quot;ul/li&quot;</entry> - <entry>All &quot;li&quot; elements of unordered &quot;ul&quot; lists are selected - </entry> - </row> - - <row> - <entry>&quot;p.foo[a]&quot;</entry> - <entry>All &quot;p&quot; tags with &quot;foo&quot; class and inserted - &quot;a&quot; tag are selected</entry> - </row> - - <row> - <entry>&quot;input[@name=bar]&quot;</entry> - <entry>All &quot;input&quot; tags with &quot;name&quot; attribute which - value is &quot;bar&quot; are selected</entry> - </row> - - <row> - <entry>&quot;input[@type=radio][@checked]&quot;</entry> - <entry>All &quot;input&quot; tags with attribute - &quot;type&quot;=&quot;radio&quot; and attribute value = - &quot;chekced&quot; are selected</entry> - </row> - - <row> - <entry>&quot;p,span,td&quot;</entry> - <entry>All tag elements &quot;p&quot; or&quot;span&quot; or - &quot;td&quot; are selected</entry> - </row> - - <row> - <entry>&quot;p#secret&quot;</entry> - <entry>&quot;p&quot; paragraph element with &quot;id&quot; - identification = &quot;secret&quot; is selected</entry> - </row> - - <row> - <entry>&quot;p span&quot;</entry> - <entry>&quot;span&quot; tag is a (direct or non-direct) child of - &quot;p&quot; tag. If it&apos;s necessary, use &quot;p > - span&quot; or &quot;p/span&quot; is selected</entry> - </row> - - <row> - <entry>&quot;p[@foo^=bar]&quot;</entry> - <entry>&quot;p&quot; tag containing &quot;foo&quot; attribute with - textual value beginning with &quot;bar&quot; word is selected</entry> - </row> - - <row> - <entry>&quot;p[@foo$=bar] &quot;</entry> - <entry>&quot;p&quot; tag containing &quot;foo&quot; attribute with - textual value ending with &quot;bar&quot; word is selected</entry> - </row> - - <row> - <entry>&quot;p[@foo*=bar] &quot;</entry> - <entry>&quot;p&quot; tag with &quot;foo&quot; attribute containing - substring &quot;bar&quot; in any place is selected</entry> - </row> - - <row> - <entry>&quot;p//span &quot;</entry> - <entry>&quot;span&quot; tag that is a (direct or non-direct) child of - &quot;p&quot; tag is selected</entry> - </row> - - <row> - <entry>&quot;p/../span &quot;</entry> - <entry>&quot;span&quot; tag that is a grandchild of &quot;p&quot; tag is selected</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para>In addition, RichFaces allows using either a component id or client id if you apply the - query to a JSF component. When you define a selector, RichFaces examines its content and - tries to replace the defined in the selector id with a component id if it&apos;s found.</para> - <para>For example, you have the following code:</para> - - <programlisting role="XML"><![CDATA[... -<h:form id="form"> - ... - <h:panelGrid id="menu"> - <h:graphicImage ... /> - <h:graphicImage ... /> - ... - </h:panelGrid> -</h:form> -...]]></programlisting> - - <para>The actual id of the <emphasis role="bold"> - <property>&lt;h:panelGrid&gt;</property> - </emphasis> table in the browser DOM is <code>&quot;form:menu&quot;</code>. However, you still can - reference to images inside this table using the following selector: </para> - - <programlisting role="XML"><![CDATA[... -<rich:jQuery selector="#menu img" query="..." /> -...]]></programlisting> - - <para>You can define the exact id in the selector if you want. The following code reference to - the same set of a DOM object:</para> - - <programlisting role="XML"><![CDATA[... -<rich:jQuery selector="#form\\:menu img" query="..." /> -...]]></programlisting> - - <para>Pay attention to double slashes that escape a colon in the id.</para> - - <para>In case when the <emphasis> - <property>&quot;name&quot;</property> - </emphasis> attribute is defined, <emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> generates a JavaScript function that might be used from any place of JavaScript - code on a page.</para> - - <para>There is an example of how to enlarge the picture smoothly on a mouse over event and return - back to the normal size on mouse out:</para> - - <programlisting role="XML"><![CDATA[... -<h:graphicImage width="50" value="/images/price.png" - onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this)" /> -<h:graphicImage width="50" value="/images/discount.png" - onmouseover="enlargePic(this, {pwidth:'100px'})" onmouseout="releasePic(this)" /> -... -<rich:jQuery name="enlargePic" timing="onJScall" query="animate({width:param.pwidth})" /> -<rich:jQuery name="releasePic" timing="onJScall" query="animate({width:'50px'})"/> -...]]></programlisting> - - <para>The JavaScript could use two parameters. The first parameter is a replacement for the - selector attribute. Thus, you can share the same query, applying it to the different DOM - objects. You can use a literal value or a direct reference for an existing DOM object. The - second parameter can be used to path the specific value inside the query. The JSON syntax is - used for the second parameter. The &quot;param.&quot; namespace is used for - referencing data inside the parameter value.</para> - - <para><emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> adds styles and behavior to the DOM object dynamically. This means if you replace - something on a page during an Ajax response, the applied artifacts is overwritten. But you - are allowed to apply them again after the Ajax response is complete.</para> - <para>Usually, it could be done with reRendering the <emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> components in the same Ajax interaction with the components these queries are - applied to. Note, that queries with <emphasis> - <property>&quot;timing&quot;</property> - </emphasis> attribute set to &quot;onload&quot; are not - invoked even if the query is reRendered, because a DOM document is not fully reloaded during - the Ajax interaction. If you need to re-applies query with - &quot;onload&quot; value of <emphasis> - <property>&quot;timing&quot;</property> - </emphasis> attribute, define the <emphasis> - <property>&quot;name&quot;</property> - </emphasis> attribute and invoke the query by name in the <emphasis> - <property>&quot;oncomplete&quot;</property> - </emphasis> attribute of the Ajax component.</para> - - <para>RichFaces includes jQuery JavaScript framework. You can use the futures of jQuery directly - without defining the <emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> component on a page if it is convenient for you. To start using the jQuery feature - on the page, include the library into a page with the following code:</para> - - <programlisting role="XML"><![CDATA[... -<a4j:loadScript src="resource://jquery.js"/> -...]]></programlisting> - - <para>Refer to the <ulink url="http://docs.jquery.com/">jQuery documentation</ulink> for the - right syntax. Remember to use <code>jQuery()</code> function instead of <code>$()</code>, as soon as jQuery works - without conflicts with <code>prototype.js</code>.</para> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para><emphasis role="bold"> - <property>&lt;rich:jQuery&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component isn&apos;t visual.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para>More information about jQuery framework and its features you can read in<ulink - url="http://jquery.com/">jQuery official documentation</ulink>.</para> - <para>How to use jQuery with other libraries see also in<ulink - url="http://docs.jquery.com/Using_jQuery_with_Other_Libraries"&... official documentation</ulink>.</para> - - <para> - Some additional information about usage of component can be found - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf?... its LiveDemo</ulink>. - </para> - - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <section> - <sectioninfo> - <keywordset> - <keyword>a4j:jsFunction</keyword> - </keywordset> - </sectioninfo> - - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:jsFunction&gt;</property></emphasis> component allows to perform Ajax requests directly from JavaScript code, invoke server-side data and return it in a JSON format to use in a client JavaScript calls. - </para> - </section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/jsFunction.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,124 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:jsFunction</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Function</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.components.ajaxFunction</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlajaxFunction</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.ajaxFunctionRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simpliest example of the component on the page use the following syntax:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<head> - <script> - <!--There is some script named "myScript" that uses parameters which will be taken from server--> - </script> -</head> -<body> - ... - <a4j:jsFunction data="#{bean.someProperty}" name="callScript" oncomplete="myScript(data.subProperty1, data.subProperty2)"/> - ... -</body>]]> - - </programlisting> - <para> - The script <code>&quot;myScript&quot;</code> is called after <code>bean.someProperty</code> data is returned from server (e.g. It&apos;ll be object with two subproperties). - </para> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlajaxFunction; -... -HtmlajaxFunction myFunction = new HtmlajaxFunction(); -...]]></programlisting> - </section> - <section> - <title>Details of usage</title> - - <para> - As the component uses Ajax request to get data from server it has all common Ajax Action attributes. - Hence, <emphasis><property>&quot;action&quot;</property></emphasis> and<emphasis><property> &quot;actionListener&quot; </property></emphasis>can be invoked, and reRendering some parts of - the page fired after calling function. </para> - <para> When using the <emphasis role="bold"> - <property>&lt;a4j:jsFunction&gt;</property> - </emphasis> it&apos;s possible to initiate the Ajax request from the JavaScript and - perform partial update of a page and/or invoke the JavaScript function with data returned by - Ajax response. </para> - <programlisting role="XML"><![CDATA[<body onload="callScript()"> - <h:form> - ... - <a4j:jsFunction name="callScript" data="#{bean.someProperty1}" reRender="someComponent" oncomplete="myScript(data.subProperty1, data.subProperty2)"> - <a4j:actionparam name="param_name" assignTo="#{bean.someProperty2}"/> - </a4j:jsFunction> - ... - </h:form> - ... - </body>]]></programlisting> - - <para> - The <emphasis role="bold"><property>&lt;a4j:jsFunction&gt;</property></emphasis> allows to use <emphasis role="bold"><property>&lt;a4j:actionparam&gt;</property></emphasis> or pure <emphasis role="bold"><property>&lt;f:param&gt;</property></emphasis> for passing any number of parameters of the JavaScript function into Ajax request. - <emphasis role="bold"><property>&lt;a4j:jsFunction&gt;</property></emphasis> is similar to <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>, but it could be activated from the JavaScript code. - It allows to invoke some server-side functionality and use the returned data in the JavaScript function invoked from <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute. - Hence it&apos;s possible to use <emphasis role="bold"><property>&lt;a4j:jsFunction&gt;</property></emphasis> instead of <emphasis role="bold"><property>&lt;a4j:commandButton&gt;</property></emphasis>. - You can put it anywhere, just don&apos;t forget to use <emphasis role="bold"><property>&lt;h:form&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;/h:form&gt;</property></emphasis> around it. - </para> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find &quot;<link linkend="process">Decide what to process</link>&quot; guide section. - </para> - </section> - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/jsFunction.... page</ulink> at RichFaces LiveDemo for component usage and sources for the given examples. - </para> - - <para> - Useful articles: - </para> - <itemizedlist> - <listitem> - <para> - &quot;<ulink url="http://www.jboss.org/community/docs/DOC-11856">JsFuncti... article in the RichFaces Cookbook describes how to use <emphasis role="bold"><property>&quot;a4j:jsFunction&quot;</property></emphasis> to call the jsonTest backing bean that generates some random data in a JSON String; - </para> - </listitem> - - </itemizedlist> - - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,17 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <section> - <sectioninfo> - <keywordset> - <keyword>a4j:keepAlive</keyword> - </keywordset> - </sectioninfo> - - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:keepAlive&gt;</property> - </emphasis> tag allows to keep a state of a bean between - requests.</para> - - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/keepAlive.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,107 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:keepAlive</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Tag identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.components.KeepAlive</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.components.AjaxKeepAlive</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.components.AjaxKeepAlive</entry> - </row> - </tbody> - </tgroup> - </table> - - <section id="a4jkalpagetag" role="updated"> - <title>Using the tag on a Page</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:keepAlive beanName = "testBean"/>]]></programlisting> - <para> - Note, that to be put into the request scope the pointed bean should be registered inside <code>faces-config.xml</code> file and marked with <code>org.ajax4jsf.model.KeepAlive</code> annotation. - A bean instance in the request scope could also be saved directly through the declaration of <code>@KeepAlive</code> annotation inside the bean. - </para> - <para> - - </para> - </section> - - <!-- There's no AjaxKeepAlive component nor AjaxKeepAlive class and it cannot be created programmatically and there's no need for that. - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.ajax.AjaxKeepAlive; -... -AjaxKeepAlive myKeepAlive = new AjaxKeepAlive(); -...]]></programlisting> - </section> - --> - - <section> - <title>Details of usage</title> - <para> - If a managed bean is declared with <property>request</property> scope in the configuration file with the help of <emphasis role="bold"><property>&lt;managed-bean-scope&gt;</property></emphasis> tag then the life-time of this bean instance is valid only for the current request. Any attempts to make a reference to the bean instance after the request end will throw in Illegal Argument Exception by the server. - To avoid these kinds of Exceptions component <emphasis role="bold"><property>&lt;a4j:keepAlive&gt;</property></emphasis> is used to maintain the state of the whole bean object among subsequent request. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[<a4j:keepAlive beanName = "#{myClass.testBean}"/>]]></programlisting> - - <para> The <emphasis><property>&quot;beanName&quot;</property></emphasis> attribute defines the request scope bean name you&apos;d like to re-use. Note that this attribute must point to a legal JSF EL expression which resolves to a managed mean instance. - For example for the above code the class definition may look like this one: - </para> - <programlisting role="JAVA"><![CDATA[class MyClass{ - ... - private TestBean testBean; - // Getters and Setters for testBean. - ... -} -]]></programlisting> - - <para> - The <emphasis><property>&quot;ajaxOnly&quot;</property></emphasis> attribute declares whether the value of the bean should be available during a non-Ajax request. - If the value of this attribute is &quot;true&quot; a request scope bean keeps the same value during Ajax requests from the given page. - If a non-Ajax request is sent from this page the bean is re-created as a regular request scope bean. - </para> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/keepAlive.j... page</ulink> at RichFaces Livedemo for examples of component usage and their sources. - </para> - - <para> - Search the <ulink url="http://www.jboss.org/index.html?module=bb&amp;op=viewforum&... Users forum</ulink> for some additional information about usage of component. - </para> - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,34 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section role="new"> - <sectioninfo> - <keywordset> - <keyword>layout</keyword> - <keyword>rich:layout</keyword> - </keywordset> - <releaseinfo>3.3.1</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:layout&gt;</property> - </emphasis> component is designed to build layouts basing on Yahoo UI Grids CSS - </para> - </section> - <figure> - <title>The <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/rich_layout.png"/> - </imageobject> - </mediaobject> - </figure> -<section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Cross-borwser compatibility</para></listitem> - <listitem><para>Easy layout creation</para></listitem> - - </itemizedlist> -</section> -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layout.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,115 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:layout</keyword> - <keyword>rich:layout</keyword> - - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.layout</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlLayout</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Layout</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.LayoutRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.layoutTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest layout with the <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> on a page, - use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:layout> - <rich:layoutPanel position="center"> - <!--center--> - </rich:layoutPanel> -</rich:layout> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlLayout; -... -Htmllayout mylayout = new HtmlLayout(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - - <para>The <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> allows to build a grid that can be used to make the layout on a page. The <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> is used in conjunction with the <emphasis role="bold"><property>&lt;rich:layoutPanel&gt;</property></emphasis> that is used as a child element and carries the main burden of building the grid.</para> - - <para>Hence, you need to use the <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> as a container and <emphasis role="bold"><property>&lt;rich:layoutPanel&gt;</property></emphasis> to create areas inside the container.</para> This is how you can make a layout with 5 areas: - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:layout> - <rich:layoutPanel position="top"> - <!--top--> - </rich:layoutPanel> - <rich:layoutPanel position="left"> - <!--left--> - </rich:layoutPanel> - <rich:layoutPanel position="center"> - <!--center--> - </rich:layoutPanel> - <rich:layoutPanel position="right"> - <!--right--> - </rich:layoutPanel> - <rich:layoutPanel position="bottom"> - <!--bottom--> - </rich:layoutPanel> -</rich:layout> -...]]></programlisting> - <para>To get more details about <emphasis role="bold"><property>&lt;rich:layoutPanel&gt;</property></emphasis> please read the <link linkend="rich_layoutPanel"> chapter about layoutPanel </link> in the guide.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para>Visit - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf... page at - RichFaces Live Demo for examples of component usage and their sources.</para> - <para>The <ulink url="http://www.jboss.org/community/docs/DOC-13336">Layout components for RichFaces 3.3.1</ulink> on the JBoss.org Wiki</para> - - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,27 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section id="layoutPanel"> - <sectioninfo> - <keywordset> - <keyword>rich:layoutPanel</keyword> - </keywordset> - <releaseinfo>3.3.1</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:layouPanel&gt;</property> - </emphasis> is an auxiliary component used to create layout areas within the - <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> container. - </para> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - - <listitem><para>Cross-browser compatibility</para></listitem> - <listitem><para>Provides possibility of an easy layout creation</para></listitem> - - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/layoutPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,115 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:layoutPanel</keyword> - <keyword>layoutPanel</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.LayoutPanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlLayoutPanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.LayoutPanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.LayoutPanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.LayoutPanelTag</entry> - </row> - - </tbody> - - </tgroup> - - - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:layout> - <rich:layoutPanel position="center"> - <!--center--> - </rich:layoutPanel> -</rich:layout> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmllayoutPanel; -... -HtmllayoutPanel mylayoutPanel = new HtmllayoutPanel(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:layoutPanel&gt;</property> - </emphasis> component is used to split the area inside the <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> into up to 5 parts: top, left, center, right, bottom. - - </para> - <para>The <emphasis><property>&quot;position&quot;</property></emphasis> attribute defines the position of the <emphasis role="bold"><property>&lt;rich:layoutPanel&gt;</property></emphasis> in the area created with <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> .</para> -<programlisting role="XML"><![CDATA[... -<rich:layout> - <rich:layoutPanel position="top"> - <!--top--> - </rich:layoutPanel> - <rich:layoutPanel position="left"> - <!--left--> - </rich:layoutPanel> - <rich:layoutPanel position="center"> - <!--center--> - </rich:layoutPanel> - <rich:layoutPanel position="right"> - <!--right--> - </rich:layoutPanel> - <rich:layoutPanel position="bottom"> - <!--bottom--> - </rich:layoutPanel> -</rich:layout> -...]]></programlisting> - - <para>You can specify the width of the layout area with the <emphasis><property>&quot;width&quot;</property></emphasis>attribute.</para> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf... - >On RichFaces Live Demo page </ulink> you can see an example of <emphasis role="bold"> - <property>&lt;rich:layoutPanel&gt;</property> - </emphasis> usage and sources for the given example. </para> - <para>The <link linkend="rich_layout"><emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis></link> chapter of the guide.</para> - <para>The <ulink url="http://www.jboss.org/community/docs/DOC-13336">Layout components for RichFaces 3.3.1</ulink> on the JBoss.org Wiki.</para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:listShuttle</keyword> - </keywordset> - <releaseinfo>3.1.3</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> component is used for moving chosen items - from one list into another with their optional reordering there.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:ListShuttle&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/listShuttle_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Reordering possibility for lists items</para></listitem> - <listitem><para>Multiple selection of lists items</para></listitem> - <listitem><para>Keyboard support</para></listitem> - <!--listitem> Built-In Drag-and-Drop support</listitem--> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listShuttle.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,1269 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:listShuttle</keyword> - <keyword>listShuttle</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter"> - <h:column> - <f:facet name="header"> - <h:outputText value="Cars" /> - </f:facet> - <h:outputText value="#{item.name}" /> - </h:column> -</rich:listShuttle> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlListShuttle; -... -HtmlListShuttle myListShuttle = new HtmlListShuttle(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> component consists of the following parts: <itemizedlist> - <listitem><para>two <property>item lists</property> (source and target). List consists of - items. Each item has three different representations: common, selected, active</para></listitem> - <listitem><para>optional <property>caption</property> element</para></listitem> - <listitem><para><property>optional ordering controls set</property> is a set of controls - that performs reordering</para></listitem> - <listitem><para><property>move controls set</property> is a set of controls, which - performs moving items between lists</para></listitem> - </itemizedlist> - </para> - <note> - <title>Note:</title> - <para>Now the listener can not be called from the column facet. This is a temporary limitation. The additional information can be found in <ulink url="http://jira.jboss.org/jira/browse/RF-5327">RichFaces Jira</ulink>.</para> - </note> - <para> The <emphasis> - <property>&quot;sourceValue&quot; </property> - </emphasis> attribute defines a List or Array of items to be shown in the source list.</para> - <para>The <emphasis> - <property>&quot;targetValue&quot; </property> - </emphasis> attribute defines a List or Array of items to be shown in the target list.</para> - <para> The <emphasis> - <property>&quot;var&quot; </property> - </emphasis> attribute could be shared between both Lists or Arrays to define lists on the page.</para> - - <para> - The <emphasis><property>&quot;sourceRequired&quot;</property></emphasis> and - <emphasis><property>&quot;targetRequired&quot;</property></emphasis> attributes define the case when - source and target values are being validated. If the value of both attributes is &quot;true&quot; - there should be at least one item in source and target lists. Otherwise validation fails. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form id="myForm"> - <rich:messages> - <f:facet name="errorMarker"> - <h:graphicImage value="/images/ajax/error.gif" /> - </f:facet> - </rich:messages> - <rich:listShuttle id="myListShuttle" sourceValue="#{toolBar.freeItems}" targetValue="#{toolBar.items}" - sourceRequired = "true" targetRequired = "true" var="items" converter="listShuttleconverter" - sourceCaptionLabel="Source List" targetCaptionLabel="Target List"> - <rich:column> - <h:graphicImage value="#{items.iconURI}" /> - </rich:column> - <rich:column> - <h:outputText value="#{items.label}" /> - </rich:column> - </rich:listShuttle> - <a4j:commandButton value="Submit" /> -</h:form> -...]]></programlisting> - <para> - In the example above the source list is empty. If you submit the form validation fails and error message appears on a page. - </para> - <para> - This is the result: - </para> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/listShuttle2.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - The <emphasis> - <property>&quot;converter&quot; </property> - </emphasis> attribute is used to convert component data to a particular component&apos;s value. - For example, when you select items in a list, a converter is used to format a set of objects to a strings to be displayed. - </para> - <note id="conv"> - - </note> - <para> - The <emphasis> - <property>&quot;sourceSelection&quot; </property> - </emphasis> attribute stores the collection of items selected by you in the source list. - The <emphasis> - <property>&quot;targetSelection&quot; </property> - </emphasis> attribute stores the collection of items selected by you in the target list. - </para> - <para>Captions could be added to a list only after it was defined as a <emphasis> - <property>&quot;sourceCaption&quot;</property> - </emphasis> and <emphasis> - <property>&quot;targetCaption&quot;</property> - </emphasis> named facets inside the component or defined with the <emphasis> - <property>&quot;sourceCaptionLabel&quot;</property> - </emphasis> and <emphasis> - <property>&quot;targetCaptionLabel&quot;</property> - </emphasis> attribute. - </para> - <programlisting role="XML"><![CDATA[... -<rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" sourceSelection="#{bean.sourceSelection}" - targetSelection="#{bean.targetSelection}" converter="listShuttleconverter"> - <f:facet name="sourceCaption"> - <h:outputText value="Cars Store #1" /> - </f:facet> - <f:facet name="targetCaption"> - <h:outputText value="Cars Store #2" /> - </f:facet> - <rich:column> - <h:outputText value="#{items.name}" /> - </rich:column> -</rich:listShuttle> -...]]></programlisting> - <!-- ordering control set--> - <para>The <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> component provides the possibility to use <property>ordering controls - set</property>, which performs reordering in the target item list. Every control has - possibility to be disabled. </para> - <para>An <property>ordering controls set</property> could be defined with - <emphasis><property>&quot;topControlLabel&quot;</property></emphasis>, <emphasis><property>&quot;bottomControlLabel&quot;</property></emphasis>, - <emphasis><property>&quot;upControlLabel&quot;</property></emphasis>, <emphasis><property>&quot;downControlLabel&quot;</property></emphasis>attributes. - </para> - <para>It is also possible to use - <emphasis> - <property> &quot;topControl&quot; </property> - </emphasis>, <emphasis> - <property>&quot;topControlDisabled&quot;</property> - </emphasis>, <emphasis> - <property> &quot;bottomControl&quot;</property> - </emphasis>, <emphasis> - <property> &quot;bottomControlDisabled&quot; </property> - </emphasis>, <emphasis> - <property> &quot;upControl&quot; </property> - </emphasis>, <emphasis> - <property> &quot;upControlDisabled&quot; </property> - </emphasis>, <emphasis> - <property> &quot;downControl&quot;</property> - </emphasis>, <emphasis> - <property> &quot;downControlDisabled&quot; </property> - </emphasis> facets in order to replace the default controls with facets content. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter"> - ... - <f:facet name="topControl"> - <h:outputText value="Move to top" /> - </f:facet> - <f:facet name="upControl"> - <h:outputText value="Move up" /> - </f:facet> - <f:facet name="downControl"> - <h:outputText value="Move down" /> - </f:facet> - <f:facet name="bottomControl"> - <h:outputText value="Move to bottom" /> - </f:facet> -</rich:listShuttle> -... -]]></programlisting> - - <!-- copy/move control set --> - - <para>The <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis>component also provides 4 predefined controls in <property>move - controls set</property> for moving items between source and target lists. - Every control has possibility to be disabled. </para> - <para>A <property>move controls set</property> could be defined with - <emphasis><property>&quot;copyControlLabel&quot;</property></emphasis>, <emphasis><property>&quot;removeControlLabel&quot;</property></emphasis>, - <emphasis><property>&quot;copyAllControlLabel&quot;</property></emphasis>, <emphasis><property>&quot;removeAllControlLabel&quot;</property></emphasis>attributes. - </para> - <para>It is also possible to use - <emphasis> - <property>&quot;copyControl&quot; </property> - </emphasis>, - <emphasis> - <property>&quot;removeControl&quot; </property> - </emphasis>, - <emphasis> - <property>&quot;copyAllControl&quot; </property> - </emphasis>, - <emphasis> - <property>&quot;removeAllControl&quot; </property> - </emphasis> - facets in order to replace the default controls with facets content. - </para> - <programlisting role="XML"><![CDATA[... -<rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter" - copyControlLabel="Copy" removeControlLabel="Remove" - copyAllControlLabel="Copy all" removeAllControlLabel="Remove all"> - <h:column> - <f:facet name="header"> - <h:outputText value="Cars" /> - </f:facet> - <h:outputText value="#{item.name}" /> - </h:column> -</rich:listShuttle> -... -]]></programlisting> - - <!-- The following facets currently do not work--> - <!--<emphasis> - <property>&quot;copy_disabled&quot; </property> - </emphasis>, --> - <!--<emphasis> - <property>&quot;remove_disabled&quot; </property> - </emphasis>, --> - <!--<emphasis> - <property>&quot;copyAll_disabled&quot; </property> - </emphasis>, --> - <!--<emphasis> - <property>&quot;removeAll_disabled&quot; </property> - </emphasis>--> - - <para>Controls rendering is based on the <emphasis> - <property>&quot;controlsType&quot; </property> - </emphasis> attribute. Possible types are <property>button</property> and - <property>none</property>.</para> - <note> - <para> - Currently the button controls type is based on <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element. - </para> - </note> - <para> - The <emphasis role="bold"><property>&lt;rich:listShuttle&gt;</property></emphasis> component allows to use internationalization method - to redefine and localize the labels. You could use application resource bundle and define - <code>RICH_SHUTTLES_TOP_LABEL</code>, - <code>RICH_SHUTTLES_BOTTOM_LABEL</code>, - <code>RICH_SHUTTLES_UP_LABEL</code>, - <code>RICH_SHUTTLES_DOWN_LABEL</code> - - <code>RICH_LIST_SHUTTLE_COPY_ALL_LABEL</code>, - <code>RICH_LIST_SHUTTLE_COPY_LABEL</code>, - <code>RICH_LIST_SHUTTLE_REMOVE_ALL_LABEL</code>, - <code>RICH_LIST_SHUTTLE_REMOVE_LABEL</code> there. - </para> - <para> - You could also pack <code>org.richfaces.renderkit.listShuttle</code> resource bundle with your JARs defining the same properties. - </para> - <!-- template wiil be done in 3.2.0 --> - <!--para>The <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> component provides the possibility to be customized using templating. The - customization could be performed by layout definition nested to component.</para> - <para>10 elements could be provided to be defined inside template (all standard controls - should also possible to use inside): {sourceList}, {targetList}, {CopyControl}, - {removeCotrol}, {copyAllControl}, {removeAllControl}, {topcontrol}, {bottomControl}, - {downCotrol}, {upControl}.</para> - <para>The markup defined in the initial picture could be defined as in the following - example.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:listShuttle> -... - <h:panelGrid columns="4"> - <h:outputText value="{sourceList}"/> - <h:panelGroup> - <h:outputText value="{copyAllControl}"/> - <h:outputText value="{copyControl}"/> - <h:outputText value="{removeControl}"/> - <h:outputText value="{removeAllControl}"/> - </h:panelGroup> - <h:outputText value="targetList"/> - <h:panelGroup> - <h:outputText value="{topControl}"/> - <h:outputText value="{upControl}"/> - <h:outputText value="{downControl}"/> - <h:outputText value="{bottomControl}"/> - </h:panelGroup> - </h:panelGrid> - </rich:listShuttle> -... -]]></programlisting--> - <table> - <title>Keyboard usage for elements selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Keys and combinations </entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>CTRL+click</entry> - <entry>Inverts selection for an item</entry> - </row> - <row> - <entry>SHIFT+click</entry> - <entry>Selects all rows from active one to a clicked row if they differ, - else select the actve row. All other selections are cleared</entry> - </row> - <row> - <entry>CTRL+A</entry> - <entry>Selects all elements inside the list if some active element is - already present in a list</entry> - </row> - <row> - <entry>Up, Down arrows</entry> - <entry>Changes the active element to the next or previous in a list and make - it the only selected. Scroll follows the selection to keep it - visible</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Keyboard usage for elements reordering</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Keys and combinations </entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>Home</entry> - <entry>Moves selected set to the top of a list (for target list only)</entry> - </row> - <row> - <entry>End</entry> - <entry>Moves selected set to the bottom of a list (for target list only)</entry> - </row> - <row> - <entry>CTRL+Up arrow</entry> - <entry>Moves selected item to one position upper</entry> - </row> - <row> - <entry>CTRL+Down arrow</entry> - <entry>Moves selected item to one position lower</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>JavaScript API</title> - - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <!-- - <row> - <entry>SortAscending()</entry> - <entry>Sorts items in the list ascending</entry> - </row> - <row> - <entry>SortDescending()</entry> - <entry>Sorts items in the list descending</entry> - </row> - <row> - <entry>Sort()</entry> - <entry>Inverts current sorting</entry> - </row> - --> - <!--Controls common API --> - <!--row> - <entry role="tbi">hide()</entry> - <entry role="tbi">Hides ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">show()</entry> - <entry role="tbi">Shows ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">isShown()</entry> - <entry role="tbi">Checks if current control is shown (to be implemented)</entry> - </row--> - <row> - <entry role="tbi">enable()</entry> - <entry role="tbi">Enables ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">disable()</entry> - <entry role="tbi">Disables ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">isEnabled()</entry> - <entry role="tbi">Checks if current control is enabled (to be implemented)</entry> - </row> - <!--List managing API --> - <row> - <entry>up()</entry> - <entry>Moves up selected item in the list</entry> - </row> - <row> - <entry>down()</entry> - <entry>Moves down selected item in the list</entry> - </row> - <row> - <entry>top()</entry> - <entry>Moves top selected item in the list</entry> - </row> - <row> - <entry>bottom()</entry> - <entry>Moves bottom selected item in the list</entry> - </row> - <row> - <entry>copy()</entry> - <entry>Copies selected item from the source list to the target list</entry> - </row> - <row> - <entry>remove()</entry> - <entry>Removes selected item from the target list to the source list</entry> - </row> - <row> - <entry>copyAll()</entry> - <entry>Copies all items from the source list to the target list</entry> - </row> - <row> - <entry>removeAll()</entry> - <entry>Removes all items from the target list to the source list </entry> - </row> - <row> - <entry role="tbi">getSelection()</entry> - <entry role="tbi">Returns currently selected item (to be implemented)</entry> - </row> - <row> - <entry role="tbi">getItems()</entry> - <entry role="tbi">Returns the collection of all items (to be implemented)</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>copyAllControl</entry> - <entry>Redefines the label content for the &quot;copyAll&quot; control. Related attribute is &quot;copyAllControlLabel&quot;</entry> - </row> - <row> - <entry>removeAllControl</entry> - <entry>Redefines the label content for the &quot;removeAll&quot; control. Related attribute is &quot;removeAllControlLabel&quot;</entry> - </row> - <row> - <entry>copyControl</entry> - <entry>Redefines the label content for the &quot;copy&quot; control. Related attribute is &quot;copyControlLabel&quot;</entry> - </row> - <row> - <entry>removeControl</entry> - <entry>Redefines the label content for the &quot;remove&quot; control. Related attribute is &quot;removeControlLabel&quot;</entry> - </row> - <row> - <entry>copyAllControlDisabled</entry> - <entry>Redefines the disabled label content for the &quot;copyAll&quot; control</entry> - </row> - <row> - <entry>removeAllControlDisabled</entry> - <entry>Redefines the disabled label content for the &quot;removeAll&quot; control</entry> - </row> - <row> - <entry>caption</entry> - <entry>Redefines the caption control</entry> - </row> - <row> - <entry>sourceCaption</entry> - <entry>Defines source list caption representation text. Related attribute is &quot;sourceCaptionLabel&quot;</entry> - </row> - <row> - <entry>targetCaption</entry> - <entry>Defines source list target representation text. Related attribute is &quot;targetCaptionLabel&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for items in the source and target lists</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for caption in the source and target lists</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>headerWeightFont</entry> - <entry>font-weight</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a selected rows in the source and target lists</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a header cell</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <!--row> - <entry>headerWeightFont</entry> - <entry>font-weight</entry> - </row--> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a selected cell</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters redefinition for an active cell</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for controls</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a disabled button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button highlight</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a pressed button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button content</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Style classes</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/listShuttle_cn2.png" scale="80" /> - </imageobject> - </mediaobject> - <mediaobject> - <imageobject> - <imagedata fileref="images/listShuttle_cn.png" scale="80"/> - </imageobject> - </mediaobject> - </figure> - - <table id="CN"> - <title>Classes names that define a list representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-list-shuttle</entry> - <entry>Defines styles for a wrapper table element of a listShuttle</entry> - </row> - <row> - <entry>rich-list-shuttle-caption</entry> - <entry>Defines styles for a list caption</entry> - </row> - <row> - <entry>rich-shuttle-body</entry> - <entry>Defines styles for a list body</entry> - </row> - <row> - <entry>rich-shuttle-list-content</entry> - <entry>Defines styles for a list content</entry> - </row> - <row> - <entry>rich-shuttle-source-items</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element for source list</entry> - </row> - <row> - <entry>rich-shuttle-target-items</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element for target list</entry> - </row> - <row> - <entry>rich-shuttle-list-header</entry> - <entry>Defines styles for a lists header</entry> - </row> - <row> - <entry>rich-shuttle-header-tab-cell</entry> - <entry>Defines styles for a header cell</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a caption representations in a source and target lists</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-shuttle-source-caption</entry> - <entry>Defines styles for a caption in a source list</entry> - </row> - <row> - <entry>rich-shuttle-target-caption</entry> - <entry>Defines styles for a caption in a target list</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a rows representations in a source list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-shuttle-source-row</entry> - <entry>Defines styles for a row in a source list</entry> - </row> - <row> - <entry>rich-shuttle-source-row-selected</entry> - <entry>Defines styles for a selected row in a source list</entry> - </row> - <row> - <entry>rich-shuttle-source-row-active</entry> - <entry>Defines styles for an active row in a source list</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define a rows representations in a target list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-shuttle-target-row</entry> - <entry>Defines styles for a row in a target list</entry> - </row> - <row> - <entry>rich-shuttle-target-row-selected</entry> - <entry>Defines styles for a selected row in a target list</entry> - </row> - <row> - <entry>rich-shuttle-target-row-active</entry> - <entry>Defines styles for an active row in a target list</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define a cells representations in a source list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-shuttle-source-cell</entry> - <entry>Defines styles for a cell in a source list</entry> - </row> - <row> - <entry>rich-shuttle-source-cell-selected</entry> - <entry>Defines styles for a selected cell in a source list</entry> - </row> - <row> - <entry>rich-shuttle-source-cell-active</entry> - <entry>Defines styles for an active cell in a source list</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define a cells representations in a target list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-shuttle-target-cell</entry> - <entry>Defines styles for a cell in a target list</entry> - </row> - <row> - <entry>rich-shuttle-target-cell-selected</entry> - <entry>Defines styles for a selected cell in a target list</entry> - </row> - <row> - <entry>rich-shuttle-target-cell-active</entry> - <entry>Defines styles for an active cell in a target list</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define controls representations</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-shuttle-controls</entry> - <entry>Defines styles for a controls group</entry> - </row> - <row> - <entry>rich-shuttle-top</entry> - <entry>Defines styles for a &quot;Top&quot; control</entry> - </row> - <row> - <entry>rich-shuttle-bottom</entry> - <entry>Defines styles for a &quot;Bottom&quot; control</entry> - </row> - <row> - <entry>rich-shuttle-up</entry> - <entry>Defines styles for a &quot;Up&quot; control</entry> - </row> - <row> - <entry>rich-shuttle-down</entry> - <entry>Defines styles for a &quot;Down&quot; control</entry> - </row> - - <row> - <entry>rich-shuttle-copy</entry> - <entry>Defines styles for a &quot;Copy&quot; control</entry> - </row> - - <row> - <entry>rich-shuttle-remove</entry> - <entry>Defines styles for a &quot;Remove&quot; control</entry> - </row> - - <row> - <entry>rich-shuttle-copyAll</entry> - <entry>Defines styles for a &quot;copyAll&quot; control</entry> - </row> - <row> - <entry>rich-shuttle-removeAll</entry> - <entry>Defines styles for a &quot;removeAll&quot; control</entry> - </row> - <row> - <entry>rich-shuttle-control-disabled</entry> - <entry>Defines styles for a control in a disabled state</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a button representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-list-shuttle-button</entry> - <entry>Defines styles for a button</entry> - </row> - <row> - <entry>rich-list-shuttle-button-disabled</entry> - <entry>Defines styles for a disabled button</entry> - </row> - <row> - <entry>rich-list-shuttle-button-light</entry> - <entry>Defines styles for a button highlight</entry> - </row> - <row> - <entry>rich-list-shuttle-button-press</entry> - <entry>Defines styles for a pressed button</entry> - </row> - <row> - <entry>rich-list-shuttle-button-content</entry> - <entry>Defines styles for a button content</entry> - </row> - <row> - <entry>rich-list-shuttle-button-selection</entry> - <entry>Defines styles for a button selection</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="CN"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-shuttle-source-row-active{ - background-color:#FFE4B5; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/listShuttle_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example an active row background color in the source list was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:listShuttle&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:listShuttle&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style:italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;rowClasses&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:listShuttle&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:listShuttle ... rowClasses="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/listShuttle_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, font style for row items was changed.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/listShuttle... - >On RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> - <property>&lt;rich:listShuttle&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listener.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listener.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/listener.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,18 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:ajaxListener</keyword> - </keywordset> - </sectioninfo> - - <title>Description</title> - <para> The <emphasis role="bold"> - <property>&lt;a4j:ajaxListener&gt;</property> - </emphasis> component is the same one as <emphasis role="bold"> - <property>&lt;f:action&gt;</property> - </emphasis> or <emphasis role="bold"> - <property>&lt;f:value&gt;</property> - </emphasis> components but it is used for an Ajax container. -</para> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:loadBundle</keyword> - </keywordset> - </sectioninfo> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:loadBundle&gt;</property></emphasis> component is similar to JSF <emphasis role="bold"><property>&lt;f:loadBundle&gt;</property></emphasis>: - it loads a resource bundle localized for the Locale of the current view and stores properties as a Map in the current request attributes of the current request. - </para> -</section> - </chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadBundle.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,210 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:loadBundle</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Bundle</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.Bundle</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxLoadBundle</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following syntax: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:loadBundle baseName="demo.bundle.Messages" var="Message"/>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxLoadBundle; -... -AjaxLoadBundle myBundle = new AjaxLoadBundle(); -...]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - <para> - Internationalization and Localization are the processes of adaptation of web applications for different languages and cultures. - When you develop English and German versions of a site it can be said that you localize the site for England and Germany. - Language is not the only thing that undergoes the localization — dates, times, numbers, currencies, phone numbers, addresses, graphics, icons, colors, personal titles and even favourite sounds are also varies from country to country. - It means that an internationalized application may have lots of different types information, which should be changed depending on user location. - </para> - <para> - There are several approaches of organizing the localization. - The JSF <emphasis role="bold"><property>&lt;h:loadBundle&gt;</property></emphasis> loads bundles into the request scope when page is being rendered and updates all the needed areas in a crowd. - Bundle information loaded in such way becomes unavailable when dealing with Ajax requests that work in their own request scopes. - The approach provided by RichFaces <emphasis role="bold"><property>&lt;a4j:loadBundle&gt;</property></emphasis> component enriches one given by the JSF <emphasis role="bold"><property>&lt;h:loadBundle&gt;</property></emphasis> with Ajax capability: - it allows to use reference to a particular bundle item during an Ajax update. - </para> - <para> - The <emphasis role="bold"><property>&lt;a4j:loadBundle&gt;</property></emphasis> usage is pretty simple. - Imagine a small application that says &quot;Hello!&quot; in different languages, where switching between translations (localizations, in our case) occurs when corresponding links are being clicked, like you have used to see on lots of sites. - In our JSF with RichFaces application (those who feel not strong with that should better read the &quot;<link linkend="GettingStarted">Getting started with RichFaces</link>&quot; chapter) create resource bundles with &quot;Hello!&quot; message for three different languages: English, German and Italian. - Resource bundles are represented with <code>*.properties</code> extention files that keep items in <code>key(name) - value</code> pairs. - A key for an item should be the same for all locales. - </para> - <figure> - <title> - Resource bundles <code>*.properties</code> files with Keys and Values for multi-language application. - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/loadBundle_init.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - Мessage resource bundles should be registered in the Faces configuration (<code>faces-config.xml</code>) file of your application as <code>&lt;message-bundle&gt;</code> inside the <code>&lt;application&gt;</code> element. - Name of a resource should be specified without language or country code and without <code>.properties</code> extension. - Supported locales should be specified inside the <code>&lt;supported-locale&gt;</code> element. - </para> - <para> - <emphasis role="bold">Registering resource bundles in the Faces configuration file:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<application> - <locale-config> - <default-locale>en</default-locale> - <supported-locale>en</supported-locale> - <supported-locale>de</supported-locale> - <supported-locale>it</supported-locale> - </locale-config> - <message-bundle>demo.message</message-bundle> -</application>]]></programlisting> - - <para> - For the application we will use JSF <code>javax.faces.component.UIViewRoot.setLocale</code> method that will set a needed Locale - (each link will invoke corresponding method — there are, off course, another ways to do that). - </para> - <para> - <emphasis role="bold"><code>ChangeLocale</code> Java class with three methods for setting the correponding Locale:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[package demo; - - import java.util.Locale; - import javax.faces.context.FacesContext; - - public class ChangeLocale { - public String germanAction() { - FacesContext context = FacesContext.getCurrentInstance(); - context.getViewRoot().setLocale(Locale.GERMAN); - return null; - } - - public String englishAction() { - FacesContext context = FacesContext.getCurrentInstance(); - context.getViewRoot().setLocale(Locale.ENGLISH); - return null; - } - - public String italianAction() { - FacesContext context = FacesContext.getCurrentInstance(); - context.getViewRoot().setLocale(Locale.ITALIAN); - return null; - } -}]]></programlisting> - - <para> - Recently, the JSP page will look as following: - </para> - - <programlisting role="XML"><![CDATA[<h:form> - <a4j:loadBundle var="msg" basename="demo.message"/> - <h:outputText id="messageBundle" value="#{msg.greeting}"/> - <a4j:commandLink value="De" action="#{changeLocale.germanAction}" reRender="messageBundle" /> - <a4j:commandLink value="Eng" action="#{changeLocale.englishAction}" reRender="messageBundle" /> - <a4j:commandLink value="It" action="#{changeLocale.italianAction}" reRender="messageBundle" /> -</h:form> ]]></programlisting> - - <para> - As an output we will get a simple application with English &quot;Hello!&quot; by default. - Clicking on links &quot;De&quot;, &quot;Eng&quot; and &quot;It&quot; will show the messages specified within the corresponding <code>*.properties</code> file. - To reference to a particular bundle item during an Ajax update it is necessary to point the component(s) that shold be re-rendered (in this example it is done with the help of <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis> <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute). - </para> - - <figure> - <title> - Using of the RichFaces <emphasis role="bold"><property>&lt;a4j:loadBundle&gt;</property></emphasis> component for application localization. - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/loadBundle2.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/bundle.jsf?... page</ulink> at RichFaces LiveDemo for additional information on the component. - </para> - <para> - More useful examples and articles: - </para> - <itemizedlist> - <listitem> - <para> - <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... tag reference</ulink> at java.sun portal; - </para> - </listitem> - - <listitem> - <para> - <ulink url="http://java.sun.com/docs/books/tutorial/i18n/resbundle/propfile... a ResourceBundle with Properties Files</ulink> at java.sun portal; - </para> - </listitem> - - <listitem> - <para> - <ulink url="http://www.objectsource.com/j2eechapters/Ch19-I18N_and_L10N.htm... and Localization of J2EE application</ulink> explains main principles of the internationalization of a web application; - </para> - </listitem> - - <listitem> - <para> - <ulink url="http://www.laliluna.de/javaserver-faces-message-resource-bundle-tutorial.html">one more useful tutorial</ulink> explains the internationalization of a web application using JSF message resource bundle; - </para> - </listitem> - - <listitem> - <para> - <ulink url="http://www.i-coding.de/www/en/jsf/application/locale.html">Some special problem with JSF internationalization</ulink> and solution from the i-coding.de portal. - </para> - </listitem> - - </itemizedlist> - - </section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,14 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<root> - <section> - <sectioninfo> - <keywordset> - <keyword>loadScript</keyword> - </keywordset> - </sectioninfo> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:loadScript&gt;</property></emphasis> component allows to load scripts from alternative sources like a jar files, etc. - </para> - </section> -</root> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadScript.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,87 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:loadScript</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.LoadScript</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.LoadScript</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlLoadScript</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.LoadScriptRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:loadScript src="scripts/someScript.js"/> -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlLoadScript; -... -HtmlLoadScript myScript = new HtmlLoadScript(); -... -]]></programlisting> - </section> - <section> - <title>Details of usage</title> - <para> - The main attribute of the <emphasis role="bold"><property>&lt;a4j:loadScript&gt;</property></emphasis> is <emphasis><property>&quot;src&quot;</property></emphasis>, wich defines the context relative path to the script. - The value of the attribute does not require a prefix of an application. - Leading slash in the path means the root of the web context. - It is also possible to use <code>resource:///</code> prefix to access the script file using RichFaces resource framework. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:loadScript src="resource:///org/mycompany/assets/script/focus.js" />]]></programlisting> - <para> - The <emphasis><property>&quot;src&quot;</property></emphasis> attribute passses value to the <code>getResourceURL()</code> method of the ViewHandler of the application, - The result is passed through the <code>encodeResourceURL()</code> method of the ExternalContext. - </para> - - -</section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/script.jsf?... page at RichFaces LiveDemo</ulink> for examples of component usage abd their sources. - </para> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <section> - <sectioninfo> - <keywordset> - <keyword>loadStyle</keyword> - </keywordset> - </sectioninfo> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:loadStyle&gt;</property></emphasis> component allows to load a style sheet file from alternative sources like a jar file, etc. - It inserts stylesheet links to the head element. - </para> - </section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/loadStyle.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,87 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:loadStyle</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.LoadStyle</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.LoadStyle</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlLoadStyle</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.LoadStyleRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:loadStyle src="styles/style.css"/> -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlLoadStyle; -... -HtmlLoadScript myStyle = new HtmlLoadStyle(); -... -]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - <para> - The main attribute of the <emphasis role="bold"><property>&lt;a4j:loadStylet&gt;</property></emphasis> is <emphasis><property>&quot;src&quot;</property></emphasis>, wich defines the context relative path to the script. - The value of the attribute does not require a prefix of an application. - Leading slash in the path means the root of the web context. - It is also possible to use <code>resource:///</code> prefix to access the script file using RichFaces resource framework. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:loadStyle src="resource:///org/mycompany/assets/script/focus.js" />]]></programlisting> - <para> - The <emphasis><property>&quot;src&quot;</property></emphasis> attribute passses value to the <code>getResourceURL()</code> method of the ViewHandler of the application, - The result is passed through the <code>encodeResourceURL()</code> method of the ExternalContext. - </para> - - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/style.jsf?c... page at RichFaces LiveDemo</ulink> for examples of component usage abd their sources. - </para> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,13 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:log</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;a4j:log &gt;</property></emphasis> component generates JavaScript that opens a debug window with useful debug information.</para> - </section> -</root> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/log.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,90 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:log</keyword> - </keywordset> - </chapterinfo> - <table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Log</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.Log</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxLog</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.LogRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para><programlisting role="XML"><![CDATA[<a4j:log popup="false" level="ALL" style="width: 800px; height: 300px;"></a4j:log>]]></programlisting> - <para>Then, in order to open a log window, press &quot;CTRL+SHIFT+L&quot; on a page with the component.</para> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxLog; -... -AjaxLog myLog = new AjaxLog(); -...]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:log &gt;</property></emphasis> component generates JavaScript that opens a log window with useful debug information, - which contains data on requests and responses, DOM tree changes et al. - The log could be generated not only in a new window, but also on the current page in a separate <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element. - This feature is controlled with the component <emphasis><property>&quot;popup&quot;</property></emphasis> attribute. - The window is opened on pressing of &quot;CTRL+SHIFT+L&quot;, which is default registered key. - The hot key could be changed with the <emphasis><property>&quot;hotkey&quot;</property></emphasis> attribute, where it&apos;s necessary to define one letter that together with &quot;CTRL+SHIFT&quot; opens a window. - </para> - - - <para> - The <emphasis><property>&quot;level&quot;</property></emphasis> attribute has several possible values &quot;FATAL&quot;, &quot;ERROR&quot;, &quot;WARN&quot;, &quot;INFO&quot;, &quot;ALL&quot; and is used when it is necessary to change a logging level. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:log level="ALL" popup="false" width="400" height="200"/>]]></programlisting> - - <para> - The component defined this way is decoded on a page as <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> inside a page, where all the information beginning with informational message is generated.</para> - <note> - <title>Note:</title> - <para><emphasis role="bold"><property>&lt;a4j:log&gt;</property></emphasis> is getting renewed automatically after execution of Ajax requests. Do not renew <emphasis role="bold"><property>&lt;a4j:log&gt;</property></emphasis> by using reRender!</para> - </note> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/log.jsf?c=l... page</ulink> at RichFaces LiveDemo for example of component usage and their sources. - </para> - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:mediaOutput</keyword> - </keywordset> - </sectioninfo> - -<title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> component is a facility for generating images, video, sounds and other binary resources defined by you on-the-fly. - </para> -</section> -</root> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/mediaOutput.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,194 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:mediaOutput</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.MediaOutput</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.Resource</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.MediaOutput</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.MediaOutputRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Component definition on a page for graphical data output</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:mediaOutput element="img" cacheable="false" session="true" createContent="#{paintBean.paint}" value="#{paintData}" mimeType="image/png"/>]]></programlisting> - - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.MediaOutput; -... -MediaOutput myMedia = new MediaOutput (); -... -]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> component is used for generating images, videos or sounds on-the-fly. - Let's consider an image creation and generate a JPEG image with verification digits for captcha (the image will include just digits without any graphical noise and distortion). - </para> - <para> - Write the following line on the page: - </para> - <programlisting role="XML"><![CDATA[<a4j:mediaOutput element="img" cacheable="false" session="false" createContent="#{mediaBean.paint}" value="#{mediaData}" mimeType="image/jpeg"/>]]></programlisting> - - <para> - As You see from the example above, first it is necessary to specify the kind of media data You want to generate. - This can be done with the help of <emphasis><property>&quot;element&quot;</property></emphasis> attribute, which possible values are <code>img</code>, <code>object</code>, <code>applet</code>, <code>script</code>, <code>link</code> or <code>a</code>. - </para> - <para> - The <emphasis><property>&quot;cacheable&quot;</property></emphasis> defines whether the response will be cached or not. In our case we don't need our image to be cached, cause we need it to be changed every time we refresh the page. - </para> - <para> - The <emphasis><property>&quot;mimeType&quot;</property></emphasis> attribute defines the type of output content. It is used to define the corresponded type in the header of an HTTP response. - </para> - - <para>The <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> attribute has two main attributes:</para> - <itemizedlist> - <listitem> - <para> - <emphasis><property>&quot;createContent&quot;</property></emphasis> specifies a method that will be used for content creating. - The method accepts two parameters. - The first one — with an <code>java.io.OutputStream</code> type — is a reference to the stream that should be used for output. - An output stream accepts output bytes and sends them to a recipient. - The second parameter is a reference to the component&apos;s <emphasis><property>&quot;value&quot;</property></emphasis> attribute and has <code>java.lang.Object</code> type. - This parameter contains deserialized object with data specified in the <emphasis><property>&quot;value&quot;</property></emphasis> attribute. - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;value&quot;</property></emphasis> attribute specifies a bean class that keeps data for transmitting it into a stream in the method specified with <emphasis><property>&quot;createContent&quot;</property></emphasis> . - </para> - </listitem> - </itemizedlist> - - <para> - Now let's create the <code>MediaBean</code> class and specify there a primitive random-number generator and <code>paint</code> method that will convert the generated numbers into an output stream and give a JPEG image as a result. - The code for <code>MediaBean</code> class is going to look as following: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[package demo; - -import java.awt.Graphics2D; -import java.awt.image.BufferedImage; -import java.io.IOException; -import java.io.OutputStream; -import java.util.Random; -import javax.imageio.ImageIO; - -public class MediaBean { - public void paint(OutputStream out, Object data) throws IOException{ - Integer high = 9999; - Integer low = 1000; - Random generator = new Random(); - Integer digits = generator.nextInt(high - low + 1) + low; - if (data instanceof MediaData) { - MediaData paintData = (MediaData) data; - BufferedImage img = new BufferedImage(paintData.getWidth(),paintData.getHeight(),BufferedImage.TYPE_INT_RGB); - Graphics2D graphics2D = img.createGraphics(); - graphics2D.setBackground(paintData.getBackground()); - graphics2D.setColor(paintData.getDrawColor()); - graphics2D.clearRect(0,0,paintData.getWidth(),paintData.getHeight()); - graphics2D.setFont(paintData.getFont()); - graphics2D.drawString(digits.toString(), 20, 35); - ImageIO.write(img,"png",out); - } - } -}]]></programlisting> - -<para> - Now it is necessary to create a class that will keep transmissional data that will be used as input data for a content creation method. - The code for <code>MediaData</code> class is going to be as following: -</para> - <note> - <title>Note:</title> - <para>A bean class transmitted into value should implement <code>Serializable</code> interface in order to be encoded to the URL of the resource. - </para> - </note> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[package demo; - -import java.awt.Color; -import java.awt.Font; -import java.io.Serializable; - -public class MediaData implements Serializable{ - - private static final long serialVersionUID = 1L; - Integer Width=110; - Integer Height=50; - Color Background=new Color(190, 214, 248); - Color DrawColor=new Color(0,0,0); - Font font = new Font("Serif", Font.TRUETYPE_FONT, 30); - - /* Corresponding getters and setters */ - -}]]></programlisting> - - <para> - As a result the <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> component will generate the following image that will be updated on each page refresh: - </para> - <figure> - <title> - Using the <emphasis role="bold"><property>&lt;a4j:mediaOutput&gt;</property></emphasis> for generating an image for captcha</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/mediaOutput_init.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>Hence, when using the component it&apos;s possible to output your data of any type on a page with Ajax requests.</para> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/mediaOutput... page</ulink> at RichFaces LiveDemo for more examples of component usage and their sources. - </para> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,32 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:menuGroup</keyword> - </keywordset> - </sectioninfo> - <section> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:menuGroup&gt;</property></emphasis> component is used to define an expandable group of items inside a pop-up list or another group.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:menuGroup&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuGroup_init.png" /> - </imageobject> - </mediaobject> - </figure> -</section> -<section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look-and-feel</para></listitem> - <listitem><para>Grouping of any menu&apos;s items</para></listitem> - <listitem><para>Pop-up appearance event customization</para></listitem> - <listitem><para>Support for disabling</para></listitem> - <listitem><para>Smart user-defined positioning</para></listitem> - </itemizedlist> - -</section> - -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,422 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:menuGroup</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.MenuGroup</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlMenuGroup</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DropDownMenu</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.MenuGroupRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.MenuGroupTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu value="Active"> - ... - <rich:menuGroup value="Active"> - <!--Nested menu components--> - </rich:menuGroup> - ... -</rich:dropDownMenu > -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlMenuGroup; -... -HtmlMenuGroup myMenuGroup = new HtmlMenuGroup(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> The <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute defines the text representation of a group element in the page. </para> - <para> The <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> attribute defines an icon for the component. The <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attribute defines an icon for when the group is disabled. Also you can use - the <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> facets. If the facets are defined, the corresponding <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attributes are ignored and the facets&apos; contents are used as icons. - This could be used for an item check box implementation. </para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... -<f:facet name="icon"> - <h:selectBooleanCheckbox value="#{bean.property}"/> -</f:facet> -... -]]></programlisting> - <para> The <emphasis> - <property>&quot;iconFolder&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconFolderDisabled&quot;</property> - </emphasis> attributes are defined for using icons as folder icons. The <emphasis> - <property>&quot;iconFolder&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconFolderDisabled&quot;</property> - </emphasis> facets use their contents as folder icon representations in place of the - attribute values. </para> - <para> The <emphasis> - <property>&quot;direction&quot;</property> - </emphasis> attribute is used to define which way to display the menu as shown in the - example below: </para> - <para>Possible values are:</para> - <itemizedlist> - <listitem> - <para>&quot;left - down&quot; - a submenu is attached to the left side of the menu and is - dropping down</para> - </listitem> - <listitem> - <para>&quot;left - up&quot; - a submenu is attached to the left side of the menu and is dropping - up</para> - </listitem> - <listitem> - <para>&quot;right - down&quot; - a submenu is attached to the right side of the menu and is - dropping down</para> - </listitem> - <listitem> - <para>&quot;right - up&quot; - a submenu is attached to the right side of the menu and is - dropping up</para> - </listitem> - <listitem> - <para>&quot;auto - smart&quot; positioning activation</para> - </listitem> - </itemizedlist> - <para> By default, the <emphasis> - <property>&quot;direction&quot;</property> - </emphasis> attribute is set to &quot;auto&quot;. </para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... -<rich:menuGroup value="Save As..." direction="left-down"> - <rich:menuItem submitMode="ajax" value="Text File" action="#{ddmenu.doSaveText}"/> - <rich:menuItem submitMode="ajax" value="PDF File" action="#{ddmenu.doSavePDF}"/> -</rich:menuGroup> -... -]]></programlisting> - <para> This would be the result: </para> - <figure> - <title>Using the <emphasis><property>&quot;direction&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuGroup2.png"/> - </imageobject> - </mediaobject> - </figure> - <note><title>Note:</title><para> The <emphasis role="bold"> - <property>&lt;rich:menuGroup&gt;</property> - </emphasis> component was designed to be used only for pop-up menu list creation.</para></note> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>icon</entry> - <entry>Redefines the icon for the enabled item state. Related attribute is &quot;icon&quot;</entry> - </row> - <row> - <entry>iconFolder</entry> - <entry>Redefines the folder icon for the enabled item state. Related attribute is &quot;iconFolder&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:menuGroup&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:menuGroup&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a group</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a disabled group</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuGroup_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <table id="tab_mG"> - <title>Classes names that define an appearance of group elements</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-menu-group</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element for a group</entry> - </row> - <row> - <entry>rich-menu-item-label</entry> - <entry>Defines styles for a label of an item</entry> - </row> - <row> - <entry>rich-menu-item-icon</entry> - <entry>Defines styles for the left icon of an item</entry> - </row> - <row> - <entry>rich-menu-item-folder</entry> - <entry>Defines styles for the right icon of an item</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define different states</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-menu-item-label-disabled</entry> - <entry>Defines styles for a label of a disabled item</entry> - </row> - <row> - <entry>rich-menu-item-icon-disabled</entry> - <entry>Defines styles for the left icon of a disabled item</entry> - </row> - <row> - <entry>rich-menu-item-folder-disabled</entry> - <entry>Defines styles for the right icon of a disabled item</entry> - </row> - <row> - <entry>rich-menu-group-hover</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a hover group</entry> - </row> - <row> - <entry>rich-menu-item-icon-enabled</entry> - <entry>Defines styles for the left icon of an enabled item</entry> - </row> - <row> - <entry>rich-menu-item-icon-selected</entry> - <entry>Defines styles for the left icon of a selected item</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:menuGroup&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_mG"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-menu-item-label-disabled{ - font-style: italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuGroup_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a disabled label font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:menuGroup&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:menuGroup&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color: #acbece; - border: none; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;selectClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:menuGroup&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:menuGroup value="Save As..." selectClass="myClass"> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuGroup_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the background color for selected class was changed. Also selected class has no border.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:menuGroup&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,33 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:menuItem</keyword> - </keywordset> - </sectioninfo> - <section> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:menuItem&gt;</property></emphasis> component is used for the definition of a single item inside a pop-up list.</para> - <para>This component can be used not only within <emphasis role="bold"><property>&lt;rich:dropDownMenu&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;rich:contextMenu&gt;</property></emphasis>, but also it can used as a standalone component. - For example, you can use it as nested component of the <emphasis role="bold"><property>&lt;rich:toolBar&gt;</property></emphasis>.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:menuItem&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuItem_init.png" /> - </imageobject> - </mediaobject> - </figure> -</section> -<section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look-and-feel</para></listitem> - <listitem><para>Different submission modes</para></listitem> - <listitem><para>Support for disabling</para></listitem> - <listitem><para>Custom content support</para></listitem> - </itemizedlist> - -</section> - -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuItem.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,507 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:menuItem</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.MenuItem</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlMenuItem</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DropDownMenu</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.MenuItemRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.MenuItemTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu> - ... - <rich:menuItem value="Active"/> - ... -<rich:dropDownMenu> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlMenuItem; -... -HtmlMenuItem myMenuItem = new HtmlMenuItem(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> The <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute defines the text representation for an item - element. </para> - <para> There are two icon-related attributes. The <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> attribute defines an icon. The <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attribute defines an icon for a disabled item. Also you - can use the <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> facets. If the facets are defined, the corresponding <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> and <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attributes are ignored and the facets content is shown as - an icon. It could be used for an item check box implementation. </para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... -<f:facet name="icon"> - <h:selectBooleanCheckbox value="#{bean.property}"/> -</f:facet> -... -]]></programlisting> - - <para>The <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> - <emphasis> - <property>&quot;submitMode&quot;</property> - </emphasis> attribute can be set to three possible parameters:</para> - - <itemizedlist> - <listitem> - <para><code>Server</code> (default)</para> - </listitem> - </itemizedlist> - - <para>Regular form submission request is used.</para> - - <itemizedlist> - <listitem> - <para> - <code>Ajax</code> - </para> - </listitem> - </itemizedlist> - - <para>Ajax submission is used for switching.</para> - - <itemizedlist> - <listitem> - <para> - <code>None</code> - </para> - </listitem> - </itemizedlist> - - <para>The <emphasis> - <property>&quot;action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;actionListener&quot;</property> - </emphasis> item&apos;s attributes are ignored. Menu items - don&apos; fire any submits themselves. The behavior is fully - defined by the components nested into items.</para> - <para> For example, you can put any content into an item, but, in this case, you - should set the <emphasis> - <property>&quot;submitMode&quot;</property> - </emphasis> attribute as <emphasis> - <property>&quot;none&quot;</property> - </emphasis>.</para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu> - ... - <rich:menuItem submitMode="none"> - <h:outputLink value="www.jboss.org"/> - </rich:menuItem> - ... -<rich:dropDownMenu> -... -]]></programlisting> - <para> You can use the <emphasis> - <property>&quot;disabled&quot;</property> - </emphasis> attribute to set the item state. </para> - <para> Here is an example: </para> - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu> - <rich:menuItem value="Disable" disabled="true"/> -<rich:dropDownMenu> -... -]]></programlisting> - <note> - <title>Note:</title> - <para> The <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> component was designed to be used only for - pop-up menu list creation.</para> - </note> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find <link linkend="process" - >RichFaces Developer Guide section about &quot;process&quot; attribute </link>. </para> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>icon</entry> - <entry>Redefines the icon for the enabled item state. Related attribute is &quot;icon&quot;</entry> - </row> - <row> - <entry>iconDisabled</entry> - <entry>Redefines the folder icon the disabled item state. Related attribute is &quot;iconDisabled&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for an item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a hovered item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tipBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tipBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a disabled item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title> Definition of Custom Style Classes </title> - <para> On the screenshot there are classes names that define styles for - component elements.</para> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuItem_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <table id="tab_mI"> - <title>Classes names that define an appearance of item elements</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-menu-item</entry> - <entry>Defines styles for a wrapper - &lt;div&gt; element - for an item</entry> - </row> - <row> - <entry>rich-menu-item-label</entry> - <entry>Defines styles for a label of an - item</entry> - </row> - <row> - <entry>rich-menu-item-icon</entry> - <entry>Defines styles for the left icon - of an item</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define different states</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-menu-item-disabled</entry> - <entry>Defines styles for a wrapper - &lt;div&gt; element of - an item</entry> - </row> - <row> - <entry>rich-menu-item-enabled</entry> - <entry>Defines styles for a wrapper - &lt;div&gt; element of - an enabled item</entry> - </row> - <row> - <entry>rich-menu-item-hover</entry> - <entry>Defines styles for a wrapper - &lt;div&gt; element of - a hover item</entry> - </row> - - <row> - <entry>rich-menu-item-label-disabled</entry> - <entry>Defines styles for a label of a - disabled item</entry> - </row> - <row> - <entry>rich-menu-item-icon-disabled</entry> - <entry>Defines styles for the left icon - of a disabled item</entry> - </row> - <row> - <entry>rich-menu-item-label-enabled</entry> - <entry>Defines styles for a label of an - enabled item</entry> - </row> - <row> - <entry>rich-menu-item-icon-enabled</entry> - <entry>Defines styles for the left icon - of an enabled item</entry> - </row> - <row> - <entry>rich-menu-item-label-selected</entry> - <entry>Defines styles for a label of a - selected item</entry> - </row> - <row> - <entry>rich-menu-item-icon-selected</entry> - <entry>Defines styles for the left icon - of a selected item</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="tab_mI"> above</link>) and define necessary - properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-menu-item-disabled{ - font-style: italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuItem_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a disabled item font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - border-color: #bed6f8; - background-color: #ffffff; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:menuItem ... selectStyle="myClass"> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuItem_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the background color and border - color for selected item were changed. </para> - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... - >On the component LiveDemo page</ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:menuItem&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,20 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:menuSeparator</keyword> - </keywordset> - </sectioninfo> - <section> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:menuSeparator&gt;</property></emphasis> component is used for the definition of a horizontal separator that can be placed between groups or items.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:menuSeparator&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuSeparator_init.png" /> - </imageobject> - </mediaobject> - </figure> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/menuSeparator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,185 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:menuSeparator</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.MenuSeparator</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlMenuSeparator</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.DropDownMenu</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.MenuSeparatorRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.MenuSeparatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dropDownMenu/> - ... - <rich:menuSeparator/> - ... -<rich:dropDownMenu/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlMenuSeparator; -... -HtmlMenuSeparator myMenuSeparator = new HtmlMenuSeparator(); -... -]]></programlisting> - </section> - - <section> - - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:menuSeparator&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:menuSeparator&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for an item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuSeparator_cn.png" /> - </imageobject> - </mediaobject> - </figure> - <table id="tab_mS"> - <title>Classes names that define separator element appearance.</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-menu-separator</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element for a separator</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:menuSeparator&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_mS"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-menu-separator{ - border-color: #acbece; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/menuSeparator_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a menu separator border color was changed.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:menuSeparator&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,32 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:message</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The component is used for rendering a single message for a specific component. </para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:message&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/message_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel </para></listitem> - <listitem><para>Tracking both traditional and Ajax based requests</para></listitem> - <listitem><para>Optional toolTip to display the detail portion of the message</para></listitem> - <listitem><para>Additionally customizable with attributes and facets</para></listitem> - <listitem><para>Additionally provides two parts to be optionally defined: marker and - label</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/message.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,297 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>message</keyword> - <keyword>rich:message</keyword> - <keyword>HtmlMessage</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.component.RichMessage</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlRichMessage</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.RichMessage</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.RichMessagesHtmlBaseRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.RichMessageTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>message</property> on a page, use the - following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:message for="id"/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlRichMessage; -... -HtmlRichMessage myMessage = new HtmlRichMessage(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> The component has the same behavior as standard <emphasis role="bold"> - <property>&lt;h:message&gt;</property> - </emphasis>component except next two features: <itemizedlist> - <listitem><para>It&apos;s ajaxRendered. It means that the component is reRendered after Ajax request - automatically without outputPanel usage</para></listitem> - <listitem><para>The component optionally provides "passed" state which will be shown if no message is displayed</para></listitem> - <listitem><para>Provides possibility to add some marker to message. By default a marker element - isn't shown</para></listitem> - </itemizedlist> - </para> - <para> A set of facets which can be used for marker defining: <itemizedlist> - <listitem><para><emphasis><property>&quot;passedMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to display if - there is no message</para></listitem> - <listitem><para><emphasis><property>&quot;errorMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to display if there - is a message with a severity class of "ERROR"</para></listitem> - <listitem><para><emphasis><property>&quot;fatalMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to display if there - is a message with a severity class of "FATAL"</para></listitem> - <listitem><para><emphasis><property>&quot;infoMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to display if there - is a message with a severity class of "INFO"</para></listitem> - <listitem><para><emphasis><property>&quot;warnMarker&quot;</property></emphasis>. This facet is provided to allow setting a marker to display if there - is a message with a severity class of "WARN"</para></listitem> - </itemizedlist> - </para> - - <para> The following example shows different variants for component customization. The - attribute <emphasis><property>&quot;passedLabel&quot;</property></emphasis> is used for definition of the label to display when no message - appears. But the message component doesn't appear before the form submission even when - state is defined as passed (on initial rendering). Boolean attribute<emphasis><property> &quot;showSummary&quot; </property></emphasis>defines possibility to - display summary portion of displayed messages. The facets <emphasis><property>&quot;errorMarker&quot;</property></emphasis> and <emphasis><property>&quot;passedMarker&quot;</property></emphasis> set - corresponding images for markers. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:message for="id" passedLabel="No errors" showSummary="true"> - <f:facet name="errorMarker"> - <h:graphicImage url="/image/error.png"/> - </f:facet> - <f:facet name="passedMarker"> - <h:graphicImage url="/image/passed.png"/> - </f:facet> -</rich:message> -... -]]></programlisting> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>errorMarker</entry> - <entry>Redefines the content for the marker if there is message with a severity class of &quot;ERROR&quot;</entry> - </row> - <row> - <entry>fatalError</entry> - <entry>Redefines the content for the marker if there is message with a severity class of &quot;FATAL&quot;</entry> - </row> - <row> - <entry>infoError</entry> - <entry>Redefines the content for the marker if there is message with a severity class of &quot;INFO&quot;</entry> - </row> - <row> - <entry>warnError</entry> - <entry>Redefines the content for the marker if there is message with a severity class of &quot;WARN&quot;</entry> - </row> - <row> - <entry>passedError</entry> - <entry>Redefines the content for the marker if there is no message</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis></para> - - <para>There are no skin parameters and default predefined values. To redefine the appearance of all <emphasis - role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> components at once, you should only add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis - role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> component.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/message_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="mC"> - <title>Classes names that define a component appearance</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-message</entry> - - <entry>Defines styles for a wrapper element</entry> - </row> - - <row> - <entry>rich-message-marker</entry> - - <entry>Defines styles for a marker</entry> - </row> - - <row> - <entry>rich-message-label</entry> - - <entry>Defines styles for a label</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="mC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-message-label{ - font-style:italic -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/message_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for message was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:message&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:message&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight:bold; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:message&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:message ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/message_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font weight for message was changed.</para> - - - - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/message.jsf... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:message&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:messages</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> component is similar to <emphasis role="bold"> - <property>&lt;rich:message&gt;</property> - </emphasis> component but used for rendering all messages for the components.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:messages&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/messages_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Track both traditional and Ajax based requests</para></listitem> - <listitem><para>Optional ToolTip to display a detailed part of the messages</para></listitem> - <listitem><para>Additionally customizable via attributes and facets</para></listitem> - <listitem><para>Additionally provides of three parts to be optionally defined: marker, label and header</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/messages.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,298 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>messages</keyword> - <keyword>rich:messages</keyword> - <keyword>HtmlMessages</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.component.RichMessages</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlRichMessages</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.RichMessages</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.HtmlRichMessagesRendere</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.RichMessagesTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of <property>message</property> on a page, - use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:messages/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlRichMessages; -... -HtmlRichMessages myMessages = new HtmlRichMessages(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"><property>&lt;rich:messages&gt;</property></emphasis> component is considered as JSF HTML <emphasis role="bold"><property>&lt;h:messages&gt;</property></emphasis>, - extended with following features: - <itemizedlist> - <listitem><para>Ajax support (the component does not require to be wrapped in <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> in order to be rendered during Ajax requests);</para></listitem> - <listitem><para>possibilty to add graphical markers (pictograms) to reinforce a message for both &quot;passed&quot; or &quot;failed&quot; states;</para></listitem> - <listitem><para>set of predefined CSS classes for customizing messages appearance.</para></listitem> - </itemizedlist> - </para> - <para>There are two optional parts that could be defined for every message: marker and text label. The set of facets, which can be used for a marker definition, is shown below:</para> - - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>errorMarker</entry> - <entry>Defines marker for &quot;Error&quot; message severity class</entry> - </row> - <row> - <entry>fatalMarker</entry> - <entry>Defines marker for &quot;Fatal&quot; message severity class</entry> - </row> - <row> - <entry>infoMarker</entry> - <entry>Defines marker for &quot;Info&quot; message severity class</entry> - </row> - <row> - <entry>warnMarker</entry> - <entry>Defines marker for &quot;Warn&quot; message severity class</entry> - </row> - <!--row> - <entry>passedMarker</entry> - <entry>Defines marker if there is no message</entry> - </row--> - </tbody> - </tgroup> - </table> - - <para>The following example shows different variants of customization of the component.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:messages layout="table" tooltip="true" showDetail="false" showSummary="true"> - <f:facet name="errorMarker"> - <h:graphicImage url="/image/error.png"/> - </f:facet> - <f:facet name="infoMarker"> - <h:graphicImage url="/image/info.png"/> - </f:facet> - </rich:messages>]]></programlisting> - - <para>The <emphasis role="bold"><property>&lt;rich:messages&gt;</property></emphasis> component keeps all messages for all components even after only one Ajax-validated component was updated.</para> - - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis></para> - - <para>There are no skin parameters and default predefined values. To redefine - the appearance of all <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> components at once, you should only add to your style - sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> component.</para> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component - elements.</para> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/messages_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_msC"> - <title>Classes names that define a component appearance</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-messages</entry> - - <entry>Defines styles for a wrapper - element</entry> - </row> - - <row> - <entry>rich-messages-marker</entry> - - <entry>Defines styles for a - marker</entry> - </row> - - <row> - <entry>rich-messages-label</entry> - - <entry>Defines styles for a - label</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="tab_msC"> above</link>) and define necessary - properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-messages-label{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/messages_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for messages was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - color:red; -} - -...]]></programlisting> - <para>The <emphasis> - <property>&quot;errorClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:messages ... errorClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/messages_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, color of messages was changed.</para> - - - - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/messages.js... - - >On the component LiveDemo page</ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:messages&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,38 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:modalPanel</keyword> - </keywordset> - </sectioninfo> - - <section> -<title>Description</title> - <para>The component implements a modal dialog window. All operations in - the main application window are locked out while this window is active. - Opening and closing the window is done through client JavaScript - code.</para> - - <figure> - <title>The <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> component opens in closest to observer layer. - All other layers are dimmed by blocking <code>&lt;div&gt;</code> element (gray on the picture).</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel_init.png" /> - </imageobject> - </mediaobject> - </figure> - </section> - - <section> - <title>Key Features</title> - - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Support of draggable operations and size changes by you</para></listitem> - <listitem><para>Easy positioning for the modal dialog window</para></listitem> - <listitem><para>Possibility to restore of the previous component state on a page (including position on the screen) after submitting and reloading</para></listitem> - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/modalPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,904 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:modalPanel</keyword> - - <keyword>HtmlModalPanel</keyword> - </keywordset> - </sectioninfo> - - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.ModalPanel</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlModalPanel</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.ModalPanel</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.ModalPanelRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.ModalPanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>Here is a simple example as it could be used on a page:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:modalPanel id="panel"> - <f:facet name="header"> - <h:outputText value="header" /> - </f:facet> - ... - <!--Any Content inside--> - ... - <a onclick="Richfaces.hideModalPanel('modalPanelID');" href="#">Hide</a> -</rich:modalPanel> -<a onclick="Richfaces.showModalPanel('modalPanelID');" href="#">Show</a> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlModalPanel; -... -HtmlModalPanel myPanel = new HtmlModalPanel(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para>The component is defined as a panel with some content inside that displays - its content as a modal dialog. To call it and to close it, the client - API for the window is used.</para> - - <table> - <title>Functions description</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>Richfaces.showModalPanel (client - Id)</entry> - - <entry>Opens a window with a specified client - Id</entry> - </row> - - <row> - <entry>Richfaces.hideModalPanel (client - Id)</entry> - - <entry>Closes a window with a specified client - Id</entry> - </row> - - <row> - <entry>Richfaces.hideTopModalPanel ()</entry> - - <entry>Closes the current visible window at the top</entry> - </row> - </tbody> - </tgroup> - </table> - - <important> - <title>Important:</title> - <para>To work properly the &lt;rich:modalPanel&gt; should - always be placed outside the original &lt;h:form&gt; - and must include its own &lt;h:form&gt; for such - cases like performing submissions from within the - &lt;rich:modalPanel&gt;. </para> - </important> - <note> - <title>Note:</title> - <para>In order to avoid a bug in IE, the root node of the dialog is - moved on the top of a DOM tree. </para> - </note> - - - <para>It&apos;s possible to add a <emphasis> - <property>&quot;header&quot;</property> - </emphasis> facet to the component to set the content for the - header.</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a onclick="Richfaces.showModalPanel('pnl');" href="#">Show ModalPanel</a> -<a4j:form> - <rich:modalPanel id="pnl"> - <f:facet name="header"> - <h:outputText value="This is a panel header" /> - </f:facet> - <p>The &lt;rich:modalPanel&gt; accepts different types of information: - from simple text to iterative components such as &lt;rich:dataTable&gt;, etc. - </p> - <a onclick="Richfaces.hideModalPanel('pnl');" href="#">Hide</a> - </rich:modalPanel> -</a4j:form>]]></programlisting> - - <para>Here is what happening on the page:</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> with links</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>A facet named <emphasis> - <property>&quot;controls&quot;</property> - </emphasis> can be added to the component to place control elements on - a header.</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a onclick="Richfaces.showModalPanel('pnl');" href="#">Show ModalPanel</a> -<a4j:form> - <rich:modalPanel id="pnl"> - <f:facet name="header"> - <h:outputText value="This is a panel header" /> - </f:facet> - <f:facet name="controls"> - <h:graphicImage value="/pages/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('pnl')" /> - </f:facet> - <p>The &lt;rich:modalPanel&gt; accepts different types of information: - from simple text to iterative components such as &lt;rich:dataTable&gt;, etc. - </p> - </rich:modalPanel> -</a4j:form>]]></programlisting> - - <para>The result:</para> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> with &apos;Close&apos; control</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>To understand the sence of &quot;<emphasis> - <property>domElementAttachment</property> - </emphasis>&quot; attribute you should understand the - <emphasis>stacking context</emphasis> in the division - element (<code>&lt;div&gt;</code>) HTML makeup. Since each - positioned or z-indexed element (in CSS <code>position: - absolute</code> or <code>relative</code> or <code>z-index: - [any integer value different from 0]</code>) form their own - stacking context the <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> nested into such element may be overlapped with another - elements, which appear later in HTML hierarchy and assimilated with - basic stacking context (HTML &lt;body&gt;). To make the panel - rendered in closest to the observer layer and avoid such overlapping, - the component was designed in way when it is always being - automatically assimilated with <code>&lt;body&gt;</code> and - with a very high rendering layer (<code>z-index</code>). Due to some - side effects the <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> should not always be assimilated with - <code>&lt;body&gt;</code> stacking context. The &quot;<emphasis> - <property>domElementAttachment</property> - </emphasis>&quot; attribute helps to reassign the panel to it - &apos;<emphasis>parent</emphasis>&apos; or - &apos;<emphasis>form</emphasis>&apos; element. If - &apos;<emphasis>form</emphasis>&apos; is used and no - parent form is available the panel is functioning as if it is - assimilated with <code>&lt;body&gt;</code>. </para> - - <note> - <title>Note:</title> - <para>If &quot;<emphasis> - <property>domElementAttachment</property> - </emphasis>&quot; value is not - &apos;<emphasis>body</emphasis>&apos; then - some overlapping may occur. </para> - </note> - - <para>To manage window placement relative to the component, there are <emphasis> - <property>"left"</property> - </emphasis> and <emphasis> - <property>"top"</property> - </emphasis> attributes defining a window shifting relative to the - top-left corner of the window.</para> - - <para>Modal windows can also support resize and move operations on the client - side. To allow or disallow these operations, set the <emphasis> - <property>"resizeable"</property> - </emphasis> and <emphasis> - <property>"moveable"</property> - </emphasis> attributes to &quot;true&quot; or - &quot;false&quot; values. Window resizing is also limited by <emphasis> - <property>"minWidth"</property> - </emphasis> and <emphasis> - <property>"minHeight"</property> - </emphasis> attributes specifying the minimal window sizes.</para> - <para> Also you can use <emphasis> - <property>&quot;minWidth&quot;</property> - </emphasis> and <emphasis> - <property>&quot;minHeight&quot;</property> - </emphasis> attributes used as <code>showModalPanel()</code> arguments - in JavaScript options. </para> - <para> You can pass your parameters during modalPanel opening or closing. This - passing could be performed in the following way: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[Richfaces.showModalPanel('panelId', {left: auto, param1: value1});]]></programlisting> - <para> Thus, except the standard modalPanel parameters you can pass any of your - own parameters. </para> - <para> Also modalPanel allows to handle its own opening and closing events on - the client side. The <emphasis> - <property>&quot;onshow&quot;</property> - </emphasis> attribute is used in this case. </para> - <para> The following example shows how on the client side to define opening and - closing event handling in such a way that your own parameters could - also be obtained: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[onshow="alert(event.parameters.param1)"]]></programlisting> - - <para> Here, during modalPanel opening the value of a passing parameter is - output. </para> - <para> More information about this problem could be found on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Development Forum</ulink>.</para> - <para> There is a possibility to restore of the previous component state on a - page (including position on the screen) after submitting and - reloading. The modalPanel has some special attributes like <emphasis> - <property>&quot;showWhenRendered&quot;</property> - </emphasis> and <emphasis> - <property>&quot;keepVisualState&quot;</property> - </emphasis>. </para> - <para> - <emphasis> - <property>&quot;showWhenRendered&quot;</property> - </emphasis> - This boolean attribute is used if modalPanel should be - rendered after first page loading. </para> - <para><emphasis> - <property> &quot;keepVisualState&quot;</property> - </emphasis> - Used if modalPanel should save state after submission. - If <code>keepVisualState=&quot;true&quot;</code> then - parameters which modalPanel has during opening should be submitted and - passed to new page. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[<a href="javascript:Richfaces.showModalPanel('pnl', {top:'10px', left:'10px', height:'400'});">Show</a>]]></programlisting> - - <para> Here, if you open modal dialog window using current link and after - submits data then modalPanel destination and height on new loaded page - is restored. </para> - <para>if you need the content of the modalPanel to be submitted - you need to - remember two important rules: </para> - <itemizedlist> - <listitem> - <para>modalPanel must have its own form if it has form - elements (input or/and command components) inside - (as it was shown in the example above) </para> - </listitem> - <listitem> - <para>modalPanel must not be included into the form (on any - level up) if it has the form inside.</para> - </listitem> - </itemizedlist> - <para>Simple example of using commandButton within modalPanel is placed - below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[<a4j:form> -<rich:modalPanel> - <f:facet name="header"> - <h:outputText value="Test" /> - </f:facet> - <f:facet name="controls"> - <h:commandLink value="Close" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" /> - </f:facet> - <h:form> - <h:commandButton value="Test" action="#{TESTCONTROLLER.test}" /> - </h:form> -</rich:modalPanel>]]></programlisting> - - - - <para>See also discussion about this problem on the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >RichFaces Users Forum</ulink>.</para> - <para> The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and - the message that the component (indirectly) produced. This attribute - defines the parameters of localized error and informational messages - that occur as a result of conversion, validation, or other application - actions during the request processing lifecycle. With the help of this - attribute you can replace the last parameter substitution token shown - in the messages. For example, {1} for - <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, - {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> - <para>In RichFaces Cookbook article about - <ulink - url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/DetailModalPa... - > Modal Panel </ulink> there is information for those of you who - would like to click on a details link in table and have it show a - modal panel with information loaded from the server. </para> - - <para> - To avoid overlapping of the <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis> component on the page by any embed objects (inserted with HTML <code>&lt;EMBED&gt;</code> tag) set the <emphasis><property>&quot;overlapEmbedObjects&quot;</property></emphasis> attribute to &quot;true&quot;. - </para> - - - </section> - - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>show()</entry> - <entry>Opens the corresponding modalPanel</entry> - </row> - - <row> - <entry>hide()</entry> - <entry>Closes the corresponding modalPanel</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Define the header content</entry> - </row> - <row> - <entry>controls</entry> - <entry>Defines the control elements on the - header</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters for a component</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>generalBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a header element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>headerBackgroundColor</entry> - - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a header content</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerSizeFont</entry> - - <entry>background-color</entry> - </row> - - <row> - <entry>headerTextColor</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>headerWeightFont</entry> - - <entry>color</entry> - </row> - - <row> - <entry>headerFamilyFont</entry> - - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a body element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> class name</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>The screenshot shows the classes names for defining different - elements.</para> - - <table id="mPC"> - <title>Classes names that define a component appearance</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-modalpanel</entry> - - <entry>Defines styles for a wrapper - &lt;div&gt; element of a - modalPanel</entry> - </row> - - <row> - <entry>rich-mpnl-mask-div</entry> - - <entry>Defines styles for a wrapper - &lt;div&gt; element of a mask</entry> - </row> - - <row> - <entry>rich-mpnl_panel</entry> - - <entry>Defines styles for a modalPanel</entry> - </row> - - <row> - <entry>rich-mp-container </entry> - - <entry>Defines styles for a modalPanel - container</entry> - </row> - - <row> - <entry>rich-mpnl-resizer</entry> - - <entry>Defines styles for a wrapper - &lt;div&gt; element of a resizing - element</entry> - </row> - - <row> - <entry>rich-mpnl-shadow</entry> - - <entry>Defines styles for a modalPanel - shadow</entry> - </row> - - <row> - <entry>rich-mp-content-table</entry> - - <entry>Defines styles for a &lt;table&gt; - element of a modalPanel</entry> - </row> - - <row> - <entry>rich-mpnl-header</entry> - - <entry>Defines styles for a modalPanel - header</entry> - </row> - - <row> - <entry>rich-mpnl-header-cell</entry> - - <entry>Defines styles for a header cell</entry> - </row> - - <row> - <entry>rich-mpnl-text</entry> - - <entry>Defines styles for a wrapper - &lt;div&gt; element of a header - text</entry> - </row> - - <row> - <entry>rich-mpnl-body</entry> - - <entry>Defines styles for a content inside a - modalPanel</entry> - </row> - - <row> - <entry>rich-mpnl-controls</entry> - - <entry>Defines styles for a wrapper - &lt;div&gt; element of a modalPanel - control</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="mPC"> above</link>) and define necessary - properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-mpnl-mask-div{ - background-color:#fae6b0; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the background color for mask was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style:italic; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;headerClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> is defined as it&apos;s shown in the example - below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:modalPanel ... headerClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/modalPanel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,the font style for header was - changed.</para> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para>Vizit <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.... - > ModalPanel page</ulink> at RichFaces Livedemo for examples - of component usage and their sources. </para> - - <para>Read the &quot;<ulink - url="http://eclipse.dzone.com/articles/an-introduction-to-jboss-rich... - > An Introduction To JBoss RichFaces</ulink>&quot; - tutorial by Max Katz to find out how the <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> helps to edit and save changes for table entries. </para> - - <para>Some articles at JBoss portal describing different aspects of <emphasis - role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> usage: </para> - - <itemizedlist> - <listitem> - <para> &quot;<ulink - url="http://www.jboss.org/community/docs/DOC-11436" - >ModalPanelWizards</ulink>&quot; article - describes how to create a typical wizard with the - help of <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> component (the same could also be - found in the &quot;<ulink - url="http://www.jboss.org/community/wiki/PanelsandOutput#Organizewiz... - > How to organize wizards using the - &lt;rich:modalPanel&gt; - component?</ulink>&quot; chapter of RichFaces - FAQ guide); </para> - </listitem> - <listitem> - <para>Refer to the &quot;<ulink - url="http://www.jboss.org/community/docs/DOC-11853" - >How to do a detail view modalPanel in a - table</ulink>&quot; article in the RichFaces cookbook at JBoss Portal to find out how to - build a table with details link clicking on which - will display a modal panel with information loaded from the server.</para> - </listitem> - <listitem> - <para>&quot;<ulink - url="http://www.jboss.org/community/docs/DOC-11435" - >ModalPanelValidation</ulink>&quot; article - gives examples of validation in <emphasis - role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> (the same in the <ulink - url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... - >corresponding topic</ulink> at RichFaces Users - Forum);</para> - </listitem> - <listitem> - <para>&quot;<ulink - url="http://www.jboss.org/community/docs/DOC-11863" - >RichFacesPleaseWaitBox</ulink>&quot; article - describes how to show a &quot;Please - wait&quot; box and block the input while the - Ajax request is being processed using combination - of <emphasis role="bold"> - <property>&lt;a4j:status&gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> components. </para> - </listitem> - </itemizedlist> - - </section> - - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,23 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:nodeSelectListener</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - - <section> - <title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:nodeSelectListener&gt;</property></emphasis> - represents an action listener method that is notified after selection of a node. - </para> - </section> - - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Allows to define some "nodeSelect" listeners for the component</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/nodeSelectListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,121 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>rich:nodeSelectListener</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - - <row> - <entry>listener-class</entry> - <entry>org.richfaces.event.NodeSelectedListener</entry> - </row> - <row> - <entry>event-class</entry> - <entry>org.richfaces.event.NodeSelectedEvent</entry> - </row> - - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.NodeSelectListenerTag</entry> - </row> - - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:nodeSelectListener type="demo.Bean"/> -... -]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis></para> - <programlisting role="JAVA"><![CDATA[package demo; -public class ImplBean implements org.richfaces.event.NodeSelectListener{ - ... -} -]]></programlisting> - - <programlisting role="JAVA"><![CDATA[ -import demo.ImplBean; -... -ImplBean myListener = new ImplBean(); -... -]]></programlisting> - - </section> - - <section> - <title>Details of Usage</title> - -<para> - The <emphasis role="bold"><property>&lt;rich:nodeSelectListener&gt;</property></emphasis> is used as a nested tag with <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> - and <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property></emphasis> components. -</para> -<para> -Attribute <emphasis><property>&quot;type&quot;</property></emphasis> defines the fully qualified Java class name for listener. - This class should implement <ulink url="&apidoc_framework;/org/richfaces/event/NodeSelectedListener.html"> <code>org.richfaces.event.NodeSelectedListener</code></ulink>. - interface</para> - - <para> - <emphasis role="bold">The typical variant of using:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:tree switchType="server" value="#{project.data}" var="item" nodeFace="#{item.type}"> - <rich:nodeSelectListener type="demo.ListenerBean"/> - ... - <!-- Tree nodes --> - ... -</rich:tree> -... -]]></programlisting> - - <para> - <emphasis role="bold">Java bean source:</emphasis> - </para> - - <programlisting role="JAVA"><![CDATA[package demo; -import org.richfaces.event.NodeSelectedEvent; -public class ListenerBean implements org.richfaces.event.NodeSelectedListener{ - ... - public void processSelection(NodeSelectedEvent arg0){ - //Custom Developer Code - } - ... -} -]]></programlisting> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para><emphasis role="bold"> - <property>&lt;rich:nodeSelectListener&gt;</property> - </emphasis> has no skin parameters and custom <property>style classes</property>, as the - component isn&apos;t visual.</para> - </section> - -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,44 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:orderingList</keyword> - </keywordset> - <releaseinfo>3.1.3</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> is a component for ordering items in a list. This component provides possibilities to reorder a list and sort it on the client side.</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/orderingList_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> -<section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Reordering possibility for list items</para></listitem> - <!--listitem>Customizable component layout (captions, headers, list items and ordering control set)</listitem--> - <!--listitem>Disabled/enabled ordering controls</listitem--> - <listitem><para>Multiple selection of list items</para></listitem> - <listitem><para>Keyboard support</para></listitem> - <!--listitem>Possibility to manage selection from - <itemizedlist> - <listitem><para>Keyboard</para></listitem> - <listitem><para>Server side</para></listitem> - </itemizedlist> - </listitem--> - </itemizedlist> -</section> -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/orderingList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,1238 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:orderingList</keyword> - <keyword>orderingList</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.OrderingList</entry> - </row> - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlOrderingList</entry> - </row> - <row> - <entry>component-family</entry> - - <entry>org.richfaces.OrderingList</entry> - </row> - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.OrderingListRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:orderingList value="#{bean.list}" var="list"> - <rich:column> - <f:facet name="header"> - <h:outputText value="Name" /> - </f:facet> - <h:inputText value="#{list.name}" /> - </rich:column> -<rich:orderingList> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlOrderingList; -... -HtmlOrderingList myOrderingList = new HtmlOrderingList(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - - <!--maintenance of component orderingList--> - - <para>The <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> component consists of <itemizedlist> - <listitem><para><property>Item list</property> element that displays a list of items. It - has three different representations for a single element: common, selected, - active. Combination of these states is possible.</para></listitem> - <listitem><para> - <property>Ordering controls set</property> - </para></listitem> - </itemizedlist> - </para> - - <!-- attributes of component orderingList --> - - <para>The <emphasis> - <property> &quot;value&quot;</property> - </emphasis> and <emphasis> - <property>&quot;var&quot; </property> - </emphasis> attributes are used to access the values of a list. </para> - - <para>Controls rendering is based on the <emphasis> - <property>&quot;controlsType&quot; </property> - </emphasis> attribute. Possible types are button or none. - </para> - <note> - <para> - Currently the button controls type is based on <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> element. - </para> - </note> - <para>The information about the <emphasis><property>&quot;converter&quot;</property></emphasis> attribute is <link linkend="conv">here</link>.</para> - <para> The <emphasis> - <property>&quot;selection&quot; </property> - </emphasis> attribute stores the collection of items selected by you. In the example - below after submitting the form the current collection is placed in the object&apos;s - property and then <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> with selected items is shown. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:orderingList value="#{bean.simpleItems}" var="item" selection="#{bean.selection}" controlsType="button"> - <rich:column> - <f:facet name="header"> - <h:outputText value="Cars" /> - </f:facet> - <h:outputText value="#{item}" /> - </rich:column> - </rich:orderingList> - <rich:dataTable id="infoPanelID" value="#{bean.info}" var="info" rendered="true"> - <rich:column> - <h:outputText value="#{info}" /> - </rich:column> - </rich:dataTable> - <a4j:commandButton value="reRender" reRender="infoPanelID" /> -</h:form> -...]]></programlisting> - <para> The <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> component allows to use <emphasis><property>&quot;caption&quot;</property></emphasis> - <!--and <emphasis> - <property>&quot;footer&quot; </property> - </emphasis> --> - facet. - A caption could be also defined with <emphasis> - <property>&quot;captionLabel&quot;</property></emphasis> attribute. - </para> - - <!-- ADD SCREENSHOT--> - - <para>Simple example is placed below.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}"> - <f:facet name="caption"> - <h:outputText value="Caption Facet" /> - </f:facet> - <rich:column> - <f:facet name="header"> - <h:outputText value="Cars" /> - </f:facet> - <h:outputText value="#{item.name}" /> - </rich:column> - <rich:column> - <f:facet name="header"> - <h:outputText value="Price" /> - </f:facet> - <h:outputText value="#{item.price}" /> - </rich:column> -</rich:orderingList> -...]]></programlisting> - - <!-- ordering control set--> - <para>The <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> component provides the possibility to use <property>ordering controls - set</property>, which performs reordering. Every control has possibility to be disabled. </para> - <para>An <property>ordering controls set</property> could be defined with <emphasis> - <property>&quot;topControlLabel&quot;</property> - </emphasis>, <emphasis> - <property>&quot;bottomControlLabel&quot;</property> - </emphasis>, <emphasis> - <property>&quot;upControlLabel&quot;</property> - </emphasis>, <emphasis> - <property>&quot;downControlLabel&quot;</property> - </emphasis>attributes. </para> - <para>It is also possible to use <emphasis><property>&quot;topControl&quot; </property></emphasis>, - <emphasis><property>&quot;topControlDisabled&quot;</property></emphasis>, <emphasis><property>&quot;bottomControl&quot;</property></emphasis>, - <emphasis><property>&quot;bottomControlDisabled&quot; </property></emphasis>, <emphasis><property>&quot;upControl&quot; </property></emphasis>, - <emphasis><property>&quot;upControlDisabled&quot; </property></emphasis>, - <emphasis><property>&quot;downControl&quot;</property></emphasis>, <emphasis><property>&quot;downControlDisabled&quot; </property></emphasis> facets in order to replace the default controls with facets content. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}"> - <f:facet name="topControl"> - <h:outputText value="Move to top" /> - </f:facet> - <f:facet name="upControl"> - <h:outputText value="Move up" /> - </f:facet> - <f:facet name="downControl"> - <h:outputText value="Move down" /> - </f:facet> - <f:facet name="bottomControl"> - <h:outputText value="Move to bottom" /> - </f:facet> -<rich:orderingList> -...]]></programlisting> - - <para>The position of the controls relatively to a list could be customized with: <itemizedlist> - <!--listitem> - <emphasis> - <property>&quot;controlsPosition&quot;</property> - </emphasis> attribute. Possible values: <itemizedlist> - <listitem><para>left - controls could be rendered to the left side of a list</para></listitem> - <listitem><para>right(default) - controls could be rendered to the right side of a - list </para></listitem> - <listitem><para>top - controls could be rendered above the list </para></listitem> - <listitem><para>bottom - controls could be rendered below the list </para></listitem> - </itemizedlist> - </listitem--> - <listitem><para><emphasis> - <property> &quot;controlsHorizontalAlign&quot;</property> - </emphasis> attribute. Possible values: <itemizedlist> - <listitem><para>&quot;left&quot; - controls render to the left side of a list</para></listitem> - <listitem><para>&quot;right&quot; (default) - controls render to the right side of a list</para></listitem> - <listitem><para>&quot;center&quot; - controls is centered</para></listitem> - </itemizedlist> - </para></listitem> - <listitem><para><emphasis> - <property> &quot;controlsVerticalAlign&quot;</property> - </emphasis> attribute. Possible values: <itemizedlist> - <listitem><para>&quot;top&quot; - controls render aligned to the top side of a list </para></listitem> - <listitem><para>&quot;bottom&quot; - controls render aligned to the bottom side of a list </para></listitem> - <listitem><para>&quot;center&quot; (default) - controls is centered relatively to a list - </para></listitem> - </itemizedlist> - </para></listitem> - <!--listitem><emphasis> - <property>&quot;controlsLayout&quot;</property> - </emphasis> attribute. Possible values: <itemizedlist> - <listitem><para>inline - controls defined one by one in line </para></listitem> - <listitem><para>block - controls defined in column </para></listitem> - </itemizedlist> - </listitem--> - </itemizedlist> - </para> - - <para>The <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> component has a possibility to hide any of the controls by pairs using - following attributes: <itemizedlist> - <listitem><para> - <emphasis> - <property>&quot;orderControlsVisible&quot;</property> - </emphasis> attribute has two values: &quot;true&quot; or &quot;false&quot;. If false - <property>Up</property> and <property>Down</property> controls are not - displayed.</para></listitem> - <listitem><para> - <emphasis> - <property>&quot;fastOrderControlsVisible&quot;</property> - </emphasis> attribute has two values: &quot;true&quot; or &quot;false&quot;. If false - <property>Top</property> and <property>Bottom</property> controls are not - displayed.</para></listitem> - </itemizedlist> - </para> - <para> - The <emphasis role="bold"><property>&lt;rich:orderingList&gt;</property></emphasis> component allows to use internationalization method - to redefine and localize the labels. You could use application resource bundle and define - <code>RICH_SHUTTLES_TOP_LABEL</code>, - <code>RICH_SHUTTLES_BOTTOM_LABEL</code>, - <code>RICH_SHUTTLES_UP_LABEL</code>, - <code>RICH_SHUTTLES_DOWN_LABEL</code> there. - </para> - <para> - You could also pack <code>org.richfaces.renderkit.orderingList</code> resource bundle with your JARs defining the same properties. - </para> - <!-- Wiil be done for 3.2.0 version--> - <!--para>The component provides possibility to be customized using templating. The - customization could be performed by a layout definition nested into the component. 5 - elements are provided to be defined inside template: {list}, {topControl}, - {bottomControl}, {downCotrol}, {upControl}. <para>The example is placed below.</para> - </para> - <para>Example:</para> - <programlisting role="XML"><![CDATA[... -<rich:orderingList> - <h:panelGrid columns="2" columnClasses="class1 class2"> - <h:outputText value="{list}"/> - <h:panelGroup> - <h:outputText value="{topControl}"/> - <h:outputText value="{upControl}"/> - <h:outputText value="{downControl}"/> - <h:outputText value="{bottomControl}"/> - </h:panelGroup> - </h:panelGrid> -</rich:orderingList> -...]]> - </programlisting--> - - <table> - <title>Keyboard usage for elements selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Keys and combinations </entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>CTRL+click</entry> - <entry>Inverts selection for an item</entry> - </row> - <row> - <entry>SHIFT+click</entry> - <entry>Selects all rows from active one to a clicked row if they differ, - else select the active row. All other selections are cleared</entry> - </row> - <row> - <entry>CTRL+A</entry> - <entry>Selects all elements inside the list if some active element is - already present in a list</entry> - </row> - <row> - <entry>Up, Down arrows</entry> - <entry>Changes the active and selected elements to the next or previous in a list</entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Keyboard usage for elements reordering</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Keys and combinations </entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>Page Up</entry> - <entry>Moves selected set to the top of a list</entry> - </row> - <row> - <entry>Page Down</entry> - <entry>Moves selected set to the bottom of a list</entry> - </row> - <row> - <entry>CTRL+Up arrow</entry> - <entry>Moves selected item to one position upper</entry> - </row> - <row> - <entry>CTRL+Down arrow</entry> - <entry>Moves selected item to one position lower</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <!-- - <row> - <entry>SortAscending()</entry> - <entry>Sorts items in the list ascending</entry> - </row> - <row> - <entry>SortDescending()</entry> - <entry>Sorts items in the list descending</entry> - </row> - <row> - <entry>Sort()</entry> - <entry>Inverts current sorting</entry> - </row> - --> - - <!--Controls common API --> - <row> - <entry role="tbi">hide()</entry> - <entry role="tbi">Hides ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">show()</entry> - <entry role="tbi">Shows ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">isShown()</entry> - <entry role="tbi">Checks if current control is shown (to be implemented)</entry> - </row> - <row> - <entry role="tbi">enable()</entry> - <entry role="tbi">Enables ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">disable()</entry> - <entry role="tbi">Disables ordering control (to be implemented)</entry> - </row> - <row> - <entry role="tbi">isEnabled()</entry> - <entry role="tbi">Checks if current control is enabled (to be implemented)</entry> - </row> - <!--List managing API --> - <row> - <entry>Up()</entry> - <entry>Moves up selected item in the list</entry> - </row> - <row> - <entry>Down()</entry> - <entry>Moves down selected item in the list</entry> - </row> - <row> - <entry>Top()</entry> - <entry>Moves top selected item in the list</entry> - </row> - <row> - <entry>Bottom()</entry> - <entry>Moves bottom selected item in the list</entry> - </row> - <row> - <entry>getSelection()</entry> - <entry>Returns currently selected item</entry> - </row> - <row> - <entry>getItems()</entry> - <entry>Returns the collection of all items</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>caption</entry> - <entry>Redefines the caption content. Related attribute is &quot;captionLabel&quot;</entry> - </row> - <row> - <entry>topControl</entry> - <entry>Redefines the label for the &quot;Top&quot; control. Related attribute is &quot;topControlLabel&quot;</entry> - </row> - <row> - <entry>bottomControl</entry> - <entry>Redefines the label for the &quot;Bottom&quot; control. Related attribute is &quot;bottomControlLabel&quot;</entry> - </row> - <row> - <entry>upControl</entry> - <entry>Redefines the label for the &quot;Up&quot; control. Related attribute is &quot;upControlLabel&quot;</entry> - </row> - <row> - <entry>downControl</entry> - <entry>Redefines the label for the &quot;Down&quot; control. Related attribute is &quot;downControlLabel&quot;</entry> - </row> - <row> - <entry>topControlDisabled</entry> - <entry>Redefines the disabled label for the &quot;Top&quot; control</entry> - </row> - <row> - <entry>bottomControlDisabled</entry> - <entry>Redefines the disabled label for the &quot;Bottom&quot; control</entry> - </row> - <row> - <entry>upControlDisabled</entry> - <entry>Redefines the disabled label for the &quot;Up&quot; control</entry> - </row> - <row> - <entry>downControlDisabled</entry> - <entry>Redefines the disabled label for the &quot;Down&quot; control</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a wrapper &lt;div&gt; element of a list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a header cell of a list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - - <row> - <entry>tableBorderWidth</entry> - <entry>border-right-width</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-bottom-width</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-right-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for caption element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>headerWeightFont</entry> - <entry>font-weight</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for row element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerGradientColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for selected row element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for cell element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for selected cell element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for active cell element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a disabled button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button highlight</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>trimColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a pressed button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button content</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for top, bottom, up, down controls and for controls - in disabled state</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/orderingList_cn.png"/> - </imageobject> - </mediaobject> - - </figure> - - <table id="OrderLC"> - <title>Classes names that define a list representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-ordering-list-body</entry> - <entry>Defines styles for a wrapper table element of an orderingList</entry> - </row> - <row> - <entry>rich-ordering-list-output</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a - list</entry> - </row> - <row> - <entry>rich-ordering-list-items</entry> - <entry>Defines styles for a wrapper table element of items in the - list</entry> - </row> - <row> - <entry>rich-ordering-list-content</entry> - <entry>Defines styles for a list content</entry> - </row> - <row> - <entry>rich-ordering-list-header</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element for a list - header</entry> - </row> - <row> - <entry>rich-ordering-list-table-header</entry> - <entry>Defines styles for a wrapper &lt;tr&gt; element for a list - header</entry> - </row> - <row> - <entry>rich-ordering-list-table-header-cell</entry> - <entry>Defines styles for a header cell</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a caption representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-ordering-list-caption</entry> - <entry>Defines styles for a caption</entry> - </row> - <row> - <entry>rich-ordering-list-caption-disabled</entry> - <entry>Defines styles for a caption in disabled state</entry> - </row> - <row> - <entry>rich-ordering-list-caption-active</entry> - <entry>Defines styles for a caption in active state</entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Classes names that define rows representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-ordering-list-row</entry> - <entry>Defines styles for a row</entry> - </row> - <row> - <entry>rich-ordering-list-row-selected</entry> - <entry>Defines styles for a selected row</entry> - </row> - <row> - <entry>rich-ordering-list-row-active</entry> - <entry>Defines styles for an active row</entry> - </row> - <row> - <entry>rich-ordering-list-row-disabled</entry> - <entry>Defines styles for a disabled row</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define cells representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-ordering-list-cell</entry> - <entry>Defines styles for a cell</entry> - </row> - <row> - <entry>rich-ordering-list-cell-selected</entry> - <entry>Defines styles for a selected cell</entry> - </row> - <row> - <entry>rich-ordering-list-cell-active</entry> - <entry>Defines styles for an active cell</entry> - </row> - <row> - <entry>rich-ordering-list-cell-disabled</entry> - <entry>Defines styles for a disabled cell</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a button representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-ordering-list-button</entry> - <entry>Defines styles for a button</entry> - </row> - <row> - <entry>rich-ordering-list-button-disabled</entry> - <entry>Defines styles for a disabled button</entry> - </row> - <row> - <entry>rich-ordering-list-button-light</entry> - <entry>Defines styles for a button highlight</entry> - </row> - <row> - <entry>rich-ordering-list-button-press</entry> - <entry>Defines styles for a pressed button</entry> - </row> - <row> - <entry>rich-ordering-list-button-content</entry> - <entry>Defines styles for a button content</entry> - </row> - <row> - <entry>rich-ordering-list-button-selection</entry> - <entry>Defines styles for a button selection</entry> - </row> - <row> - <entry>rich-ordering-list-button-valign</entry> - <entry>Defines styles for a wrapper &lt;td&gt; element for buttons - vertical align</entry> - </row> - <row> - <entry>rich-ordering-list-button-layout</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of buttons - layout</entry> - </row> - </tbody> - </tgroup> - </table> - - - - <table> - <title>Classes names that define controls representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-ordering-controls</entry> - <entry>Defines styles for a controls group</entry> - </row> - <row> - <entry>rich-ordering-control-top</entry> - <entry>Defines styles for a &quot;top&quot; control</entry> - </row> - <row> - <entry>rich-ordering-control-bottom</entry> - <entry>Defines styles for a &quot;bottom&quot; control</entry> - </row> - <row> - <entry>rich-ordering-control-up</entry> - <entry>Defines styles for a &quot;up&quot; control</entry> - </row> - <row> - <entry>rich-ordering-control-down</entry> - <entry>Defines styles for a &quot;down&quot; control</entry> - </row> - <row> - <entry>rich-ordering-control-disabled</entry> - <entry>Defines styles for controls in disabled state</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="OrderLC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-ordering-list-table-header-cell{ - font-weight:bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/orderingList_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font weight for header text was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:orderingList&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:orderingList&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style:italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;rowClasses&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:orderingList&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:orderingList ... rowClasses="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/orderingList_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for rows was changed.</para> - - - - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/orderingLis... - >On RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> - <property>&lt;rich:orderingList&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,13 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> -<section> - <sectioninfo> - <keywordset> - <keyword>CommandLink</keyword> - </keywordset> - </sectioninfo> - -<title>Description</title> - <para>The component is used for components grouping in the Ajax output area, which offers several additional output opportunities such as inserting of non-present in tree components, saving of transient elements after Ajax request and some others.</para> -</section> -</chapter> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/outputPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,195 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:outputPanel</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.OutputPanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Panel</entry> - </row> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.ajax.OutputPanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry> org.ajax4jsf.component.html.HtmlAjaxOutputPanel </entry> - </row> - <row> - <entry>renderer-type</entry> - <entry> org.ajax4jsf.components.AjaxOutputPanelRenderer </entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following syntax: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:outputPanel> - <h:form> - <h:outputText value="Some text"/> - <h:inputText id="text1" label="text1" value="#{rsBean.text1}"/> - </h:form> -</a4j:outputPanel>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxOutputPanel; -... -HtmlAjaxOutputPanel myPanel = new HtmlAjaxOutputPanel();]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> component is used when one or more components should be always updated. - The component job is similar to that the <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute does, but instead of specifying a comma separated list of components it wraps the components to be updated. - This could be useful in cases when some components aren&apos;t rendered during the primary non-ajax response. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[<a4j:support reRender="mypanel"/> -... -<a4j:outputPanel id="mypanel"> - <h:panelGrid rendered="#{not empty foo.bar}"> - ... - </h:panelGrid> -</a4j:outputPanel>]]></programlisting> - - <para> - By default the <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> is rendered as opening and closing HTML <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> tags and functions as container. - With the help of the <emphasis><property>&quot;layout&quot;</property></emphasis> attribute this output way could be set to any of three variants: - </para> - <itemizedlist> - <listitem> - <para>&quot;inline&quot; (default)</para> - </listitem> - <listitem> - <para>&quot;block&quot;</para> - </listitem> - <listitem> - <para>&quot;none&quot;</para> - </listitem> - </itemizedlist> - - <para> - If <code>layout=&quot;block&quot;</code> is set, the component is rendered as a pair of opening and closing <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> tags. - In this case it is possible to apply available for <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> elements style attributes. - <code>layout =&quot;none&quot;</code> helps to avoid an unnecessary tag around a context that is rendered or not according to the <emphasis><property>&quot;rendered&quot;</property></emphasis> attribute value. - In case an inner context isn&apos;t rendered the <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> is rendered in a <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> tags with ID equal to ID of a child component and <code>display:none</code> style. - If a child component is rendered, <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> doesn&apos;t present at all in a final code. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:support reRender="mypanel"/> - ... -<a4j:outputPanel layout="none"> - <h:panelGrid id="mypanel" rendered="#{not empty foo.bar}"> - ... - </h:panelGrid> -</a4j:outputPanel>]]></programlisting> - - <para> - As you see, the code is very similar to the one shown above, but <emphasis><property>&quot;reRender &quot;</property></emphasis> attribute refers directly to the updating panelGrid and not to the framing outputPanel, - and it&apos;s more semantically correct. - </para> - - <para> - The <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> allows to update a part of a page basing on its own flag. - The flag is defined by the <emphasis><property>&quot;ajaxRendered&quot;</property></emphasis> attribute. - The flag is commonly used when a part of a page must be updated or can be updated on any response. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:outputPanel ajaxRendered="true"> - <h:messages/> -</a4j:outputPanel>]]></programlisting> - - <para> - The <emphasis role="bold"><property>&lt;a4j:outPanel&gt;</property></emphasis> should be used for non-JSF component part framing, which is to be updated on Ajax response, as RichFaces specifies the list of updating areas as a list of an existing JSF component. - </para> - <para> On default non-JSF context isn&apos;t saved in a component tree, but is rendered - anew every time. To accelerate the processing speed and Ajax response input speed, - RichFaces saves non-JSF context in a component tree on default. This option could be - canceled by <emphasis> - <property>&quot;keepTransient&quot;</property> - </emphasis> attribute that cancels transient flag forced setting for child components. - This flag setting keeps the current value set by child components. </para> - <note> - <title>Note:</title> - <para> In JSF 1.1 implementation and lower, where non-JSF context should be framed with - the <emphasis role="bold"> - <property>&lt;f:verbatim&gt;</property> - </emphasis> component, <emphasis role="bold"> - <property>&lt;a4j:outputPanel&gt;</property> - </emphasis> doesn&apos;t improve this JSF implementation option in any way, so - you still have to use this tag where it&apos;s necessary without RichFaces - usage. </para> - </note> - <para> RichFaces allows setting Ajax responses rendering directly basing on component tree - nodes without referring to the JSP (XHTML) page code. It could be defined by <emphasis> - <property>&quot;selfRendered&quot;</property> - </emphasis> attribute setting to &quot;true&quot; on <emphasis role="bold"> - <property>&lt;a4j:region&gt;</property> - </emphasis> and could help considerably speed up a response output. However, if a - transient flag is kept as it is, this rapid processing could cause missing of transient - components that present on view and don&apos;t come into a component tree. Hence, - for any particular case you could choose a way for you application optimization: speed - up processing or redundant memory for keeping tree part earlier defined a transient. - </para> - </section> - <section> - <title>Relevant resources links</title> - <para> - Vizit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/outputPanel... page</ulink> at RichFaces Livedemo for examples of component usage and their sources. - </para> - - <para> - Useful articles: - </para> - <itemizedlist> - <listitem> - <para> - search the <ulink url="http://www.jboss.org/index.html?module=bb&amp;op=viewforum&... Users Forum</ulink> for some additional information on component usage; - </para> - </listitem> - - </itemizedlist> - - - - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,33 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:paint2D</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>Create image by painting from a managed bean method, same as <emphasis><property>&quot;paint&quot;</property></emphasis> (Graphics2D) - in <emphasis><property>&quot;SWING&quot;</property></emphasis> components. </para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:paint2D&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/paint2D_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Simple Graphics2D - painting style directly on the Web page</para></listitem> - <listitem><para>Supports client/server caching for generated images</para></listitem> - <listitem><para>Fully supports <emphasis><property>&quot;JPEG&quot;</property></emphasis> (24-bit, default), <emphasis><property>&quot;GIF&quot;</property></emphasis> (8-bit with - transparency), and <emphasis><property>&quot;PNG&quot;</property></emphasis> (32-bit with transparency) - formats for sending generated images</para></listitem> - <listitem><para>Easily customizable borders and white space to wrap the image</para></listitem> - <listitem><para>Dynamically settable paint parameters using tag attributes</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/paint2D.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,166 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>paint</keyword> - <keyword>rich:paint2D</keyword> - <keyword>HtmlPaint2D</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Paint2D</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPaint2D</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Output</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.Paint2DRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.Paint2DTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:paint2D paint="#{paint2D.paint}" data="#{paint2DModel}"/> -... -]]></programlisting> - <para>Here <emphasis> - <property>&quot;paint&quot;</property> - </emphasis> specifies the method performing drawing and <emphasis> - <property>&quot;data&quot;</property> - </emphasis> specifies Managed Bean property keeping the data used by the method.</para> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPaint2D; -... -HtmlPaint2D myImage = new HtmlPaint2D(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The example shows two main attributes of the component:</para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;paint&quot;</property> - </emphasis> - </para> - <para>Specify a method receiving an object specified in data as a parameter and sending - graphical information into the stream</para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;data&quot;</property> - </emphasis> - </para> - <para>Specifies a bean class keeping your data for rendering</para> - </listitem> - </itemizedlist> - <para> - <note> - <title>Note:</title><para>Data object should implement serializable interface </para></note> - </para> - <para>The <emphasis> - <property>&quot;format&quot;</property> - </emphasis> attribute of the component defines a format of visual data passing to the server.</para> - <para>Generated data can be used as a cacheable or non-cacheable resource. It&apos;s defined - with <emphasis> - <property>&quot;cacheable&quot;</property> - </emphasis> attribute. If cache support is turned on, a key is created in URI with a mix of - size (width/height), <code>&quot;paint&quot;</code> method, <emphasis> - <property>&quot;format&quot;</property> - </emphasis> and <emphasis> - <property>&quot;data&quot;</property> - </emphasis> attributes.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[paintBean.java: - -public void paint(Graphics2D g2, Object obj) { - // code that gets data from the data Bean (PaintData) - PaintData data = (PaintData) obj; - ... - // a code drawing a rectangle - g2.drawRect(0, 0, data.Width, data.Height); - ... - // some more code placing graphical data into g2 stream below -} - -dataBean.java: - -public class PaintData implements Serializable{ - private static final long serialVersionUID = 1L; - Integer Width=100; - Integer Height=50; - ... -} - -page.xhtml: - -... -<rich:paint2D paint="#{paint2D.paint}" data="#{paint2DModel.data}"/> -... -]]></programlisting> - - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para><property>Paint2D</property> has no skin parameters and special <emphasis><property>style - classes</property>, </emphasis> as it consists of one element generated with a - your method on the server.</para> - <para>To define some style properties such as an indent or a border, it&apos;s possible to - use <emphasis> - <property>&quot;style&quot;</property> - </emphasis> and <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attributes on the component.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/paint2D.jsf... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:paint2D&gt;</property></emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,31 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:panel</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A skinnable <property>panel</property> that is rendered as a bordered rectangle with or - without a header.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:panel&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panel_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel </para></listitem> - <listitem><para>Support for any content inside</para></listitem> - <listitem><para>Header adding feature</para></listitem> - </itemizedlist> -</section> -</section> - - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,400 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rectangle</keyword> - <keyword>rich:panel</keyword> - <keyword>HtmlPanel</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.panel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.panel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.PanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.PanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panel header="Panel Header"> - ... - <!--Any Content inside--> - ... -</rich:panel> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanel; -... -HtmlPanel myPanel = new HtmlPanel(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis ><property>&quot;header&quot;</property></emphasis > attribute defines text to be represented. If you can use the - <emphasis ><property>&quot;header&quot;</property></emphasis> facet, you can even not use the <emphasis ><property>&quot;header&quot;</property></emphasis > attribute.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panel> - <f:facet name="header"> - <h:graphicImage value="/images/img1.png"/> - </f:facet> - ... - <!--Any Content inside--> - ... -</rich:panel> -... -]]></programlisting> - - <para><emphasis role="bold"> - <property>&lt;rich:panel&gt;</property> - </emphasis> components are used to group page content pieces on similarly formatted - rectangular <property>panels</property>. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panel> - ... -</rich:panel> -... -]]></programlisting> - <para>It&apos;s generating on a page in the following way:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:panel&gt;</property></emphasis> without header</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panel2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>The example shows that similar rectangular areas are formed with a particular style.</para> - <para>When creating a <property>panel</property> with a header element, one more <emphasis - role="bold"> - <property>&lt;div&gt;</property> - </emphasis> element is added with content defined for a header.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panel> - <f:facet name="header"> - <h:outputText value="Olympus EVOLT E-500 "/> - </f:facet> - ... -</rich:panel> -... -]]></programlisting> - <para>It&apos;s displayed on a page in the following way:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:panel&gt;</property> with header</emphasis></title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panel3.png"/> - </imageobject> - </mediaobject> - </figure> - <para>As it has been mentioned <link linkend="panel">above</link>, the component is mostly used for a page style definition, - hence the main attributes are style ones.</para> - <itemizedlist> - <listitem><para><emphasis><property> &quot;styleClass&quot; </property></emphasis></para></listitem> - <listitem><para><emphasis><property> &quot;headerClass&quot; </property></emphasis></para></listitem> - <listitem><para><emphasis><property> &quot;bodyClass&quot; </property></emphasis></para></listitem> - </itemizedlist> - <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> - <itemizedlist> - <listitem><para> <emphasis><property>&quot;onmouseover&quot;</property></emphasis> </para></listitem> - <listitem><para> <emphasis><property>&quot;onclick&quot;</property></emphasis> </para></listitem> - <listitem><para> <emphasis><property>&quot;onmouseout&quot;</property></emphasis> </para></listitem> - <listitem><para> etc. </para></listitem> - </itemizedlist> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Defines the header content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:panel&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:panel&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a whole component</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a header element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size </entry> - </row> - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerWeightFont</entry> - <entry>font-weight</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a body element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - <figure> - <title>Style classes</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panel_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_cn11"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-panel</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> - </row> - <row> - <entry>rich-panel-header</entry> - <entry>Defines styles for a header element</entry> - </row> - <row> - <entry>rich-panel-body</entry> - <entry>Defines styles for a body element</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"><property>&lt;rich:panel&gt;</property></emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the table <link linkend="tab_cn11">above</link>) and define necessary properties in them. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-panel-body{ - background-color: #ebf3fd; -} -... -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a body background color was changed.</para> - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold"><property>&lt;rich:panel&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:panel&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - text-align: justify; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;bodyClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:panel&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:panel... bodyClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, text align of body was changed.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?c... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:panel&gt;</property></emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,28 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:panelBar</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para><property>panelBar</property> is used for grouping any content which is loaded on the client - side and appears as groups divided on child panels after the header is clicked.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:panelBar&gt;</property></emphasis> with content inside</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBar_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Skinnable slide panel and child items</para></listitem> - <listitem><para>Groups any content inside each panel</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,289 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>bar</keyword> - <keyword>rich:panelbar</keyword> - <keyword>HtmlPanelBar</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.PanelBar</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPanelBar</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.PanelBar</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.PanelBarRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.PanelBarTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelBar> - ... - <rich:panelBarItem label="Canon"> - ... - </rich:panelBarItem> - <rich:panelBarItem label="Nikon"> - ... - </rich:panelBarItem> -</rich:panelBar> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelBar; -... -HtmlPanelBar myBar = new HtmlPanelBar(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it was mentioned <link linkend="panelBar">above</link>, - <property>panelBar</property> is used for grouping any content on the client, thus its - customization deals only with specification of sizes and styles for rendering.</para> - <para><emphasis> - <property>&quot;width&quot;</property> - </emphasis> and <emphasis> - <property>&quot;height&quot;</property> - </emphasis> (both are 100% on default) attributes stand apart.</para> - <para>Style attributes are described further.</para> - <para><property>panelBar</property> could contain any number of child - <property>panelBarItem</property> components inside, which content is uploaded onto the - client and headers are controls to open the corresponding child element.</para> - <!--para> - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. - This attribute defines the parameters of localized error and informational messages that - occur as a result of conversion, validation, or other application actions during the request - processing lifecycle. With the help of this attribute you can replace the - last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2} - for <code>&quot;ShortConverter.SHORT&quot;</code>. - </para--> - - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameter redefinition for a whole component</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameter</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <para>There is one predefined class for the <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis>, which is applicable to a whole component, specifying padding, borders, and - etc.</para> - <figure> - <title>Style classes</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBar_cn.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - <table id="tab_pB"> - <title>Class name that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-panelbar</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a - component</entry> - </row> - </tbody> - </tgroup> - </table> - <para>Other classes responsible for elements rendering are described for child <emphasis - role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> elements and could be found in the components chapters.</para> - - <table> - <title>Style component classes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>A class attribute</entry> - <entry>A component element defined by an attribute</entry> - </row> - </thead> - <tbody> - <row> - <entry>styleClass</entry> - <entry>Applicable to a whole component (together with headers)</entry> - </row> - <row> - <entry>headerClass</entry> - <entry>Applicable to a header element</entry> - </row> - <row> - <entry>contentClass</entry> - <entry>Applicable to a content </entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_pB"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-panelbar{ - font-style: italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBar_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example header and content font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:panelBar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:panelBar&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-family: Tahoma; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;contentClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:panelBar&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panelBar ... contentClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBar_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font family for content were changed.</para> - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.js... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:panelBar&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:panelBarItem</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para><property>panelBarItem</property> is used for grouping any content inside within one - panelBar which is loaded on client side and appears as groups divided on child panels after - header is clicked.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:panelBarItem&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBarItem_init.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel </para></listitem> - <listitem><para>Groups any content inside each Panels</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelBarItem.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,341 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>item</keyword> - <keyword>rich:panelbaritem</keyword> - <keyword>HtmlPanelBar</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.PanelBarItem</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPanelBarItem</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.PanelBarItem</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.PanelBarItemRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.PanelBarItemTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelBar> - <rich:panelBarItem label="Canon"> - ... - </rich:panelBarItem> - <rich:panelBarItem label="Nikon"> - ... - </rich:panelBarItem> -</rich:panelBar> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelBarItem; -... -HtmlPanelBarItem myBarItem = new HtmlPanelBarItem(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis> - <property> &quot;label&quot;</property> - </emphasis> attribute defines text to be represented. If you can use the <emphasis><property>&quot;label&quot;</property></emphasis> facet, you can even not use the <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelBarItem...> - <f:facet name="label"> - <h:graphicImage value="/images/img1.png"/> - </f:facet> - ... - <!--Any Content inside--> - ... -</rich:panelBarItem> -... -]]></programlisting> - <para>As it was mentioned <link linkend="panelBarItem">above</link>, - <property>panelBarItem</property> is used for grouping any content inside within one - <property>panelBar</property>, thus its customization deals only with specification of sizes - and styles for rendering.</para> - <para><property>panelBar</property> could contain any number of child - <property>panelBarItem</property> components inside, which content is uploaded onto the client - and headers are controls to open the corresponding child element.</para> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>label</entry> - <entry>defines the label text on the panel item header</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a content </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>preferableDataSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>preferableDataFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a header element (active or inactive)</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>headerWeightFont</entry> - <entry>font-weight</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBarItem_cn.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_pBI"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-panelbar-header</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a header - element</entry> - </row> - - <row> - <entry>rich-panelbar-header-act</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of an active header - element</entry> - </row> - - <row> - <entry>rich-panelbar-content</entry> - <entry>Defines styles for a content</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Style component classes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>A class attribute</entry> - <entry>A component element defined by an attribute</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerClass</entry> - <entry>Applicable to a header element</entry> - </row> - <row> - <entry>contentClass</entry> - <entry>Applicable to a content</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelBarItem&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_pBI"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-panelbar-content{ - background-color: #ecf4fe; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBarItem_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a content background color was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:panelBarItem&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:panelBarItem&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-family: monospace; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;headerClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:panelBarItem&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panelBarItem ... headerClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelBarItem_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font family for header of active item was changed.</para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:panelMenu</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:panelMenu&gt;</property> - </emphasis> component is used to define an in line vertical menu on a page.</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:panelMenu&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenu_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Different submission modes</para></listitem> - <listitem><para>Collapsing/expanding sublevels with optional request sending</para></listitem> - <listitem><para>Custom and predefined icons support</para></listitem> - <listitem><para>Disablement support</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenu.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,385 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:panelMenu</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.PanelMenu</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlPanelMenu</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.PanelMenu</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.PanelMenuRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.PanelMenuTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu event="onmouseover"> - <!--Nested panelMenu components--> -</rich:panelMenu> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelMenu; -... -HtmlPanelMenu myPanelMenu = new HtmlPanelMenu(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para>All attributes are not required.</para> - <para>Use <emphasis> - <property>&quot;event&quot;</property> - </emphasis> attribute to define an event for appearance of collapsing/expanding sublevels. - Default value is &quot;onclick&quot;. An example could be seen below.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu event="onmouseover"> - <!--Nested panelMenu components--> -</rich:panelMenu> -...]]></programlisting> - - <para>Switching mode could be chosen with the <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> attribute for all panelMenu items except ones where this attribute was redefined. - By default all items send traditional request. </para> - <para>The <emphasis> - <property>&quot;expandMode&quot;</property> - </emphasis> attribute defines the submission modes for all collapsing/expanding panelMenu - groups except ones where this attribute was redefined. </para> - <para>The <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> and <emphasis> - <property>&quot;expandMode&quot;</property> - </emphasis> attributes could be used with three possible parameters. The <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> attribute defines parameters for all included <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> elements.</para> - - <itemizedlist> - <listitem> - <para><code>Server</code> (default)</para> - </listitem> - </itemizedlist> - - <para>The common submission of the form is performed and a page is completely refreshed.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu mode="server"> - <rich:panelMenuGroup label="test Group" action="#{bean.action}"> - <rich:panelMenuItem label="test" action="#{capitalsBean.action}"> - <f:param value="test value" name="test"/> - </rich:panelMenuItem> - </rich:panelMenuGroup> -</rich:panelMenu> -...]]></programlisting> - <itemizedlist> - <listitem> - <para><code>Ajax</code></para> - </listitem> - </itemizedlist> - - <para>An Ajax form submission is performed, and additionally specified elements in the <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute are reRendered.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu mode="ajax"> - <rich:panelMenuGroup label="test Group" action="#{bean.action}"> - <rich:panelMenuItem label="test" reRender="test" action="#{capitalsBean.action}"> - <f:param value="test value" name="test"/> - </rich:panelMenuItem> - </rich:panelMenuGroup> -</rich:panelMenu> -...]]></programlisting> - <itemizedlist> - <listitem> - <para><code>None</code></para> - </listitem> - </itemizedlist> - - <para><emphasis> - <property>&quot;Action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;ActionListener&quot;</property> - </emphasis> item&apos;s attributes are ignored. Items don&apos;t fire any submits itself. Behavior is - fully defined by the components nested into items.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu event="onclick" submitMode="none"> - <rich:panelMenuItem label="Link to external page"> - <h:outputLink ... > - <rich:panelMenuItem> -</rich:panelMenu> -...]]></programlisting> - - <note><title>Note:</title><para> As the <emphasis role="bold"> - <property>&lt;rich:panelMenu&gt;</property> - </emphasis> component doesn&apos;t provide its own form, use it between - <emphasis role="bold"> <property>&lt;h:form&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;/h:form&gt;</property> </emphasis> tags.</para></note> - - <para>The <emphasis> - <property>&quot;expandSingle&quot;</property> - </emphasis> attribute is defined for expanding more than one submenu on the same level. The - default value is <emphasis> - <property>&quot;false&quot;</property> - </emphasis>. If it&apos;s true the previously opened group on the top level closes before - opening another one. See the picture below.</para> - - <figure> - <title>Using the <emphasis><property>&quot;expandSingle&quot;</property></emphasis> attribute</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenu2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>The <emphasis> - <property>&quot;selectedChild&quot;</property> - </emphasis> attribute is used for defining the name of the selected group or item. An example - for group is placed below:</para> - - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu selectedChild="thisChild"> - <rich:panelMenuGroup label="Group1" name="thisChild"> - <!--Nested panelMenu components--> - </rich:panelMenuGroup> -</rich:panelMenu> -...]]></programlisting> - <para> - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. - The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. - This attribute defines the parameters of localized error and informational messages that - occur as a result of conversion, validation, or other application actions during the request - processing lifecycle. With the help of this attribute you can replace the - last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2} - for <code>&quot;ShortConverter.SHORT&quot;</code>. - </para> - </section> - - <section> - <title>JavaScript API</title> - <para>In Java Script code for expanding/collapsing group element creation it&apos;s - necessary to use <code>expand()</code>/<code>collapse()</code> function.</para> - - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>expand()</entry> - - <entry>Expands group element</entry> - </row> - - <row> - <entry>collapse()</entry> - - <entry>Collapses group element</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis></para> - - <para>There are no skin parameters. To redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:panelMenu&gt;</property> - </emphasis> components at once, you should add to your style sheets the <emphasis> - <property>style class</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:panelMenu&gt;</property> - </emphasis> component.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <table id="tab_cn_pM"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-pmenu</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> - </row> - <row> - <entry>rich-pmenu-top-group</entry> - <entry>Defines styles for a top group element of a component</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelMenu&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_cn_pM"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-pmenu{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenu_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:panelMenu&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:panelMenu&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color: #ecf4fe; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;hoveredItemClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:panelMenu&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panelMenu ... hoveredItemClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>&quot;styleClass&quot;</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenu_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,background color for hovered item was changed.</para> - - - - </section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:panelMenu&gt;</property></emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,33 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:panelMenuGroup</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:panelMenuGroup&gt;</property> - </emphasis> component is used to define an expandable group of items inside the panel menu or other group.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:panelMenuGroup&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look-and-feel</para></listitem> - <listitem><para>Different submission modes inside every group</para></listitem> - <listitem><para>Optional submissions on expand collapse groups</para></listitem> - <listitem><para>Custom and predefined icons supported</para></listitem> - <listitem><para>Support for disabling</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,613 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:panelMenuGroup</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.PanelMenuGroup</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlPanelMenuGroup</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.PanelMenuGroup</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.PanelMenuGroupRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.PanelMenuGroupTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu> - <rich:panelMenuGroup label="Group1"> - <!--Nested panelMenu components--> - </rich:panelMenuGroup> -</rich:panelMenu> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelMenuGroup; -... -HtmlPanelMenuGroup myPanelMenuGroup = new HtmlPanelMenuGroup(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para>All attributes except <emphasis> - <property>&quot;label&quot;</property> - </emphasis> are optional. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute defines text to be represented.</para> - <para>Switching mode could be chosen with the<emphasis> - <property> &quot;expandMode&quot;</property> - </emphasis> attribute for the concrete panelMenu group.</para> - <para>The <emphasis> - <property>&quot;expandMode&quot;</property> - </emphasis> attribute could be used with three possible parameters:</para> - - <itemizedlist> - <listitem> - <para><code>ServerM</code> (default)</para> - </listitem> - </itemizedlist> - - <para>Regular form submission request is used.</para> - - <itemizedlist> - <listitem> - <para><code>Ajax</code></para> - </listitem> - </itemizedlist> - - <para>Ajax submission is used for switching.</para> - - <itemizedlist> - <listitem> - <para><code>None</code></para> - </listitem> - </itemizedlist> - - <para><emphasis> - <property>&quot;Action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;actionListener&quot;</property> - </emphasis> attributes are ignored. Items don&apos;t fire any submits itself. Behavior is - fully defined by the components nested into items.</para> - - <para>There are three icon-related attributes. The <emphasis> - <property>&quot;iconExpanded&quot;</property> - </emphasis> attribute defines an icon for an expanded state. The <emphasis> - <property>&quot;iconCollapsed&quot;</property> - </emphasis> attribute defines an icon for a collapsed state. The <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attribute defines an icon for a disabled state.</para> - - <para>Default icons are shown on the picture below:</para> - - <figure> - <title>Default icons</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu> - <rich:panelMenuGroup label="Group1" iconExpanded="disc" iconCollapsed="chevron"> - <!--Nested panelMenu components--> - </rich:panelMenuGroup> -</rich:panelMenu> -...]]></programlisting> - <para> As the result the pictures are shown below. The first one represents the collapsed state, - the second one - expanded state:</para> - - <figure> - <title>Collapsed state</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup3.png"/> - </imageobject> - </mediaobject> - </figure> - - <figure> - <title>Expanded state</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup4.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>It&apos;s also possible to define a path to the icon. Simple code is placed below.</para> - - <programlisting role="XML"><![CDATA[... -<rich:panelMenu> - <rich:panelMenuGroup label="Group1" iconExpanded="\images\img1.png" iconCollapsed="\images\img2.png"> - <!--Nested menu components--> - </rich:panelMenuGroup> -</rich:panelMenu> -...]]></programlisting> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">&quot; Decide what to process &quot; </link> guide section. - </para> - </section> - - <section> - <title>JavaScript API</title> - <para>In Java Script code for expanding/collapsing group element creation it&apos;s - necessary to use <code>expand()</code>/<code>collapse()</code> function.</para> - - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>expand()</entry> - - <entry>Expand group element</entry> - </row> - - <row> - <entry>collapse()</entry> - - <entry>Collapse group element</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:panelMenuGroup&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:panelMenuGroup&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title> Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a table element of the first level group</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerWeightFont</entry> - - <entry>font-weight</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - - <row> - <entry>headerSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>headerTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>headerBackgroundColor</entry> - - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a table element of second and next level groups</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>headerWeightFont</entry> - - <entry>font-weight</entry> - </row> - - <row> - <entry>headerFamilyFont</entry> - - <entry>font-family</entry> - </row> - - <row> - <entry>headerSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>tableBorderColor</entry> - - <entry>border-top-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for wrapper div element of the first level group</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>panelBorderColor</entry> - - <entry>border-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a hovered group element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - - <entry> background-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a disabled group element</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>tabDisabledTextColor</entry> - - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup_cn2.png"/> - </imageobject> - </mediaobject> - </figure> - <table id="panelMenuC"> - <title>Classes names that define an upper level groups</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>rich-pmenu-top-group-self-icon</entry> - - <entry>Defines styles for a top group icon</entry> - </row> - - <row> - <entry>rich-pmenu-top-group-self-label</entry> - - <entry>Defines styles for a top group label</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define a second and lower level groups</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>rich-pmenu-group</entry> - - <entry>Defines styles for a group</entry> - </row> - - <row> - <entry>rich-pmenu-group-self-icon</entry> - - <entry>Defines styles for a group icon</entry> - </row> - - <row> - <entry>rich-pmenu-group-self-label</entry> - - <entry>Defines styles for a group label</entry> - </row> - </tbody> - - </tgroup> - </table> - - <table> - <title>Classes names that define a group state</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-pmenu-hovered-element</entry> - - <entry>Defines styles for a hovered group element</entry> - </row> - - <row> - <entry>rich-pmenu-disabled-element</entry> - - <entry>Defines styles for a disabled group element</entry> - </row> - </tbody> - - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelMenuGroup&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="panelMenuC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-pmenu-disabled-element{ - color: #87b9ff; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a disabled element font style and color were changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:panelMenuGroup&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:panelMenuGroup&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color: #ecf4fe; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;hoverClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:panelMenuGroup&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panelMenuGroup ... hoverClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuGroup_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the background color for hovered item was changed.</para> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Some additional information about usage of component can be found - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j... the component Live Demo page</ulink>. - </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:panelMenuItem</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> component is used to define a single item inside popup list.</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look-and-feel</para></listitem> - <listitem><para>Different submission modes</para></listitem> - <listitem><para>Optionally supports any content inside</para></listitem> - <listitem><para>Custom and predefined icons supported</para></listitem> - <listitem><para>Support for disabling</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/panelMenuItem.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,566 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:panelMenuItem</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - - <tbody> - <row> - <entry>component-type</entry> - - <entry>org.richfaces.PanelMenuItem</entry> - </row> - - <row> - <entry>component-class</entry> - - <entry>org.richfaces.component.html.HtmlPanelMenuItem</entry> - </row> - - <row> - <entry>component-family</entry> - - <entry>org.richfaces.PanelMenuItem</entry> - </row> - - <row> - <entry>renderer-type</entry> - - <entry>org.richfaces.PanelMenuItemRenderer</entry> - </row> - - <row> - <entry>tag-class</entry> - - <entry>org.richfaces.taglib.PanelMenuItemTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - - <para>To create the simplest variant on a page use the following syntax:</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu> - ... - <rich:panelMenuItem value="Item1"/> - ... -</rich:panelMenu> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPanelMenuItem; -... -HtmlPanelMenuItem myPanelMenuItem = new HtmlPanelMenuItem(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - - <para>All attributes except <emphasis> - <property>&quot;label&quot;</property> - </emphasis> are optional. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute defines text to be represented.</para> - <para>The <emphasis> - <property>&quot;mode&quot;</property> - </emphasis> attribute could be used with three possible parameters:</para> - - <itemizedlist> - <listitem> - <para><code>Server</code> (default)</para> - </listitem> - </itemizedlist> - - <para>Regular form submission request is used.</para> - - <itemizedlist> - <listitem> - <para> - <code>Ajax</code> - </para> - </listitem> - </itemizedlist> - - <para>Ajax submission is used for switching.</para> - - <itemizedlist> - <listitem> - <para> - <code>None</code> - </para> - </listitem> - </itemizedlist> - - <para><emphasis> - <property>&quot;Action&quot;</property> - </emphasis> and <emphasis> - <property>&quot;actionListener&quot;</property> - </emphasis> attributes are ignored. Items don&apos;t fire any - submits itself. Behavior is fully defined by the components nested - into items.</para> - - <para>Here is an example for value &quot;none&quot;:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:panelMenu> - ... - <rich:panelMenuItem mode="none" onclick="document.location.href='http://labs.jboss.com/jbossrich... - <h:outputLink value="http://labs.jboss.com/jbossrichfaces/"> - <h:outputText value="RichFaces Home Page"></h:outputText> - </h:outputLink> - </rich:panelMenuItem> - ... -</rich:panelMenu> -...]]></programlisting> - - <para>There are two icon-related attributes. The <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> attribute defines an icon. The <emphasis> - <property>&quot;iconDisabled&quot;</property> - </emphasis> attribute defines an icon for a disabled item.</para> - - <para>Default icons are shown on the picture below:</para> - - <figure> - <title>Default icons</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - <rich:panelMenu> - ... - <rich:panelMenuItem value="Item 1.1" icon="chevronUp" /> - ... - </rich:panelMenu> -...]]></programlisting> - <para> As the result the picture is shown below:</para> - - <figure> - <title>Using an <emphasis> - <property>&quot;icon&quot;</property> - </emphasis> attribute</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>It&apos;s also possible to define a path to the icon. Simple code is - placed below.</para> - - <programlisting role="XML"><![CDATA[... -<rich:panelMenu> - ... - <rich:panelMenuItem value="Item 1.1" icon="\images\img1.png" /> - ... -</rich:panelMenu> -...]]></programlisting> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find in the - <link linkend="process"> &quot;Decide what to process&quot; </link> guide section. </para> - </section> - - <!--section> - <title>JavaScript API</title> - <para>In Java Script code for expanding/collapsing group element creation it&apos;s - necessary to use doExpand()/doCollapse() function.</para> - - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>doExpand()</entry> - - <entry>Expand group element</entry> - </row> - - <row> - <entry>doCollapse()</entry> - - <entry>Collapse group element</entry> - </row> - </tbody> - </tgroup> - </table> - - </section--> - - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title> Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a table element of the first - level item</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>generalFamilyFont</entry> - - <entry>font-family</entry> - </row> - - <row> - <entry>generalWeightFont</entry> - - <entry>font-weight</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - - <entry>font-size</entry> - </row> - - <row> - <entry>generalTextColor</entry> - - <entry>color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - - <entry>border-top-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameter redefinition for a disabled item </title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Parameter for disabled item</entry> - - <entry>CSS properties</entry> - </row> - </thead> - - <tbody> - <row> - <entry>tabDisabledTextColor</entry> - - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component - elements.</para> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_cn2.png" - /> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_cn_pMI"> - <title>Classes names that define the first level items</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-pmenu-top-item</entry> - - <entry>Defines styles for a top panel - menu item</entry> - </row> - - <row> - <entry>rich-pmenu-top-item-icon</entry> - - <entry>Defines styles for a top panel - menu item icon</entry> - </row> - - <row> - <entry>rich-pmenu-top-item-label</entry> - - <entry>Defines styles for a top panel - menu item label</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define the second and lower level items</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-pmenu-item</entry> - - <entry>Defines styles for a panel menu - item</entry> - </row> - - <row> - <entry>rich-pmenu-item-icon</entry> - - <entry>Defines styles for a panel menu - item icon</entry> - </row> - - <row> - <entry>rich-pmenu-item-label</entry> - - <entry>Defines styles for a panel menu - item label</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define items state</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-pmenu-item-selected</entry> - - <entry>Defines styles for a panel menu - selected item</entry> - </row> - - <row> - <entry>rich-pmenu-disabled-element</entry> - - <entry>Defines styles for a disabled - panel menu item</entry> - </row> - - <row> - <entry>rich-pmenu-hovered-element</entry> - - <entry>Defines styles for a hovered - panel menu item</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="tab_cn_pMI"> above</link>) and define - necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-pmenu-hovered-element { - background-color: #ff7800; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a hovered element background color was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass { - color: #a0a0a0; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;disabledClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:panelMenuItem&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panelMenuItem ... disabledClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/panelMenuItem_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the text color for disabled item - was changed.</para> - </section> - <section> - <title>Relevant resources links</title> - <para> Some additional information about usage of component can be found on this <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j... - >LiveDemo page</ulink>. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,48 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:pickList</keyword> - </keywordset> - <releaseinfo>3.2.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property> - </emphasis> component is used for moving selected item(s) from one list into another. - </para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property> - </emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/pickList_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> -<section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para>Multiple selection of list items</para> - </listitem> - <listitem> - <para>Keyboard support</para> - </listitem> - <listitem> - <para>Supports standard JSF internationalization</para> - </listitem> - <listitem> - <para>Highly customizable look and feel</para> - </listitem> - <!--listitem> - <para>Disablement support</para> - </listitem--> - </itemizedlist> -</section> -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/pickList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,1063 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:pickList</keyword> - <keyword>pickList</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.PickList</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPickList</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.PickList</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.PickListRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.PickListTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:pickList value="#{pickBean.targetValues}"> - <f:selectItem itemValue="Bentley" itemLabel="Bentley"/> - <f:selectItems value="#{pickBean.sourceValues}"/> -</rich:pickList> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPickList; -... -HtmlPickList myPickList = new HtmlPickList(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property> - </emphasis> component consists of <itemizedlist> - <listitem><para>2 <property>item lists</property>. Every item has three different representations: common, selected, active. - Combination of these states is possible.</para></listitem> - <listitem><para> - <property>Move controls set</property> is a set of controls, which performs moving items between lists. - </para></listitem> - </itemizedlist> - </para> - - <para> - The <emphasis><property>&quot;value&quot;</property></emphasis> attribute is the initial value of this component. - </para> - <para> - The <emphasis role="bold"><property>&lt;f:selectItem /&gt;</property></emphasis> or <emphasis role="bold"> - <property>&lt;f:selectItems /&gt;</property></emphasis> facets are used to define the values of a source list. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:pickList value="#{pickBean.listValues}"> - <f:selectItem itemValue="Bentley" itemLabel="Bentley"/> - <f:selectItem itemValue="Audi" itemLabel="Audi"/> - <f:selectItems value="#{pickBean.sourceList}"/> -</rich:pickList> -...]]></programlisting> - - <para> - The <emphasis> <property> &quot;switchByClick&quot;</property></emphasis> attribute provides an option to copy and remove items between lists by one click. - Default value of this attribute is &quot;false&quot;, so you need a double click to copy, remove items from one list to another. - </para> - <para> - Lables of the <property>move controls</property> can be defined with - <emphasis><property> &quot;copyAllControlLabel&quot;</property></emphasis>, - <emphasis><property> &quot;copyControlLabel&quot;</property></emphasis>, - <emphasis> <property> &quot;removeControlLabel&quot;</property></emphasis>, - <emphasis> <property> &quot;removeAllControlLabel&quot;</property></emphasis> attributes. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:pickList copyAllControlLabel = "#{pickBean.copyAllLabel}" copyControlLabel = "#{pickBean.copyLabel}" - removeControlLabel = "#{pickBean.removeLabel}" removeAllControlLabel ="#{pickBean.removeAllLabel}" value="#{pickBean.listValues}"> - <f:selectItem itemValue="Bentley" itemLabel="Bentley"/> - <f:selectItem itemValue="Audi" itemLabel="Audi"/> - <f:selectItems value="#{pickBean.sourceList}"/> -</rich:pickList> -...]]></programlisting> - <para> - If you don&apos;t want to display labels on the buttons you need to set - <emphasis><property> &quot;showButtonsLabel&quot;</property></emphasis> to &quot;false&quot;. - </para> - <figure> - <title>Move control buttons without labels</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/pickList2.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - Alternative to the given attributes are the following facets: <emphasis><property>&quot;copyAllControl&quot;</property></emphasis>, - <emphasis><property>&quot;removeAllControl&quot;</property></emphasis>, - <emphasis><property>&quot;copyControl&quot;</property></emphasis>, - <emphasis><property>&quot;removeControl&quot;</property></emphasis>, - <emphasis><property>&quot;copyAllControlDisabled&quot;</property></emphasis>, - <emphasis><property>&quot;removeAllControlDisabled&quot;</property></emphasis>, - <emphasis><property>&quot;copyControlDisabled&quot;</property></emphasis>, - <emphasis><property>&quot;removeControlDisabled&quot;</property></emphasis>, - <emphasis><property>&quot;caption&quot;</property></emphasis>. - </para> - <para> - It is an example of usage of the facets and it is identical to the previous example. - </para> - <programlisting role="XML"><![CDATA[... -<rich:pickList value="#{pickBean.listValues}"> - <f:facet name="copyAllControl"> - <h:commandButton value="#{pickBean.copyAllLabel}" /> - </f:facet> - <f:facet name="copyControl"> - <h:commandButton value="#{pickBean.copyLabel}" /> - </f:facet> - <f:facet name="removeControl"> - <h:commandButton value="#{pickBean.removeLabel}" /> - </f:facet> - <f:facet name="removeAllControl"> - <h:commandButton value="#{pickBean.removeAllLabel}" /> - </f:facet> - <f:selectItem itemValue="Bentley" itemLabel="Bentley"/> - <f:selectItem itemValue="Audi" itemLabel="Audi"/> - <f:selectItems value="#{pickBean.sourceList}"/> -</rich:pickList> -...]]></programlisting> - <para> - With the help of <emphasis><property>&quot;moveControlsVerticalAlign&quot;</property></emphasis> attribute - you can align <property>move controls</property> vertically. - </para> - <para>The possible value for <emphasis><property>&quot;moveControlsVerticalAlign&quot;</property></emphasis> are &quot;top&quot;, &quot;bottom&quot; and &quot;center&quot; (default value).</para> - - <para> - The <emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property></emphasis> - component provides resizing of lists by using such attributes as: - <itemizedlist> - <listitem><para> - <emphasis> - <property> &quot;listsHeight&quot;</property></emphasis> defines height of the lists. - - </para></listitem> - <listitem><para> - <emphasis> - <property> &quot;sourceListWidth&quot;</property></emphasis> defines width of a source list. - - </para></listitem> - <listitem><para> - <emphasis> - <property> &quot;targetListWidth&quot;</property></emphasis> defines width of a target list. - - </para></listitem> - </itemizedlist> - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:pickList listsHeight="#{pickBean.listsHeight}" sourceListWidth="#{pickBean.sourceListWidth}" targetListWidth="#{pickBean.targetListWidth}" value="#{pickBean.listValues}"> - <f:selectItem itemValue="Bentley" itemLabel="Bentley"/> - <f:selectItem itemValue="Audi" itemLabel="Audi"/> - <f:selectItems value="#{pickBean.sourceList}"/> -</rich:pickList> -...]]></programlisting> - - <para>The <emphasis role="bold"><property>&lt;rich:pickList&gt;</property></emphasis> component allows to use internationalization method - to redefine and localize the labels. You could use application resource bundle and define - <code>RICH_PICK_LIST_COPY_ALL_LABEL</code>, - <code>RICH_PICK_LIST_COPY_LABEL</code>, - <code>RICH_PICK_LIST_REMOVE_ALL_LABEL</code>, - <code>RICH_PICK_LIST_REMOVE_LABEL</code> there. - </para> - - <table> - <title>Keyboard usage for elements selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Keys and combinations </entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>CTRL+click</entry> - <entry>Inverts selection for an item</entry> - </row> - <row> - <entry>SHIFT+click</entry> - <entry>Selects all rows from active one to a clicked row if they differ, - else select the active row. All other selections are cleared</entry> - </row> - <row> - <entry>CTRL+A</entry> - <entry>Selects all elements inside the list if some active element is - already present in a list</entry> - </row> - <row> - <entry>Up, Down arrows</entry> - <entry>Changes the active and selected elements to the next or previous in a list</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <!-- section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - <tbody--> - <!--Sorting API--> - <!-- - <row> - <entry>SortAscending()</entry> - <entry>Sorts items in the list ascending</entry> - </row> - <row> - <entry>SortDescending()</entry> - <entry>Sorts items in the list descending</entry> - </row> - <row> - <entry>Sort()</entry> - <entry>Inverts current sorting</entry> - </row> - --> - - <!--Controls common API --> - <!--row> - <entry>hide()</entry> - <entry>Hides ordering control</entry> - </row> - <row> - <entry>show()</entry> - <entry>Shows ordering control</entry> - </row> - <row> - <entry>isShown()</entry> - <entry>Checks if current control is shown</entry> - </row> - <row> - <entry>enable()</entry> - <entry>Enables ordering control</entry> - </row> - <row> - <entry>disable()</entry> - <entry>Disables ordering control</entry> - </row> - <row> - <entry>isEnabled()</entry> - <entry>Checksif current control is enabled</entry> - </row--> - <!--List managing API --> - <!--row> - <entry>copy()</entry> - <entry>Copies selected item from the source list to the target list</entry> - </row> - <row> - <entry>remove()</entry> - <entry>Removes selected item from the target list to the source list</entry> - </row> - <row> - <entry>copyAll()</entry> - <entry>Copies all items from the source list to the target list</entry> - </row> - <row> - <entry>removeAll()</entry> - <entry>Removes all items from the target list to the source list</entry> - </row> - <row> - <entry>getSelection()</entry> - <entry>Returns currently selected item</entry> - </row> - <row> - <entry>getItems()</entry> - <entry>Returns the collection of all items</entry> - </row> - </tbody> - </tgroup> - </table> - </section--> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>copyAllControl</entry> - <entry>Redefines the &quot;copyAll&quot; label with the control set. Related attribute is &quot;copyAllControlLabel&quot;</entry> - </row> - <row> - <entry>removeAllControl</entry> - <entry>Redefines the &quot;removeAll&quot; label with the control set. Related attribute is &quot;removeAllControlLabel&quot;</entry> - </row> - <row> - <entry>copyControl</entry> - <entry>Redefines the &quot;copy&quot; label with the control set. Related attribute is &quot;copyControlLabel&quot;</entry> - </row> - <row> - <entry>removeControl</entry> - <entry>Redefines the &quot;remove&quot; label with the control set. Related attribute is &quot;removeControlLabel&quot;</entry> - </row> - <row> - <entry>copyAllControlDisabled</entry> - <entry>Redefines the disabled &quot;copyAll&quot; label with the control set.</entry> - </row> - <row> - <entry>removeAllControlDisabled</entry> - <entry>Redefines the disabled &quot;removeAll&quot; label with the control set.</entry> - </row> - <row> - <entry>copyControlDisabled</entry> - <entry>Redefines the disabled &quot;copy&quot; label with the control set.</entry> - </row> - <row> - <entry>removeControlDisabled</entry> - <entry>Redefines the disabled &quot;remove&quot; label with the control set.</entry> - </row> - <row> - <entry>caption</entry> - <entry>Defines the &quot;caption&quot; label with the control set.</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for a list</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColorr</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a disabled button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a pressed button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a highlighted button</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFon</entry> - <entry>font-size</entry> - </row> - <row> - <entry>selectControlColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button selection</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a button content</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a source and target items</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a source and target cell</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a selected source and target cell</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for an active source and target cell</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>border-top-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>border-bottom-color</entry> - </row> - - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for a selected source and target row</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a controls</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - - - </tbody> - </tgroup> - </table> - - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>The following pictures illustrate how CSS classes define styles for component elements.</para> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/pickList_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="pickListC"> - <title>Classes names that define a list representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-list-picklist</entry> - <entry>Defines styles for a wrapper &lt;table&gt; element of a pickList</entry> - </row> - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define a source and target items representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-picklist-source-items</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a source list</entry> - </row> - <row> - <entry>rich-picklist-target-items</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a target list</entry> - </row> - - <row> - <entry>rich-picklist-body</entry> - <entry>Defines styles for a wrapper &lt;table&gt; element of a list body (source and target)</entry> - </row> - - <row> - <entry>rich-picklist-list</entry> - <entry>Defines styles for a (source and target) list</entry> - </row> - - <row> - <entry>rich-picklist-list-content</entry> - <entry>Defines styles for a (source and target) list content</entry> - </row> - - <row> - <entry>rich-picklist-internal-tab</entry> - <entry>Defines styles for a wrapper &lt;table&gt; element of list items (source and target)</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define rows representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-picklist-source-row</entry> - <entry>Defines styles for a source list row</entry> - </row> - <row> - <entry>rich-picklist-source-row-selected</entry> - <entry>Defines styles for a selected row in a source list</entry> - </row> - <row> - <entry>rich-picklist-target-row-selected</entry> - <entry>Defines styles for a selected row in a target list</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define a source cell representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-picklist-source-cell</entry> - <entry>Defines styles for a cell in a source list</entry> - </row> - <row> - <entry>rich-picklist-source-cell-selected</entry> - <entry>Defines styles for a selected cell in a source list</entry> - </row> - <row> - <entry>rich-picklist-source-cell-active</entry> - <entry>Defines styles for an active cell in a source list</entry> - </row> - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define a target cell representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-picklist-target-cell</entry> - <entry>Defines styles for a target list cell</entry> - </row> - <row> - <entry>rich-picklist-target-cell-selected</entry> - <entry>Defines styles for a selected cell in a target list</entry> - </row> - <row> - <entry>rich-picklist-target-cell-active</entry> - <entry>Defines styles for an active cell in a target list</entry> - </row> - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define a control representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-picklist-controls</entry> - <entry>Defines styles for wrapper &lt;div&gt; element of a pickList controls</entry> - </row> - <row> - <entry>rich-picklist-control-disabled</entry> - <entry>Defines styles for a control in a disabled state</entry> - </row> - <row> - <entry>rich-picklist-control-copyall</entry> - <entry>Defines styles for a "copyAll" control</entry> - </row> - <row> - <entry>rich-picklist-control-copy</entry> - <entry>Defines styles for a "Copy" control</entry> - </row> - <row> - <entry>rich-picklist-control-remove</entry> - <entry>Defines styles for a "Remove" control</entry> - </row> - <row> - <entry>rich-picklist-control-removeall</entry> - <entry>Defines styles for a "removeAll" control</entry> - </row> - <row> - <entry>rich-picklist-control-img</entry> - <entry>Defines styles for a control image</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table > - <title>Classes names that define a button representation</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-list-picklist-button</entry> - <entry>Defines styles for a button</entry> - </row> - <row> - <entry>rich-list-picklist-button-disabled</entry> - <entry>Defines styles for a disabled button</entry> - </row> - <row> - <entry>rich-list-picklist-button-press</entry> - <entry>Defines styles for a pressed button</entry> - </row> - <row> - <entry>rich-list-picklist-button-light</entry> - <entry>Defines styles for a button highlight</entry> - </row> - <row> - <entry>rich-list-picklist-button-selection</entry> - <entry>Defines styles for a button selection</entry> - </row> - <row> - <entry>rich-list-picklist-button-content</entry> - <entry>Defines styles for a button content</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="pickListC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-picklist-list{ - background-color:#ecf4fe; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/pickList_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the background color for lists is changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:pickList&gt;</property></emphasis> component. In this case you should create own style classes and use them in the corresponding <emphasis role="bold" - ><property>&lt;rich:pickList&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight:bold; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:pickList&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:pickList ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/pickList_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style for buttons is changed.</para> - - </section> - - <section> - <title>Relevant Resources Links</title> - <para><ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/pickList.js... - >On RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> - <property>&lt;rich:pickList&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,17 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> - <section id="poll_d"> - <sectioninfo> - <keywordset> - <keyword>a4j:poll</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> - - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> component allows periodical sending of Ajax requests to a server and is - used for a page updating according to a specified time interval.</para> - </section> -</root> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/poll.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,196 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:poll</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Poll</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.components.AjaxPoll</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxPoll</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxPollRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the component with a Page Tag</title> - <para id="creating">To create the simplest variant on a page use the following syntax:</para> - <programlisting role="XML"><![CDATA[<a4j:poll interval="500" reRender="grid"/> -]]></programlisting> - <!--para>The <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> component defined this way every second submits Ajax form onto the server, - performs the corresponding action and renders a components with the <emphasis> - <property>&quot;someDataTable&quot;</property> - </emphasis> id after a response comes back.</para--> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxPoll; -... -AjaxPoll myPoll = new AjaxPoll(); -...]]></programlisting> - - </section> - - <section> - <title>Details of usage</title> - <para id="attributes"> - The <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> componet is used for periodical polling of server data. - In order to use the component it&apos;s necessary to set an update interval. - The <emphasis><property>&quot;interval&quot;</property></emphasis> attribute defines an interval in milliseconds between the previous response and the next request. - The total period beetween two requests generated by the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> component is a sum of an<emphasis><property>&quot;interval&quot;</property></emphasis> attribute value and server response time. - Default value for <emphasis><property>&quot;interval&quot;</property></emphasis> attribute is set to &quot;1000&quot; milliseconds (1 second). - See an example of definition in the &quot;<link linkend="creating">Creating the component with a Page Tag</link>&quot; section. - </para> - <para> - The <emphasis><property>&quot;timeout&quot;</property></emphasis> attribute defines response waiting time in milliseconds. - If a response isn&apos;t received during this period a connection is aborted and the next request is sent. - Default value for <emphasis><property>&quot;timeout&quot;</property></emphasis> attribute isn&apos;t set. - </para> - - <para> - The <emphasis><property>&quot;enabled&quot;</property></emphasis> attribute defines should the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> send request or not. - It&apos;s necessary to render the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> to apply the current value of <emphasis><property>&quot;enabled&quot;</property></emphasis> attribute. - You can use an EL-expression for <emphasis><property>&quot;enabled&quot;</property></emphasis> attribute to point to a bean property. - An example of usage of mentioned above attributes is placed below: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<a4j:region> - <h:form> - <a4j:poll id="poll" interval="1000" enabled="#{userBean.pollEnabled}" reRender="poll,grid"/> - </h:form> -</a4j:region> -<h:form> - <h:panelGrid columns="2" width="80%" id="grid"> - <h:panelGrid columns="1"> - <h:outputText value="Polling Inactive" rendered="#{not userBean.pollEnabled}" /> - <h:outputText value="Polling Active" rendered="#{userBean.pollEnabled}" /> - <a4j:commandButton style="width:120px" id="control" value="#{userBean.pollEnabled?'Stop':'Start'} Polling" reRender="poll, grid"> - <a4j:actionparam name="polling" value="#{!userBean.pollEnabled}" assignTo="#{userBean.pollEnabled}"/> - </a4j:commandButton> - </h:panelGrid> - <h:outputText id="serverDate" style="font-size:16px" value="Server Date: #{userBean.date}"/> - </h:panelGrid> -</h:form> -...]]></programlisting> - - <para> - The example shows how date and time are updated on a page in compliance with data taken from a server. - The <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> componet sends requests to the server every second. - <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute of the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> contains poll's own <code>Id</code>. - Hence, it is self rendered for applying the current value of <emphasis><property>&quot;enabled&quot;</property></emphasis> attribute. - </para> - - - <note> - <title>Notes:</title> - <itemizedlist> - <listitem> - <para> - The form around the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> component is required. - </para> - </listitem> - - <listitem> - <para> - To make the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> component send requests periodically when it <code>limitToList</code> is set to "true", - pass the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> ID to it <code>reRender</code> attribute. - </para> - </listitem> - - </itemizedlist> - </note> - - <!--para>The component decodes all necessary JavaScript for time count and on the expiry of some - interval for calling of a RichFaces utility method for Ajax request sending (A4J.AJAX.Submit - (Some request parameters)). </para> - <para> The timer could be stopped or started in any time. The current state is controlled on the - component with the <emphasis> - <property>"enabled"</property> - </emphasis> attribute: </para> - <programlisting role="XML"><![CDATA[<a4j:poll interval="1000" enabled="#{bean.boolProperty}"/> -]]></programlisting> - <para>As any RichFaces Action component, <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> has all described in the <emphasis role="bold"> - <property> - <ulink url="index.html#support">&lt;a4j:support&gt;</ulink> - </property> - </emphasis> chapter attributes to provide the necessary behavior of request sending (delay, - limitation of a submit and render area, requests frequency, and etc.). For detailed - information on these attributes see again the <emphasis role="bold"> - <property> - <ulink url="index.html#support">&lt;a4j:support&gt;</ulink> - </property> - </emphasis> component description. </para--> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find &quot;<link linkend="process">Decide what to process</link>&quot; guide section. - </para> - </section> - - - <section> - <title>Relevant resources links</title> - <para> - Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/poll.jsf?c=... page</ulink> at RichFaces LiveDemo for examples of the component usage and their sources. - </para> - - <para> - Useful examples and articles: - </para> - <itemizedlist> - <listitem> - <para> - &quot;<ulink url="http://www.jboss.org/community/wiki/CreateABannerUsingEffectsAn... a Banner Using Effects and Poll</ulink>&quot; article at RichFaces Wiki - gives an example of how to create an image banner using <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis>components; - </para> - </listitem> - <listitem> - <para> - &quot;<ulink url="http://www.jboss.org/community/wiki/CreateAHTMLBannerUsingEffec... an HTML Banner Using Effects and Poll</ulink>&quot; article at RichFaces Wiki - brings the code of the way of creating an HTML banner banner using <emphasis role="bold"><property>&lt;rich:effect&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis>components; - </para> - </listitem> - <listitem> - <para> - &quot;<ulink url="http://www.jboss.org/index.html?module=bb&amp;op=viewtopic&... and Slideshow</ulink>&quot; thread in the RichFaces users forum contains an information and code on making a Slide Show with the help of the <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> component; - </para> - </listitem> - </itemizedlist> - <para> - Manage the <ulink url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink> for fresh issues about the component usage. - </para> - </section> - -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,18 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:portlet</keyword> - </keywordset> - </sectioninfo> - -<title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:portlet&gt;</property> - </emphasis> component is DEPRECATED as far as JSR-301 was defined a same functionality for a UIViewRoot component. Thus, it is implicitly defined by mandatory - <emphasis role="bold"> - <property>&lt;f:view&gt;</property></emphasis> component. - </para> -</section> -</root> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/portlet.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,93 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:portlet</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Portlet</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.component.Portlet</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlPortlet</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - <programlisting role="XML"><![CDATA[<f:view> - <a4j:portlet> - ... - </a4j:portlet> -</f:view>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[ -import org.ajax4jsf.component.html.HtmlPortlet; -... -HtmlPortlet myPortlet = new HtmlPortlet(); -...]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - <para> - The main component purpose is realization of possibility to create several instances the same portlet on one page. - But clientId of elements should be different for each window. In that case namespace is used for each portlet. - The <emphasis role="bold"><property>&lt;a4j:portlet&gt;</property></emphasis> <code>implemets NaimingContainer</code> interface and adds namespace to all componets on a page. - All portlet content should be wrapped by <emphasis role="bold"><property>&lt;a4j:portlet&gt;</property></emphasis> for resolving problems mentioned before. - </para> - - </section> - - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/portlet.jsf... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - - <para> - Useful publications: - </para> - <itemizedlist> - <listitem> - <para> - <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink> — check the forum for additional information about component usage; - </para> - </listitem> - <listitem> - <para> - <ulink url="http://anonsvn.jboss.org/repos/ajax4jsf/trunk/samples/portal-ec... application</ulink> — Portlet Sample, could be checked out from JBoss SVN; - </para> - </listitem> - <listitem> - <para> - <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... snapshot with Portal environment support</ulink> contains usage instructions for the Portlet Sample demo. - </para> - </listitem> - </itemizedlist> - - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,36 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:progressBar</keyword> - </keywordset> - <releaseinfo>3.2.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:progressBar&gt;</property> - </emphasis> component is designed for displaying a progress bar which shows the current status of the process. </para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - - - <listitem><para>Ajax or Client modes</para></listitem> - <listitem><para>Option to control rerendering frequency</para></listitem> - <listitem><para>Customizable status information label </para></listitem> - <listitem><para>Highly customizable look and feel</para></listitem> - - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/progressBar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,749 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:progressBar</keyword> - <keyword>progressBar</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ProgressBar</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlProgressBar</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ProgressBar</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.ProgressBarRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ProgressBarTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example of how the component can be used on a page: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue1}"/> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.progressBar; -... -HtmlProgressBar myProgressBar = new progressBar(); -...]]></programlisting> - </section> - <!-- Start Details of Usage--> - <section> - <title>Details of Usage</title> - <para> - As it was mentioned above, the <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> - component displays the status of the ongoing process. - </para> - - <para>The <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property> </emphasis> component can run in two modes: <code>Ajax</code> (default) and <code>Client</code>. - </para> - <itemizedlist> - <listitem> - <para><code>Ajax</code> - In this mode the component works the same way as <emphasis role="bold"><property>&lt;a4j:poll/&gt;</property></emphasis> which gets the current progress value from the sever, repeating after a set time interval. </para> - - </listitem> - <listitem> - <para><code>Client</code> - The current progress value in <property>Client</property> mode is set using JavaScript API </para> - </listitem> - </itemizedlist> - <para> - In order to define the mode you need to use <emphasis><property>&quot;mode&quot;</property></emphasis> attribute. - </para> - - <para> - One of the key attributes of the component is <emphasis><property>&quot;interval&quot;</property></emphasis> which defines the frequency of status polling and rerenders the component when the value is updated. - </para> - <para> - Polling is active while the <emphasis><property>&quot;enabled&quot;</property></emphasis> attribute is &quot;true&quot;.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue}" id="progrs" interval="900" enabled="true"/> -...]]> </programlisting> - - <para> - With the help of <emphasis><property>&quot;timeout&quot;</property></emphasis> attribute you can define the waiting time on a particular request. - If a response is not received during this time the request is aborted. - </para> - - - <para> - Status of the process is calculated basing on values of the following attributes: - <itemizedlist> - <listitem> - <para> - <emphasis><property>&quot;value&quot;</property></emphasis> is a value binding to the current progress value - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;minValue&quot;</property></emphasis> (default value is &quot;0&quot;) sets minimal progress value - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;maxValue&quot;</property></emphasis> (default value is &quot;100&quot;) sets maximum progress value - </para> - </listitem> - </itemizedlist> - </para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue}" minValue="50" maxValue="400"/> -...]]> </programlisting> -<para>This is the result</para> - <figure> - <title>Progress bar</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar2.png"/> - </imageobject> - </mediaobject> - </figure> - - - <!--para> - The <emphasis><property> &quot;label&quot;</property></emphasis> attribute is responsible for displaying informational - data, information on the progress bar, if it&apos;s not displayed using children components. - If this attribute is not set and the children components are not used either, no textual information - regarding ongoing process will be indicated. - In order to indicate the current status you need to pass the value to this attribute. Please see an example. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue}" id="progrs" label="{value}%"/> -...]]></programlisting> - - <para> - Displaying information on a progress bar can be also performed using - - <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> within - <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property> </emphasis> tags passing the progress value to the value of the JSF tag. -</para> -<para> -<emphasis role="bold">Example:</emphasis> -</para> - -<programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue1}"> -<h:outputText value="#{bean.incValue1}"/> -</rich:progressBar> -...]]> </programlisting--> - - <para> - There are two ways to display information on a progress bar: - </para> - <itemizedlist> - <listitem> - <para>Using <emphasis><property> &quot;label&quot;</property></emphasis> attribute</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue}" id="progrs" label="#{bean.incValue}"/> -...]]></programlisting> - </listitem> - - <listitem> - <para>Using any child(nested) components. One of the components that can be used is <emphasis role="bold"><property>&lt;h:outputText /&gt;</property></emphasis></para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue}"> - <h:outputText value="#{bean.incValue} %"/> -</rich:progressBar> -...]]> </programlisting> - </listitem> - - </itemizedlist> - - <!--Macrosubs--> - - <para> - The <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property> </emphasis> - component provides 3 predefined macrosubstitution parameters: - - <itemizedlist> - <listitem> - <para><code>{value}</code> contains the current value</para> - </listitem> - <listitem> - <para><code>{minValue}</code> contains min value</para> - </listitem> - <listitem> - <para><code>{maxValue}</code> contains max value</para> - </listitem> - </itemizedlist> - - You can use them as follows: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue1}" minValue="400" maxValue="900"> - <h:outputText value="Min value is {minValue}, current value is {value}, max value is {maxValue}"/> -</rich:progressBar> -...]]> </programlisting> - <para>This is the result:</para> - <figure> - <title>Macrosubstitution</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar3.png"/> - </imageobject> - </mediaobject> - </figure> - <!--END of Macrosubs--> - - <!-- Parameters--> - <!--para> - The <emphasis><property>&quot;parameters&quot;</property></emphasis> - is also a special attribute that can be used for substitutional purposes. - All you need is to define a value of your own parameter - (e.g parameters=&quot;param:&apos;#{bean.incValue1}&apos;&quot;) - and you can use it to pass the data. - </para--> - - <para> - The <emphasis><property>&quot;parameters&quot;</property></emphasis> - is also a special attribute which defines parameters that can be to get additional data from server (e.g. additional info about process status). - All you need is to define the value of your own parameter - (e.g <code>parameters=&quot;param:&apos;#{bean.incValue1}&apos;&quot;</code>) - and you can use it to pass the data. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue}" parameters="param:'#{bean.dwnlSpeed}'"> - <h:outputText value="download speed {param} KB/s"/> -</rich:progressBar> -...]]> </programlisting> - <para>This is the result:</para> - <figure> - <title>Usage of parameters</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar4.png"/> - </imageobject> - </mediaobject> - </figure> - - - - <!-- END Parameters--> - - <para> - The <emphasis><property>&quot;progressVar&quot;</property></emphasis> attribute (deprecated) defines request scoped variable that could be used - for substitution purpose. This variable contains the data taken from <emphasis><property>&quot;value&quot;</property></emphasis> attribute. - Please, study carefully the following example. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue1}" enabled="#{bean.enabled1}" id="progrs1" progressVar="progress"> - <h:outputText value="{progress}%"/> -</rich:progressBar> -...]]> </programlisting> - - - <para>In the shown example <emphasis><property> &quot;progressVar&quot;</property></emphasis> attribute - defines a variable &quot;progress&quot; with the value taken from <emphasis><property>&quot;value&quot;</property></emphasis> - attribute of the <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> component. - The &quot;progress&quot; variable performs substitution passing the current progress value to the - <emphasis><property>&quot;value&quot;</property></emphasis> attribute of the - <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis>. - This is how the current value of a progress appears on - the label of <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis>.</para> - - <para>As the - <emphasis><property> &quot;progressVar&quot;</property></emphasis> attribute is deprecated, it&apos;s better to use - the predefined macrosubstitution parameter <code>{value}</code> instead. See how you can rewrite the above example with the help of <code>{value}</code>. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue1}" enabled="#{bean.enabled1}" id="progrs1"> - <h:outputText value="{value}%"/> -</rich:progressBar> -...]]> </programlisting> - - <para> - The component can also employ <emphasis><property> &quot;initial&quot;</property></emphasis> and <emphasis><property> &quot;complete&quot;</property></emphasis> facets to display the states of the process: - <emphasis><property>&quot;initial&quot;</property></emphasis> facet is displayed when the progress value is less or equal to <emphasis><property> &quot;minValue&quot;</property></emphasis>, and the <emphasis><property>&quot;complete&quot;</property></emphasis> facet is shown when the value is greater or equal to <emphasis><property> &quot;maxValue&quot;</property></emphasis>. Please see an example below. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:progressBar value="#{bean.incValue1}"> - <f:facet name="initial"> - <h:outputText value="Process not started"/> - </f:facet> - <f:facet name="complete"> - <h:outputText value="Process completed"/> - </f:facet> -</rich:progressBar> - ...]]> </programlisting> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">&quot; Decide what to process &quot; </link> guide section. - </para> - - </section> - <!-- End. Details of Usage--> - - <!-- JavaScript API--> - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>enable()</entry> - <entry>Begins polling for Ajax mode </entry> - - </row> - <row> - <entry>disable()</entry> - <entry>Stops polling for Ajax mode</entry> - - </row> - - <row> - <entry>setValue(value)</entry> - <entry>Updates the progress of the process</entry> - - </row> - <row> - <entry>setLabel(label)</entry> - <entry>Update the label for the process</entry> - - </row> - - - - - </tbody> - </tgroup> - </table> - </section> - <!-- End of JavaScript API--> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>initial</entry> - <entry>Defines the information content about the state of the process if the progress value is less or equal to &quot;minValue&quot;</entry> - </row> - <row> - <entry>complete</entry> - <entry>Defines the information content about the state of the process if the value is greater or equal to &quot;maxValue&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <!-- Look-and-Feel Customization--> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:progressBar&gt;</property> - </emphasis> components at once: <itemizedlist> - <listitem><para>Redefine the corresponding skin parameters</para></listitem> - <listitem><para> Add to your style sheets style classes used by a <emphasis role="bold"> - <property>&lt;rich:progressBar&gt;</property> - </emphasis> component</para></listitem> - </itemizedlist> - </para> - </section> - - <!-- Skin Parameters Redefinition--> - <section> - <title>Skin Parameters Redefinition</title> - - <table> - <title>Skin parameters redefinition for the progressBar without a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the completed progress area of the progressBar without a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>selectControlColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the progressBar with a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>controlTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the label of the progressBar</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the completed progress area of the progressBar with a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>selectControlColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>controlBackgroundColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for the remained progress area of the progressBar with a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>controlBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>controlTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - <!-- END Skin Parameters Redefinition--> - - <!-- Definition of Custom Style Classes--> - - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="pBclasses"> - <title>Classes names for the progressBar without a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-progress-bar-shell</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a progressBar</entry> - </row> - <row> - <entry>rich-progress-bar-uploaded</entry> - <entry>Defines styles for the completed progress area</entry> - </row> - <row> - <entry>rich-progress-bar-height</entry> - <entry>Defines height for a progressBar</entry> - </row> - <row> - <entry>rich-progress-bar-width</entry> - <entry>Defines width for a progressBar</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names for the progressBar with a label</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-progress-bar-shell-dig</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a progressBar</entry> - </row> - <row> - <entry>rich-progress-bar-uploaded-dig</entry> - <entry>Defines styles for the label</entry> - </row> - <row> - <entry>rich-progress-bar-remained</entry> - <entry>Defines styles for the remained progress area</entry> - </row> - <row> - <entry>rich-progress-bar-completed</entry> - <entry>Defines styles for the completed progress area</entry> - </row> - <row> - <entry>rich-progress-bar-height-dig</entry> - <entry>Defines height for a progressBar</entry> - </row> - <row> - <entry>rich-progress-bar-width</entry> - <entry>Defines width for a progressBar</entry> - </row> - </tbody> - </tgroup> - </table> - <note> - <title>Note:</title> - <para>It&apos;s necessary to define width of the component in pixels only.</para> - </note> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:progressBar&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="pBclasses">above</link>) and define necessary properties in them. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.richfacesSkin .mceButton { - border: 1px #FF0000 solid; -} -...]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar_pc.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the example above background color of the remained part of progress area was changed.</para> - - <para>It&apos;s also possible to change styles of a particular - <emphasis role="bold"> <property>&lt;rich:progressBar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding - <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color: #ebf3fd; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:progressBar&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:progressBar value="#{bean.incValue1}" styleClass="myClass"/> -]]></programlisting> - - <para>This is the result:</para> - - <figure> - <title>Modificaton of a look and feel with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color of the remained part of progress area was changed.</para> - - <para> - In order to change background image for the <emphasis role="bold"> <property>&lt;rich:progressBar&gt;</property></emphasis> it is necessary to create a CSS class with the same name as predefined one - (see the tables <link linkend="pBclasses">above</link>) and change <code>background-image</code> CSS property for it: - </para> - <programlisting role="CSS"><![CDATA[... -.rich-progress-bar-uploaded { - background-image : url(images/accept.gif); -} -...]]></programlisting> - <para>This is the result:</para> - <figure> - <title>Redefining background image for the &lt;rich:progressBar&gt; </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/progressBar_pc2.png"/> - </imageobject> - </mediaobject> - </figure> - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/progressBar... the component Live Demo page</ulink> - you can see the example of <emphasis role="bold"> - <property>&lt;rich:progressBar&gt;</property> - </emphasis> usage and sources for the given example. </para> - - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,24 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:push</keyword> - </keywordset> - </sectioninfo> -<title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis>periodically perform Ajax request to server, to simulate 'push' data.</para> - <para>The main difference between <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> components is that <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis> - makes request to minimal code only (not to JSF tree) in order to check the presence of messages in the queue. - If the message exists the complete request is performed. The component doesn't poll registered beans - but registers <code>EventListener</code> which receives messages about events.</para> -</section> - </root> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/push.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,203 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:push</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Push</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.components.AjaxPush</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.AjaxPush</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxPushRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating on a page</title> - <programlisting role="XML"><![CDATA[<a4j:push reRender="msg" eventProducer="#{messageBean.addListener}" interval="3000"/>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.AjaxPush; -... -AjaxPush myPush = new AjaxPush(); -...]]></programlisting> - </section> - - - <section> - <title>Key attributes and ways of usage</title> - <para>The <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis> implements reverse Ajax technique. </para> - - <para>The bean, for example, could be subscribed to Java Messaging Service - (<ulink url="http://java.sun.com/products/jms/">JMS</ulink>) - topic or it could be implemented as Message Driven Bean (MDB) in order - to send a message to the <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis> component about an event presence. In the presence of the - event some action occurs.</para> - - <para>Thus, a work paradigm with the <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis> component corresponds to an anisochronous model, but not - to pools as for <emphasis role="bold"> - <property>&lt;a4j:poll&gt;</property> - </emphasis> - <link linkend="poll">component</link>. See the simplest example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[... -class MyPushEventListener implements PushEventListener { - public void onEvent(EventObject evt) { - System.out.println(evt.getSource()); - //Some action - } -} -...]]></programlisting> - - <para>Code for <code>EventListener</code> registration in the bean is placed - below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[... -public void addListener(EventListener listener) { - synchronized (listener) { - if (this.listener != listener) { - this.listener = (PushEventListener) listener; - } - } -} -...]]></programlisting> - - <para>A page code for this example is placed below.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<a4j:status startText="in progress" stopText="done"/> -<a4j:form> - <a4j:region> - <a4j:push reRender="msg" eventProducer="#{pushBean.addListener}" interval="2000"/> - </a4j:region> - <a4j:outputPanel id="msg"> - <h:outputText value="#{pushBean.date}"> - <f:convertDateTime type="time"/> - </h:outputText> - </a4j:outputPanel> - <a4j:commandButton value="Push!!" action="#{pushBean.push}" ajaxSingle="true"/> -</a4j:form> -...]]></programlisting> - - <para>The example shows how date is updated on a page in compliance with data - taken from a server. In the example <emphasis> - <property>&quot;interval&quot;</property> - </emphasis> attribute has value &quot;2000&quot;. This - attribute defines an interval in milliseconds between the previous - response and the next request. Default value is set to - &quot;1000&quot; milliseconds (1 second). It&apos;s - possible to set value equal to &quot;0&quot;. In this case - connection is permanent. </para> - <para>The <emphasis> - <property>&quot;timeout&quot;</property> - </emphasis> attribute defines response waiting time in milliseconds. - If a response isn&apos;t received during this period a connection - is aborted and the next request is sent. Default value for <emphasis> - <property>&quot;timeout&quot;</property> - </emphasis> attribute isn&apos;t set. Usage of <emphasis> - <property>&quot;interval&quot;</property> - </emphasis> and <emphasis> - <property>&quot;timeout&quot;</property> - </emphasis> attributes gives an opportunity to set short polls of - queue state or long connections.</para> - - <note> - <title>Note:</title> - <para> The form around the <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis> component is required.</para> - </note> - </section> - - <!--section> - <title>Key attributes and ways of usage</title> - <para>The main difference between <emphasis role="bold"><property>&lt;a4j:push&gt;</property></emphasis>and - <emphasis role="bold"><property>&lt;a4j:poll&gt;</property></emphasis> components - is that <emphasis role="bold"><property>&lt;a4j:push&gt;</property></emphasis> makes request to minimal code only (not to JSF tree) in order to check the presence of messages in the queue. - If a message exists, a complete request will be performed. - The component doesn't poll registered beans but registers EventListener which receives messages about events. - </para> -<para> - There are some attributes which allows to customize of the component behaviour: -</para> -<para> -&quot;interval&quot; - Interval (in ms) for call push requests. Default value 1000 (1 sec). -< If "0" a connection is permanent. Also you can set different value for parameter 'timeout'.> -</para> -<para> -Code for registration of listener: -</para> - <programlisting role="JAVA"><![CDATA[ -public void addListener(EventListener listener) { -synchronized (listener) { - if (this.listener != listener) { - this.listener = (PushEventListener) listener; -} -]]></programlisting> - -<para> -Component can get message using current code: -</para> - <programlisting role="JAVA"><![CDATA[ -System.out.println("event occurs"); -synchronized (listener) { - listener.onEvent(new EventObject(this)); -} -]]></programlisting> -<para> -Thus, component 'push' uses asynchronous model instead of polls. -</para> - </section--> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find <link linkend="process">&quot; Decide what to process &quot; </link> guide section. </para> - <section> - <title>Relevant resources links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/push.jsf?c=... - >On RichFaces LiveDemo page </ulink> you can found some additional information for - <emphasis role="bold"> - <property>&lt;a4j:push&gt;</property> - </emphasis> component usage. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,16 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:queue</keyword> - </keywordset> - <releaseinfo>3.3.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:queue&gt;</property></emphasis> component enqueues set of Ajax requests sent from client. - The RichFaces components with built-in Ajax can reference the queue to optimize Ajax requests. - </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/queue.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,234 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:queue</keyword> - </keywordset> - </chapterinfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.Queue</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlQueue</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.QueueRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.ajax4jsf.taglib.html.jsp.QueueTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant of the Form Based queue use the following syntax. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form id="form"> - <a4j:queue /> - <h:inputText value="#{bean.a}"> - <a4j:support event="onkeyup" /> - </h:inputText> -</h:form>]]></programlisting> - - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold"> Example: </emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlQueue; -... -HtmlQueue myQueue = new HtmlQueue(); -]]></programlisting> - </section> - - <section> - <title>Details of usage</title> - - <para> - The RichFaces Queue has four different types: global default, view scoped default, view scoped named and form-based default queue (general Queue principles are good documented in the &quot;<link linkend="QueuePrinciples">Queue Principles</link>&quot; section). - The current section will take closer to the form based queue. The usage of other types is similar. - </para> - - <para> - In order to disable or enable the <emphasis role="bold"><property>&lt;a4j:queue&gt;</property></emphasis> component on the page you can use the <emphasis><property>&quot;disabled&quot;</property></emphasis> attribute. - </para> - - <para> - The <emphasis><property>&quot;requestDelay&quot;</property></emphasis> attribute defines delay time for all the requests fired by the action components. - </para> - - <para> - The <emphasis><property>&quot;size&quot;</property></emphasis> attribute specifies the number of requests that can be stored in the queue at a time. - The attribute helps to prevent server overloading. - It is also possible to determine queue&apos;s behaviour when it&apos;s size is exceeded. - Use the <emphasis><property>&quot;sizeExceededBehavior&quot;</property></emphasis> for this purpose. - There are four possible strategies of exceeded queue&apos;s behavior: - </para> - <itemizedlist> - <listitem> - <para>&quot;dropNext&quot; drops next request that should be fired</para> - </listitem> - <listitem> - <para>&quot;dropNew&quot; drops the incoming request</para> - </listitem> - <listitem> - <para>&quot;fireNext&quot; immediately fires the next request in line to be fired</para> - </listitem> - <listitem> - <para>&quot;fireNew&quot; immediately fires the incoming request.</para> - </listitem> - </itemizedlist> - - <para> - <emphasis role="bold"> Example: </emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form> - <a4j:queue size="2" requestDelay="500" sizeExceededBehavior="dropNext" onsizeexceeded="alert('The size of the queue is exceeded')" /> - <h:inputText value="#{bean.a}"> - <a4j:support event="onkeyup" /> - </h:inputText> - <h:inputText value="#{bean.b}"> - <a4j:support event="onblur" /> - </h:inputText> - <h:selectBooleanCheckbox value="#{bean.check}" id="checkboxID"> - <a4j:support id="checkboxSupport" event="onchange" /> - </h:selectBooleanCheckbox> -</h:form>]]></programlisting> - <para> - In this example if the queue has more than 2 requests waiting to be processed the next event will be dropped and a message (the <emphasis><property>&quot;onsizeexceeded&quot;</property></emphasis> attribute fires a JavaScript function) saying that the queues is exceeded will be displayed. - </para> - - <para> - The <emphasis><property>&quot;ignoreDupResponses&quot;</property></emphasis> attribute that takes a boolean value can also help optimize your Ajax requests. - If set to true, response processing for request will not occur if a similar request is already waiting in the queue. New request will be fired immediately when the response from the previous one returns. - - </para> - - <para> - <emphasis role="bold"> Example: </emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form> - <a4j:queue requestDelay="500" ignoreDupResponses="true" /> - <h:inputText value="#{bean.a}"> - <a4j:support event="onkeyup" /> - </h:inputText> -</h:form>]]></programlisting> - - <para>In this example, the requests are glued together and only the last one is submitted.</para> - - <para> - Another key attribute that easies server load is <emphasis><property>&quot;timeout&quot;</property></emphasis>. - The attribute specifies the amount of time an item can be in the queue before the sent event is be aborted and dropped from the queue. - </para> - - <para> - If the request is sent and response is not returned within the time frame defined in this attribute - the request is aborted, and the next one is sent. - </para> - <para> - <emphasis role="bold"> Example: </emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form> - <a4j:queue timeout="1000" /> - <h:inputText value="#{bean.a}"> - <a4j:support event="onkeyup" /> - </h:inputText> -</h:form>]]></programlisting> - - <para> - In this case if the sever doesn&apos;t respond within a second the request will be aborted. - </para> - - <para> - As you can see the implementation of the queue provides some custom event handlers that you may use to call JavaScript functions.</para> - <para> - The <emphasis><property>&quot;oncomplete&quot;</property></emphasis>is fired after request completed. - In this event handler request object is be passed as a parameter. - Thus queue is be accessible using <code>request.queue</code>. - And the element which was a source of the request is available using <code>this</code>. - </para> - - <para> - <emphasis role="bold"> Example: </emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form> - <a4j:queue oncomplete="alert(request.queue.getSize())" requestDelay="1000" /> - <h:inputText value="#{bean.a}"> - <a4j:support event="onkeyup" /> - </h:inputText> - <h:selectBooleanCheckbox value="#{bean.check}"> - <a4j:support event="onchange"/> - </h:selectBooleanCheckbox> -</h:form>]]></programlisting> - - <para>In this example you can see how the number of requests waiting in the queue change. You will get a message with the number of the requests in the queue.</para> - - <para>The <emphasis><property>&quot;onbeforedomupdate&quot;</property></emphasis> event handler called before - updating DOM on a client side.</para> - - <para> The <emphasis><property>&quot;onrequestqueue&quot;</property></emphasis> event handler called after the new request has been added to queue. - And the <emphasis><property>&quot;onrequestdequeue&quot;</property></emphasis> event handler called after the request has been removed from queue. </para> - <para> The <emphasis><property>&quot;onsubmit&quot;</property></emphasis> event handler called - after request is completed. This attribute allows to invoke JavaScript code before an - Ajax request is sent. </para> - - </section> - - <section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <!--Sorting API --> - <row> - <entry>getSize()</entry> - <entry>Returns the current size to the queue</entry> - - </row> - <row> - <entry>getMaximumSize()</entry> - <entry>Returns the maximum size to the queue, specified in the &quot;size&quot; attribute</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/queue.jsf?c... Page</ulink> at the RichFaces LiveDemo for examples of component usage and their sources. - </para> - - <para> - Useful articles: - </para> - <para>&quot;<link linkend="QueuePrinciples">Queue Principles</link>&quot; section of the RichFaces developer guide describes general Queue principles.</para> - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:recursiveTreeNodesAdaptor</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property></emphasis> is - an extension of a <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component - that provides the possibility to define data models and process nodes recursively. </para> - <figure> - <title>Expanded tree with <emphasis role="bold"> - <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> - </emphasis></title> - <mediaobject> - <imageobject> - <imagedata fileref="images/recursiveTreeNodesAdaptor_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Allows to define combined data models</para></listitem> - <listitem><para>Possibility to define nodes for processing via attributes</para></listitem> - <listitem><para>Allows to process nodes recursively</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/recursiveTreeNodesAdaptor.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,230 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>recursiveTreeNodesAdaptor</keyword> - <keyword>rich:recursiveTreeNodesAdaptor</keyword> - <keyword>HtmlrecursiveTreeNodesAdaptor</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.RecursiveTreeNodesAdaptor</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlRecursiveTreeNodesAdaptor</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.RecursiveTreeNodesAdaptor</entry> - </row> - <!-- - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.EffectRenderer</entry> - </row> - --> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.RecursiveTreeNodesAdaptorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tree switchType="ajax" stateAdvisor="#{treeDemoStateAdvisor}"> - <rich:recursiveTreeNodesAdaptor roots="#{fileSystemBean.sourceRoots}" var="item" nodes="#{item.nodes}" /> -</rich:tree> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlRecursiveTreeNodesAdaptor; -... -HtmlRecursiveTreeNodesAdaptor myRecursiveTreeNodesAdaptor = new HtmlRecursiveTreeNodesAdaptor(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> - The <emphasis role="bold"><property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property></emphasis> component has a - <emphasis><property>&quot;roots&quot;</property></emphasis> attribute that defines collection to use at the top of recursion. - </para> - <para> - The <emphasis><property>&quot;nodes&quot;</property></emphasis> attribute defines collection to use on another recursion levels. - </para> - <para> - The <emphasis><property>&quot;var&quot;</property></emphasis> attribute is used to access to the current collection element. - </para> - <para> - The <emphasis role="bold"><property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property></emphasis> component can be nested without any limitations. - See the following example. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tree adviseNodeOpened="#{treeModelBean.adviseNodeOpened}" switchType="client"> - <rich:treeNodesAdaptor id="project" nodes="#{loaderBean.projects}" var="project"> - <rich:treeNode> - <h:commandLink action="#{project.click}" value="Project: #{project.name}" /> - </rich:treeNode> - <rich:recursiveTreeNodesAdaptor id="dir" var="dir" root="#{project.dirs}" nodes="#{dir.directories}"> - <rich:treeNode> - <h:commandLink action="#{dir.click}" value="Directory: #{dir.name}" /> - </rich:treeNode> - <rich:treeNodesAdaptor id="file" var="file" nodes="#{dir.files}"> - <rich:treeNode> - <h:commandLink action="#{file.click}" value="File: #{file.name}" /> - </rich:treeNode> - </rich:treeNodesAdaptor> - <rich:treeNodesAdaptor id="file1" var="file" nodes="#{dir.files}"> - <rich:treeNode> - <h:commandLink action="#{file.click}" value="File1: #{file.name}" /> - </rich:treeNode> - </rich:treeNodesAdaptor> - <rich:recursiveTreeNodesAdaptor id="archiveEntry" var="archiveEntry" - roots="#{dir.files}" nodes="#{archiveEntry.archiveEntries}" - includedRoot="#{archiveEntry.class.simpleName == 'ArchiveFile'}" - includedNode="#{archiveEntry.class.simpleName == 'ArchiveEntry'}"> - <rich:treeNode id="archiveEntryNode"> - <h:commandLink action="#{archiveEntry.click}" value="Archive entry: #{archiveEntry.name}" /> - </rich:treeNode> - </rich:recursiveTreeNodesAdaptor> - </rich:recursiveTreeNodesAdaptor> - </rich:treeNodesAdaptor> -</rich:tree> -... -]]></programlisting> - - </section> - -<!-- - <section> - <title>Details of Usage</title> -<para> - It is possible to use <property>&lt;rich:effect&gt;</property> in two modes: -<itemizedlist> - <listitem>attached to the JSF components or html tags and triggered by particular event. - Wiring effect with JSF components might be occurs on the server or client. - Wiring with html tag is possible only on the client side </listitem> - <listitem>invoking from the javascript code by effect name. - During the rendering, <property>rich:effect</property> generates the javascript function with defined name. When the function is called, - the effect is applied </listitem> -</itemizedlist> -</para> - <para> - <emphasis role="bold">Those a the typical variants of using:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... - -<rich:panel> - <rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" /> - .... panel content .... -</rich:panel> -... - - -<div id="contentDiv"> - ..... div content ...... -</div> - -<input type="button" onclick="hideDiv({duration:0.7})" value="Hide" /> -<input type="button" onclick="showDiv()" value="Show" /> - -<rich:effect name="hideDiv" for="contentDiv" type="Fade" /> -<rich:effect name="showDiv" for="contentDiv" type="Appear" /> - - -<rich:effect for="window" event="onload" type="Appear" params="id:'contentDiv',duration:0.8,from:0.3,to:1.0" /> -... -]]></programlisting> - - <figure> - <title>Initial:</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/effect1.png"/> - </imageobject> - </mediaobject> - </figure> - - <figure> - <title>When the mouse cursor is over:</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/effect0.png"/> - </imageobject> - </mediaobject> - </figure> - -<para> -<emphasis><property>&quot;name&quot;</property></emphasis> attribute defines the name of the javascript function will -be generated on a page when the component is rendered. You can invoke this function to activate the effect. The function access one parameter. -It is a set of effect options in JSON format. -</para> - -<para> -<emphasis><property>&quot;type&quot;</property></emphasis> attribute defines the type of effect. For example, "Fade", "Blind", "Opacity". Take a look at scriptaculous documentation -for set of available effect. -</para> - -<para> -<emphasis><property>&quot;for&quot;</property></emphasis> attribute defines the id of the component or html tag, the effect will be attached to. -Richfaces converts the <emphasis><property>&quot;for&quot;</property></emphasis> attribute value to the client id of the component if such component is found. If not, the value is left as is for possible -wiring with on the DOM element&apos;s id on the client side. -By default, the target of the effect is the same element that effect pointed to. However, the target element -is might be overridden with <emphasis><property>&quot;effectId&quot;</property></emphasis> option passed with <emphasis><property>&quot;params&quot;</property></emphasis> -attribute of with function paramenter. -</para> - -<para> -<emphasis><property>&quot;params&quot;</property></emphasis> attribute allows to define the set of options possible for particurar effect. -For example, 'duration', 'delay', 'from', 'to'. Additionally to the options used by the effect itself, there are two option that might override -the <property>rich:effect</property> attribute. Those are: -<itemizedlist> - <listitem><emphasis><property>&quot;effectId&quot;</property></emphasis> allows to re-define the target of effect. - The option is overrire the value of <emphasis><property>&quot;for&quot;</property></emphasis> attribute</listitem> - <listitem><emphasis><property>&quot;effectType&quot;</property></emphasis> defines the effect type. - The option is overrire the value of <emphasis><property>&quot;type&quot;</property></emphasis> attribute</listitem> -</itemizedlist> -</para> - - </section> - - ---> - <section> - <title>Relevant resources links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/treeNodesAd... the component Live Demo page</ulink> - you can see the example of <emphasis role="bold"><property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property></emphasis> usage. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,19 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:region</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> - - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> component specifies the part of the component tree to be processed on server. - If no <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> is defined the whole View functions as a region. - </para> - </section> - -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/region.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,206 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <chapterinfo> - <keywordset> - <keyword>a4j:region</keyword> - </keywordset> - </chapterinfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.AjaxRegion</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.AjaxRegion</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxRegion</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxRegionRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant of the <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> component on a page use the following syntax:</para> - <programlisting role="XML"><![CDATA[<a4j:region> - ... -</a4j:region>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxRegion; -... -HtmlAjaxRegion newRegion = new HtmlAjaxRegion(); -...]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> component specifies the part of the component tree to be processed on server. - The processing includes data handling during decoding, conversion, validation and model update. - Note that the whole Form is still submitted but only part taken into region will be processed. - - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form> - ... - <a4j:region> - <a4j:commandLink/> - </a4j:region> - ... -<h:form>]]></programlisting> - - <para>The whole Form on the schematic listing above will be submitted by request invoked with the <emphasis role="bold"><property>&lt;a4j:commandLink&gt;</property></emphasis>. - The only part that is going to be processed on the server is enclosed with <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;/a4j:region&gt;</property></emphasis> tags. - If no <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> is defined the whole View functions as a region. - </para> - - <!-- <para>The region is a component used for manipulation with components sent to the server. - It sets particular processing parameters for an area on the server, i.e. the region deals with data input on the server and has no direct impact on output. - To read more on the components responsible for out, see <ulink url="http://java.sun.com/javaee/javaserverfaces/reference/index.html... official documentation</ulink>. - </para> - - <para>The region marks an area page that is decoded on the server. This component helps to reduce data quantity processed by the server, but the region doesn&apos;t influence on the standard submission rules. It means that:<itemizedlist> - <listitem><para> - The area that is to be submitted onto the server should be embedded in <emphasis role="bold"> - <property>&lt;h:form&gt;</property>/<property>&lt;a4j:form&gt;</property> -</emphasis> component. - </para></listitem> - <listitem><para> - The whole form is submitted on Ajax response and not a region that request is performed from. - </para></listitem> - </itemizedlist></para> - --> - - <para>The regions could be nested. Server picks out and decodes only the region, which contains the component that initiates the request.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[<h:form> - ... - <a4j:region> - <a4j:commandLink value="Link 1" id="link1"/> - <a4j:region> - <a4j:commandLink value="Link 2" id="link2"/> - </a4j:region > - </a4j:region> - ... -<h:form>]]></programlisting> - <para> - The external region is decoded for <code>link1</code> and the internal one is decoded for <code>link2</code>. - </para> - - <para> - The <emphasis><property>&quot;renderRegionOnly&quot;</property></emphasis> attribute is used when it is necessary to exclude all the components from the outside of the region from updating on the page during Renderer Response phase. - Such manipulation allows region to be passed straight into Encode and reduces performance time. - This optimization should be implemented carefully because it doesn&apos;t allow data from the outside of active region to be updated. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:form> - ... - <a4j:region renderRegionOnly="true"> - <a4j:commandLink value="Link 1" id="link1"/> - </a4j:region> - ... - <a4j:region renderRegionOnly="false"> - <a4j:commandLink value="Link 2" id="link2"/> - </a4j:region> - ... -</h:form>]]></programlisting> - <para> - On the example above the first region only will be updated if <code>link1</code> initiates a request. - When a request is initiated by <code>link2</code> both regions will be updated. - In this case search for components to include them into Renderer Response will be performed on the whole component tree. - </para> - - - <para> - <property>RichFaces</property> allows setting Ajax responses rendering basing on component tree nodes directly, without referring to the JSP (XHTML) code. - This speeds up a response output considerably and could be done by setting the <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> <emphasis><property>&quot;selfRendered&quot;</property></emphasis> attribute to &quot;true&quot;. - However, this rapid processing could cause missing of transient components that present on view and don&apos;t come into a component tree as well as omitting of <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis> usage described below. -</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:region selfRendered ="true"> - <a4j:commandLink value="Link" id="link"/> - <!--Some HTML content--> -</a4j:region>]]></programlisting> - <para>In this case the processing is quicker and going on without referring to the page code. - The HTML code is not saved in a component tree and could be lost. - Thus, such optimization should be performed carefully and additional <property>RichFaces</property> components usage (e.g. <emphasis role="bold"><property>&lt;a4j:outputPanel&gt;</property></emphasis>) is required.</para> - - - - <para> - Starting from <property>RichFaces 3.2.0</property> the <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> can be used together with iterative components (e.g. <emphasis role="bold"><property>&lt;rich:column&gt;</property></emphasis> or <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis>, etc.). - It became possible to re-render a particular row in a table without updating the whole table and without any additional listeners. - </para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[<rich:column> - <a4j:region> - <a4j:commandLink reRender="out"/> - </a4j:region> -</rich:column> -<rich:column> - <h:outputText id="out"> -</rich:column>]]></programlisting> - - <para> - In most cases there is no need to use the <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis> as <code>ViewRoot</code> is a default one. - </para> - - - </section> - - - - - <section> - <title>Relevant resources links</title> - <para>Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/region.jsf?... demo page</ulink> at -RichFaces live demo for examples of component usage and their sources. - </para> - <para>Useful articles and examples:</para> - <itemizedlist> - <listitem> - <para> - <ulink url="http://www.jboss.org/community/docs/DOC-11866">&lt;... and two &lt;h:inputTexts&gt;</ulink> in RichFaces cookbook at JBoss portal; - </para> - </listitem> - <listitem> - <para> - &quot;<ulink url="http://ishabalov.blogspot.com/2007/08/sad-story-about-uiinput.h... sad story about UIInput</ulink>&quot; at personal blog of I.Shabalov and <ulink url="http://livedemo.exadel.com/richfaces-local-value-demo/pages/loc... example</ulink> of solving the problem with the help of <emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis>. - </para> - </listitem> - - </itemizedlist> - </section> - - </section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,15 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:repeat</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> -<title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component implements a basic iteration component that allows to update a set of its children with Ajax. - </para> -</section> -</root> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/repeat.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,127 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:repeat</keyword> - </keywordset> - </chapterinfo> - <para> - <table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Repeat</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Data</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxRepeat</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.RepeatRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - </para> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following syntax: - </para> - <programlisting role="XML"><![CDATA[<a4j:repeat id="detail" value="#{bean.props}" var="detail"> - <h:outputText value="#{detail.someProperty}"/> -</a4j:repeat>]]></programlisting> - <para> - The output is generated according to a collection contained in <code>bean.props</code> with the <code>detail</code> key passed to child components. - </para> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxRepeat; -... -HtmlAjaxRepeat repeater = new HtmlAjaxRepeat (); -... -]]></programlisting> - </section> - <section> - <title>Details of usage</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component is similar to Facelets <emphasis role="bold"><property>&lt;ui:repeat&gt;</property></emphasis> tag, - which is used to iterate through a collection of objects binded with JSF page as EL expression. - The main difference of the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> is a possibility to update particular components (it's children) instead of all using Ajax requests. - The feature that makes the component different is a special <emphasis><property>&quot;ajaxKeys&quot;</property></emphasis> attribute that defines row that are updated after an Ajax request. - As a result it becomes easier to update several child components separately without updating the whole page. - </para> - - - <programlisting role="XML"><![CDATA[... -<table> - <tbody> - <a4j:repeat value="#{repeatBean.items}" var="item" ajaxKeys="#{updateBean.updatedRow}"> - <tr> - <td><h:outputText value="#{item.code}" id="item1" /></td> - <td><h:outputText value="#{item.price}" id="item2" /></td> - </tr> - </a4j:repeat> - </tbody> -</table> - ...]]></programlisting> - - <para> - The example above the <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> points to an method that contains row keys to be updated. - </para> - <note> - <title>Note:</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:repeat&gt;</property></emphasis> component is defined as fully updated, - but really updated there are only the row keys which defined in the <emphasis><property>&quot;ajaxKeys&quot;</property></emphasis> attribute. - </para> - </note> - - - <para> - One more benefit of this component is absence of strictly defined markup as JSF HTML DataTable and TOMAHAWK DataTable has. - Hence the components could be used more flexibly anywhere where it&apos;s necessary to output the results of selection from some collection. - </para> - - <para>The next example shows collection output as a plain HTML list:</para> - <programlisting role="XML"><![CDATA[<ul> - <a4j:repeat ...> - <li>...<li/> - ... - <li>...<li/> - </a4j:repeat> -</ul>]]></programlisting> - <para>All other general attributes are defined according to the similar - attributes of iterative components (<emphasis role="bold"> - <property>&lt;h:dataTable&gt;</property> - </emphasis> or <emphasis role="bold"> - <property>&lt;ui:repeat&gt;</property> - </emphasis>) and are used in the same way.</para> - </section> - - <section> - <title>Relevant resources links</title> - <para> - Vizit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/repeat.jsf?... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. - </para> - </section> -</chapter> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_ajaxValidator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_ajaxValidator.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_ajaxValidator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,262 @@ +<section role="NotInToc" id="rich_ajaxValidator"> + <title> + &lt; + rich:ajaxValidator + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.2</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The<emphasis role="bold"> + <property>&lt;rich:ajaxValidator&gt;</property> + </emphasis>is a component designed to provide Ajax validation inside for JSF inputs.</para> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Skips all JSF processing except validation</para> + </listitem> + <listitem> + <para>Possibility to use both standard and custom validation</para> + </listitem> + <listitem> + <para>Possibility to use Hibernate Validation</para> + </listitem> + <listitem> + <para>Event based validation triggering</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>The <emphasis role="bold"> + <property>&lt;rich:ajaxValidator&gt;</property> + </emphasis> component should be added as a child component to an input + JSF tag which data should be validated and an event that triggers + validation should be specified as well. The component is ajaxSingle by + default so only the current field will be validated.</para> + + + <para>The following example demonstrates how the <emphasis role="bold"> + <property>&lt;rich:ajaxValidator&gt;</property> + </emphasis> adds Ajax functionality to standard JSF validators. The + request is sent when the input field loses focus, the action is + determined by the <emphasis> + <property>"event"</property> + </emphasis> attribute that is set to + <code>"onblur"</code>. </para> + + + + <programlisting role="XML">... +&lt;rich:panel&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="User Info:" /&gt; + &lt;/f:facet&gt; + &lt;h:panelGrid columns="3"&gt; + &lt;h:outputText value="Name:" /&gt; + &lt;h:inputText value="#{userBean.name}" id="name" required="true"&gt; + &lt;f:validateLength minimum="3" maximum="12"/&gt; + &lt;rich:ajaxValidator event="onblur"/&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="name" /&gt; + + &lt;h:outputText value="Age:" /&gt; + &lt;h:inputText value="#{userBean.age}" id="age" required="true"&gt; + &lt;f:convertNumber integerOnly="true"/&gt; + &lt;f:validateLongRange minimum="18" maximum="99"/&gt; + &lt;rich:ajaxValidator event="onblur"/&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="age"/&gt; + &lt;/h:panelGrid&gt; +&lt;/rich:panel&gt; +...</programlisting> + + <para>This is the result of the snippet. </para> + + + <figure> + <title>Simple example of <emphasis role="bold"> + <property>&lt;rich:ajaxValidator&gt;</property> + </emphasis>with </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/ajaxValidator1.png"/> + </imageobject> + </mediaobject> + </figure> + + + <para>In the example above it's show how to work with standard JSF validators. + The <emphasis role="bold"> + <property>&lt;rich:ajaxValidator&gt;</property> + </emphasis> component also works perfectly with custom validators + enhancing their usage with Ajax. </para> + + <para> Custom validation can be performed in two ways: </para> + + <itemizedlist> + <listitem> + <para>Using JSF Validation API is available in + javax.faces.validator package</para> + </listitem> + <listitem> + <para>Using Hibernate Validator, specifying a constraint for + the data to be validated. A reference on Hibernate + Validator can be found <ulink url="http://www.hibernate.org/hib_docs/validator/reference/en/html_s... Hibernated documentation</ulink>. + </para> + </listitem> + </itemizedlist> + + <para> The following example shows how the data entered by user can be validated + using Hibernate Validator. </para> + + <programlisting role="XML">... +&lt;rich:panel&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="User Info:" /&gt; + &lt;/f:facet&gt; + &lt;h:panelGrid columns="3"&gt; + &lt;h:outputText value="Name:" /&gt; + &lt;h:inputText value="#{validationBean.name}" id="name" required="true"&gt; + &lt;rich:ajaxValidator event="onblur" /&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="name" /&gt; + + &lt;h:outputText value="Email:" /&gt; + &lt;h:inputText value="#{validationBean.email}" id="email"&gt; + &lt;rich:ajaxValidator event="onblur" /&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="email" /&gt; + + &lt;h:outputText value="Age:" /&gt; + &lt;h:inputText value="#{validationBean.age}" id="age"&gt; + &lt;rich:ajaxValidator event="onblur" /&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="age" /&gt; + &lt;/h:panelGrid&gt; +&lt;/rich:panel&gt; +...</programlisting> + + + <para>Here is the source code of the managed bean.</para> + + + <programlisting role="JAVA">package org.richfaces.demo.validation; + +import org.hibernate.validator.Email; +import org.hibernate.validator.Length; +import org.hibernate.validator.Max; +import org.hibernate.validator.Min; +import org.hibernate.validator.NotEmpty; +import org.hibernate.validator.NotNull; +import org.hibernate.validator.Pattern; + +public class ValidationBean { + + private String progressString="Fill the form please"; + + @NotEmpty + @Pattern(regex=".*[^\\s].*", message="This string contain only spaces") + @Length(min=3,max=12) + private String name; + @Email + @NotEmpty + private String email; + + @NotNull + @Min(18) + @Max(100) + private Integer age; + + public ValidationBean() { + } + + /* Corresponding Getters and Setters */ + +}</programlisting> + + <para>By default the Hibernate Validator generates an error message in 10 + language, though you can redefine the messages that are displayed to a + user when validation fails. In the shows example it was done by adding + <code>(message="wrong email + format")</code> to the <code>@Email</code> annotation.</para> + + <para>This is how it looks. </para> + <figure> + <title>Validation using Hibernate validator </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/ajaxValidator2.png"/> + </imageobject> + </mediaobject> + </figure> + + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/ajaxValidator.html">Table of + &lt;rich:ajaxValidator&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.ajaxValidator</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlajaxValidator</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.ajaxValidator</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.ajaxValidatorRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.ajaxValidatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/ajaxValidat... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_beanValidator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_beanValidator.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_beanValidator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,203 @@ +<section role="NotInToc" id="rich_beanValidator"> + <title> + &lt; + rich:beanValidator + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.2</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The<emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis> component designed to provide validation using Hibernate model-based constraints. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Validation using Hibernate constraints</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>Starting from 3.2.2 GA version Rich Faces provides support for model-based constraints defined using Hibernate Validator. + Thus it's possible to use Hibernate Validators the same as for Seam based applications. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis> component is defined in the same way as any JSF validator. + Look at the example below. + </para> + <programlisting role="XML">&lt;rich:panel&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="#{validationBean.progressString}" id="progress"/&gt; + &lt;/f:facet&gt; + &lt;h:panelGrid columns="3"&gt; + &lt;h:outputText value="Name:" /&gt; + &lt;h:inputText value="#{validationBean.name}" id="name"&gt; + &lt;rich:beanValidator summary="Invalid name"/&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="name" /&gt; + + &lt;h:outputText value="Email:" /&gt; + &lt;h:inputText value="#{validationBean.email}" id="email"&gt; + &lt;rich:beanValidator summary="Invalid email"/&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="email" /&gt; + + &lt;h:outputText value="Age:" /&gt; + &lt;h:inputText value="#{validationBean.age}" id="age"&gt; + &lt;rich:beanValidator summary="Wrong age"/&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="age" /&gt; + &lt;f:facet name="footer"&gt; + &lt;a4j:commandButton value="Submit" action="#{validationBean.success}" reRender="progress"/&gt; + &lt;/f:facet&gt; + &lt;/h:panelGrid&gt; +&lt;/rich:panel&gt;</programlisting> + + <para> + Please play close attention on the bean code that contains the constraints defined with Hibernate annotation which perform validation of the input data. + </para> + + <programlisting role="JAVA"> + +package org.richfaces.demo.validation; + +import org.hibernate.validator.Email; +import org.hibernate.validator.Length; +import org.hibernate.validator.Max; +import org.hibernate.validator.Min; +import org.hibernate.validator.NotEmpty; +import org.hibernate.validator.NotNull; +import org.hibernate.validator.Pattern; + +public class ValidationBean { + + private String progressString="Fill the form please"; + + @NotEmpty + @Pattern(regex=".*[^\\s].*", message="This string contain only spaces") + @Length(min=3,max=12) + private String name; + @Email + @NotEmpty + private String email; + + @NotNull + @Min(18) + @Max(100) + private Integer age; + + public ValidationBean() { + } + + /* Corresponding Getters and Setters */ + + public void success() { + setProgressString(getProgressString() + "(Strored successfully)"); + } + + public String getProgressString() { + return progressString; + } + + public void setProgressString(String progressString) { + this.progressString = progressString; + } +}</programlisting> + + <para>The following figure shows what happens if validation fails</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis> usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/beanValidator1.png"/> + </imageobject> + </mediaobject> + </figure> + <para>As you can see from the example that in order to validate the + <emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis> should be nested into a input JSF or RichFaces + component. </para> + + <para>The component has the only attribute - <emphasis> + <property>"summary"</property> + </emphasis>which displays validation messages about + validation errors.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/beanValidator.html">Table of + &lt;rich:beanValidator&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.beanValidator</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlbeanValidator</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.beanValidator</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.beanValidatorRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.beanValidatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/beanValidat... + On RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_calendar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_calendar.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_calendar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,1249 @@ +<section role="NotInToc" id="rich_calendar"> + <title> + &lt; + rich:calendar + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component is used to create inputs for date and time and enter them inline or using pup-up calendar that allows to navigate through monthes and years. + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Popup representation</para> + </listitem> + <listitem> + <para>Disablement support</para> + </listitem> + <listitem> + <para>Smart and user-defined positioning</para> + </listitem> + <listitem> + <para>Cells customization</para> + </listitem> + <listitem> + <para>Macro substitution based on tool bars customization</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component can work properly in two ways of data loading + defined by the <emphasis> + <property>"mode"</property> + </emphasis> attribute. + The attribute has two possible values: + </para> + <itemizedlist> + <listitem> + <para> + <code>client</code> — the default mode. + In this mode calendar loads an initial portion of data within a definite date range. + The range is specified with the help of <emphasis> + <property>"preloadDateRangeBegin"</property> + </emphasis> and <emphasis> + <property>"preloadDateRangeEnd"</property> + </emphasis> attributes + that are designed for this mode only! + Additional data requests are not sent. + </para> + </listitem> + </itemizedlist> + <itemizedlist> + <listitem> + <para> + <code>ajax</code> — in this mode the <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> requests portions of data for element rendering from special Data Model. + The default calendar Data Model could be redefined with the help of <emphasis> + <property>dataModel</property> + </emphasis> attribute that points to the object that implements <code> + <ulink url="&apidoc_framework;org/richfaces/model/CalendarDataModel.html">CalendarDataModel</ulink> + </code> interface. + If <emphasis> + <property>"dataModel"</property> + </emphasis> attribute has <emphasis> + <property>"null"</property> + </emphasis> value, data requests are not sent. + In this case the "<code>ajax</code>" mode is equal to the "<code>client</code>". + </para> + </listitem> + </itemizedlist> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> could be represented on a page in two ways (a) the calendar itself without input field and button and + (b) date input with button and popping-up calendar. + This is defined with <emphasis> + <property>"popup" </property> + </emphasis> attribute, which is <emphasis> + <property>"true"</property> + </emphasis> by default. + For popup rendering a "lazy" loading is implemented: a client side script method builds the popup after request is completed. + Such improvement speeds up page loading time. + </para> + + <figure> + <title>The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> with <emphasis> + <property>popup="false"</property> + </emphasis> (a) and default representation (b)</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar7.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + By default the <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> is rendered as input filed with a button and calendar hidden in a pop-up. + The button is represented with calendar pictogramm. + This pictogramm could be easily changed with the help of <emphasis> + <property>"buttonIcon"</property> + </emphasis> + and <emphasis> + <property>"buttonIconDisabled"</property> + </emphasis> attributes, which specify the icon for button enabled and disabled states respectively. + To change the button appearance from icon to usual button define the value for the <emphasis> + <property>"buttonLabel"</property> + </emphasis> attribute. + In this case <emphasis> + <property>"buttonIcon"</property> + </emphasis> and <emphasis> + <property>"buttonIconDisabled"</property> + </emphasis> attributes are ignored. + </para> + + <figure> + <title>The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> with <emphasis> + <property>buttonLabel="Open calendar"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar8.png"/> + </imageobject> + </mediaobject> + </figure> + + + <para> + There are two attributes that specify the place where the popup calendar is rendered relative to the input field and icon: + <emphasis> + <property>"jointPoint"</property> + </emphasis> and <emphasis> + <property>"direction"</property> + </emphasis> attributes. + By default the pop-up calendar appears under input and aligned with it left border (see Fig. 6.211, b). + Speaking in terms of RichFaces it means that <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> + <emphasis> + <property>jointPoint="bottom-left"</property> + </emphasis> + and <emphasis> + <property>direction="bottom-right".</property> + </emphasis> + There are four possible joint-points and four possible directions for each joint-point. + Besides that, the values of <emphasis> + <property>"jointPoint"</property> + </emphasis> and <emphasis> + <property>"direction"</property> + </emphasis> could be set to + <emphasis> + <property>"auto"</property> + </emphasis> that activates smart pop-up positioning. + </para> + <figure> + <title>Four possible positions of joint-points (red) and four possible directions (black) shown for bottom-left joint-point.</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar9.png"/> + </imageobject> + </mediaobject> + </figure> + + + + <para>Usage <emphasis> + <property>"currentDate"</property> + </emphasis> attribute isn't available in the popup mode.</para> + <para>With help of the <emphasis> + <property>"currentDate"</property> + </emphasis> attribute you can define month and year which will be + displayed currently.</para> + <para>The <emphasis> + <property>"value"</property> + </emphasis> attribute stores selected date currently.</para> + + <para>The difference between the value and currentDate attributes </para> + <para> The <emphasis> + <property>"todayControlMode"</property> + </emphasis> attribute defines the mode for "today" + control. Possible values are: </para> + <itemizedlist> + <listitem> + <para>"hidden" - in this mode + "Today" button will not be + displayed</para> + </listitem> + <listitem> + <para>"select" - (default) in this state + "Today" button activation will + scroll the calendar to the current date and it + become selected date</para> + </listitem> + <listitem> + <para>"scroll" - in this mode + "Today" activation will simply + scroll the calendar to current month without + changing selected day.</para> + </listitem> + </itemizedlist> + + + + <para> + With the help of the + <emphasis> + <property>"readonly"</property> + </emphasis> + attribute you can make date, time and input field unavailable, but you can look through the next/previous month or the next/previous year. + </para> + <para> + In order to disable the component, use the <emphasis> + <property>"disabled"</property> + </emphasis> attribute. With its help both controls are disabled in the + <emphasis> + <property>"popup"</property> + </emphasis> + mode. + </para> + <figure> + <title>Using the <emphasis> + <property>"disabled"</property> + </emphasis> attribute.</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar6.png"/> + </imageobject> + </mediaobject> + </figure> + + + + + <para> + <emphasis> + <property>"ondateselect"</property> + </emphasis> attribute is used to define an event that is triggered + before date selection.</para> + <para> + <emphasis> + The <property>"ondateselected"</property> + </emphasis> attribute is used to define an event that is triggered + after date selection. </para> + <para>For example, to fire some event after date selection you should use + <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis>. And it should be bound to <emphasis> + <property>"ondateselected"</property> + </emphasis> event as it's shown in the example below:</para> + <programlisting role="XML">... +&lt;rich:calendar id="date" value="#{bean.dateTest}"&gt; + &lt;a4j:support event="ondateselected" reRender="mainTable"/&gt; +&lt;/rich:calendar&gt; +...</programlisting> + <note> + <title>Note:</title> + <para> + When a timePicker was fulfilled, the <emphasis> + <property>"ondateselected"</property> + </emphasis> attribute does not allow you to submit a selected date. It happens because this event rose when the date is selected but the input hasn't been updated with new value yet. + + </para> + </note> + <para> + <emphasis> + <property>"ondateselect"</property> + </emphasis> could be used for possibility of date selection canceling. + See an example below:</para> + <programlisting role="XML">... +&lt;rich:calendar id="date" value="#{bean.dateTest}" ondateselect="if (!confirm('Are you sure to change date?')){return false;}"/&gt; +...</programlisting> + <para> + <emphasis> + <property>"oncurrentdateselected"</property> + </emphasis> event is fired when the "next/previous month" or + "next/previous year" button is pressed, and the value is applied. </para> + <para> + <emphasis> + <property>"oncurrentdateselect"</property> + </emphasis> event is fired when the "next/previous month" or + "next/previous year" button is pressed, but the value is not applied + yet (you can change the logic of applying the value). Also this event + could be used for possibility of "next/previous month" or + "next/previous year" selection canceling. See an example below: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:calendar id="date" value="#{bean.dateTest}" oncurrentdateselect="if (!confirm('Are you sure to change month(year)?')){return false;}" + oncurrentdateselected="alert('month(year) select:'+event.rich.date.toString());"/&gt; +...</programlisting> + <para>How to use these attributes see also on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> + <para> Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find <link linkend="process">in the corresponding section </link>. </para> + + + + + + + + <para> The <emphasis> + <property>"label"</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>"label"</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>"DoubleRangeValidator.MAXIMUM"</code>, + {2} for <code>"ShortConverter.SHORT"</code>. </para> + <para>The <emphasis> + <property>"defaultTime"</property> + </emphasis> attribute to set the default time value for the current + date in two cases:</para> + <itemizedlist> + <listitem> + <para> If time is not set </para> + </listitem> + <listitem> + <para> If another date is selected and the value of the <emphasis> + <property>"resetTimeOnDateSelect"</property> + </emphasis> attribute is set to + "true" </para> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property> "enableManualInput" </property> + </emphasis> attribute enables/disables input field, so when <code> + enableManualInput = "false" </code>, user + can only pick the date manually and has no possibility to type in the + date (default value is "false"). </para> + <para>The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component allows to use <emphasis> + <property>"header"</property> + </emphasis>, <emphasis> + <property>"footer"</property> + </emphasis>, <emphasis> + <property>"optionalHeader"</property> + </emphasis>, <emphasis> + <property>"optionalFooter"</property> + </emphasis> facets. The following elements are available in these + facets: <code>{currentMonthControl}</code>, + <code>{nextMonthControl}</code>, <code>{nextYearControl}</code>, + <code>{previousYearControl}</code>, + <code>{previousMonthControl}</code>, + <code>{todayControl}</code>, <code>{selectedDateControl}</code>. These + elements could be used for labels output.</para> + <para>Also you can use <emphasis> + <property>"weekNumber"</property> + </emphasis> facet with available <code>{weekNumber}</code>, + <code>{elementId}</code> elements and <emphasis> + <property>"weekDay"</property> + </emphasis> facet with <code>{weekDayLabel}</code>, + <code>{weekDayLabelShort}</code>, + <code>{weekDayNumber}</code>, <code>{isWeekend}</code>, + <code>{elementId}</code> elements. + <code>{weekNumber}</code>, <code>{weekDayLabel}</code>, + <code>{weekDayLabelShort}</code>, + <code>{weekDayNumber}</code> elements could be used for labels output, + <code>{isWeekend}</code>, <code>{elementId}</code> - for + additional processing in JavaScript code.</para> + <para>These elements are shown on the picture below.</para> + + <figure> + <title>Available elements</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>Simple example of usage is placed below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS">... +&lt;!-- Styles for cells --&gt; +&lt;style&gt; + .width100{ + width:100%; + } + .talign{ + text-align:center; + } +&lt;/style&gt; +...</programlisting> + + <programlisting role="XML">... +&lt;rich:calendar id="myCalendar" popup="true" locale="#{calendarBean.locale}" value="#{bean.date}" + preloadRangeBegin="#{bean.date}" preloadRangeEnd="#{bean.date}" cellWidth="40px" cellHeight="40px"&gt; + + &lt;!-- Customization with usage of facets and accessible elements --&gt; + &lt;f:facet name="header"&gt; + &lt;h:panelGrid columns="2" width="100%" columnClasses="width100, fake"&gt; + &lt;h:outputText value="{selectedDateControl}" /&gt; + &lt;h:outputText value="{todayControl}" style="font-weight:bold; text-align:left"/&gt; + &lt;/h:panelGrid&gt; + &lt;/f:facet&gt; + &lt;f:facet name="weekDay"&gt; + &lt;h:panelGroup style="width:60px; overflow:hidden;" layout="block"&gt; + &lt;h:outputText value="{weekDayLabelShort}"/&gt; + &lt;/h:panelGroup&gt; + &lt;/f:facet&gt; + &lt;f:facet name="weekNumber"&gt; + &lt;h:panelGroup&gt; + &lt;h:outputText value="{weekNumber}" style="color:red"/&gt; + &lt;/h:panelGroup&gt; + &lt;/f:facet&gt; + &lt;f:facet name="footer"&gt; + &lt;h:panelGrid columns="3" width="100%" columnClasses="fake, width100 talign"&gt; + &lt;h:outputText value="{previousMonthControl}" style="font-weight:bold;"/&gt; + &lt;h:outputText value="{currentMonthControl}" style="font-weight:bold;"/&gt; + &lt;h:outputText value="{nextMonthControl}" style="font-weight:bold;"/&gt; + &lt;/h:panelGrid&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="{day}"&gt;&lt;/h:outputText&gt; +&lt;/rich:calendar&gt; +...</programlisting> + + <para>This is a result:</para> + <figure> + <title>Facets usage</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>As it's shown on the picture above + <code>{selectedDateControl}</code>, <code>{todayControl}</code> + elements are placed in the <emphasis> + <property>"header"</property> + </emphasis> facet, <code>{previousMonthControl}</code>, + <code>{currentMonthControl}</code>, + <code>{nextMonthControl}</code> - in the <emphasis> + <property>"footer"</property> + </emphasis> facet, <code>{weekDayLabelShort}</code> - in the <emphasis> + <property>"weekDay"</property> + </emphasis> facet, <code>{nextYearControl}</code>, + <code>{previousYearControl}</code> are absent. Numbers of + weeks are red colored.</para> + + <para> It is possible to show and manage date. Except scrolling controls you can + use quick month and year selection feature. It's necessary to + click on its field, i.e. current month control, and choose required + month and year. </para> + <figure> + <title>Quick month and year selection</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar5.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Also the <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component allows to show and manage time. It's + necessary to define time in a pattern (for example, it could be + defined as "<code>d/M/yy HH:mm</code>"). Then after + you choose some data in the calendar, it becomes possible to manage + time for this date. For time editing it's necessary to click + on its field (see a picture below). To clean the field click on the + "Clean".</para> + + <figure> + <title>Timing</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/calendar4.png"/> + </imageobject> + </mediaobject> + </figure> + + + <para>It's possible to handle events for calendar from JavaScript code. + A simplest example of usage JavaScript API is placed below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:calendar value="#{calendarBean.selectedDate}" id="calendarID" + locale="#{calendarBean.locale}" + popup="#{calendarBean.popup}" + datePattern="#{calendarBean.pattern}" + showApplyButton="#{calendarBean.showApply}" style="width:200px"/&gt; +&lt;a4j:commandLink onclick="$('formID:calendarID').component.doExpand(event)" value="Expand"/&gt; +...</programlisting> + + <para>Also the discussion about this problem can be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> + + + + <!-- <para>The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component provides the possibility to use a special Data + Model to define data for element rendering. Data Model includes two + major interfaces: </para> + <itemizedlist> + <listitem> + <para> + <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... + + </para> + </listitem> + <listitem> + <para> <ulink url="http://www.jboss.org/file-access/default/members/jbossrichfaces... + + </para> + </listitem> + </itemizedlist> + + + <para><code>CalendarDataModel</code> provides the following function:</para> + <itemizedlist> + <listitem> + <para><code>CalendarDataModelItem[] + getData(Date[])</code>;</para> + </listitem> + </itemizedlist> + <para>This method is called when it&apos;s necessary to represent the next + block of <code>CalendarDataModelItem</code>. It happens during navigation + to the next (previous) month or in any other case when calendar + renders. This method is called in <emphasis> + <property>&quot;Ajax&quot;</property> + </emphasis> mode when the calendar renders a new page. </para> + <para><code>CalendarDataModelItem</code> provides the following function:</para> + <itemizedlist> + <listitem> + <para>Date <code>getDate()</code> - returns date from the + item. Default implementation returns date.</para> + </listitem> + <listitem> + <para>Boolean <code>isEnabled()</code> - returns + &quot;true&quot; if date is <emphasis> + <property>&quot;selectable&quot;</property> + </emphasis> on the calendar. Default + implementation returns + &quot;true&quot;.</para> + </listitem> + <listitem> + <para>String <code>getStyleClass()</code> - returns string + appended to the style class for the date span. For + example it could be &quot;relevant + holyday&quot;. It means that the class could + be defined like the + &quot;rich-cal-day-relevant-holyday&quot; + one. Default implementation returns empty + string.</para> + </listitem> + <listitem> + <para>Object <code>getData()</code> - returns any additional + payload that must be JSON-serializable object. It + could be used in the custom date representation on + the calendar (inside the custom facet).</para> + </listitem> + </itemizedlist> + +--> + + + <para> The <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component provides the possibility to use + internationalization method to redefine and localize the labels. You + could use application resource bundle and define + <code>RICH_CALENDAR_APPLY_LABEL</code>, + <code>RICH_CALENDAR_TODAY_LABEL</code>, + <code>RICH_CALENDAR_CLOSE_LABEL</code>, + <code>RICH_CALENDAR_OK_LABEL</code>, + <code>RICH_CALENDAR_CLEAN_LABEL</code>, + <code>RICH_CALENDAR_CANCEL_LABEL </code> there. </para> + <para>You could also pack <code>org.richfaces.renderkit.calendar</code> + <ulink url="&apidoc;org/richfaces/renderkit/CalendarRendererBase.html#CALENDAR_BUNDLE">resource</ulink> bundle with your JARs defining the same + properties. </para> + <note> + <title>Note:</title> + <para>Only for Internet Explorer 6 and later. To make <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> inside <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> rendered properly, enable the + standards-compliant mode. Explore <ulink url="http://msdn.microsoft.com/en-us/library/ms535242(VS.85).aspx&qu... reference at MSDN</ulink> to find out + how to do this. </para> + </note> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/calendar.html">Table of + &lt;rich:calendar&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.Calendar</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlCalendar</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.Calendar</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.CalendarRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.CalendarTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>selectDate(date)</entry> + + <entry>Selects the date specified. If + the date isn't in + current month - performs + request to select</entry> + </row> + + <row> + <entry role="tbi">isDateEnabled(date)</entry> + + <entry role="tbi">Checks if given date + is selectable (to be + implemented)</entry> + </row> + + <row> + <entry role="tbi">enableDate(date)</entry> + + <entry role="tbi">Enables date cell + control on the calendar (to be + implemented)</entry> + </row> + + <row> + <entry role="tbi">disableDate(date)</entry> + + <entry role="tbi">Disables date cell + control on the calendar (to be + implemented)</entry> + </row> + + <row> + <entry role="tbi">enableDates(date[])</entry> + + <entry role="tbi">Enables dates cell + controls set on the calendar + (to be implemented)</entry> + </row> + + <row> + <entry role="tbi">disableDates(date[])</entry> + + <entry role="tbi">Disables dates cell + controls set on the calendar + (to be implemented)</entry> + </row> + + <row> + <entry>nextMonth()</entry> + + <entry>Navigates to next month</entry> + </row> + + <row> + <entry>nextYear()</entry> + + <entry>Navigates to next year</entry> + </row> + + <row> + <entry>prevMonth()</entry> + + <entry>Navigates to previous month + </entry> + </row> + + <row> + <entry>prevYear()</entry> + + <entry>Navigates to previous + year</entry> + </row> + + <row> + <entry>today()</entry> + + <entry>Selects today date</entry> + </row> + + <row> + <entry>getSelectedDate()</entry> + + <entry>Returns currently selected + date</entry> + </row> + + <row> + <entry>Object getData()</entry> + + <entry>Returns additional data for the + date</entry> + </row> + + <!-- + <row> + <entry>enable()</entry> + + <entry>Enables calendar</entry> + </row> + + <row> + <entry>disable()</entry> + + <entry>Disables calendar</entry> + </row> + --> + + <row> + <entry>getCurrentMonth()</entry> + + <entry>Returns number of the month + currently being viewed</entry> + </row> + + <row> + <entry>getCurrentYear()</entry> + + <entry>Returns number of the year + currently being viewed</entry> + </row> + + <row> + <entry>doCollapse()</entry> + + <entry>Collapses calendar + element</entry> + </row> + + <row> + <entry>doExpand()</entry> + + <entry>Expands calendar element</entry> + </row> + + <row> + <entry>resetSelectedDate()</entry> + + <entry>Clears a selected day + value</entry> + </row> + + <row> + <entry>doSwitch()</entry> + + <entry>Inverts a state for the popup + calendar</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Redefines calendar header. Related attribute is "showHeader"</entry> + </row> + <row> + <entry>footer</entry> + <entry>Redefines calendar footer. Related attribute is "showFooter"</entry> + </row> + <row> + <entry>optionalHeader</entry> + <entry>Defines calendar's optional header</entry> + </row> + <row> + <entry>optionalFooter</entry> + <entry>Defines calendar's optional footer</entry> + </row> + <row> + <entry>weekNumber</entry> + <entry>Redefines week number</entry> + </row> + <row> + <entry>weekDay</entry> + <entry>Redefines names of the week days. Related attributes are "weekDayLabels" and "weekDayLabelsShort"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn3"> + <title>Classes names that define an input field and a button + appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-input </entry> + + <entry>Defines styles for an input + field</entry> + </row> + + <row> + <entry>rich-calendar-button</entry> + + <entry>Defines styles for a popup + button</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a days appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>rich-calendar-days</entry> + + <entry>Defines styles for names of + working days in a + header</entry> + </row> + + <row> + <entry>rich-calendar-weekends</entry> + + <entry>Defines styles for names of + weekend in a header</entry> + </row> + + <row> + <entry>rich-calendar-week</entry> + + <entry>Defines styles for weeks + numbers</entry> + </row> + + <row> + <entry>rich-calendar-today</entry> + + <entry>Defines styles for cell with a + current date</entry> + </row> + + <row> + <entry>rich-calendar-cell</entry> + + <entry>Defines styles for cells with + days</entry> + </row> + + <row> + <entry>rich-calendar-holly</entry> + + <entry>Defines styles for + holiday</entry> + </row> + + <row> + <entry>rich-calendar-select</entry> + + <entry>Defines styles for a selected + day</entry> + </row> + + <row> + <entry>rich-calendar-hover</entry> + + <entry>Defines styles for a hovered + day</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a popup element</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-popup</entry> + + <entry>Defines styles for a popup + element</entry> + </row> + <row> + <entry>rich-calendar-exterior</entry> + + <entry>Defines styles for a popup + element exterior</entry> + </row> + + <row> + <entry>rich-calendar-tool</entry> + + <entry>Defines styles for + toolbars</entry> + </row> + + <row> + <entry>rich-calendar-month</entry> + + <entry>Defines styles for names of + months</entry> + </row> + + <row> + <entry>rich-calendar-header-optional</entry> + + <entry>Defines styles for an optional + header</entry> + </row> + + <row> + <entry>rich-calendar-footer-optional</entry> + + <entry>Defines styles for an optional + footer</entry> + </row> + + <row> + <entry>rich-calendar-header</entry> + + <entry>Defines styles for a + header</entry> + </row> + + <row> + <entry>rich-calendar-footer</entry> + + <entry>Defines styles for a + footer</entry> + </row> + + <row> + <entry>rich-calendar-boundary-dates</entry> + + <entry>Defines styles for an active + boundary button</entry> + </row> + + <row> + <entry>rich-calendar-btn</entry> + + <entry>Defines styles for an inactive + boundary date</entry> + </row> + + <row> + <entry>rich-calendar-toolfooter</entry> + + <entry>Defines styles for a today + control date</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a popup element during quick month + and year selection</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-date-layout</entry> + <entry>Defines styles for a popup + element during quick year + selection</entry> + </row> + <row> + <entry>rich-calendar-editor-layout-shadow</entry> + <entry>Defines styles for a + shadow</entry> + </row> + <row> + <entry>rich-calendar-editor-btn</entry> + <entry>Defines styles for an inactive + boundary date</entry> + </row> + <row> + <entry>rich-calendar-date-layout-split</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + month items near split + line</entry> + </row> + <row> + <entry>rich-calendar-editor-btn-selected</entry> + <entry>Defines styles for an selected + boundary date</entry> + </row> + <row> + <entry>rich-calendar-editor-btn-over</entry> + <entry>Defines styles for a boundary + date when pointer was moved + onto</entry> + </row> + + <row> + <entry>rich-calendar-editor-tool-over</entry> + <entry>Defines styles for a hovered + toolbar items</entry> + </row> + + <row> + <entry>rich-calendar-editor-tool-press</entry> + <entry>Defines styles for a pressed + toolbar items</entry> + </row> + + <row> + <entry>rich-calendar-date-layout-ok</entry> + <entry>Defines styles for a + "ok" + button</entry> + </row> + <row> + <entry>rich-calendar-date-layout-cancel</entry> + <entry>Defines styles for a + "cancel" + button</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a popup element during time selection</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-calendar-time-layout</entry> + <entry>Defines styles for a popup + element during time + selection</entry> + </row> + <row> + <entry>rich-calendar-editor-layout-shadow</entry> + <entry>Defines styles for a + shadow</entry> + </row> + <row> + <entry>rich-calendar-time-layout-fields</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + input fields and + buttons</entry> + </row> + <row> + <entry>rich-calendar-spinner-input-container</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + an input field</entry> + </row> + <row> + <entry>rich-calendar-spinner-input</entry> + <entry>Defines styles for an input + field</entry> + </row> + <row> + <entry>rich-calendar-spinner-buttons</entry> + <entry>Defines styles for a wrapper + &lt;td&gt; element for + spinner buttons</entry> + </row> + <row> + <entry>rich-calendar-spinner-up</entry> + <entry>Defines styles for a + "up" + button</entry> + </row> + <row> + <entry>rich-calendar-spinner-down</entry> + <entry>Defines styles for a + "down" + button</entry> + </row> + <row> + <entry>rich-calendar-time-layout-ok</entry> + <entry>Defines styles for a + "ok" + button</entry> + </row> + <row> + <entry>rich-calendar-time-layout-cancel</entry> + <entry>Defines styles for a + "cancel" + button</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/calendar.js... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para>How to use JavaScript API see on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_changeExpandListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_changeExpandListener.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_changeExpandListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,113 @@ +<section role="NotInToc" id="rich_changeExpandListener"> + <title> + &lt; + rich:changeExpandListener + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:changeExpandListener&gt;</property> + </emphasis> + represents an action listener method that is notified on an expand/collapse event on the node. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Allows to define some "changeExpand" listeners for the component</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:changeExpandListener&gt;</property> + </emphasis> is used as a nested tag with <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> + and <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components. +</para> + <para> +Attribute <emphasis> + <property>"type"</property> + </emphasis> defines the fully qualified Java class name for the listener. + This class should implement <ulink url="&apidoc_framework;org/richfaces/event/TreeListenerEventsProducer.html#addChangeExpandListener(org.richfaces.event.NodeExpandedListener)"> + <code>org.richfaces.event.NodeExpandedListener</code> + </ulink>interface. +</para> + + <para> + <emphasis role="bold">The typical variant of using:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:tree switchType="server" value="#{project.data}" var="item" nodeFace="#{item.type}"&gt; + &lt;rich:changeExpandListener type="demo.ListenerBean"/&gt; + ... + &lt;!-- Tree nodes --&gt; + ... +&lt;/rich:tree&gt; +... +</programlisting> + + <para> + <emphasis role="bold">Java bean source:</emphasis> + </para> + + <programlisting role="JAVA">package demo; +import org.richfaces.event.NodeExpandedEvent; +public class ListenerBean implements org.richfaces.event.NodeExpandedListener{ + ... + public void processExpansion(NodeExpandedEvent arg0){ + //Custom Developer Code + } + ... +} +...</programlisting> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/changeExpandListener.html">Table of + &lt;rich:changeExpandListener&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + + <row> + <entry>listener-class</entry> + <entry>org.richfaces.event.NodeExpandedListener</entry> + </row> + <row> + <entry>event-class</entry> + <entry>org.richfaces.event.NodeExpandedEvent</entry> + </row> + + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ChangeExpandListenerTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_colorPicker.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_colorPicker.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_colorPicker.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,309 @@ +<section role="NotInToc" id="rich_colorPicker"> + <title> + &lt; + rich:colorPicker + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.3.1</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The + <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component + lets you visually choose a color or define it in hex, RGB, or HSB input fields. + </para> + <figure> + <title> + Simple + <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> + component + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Possibility to get color in hex, or RGB color models</para> + </listitem> + <listitem> + <para>Flat/inline representation</para> + </listitem> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> The <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> component allows you easily select a color or define it in hex, RGB, or HSB input + fields. There are two squares in the widget that help you to compare the currently selected + color and the already selected color. </para> + <para> The <property> + <emphasis>"value"</emphasis> + </property> attribute stores the selected color. </para> + <para> The value of the <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> component could be saved in hex or RGB color models. You can explicitly define a + color model in the <property> + <emphasis>"colorMode"</emphasis> + </property> attribute. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"> +... +&lt;rich:colorPicker value="#{bean.color}" colorMode="rgb" /&gt; +... + </programlisting> + <para>This is the result:</para> + <figure> + <title> Usage of the <property> + <emphasis>"colorMode"</emphasis> + </property> attribute. </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_rgb.png"/> + </imageobject> + </mediaobject> + </figure> + <para> The <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> component has two representation states: flat and inline. With the help of the <property> + <emphasis>"flat"</emphasis> + </property> attribute you can define whether the component is rendered flat. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"> +... +&lt;rich:colorPicker value="#{bean.color}" flat="true" /&gt; +... + </programlisting> + + <para>The component specific event handler <property> + <emphasis>"onbeforeshow"</emphasis> + </property> captures the event which occurs before + the <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> widget is opened. The <property> + <emphasis>"onbeforeshow"</emphasis> + </property> attribute could be used in order to cancel this + event. See the example below:</para> + <programlisting role="XML"> +... +&lt;rich:colorPicker value="#{bean.color}" onbeforeshow="if (!confirm('Are you sure you want to change a color?')){return false;}" /&gt; +... + </programlisting> + + <para> The <property> + <emphasis>"showEvent"</emphasis> + </property> attribute defines the event that shows <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> widget. The default value is "onclick". </para> + <para> The <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> component allows to use the <emphasis> + <property>"icon"</property> + </emphasis> facet. </para> + <para> You can also customize <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> rainbow slider ( <inlinemediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_arrows.png"/> + </imageobject> + </inlinemediaobject> ) with the help of the <property> + <emphasis>"arrows"</emphasis> + </property> facet. </para> + <programlisting role="XML"> +... +&lt;rich:colorPicker value="#{bean.color}"&gt; + &lt;f:facet name="icon"&gt; + &lt;h:graphicImage value="/pages/colorPicker_ico.png" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="arrows"&gt; + &lt;f:verbatim&gt; + &lt;div style="width: 33px; height: 5px; border: 1px solid #bed6f8; background:none;" /&gt; + &lt;/f:verbatim&gt; + &lt;/f:facet&gt; +&lt;/rich:colorPicker&gt; +... + </programlisting> + <para>This is the result:</para> + <figure> + <title> Usage of the <emphasis> + <property>"icon"</property> + </emphasis>, and <emphasis> + <property>"arrows"</property> + </emphasis> facets </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/colorPicker_facets.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/colorPicker.html">Table of + &lt;rich:colorPicker&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ColorPicker</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlColorPicker</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ColorPicker</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ColorPickerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ColorPickerTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>arrows</entry> + <entry>Redefines colorPicker arrows</entry> + </row> + <row> + <entry>icon</entry> + <entry>Redefines colorPicker icon</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="colorPicker_cn_inline"> + <title> Classes names for the representation of the input field and icon containing selected + color </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Selector name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>.rich-colorpicker-span input</entry> + <entry>Defines styles for the input field that contains selected color</entry> + </row> + <row> + <entry>.rich-colorpicker-icon</entry> + <entry>Defines styles for the icon</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="colorPicker_cn_widget"> + <title>Classes names for the widget</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>.rich-colorpicker-ext</entry> + <entry>Defines styles for the wrapper &lt;div&gt; element of a widget</entry> + </row> + <row> + <entry>.rich-colorpicker-color</entry> + <entry>Defines styles for the color palette</entry> + </row> + <row> + <entry>.rich-colorpicker-current-color</entry> + <entry>Defines styles for the currently selected color</entry> + </row> + <row> + <entry>.rich-colorpicker-new-color</entry> + <entry>Defines styles for the already selected color</entry> + </row> + <row> + <entry>.rich-colorpicker-colors-input</entry> + <entry>Defines styles for the hex, RGB, and HSB input fileds</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="colorPicker_cn_buttons"> + <title>Classes names for the buttons representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>.rich-colorpicker-submit</entry> + <entry>Defines styles for the "Apply" button</entry> + </row> + <row> + <entry>.rich-colorpicker-cancel</entry> + <entry>Defines styles for the "Cancel" button</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/colorPicker... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:colorPicker&gt;</property> + </emphasis> component usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_column.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_column.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_column.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,626 @@ +<section role="NotInToc" id="rich_column"> + <title> + &lt; + rich:column + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component for row rendering for a UIData component.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Completely skinned table rows and child elements</para> + </listitem> + <listitem> + <para>Possibility to combine columns with the help of <emphasis> + <property>"colspan"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>Possibility to combine rows with the help of <emphasis> + <property>"rowspan"</property> + </emphasis> and <emphasis> + <property>"breakBefore"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <link linkend="sort">Sorting column values</link> + </para> + </listitem> + <listitem> + <para> + <link linkend="filter">Filtering column values</link> + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>To output a simple table, the <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> component is used the same way as the standard <emphasis role="bold"> + <property>&lt;h:column&gt;</property> + </emphasis>, i.e. the following code on a page is used:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;State Flag&lt;/f:facet&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;State Name&lt;/f:facet&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column &gt; + &lt;f:facet name="header"&gt;State Capital&lt;/f:facet&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;Time Zone&lt;/f:facet&gt; + &lt;h:outputText value="#{cap.timeZone}"/&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +... +</programlisting> + <para>The result is:</para> + <figure> + <title>Generated <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Now, in order to group columns with text information into one row in one + column with a flag, use the <emphasis> + <property>"colspan"</property> + </emphasis> attribute, which is similar to an HTML one, specifying + that the first column contains 3 columns. In addition, it's + necessary to specify that the next column begins from the first row + with the help of the + <code>breakBefore="true"</code>.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; + &lt;rich:column colspan="3"&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column &gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{cap.timeZone}"/&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +... +</programlisting> + <para>As a result the following structure is rendered:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> modified with <emphasis> + <property>"colspan"</property> + </emphasis> and <emphasis> + <property>"breakbefore"</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column3.png"/> + </imageobject> + </mediaobject> + </figure> + <para>The same way is used for <property>columns</property> grouping with the <emphasis> + <property>"rowspan"</property> + </emphasis> attribute that is similar to an HTML one responsible for + rows quantity definition occupied with the current one. The only thing + to add in the example is an instruction to move onto the next row for + each next after the second column.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; + &lt;rich:column rowspan="3"&gt; + &lt;f:facet name="header"&gt;State Flag&lt;/f:facet&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;State Info&lt;/f:facet&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="#{cap.timeZone}"/&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +... +</programlisting> + <para>As a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> generated with <emphasis> + <property>"rowspan"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column4.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Hence, additionally to a standard output of a particular row provided with + the <emphasis role="bold"> + <property>&lt;h:column&gt;</property> + </emphasis> component, it becomes possible to group easily the rows + with special HTML attribute.</para> + <para>The columns also could be grouped in a particular way with the help of the + <emphasis role="bold"> + <property>&lt;h:columnGroup&gt;</property> + </emphasis> component that is described in <link linkend="columnGroup">the following chapter</link>.</para> + <para> + <ulink url="http://wiki.jboss.org/wiki/DynamicColumns">In the Dynamic Columns Wiki article</ulink> you + can find additional information about dynamic columns.</para> + </section> + <section id="sortAndFilter"> + <title>Sorting and Filtering</title> + <section id="sort"> + <title>Sorting</title> + <para> In order to sort the columns you should use <emphasis> + <property>"sortBy"</property> + </emphasis> attribute that indicates what values to be + sorted.This attribute can be used only with the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component. + In order to sort the column you should click on its + header. See the following example. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Sorting Example"/&gt; + &lt;/f:facet&gt; + &lt;rich:column sortBy="#{cap.state}"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State Name"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column sortBy="#{cap.name}"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State Capital"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; + &lt;/rich:dataTable&gt; +&lt;/h:form&gt; +...</programlisting> + <para>This is result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> with <emphasis> + <property>"sortBy"</property> + </emphasis> attribute </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column5.png"/> + </imageobject> + </mediaobject> + </figure> + <para>The <emphasis> + <property>"sortExpression"</property> + </emphasis> attribute defines a bean property which is used + for sorting of a column. This attribute can be used only with the <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component. + The following example is a example of the attribute usage. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:scrollableDataTable id="carList" + value="#{dataTableScrollerBean.allCars}" sortMode="single" + binding="#{dataTableScrollerBean.table}"&gt; + &lt;rich:column id="make" sortExpression="#{cap.make}"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText styleClass="headerText" value="Make" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{category.make}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="model"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText styleClass="headerText" value="Model" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{category.model}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="price"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText styleClass="headerText" value="Price" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{category.price}" /&gt; + &lt;/rich:column&gt; +&lt;/rich:scrollableDataTable&gt; +...</programlisting> + <!-- <figure> + <title>The <emphasis> + <property>&quot;sortExpression&quot;</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column7.png" + /> + </imageobject> + </mediaobject> + </figure>--> + <para> The <emphasis> + <property>"selfSorted"</property> + </emphasis> attribute that would add the possibility of + automatic sorting by clicking the column header. Default + value is "true". In the example below the + second column is unavailable for sorting. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap"&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State Flag"/&gt; + &lt;/f:facet&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column sortBy="#{cap.state}" selfSorted="false"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State Name"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + <para> + <emphasis> + <property>"sortOrder"</property> + </emphasis> attribute is used for changing the sorting of + columns by means of external controls. </para> + <para>Possible values are:</para> + <itemizedlist> + <listitem> + <para> "ASCENDING" - column is + sorted in ascending </para> + </listitem> + <listitem> + <para> "DESCENDING" - column is + sorted in descending </para> + </listitem> + <listitem> + <para> "UNSORTED" - column + isn't sorted </para> + </listitem> + </itemizedlist> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="300px"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Sorting Example"/&gt; + &lt;/f:facet&gt; + &lt;rich:column sortBy="#{cap.state}" sortOrder="ASCENDING"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State Name"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column sortBy="#{cap.name}" sortOrder="DESCENDING"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State Capital"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; + &lt;/rich:dataTable&gt; +&lt;/h:form&gt; +...</programlisting> + <para>Below you can see the result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> with <emphasis> + <property>"sortOrder"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column6.png"/> + </imageobject> + </mediaobject> + </figure> + <para> In the example above the first column is sorted in descending + order. But if recurring rows appear in the table the + relative second column are sorted in ascending order. </para> + <para>If the values of the columns are complex, the <emphasis> + <property>"sortOrder"</property> + </emphasis> attribute should point to a bean property containing the sort order. + See how it's done in the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/columns.jsf... + for <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis>.</para> + <para>You can customize the sorting's icon element using + "rich-sort-icon" class.</para> + <note> + <title>Note</title> + <para> + In order to sort a column with the values not in English you can add the <code>org.richfaces.datatableUsesViewLocale</code> context parameter in your web.xml. + Its value should be "true". + </para> + </note> + <!-- <para> The <emphasis> + <property>&quot;sortPriority&quot;</property> + </emphasis> attribute defines a set of column + <property>ids</property> in the order the columns could be + set. </para> + <para> If the columns sort order changed externally sort priorities + could be used to define which columns will be sorted first. </para> --> + <!--para> + Note that <emphasis><property>&quot;sortPriority&quot;</property></emphasis> attribute is defined in + the <emphasis role="bold"><property>&lt;rich:dataTable&gt;</property></emphasis> component! + </para--> + <note> + <title>Note:</title> + <para> + The <emphasis> + <property>"sortBy"</property> + </emphasis> and the <emphasis> + <property>"selfSorted"</property> + </emphasis> attributes used with the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component. + Also the <emphasis> + <property>"selfSorted"</property> + </emphasis> can be used with the <emphasis role="bold"> + <property>&lt;rich:extendedDataTable&gt;</property> + </emphasis>. + </para> + <para> The <emphasis> + <property>"sortable"</property> + </emphasis> and the <emphasis> + <property>"sortExpression"</property> + </emphasis> attributes used with the <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component.</para> + </note> + </section> + + <section id="filter"> + <title>Filtering</title> + + <para> There are two ways to filter the column value: </para> + <itemizedlist> + <listitem> + <para> Using built-in filtering. It uses + <code>startsWith()</code> + function to make filtering. In this case + you need to define <emphasis> + <property>"filterBy"</property> + </emphasis> attribute at column you want + to be filterable. This attribute defines + iterable object property which is used + when filtering performed. </para> + <para> The <emphasis> + <property>"filterValue"</property> + </emphasis> attribute is used to get or + change current filtering value. It could + be defined with initial filtering value + on the page or as value binding to + get/change it on server. If the <emphasis> + <property>"filterValue"</property> + </emphasis> attribute isn't + empty from the beginning table is + filtered on the first rendering. </para> + <para> You can customize the input form using + "rich-filter-input" + CSS class. </para> + <para> In order to change filter event you could + use <emphasis> + <property>"filterEvent"</property> + </emphasis> attribute on column, e.g. + "onblur"(default + value). </para> + <!--para> + The <emphasis><property>&quot;filterDefaultLabel&quot;</property></emphasis> attribute defines the label that appears instead of input field. + </para--> + <para>Below you can see the example:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" width="500px"&gt; + &lt;rich:column filterBy="#{cap.state}" filterValue="#{filterName.filterBean}" filterEvent="onkeyup"&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column filterBy="#{cap.name}" filterEvent="onkeyup"&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + <para> This is the result: </para> + <figure> + <title>Built-in filtering feature usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column8.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + <listitem> + <para> Using external filtering. In this case you + need to write your custom filtering + function or expression and define + controls. </para> + <para> The <emphasis> + <property>"filterExpression"</property> + </emphasis> attribute is used to define + expression evaluated to boolean value. + This expression checks if the object + satisfies filtering condition. </para> + <para> The <emphasis> + <property>"filterMethod"</property> + </emphasis> attribute is defined with + method binding. This method accepts on + Object parameter and return boolean + value. So, this method also could be + used to check if the object satisfies + filtering condition. The usage of this + attribute is the best way for + implementing your own complex business + logic. </para> + <para>See the following example:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" id="table"&gt; + &lt;rich:column filterMethod="#{filteringBean.filterStates}"&gt; + &lt;f:facet name="header"&gt; + &lt;h:inputText value="#{filteringBean.filterValue}" id="input"&gt; + &lt;a4j:support event="onkeyup" reRender="table" + ignoreDupResponses="true" requestDelay="700" focus="input" /&gt; + &lt;/h:inputText&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.state}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column filterExpression="#{fn:containsIgnoreCase(cap.timeZone, filteringBean.filterZone)}"&gt; + &lt;f:facet name="header"&gt; + &lt;h:selectOneMenu value="#{filteringBean.filterZone}"&gt; + &lt;f:selectItems value="#{filteringBean.filterZones}" /&gt; + &lt;a4j:support event="onchange" reRender="table" /&gt; + &lt;/h:selectOneMenu&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.timeZone}" /&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + </listitem> + </itemizedlist> + </section> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/column.html">Table of + &lt;rich:column&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Column</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlColumn</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Column</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ColumnRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ColumnTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Defines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Defines the footer content</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para>Visit + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... page at + RichFaces live demo for examples of component usage and their sources.</para> + <para>" + <ulink url="http://www.jboss.org/community/docs/DOC-9607">Using the "rendered" attribute of &lt;rich:column&gt;</ulink>" article + in RichFaces cookbook at JBoss portal gives an example of code of the component usage case. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columnGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columnGroup.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columnGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,205 @@ +<section role="NotInToc" id="rich_columnGroup"> + <title> + &lt; + rich:columnGroup + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component combines columns in one row to organize complex subparts of a table.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columnGroup_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Completely skinned table columns and child elements</para> + </listitem> + <listitem> + <para>Possibility to combine columns and rows inside</para> + </listitem> + <listitem> + <para>Possibility to update a limited set of strings with Ajax </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> component combines columns set wrapping them into the <emphasis role="bold"> + <property>&lt;tr&gt;</property> + </emphasis> element and outputting them + into one row. Columns are combined in a group the same way as when the <emphasis> + <property>"breakBefore"</property> + </emphasis> attribute is used for + columns to add a moving to the next rows, but the first variant is clearer from a source code. Hence, the + following simple examples are very same.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"&gt; + &lt;rich:column colspan="3"&gt; + &lt;f:facet name="header"&gt;State Flag&lt;/f:facet&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;/rich:column&gt; + &lt;rich:columnGroup&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column &gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column &gt; + &lt;h:outputText value="#{cap.timeZone}"/&gt; + &lt;/rich:column&gt; + &lt;/rich:columnGroup&gt; +&lt;/rich:dataTable&gt; +... +</programlisting> + <para>And representation without a grouping:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5" id="sublist"&gt; + &lt;rich:column colspan="3"&gt; + &lt;f:facet name="header"&gt;State Flag&lt;/f:facet&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column &gt; + &lt;h:outputText value="#{cap.timeZone}"/&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +.... +</programlisting> + <para>The result is:</para> + <figure> + <title>Generated <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> component + with <emphasis> + <property>"breakBefore"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columnGroup2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>It's also possible to use the component for output of complex headers in a table. For example adding + of a complex header to a facet for the whole table looks the following way:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;f:facet name="header"&gt; + &lt;rich:columnGroup&gt; + &lt;rich:column rowspan="2"&gt; + &lt;h:outputText value="State Flag"/&gt; + &lt;/rich:column&gt; + &lt;rich:column colspan="3"&gt; + &lt;h:outputText value="State Info"/&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="State Name"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;h:outputText value="State Capital"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;h:outputText value="Time Zone"/&gt; + &lt;/rich:column&gt; + &lt;/rich:columnGroup&gt; +&lt;/f:facet&gt; +... +</programlisting> + <para>Generated on a page as:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis>with complex headers</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columnGroup3.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/columnGroup.html">Table of + &lt;rich:columnGroup&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ColumnGroup</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlColumnGroup</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ColumnGroup</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ColumnGroupRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ColumnGroupTag</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:columnGroup&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columns.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columns.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_columns.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,423 @@ +<section role="NotInToc" id="rich_columns"> + <title> + &lt; + rich:columns + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> is a component, that allows you to create a <property>dynamic</property> set of columns from your model.</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columns_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Dynamic tables creation</para> + </listitem> + <listitem> + <para>Possibility to combine columns with the help of <emphasis> + <property>"colspan"</property> + </emphasis> and <emphasis> + <property>"breakBefore"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>Possibility to combine rows with the help of <emphasis> + <property>"rowspan"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <link linkend="sort">Sorting column values</link> + </para> + </listitem> + <listitem> + <para> + <link linkend="filter">Filtering column values</link> + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> The <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> component gets a list from data model and outputs + corresponding set of columns inside <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> on a page. It is possible to use <emphasis> + <property>"header"</property> + </emphasis> and <emphasis> + <property>"footer"</property> + </emphasis> facets with <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> component. </para> + <para> The <emphasis> + <property>"value"</property> + </emphasis> and <emphasis> + <property>"var"</property> + </emphasis> attributes are used to access the values of collection. </para> + <para>The simple example is placed below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap"&gt; + &lt;rich:columns value="#{capitalsBean.labels}" var="col" index="index"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="#{col.text}" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap[index]}" /&gt; + &lt;f:facet name="footer"&gt; + &lt;h:outputText value="#{col.text}" /&gt; + &lt;/f:facet&gt; + &lt;/rich:columns&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + <para> The <emphasis> + <property>"columns"</property> + </emphasis> attribute defines the count of columns. </para> + <para> The <emphasis> + <property>"rowspan"</property> + </emphasis> attribute defines the number of rows to be displayed. If + the value of this attribute is zero, all remaining rows in the table + are displayed on a page. </para> + <para> The <emphasis> + <property>"begin"</property> + </emphasis> attribute contains the first iteration item. Note, that + iteration begins from zero. </para> + <para> The <emphasis> + <property>"end"</property> + </emphasis> attribute contains the last iteration item. </para> + <para> With the help of the attributes described below you can customize the + output, i.e. define which columns and how many rows appear on a page. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap"&gt; + &lt;rich:columns value="#{capitalsBean.labels}" var="col" index="index" rowspan="0" columns="3" begin="1" end="2"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="#{col.text}" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap[index]}" /&gt; + &lt;/rich:columns&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + <para> In the example below, columns from first to second and all rows are shown + in the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> . </para> + <para>The result is:</para> + <figure> + <title> Generated <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> with columns from first to second and all rows </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/columns2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> The <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> component does not prevent to use <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> . In the following example one column renders in any way + and another columns could be picked from the model. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{rowBean.rows}" var="row"&gt; + &lt;rich:column&gt; + &lt;h:outputText value ="#{row.columnValue}"/&gt; + &lt;/rich:column&gt; + &lt;rich:columns value="#{colBean.columns}" var="col"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="#{col.header}"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{row.columnValue}"/&gt; + &lt;f:facet name="footer"&gt; + &lt;h:outputText value="#{col.footer}"/&gt; + &lt;/f:facet&gt; + &lt;/rich:columns&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + <para> + Now, you can use a few <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> together with <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis> within the one table: + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{dataTableScrollerBean.model}" var="model" width="500px" rows="5"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Cars Available"&gt;&lt;/h:outputText&gt; + &lt;/f:facet&gt; + &lt;rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="#{columns.header}" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{model[ind].model} " /&gt; + &lt;/rich:columns&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Price" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="Price" /&gt; + &lt;/rich:column&gt; + &lt;rich:columns value="#{dataTableScrollerBean.columns}" var="columns" index="ind"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="#{columns.header}" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{model[ind].mileage}$" /&gt; + &lt;/rich:columns&gt; +&lt;/rich:dataTable&gt; +... + </programlisting> + + <para> In order to group columns with text information into one row, use the <emphasis> + <property>"colspan"</property> + </emphasis> attribute, which is similar to an HTML one. In the + following example the third column contains 3 columns. In addition, + it's necessary to specify that the next column begins from + the first row with the help of the <code>breakBefore = + "true"</code> . </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{columns.data1}" var="data"&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{column.Item1}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{column.Item2}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{column.Item3}" /&gt; + &lt;/rich:column&gt; + &lt;rich:columns columns="3" colspan="3" breakBefore="true"&gt; + &lt;h:outputText value="#{data.str0}" /&gt; + &lt;/rich:columns&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + + <!--para>As a result the following structure is rendered:</para> + <figure> + <title>&lt;rich:column&gt; modified with colspan and breakbefore attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column3.png"/> + </imageobject> + </mediaobject> + </figure--> + + <para> The same way is used for <property>columns</property> grouping with the <emphasis> + <property>"rowspan"</property> + </emphasis> attribute that is similar to an HTML. The only thing to + add in the example is an instruction to move onto the next row for + each next after the second column. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{columns.data1}" var="data"&gt; + &lt;rich:columns columns="2" rowspan="3"&gt; + &lt;h:outputText value="#{data.str0}" /&gt; + &lt;/rich:columns&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{column.Item1}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="#{column.Item2}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column breakBefore="true"&gt; + &lt;h:outputText value="#{column.Item3}" /&gt; + &lt;/rich:column&gt; +&lt;/rich:dataTable&gt; +... +</programlisting> + + <!--para>As a result:</para> + <figure> + <title>&lt;rich:column&gt; generated with rowspan attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/column4.png"/> + </imageobject> + </mediaobject> + </figure--> + <note> + <title>Note:</title> + <para> The <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> tag is initialized during components tree + building process. This process precedes page rendering at + "Render Response" JSF phase. To be + rendered properly the component needs all it variables to be + initialized while the components tree is being building. A + <emphasis>javax.servlet.jsp.JspTagException</emphasis> + occurs if <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> uses variables passed from other components, if + these variables are initialized during rendering. Thus, when + <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> is asking for such variables they do not already + exist. Use <property>&lt;c:forEach&gt;</property> + JSP standard tag as workaround. Compare two examples below. </para> + <para> This code calls the exception: </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{bean.data}" var="var"&gt; + &lt;rich:columns value="#{var.columns}"&gt; + ... + &lt;/rich:columns&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + <para> This code works properly: </para> + <programlisting role="XML">... +&lt;c:forEach items="#{bean.data}" var="var"&gt; + &lt;rich:columns value="#{var.columns}"&gt; + ... + &lt;/rich:columns&gt; +&lt;/c:forEach&gt; +...</programlisting> + </note> + + + <note> + <title>Note:</title> + <para>Since 3.3.0GA <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> requires explicit definition of <emphasis> + <property>"id"</property> + </emphasis> for children components to ensure that decode process works properly. + The example of how you can define unique <emphasis> + <property>"id"</property> + </emphasis> for children component: </para> + <programlisting role="XML">... +&lt;rich:columns value="#{bean.columns}" var="col" index="ind" ... &gt; + &lt;h:inputText id="input#{ind}" value=""&gt; + &lt;a4j:support id="support#{ind}" event="onchange" reRender="someId" /&gt; + &lt;/h:inputText&gt; +&lt;/rich:columns&gt; +...</programlisting> + <para>Only if <emphasis> + <property>"id"</property> + </emphasis> defined as shown above Ajax after onchange event will be processed as expected. </para> + + </note> + + + + <para>Sorting and filtering for the <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> component works the same + as for <emphasis role="bold"> + <property>&lt;rich:column&gt;</property> + </emphasis>. See the <link linkend="sortAndFilter">"Sorting and Filtering"</link> section.</para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/columns.html">Table of + &lt;rich:columns&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Column</entry> + </row> + <!--row> + <entry>component-class</entry> + <entry></entry> + </row> + <row> + <entry>component-family</entry> + <entry></entry> + </row> + <row> + <entry>renderer-type</entry> + <entry></entry> + </row--> + <row> + <entry>tag-class</entry> + <entry> org.richfaces.taglib.ColumnsTagHandler + </entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Defines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Defines the footer content</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... On the component LiveDemo page </ulink> you can found some additional information + for <emphasis role="bold"> + <property>&lt;rich:columns&gt;</property> + </emphasis> component usage. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_comboBox.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_comboBox.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_comboBox.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,576 @@ +<section role="NotInToc" id="rich_comboBox"> + <title> + &lt; + rich:comboBox + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> is a component creates combobox element with built-in Ajax capability. + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/comboBox_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Client-side suggestions</para> + </listitem> + <listitem> + <para>Browser like selection</para> + </listitem> + <listitem> + <para>Smart user-defined positioning</para> + </listitem> + <!--listitem>Possible to set the popup appearance delay through <emphasis><property>&quot;showDelay&quot;</property></emphasis> + or <emphasis><property>&quot;minChars&quot;</property></emphasis> attributes + </listitem--> + <listitem> + <para>Seam entity converter support</para> + </listitem> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Disablement support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> + is a simplified suggestion box component, that provides input with client-side suggestions. + <!-- + component consists of an <property>input field</property>, the <property>button</property> and the <property>popup list</property> of suggestions + attached to input. If you want to see the popup list you can press the <property>button</property> or type the first letter of suggested word in the <property>input field</property>. + --> + + The component could be in two states: + + <!-- NEED DESCRIPTION "HOW TO MANAGE THIS"--> + + <itemizedlist> + <listitem> + <para>Default - only input and button is shown</para> + </listitem> + <listitem> + <para>Input, button and a popup list of suggestions attached to input is shown</para> + </listitem> + </itemizedlist> + </para> + <para> + There are two ways to get values for the popup list of suggestions: + </para> + <itemizedlist> + <listitem> + <para>Using the <emphasis> + <property>"suggestionValues"</property> + </emphasis> attribute, that defines the suggestion collection</para> + <programlisting role="XML">... +&lt;rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" /&gt; +...</programlisting> + </listitem> + <listitem> + <para> + Using the <emphasis role="bold"> + <property>&lt;f:selectItem /&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;f:selectItems /&gt;</property> + </emphasis> JSF components. + </para> + + <programlisting role="XML">... +&lt;rich:comboBox value="#{bean.state}" valueChangeListener="#{bean.selectionChanged}"&gt; + &lt;f:selectItems value="#{bean.selectItems}"/&gt; + &lt;f:selectItem itemValue="Oregon"/&gt; + &lt;f:selectItem itemValue="Pennsylvania"/&gt; + &lt;f:selectItem itemValue="Rhode Island"/&gt; + &lt;f:selectItem itemValue="South Carolina"/&gt; +&lt;/rich:comboBox&gt; +...</programlisting> + <note> + <title>Note:</title> + <para> + These JSF components consider only the <emphasis> + <property>"value"</property> + </emphasis> attribute for this component. + </para> + </note> + </listitem> + </itemizedlist> + <para> Popup list content loads at page render time. No additional requests could be performed on the popup calling. + </para> + <para> + The <emphasis> + <property> "value"</property> + </emphasis> attribute stores value from input after submit. + </para> + <para> + The <emphasis> + <property> "directInputSuggestions"</property> + </emphasis> attribute defines, how the first value from the suggested one appears in an input field. + If it's "true" the first value appears with the suggested part highlighted. + </para> + + <programlisting role="XML">... +&lt;rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" directInputSuggestions="true" /&gt; +...</programlisting> + <para>This is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> with <emphasis> + <property> "directInputSuggestions"</property> + </emphasis> attribute.</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/comboBox3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + The <emphasis> + <property> "selectFirstOnUpdate"</property> + </emphasis> attribute defines if the first value from suggested is selected in a popup list. + If it's "false" nothing is selected in the list before a user hovers some item with the mouse. + </para> + + <programlisting role="XML">... +&lt;rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" selectFirstOnUpdate="false" /&gt; +...</programlisting> + <para>This is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> with <emphasis> + <property> "selectFirstOnUpdate"</property> + </emphasis> attribute.</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/comboBox4.png"/> + </imageobject> + </mediaobject> + </figure> + + <!--para> + The <emphasis><property> &quot;filterNewValues&quot;</property></emphasis> attribute defines the appearance of values in the list. + If it&apos;s &quot;true&quot; only the part of a list, which satisfies the prefix entered appears in a popup list. + If it&apos;s &quot;false&quot; all values appear in the popup list and the list is scrolled to the first value that satisfies the prefix. + </para--> + <para> + The <emphasis> + <property>"defaultLabel"</property> + </emphasis> attribute defines the default label of the input element. Simple example is placed below. + </para> + + <programlisting role="XML">... +&lt;rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." /&gt; +...</programlisting> + <para>This is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> with <emphasis> + <property> "defaultLabel"</property> + </emphasis> attribute.</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/comboBox5.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + With the help of the <emphasis> + <property>"disabled"</property> + </emphasis> attribute you can disable the whole + <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> component. See the following example. + </para> + + <programlisting role="XML">... +&lt;rich:comboBox value="#{bean.state}" suggestionValues="#{bean.suggestions}" defaultLabel="Select a city..." disabled="true" /&gt; +...</programlisting> + <para>This is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> with <emphasis> + <property> "disabled"</property> + </emphasis> attribute.</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/comboBox6.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + The <emphasis> + <property>"enableManualInput"</property> + </emphasis> attribute enables/disables input field, so when <code>enableManualInput = "false"</code>, + user can only pick the value manually and has no possibility to type in the value (default value is "false"). + </para> + <!--para> + The <emphasis role="bold"><property>&lt;rich:comboBox&gt;</property></emphasis> component provides the possibility to use + specific event attribute <emphasis><property> &quot;onlistcall&quot;</property></emphasis> which is fired before the list opening. + </para--> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> component provides to use + specific event attributes: + <itemizedlist> + <listitem> + <para> + <emphasis> + <property> "onlistcall"</property> + </emphasis>which is fired before the list opening and gives you a possibility to cancel list popup/update + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "onselect"</property> + </emphasis>which gives you a possibility to send Ajax request when item is selected + </para> + </listitem> + </itemizedlist> + </para> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:comboBox&gt;</property> + </emphasis> component allows to use sizes attributes: + <itemizedlist> + <listitem> + <para> + <emphasis> + <property> "listWidth"</property> + </emphasis> and <emphasis> + <property> "listHeight"</property> + </emphasis> attributes + specify popup list sizes with values in pixels + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "width"</property> + </emphasis> attribute customizes the size of input element with values in pixels. + </para> + </listitem> + </itemizedlist> + </para> + <!-- <para>It&apos;s possible to handle events for comboBox from JavaScript code. A simplest example of usage JavaScript API is placed below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:comboBox defaultLabel="Enter some value" id="comboBoxID"> + ... + </rich:comboBox> +... +<h:commandButton value="Enable" onclick="#{rich:component('comboBoxID')}.enable(event)"/> +...]]></programlisting> --> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/comboBox.html">Table of + &lt;rich:comboBox&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ComboBox</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlComboBox</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ComboBox</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.ComboBoxRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ComboBoxTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>showList()</entry> + <entry>Shows the popup list</entry> + </row> + <row> + <entry>hideList()</entry> + <entry>Hides the popup list</entry> + </row> + <row> + <entry> enable()</entry> + <entry> Enables the control for input</entry> + </row> + <row> + <entry> disable()</entry> + <entry>Disables the control for input</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="comboBoxC"> + <title>Classes names that define popup list representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-combobox-shell</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a list</entry> + </row> + <row> + <entry>rich-combobox-list-position</entry> + <entry>Defines position of a list</entry> + </row> + <row> + <entry>rich-combobox-list-decoration</entry> + <entry>Defines styles for a list</entry> + </row> + <row> + <entry>rich-combobox-list-scroll</entry> + <entry>Defines styles for a list scrolling</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define font representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-combobox-font</entry> + <entry>Defines styles for a font</entry> + </row> + <row> + <entry>rich-combobox-font-inactive</entry> + <entry>Defines styles for an inactive font</entry> + </row> + <row> + <entry>rich-combobox-font-disabled</entry> + <entry>Defines styles for a disabled font</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define input field representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-combobox-input</entry> + <entry>Defines styles for an input field</entry> + </row> + <row> + <entry>rich-combobox-input-disabled</entry> + <entry>Defines styles for an input field in disabled state</entry> + </row> + <row> + <entry>rich-combobox-input-inactive</entry> + <entry>Defines styles for an inactive input field</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define item representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-combobox-item</entry> + <entry>Defines styles for an item</entry> + </row> + <row> + <entry>rich-combobox-item-selected</entry> + <entry>Defines styles for a selected item</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define button representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-combobox-button</entry> + <entry>Defines styles for a button</entry> + </row> + <row> + <entry>rich-combobox-button-inactive</entry> + <entry>Defines styles for an inactive button</entry> + </row> + <row> + <entry>rich-combobox-button-disabled</entry> + <entry>Defines styles for a button in disabled state</entry> + </row> + <row> + <entry>rich-combobox-button-hovered</entry> + <entry>Defines styles for a hovered button</entry> + </row> + <row> + <entry>rich-combobox-button-background</entry> + <entry>Defines styles for a button background</entry> + </row> + <row> + <entry>rich-combobox-button-background-disabled</entry> + <entry>Defines styles for a disabled button background</entry> + </row> + <row> + <entry>rich-combobox-button-background-inactive</entry> + <entry>Defines styles for an inactive button background</entry> + </row> + <row> + <entry>rich-combobox-button-pressed-background</entry> + <entry>Defines styles for a pressed button background</entry> + </row> + <row> + <entry>rich-combobox-button-icon</entry> + <entry>Defines styles for a button icon</entry> + </row> + <row> + <entry>rich-combobox-button-icon-inactive</entry> + <entry>Defines styles for an inactive button icon</entry> + </row> + <row> + <entry>rich-combobox-button-icon-disabled</entry> + <entry>Defines styles for a disabled button icon</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define shadow representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-combobox-shadow</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a shadow</entry> + </row> + <row> + <entry>rich-combobox-shadow-tl</entry> + <entry>Defines styles for a top-left element of a shadow</entry> + </row> + <row> + <entry>rich-combobox-shadow-tr</entry> + <entry>Defines styles for a top-right element of a shadow</entry> + </row> + <row> + <entry>rich-combobox-shadow-bl</entry> + <entry>Defines styles for a bottom-left element of a shadow</entry> + </row> + <row> + <entry>rich-combobox-shadow-br</entry> + <entry>Defines styles for a bottom-right element of a shadow</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/comboBox.js... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_componentControl.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_componentControl.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_componentControl.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,386 @@ +<section role="NotInToc" id="rich_componentControl"> + <title> + &lt; + rich:componentControl + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> allows to call JavaScript API functions on components after defined events.</para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para> + Management of components JavaScript API + </para> + </listitem> + <listitem> + <para> + Customizable initialization variants + </para> + </listitem> + <listitem> + <para> + Customizable activation events + </para> + </listitem> + <listitem> + <para> + Possibility to pass parameters to the target component + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> is a command component, that allows to call JavaScript API function on some defined event. + Look at the example: + </para> + <programlisting role="XML">... +&lt;rich:componentControl attachTo="doExpandCalendarID" event="onclick" operation="Expand" for="ccCalendarID" /&gt; +... +</programlisting> + <para> + In other words it means "clicking on the component with ID <code>doExpandCalendarID</code> expands the component with ID <code>ccCalendarID</code>". + It can be said, that <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> makes interact two components with the help of JavaScript API function. + </para> + <para> + The ID of the component the event that invokes JavaScript API function is applied, is defined with <emphasis> + <property>"attachTo"</property> + </emphasis> attribute (see the exapmle above). + If <emphasis> + <property>"attachTo"</property> + </emphasis> attribute is not specified, the <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> is supposed to be attached to it's parent. + </para> + + <programlisting role="XML">&lt;h:commandButton value="Show Modal Panel"&gt; + &lt;!--componentControl is attached to the commandButton--&gt; + &lt;rich:componentControl for="ccModalPanelID" event="onclick" operation="show"/&gt; +&lt;/h:commandButton&gt;</programlisting> + <para> + It is possible to invoke the <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> handler operation as usual JavaScript function. + For this purpose it is necessary to specify the name of the JS function with the help of the <emphasis> + <property>"name"</property> + </emphasis> attribute: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="text/javascript">function func (event) { +}</programlisting> + <programlisting role="XML">&lt;rich:componentControl name="func" event="onRowClick" for="menu" operation="show" /&gt;</programlisting> + + <para> + An important <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> feature, is that it allows transferring parameters, with the help of special attribute <emphasis> + <property>"params"</property> + </emphasis>: + </para> + + <programlisting role="XML">... +&lt;rich:componentControl name="func" event="onRowClick" for="menu" operation="show" params="#{car.model}"/&gt; +...</programlisting> + <para> + The alternative way for parameters transferring uses <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> attribute. + As the code above, the following code will represent the same functionality: + </para> + + <programlisting role="XML">... +&lt;rich:componentControl event="onRowClick" for="menu" operation="show"&gt; + &lt;f:param value="#{car.model}" name="model"/&gt; +&lt;/rich:componentControl&gt; +...</programlisting> + + + + + + + + + + + <!-- In order to use the <emphasis role="bold"><property>&lt;rich:componentControl&gt;</property></emphasis> with another components you need to take the following steps: + + + </para> + <itemizedlist> + <listitem><para>Define a name of a function that is generated (definition is similar to a + definition of <emphasis role="bold"> + <property>&lt;a4j:jsFunction&gt;</property> + </emphasis>). An &quot;<code>event</code>&quot; argument is passed to this function.</para></listitem> + </itemizedlist> + <para>An example is placed below:</para> + <programlisting role="XML"><![CDATA[... +<rich:componentControl name="ffunction" for="comp_ID" operation="show"/> +... +]]></programlisting> + <para>According to this code a function with name <code>ffunction</code> + is generated. It is used in JavaScript code to trigger an operation on the target component + with defined <code>id=&quot;comp_ID&quot;</code>.</para> + <para>The generated function is shown below:</para> + <programlisting role="JAVA"><![CDATA[function ffunction (event) { +} +]]></programlisting> + <itemizedlist> + <listitem><para>Attach to a parent component (usage is similar to <emphasis role="bold"> + <property>&lt;a4j:support&gt;</property> + </emphasis> component).</para></listitem> + </itemizedlist> + <para>An example is placed below:</para> + + <programlisting role="XML"><![CDATA[... +<rich:modalPanel id="ccModalPanelID" onshow="alert(event.parameters.show)" onhide="alert(event.parameters.hide)"> + <h:outputText value="#{bean.text}"/> +</rich:modalPanel> +<h:commandButton value="Show Modal Panel"> + <rich:componentControl for="ccModalPanelID" event="onclick" disableDefault="true" operation="show"> + <f:param name="show" value="componentControl work(show)"/> + <rich:componentControl/> +</h:commandButton> +... +]]></programlisting> + <para>In the example the <emphasis> + <property>&quot;for&quot;</property> + </emphasis> attribute contains value of an <property>id</property> of <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component. The <emphasis> + <property>&quot;operation&quot;</property> + </emphasis> attribute contains a name of JavaScript API function. An <emphasis> + <property>&quot;event&quot;</property> + </emphasis> attribute is used to trigger an operation defined with the <emphasis> + <property>&quot;operation&quot;</property> + </emphasis> attribute. A set of parameters is defined with <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis>. As an alternative, the <emphasis> + <property>&quot;params&quot;</property> + </emphasis> attribute can be used. Thus, one of main features is that <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> allows to transfer parameters. The <emphasis> + <property>&quot;disableDefault&quot;</property> + </emphasis> attribute with &quot;true&quot; value is used instead + of <code>onclick="return false;"</code> attribute for <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis> to avoid a problem with form submit and <property>modalPanel</property> showing.</para> + <itemizedlist> + <listitem><para>Attach with <emphasis> + <property>&quot;attachTo&quot;</property> + </emphasis> attribute.</para></listitem> + </itemizedlist> + <para>An example is placed below:</para> + + <programlisting role="XML"><![CDATA[... +<rich:calendar popup="#{componentControl.calendarPopup}" id="ccCalendarID" /> + ... +<f:verbatim> + <a href="#" id="doExpandCalendarID">Calendar (nextYear)</a> +</f:verbatim> +<rich:componentControl attachTo="doExpandCalendarID" for="ccCalendarID" event="onclick" disableDefault="true" operation="nextYear" /> +... +]]></programlisting> + <para>In the example the <emphasis> + <property>&quot;attachTo&quot;</property> + </emphasis> attribute contais a value of an <property>id</property> of <emphasis role="bold"><property>&lt;a&gt;</property></emphasis> element. + The <emphasis> + <property>&quot;for&quot;</property> + </emphasis> attribute contains value of an <property>id</property> of <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> component. The <emphasis> + <property>&quot;operation&quot;</property> + </emphasis> attribute contains a name of JavaScript API function. Thus, clicking on the link + represents the next year on the calendar. + </para> --> + + + + + <para> + With the help of the <emphasis> + <property>"attachTiming"</property> + </emphasis> attribute you can define the page loading phase when + <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> is attached to source component. Possible values are: + </para> + <itemizedlist> + <listitem> + <para> + <code>immediate</code> — attached during execution of <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> script + </para> + </listitem> + <listitem> + <para> + <code>onavailable</code> — attached after the target component is initialized + </para> + </listitem> + <listitem> + <para> + <code>onload</code> — attached after the page is loaded + </para> + </listitem> + </itemizedlist> + <para> + <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> interacts with such components as: + +<emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;rich:modalPanel &gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;rich:calendar&gt;</property> + </emphasis> + + </para> + <para> + In order to use <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> with another component you should place the id of this component into <emphasis> + <property>"for"</property> + </emphasis> attribute field. + All operations with defined component you can find in the JavaScript API section of defined component. + </para> + + <programlisting role="XML">&lt;h:form&gt; + &lt;rich:toolTip id="toolTip" mode="ajax" value="and then just touch me." direction="top-right" /&gt; +&lt;/h:form&gt; +&lt;h:commandButton id="ButtonID" value="Push me"&gt; + &lt;rich:componentControl attachTo="ButtonID" event="onmouseover" operation="show" for="toolTip" /&gt; +&lt;/h:commandButton&gt;</programlisting> + <para>This is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> is shown with the help of <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis>. + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/componentControl_init.png"/> + </imageobject> + </mediaobject> + </figure> + + <!--para>One more example of <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> usage is placed below:</para> + <programlisting role="XML"><![CDATA[... + <rich:panelMenu id="ccContextMenuPanelMenuID"> + <h:outputText value="click text" /> + </rich:panelMenu> + <rich:contextMenu id="ccContextMenuID" submitMode="ajax"> + <rich:menuItem icon="/pics/header.png" value="tab1" reRender="cmInfoID"> + <f:param name="cmdParam" value="menu" /> + </rich:menuItem> + <rich:menuSeparator /> + <rich:menuItem icon="/pics/info.png" value="a" reRender="cmInfoID"> + <f:param name="cmdParam" value="a" /> + </rich:menuItem> + <rich:menuItem icon="/pics/info.png" value=" b" reRender="cmInfoID"> + <f:param name="cmdParam" value="b" /> + </rich:menuItem> + <rich:menuItem icon="/pics/info.png" value="c" reRender="cmInfoID"> + <f:param name="cmdParam" value="c" /> + </rich:menuItem> + </rich:contextMenu> + <rich:componentControl event="oncontextmenu" attachTo="ccContextMenuPanelMenuID" for="ccContextMenuID" disableDefault="true" operation="Show" /> +... +]]></programlisting--> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/componentControl.html">Table of + &lt;rich:componentControl&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.ComponentControl</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlComponentControl</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.ComponentControl</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.ComponentControlRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.ComponentControlTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/componentCo... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + <para> + Information on JSF <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> component You can find at <ulink url="http://java.sun.com/javaee/javaserverfaces/1.1_01/docs/tlddocs/... TLD reference</ulink> in Java Server Faces technology section at Sun portal. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_contextMenu.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_contextMenu.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_contextMenu.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,561 @@ +<section role="NotInToc" id="rich_contextMenu"> + <title> + &lt; + rich:contextMenu + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component is used for creation of multilevelled context menus that are activated after defined events like <emphasis> + <property>"onmouseover"</property> + </emphasis>, <emphasis> + <property>"onclick"</property> + </emphasis> etc. + The component could be applied to any element on the page. + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/contextMenu_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"oncontextmenu"</property> + </emphasis> event support</para> + </listitem> + <listitem> + <para>Disablement support</para> + </listitem> + <listitem> + <para>Pop-up appearance event customization</para> + </listitem> + <listitem> + <para>Usage of shared instance of a menu on a page</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> is a support-like component. Context menu itself is an invisible panel that + appears after a particular client-side event (<emphasis> + <property>"onmouseover"</property> + </emphasis>, <emphasis> + <property>"onclick"</property> + </emphasis>, etc.) occurred on a + parent component. The event is defined with an <emphasis> + <property>"event"</property> + </emphasis> attribute. The component uses <emphasis> + <property>"oncontextmenu"</property> + </emphasis> event by default to call a context menu by clicking on the right mouse + button.</para> + + <para> + <property> + <link linkend="menuGroup">&lt;rich:menuGroup&gt;</link> + </property>, <property> + <link linkend="menuItem">&lt;rich:menuItem&gt;</link> + </property> and <property> + <link linkend="menuSeparator">&lt;rich:menuSeparator&gt;</link> + </property> components + can be used as nested elements for <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis>in the same way as for <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis>. + </para> + <para> + By default, the <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> disables right mouse click on a page in the context menu area only. + But if you want to disable browser's context menu completely you should set the <emphasis> + <property>"disableDefaultMenu"</property> + </emphasis> attribute value to "true". + </para> + <para> + If <emphasis> + <property>"attached"</property> + </emphasis> value is "true" (default value), component is attached to the parent component or to the component, + which <emphasis> + <property>"id"</property> + </emphasis> is specified in the <emphasis> + <property>"attachTo"</property> + </emphasis> attribute: + </para> + + <programlisting role="XML">&lt;rich:contextMenu event="oncontextmenu" attachTo="pic1" submitMode="none"&gt; + &lt;rich:menuItem value="Zoom In" onclick="enlarge();" id="zin"/&gt; + &lt;rich:menuItem value="Zoom Out" onclick="decrease();" id="zout"/&gt; +&lt;/rich:contextMenu&gt; +&lt;h:panelGrid columns="1" columnClasses="cent"&gt; + &lt;h:panelGroup id="picture"&gt; + &lt;h:graphicImage value="/richfaces/jQuery/images/pic1.png" id="pic"/&gt; + &lt;/h:panelGroup&gt; +&lt;/h:panelGrid&gt; +&lt;h:panelGrid columns="1" columnClasses="cent"&gt; + &lt;h:panelGroup id="picture1"&gt; + &lt;h:graphicImage value="/richfaces/jQuery/images/pic2.png" id="pic1"/&gt; + &lt;/h:panelGroup&gt; +&lt;/h:panelGrid&gt;</programlisting> + <para>The <code>"enlarge()"</code> and + <code>"decrease()"</code> functions definition is placed + below.</para> + <programlisting role="JAVA">&lt;script type="text/javascript"&gt; + function enlarge(){ + document.getElementById('pic').width=document.getElementById('pic').width*1.1; + document.getElementById('pic').height=document.getElementById('pic').height*1.1; + } + function decrease(){ + document.getElementById('pic').width=document.getElementById('pic').width*0.9; + document.getElementById('pic').height=document.getElementById('pic').height*0.9; + } +&lt;/script&gt;</programlisting> + + <para>In the example a picture zooming possibility with <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component usage was shown. The picture is placed on the <emphasis role="bold"> + <property>&lt;h:panelGroup&gt;</property> + </emphasis> component. The <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component is not nested to <emphasis role="bold"> + <property>&lt;h:panelGroup&gt;</property> + </emphasis> and has a value of the<emphasis> + <property>"attachTo"</property> + </emphasis> attribute defined as <code>"pic1"</code>. Thus, + the context menu is attached to the component, which + <emphasis> + <property>"id"</property> + </emphasis> is <code>"pic1"</code>. + The context menu has two items to zoom in (zoom out) a picture by <emphasis> + <property>"onclick"</property> + </emphasis> event. + For earch item corresponding JavaScript function is defined to provide necessary action + as a result of the clicking on it. For the menu is defined an <emphasis> + <property>"oncontextmenu"</property> + </emphasis> event to call the context menu on a right click mouse event.</para> + + <para>In the example the context menu is defined for the parent <emphasis role="bold"> + <property>&lt;h:panelGroup&gt;</property> + </emphasis> component with a value of <emphasis> + <property>"id"</property> + </emphasis> attribute equal to "<code>picture</code>" You + should be careful with such definition, because a client context menu is looked for a + DOM element with a client Id of a parent component on a server. If a parent component + doesn't encode an Id on a client, it can't be found by the <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> and it's attached to its closest parent in a DOM tree.</para> + + <para> If the <emphasis> + <property>"attached"</property> + </emphasis> attribute has "false" value, + component activates via JavaScript API with assistance of <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis>. An example is placed below.</para> + <para id="ex"> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;h:form id="form"&gt; + &lt;rich:contextMenu attached="false" id="menu" submitMode="ajax"&gt; + &lt;rich:menuItem ajaxSingle="true"&gt; + &lt;b&gt;{car} {model}&lt;/b&gt; details + &lt;a4j:actionparam name="det" assignTo="#{ddmenu.current}" value="{car} {model} details"/&gt; + &lt;/rich:menuItem&gt; + &lt;rich:menuGroup value="Actions"&gt; + &lt;rich:menuItem ajaxSingle="true"&gt; + Put &lt;b&gt;{car} {model}&lt;/b&gt; To Basket + &lt;a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Put {car} {model} To Basket"/&gt; + &lt;/rich:menuItem&gt; + &lt;rich:menuItem value="Read Comments" ajaxSingle="true"&gt; + &lt;a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Read Comments"/&gt; + &lt;/rich:menuItem&gt; + &lt;rich:menuItem ajaxSingle="true"&gt; + Go to &lt;b&gt;{car}&lt;/b&gt; site + &lt;a4j:actionparam name="bask" assignTo="#{ddmenu.current}" value="Go to {car} site"/&gt; + &lt;/rich:menuItem&gt; + &lt;/rich:menuGroup&gt; + &lt;/rich:contextMenu&gt; + + &lt;h:panelGrid columns="2"&gt; + &lt;rich:dataTable value="#{dataTableScrollerBean.tenRandomCars}" var="car" id="table" onRowMouseOver="this.style.backgroundColor='#F8F8F8'" onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" rowClasses="cur"&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;Make&lt;/f:facet&gt; + &lt;h:outputText value="#{car.make}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;Model&lt;/f:facet&gt; + &lt;h:outputText value="#{car.model}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;Price&lt;/f:facet&gt; + &lt;h:outputText value="#{car.price}" /&gt; + &lt;/rich:column&gt; + &lt;rich:componentControl event="onRowClick" for="menu" operation="show"&gt; + &lt;f:param value="#{car.model}" name="model"/&gt; + &lt;f:param value="#{car.make}" name="car"/&gt; + &lt;/rich:componentControl&gt; + &lt;/rich:dataTable&gt; + &lt;a4j:outputPanel ajaxRendered="true"&gt; + &lt;rich:panel&gt; + &lt;f:facet name="header"&gt;Last Menu Action&lt;/f:facet&gt; + &lt;h:outputText value="#{ddmenu.current}"&gt;&lt;/h:outputText&gt; + &lt;/rich:panel&gt; + &lt;/a4j:outputPanel&gt; + &lt;/h:panelGrid&gt; +&lt;/h:form&gt;</programlisting> + <para>This is a result:</para> + <figure> + <title>The <emphasis> + <property>"attached"</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/contextMenu2.png" scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the context menu is activated (by clicking on the left mouse button) on + the table via JavaScript API with assistance of <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis>. The attribute <emphasis> + <property>"for"</property> + </emphasis> contains a value of the <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> Id. For menu appearance Java Script API function + <code>"show()"</code> is used. It is defined with <emphasis> + <property>"operation"</property> + </emphasis> attribute for the <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis> component. Context menu is recreated after the every call on a client and + new {car} and {model} values are inserted in it. In the example for a menu customization + macrosubstitutions were used.</para> + + <para>The <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component can be defined once on a page and can be used as shared for + different components (this is the main difference from the <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component). It's necessary to define it once on a page (as it was + shown in the example <link linkend="ex">above</link>) and activate it on required + components via JavaScript API with assistance of <emphasis role="bold"> + <property>&lt;rich:componentControl&gt;</property> + </emphasis>.</para> + + <para>The <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> + <emphasis> + <property>"submitMode"</property> + </emphasis> attribute can be set to three possible parameters:</para> + + <itemizedlist> + <listitem> + <para> + <code>Server</code> — default value, uses regular form submition request;</para> + </listitem> + </itemizedlist> + + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> — Ajax submission is used for switching;</para> + </listitem> + </itemizedlist> + + <itemizedlist> + <listitem> + <para> + <code>None</code> — neither <code>Server</code> nor <code>Ajax</code> is used.</para> + </listitem> + </itemizedlist> + + <para>The <emphasis> + <property>"action"</property> + </emphasis> and <emphasis> + <property>"actionListener"</property> + </emphasis> item's attributes are ignored. Menu items don't fire any submits + themselves. The behavior is fully defined by the components nested inside items.</para> + + <note> + <title>Notes:</title> + <itemizedlist> + <listitem> + <para> + When nesting <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> into JSF <emphasis role="bold"> + <property>&lt;h:outputText&gt;</property> + </emphasis>, + specify an <code>id</code> for <emphasis role="bold"> + <property>&lt;h:outputText&gt;</property> + </emphasis>, otherwise, do not nest the <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> to make it work properly. + </para> + </listitem> + </itemizedlist> + <itemizedlist> + <listitem> + <para> + As the <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> component doesn't provide its own form, + use it between <emphasis role="bold"> + <property>&lt;h:form&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;/h:form&gt;</property> + </emphasis> tags. + </para> + </listitem> + </itemizedlist> + </note> + + + <!-- <para>It&apos;s possible to handle events for contextMenu from JavaScript code. A simplest example of usage JavaScript API is placed below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:contextMenu ... id="cmID"> + ... + </rich:contextMenu> + ... +<h:commandButton value="Show" onclick="#{rich:component('cmID')}.show(event)"/> +...]]></programlisting> --> + + <!-- Will be done for latest version --> + <!--para> It&apos;s possible to define the direction for list appear in the <emphasis> + <property>&quot;direction&quot;</property> + </emphasis>attribute. If the accordance of the popup corner to corner of the label isn&apos;t + set <emphasis> + <property>&quot;direction&quot;</property> + </emphasis> attribute must set next accordances: </para> + <itemizedlist> + <listitem> + <para>top-left - a menu drops to the top and left</para> + </listitem> + + <listitem> + <para>top-right - a menu drops to the top and right</para> + </listitem> + + <listitem> + <para>bottom-left - a menu drops to the bottom and left</para> + </listitem> + + <listitem> + <para>bottom-right - a menu drops to the bottom and right</para> + </listitem> + + <listitem> + <para>auto(default) - smart positioning activation</para> + </listitem> + </itemizedlist> + <para><emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis> provides <emphasis> + <property>&quot;jointPoint&quot;</property> + </emphasis> attribute to set the point on the label element to connect popup. Possible + values are:</para> + + <itemizedlist> + <listitem> + <para>tr - a menu is attached to the top-right point of the button element</para> + </listitem> + + <listitem> + <para>tl - a menu is attached to the top-left point of the button element</para> + </listitem> + + <listitem> + <para>br - a menu is attached to the bottom-right point of the button element</para> + </listitem> + + <listitem> + <para>bl - a menu is attached to the bottom-left point of the button element</para> + </listitem> + + <listitem> + <para>auto(default) - smart positioning activation</para> + </listitem> + </itemizedlist> + + <para>In order to set the offset for the menu popup relatively to label, you can use <emphasis> + <property>&quot;horizontalOffset&quot;</property> + </emphasis> and <emphasis> + <property>&quot;verticalOffset&quot;</property> + </emphasis> attributes. Values can be negative.</para--> + + <!-- For menuItem, not for contexMenu --> + <!--para><property>menuItem</property> provides <emphasis> + <property>&quot;submitMode&quot;</property> + </emphasis> attribute to define the way of submission. Possible values : <itemizedlist> + <listitem> + <para>Server (default)</para> + </listitem> + </itemizedlist> + <para>The standard form submission is performed and the page is completely refreshed.</para> + <itemizedlist> + <listitem> + <para>Ajax</para> + </listitem> + </itemizedlist> + <para>An Ajax form submission is performed, and specified elements in the <emphasis> + <property>&quot;reRender&quot;</property> + </emphasis> attribute are rerendered.</para> + <itemizedlist> + <listitem> + <para>None</para> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property>&quot;action&quot;</property> + </emphasis> and <emphasis> + <property>&quot;actionListener&quot;</property> + </emphasis> item&apos;s attributes are ignored. Menu items don't fire any submits + themselves. The behavior is fully defined by the components nested inside items.</para> + <template + <para>emphasis role="bold"> + <property>&lt;contextMenu&gt;</property> + </emphasis> could not be generated for every component where it&apos;s defined. Templating could + be used instead. So only representation data could be loaded from server. And markup + could be evaluated on client side. So it&apos;s should accept macrosubstitutions like + {value} </para> + + </para--> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/contextMenu.html">Table of + &lt;rich:contextMenu&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ContextMenu</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.ContextMenu</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ContextMenu</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DropDownMenuRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ContextMenuTagHandler</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="3"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + <entry>Apply to</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>hide()</entry> + <entry>Hides component or group</entry> + <entry>Component, group</entry> + </row> + <row> + <entry>show(event, context)</entry> + <entry>Shows component or group</entry> + <entry>Component, group</entry> + </row> + <!--row> + <entry>Enable()</entry> + <entry>Enable component, item, group</entry> + <entry>Component, Item, Group</entry> + </row> + <row> + <entry>Disable()</entry> + <entry>Disable component, item or group</entry> + <entry>Component, Item, Group</entry> + </row--> + </tbody> + </tgroup> + </table> + <table id="cMC"> + <title>Classes names that define the contextMenu element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-list-border</entry> + <entry>Defines styles for borders</entry> + </row> + <row> + <entry>rich-menu-list-bg</entry> + <entry>Defines styles for a general background list</entry> + </row> + <row> + <entry>rich-menu-list-strut</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element for a strut + of a popup list</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/contextMenu... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataDefinitionList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataDefinitionList.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataDefinitionList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,201 @@ +<section role="NotInToc" id="rich_dataDefinitionList"> + <title> + &lt; + rich:dataDefinitionList + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component to render definition lists that allows choosing data from a model + and obtains built-in support of Ajax updates.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataDefinitionList_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Completely skinned table rows and child elements</para> + </listitem> + <listitem> + <para>Possibility to update a limited set of rows with Ajax</para> + </listitem> + <listitem> + <para>Possibility to receive values dynamically from a model</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component allows to generate a definition list from a model.</para> + <para>The component has the <emphasis> + <property>"term"</property> + </emphasis> facet, which corresponds to the <emphasis> + <property>"type"</property> + </emphasis> parameter for the <emphasis role="bold"> + <property>&lt;dt&gt;</property> + </emphasis> HTML element.</para> + <para>Here is an example:</para> + + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:dataDefinitionList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" first="4" title="Cars"&gt; + &lt;f:facet name="term"&gt; + &lt;h:outputText value="#{car.make} #{car.model}"&gt;&lt;/h:outputText&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="Price:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.price}" /&gt;&lt;br/&gt; + &lt;h:outputText value="Mileage:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.mileage}" /&gt;&lt;br/&gt; + &lt;/rich:dataDefinitionList&gt; +&lt;/h:form&gt; +... +</programlisting> + + <para>This is a result:</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component with <emphasis> + <property>"term"</property> + </emphasis> facet</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataDefinitionList2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the <emphasis> + <property>"rows"</property> + </emphasis> attribute limits a number of output elements of the list.</para> + + <para>The <emphasis> + <property>"first"</property> + </emphasis> attribute defines the first element for output. <emphasis> + <property>"title"</property> + </emphasis> is used for a popup title.</para> + + <para>The <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component could be partially updated with Ajax. The <emphasis> + <property>"ajaxKeys"</property> + </emphasis> attribute allows to define row keys that are updated after an Ajax request, you need to pass an array with key (lines) of the list that you want to be updated after the Ajax request is executed.</para> + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataDefinitionList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" + binding="#{listBean.dataList}" id="list"&gt; + ... +&lt;/rich:dataDefinitionList&gt; +... +&lt;a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/&gt; +... +</programlisting> + + <para> In the example the <emphasis> + <property>"reRender"</property> + </emphasis> attribute contains value of <emphasis> + <property>"id"</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dataDefinitionList.html">Table of + &lt;rich:dataDefinitionList&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataDefinitionList</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataDefinitionList</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DataDefinitionList</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataDefinitionListRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataDefinitionListTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_dDL"> + <title>Classes names that define a list appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-deflist</entry> + <entry>Defines styles for an html &lt;dl&gt; element</entry> + </row> + <row> + <entry>rich-definition</entry> + <entry>Defines styles for an html &lt;dd&gt; element</entry> + </row> + <row> + <entry>rich-definition-term</entry> + <entry>Defines styles for an html &lt;dt&gt; element</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataDefinitionList&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataFilterSlider.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataFilterSlider.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataFilterSlider.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,168 @@ +<section role="NotInToc" id="rich_dataFilterSlider"> + <title> + &lt; + rich:dataFilterSlider + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A slider-based action component is used for filtering table data.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataFilterSlider&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataFilterSlider_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Filter any UIData based component in dependency on its child's values</para> + </listitem> + <listitem> + <para>Fully skinnable control and input elements</para> + </listitem> + <listitem> + <para>Optional value text field with an attribute-managed position</para> + </listitem> + <listitem> + <para>Optional disablement of the component on a page</para> + </listitem> + <listitem> + <para>Optional toolTip to display the current value while a handle is dragged</para> + </listitem> + <listitem> + <para>Dragged state is stable after the mouse moves</para> + </listitem> + <listitem> + <para>Optional manual input possible if a text input field is present</para> + </listitem> + <listitem> + <para>Validation of manual input</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>dataFilterSlider</property> + </emphasis> component is bound to some UIData component using a <emphasis> + <property>"for"</property> + </emphasis> attribute and filters data in a table. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataFilterSlider sliderListener="#{mybean.doSlide}" + startRange="0" + endRange="50000" + increment="10000" + handleValue="1" + for="carIndex" + forValRef="inventoryList.carInventory" + filterBy="getMileage" /&gt; +... +&lt;h:dataTable id="carIndex"&gt; + ... +&lt;/h:dataTable&gt; +...</programlisting> + <para>In this example other two attributes are used for filtering:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"forValRef"</property> + </emphasis> is a string which is used in a value attribute of the target UIData component. + It's designed for resetting the UIData component back to the original list provided + by a backing bean. </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"filterBy"</property> + </emphasis> is a getter of an object member that is to be compared to a slider value. + It's a value that is used in results filtering. </para> + </listitem> + </itemizedlist> + <para> + <emphasis> + <property>"handleValue"</property> + </emphasis> is an attribute for keeping the current handle position on the + <property>dataFilterSlider</property> component. Based on the current value, appropriate + values obtained from a getter method defined in <emphasis> + <property>"filterBy"</property> + </emphasis> are filtered.</para> + <para>One more important attribute is a <emphasis> + <property>"storeResults"</property> + </emphasis> one that allows the <property>dataFilterSlider</property> component to keep UIData + target object in session.</para> + <para>If it's necessary the component submits a form on event of a handle state + changing, use the <emphasis> + <property>"submitOnSlide"</property> + </emphasis> attribute. When the attribute definition is <code>"true"</code>, submission on this event is + defined.</para> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the<link linkend="process"> "Decide what to process " </link> guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dataFilterSlider.html">Table of + &lt;rich:dataFilterSlider&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.dataFilterSlider</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataFilterSlider</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DataFilterSlider</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataFilterSliderRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.dataFilterSliderTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataFilterS... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataFilterSlider&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataGrid.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataGrid.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataGrid.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,218 @@ +<section role="NotInToc" id="rich_dataGrid"> + <title> + &lt; + rich:dataGrid + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component to render data as a grid that allows choosing data from a model + and obtains built-in support of Ajax updates.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataGrid_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>A completely skinned table and child elements</para> + </listitem> + <listitem> + <para>Possibility to update a limited set of rows with Ajax</para> + </listitem> + <listitem> + <para>Possibility to receive values dynamically from a model</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The component takes a list from a model and outputs it the same way as with <emphasis role="bold"> + <property>&lt;h:panelGrid&gt;</property> + </emphasis> for inline data. To define grid properties and styles, use the same definitions as + for <emphasis role="bold"> + <property>&lt;h:panelGrid&gt;</property>.</emphasis> + </para> + <para>The component allows to:</para> + <itemizedlist> + <listitem> + <para>Use <emphasis> + <property>"header"</property> + </emphasis> and <emphasis> + <property>"footer"</property> + </emphasis> facets for output</para> + </listitem> + <listitem> + <para>Limit number of output elements (<emphasis> + <property>"elements"</property> + </emphasis> attribute) and define first element for output (<emphasis> + <property>"first"</property> + </emphasis> attribute)</para> + </listitem> + <listitem> + <para>Bind pages with <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component</para> + </listitem> + </itemizedlist> + + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:panel style="width:150px;height:200px;"&gt; + &lt;h:form&gt; + &lt;rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" columns="2" elements="4" first="1"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Car Store"&gt;&lt;/h:outputText&gt; + &lt;/f:facet&gt; + &lt;rich:panel&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="#{car.make} #{car.model}"&gt;&lt;/h:outputText&gt; + &lt;/f:facet&gt; + &lt;h:panelGrid columns="2"&gt; + &lt;h:outputText value="Price:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.price}"/&gt; + &lt;h:outputText value="Mileage:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.mileage}"/&gt; + &lt;/h:panelGrid&gt; + &lt;/rich:panel&gt; + &lt;f:facet name="footer"&gt; + &lt;rich:datascroller&gt;&lt;/rich:datascroller&gt; + &lt;/f:facet&gt; + &lt;/rich:dataGrid&gt; + &lt;/h:form&gt; +&lt;/rich:panel&gt; +... +</programlisting> + <para>This is a result:</para> + + <figure> + <title>Component usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataGrid2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The component was created basing on the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>"ajaxKeys"</property> + </emphasis> attribute allows to define row keys that are updated after an Ajax request.</para> + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataGrid value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" + binding="#{listBean.dataGrid}" id="grid" elements="4" columns="2"&gt; + ... +&lt;/rich:dataGrid&gt; +... +&lt;a4j:commandButton action="#{listBean.action}" reRender="grid" value="Submit"/&gt; +...</programlisting> + + <para> In the example <emphasis> + <property>"reRender"</property> + </emphasis> attribute contains value of <emphasis> + <property>"id"</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dataGrid.html">Table of + &lt;rich:dataGrid&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataGrid</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataGrid</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DataGrid</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataGridRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataGridTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Defines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Defines the footer content</entry> + </row> + <row> + <entry>caption</entry> + <entry>Defines the caption content</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataGrid.js... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataGrid&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataList.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,213 @@ +<section role="NotInToc" id="rich_dataList"> + <title> + &lt; + rich:dataList + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component to render unordered lists that allows choosing data from a model + and obtains built-in support of Ajax updates.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataList_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>A completely skinned list and child elements</para> + </listitem> + <listitem> + <para>Possibility to update a limited set of rows with Ajax</para> + </listitem> + <listitem> + <para>Possibility to receive values dynamically from a model</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component allows to generate a list from a model.</para> + <para>The component has the <emphasis> + <property>"type"</property> + </emphasis> attribute, which corresponds to the <emphasis> + <property>"type"</property> + </emphasis> parameter for the <emphasis role="bold"> + <property>&lt;ul&gt;</property> + </emphasis> HTML element and defines a marker type. Possible values for <emphasis> + <property>"type"</property> + </emphasis> attribute are: "disc", + "circle", + "square".</para> + <para>Here is an example:</para> + + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:dataList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="disc" title="Car Store"&gt; + &lt;h:outputText value="#{car.make} #{car.model}"/&gt;&lt;br/&gt; + &lt;h:outputText value="Price:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.price} "/&gt;&lt;br/&gt; + &lt;h:outputText value="Mileage:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.mileage} "/&gt;&lt;br/&gt; + &lt;/rich:dataList&gt; +&lt;/h:form&gt; +... +</programlisting> + + <para>This is a result:</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component with <emphasis> + <property>"type"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataList2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In the example the <emphasis> + <property>"rows"</property> + </emphasis> attribute limits a number of output elements of the list.</para> + + <para>The <emphasis> + <property>"first"</property> + </emphasis> attribute defines the first element for output. <emphasis> + <property>"title"</property> + </emphasis> is used for a popup title. See the picture below:</para> + + <figure> + <title>The <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component with <emphasis> + <property>"title"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataList3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> + component could be partially updated with + Ajax. The <emphasis> + <property>"ajaxKeys"</property> + </emphasis> attribute allows to define row keys that are updated after an Ajax request.</para> + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" + binding="#{listBean.dataList}" id="list" rows="5" type="disc"&gt; + ... +&lt;/rich:dataList&gt; +... +&lt;a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/&gt; +... +</programlisting> + + <para> In the example <emphasis> + <property>"reRender"</property> + </emphasis> attribute contains the value of <emphasis> + <property>"id"</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dataList.html">Table of + &lt;rich:dataList&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataList</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataList</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DataList</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataListRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataListTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="dataLC"> + <title>Classes names that define a list appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-datalist</entry> + <entry>Defines styles for an html &lt;ul&gt; element</entry> + </row> + <row> + <entry>rich-list-item</entry> + <entry>Defines styles for an html &lt;li&gt; element</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataList&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataOrderedList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataOrderedList.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataOrderedList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,255 @@ +<section role="NotInToc" id="rich_dataOrderedList"> + <title> + &lt; + rich:dataOrderedList + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component to render ordered lists that allows choosing data from a model + and obtains built-in support of Ajax updates.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataOderedList&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataOrderedList_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>A completely skinned list and child elements</para> + </listitem> + <listitem> + <para>Possibility to update a limited set of rows with Ajax</para> + </listitem> + <listitem> + <para>Possibility to receive values dynamically from a model</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + The + <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> + component allows to generate an ordered list from a model. + </para> + <para> + The component has the + <emphasis> + <property>"type"</property> + </emphasis> + attribute, which corresponds to the + <emphasis> + <property>"type"</property> + </emphasis> + parameter for the + <emphasis role="bold"> + <property>&lt;ol&gt;</property> + </emphasis> + HTML element and defines a marker type. Possible values for + <emphasis> + <property>"type"</property> + </emphasis> + attribute are: "A", "a", "I", "i", "1". + </para> + <para>Here is an example:</para> + + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:dataOrderedList var="car" value="#{dataTableScrollerBean.allCars}" rows="5" type="1" title="Car Store"&gt; + &lt;h:outputText value="#{car.make} #{car.model}"/&gt;&lt;br/&gt; + &lt;h:outputText value="Price:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.price}" /&gt;&lt;br/&gt; + &lt;h:outputText value="Mileage:" styleClass="label"&gt;&lt;/h:outputText&gt; + &lt;h:outputText value="#{car.mileage}" /&gt;&lt;br/&gt; + &lt;/rich:dataOrderedList&gt; +&lt;/h:form&gt; +... +</programlisting> + + <para>This is a result:</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> + component with the + <emphasis> + <property>"type"</property> + </emphasis> + attribute + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataOrderedList2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + In the example the + <emphasis> + <property>"rows"</property> + </emphasis> + attribute limits a number of output elements of the list. + </para> + + <para>The + <emphasis> + <property>"first"</property> + </emphasis> + attribute defines the first element for output. + <emphasis> + <property>"title"</property> + </emphasis> + is used for a popup title. + </para> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> + component could be partially updated with + Ajax. The + <emphasis> + <property>"ajaxKeys"</property> + </emphasis> + attribute allows to define row keys that are updated after + an Ajax request. + </para> + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataOrderedList value="#{dataTableScrollerBean.allCars}" var="car" ajaxKeys="#{listBean.list}" + binding="#{listBean.dataList}" id="list"&gt; + ... +&lt;/rich:dataOrderedList&gt; +... +&lt;a4j:commandButton action="#{listBean.action}" reRender="list" value="Submit"/&gt; +... +</programlisting> + + <para> + In the example + <emphasis> + <property>"reRender"</property> + </emphasis> + attribute contains value of the + <emphasis> + <property>"id"</property> + </emphasis> + attribute for the + <emphasis role="bold"> + <property>&lt;rich:dataOrderedList&gt;</property> + </emphasis> + component. As a result the component is updated after an + Ajax request. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dataOrderedList.html">Table of + &lt;rich:dataOrderedList&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataOrderedList</entry> + </row> + <row> + <entry>component-class</entry> + <entry> + org.richfaces.component.html.HtmlDataOrderedList + </entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DataOrderedList</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataOrderedListRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry> + org.richfaces.taglib.DataOrderedListTag + </entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_dOL"> + <title>Classes names that define a list appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-orderedlist</entry> + <entry> + Defines styles for an html &lt;ol&gt; + element + </entry> + </row> + <row> + <entry>rich-list-item</entry> + <entry> + Defines styles for an html &lt;li&gt; + element + </entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataLists.j... + On the component LiveDemo page + </ulink> + you can see the example of + <emphasis role="bold"> + <property>&lt;rich:dataOrderedList &gt;</property> + </emphasis> + usage and sources for the given example. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataTable.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dataTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,361 @@ +<section role="NotInToc" id="rich_dataTable"> + <title> + &lt; + rich:dataTable + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component for tables rendering that allows choosing data from a model and obtains + built-in support of Ajax updates.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataTable_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>A completely skinned table and child elements</para> + </listitem> + <listitem> + <para>Possibility to insert the complex subcomponents + <property>"colGroup"</property> and + <property>"subTable"</property> + </para> + </listitem> + <listitem> + <para>Possibility to update a limited set of strings with Ajax</para> + </listitem> + <listitem> + <para>Possibility to sort and to filter of columns</para> + </listitem> + <listitem> + <para> + <link linkend="sort">Sorting column values</link> + </para> + </listitem> + <listitem> + <para> + <link linkend="filter">Filtering column values</link> + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component is similar to the <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> one, except Ajax support and skinnability. Ajax support is possible, because the + component was created basing on the <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>"ajaxKeys"</property> + </emphasis> attribute allows to define row keys that is updated after an Ajax request.</para> + + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="capitals" + ajaxKeys="#{bean.ajaxSet}" binding="#{bean.table}" id="table"&gt; + ... +&lt;/rich:dataTable&gt; +... +&lt;a4j:commandButton action="#{tableBean.action}" reRender="table" value="Submit"/&gt; +... +</programlisting> + + <para> In the example <emphasis> + <property>"reRender"</property> + </emphasis> attribute contains value of <emphasis> + <property>"id"</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + + <para id="table_ex">The component allows to use <emphasis> + <property>"header"</property> + </emphasis>, <emphasis> + <property>"footer"</property> + </emphasis> and <emphasis> + <property>"caption"</property> + </emphasis> facets for output. See an example below:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; + &lt;f:facet name="caption"&gt; + &lt;h:outputText value="United States Capitals" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Capitals and States Table" /&gt; + &lt;/f:facet&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;State Flag&lt;/f:facet&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;f:facet name="footer"&gt;State Flag&lt;/f:facet&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;State Name&lt;/f:facet&gt; + &lt;h:outputText value="#{cap.state}"/&gt; + &lt;f:facet name="footer"&gt;State Name&lt;/f:facet&gt; + &lt;/rich:column&gt; + &lt;rich:column &gt; + &lt;f:facet name="header"&gt;State Capital&lt;/f:facet&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;f:facet name="footer"&gt;State Capital&lt;/f:facet&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;Time Zone&lt;/f:facet&gt; + &lt;h:outputText value="#{cap.timeZone}"/&gt; + &lt;f:facet name="footer"&gt;Time Zone&lt;/f:facet&gt; + &lt;/rich:column&gt; + &lt;f:facet name="footer"&gt; + &lt;h:outputText value="Capitals and States Table" /&gt; + &lt;/f:facet&gt; +&lt;/rich:dataTable&gt; +... +</programlisting> + + <para>This is a result:</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> component with facets</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dataTable2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Information about sorting and filtering you can find <link linkend="sortAndFilter">in the corresponding section</link>.</para> + <para> + You can find information how to remove header's gradient <ulink url="http://wiki.jboss.org/wiki/RichFacesDataTableBackgroundOut"... in the "How to remove rich:dataTable header background " article</ulink>. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dataTable.html">Table of + &lt;rich:dataTable&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DataTable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDataTable</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DataTable</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataTableRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DataTableTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Redefines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Redefines the footer content</entry> + </row> + <row> + <entry>caption</entry> + <entry>Defines the caption content</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="dTC"> + <title>Classes names that define a whole component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-table</entry> + <entry>Defines styles for all table</entry> + </row> + <row> + <entry>rich-table-caption</entry> + <entry>Defines styles for a "caption" facet element</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define header and footer elements</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-table-header</entry> + <entry>Defines styles for a table header row</entry> + </row> + + <row> + <entry>rich-table-header-continue</entry> + <entry>Defines styles for all header lines after the first</entry> + </row> + <row> + <entry>rich-table-subheader</entry> + <entry>Defines styles for a column header</entry> + </row> + + <row> + <entry>rich-table-footer</entry> + <entry>Defines styles for a footer row</entry> + </row> + + <row> + <entry>rich-table-footer-continue</entry> + <entry>Defines styles for all footer lines after the first</entry> + </row> + <row> + <entry>rich-table-subfooter</entry> + <entry>Defines styles for a column footer</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define rows and cells of a table</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-table-headercell</entry> + <entry>Defines styles for a header cell</entry> + </row> + + <row> + <entry>rich-table-subheadercell</entry> + <entry>Defines styles for a column header cell</entry> + </row> + <row> + <entry>rich-table-cell</entry> + <entry>Defines styles for a table cell</entry> + </row> + <row> + <entry>rich-table-row</entry> + <entry>Defines styles for a table row</entry> + </row> + <row> + <entry>rich-table-firstrow</entry> + <entry>Defines styles for a table's first row</entry> + </row> + + <row> + <entry>rich-table-footercell</entry> + <entry>Defines styles for a footer cell</entry> + </row> + + <row> + <entry>rich-table-subfootercell</entry> + <entry>Defines styles for a column footer cell</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTable.j... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para>The article about <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> flexibility can be found in the <ulink url="http://www.jboss.org/community/docs/DOC-11847"> "rich:dataTable Flexibility " article </ulink>.</para> + <para> + <ulink url="http://www.jboss.org/community/docs/DOC-11848">Article on dataTable skinability</ulink> provides you a simple example of skinnability. + + </para> + <para>More information about using <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> could be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>. + </para> + <para>How to use <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> in a context of Extended Data Model see on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> + + <para>From <ulink url="http://www.jboss.org/community/docs/DOC-11861">"ri... border to 0px "</ulink> article you'll figure out how to set rich:dataTable border to 0px </para> + <para> + <ulink url="http://www.jboss.org/community/docs/DOC-11860">dataTable Background Out </ulink> tells you how to remove rich:dataTable header background</para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_datascroller.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_datascroller.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_datascroller.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,538 @@ +<section role="NotInToc" id="rich_datascroller"> + <title> + &lt; + rich:datascroller + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component designed for providing the functionality of tables scrolling using Ajax + requests.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + + <itemizedlist> + <listitem> + <para>Provides table scrolling functionality</para> + </listitem> + + <listitem> + <para>Built-in Ajax processing</para> + </listitem> + + <listitem> + <para>Provides fast controls</para> + </listitem> + + <listitem> + <para>Skin support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component provides table scrolling functionalitity the + same as TOMAHAWK scroller but with Ajax requests usage.</para> + <para> The + <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> component should be reRendered also with <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> when you changing filter in order to be updated according to the <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> current model. + </para> + <para>The component should be placed into footer of the parent table or be bound + to it with the <emphasis> + <property>"for"</property> + </emphasis> attribute. Note, that <emphasis> + <property>"for"</property> + </emphasis> is evaluated on view build, not on view render, that is + why it will ignore JSTL tags.</para> + <para>The table should also have the defined <emphasis> + <property>"rows"</property> + </emphasis> attribute limiting the quantity of inputted table rows.</para> + <para>The scroller could limit the maximum quantity of rendered links on the + table pages with the help of the <emphasis> + <property>"maxPages"</property> + </emphasis> attribute.</para> + <para>Component provides two controllers groups for switching:</para> + <itemizedlist> + <listitem> + <para>Page numbers for switching onto a particular + page</para> + </listitem> + <listitem> + <para>The controls of fast switching: <emphasis> + <property>"first",</property> + </emphasis> + <emphasis> + <property>"last",</property> + </emphasis> + <emphasis> + <property>"next",</property> + </emphasis> + <emphasis> + <property>"previous",</property> + </emphasis> + <emphasis> + <property>"fastforward",</property> + </emphasis> + <emphasis> + <property>"fastrewind"</property> + </emphasis> + </para> + </listitem> + </itemizedlist> + <para>The controls of fast switching are created adding the facets component + with the corresponding name:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"> ... +&lt;rich:datascroller for="table" maxPages="10"&gt; + &lt;f:facet name="first"&gt; + &lt;h:outputText value="First"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="last"&gt; + &lt;h:outputText value="Last"/&gt; + &lt;/f:facet&gt; +&lt;/rich:datascroller&gt; +...</programlisting> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> controls of fast switching</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>The screenshot shows one controller from each group.</para> + <para> There are also facets used to create the disabled states: + <code>"first_disabled",</code> + <code>"last_disabled",</code> + <code>"next_disabled",</code> + <code>"previous_disabled",</code> + <code>"fastforward_disabled",</code> + <code>"fastrewind_disabled"</code>. </para> + <para>For the + <code>"fastforward"/"fastrewind"</code> + controls customization the additional <emphasis> + <property>"fastStep"</property> + </emphasis> attribute is used. The attribute indicates pages quantity + to switch onto when fast scrolling is used. </para> + + <para> The <emphasis> + <property>"page"</property> + </emphasis> is a value-binding attribute used to define and save + current page number. The example is placed below. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form id="myForm"&gt; + &lt;rich:dataTable id="carList" rows="7" value="#{dataTableScrollerBean.allCars}" var="category"&gt; + &lt;f:facet name="header"&gt; + &lt;rich:columnGroup&gt; + &lt;h:column&gt; + &lt;h:outputText value="Make" /&gt; + &lt;/h:column&gt; + &lt;h:column&gt; + &lt;h:outputText value="Model" /&gt; + &lt;/h:column&gt; + &lt;h:column&gt; + &lt;h:outputText value="Price" /&gt; + &lt;/h:column&gt; + &lt;/rich:columnGroup&gt; + &lt;/f:facet&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{category.make}" /&gt; + &lt;/h:column&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{category.model}" /&gt; + &lt;/h:column&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{category.price}" /&gt; + &lt;/h:column&gt; + &lt;/rich:dataTable&gt; + &lt;rich:datascroller id="sc2" for="carList" reRender="sc1" maxPages="7" page="#{dataTableScrollerBean.scrollerPage}" /&gt; + &lt;h:panelGrid&gt; + &lt;h:panelGroup&gt; + &lt;h:outputText value="Set current page number:" /&gt; + &lt;h:inputText value="#{dataTableScrollerBean.scrollerPage}" id="sc1" size="1"/&gt; + &lt;h:commandButton value="Set" /&gt; + &lt;/h:panelGroup&gt; + &lt;/h:panelGrid&gt; +&lt;/h:form&gt; +...</programlisting> + + <para> In the example above you can enter the page number you want and set it by + clicking on the <emphasis role="bold"> + <property>&lt;h:commandButton&gt;</property> + </emphasis>. By the way, if you use <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> page links the input field rerenders and current page + number changes. </para> + <para>The result should be like below: </para> + <figure> + <title>The <emphasis> + <property>"page"</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/datascroller3.png"/> + </imageobject> + </mediaobject> + </figure> + <!-- + The <emphasis><property>&quot;pageIndexVar&quot;</property></emphasis> and <emphasis> + <property>&;pagesVar&quot;</property> + </emphasis> attributes provide an ability to show the current page and the number of pages in + the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis>. + --> + + + <para> The <emphasis> + <property>"pageIndexVar"</property> + </emphasis> and <emphasis> + <property>"pagesVar"</property> + </emphasis> attributes define a request scope variables and provide an + ability to show the current page and the number of pages in the + <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis>. </para> + <para> These attributes are used for definition the names of variables, that is + used in the facet with name <emphasis> + <property>"pages"</property> + </emphasis>. An example can be found below: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:dataTable value="#{capitalsBean.capitals}" var="cap" rows="5"&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{cap.name}" /&gt; + &lt;/rich:column&gt; + &lt;f:facet name="footer"&gt; + &lt;rich:datascroller pageIndexVar="pageIndex" pagesVar="pages"&gt; + &lt;f:facet name="pages"&gt; + &lt;h:outputText value="#{pageIndex} / #{pages}" /&gt; + &lt;/f:facet&gt; + &lt;/rich:datascroller&gt; + &lt;/f:facet&gt; + &lt;/rich:dataTable&gt; +&lt;/h:form&gt; +... +</programlisting> + <para> It's possible to insert optional separators between controls. + For this purpose use a <emphasis> + <property>"controlsSeparator"</property> + </emphasis> facet. An example is placed below. </para> + <programlisting role="XML"> ... +&lt;f:facet name="controlsSeparator"&gt; + &lt;h:graphicImage value="/image/sep.png"/&gt; +&lt;/f:facet&gt; +...</programlisting> + <para> Starting from 3.2.1 of RichFaces multiple <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> instances behavior and page bindings are corrected. + Incorrect page after model changes handling is added. Phase Listener + called before RenderResponce scans the page for the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> and performs the following operations: </para> + <itemizedlist> + <listitem> + <para> Checks if the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is rendered. (If the checking + generates an exception, the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is considered to be not rendered ) + </para> + </listitem> + <listitem> + <para> If the <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is rendered - the table to which the + <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> is attached gets the value of the page + attribute of <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis>. </para> + </listitem> + </itemizedlist> + <para> Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the <link linkend="process">" Decide what to process " </link> guide section. </para> + <note> + <title>Note:</title> + <para>Make sure, that all <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> components, defined for a table, have same + values for all<emphasis> + <property>"page"</property> + </emphasis> attributes. The page, specified in the last <emphasis> + <property>"page"</property> + </emphasis>, will be rendered in browser. </para> + </note> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/datascroller.html">Table of + &lt;rich:datascroller&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Datascroller</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDatascroller</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Datascroller</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DataScrollerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DatascrollerTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>switchToPage(page)</entry> + <entry>Switches to the defined page, "page" is Number or String </entry> + </row> + <row> + <entry>next()</entry> + <entry>Navigates to the next page</entry> + </row> + <row> + <entry>previous()</entry> + <entry>Navigates to the previous page</entry> + </row> + <row> + <entry>first()</entry> + <entry>Navigates to the first page</entry> + </row> + <row> + <entry>last()</entry> + <entry>Navigates to the last page</entry> + </row> + <row> + <entry>fastForward()</entry> + <entry>Navigates ahead over a certain number of pages. The number of pages to traverse is defined with fastStep attribute</entry> + </row> + <row> + <entry>fastRewind()</entry> + <entry>Navigates backwards over a certain number of pages. The number of pages to traverse is defined with fastStep attribute</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>controlsSeparator</entry> + <entry>Redefines optional separators between controls</entry> + </row> + <row> + <entry>first</entry> + <entry>Redefines the "first" button with the content set</entry> + </row> + <row> + <entry>first_disabled</entry> + <entry>Redefines the disabled "first" button with the content set</entry> + </row> + <row> + <entry>last</entry> + <entry>Redefines the "last" button with the content set</entry> + </row> + <row> + <entry>last_disabled</entry> + <entry>Redefines the disabled "last" button with the content set</entry> + </row> + <row> + <entry>fastrewind</entry> + <entry>Redefines the "fastrewind" button with the content set</entry> + </row> + <row> + <entry>fastrewind_disabled</entry> + <entry>Redefines the disabled "fastrewind" button with the content set</entry> + </row> + <row> + <entry>fastforward</entry> + <entry>Redefines the "fastforward" button with the content set</entry> + </row> + <row> + <entry>fastforward_disabled</entry> + <entry>Redefines the disabled "fastforward" button with the content set</entry> + </row> + <row> + <entry>previous</entry> + <entry>Redefines the "previous" button with the content set</entry> + </row> + <row> + <entry>previous_disabled</entry> + <entry>Redefines the disabled "previous" button with the content set</entry> + </row> + <row> + <entry>next</entry> + <entry>Redefines the "next" button with the content set</entry> + </row> + <row> + <entry>next_disabled</entry> + <entry>Redefines the disabled "next" button with the content set</entry> + </row> + <row> + <entry>pages</entry> + <entry>Redefines the pages buttons with the content set</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn2"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-datascr</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a datascroller</entry> + </row> + <row> + <entry>rich-dtascroller-table</entry> + <entry>Defines styles for a wrapper + &lt;table&gt; element of a + datascroller</entry> + </row> + <row> + <entry>rich-datascr-button</entry> + <entry>Defines styles for a + button</entry> + </row> + + <row> + <entry>rich-datascr-ctrls-separator</entry> + <entry>Defines styles for a separator + between buttons</entry> + </row> + </tbody> + + </tgroup> + </table> + <table> + <title>Classes names that define a buttons appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-datascr-act</entry> + <entry>Defines styles for an active + button</entry> + </row> + <row> + <entry>rich-datascr-inact</entry> + <entry>Defines styles for an inactive + button</entry> + </row> + <row> + <entry>rich-datascr-button-dsbld</entry> + <entry>Defines styles for a disabled + button</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dataTableSc... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para> The solution about how to do correct pagination using datascroller (load + a part of data from database) can be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>. </para> + <para>How to use <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:datascroller&gt;</property> + </emphasis> in a context of Extended Data Model see on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dndParam.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dndParam.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dndParam.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,154 @@ +<section role="NotInToc" id="rich_dndParam"> + <title> + &lt; + rich:dndParam + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>This component is used for passing parameters during drag-and-drop + operations.</para> + </section> + <section> + <title>Details of Usage</title> + + <para> + <property>dndParam</property> is used during drag-and-drop + operations to pass parameters to an indicator. At first, a parameter type + is defined with the type attribute (to specify parameter functionality), + then a parameter name could be defined with the name and value attribute. + Although, it's possible to use nested content defined inside + <property>dndParam</property> for value definition, instead of the + attribute.</para> + + <para>Variants of usage:</para> + + <itemizedlist> + <listitem> + <para>Parameters passing for a drag icon when an indicator is in + drag.</para> + </listitem> + </itemizedlist> + + <para>In this case, <property>dndParam</property> is of a drag type + and is defined in the following way:</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dragSupport ... &gt; + &lt;rich:dndParam type="drag" name="dragging"&gt; + &lt;h:graphicImage value="/img/product1_small.png"/&gt; + &lt;/rich:dndParam&gt; + &lt;h:graphicImage value="product1.png"/&gt; +&lt;/rich:dragSupport&gt; +... +</programlisting> + + <para>Here <property>dndParam</property> defines an icon that is used by + an indicator when a drag is on the place of a default icon (e.g. a + minimized image of a draggable element)</para> + + <itemizedlist> + <listitem> + <para>Parameters passing for an indicator informational part during + a drag.</para> + </listitem> + </itemizedlist> + + <para>In this case <property>dndParam</property> is of a drag type + and is defined in the following way:</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dragSupport ... &gt; + &lt;rich:dndParam type="drag" name="label" value="#{msg.subj}"/&gt; + ... +&lt;/rich:dragSupport&gt; +... +</programlisting> + + <para>The parameter is transmitted into an indicator for usage in an + informational part of the <property>dragIndicator</property> component (inside an indicator a + call to {label} happens)</para> + + <itemizedlist> + <listitem> + <para>Parameters passing happens when dragged content is brought + onto some zone with <property>dropSupport</property> + </para> + </listitem> + </itemizedlist> + + <para>In this case <property>dndParam</property> is of a drop type and is + defined in the following way:</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dropSupport ... &gt; + &lt;rich:dndParam type="drop" name="comp" &gt; + &lt;h:graphicImage height="16" width="16" value="/images/comp.png"/&gt; + &lt;/rich:dndParam&gt; + ... +&lt;/rich:dropSupport &gt; +... +</programlisting> + + <para>Here, <property>dndParam</property> passes icons into an indicator, + if dragged content of a comp type is above the given drop zone that + processes it on the next drop event.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dndParam.html">Table of + &lt;rich:dndParam&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.DndParam</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlDndParam</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.DndParamTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragIndicator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragIndicator.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragIndicator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,241 @@ +<section role="NotInToc" id="rich_dragIndicator"> + <title> + &lt; + rich:dragIndicator + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>This is a component for defining what appears under the mouse cursor during drag-and-drop + operations. The displayed drag indicator can show information about the dragged elements.</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> component</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/dragIndicator_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Customizable look and feel</para> + </listitem> + <listitem> + <para>Customizable marker according to the type of dragable elements</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> In the simplest way the component could be defined empty - in that case a default + indicator is shown like this: </para> + <figure> + <title>The simplest <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dragIndicator3.png"/> + </imageobject> + </mediaobject> + </figure> + <para>For indicator customization you need to define one of the following facets:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"single"</property> + </emphasis> — indicator shown when dragging a single item; + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"multiple"</property> + </emphasis> — indicator shown when dragging several items. + </para> + </listitem> + </itemizedlist> + + <note> + <title> + Note: + </title> + <para> + The current implementation of the <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> component + does not support multiple items selection. The feature is described for future releases. + </para> + </note> + <para>Thus for specify a look-and-feel you have to define one of these facets and include into + it a content that should be shown in indicator.</para> + <section> + <title>Macro definitions</title> + <para>To place some data from drag or drop zones into component you can use macro definitions. + They are being defining in the following way:</para> + <itemizedlist> + <listitem> + <para> + <emphasis role="bold"> + <property>&lt;rich:dndParam&gt;</property> + </emphasis> component with a specific name and value is being included into a drag/drop + support component (an image can be defined as placed inside <emphasis role="bold"> + <property>&lt;rich:dndParam&gt;</property> + </emphasis> without defining a value). </para> + </listitem> + <listitem> + <para> in needed place a parameter value is included into the marking of indicator using + syntax (name of parameter)</para> + </listitem> + </itemizedlist> + <para> For instance, this:</para> + <programlisting role="XML">... +&lt;rich:dropSupport...&gt; + &lt;rich:dndParam name="testDrop"&gt; + &lt;h:graphicImage value="/images/file-manager.png" /&gt; + &lt;/rich:dndParam&gt; +&lt;/rich:dropSupport&gt; +... +</programlisting> + <para>Is placed into indicator as follows:</para> + <programlisting role="XML">... +&lt;f:facet name="single"&gt; + {testDrop} +&lt;/f:facet&gt; +... +</programlisting> + </section> + <section> + <title>Predefined macro definitions</title> + <para> Indicator can accept two default macro definitions:</para> + <itemizedlist> + <listitem> + <para>marker</para> + </listitem> + <listitem> + <para>label</para> + </listitem> + </itemizedlist> + <para>Thus including one of these elements in the marking of indicator, in other words after + setting up appropriate parameters in DnD components and defining only default indicator - + without specifying facets - a developer gets these parameters values displayed in indicator + in the order "marker - label".</para> + </section> + + <section> + <title>Marker customization</title> + <para>The macro definition <emphasis> + <property>"marker"</property> + </emphasis> can be customized depending on what a draggable element is located over. For + that you should define one of these three parameters (specify a parameter with one of three + names):</para> + <itemizedlist> + <listitem> + <para> + <code>accept</code> + </para> + </listitem> + </itemizedlist> + <para>Parameter will be set instead of {marker} into indicator when a draggable element is + positioned over drop zone that accept this type of elements</para> + + <itemizedlist> + <listitem> + <para> + <code>reject</code> + </para> + </listitem> + </itemizedlist> + <para>Parameter is set instead of {marker} into indicator when a draggable element is + positioned over drop zone that doesn't accept this type of elements </para> + + <itemizedlist> + <listitem> + <para> + <code>default</code> + </para> + </listitem> + </itemizedlist> + <para>Parameter is set instead of {marker} into indicator when a draggable element is + positioned over all the rest of page elements</para> + </section> + + <note> + <title> + Note: + </title> + <para> + If you use <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> inside a form + do not forget to use id like <code>formId:indicatorID</code> + defined in <emphasis role="bold"> + <property>&lt;rich:dragSupport&gt;</property> + </emphasis> indicator attribute. + </para> + </note> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dragIndicator.html">Table of + &lt;rich:dragIndicator&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Draggable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDragIndicator</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DragIndicator</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DragIndicatorRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DragIndicatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragListener.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,132 @@ +<section role="NotInToc" id="rich_dragListener"> + <title> + &lt; + rich:dragListener + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dragListener&gt;</property> + </emphasis> + represents an action listener method that is notified after a drag operation. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Allows to define some drag listeners for the components with "Drag and Drop" support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + The + <emphasis role="bold"> + <property>&lt;rich:dragListener&gt;</property> + </emphasis> + is used as a nested tag with components like + <emphasis role="bold"> + <property>&lt;rich:dragSupport&gt;</property> + </emphasis> + , + <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> + and + <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> + . + </para> + <para> + Attribute + <emphasis> + <property>"type"</property> + </emphasis> + defines the fully qualified Java class name for a listener. + This class should implement + + <ulink url="&apidoc_framework;org/richfaces/event/DropListener.html"> + <code>org.richfaces.event.DropListener</code> + </ulink> + interface. + </para> + + <para> + <emphasis role="bold"> + The typical variant of using: + </emphasis> + </para> + + <programlisting role="XML">... +&lt;h:panelGrid id="dragPanel"&gt; + &lt;rich:dragSupport dragType="item"&gt; + &lt;rich:dragListener type="demo.ListenerBean"/&gt; + &lt;/rich:dragSupport&gt; + &lt;!--Some content to be dragged--&gt; +&lt;/h:panelGrid&gt; +... +</programlisting> + + <para> + <emphasis role="bold">Java bean source:</emphasis> + </para> + + <programlisting role="JAVA">package demo; + +import org.richfaces.event.DragEvent; + +public class ListenerBean implements org.richfaces.event.DragListener{ +... + public void processDrag(DragEvent arg0){ + //Custom Developer Code + } +... +} +</programlisting> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dragListener.html">Table of + &lt;rich:dragListener&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + + <row> + <entry>listener-class</entry> + <entry>org.richfaces.event.DragListener</entry> + </row> + <row> + <entry>event-class</entry> + <entry>org.richfaces.event.DragEvent</entry> + </row> + + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DragListenerTag</entry> + </row> + + </tbody> + </tgroup> + </table> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragSupport.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragSupport.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dragSupport.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,307 @@ +<section role="NotInToc" id="rich_dragSupport"> + <title> + &lt; + rich:dragSupport + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>This component defines a subtree of the component tree as draggable + for drag-and-drop operations. Within such a "drag zone," you can click + the mouse button on an item and drag it to any component that supports drop + operations (a "drop zone"). It encodes all the necessary JavaScript for + supporting drag-and-drop operations.</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dragSupport&gt;</property> + </emphasis> component</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/dragSupport_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + + <itemizedlist> + <listitem> + <para> + Encodes all necessary JavaScript to perform drag + actions + </para> + </listitem> + + <listitem> + <para> + Can be used within any component type that provides the + required properties for drag operations + </para> + </listitem> + + <listitem> + <para> + Supports drag-and-drop between different forms + </para> + </listitem> + + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + The + <property>dragSupport</property> + tag inside a component completely specifies the events and + JavaScript required to use the component and it's children + for dragging as part of a drag-and-drop operation. In order + to work, though, + <property>dragSupport</property> + must be placed inside a wrapper component that outputs child + components and that has the right events defined on it. + Thus, this example won't work, because the + <emphasis role="bold"> + <property>&lt;h:column&gt;</property> + </emphasis> + tag doesn't provide the necessary properties for redefining + events on the client: + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:column&gt; + &lt;rich:dragSupport dragIndicator=":form:iii" dragType="text"&gt; + &lt;a4j:actionparam value="#{caps.name}" name="name"/&gt; + &lt;/rich:dragSupport&gt; + &lt;h:outputText value="#{caps.name}"/&gt; +&lt;/h:column&gt; +... +</programlisting> + + <para> + However, using + <property>a4j:outputPanel</property> + as a wrapper inside + <emphasis role="bold"> + <property>&lt;h:column&gt;</property> + </emphasis> + , the following code could be used successfully: + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:column&gt; + &lt;a4j:outputPanel&gt; + &lt;rich:dragSupport dragIndicator=":form:iii" dragType="text"&gt; + &lt;a4j:actionparam value="#{caps.name}" name="name"/&gt; + &lt;/rich:dragSupport&gt; + &lt;h:outputText value="#{caps.name}"/&gt; + &lt;/a4j:outputPanel&gt; +&lt;/h:column&gt; +... +</programlisting> + + <para>This code makes all rows of this column draggable.</para> + + <para> + One of the main attributes for + <property>dragSupport</property> + is + <emphasis> + <property>"dragType"</property> + , + </emphasis> + which associates a name with the drag zone. Only drop zones + with this name as an acceptable type can be used in + drag-and-drop operations. Here is an example: + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:panelGrid id="drag1"&gt; + &lt;rich:dragSupport dragType="singleItems" .../&gt; + &lt;!--Some content to be dragged--&gt; +&lt;/h:panelGrid&gt; +... +&lt;h:panelGrid id="drag2"&gt; + &lt;rich:dragSupport dragType="groups" .../&gt; + &lt;!--Some content to be dragged--&gt; +&lt;/h:panelGrid&gt; +... +&lt;h:panelGrid id="drop1"&gt; + &lt;rich:dropSupport acceptedTypes="singleItems" .../&gt; + &lt;!--Drop zone content--&gt; +&lt;/h:panelGrid&gt; +... +</programlisting> + + <para> + In this example, the + <code>drop1</code> + panel grid is a drop zone that invokes drag-and-drop for + drops of items from the first + <code>drag1</code> + panel grid, but not the second + <code>drag2</code> + panel grid. In the section about + <property>dropSupport</property> + , you will find an example that shows more detailed + information about moving data between tables with drag and + drop. + </para> + + <para> + The + <property>dragSupport</property> + component also has a + <emphasis> + <property>"value"</property> + </emphasis> + attribute for passing data into the processing after a drop + event. + </para> + + <para> + One more important attribute for + <emphasis role="bold"> + <property>&lt;rich:dragSupport&gt;</property> + </emphasis> + is the + <emphasis> + <property>"dragIndicator"</property> + </emphasis> + attribute that point to the component id of the + <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> + component to be used for dragged items from this drag zone. + If it isn't defined, a default indicator for drag operations + is used. + </para> + + <para> + Finally, the component has the following extra attributes + for event processing on the client: + </para> + + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"ondragstart"</property> + </emphasis> + </para> + </listitem> + + <listitem> + <para> + <emphasis> + <property>"ondragend"</property> + </emphasis> + </para> + </listitem> + </itemizedlist> + + <para> + You can use your own custom JavaScript functions to handle + these events. + </para> + + + <note> + <title>Note:</title> + <para> + If you define width for a outputPanel, in Internet + Explorer 6 you can perform a drag and drop operation, + placing the mouse cursor on the text in the outputPanel + only. + </para> + </note> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dragSupport.html">Table of + &lt;rich:dragSupport&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.DragSupport</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry> + org.richfaces.component.html.HtmlDragSupport + </entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.DragSupport</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.DragSupportRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.DragSupportTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... + On the component Live Demo page + </ulink> + you can see the example of + <emphasis role="bold"> + <property>&lt;rich:dragSupport&gt;</property> + </emphasis> + usage and sources for the given example. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropDownMenu.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropDownMenu.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropDownMenu.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,516 @@ +<section role="NotInToc" id="rich_dropDownMenu"> + <title> + &lt; + rich:dropDownMenu + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + + <para>The <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component is used for creating + multilevel drop-down menus.</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/dropDownMenu_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + + <itemizedlist> + <listitem> + <para>Highly customizable look-and-feel</para> + </listitem> + + <listitem> + <para>Pop-up appearance event customization</para> + </listitem> + + <listitem> + <para>Different submission modes</para> + </listitem> + + <listitem> + <para>Ability to define a complex representation for elements</para> + </listitem> + + <listitem> + <para>Support for disabling</para> + </listitem> + + <listitem> + <para>Smart user-defined positioning</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>All attributes except <emphasis> + <property>"value"</property> + </emphasis> are optional. The <emphasis> + <property>"value"</property> + </emphasis> attribute defines text to be represented. If you can use the <emphasis> + <property>"label"</property> + </emphasis> facet, you can even not use the <emphasis> + <property>"value"</property> + </emphasis> attribute.</para> + + <para>Here is an example:</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;f:facet name="label"&gt; + &lt;h:graphicImage value="/images/img1.png"/&gt; +&lt;/f:facet&gt; +...</programlisting> + + <para>Use the <emphasis> + <property>"event"</property> + </emphasis> attribute to define an event for the represented element that triggers a menu + appearance. An example of a menu appearance on a click can be seen below.</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:dropDownMenu event="onclick" value="Item1"&gt; + &lt;!--Nested menu components--&gt; +&lt;/rich:dropDownMenu&gt; +...</programlisting> + + <para>The <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> + <emphasis> + <property>"submitMode"</property> + </emphasis> attribute can be set to three possible parameters:</para> + + <itemizedlist> + <listitem> + <para> + <code>Server</code> (default)</para> + </listitem> + </itemizedlist> + + <para>Regular form submission request is used.</para> + + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + + <para>Ajax submission is used for switching.</para> + + <itemizedlist> + <listitem> + <para> + <code>None</code> + </para> + </listitem> + </itemizedlist> + + <para>The <emphasis> + <property>"action"</property> + </emphasis> and <emphasis> + <property>"actionListener"</property> + </emphasis> item's attributes are ignored. Menu items don't fire any submits themselves. The + behavior is fully defined by the components nested into items.</para> + + <note> + <title>Note:</title> + <para> As the <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component doesn't provide its own form, use it between <emphasis role="bold"> + <property>&lt;h:form&gt;</property> + </emphasis> and + <emphasis role="bold"> + <property>&lt;/h:form&gt;</property> + </emphasis> tags.</para> + </note> + + <para>The <emphasis> + <property>"direction"</property> + </emphasis> and <emphasis> + <property>"jointPoint"</property> + </emphasis> attributes are used for defining aspects of menu appearance.</para> + + <para>Possible values for the <emphasis> + <property>"direction"</property> + </emphasis> attribute are:</para> + + <itemizedlist> + <listitem> + <para>"top-left" - a menu drops to the top and left</para> + </listitem> + + <listitem> + <para>"top-right" - a menu drops to the top and right</para> + </listitem> + + <listitem> + <para>"bottom-left" - a menu drops to the bottom and left</para> + </listitem> + + <listitem> + <para>"bottom-right" - a menu drops to the bottom and right</para> + </listitem> + + <listitem> + <para>"auto" - smart positioning activation</para> + </listitem> + </itemizedlist> + + <para>Possible values for the <emphasis> + <property>"jointPoint"</property> + </emphasis> attribute are:</para> + + <itemizedlist> + <listitem> + <para>"tr" - a menu is attached to the top-right point of the button element</para> + </listitem> + + <listitem> + <para>"tl" - a menu is attached to the top-left point of the button element</para> + </listitem> + + <listitem> + <para>"br" - a menu is attached to the bottom-right point of the button element</para> + </listitem> + + <listitem> + <para>"bl" - a menu is attached to the bottom-left point of the button element</para> + </listitem> + + <listitem> + <para>"auto" - smart positioning activation</para> + </listitem> + </itemizedlist> + + <para>By default, the <emphasis> + <property>"direction"</property> + </emphasis> and <emphasis> + <property>"jointPoint"</property> + </emphasis> attributes are set to "auto".</para> + + <para>Here is an example:</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dropDownMenu value="File" direction="bottom-right" jointPoint="bl"&gt; + &lt;rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}"/&gt; + &lt;rich:menuItem submitMode="ajax" value="Open" action="#{ddmenu.doOpen}"/&gt; + &lt;rich:menuGroup value="Save As..."&gt; + &lt;rich:menuItem submitMode="ajax" value="Text File" action="#{ddmenu.doSaveText}"/&gt; + &lt;rich:menuItem submitMode="ajax" value="PDF File" action="#{ddmenu.doSavePDF}"/&gt; + &lt;/rich:menuGroup&gt; + &lt;rich:menuItem submitMode="ajax" value="Close" action="#{ddmenu.doClose}"/&gt; + &lt;rich:menuSeparator id="menuSeparator11"/&gt; + &lt;rich:menuItem submitMode="ajax" value="Exit" action="#{ddmenu.doExit}"/&gt; +&lt;/rich:dropDownMenu&gt; +...</programlisting> + + <para>This is the result:</para> + + <figure> + <title>Using the <emphasis role="bold"> + <property>"direction"</property> + </emphasis> and <emphasis> + <property>"joinPoint"</property> + </emphasis> attributes</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/dropDownMenu2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>You can correct an offset of the pop-up list relative to the label using the following + attributes: <emphasis> + <property>"horizontalOffset"</property> + </emphasis> and <emphasis> + <property>"verticalOffset"</property> + </emphasis>.</para> + + <para>Here is an example:</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:dropDownMenu value="File" direction="bottom-right" jointPoint="tr" horizontalOffset="-15" verticalOffset="0"&gt; + &lt;rich:menuItem submitMode="ajax" value="New" action="#{ddmenu.doNew}"/&gt; + &lt;rich:menuItem submitMode="ajax" value="Open" action="#{ddmenu.doOpen}"/&gt; + &lt;rich:menuGroup value="Save As..."&gt; + &lt;rich:menuItem submitMode="ajax" value="Text File" action="#{ddmenu.doSaveText}"/&gt; + &lt;rich:menuItem submitMode="ajax" value="PDF File" action="#{ddmenu.doSavePDF}"/&gt; + &lt;/rich:menuGroup&gt; + &lt;rich:menuItem submitMode="ajax" value="Close" action="#{ddmenu.doClose}"/&gt; + &lt;rich:menuSeparator id="menuSeparator11"/&gt; + &lt;rich:menuItem submitMode="ajax" value="Exit" action="#{ddmenu.doExit}"/&gt; +&lt;/rich:dropDownMenu&gt; +...</programlisting> + + <para>This is the result:</para> + + <figure> + <title>Using the <emphasis> + <property>"horizontalOffset"</property> + </emphasis> and <emphasis> + <property>"verticalOffset"</property> + </emphasis> attributes</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/dropDownMenu3.png"/> + </imageobject> + </mediaobject> + </figure> + + <!--para> The <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> attribute is used for disabling whole <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis>, <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property>. + </emphasis> + </para> + <para>An example of a menu appearance with <emphasis> + <property>&quot;disabled&quot;</property> + </emphasis> attribute can be seen below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML"><![CDATA[... + <rich:dropDownMenu value="Item1"> + <rich:menuItem id="menuItem1" value="Active1"/> + <rich:menuItem id="menuItem2" value="Disabled1" disabled="true"/> + <rich:menuGroup id="menuGroup1" value="Group1"> + <rich:menuItem id="menuGroup1Item1" value="Active"/> + <rich:menuItem id="menuGroup1Item2" value="Active"/> + </rich:menuGroup> + <rich:menuItem id="menuItem3" value="Active2"/> + <rich:menuGroup id="menuGroup1Dsbld" value="Group1 dsbld." disabled="true" /> + </rich:dropDownMenu> +... +]]></programlisting--> + +<para> + The <emphasis> + <property>"disabled"</property> + </emphasis> attribute is used for disabling whole + <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> component. In this case it is + necessary to define <emphasis> + <property>"disabled"</property> + </emphasis> attribute as "true". + An example is placed below. +</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:dropDownMenu value="File" disabled="true"&gt; + ... +&lt;/rich:dropDownMenu&gt; +...</programlisting> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dropDownMenu.html">Table of + &lt;rich:dropDownMenu&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.DropDownMenu</entry> + </row> + + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlDropDownMenu</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.DropDownMenu</entry> + </row> + + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.DropDownMenuRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DropDownMenuTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>label</entry> + <entry>Redefines the content set of label</entry> + </row> + <row> + <entry>labelDisabled</entry> + <entry>Redefines the content set of disabled label</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn4"> + <title>Classes names that define a label</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-label-text-decor</entry> + + <entry>Defines text style for a representation element</entry> + </row> + + <row> + <entry>rich-ddmenu-label</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a representation + element</entry> + </row> + + <row> + <entry>rich-ddmenu-label-select</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a selected + representation element</entry> + </row> + + <row> + <entry>rich-ddmenu-label-unselect</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of an unselected + representation element </entry> + </row> + + <row> + <entry>rich-ddmenu-label-disabled</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element of a disabled + representation element </entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a popup element</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-menu-list-border</entry> + + <entry>Defines styles for borders</entry> + </row> + + <row> + <entry>rich-menu-list-bg</entry> + + <entry>Defines styles for a general background list</entry> + </row> + + <row> + <entry>rich-menu-list-strut</entry> + + <entry>Defines styles for a wrapper &lt;div&gt; element for a strut of a popup + list</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropListener.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,132 @@ +<section role="NotInToc" id="rich_dropListener"> + <title> + &lt; + rich:dropListener + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:dropListener&gt;</property> + </emphasis> + represents an action listener method that is notified after a drop operation. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Allows to define some drop listeners for the components with "Drag and Drop" support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + The + <emphasis role="bold"> + <property>&lt;rich:dropListener&gt;</property> + </emphasis> + is used as a nested tag with components like + <emphasis role="bold"> + <property>&lt;rich:dropSupport&gt;</property> + </emphasis> + , + <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> + and + <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> + . + </para> + <para> + Attribute + <emphasis> + <property>"type"</property> + </emphasis> + defines the fully qualified Java class name for the + listener. This class should implement + <ulink url="&apidoc_framework;org/richfaces/event/DropListener.html"> + <code>org.richfaces.event.DropListener</code> + </ulink> + interface. + . + </para> + + <para> + <emphasis role="bold"> + The typical variant of using: + </emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:panel style="width:100px;height:100px;"&gt; + &lt;f:facet name="header"&gt;Drop Zone&lt;/f:facet&gt; + &lt;rich:dropSupport acceptedTypes="text"&gt; + &lt;rich:dropListener type="demo.ListenerBean"/&gt; + &lt;/rich:dropSupport&gt; +&lt;/rich:panel&gt; +... +</programlisting> + + <para> + <emphasis role="bold">Java bean source:</emphasis> + </para> + + <programlisting role="JAVA">package demo; + +import org.richfaces.event.DropEvent; + +public class ListenerBean implements org.richfaces.event.DropListener{ +... + public void processDrop(DropEvent arg0){ + //Custom Developer Code + } +... +} +</programlisting> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dropListener.html">Table of + &lt;rich:dropListener&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + + <row> + <entry>listener-class</entry> + <entry>org.richfaces.event.DropListener</entry> + </row> + <row> + <entry>event-class</entry> + <entry>org.richfaces.event.DropEvent</entry> + </row> + + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.DropListenerTag</entry> + </row> + + </tbody> + </tgroup> + </table> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropSupport.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropSupport.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_dropSupport.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,402 @@ +<section role="NotInToc" id="rich_dropSupport"> + <title> + &lt; + rich:dropSupport + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>This component transforms a parent component into a target zone for + drag-and-drop operations. When a draggable element is moved and dropped onto + the area of the parent component, Ajax request processing for this event is + started.</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:dropSupport&gt;</property> + </emphasis> component</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/dropSupport_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para> + Encodes all necessary JavaScript to perform drop actions + </para> + </listitem> + + <listitem> + <para> + Can be used within any component type that provides the required properties for drop operations + </para> + </listitem> + + <listitem> + <para> + Built-in Ajax processing + </para> + </listitem> + + <listitem> + <para> + Supports drag-and-drop between different forms + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>The key attribute for <emphasis role="bold"> + <property>&lt;rich:dropSupport&gt;</property> + </emphasis> is <emphasis> + <property>"acceptedTypes"</property> + </emphasis>. + It defines, which types of dragable items (zones) could be accepted by the current drop zone. Check the example below: + </para> + <programlisting role="XML">... +&lt;rich:panel styleClass="dropTargetPanel"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="PHP Frameworks" /&gt; + &lt;/f:facet&gt; + + &lt;rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP" dropListener="#{eventBean.processDrop}" reRender="phptable, src"&gt; + &lt;/rich:dropSupport&gt; + ... +&lt;/rich:panel&gt; +... +</programlisting> + <para>and here is what happens on the page:</para> + <figure> + <title>Drop zone accepts dragable item with "PHP" type only</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dropSupport1.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>Using the <emphasis> + <property>"typeMapping"</property> + </emphasis> attribute. Previous example shows that a drop zone could accept a dragable item or not. + Special markers, which are placed at <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis>, inform user about drop zone’s possible behaviors: + "checkmark" appears if drop is accepted and "No" symbol if it is not. + Moreover, some extra information (e.g. text message) could be put into the Indicator to reinforce the signal about drop zone’s behavior or pass some other additional sense. + This reinforcement could be programmed and attributed to drop zone via <emphasis> + <property>"typeMapping"</property> + </emphasis> attribute using JSON syntax. + The type of dragged zone (dragType) should be passed as "key" and name of <emphasis role="bold"> + <property>&lt;rich:dndParam&gt;</property> + </emphasis> + that gives needed message to Indicator as "value": + </para> + <programlisting role="XML">... +&lt;rich:panel styleClass="dropTargetPanel"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="PHP Frameworks" /&gt; + &lt;/f:facet&gt; + + &lt;rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP" dropListener="#{eventBean.processDrop}" reRender="phptable, src" + typeMapping="{PHP: text_for_accepting, DNET: text_for_rejecting}"&gt; + &lt;rich:dndParam name="text_for_accepting" value="Drop accepted!" /&gt; + &lt;rich:dndParam name="text_for_rejecting" value="Drop is not accepted!" /&gt; + &lt;/rich:dropSupport&gt; + ... +&lt;/rich:panel&gt; +... +</programlisting> + <para>What happens on the page:</para> + <figure> + <title> + <emphasis> + <property>"typeMapping"</property> + </emphasis> helps to add some extra information to <emphasis role="bold"> + <property>&lt;rich:dragIndicator&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/dropSupport1a.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>In examples above dropping a dragable item triggers the use a parameter in the event processing; Ajax request is sent and dropListener defined for the component is called. + </para> + + <para> + Here is an example of moving records between tables. The + example describes all the pieces for drag-and-drop. (To get + extra information on these components, read the sections for + these components.) + </para> + + <para> + As draggable items, this table contains a list of such items + designated as being of type + <code>"text"</code> + : + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="caps"&gt; + &lt;f:facet name="caption"&gt;Capitals List&lt;/f:facet&gt; + &lt;h:column&gt; + &lt;a4j:outputPanel&gt; + &lt;rich:dragSupport dragIndicator=":form:ind" dragType="text"&gt; + &lt;a4j:actionparam value="#{caps.name}" name="name"/&gt; + &lt;/rich:dragSupport&gt; + &lt;h:outputText value="#{caps.name}"/&gt; + &lt;/a4j:outputPanel&gt; + &lt;/h:column&gt; +&lt;/rich:dataTable&gt; +... +</programlisting> + + <para> + As a drop zone, this panel will accept draggable items of + type + <code>text</code> + and then rerender an element with the ID of + <code>box</code> + : + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:panel style="width:100px;height:100px;"&gt; + &lt;f:facet name="header"&gt;Drop Zone&lt;/f:facet&gt; + &lt;rich:dropSupport acceptedTypes="text" reRender="box" + dropListener="#{capitalsBean.addCapital2}"/&gt; +&lt;/rich:panel&gt; +... +</programlisting> + + <para> + As a part of the page that can be updated in a partial page + update, this table has an ID of + <code>box</code> + : + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals2}" var="cap2" id="box"&gt; + &lt;f:facet name="caption"&gt;Capitals chosen&lt;/f:facet&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{cap2.name}"/&gt; + &lt;/h:column&gt; +&lt;/rich:dataTable&gt; +...</programlisting> + + <para> + And finally, as a listener, this listener will implement the + dropped element: + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA">... +public void addCapital2(DropEvent event) { + FacesContext context = FacesContext.getCurrentInstance(); + Capital cap = new Capital(); + cap.setName(context.getExternalContext().getRequestParameterMap().get("name").toString()); + capitals2.add(cap); +} +... +</programlisting> + + <para> + Here is the result after a few drops of items from the first + table: + </para> + + <figure> + <title>Results of drop actions</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/dropSupport2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + In this example, items are dragged element-by-element from + the rendered list in the first table and dropped on a panel + in the middle. After each drop, a drop event is generated + and a common Ajax request is performed that renders results + in the third table. + </para> + + <para> + As with every Ajax action component, + <emphasis role="bold"> + <property>&lt;rich:dropSupport&gt;</property> + </emphasis> + has all the common attributes ( + <emphasis> + <property>"timeout"</property> + , + </emphasis> + <emphasis> + <property>"limitToList"</property> + , + </emphasis> + <emphasis> + <property>"reRender"</property> + , + </emphasis> + etc.) for Ajax request customization. + </para> + + <para> + Finally, the component has the following extra attributes + for event processing on the client: + </para> + + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"ondragenter"</property> + </emphasis> + </para> + </listitem> + + <listitem> + <para> + <emphasis> + <property>"ondragexit"</property> + </emphasis> + </para> + </listitem> + + <listitem> + <para> + <emphasis> + <property>"ondrop"</property> + </emphasis> + </para> + </listitem> + + <listitem> + <para> + <emphasis> + <property>"ondropend"</property> + </emphasis> + </para> + </listitem> + </itemizedlist> + + <para> + Developers can use their own custom JavaScript functions to + handle these events. + </para> + <para> + Information about the + <emphasis> + <property>"process"</property> + </emphasis> + attribute usage you can find in the + <link linkend="process"> "Decide what to process" </link> guide section + . + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/dropSupport.html">Table of + &lt;rich:dropSupport&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.DropSupport</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry> + org.richfaces.component.html.HtmlDropSupport + </entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.DropSupport</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.DropSupportRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.DropSupportTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dragSupport... + On the component Live Demo page + </ulink> + you can see the example of + <emphasis role="bold"> + <property>&lt;rich:dropSupport&gt;</property> + </emphasis> + usage and sources for the given example. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_editor.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_editor.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_editor.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,549 @@ +<section role="NotInToc" id="rich_editor"> + <title> + &lt; + rich:editor + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.3.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> component is used for creating a WYSIWYG editor on a page. + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editor1.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + + <listitem> + <para>Seam text support</para> + </listitem> + <listitem> + <para>Manageable global configurations</para> + </listitem> + <listitem> + <para>Possibility to use custom plug-ins</para> + </listitem> + <listitem> + <para>Support of all TinyMCE's parameters through <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> + </para> + </listitem> + + </itemizedlist> + + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> is fully based on TinyMCE web based Javascript HTML WYSIWYG editor control and supports all of the features it has. + The <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> adapts the TinyMCE editor for JSF environment and adds some functional capabilities. + </para> + <para> + The easiest way to place the <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> on a page is as follows: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;rich:editor value="#{bean.editorValue}" /&gt;</programlisting> + <para> + Implementation of <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> provides three ways to define the properties of the component: + </para> + + <orderedlist> + <listitem> + <para>Using attributes</para> + </listitem> + <listitem> + <para>Using using <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> JSF tag</para> + </listitem> + <listitem> + <para>Using configuration files that allow you to set up multiple configurations for all editors in your application and change them in the runtime</para> + </listitem> + </orderedlist> + + <para>The three methods are described in details in the chapter.</para> + <para> + The most important properties are implemented as attributes and you can define them as any other attribute. + The attributes of the <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> component match the corresponding properties of TinyMCE editor. + </para> + <para> + For example, a theme for the editor can be defined using the <emphasis> + <property>"theme"</property> + </emphasis> attribute like this: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"> +&lt;rich:editor value="#{bean.editorValue}" theme="advanced" /&gt; +</programlisting> + <para>Setting a different skin for the editor can be done using the <emphasis> + <property>"skin"</property> + </emphasis> attribute.</para> + <para> + Another useful property that is implemented at attribute level is <emphasis> + <property>"viewMode"</property> + </emphasis>. + The attribute switches between "visual" and "source" modes, toggling between modes is performed setting the attribute to "visual" and "source" respectively. + Implementation of <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> also implies that you can change the modes dynamically setting the value of the <emphasis> + <property>"viewMode"</property> + </emphasis> attribute using EL-expression. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:editor value="#{editor.submit}" theme="advanced" viewMode="#{editor.viewMode}" &gt; + ... + &lt;h:selectOneRadio value="#{editor.viewMode}" onchange="submit();"&gt; + &lt;f:selectItem itemValue="visual" itemLabel="visual" /&gt; + &lt;f:selectItem itemValue="source" itemLabel="source" /&gt; + &lt;/h:selectOneRadio&gt; + ... +&lt;/rich:editor&gt; +...</programlisting> + <para> + Most configuration options that TinyMCE provides can be applied using <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> JSF tag. + The syntax is quite simple: the <emphasis> + <property>"name"</property> + </emphasis> attribute should contain the option, + the <emphasis> + <property>"value"</property> + </emphasis> attribute assigns some value to the option. + </para> + <para> + For example, this code adds some buttons to the editor and positions the toolbar. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:editor value="#{bean.editorValue}" theme="advanced" plugins="save,paste" &gt; + &lt;f:param name="theme_advanced_buttons1" value="bold,italic,underline, cut,copy,paste,pasteword"/&gt; + &lt;f:param name="theme_advanced_toolbar_location" value="top"/&gt; + &lt;f:param name="theme_advanced_toolbar_align" value="left"/&gt; +&lt;/rich:editor&gt; +...</programlisting> + <para>This is what you get as a result:</para> + <figure> + <title> Setting configuration options with &lt;f:param&gt; + + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/editor2.png"/> + </imageobject> + </mediaobject> + </figure> + + + <para>The third way to configure the <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> is + to use configuration file (.properties)</para> + + <para> + This method eases your life if you need to configure multiple instances + of the <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis>: you configure the editor once + and in one spot and the configuration properties can be applied to any + <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> in your application. + </para> + <para>To implement this type of configuration you need to take a few steps:</para> + <itemizedlist> + <listitem> + <para> + Create a configuration file (.properties) in the classpath folder and add some properties to it. + Use standard syntax for the .properties files: <code>parameter=value</code>. + Here is an example of configuration file: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">theme="advanced" +plugins="save,paste" +theme_advanced_buttons1="bold,italic,underline, cut,copy,paste,pasteword" +theme_advanced_toolbar_location="top" +theme_advanced_toolbar_align="left" +</programlisting> + </listitem> + <listitem> + <para> + The properties stored in configuration file are passed to the + <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> via + <emphasis> + <property>"configuration"</property> + </emphasis> attribute which takes the name of the configuration file + as a value (with out .properties extension). + </para> + <para> + For example, if you named the configuration file "editorconfig", you would address it as follows: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:editor value="#{bean.editorValue}" configuration="editorconfig"/&gt; +...</programlisting> + </listitem> + <listitem> + <para> + Alternately, you can use a EL-expression to define a configuration file. + This way you can dynamically change the sets of configuration properties. + </para> + + <para> + For example, you have two configuration files "configurationAdvanced" and "configurationSimple" and you want them to be + applied under some condition. + </para> + <para> + To do this you need to bind <emphasis> + <property>"configuration"</property> + </emphasis> + attribute to the appropriate bean property like this. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:editor value="#{bean.editorValue}" configuration="#{editor.configuration}" /&gt; +...</programlisting> + <para>Your Java file should look like this.</para> + + <programlisting role="JAVA">... +String configuration; + +if(some condition){//defines some condition + configuration = "configurationAdvanced"; //the name on the file with advanced properties +} +else{ + configuration= "configurationSimple"; //the name on the file with simplified properties +} +...</programlisting> + </listitem> + + </itemizedlist> + + + <para> + You also might want to add some custom plug-ins to your editor. + You can read about how to create a plugin in <ulink url="http://wiki.moxiecode.com/index.php/TinyMCE:Creating_Plugin&quo... Wiki article</ulink>. + </para> + + <para> + Adding a custom plugin also requires a few steps to take. Though, the procedure is very similar to adding a configuration file. + + </para> + + <para>This is what you need to add a plugin:</para> + <itemizedlist> + <listitem> + <para>Create a .properties file and put the name of the plug-in and a path to it into the file. + The file can contain multiple plug-in declarations. Your .properties file should be like this. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +pluginName=/mytinymceplugins/plugin1Name/editor_plugin.js +...</programlisting> + </listitem> + <listitem> + <para> + Use the <emphasis> + <property>"customPlugins"</property> + </emphasis> attribute to specify the .properties file with a plugin name and a path to it. + </para> + <para> + If your .properties file is named "myPlugins", then your will have this code on the page. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:editor theme="advanced" customPlugins="myPlugins" plugins="pluginName" /&gt; +...</programlisting> + </listitem> + </itemizedlist> + <note> + <title>Note:</title> + <para> +Some plug-ins which available for download might have some dependencies on TinyMCE scripts. +For example, dialog pop-ups require tiny_mce_popup.js script file. +Assuming that you will not plug custom plugins to the RF jar with editor component +(standard TinyMCE plugins creation implies that plugins are put into TinyMCE's corresponding directory) + you should manually add required TinyMCE scripts to some project folder and correct the js includes. + </para> + </note> + <para> + The implementation of the <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> component has two methods for handling + events. + </para> + <para>The attributes take some function name as a value with is triggered on the appropriate event. You need to use standard JavaScript function calling syntax. </para> + + <itemizedlist> + <listitem> + <para>Using attributes (<emphasis> + <property>"onchange"</property> + </emphasis>, + <emphasis> + <property>"oninit"</property> + </emphasis>, + <emphasis> + <property>"onsave"</property> + </emphasis>, + <emphasis> + <property>"onsetup"</property> + </emphasis>) + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:editor value="#{bean.editorValue}" onchange="myCustomOnChangeHandler()" /&gt; +...</programlisting> + </listitem> + <listitem> + <para> + Using <emphasis role="bold"> + <property>&lt;f:param&gt;</property> + </emphasis> as a child element defining the <emphasis> + <property>"name"</property> + </emphasis> attribute + with one of the TinyMCE's callbacks and the + <emphasis> + <property>"value"</property> + </emphasis> attribute takes the function name you want to be called + on the corresponding event as the value. Note, that the syntax in this case is a bit different: parentheses are not required. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:editor value="#{bean.editorValue}"&gt; + &lt;f:param name="onchange" value="myCustomOnChangeHandler" /&gt; +&lt;/rich:editor&gt; +...</programlisting> + </listitem> + </itemizedlist> + + <para>The <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> + component has a build-in converter that renders HTML code generated by the editor + to Seam text (you can read more on Seam in <ulink url="http://docs.jboss.org/seam/1.1.5.GA/reference/en/html/text.html... guide</ulink>.), it also interprets Seam text + passed to the <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> and renders it to HTML. + The converter can be enable with the <emphasis> + <property>"useSeamText"</property> + </emphasis> attribute.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <para>This HTML code generated by editor</para> + <programlisting role="XML">... +&lt;p&gt;&lt;a href="http://mysite.com"&gt;Lorem ipsum&lt;/a&gt; &lt;i&gt;dolor sit&lt;/i&gt; amet, ea &lt;u&gt;commodo&lt;/u&gt; consequat.&lt;/p&gt; +...</programlisting> + <para>will be parsed to the following Seam text:</para> + + <programlisting role="XML">... +[Lorem ipsum=&gt;http://mysite.com] *dolor sit* amet, ea _commodo_ consequat. +...</programlisting> + <para>Accordingly, if the Seam text is passed to the component it will be parsed to HTML code.</para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/editor.html">Table of + &lt;rich:editor&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.component.editor</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.Htmleditor</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.editor</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.editorRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.editorTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>CSS selectors for the layout of the editor</title> + <tgroup cols="4"> + <thead> + <row> + <entry>Class name (selector)</entry> + <entry>Description</entry> + <entry>Skin Parameter</entry> + <entry>CSS property</entry> + </row> + </thead> + <tbody> + <row> + <entry>.richfacesSkin .mceButton</entry> + <entry>Defines styles for the buttons</entry> + <entry>n/a</entry> + <entry>background-image</entry> + </row> + + <row> + <entry>.richfacesSkin .mceButtonDisabled .mceIcon </entry> + <entry>Defines styles for the icons</entry> + <entry>n/a</entry> + <entry>opacity</entry> + </row> + + <row> + <entry>.richfacesSkin .mceIframeContainer</entry> + <entry>Defines styles for the container</entry> + <entry>panelBorderColor</entry> + <entry>border-top-color, border-bottom-color</entry> + </row> + + <row> + <entry morerows="2">.richfacesSkin .mceListBox .mceText</entry> + <entry morerows="2">Defines styles for the list box</entry> + <entry>generalFamilyFont</entry> + <entry>font-family</entry> + </row> + <row> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + <row> + <entry>tableBackgroundColor</entry> + <entry>background</entry> + </row> + + <row> + <entry>.richfacesSkin .mceExternalToolbar</entry> + <entry>Defines styles for the toolbar</entry> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + + <row> + <entry>.richfacesSkin .mceMenu</entry> + <entry>Defines styles for the menus</entry> + <entry>panelBorderColor</entry> + <entry>border-color</entry> + </row> + + <row> + <entry>.richfacesSkin .mceMenu .mceMenuItemActive</entry> + <entry>Defines styles for the active menu items</entry> + <entry>additionalBackgroundColor</entry> + <entry>background-color</entry> + </row> + + <row> + <entry>.richfacesSkin .mceSeparator</entry> + <entry>Defines styles for the buttons separator</entry> + <entry>n/a</entry> + <entry>background-image</entry> + </row> + + <row> + <entry>.richfacesSkin table.mceLayout</entry> + <entry>Defines styles for the table layout</entry> + <entry>panelBorderColor</entry> + <entry>border-left-color, border-right-color</entry> + </row> + + <row> + <entry>.richfacesSkin table.mceToolbar</entry> + <entry>Defines styles for the rows of icons within toolbar</entry> + <entry>n/a</entry> + <entry>padding</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + + <para>The <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> is based on TinyMCE editor and supports almost all its features and properties some of which are not described here since you can find more detailed documentation on them on the official <ulink url="http://wiki.moxiecode.com/index.php/TinyMCE:Index">web site.</ulink> + </para> + + + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/editor.jsf?... RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> + <property>&lt;rich:editor&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_effect.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,252 @@ +<section role="NotInToc" id="rich_effect"> + <title> + &lt; + rich:effect + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> utilizes a set of effects provided by the scriptaculous JavaScript library. + It allows to attach effects to JSF components and html tags. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>No developers JavaScript writing needed to use it on pages</para> + </listitem> + <listitem> + <para>Presents scriptaculous JavaScript library functionality</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> It is possible to use <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> in two modes: <itemizedlist> + <listitem> + <para>attached to the JSF components or html tags and triggered by a particular event. + Wiring effect with JSF components might occur on the server or client. Wiring with html + tag is possible only on the client side </para> + </listitem> + <listitem> + <para>invoking from the JavaScript code by an effect name. During the rendering, + <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> generates the JavaScript function with defined name. + When the function is called, the effect is applied </para> + </listitem> + </itemizedlist> + </para> + <para> + <emphasis role="bold">Those a the typical variants of using:</emphasis> + </para> + <programlisting role="XML">... +&lt;!-- attaching by event --&gt; +&lt;rich:panel&gt; + &lt;rich:effect event="onmouseout" type="Opacity" params="duration:0.8,from:1.0,to:0.3" /&gt; + &lt;!--panel content--&gt; +&lt;/rich:panel&gt; +... + +&lt;!-- invoking from JavaScript --&gt; +&lt;div id="contentDiv"&gt; + &lt;!--div content--&gt; +&lt;/div&gt; + +&lt;input type="button" onclick="hideDiv({duration:0.7})" value="Hide" /&gt; +&lt;input type="button" onclick="showDiv()" value="Show" /&gt; + +&lt;rich:effect name="hideDiv" for="contentDiv" type="Fade" /&gt; +&lt;rich:effect name="showDiv" for="contentDiv" type="Appear" /&gt; + +&lt;!-- attaching to window on load and applying on particular page element --&gt; +&lt;rich:effect for="window" event="onload" type="Appear" params="targetId:'contentDiv',duration:0.8,from:0.3,to:1.0" /&gt; +... +</programlisting> + + <figure> + <title>Initial</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/effect_init.png"/> + </imageobject> + </mediaobject> + </figure> + + <figure> + <title>When the mouse cursor is over</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/effect_2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + <emphasis> + <property>"name"</property> + </emphasis> attribute defines a name of the JavaScript function that is be generated on a page + when the component is rendered. You can invoke this function to activate the effect. The + function accesses one parameter. It is a set of effect options in JSON format. </para> + + <para> + <emphasis> + <property>"type"</property> + </emphasis> attribute defines the type of an effect. For example, "Fade", "Blind", "Opacity". + Have a look at <ulink url="http://script.aculo.us">scriptaculous documentation</ulink> for set + of available effect. </para> + + <para> + <emphasis> + <property>"for"</property> + </emphasis> attribute defines the id of the component or html tag, the effect is attached + to. RichFaces converts the <emphasis> + <property>"for"</property> + </emphasis> attribute value to the client id of the component if such component is found. If + not, the value is left as is for possible wiring with on the DOM element's id on the client + side. By default, the target of the effect is the same element that effect pointed to. + However, the target element is might be overridden with <emphasis> + <property>"targetId"</property> + </emphasis> option passed with <emphasis> + <property>"params"</property> + </emphasis> attribute of with function paramenter. </para> + + <para> + <emphasis> + <property>"params"</property> + </emphasis> attribute allows to define the set of options possible for particurar effect. For + example, 'duration', 'delay', 'from', 'to'. Additionally to the options used by the effect + itself, there are two option that might override the <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> + attribute. Those are: <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"targetId"</property> + </emphasis> allows to re-define the target of effect. The option is override the value of <emphasis> + <property>"for"</property> + </emphasis> attribute.</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"type"</property> + </emphasis> defines the effect type. The option is override the value of <emphasis> + <property>"type"</property> + </emphasis> attribute.</para> + </listitem> + </itemizedlist> + </para> + + <para> You can use a set of effects directly without defining the <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> component on a page if it's convenient for you. For that, load the + scriptaculous library to the page with the following code: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;a4j:loadScript src="resource://scriptaculous/effect.js" /&gt; +... +</programlisting> + <para> If you do use the <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis>component, there is no need to include this library because it's already here. </para> + + <para>For more information look at <ulink url="http://jboss.com/index.html?module=bb&amp;op=viewtopic&... + Users Forum</ulink>.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/effect.html">Table of + &lt;rich:effect&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Effect</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlEffect</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Effect</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.EffectRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.EffectTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://wiki.jboss.org/wiki/CreateABannerUsingEffectsAndPoll&quo... + Here + </ulink> + you can get additional information how to create an image banner + using + <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> + and + <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> + components and figure out how to create an HTML banner from + <ulink url="http://wiki.jboss.org/auth/wiki/CreateAHTMLBannerUsingEffectsAn... + "Creating HTML Banner Using Effects And Poll RichFaces Wiki" article + </ulink> + . + </para> + <para>In the + <ulink url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/SlideShow&quo... Cookbook article</ulink> + you can find information how to make a Slide Show with help of the + <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> + and <emphasis role="bold"> + <property>&lt;a4j:poll&gt;</property> + </emphasis> components. + </para> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/effect.jsf?... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis> usage. </para> + <para>How to save <emphasis role="bold"> + <property>&lt;rich:effect&gt;</property> + </emphasis>status see on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_extendedDataTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_extendedDataTable.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_extendedDataTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,442 @@ +<section role="NotInToc" id="rich_extendedDataTable"> + <title> + &lt; + rich:extendedDataTable + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.2</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component for tables extending standard component <emphasis role="bold"> + <property moreinfo="none">&lt;rich:dataTable&gt;</property> + </emphasis>.</para> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/extendedDataTable_init.png" width="75%"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Possibility to scroll data</para> + </listitem> + <listitem> + <para>Possibility to add an attribute to set the kind of + selection (none, single line or multiple + lines)</para> + </listitem> + <listitem> + <para>Possibility to change the sequence of the displayed + columns by dragging the column-header to another + position</para> + </listitem> + <listitem> + <para>Possibility to show or hide columns by selecting or + deselecting them in a context menu</para> + </listitem> + <listitem> + <para>Possibility to save the current settings (visible + columns, column width, sequence of the columns) to + be reused the next time the page will be + shown</para> + </listitem> + <listitem> + <para>Possibility to combine rows to groups</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> component is similar to the <emphasis role="bold"> + <property moreinfo="none">&lt;rich:dataTable&gt;</property> + </emphasis>. The data in component is scrollable. You can also set the + type of selection (<emphasis> + <property moreinfo="none">"none",</property> + </emphasis> + <emphasis> + <property moreinfo="none">"single"</property> + </emphasis> or <emphasis> + <property moreinfo="none">"multi"</property> + </emphasis> lines). Selection of multiple lines is possible using + Shift and Ctrl keys.</para> + <para>Here is an example:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML" format="linespecific">... +&lt;rich:extendedDataTable id="edt" value="#{extendedDT.dataModel}" var="edt" width="500px" height="500px" selectedClass="dataTableSelectedRow" sortMode="single" selectionMode="multi" selection="#{extendedDT.selection}" rowKeyVar="rkvar" tableState="#{extendedDT.tableState}"&gt; + &lt;rich:column id="id" headerClass="dataTableHeader" width="50" label="Id" sortable="true" sortBy="#{edt.id}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Id" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{edt.id}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="name" width="300" headerClass="dataTableHeader" label="Name" sortable="true" sortBy="#{edt.name}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon" filterBy="#{edt.name}" filterEvent="onkeyup" visible="false"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Name" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{edt.name}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="date" width="100" headerClass="dataTableHeader" label="Date" sortable="true" comparator="#{extendedDT.dateComparator}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Date" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{edt.date}"&gt;&lt;f:convertDateTime pattern="yyyy-MM-dd HH:mm:ss" /&gt; + &lt;/h:outputText&gt; + &lt;/rich:column&gt; + &lt;rich:column id="group" width="50" headerClass="dataTableHeader" label="Group" sortable="true" sortBy="#{edt.group}" sortIconAscending="dataTableAscIcon" sortIconDescending="dataTableDescIcon"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Group" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{edt.group}" /&gt; + &lt;/rich:column&gt; +&lt;/rich:extendedDataTable&gt; +...</programlisting> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> component with selected multiple lines</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/extendedDataTable_init2.png" width="75%"/> + </imageobject> + </mediaobject> + </figure> + <para>Information about sorting and filtering can be found in <link linkend="sort">RichFaces Developer Guide section on sorting</link>. + </para> + <para> + For external filtering + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> + component supports <emphasis> + <property moreinfo="none">"filter"</property> + </emphasis> facet + for <emphasis role="bold"> + <property moreinfo="none">&lt;rich:column&gt;</property> + </emphasis> component. + In this facet you can define your own controls for filtering which will be positioned like built-in filter controls. + Rest of the filter scenario is the same as described <link linkend="filter">RichFaces Developer Guide section on filtering</link>. + </para> + <para> In the example <emphasis> + <property moreinfo="none">"selection"</property> + </emphasis> attribute contains object with selected rows. </para> + <note> + <title>Note:</title> + <para> Attribute<emphasis> + <property moreinfo="none">"height"</property> + </emphasis>is mandatory. The default value is <emphasis> + <property moreinfo="none">"500px"</property> + </emphasis>. </para> + </note> + <para> Menu on the right side of the column header is used to perform action: + sorting, grouping, hiding columns. </para> + <para>This is an example:</para> + <figure float="0"> + <title>Column menu</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/extendedDataTable_init3.png" width="50%"/> + </imageobject> + </mediaobject> + </figure> + <para> After selecting a "Group by this column" option, you can see the data + grouped. You can collapse and expand groups by clicking on a group + header. </para> + <para>This is an example:</para> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> component with grouped data</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/extendedDataTable_init4.png" width="75%"/> + </imageobject> + </mediaobject> + </figure> + <para> The <emphasis> + <property moreinfo="none">"label"</property> + </emphasis> attribute in <emphasis role="bold"> + <property moreinfo="none">&lt;rich:column&gt;</property> + </emphasis> sets the name of the column, which is used when dragging + columns (in drag window) and in context menu, in "Columns" submenu. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML" format="linespecific">... +&lt;rich:column id="name" label="#{msg['name']}" +...</programlisting> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> component with Drag&amp;Drop column 'Name'</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/extendedDataTable_init5.png" width="75%"/> + </imageobject> + </mediaobject> + </figure> + <para> In the component <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> columns can hidden: </para> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:extendedDataTable&gt;</property> + </emphasis> component with hidden column 'Id' and 'Group'</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/extendedDataTable_init6.png" width="75%"/> + </imageobject> + </mediaobject> + </figure> + <!-- <para> + For each column can be set the filter. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... + <rich:column id="name" + filterBy="#{entity.name}" filterEvent="onkeyup"> +... +]]></programlisting> + + <figure> + <title><emphasis role="bold"> + <property>&lt;&extDataTable;&gt;</property> + </emphasis> component with filtered column 'Name'</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/extendedDataTable_filtered.png" width="75%"/> + </imageobject> + </mediaobject> + </figure> + --><para> + <emphasis> + <property moreinfo="none">"tableState"</property> + </emphasis> attribute can be used to bind state of the table (column + width, column position, visible, sequence, grouping...) to a + backing-bean string property, for a later used. This state can be for + example saved to a database, and it is different form standard JSF + state saving mechanisms.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML" format="linespecific">... +&lt;rich:extendedDataTable tableState="#{extendedDT.tableState}"&gt; +... +</programlisting> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/extendedDataTable.html">Table of + &lt;rich:extendedDataTable&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ExtendedDataTable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlExtendedDataTable</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ExtendedDataTable</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ExtendedDataTableRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ExtendedDataTableTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Redefines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Redefines the footer content</entry> + </row> + <row> + <entry>caption</entry> + <entry>Redefines the caption content</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="ExtdTC"> + <title>Classes names that define a whole component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-extdt</entry> + <entry>Defines styles for all + table</entry> + </row> + <row> + <entry>rich-extdt-caption</entry> + <entry>Defines styles for a + "caption" + facet element</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define header and footer elements</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-extdt-header</entry> + <entry>Defines styles for a table header + row</entry> + </row> + <row> + <entry>rich-extdt-header-continue</entry> + <entry>Defines styles for all header + lines after the first</entry> + </row> + <row> + <entry>rich-extdt-subheader</entry> + <entry>Defines styles for a column + header</entry> + </row> + <row> + <entry>rich-extdt-footer</entry> + <entry>Defines styles for a footer + row</entry> + </row> + <row> + <entry>rich-extdt-footer-continue</entry> + <entry>Defines styles for all footer + lines after the first</entry> + </row> + <row> + <entry>rich-extdt-subfooter</entry> + <entry>Defines styles for a column + footer</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define rows and cells of a table</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-extdt-headercell</entry> + <entry>Defines styles for a header + cell</entry> + </row> + <row> + <entry>rich-extdt-subheadercell</entry> + <entry>Defines styles for a column + header cell</entry> + </row> + <row> + <entry>rich-extdt-cell</entry> + <entry>Defines styles for a table + cell</entry> + </row> + <row> + <entry>rich-extdt-row</entry> + <entry>Defines styles for a table + row</entry> + </row> + <row> + <entry>rich-extdt-firstrow</entry> + <entry>Defines styles for a table start + row</entry> + </row> + <row> + <entry>rich-extdt-footercell</entry> + <entry>Defines styles for a footer + cell</entry> + </row> + <row> + <entry>rich-extdt-subfootercell</entry> + <entry>Defines styles for a column + footer cell</entry> + </row> + <row> + <entry>rich-extdt-group-cell</entry> + <entry>Defines styles for a grouping row cell</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Some additional information about usage of component can be found + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/extendedDat... its LiveDemo page</ulink>.</para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_fileUpload.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_fileUpload.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_fileUpload.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,1040 @@ +<section role="NotInToc" id="rich_fileUpload"> + <title> + &lt; + rich:fileUpload + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component designed to perform Ajax-ed files upload to server. + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>ProgressBar shows the status of downloads</para> + </listitem> + <listitem> + <para>Restriction on File type, file size and number of files to be uploaded</para> + </listitem> + <listitem> + <para>Multiple files upload support</para> + </listitem> + <listitem> + <para>Embedded Flash module</para> + </listitem> + <listitem> + <para>Possibility to cancel the request</para> + </listitem> + <listitem> + <para>One request for every upload</para> + </listitem> + <listitem> + <para>Automatic uploads</para> + </listitem> + <listitem> + <para>Supports standard JSF internationalization</para> + </listitem> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Disablement support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component consists of two parts:<itemizedlist> + <listitem> + <para> + <property>List of files</property> which contains the list of currently + chosen files to upload with possibility to manage every file </para> + </listitem> + <listitem> + <para> + <property>Component controls</property> - the bar with controls for managing + the whole component </para> + </listitem> + </itemizedlist> + </para> + + + <para> There are two places where the uploaded files are stored: </para> + <itemizedlist> + <listitem> + <para> In the temporary folder (depends on OS) if the value of the + <code>createTempFile</code> parameter in <property>Ajax4jsf + Filter</property> (in web.xml) section is "true" (by Default) </para> + <programlisting role="XML">... +&lt;init-param&gt; + &lt;param-name&gt;createTempFiles&lt;/param-name&gt; + &lt;param-value&gt;true&lt;/param-value&gt; +&lt;/init-param&gt; +...</programlisting> + </listitem> + <listitem> + <para> In the RAM if the value of the <code>createTempFile</code> parameter in + <property>Ajax4jsf Filter</property> section is "false". + This is a better way for storing small-sized files. </para> + </listitem> + </itemizedlist> + + <para> The <emphasis> + <property>"uploadData"</property> + </emphasis> attribute defines the collection of files uploaded. See the example below. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload uploadData="#{bean.data}"/&gt; +...</programlisting> + + <para>The <emphasis> + <property>"fileUploadedListener"</property> + </emphasis> is called at server side after every file uploaded and used for the saving + files from temporary folder or RAM. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}"/&gt; + ...</programlisting> + <para> The following methods for processing the uploaded files are available: </para> + <itemizedlist> + <listitem> + <para> + <code>isMultiUpload()</code>. It returns "true" if several + files have been uploaded </para> + </listitem> + <listitem> + <para> + <code>getUploadItems()</code>. It returns the list of the uploaded files. If one + file was uploaded, the <code>getUploadItems()</code> method will return the list + consisting of one file </para> + </listitem> + <listitem> + <para> + <code>getUploadItem()</code>. It returns the whole list in case of uploading one + file only. If several files were uploaded, the <code>getUploadItem()</code> + method will return the first element of the uploaded files list. </para> + </listitem> + </itemizedlist> + <para> Automatically files uploading could be performed by means of the <emphasis> + <property> "immediateUpload"</property> + </emphasis> attribute. If the value of this attribute is "true" files + are uploaded automatically once they have been added into the list. All next files in + the list are uploaded automatically one by one. If you cancel uploading process next + files aren't started to upload till you press the "Upload" + button or clear the list. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}" immediateUpload="true"/&gt; + ...</programlisting> + + <para> The <emphasis> + <property> "autoclear"</property> + </emphasis> attribute is used to remove automatically files from the list after upload + completed. See the simple example below. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload uploadData="#{bean.data}" autoclear="true"/&gt; +...</programlisting> + <para> Each file in list waiting for upload has link "Cancel" opposite its name. + Clicking this link invokes JS API <code>remove()</code> function, which gets <code>$('id').component.entries[i]</code> as a parameter + and removes the particular file from list and from the queue for upload. + After a file has been uploaded the link "Cancel" changes to "Clear". + Clicking "Clear" invokes <code>clear()</code> JS API function, which also gets ID of the particular entry and removes it from the list. + Uploaded to server file itself is kept untouched. + </para> + + <!--RESTRICTIONS--> + + <para> The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component provides following restrictions: </para> + <itemizedlist> + <listitem> + <para> On <property> file types</property>, use <emphasis> + <property> "acceptedTypes"</property> + </emphasis> attribute to define file types accepted by component. In the example + below only files with "html" and "jpg" + extensions are accepted to upload. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload acceptedTypes="html, jpg"/&gt; +...</programlisting> + </listitem> + <listitem> + <para> On <property> file size</property>, use the <code>maxRequestSize</code> + parameter(value in bytes) inside <property>Ajax4jsf Filter</property> section in + <property>web.xml</property>: </para> + <programlisting role="XML">... +&lt;init-param&gt; + &lt;param-name&gt;maxRequestSize&lt;/param-name&gt; + &lt;param-value&gt;1000000&lt;/param-value&gt; +&lt;/init-param&gt; +...</programlisting> + </listitem> + <listitem> + <para> On <property>max files quantity</property>, use the <emphasis> + <property> "maxFilesQuantity"</property> + </emphasis> attribute to define max number of files allowed to be uploaded. + After a number of files in the list equals to the value of this attribute + "Add" button is disabled and nothing could be uploaded even if + you clear the whole list. In order to upload files again you should rerender the + component. As it could be seen in the example below, only 2 files are accepted + for uploading. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload maxFilesQuantity="2"/&gt; +...</programlisting> + <para> This is the result: </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis>with <emphasis> + <property> "maxFilesQuantity"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload2.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + </itemizedlist> + + + + + <para id="fileUploadEventAttributes">The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component provides a number of specific event attributes: </para> + <itemizedlist> + + <listitem> + <para> The <emphasis> + <property> "onadd"</property> + </emphasis>a event handler called on an add file operation </para> + </listitem> + + <listitem> + <para> The <emphasis> + <property> "onupload"</property> + </emphasis> which gives you a possibility to cancel the upload at client side + </para> + </listitem> + <listitem> + <para> The <emphasis> + <property> "onuploadcomplete"</property> + </emphasis> which is called after all files from the list are uploaded </para> + </listitem> + <listitem> + <para> The <emphasis> + <property> "onuploadcanceled"</property> + </emphasis> which is called after upload has been canceled via cancel control + </para> + </listitem> + <listitem> + <para> The <emphasis> + <property> "onerror"</property> + </emphasis> which is called if the file upload was interrupted according to any + errors </para> + </listitem> + </itemizedlist> + + + + + <!--Flash Module--> + <para> The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component has an embedded Flash module that adds extra functionality to the + component. The module is enabled with <emphasis> + <property> "allowFlash"</property> + </emphasis> attribute set to "true". </para> + <para>These are the additional features that the Flash module provides:</para> + + <itemizedlist> + <listitem> + <para>Multiple files choosing;</para> + </listitem> + <listitem> + <para>Permitted file types are specified in the "Open File" dialog + window;</para> + </listitem> + <listitem> + <para>A number of additional entry object properties are also available, which can + be found <link linkend="objectProperties">RichFaces Developer Guide section on object properties</link>. </para> + </listitem> + </itemizedlist> + + <para>Apart from uploading files to the sever without using Ajax, the Flash module provides + a number of useful API functions that can be used to obtain information about the + uploaded file. </para> + + <para>There are 2 ways to obtain the data stored in the FileUploadEntry object. </para> + + <itemizedlist> + <listitem> + <para>By means of JavaScript on the client side. Use the following syntax for that + <code>entries[i].propertyName</code>. For example + <code>entries[0].state</code> will return the state of the file the is being + processed or has just been processed.</para> + </listitem> + + + <listitem> + <para>The properties of <code>FileUploadEntry</code> object can be retrieved using + the <code>entry.propertyName</code> expression in the specific event attributes. + For example, + <code>onupload="alert(event.memo.entry.fileName);" </code> + will display a message with the name of the file at the very moment when upload + operation starts. A full list of properties can be found in <link linkend="objectPropertiesWithAttributes">RichFaces Developer Guide section on properties and their attributes</link>.</para> + </listitem> + + + </itemizedlist> + <para>The given bellow code sample demonstrates how the properties can be used. Please study + it carefully. </para> + <programlisting role="XML">... +&lt;head&gt; + &lt;script&gt; + function _onaddHandler (e) { + var i = 0; + for (; i &lt; e.memo.entries.lenght; i++) { + alert(e.memo.entries[i].creator); //Shows creators of the added files + } + } + + function _onerrorhandle(e) { + alert(e.memo.entry.fileName + "file was not uploaded due transfer error"); + } + &lt;/script&gt; +&lt;/head&gt; + ...</programlisting> + + + + <para> Moreover, embedded Flash module provides a smoother representation of progress bar + during the uploading process: the polling is performed is not by Ajax, but my means of + the flash module. </para> + <figure> + <title> Uploading using Flash module <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/flash_fileUpload.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>However, the Flash module doens't perform any visual representation of the + component.</para> + + <!--End of Flash Module--> + + + + + + <para> In order to customize the information regarding the ongoing process you could use <emphasis> + <property>"label"</property> + </emphasis> facet with the following macrosubstitution: <itemizedlist> + <listitem> + <para> + <code> {B}</code>, <code>{KB}</code>, <code>{MB}</code> contains the size of + file uploaded in bytes, kilobytes, megabytes respectively </para> + </listitem> + <listitem> + <para> + <code>{_B}</code>, <code>{_KB}</code>, <code>{_MB}</code> contains the + remain file size to upload in bytes, kilobytes, megabytes respectively + </para> + </listitem> + <listitem> + <para> + <code>{ss}</code>, <code>{mm}</code>, <code>{hh}</code> contains elapsed + time in seconds, minutes and hours respectively </para> + </listitem> + </itemizedlist> + </para> + + <!-- + There is a number of facets providing for this component: + <emphasis> + <property> &quot;header&quot;</property></emphasis> + + <emphasis> + <property> &quot;footer&quot;</property></emphasis> + <emphasis> + <property> &quot;label&quot;</property></emphasis>. could be used to provide displaying the progress of uploading. + --> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload uploadData="#{bean.data}" fileUploadListener="#{bean.listener}"&gt; + &lt;f:facet name="label"&gt; + &lt;h:outputText value="{_KB}KB from {KB}KB uploaded --- {mm}:{ss}" /&gt; + &lt;/f:facet&gt; +&lt;/rich:fileUpload&gt; +...</programlisting> + <para>This is the result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> with <emphasis> + <property> "label"</property> + </emphasis> facet </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>You could define labels of the <property>component controls</property> with the help + of <emphasis> + <property> "addControlLabel"</property> + </emphasis>, <emphasis> + <property> "clearAllControlLabel"</property> + </emphasis>, <emphasis> + <property> "clearControlLabel"</property> + </emphasis>, <emphasis> + <property> "stopEntryControlLabel"</property> + </emphasis>, <emphasis> + <property> "uploadControlLabel"</property> + </emphasis> attributes. See the following example. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload addControlLabel="Add file..." clearAllControlLabel="Clear all" clearControlLabel="Clear" + stopEntryControlLabel="Stop process" uploadControlLabel="Upload file"/&gt; +...</programlisting> + <para> This is the result: </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> with labels </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload4.png"/> + </imageobject> + </mediaobject> + </figure> + <para> The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component allows to use sizes attributes: </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property> "listHeight"</property> + </emphasis> attribute specify height for list of files in pixels </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "listWidth"</property> + </emphasis> attribute specify width for list of files in pixels </para> + </listitem> + </itemizedlist> + + <para> In order to disable the whole component you could use the <emphasis> + <property> "disabled"</property> + </emphasis> attribute. See the following example. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload disabled="true"/&gt; +...</programlisting> + <para>This is the result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis>with <emphasis> + <property> "disabled"</property> + </emphasis> attribute </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/fileUpload5.png"/> + </imageobject> + </mediaobject> + </figure> + <para>It's possible to handle events for fileUpload using JavaScript code. A + simplest example of usage JavaScript API is placed below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:fileUpload id="upload" disabled="false"/&gt; +&lt;h:commandButton onclick="${rich:component('upload')}.disable();" value="Disable" /&gt; +...</programlisting> + + <para> + <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component also provides a number of JavaScript property, that can be used to + process uploaded files, file states etc. The given below example illustrates how the + <code>entries[0].state</code> property can be used to get access to the file state. + Full list of JavaScript properties can be found <link linkend="objectProperties">below</link>. </para> + + + <programlisting role="XML">... +&lt;rich:fileUpload fileUploadListener="#{fileUploadBean.listener}" + maxFilesQuantity="#{fileUploadBean.uploadsAvailable}" + id="upload" + immediateUpload="#{fileUploadBean.autoUpload}" + acceptedTypes="jpg, gif, png, bmp"/&gt; + &lt;a4j:support event="onuploadcomplete" reRender="info" /&gt; +&lt;/rich:fileUpload&gt; +&lt;h:commandButton onclick="if($('j_id232:upload').component.entries[0].state == FileUploadEntry.UPLOAD_SUCCESS) alert ('DONE');" value="Check file state"/&gt; +...</programlisting> + + + <para>The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component allows to use internationalization method to redefine and localize + the labels. You could use application resource bundle and define + <code>RICH_FILE_UPLOAD_CANCEL_LABEL</code>, + <code>RICH_FILE_UPLOAD_STOP_LABEL</code>, <code>RICH_FILE_UPLOAD_ADD_LABEL</code>, + <code>RICH_FILE_UPLOAD_UPLOAD_LABEL</code>, + <code>RICH_FILE_UPLOAD_CLEAR_LABEL</code>, + <code>RICH_FILE_UPLOAD_CLEAR_ALL_LABEL</code>, + <code>RICH_FILE_UPLOAD_PROGRESS_LABEL</code>, + <code>RICH_FILE_UPLOAD_SIZE_ERROR_LABLE</code>, + <code>RICH_FILE_UPLOAD_TRANSFER_ERROR_LABLE</code>, + <code>RICH_FILE_UPLOAD_ENTRY_STOP_LABEL</code>, + <code>RICH_FILE_UPLOAD_ENTRY_CLEAR_LABEL</code>, + <code>RICH_FILE_UPLOAD_ENTRY_CANCEL_LABEL</code> there. </para> + + + + <!--para> The <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> component could work together with Seam framework. <ulink + url="http://www.jboss.org/file-access/default/members/jbossrichfaces... + >On RichFaces LiveDemo page </ulink> you can see how to configure filter for this framework in web.xml file + in order to handle <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> requests. </para--> + <para>To make <property>&lt;rich:fileUpload&gt;</property> component work properly + with MyFaces extensions, the order in which filters are defined and mapped in web.xml, + is important. See <ulink url="http://www.jboss.org/community/docs/DOC-13537">correspo... FAQ chapter</ulink>. </para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/fileUpload.html">Table of + &lt;rich:fileUpload&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.component.FileUpload</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlFileUpload</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.FileUpload</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.FileUploadRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.FileUploadTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>beforeSubmit()</entry> + <entry>Sets up necessary request parameters for file uploading and submits + form to server by command button. This method should be used together + with commands. </entry> + </row> + + <row> + <entry>clear()</entry> + <entry>Removes all files from the list. The function can also get the <code>$('id').component.entries[i]</code> as a parameter to remove a particular file.</entry> + </row> + + <row> + <entry>disable()</entry> + <entry>Disables the component</entry> + </row> + + <row> + <entry>enable()</entry> + <entry>Enables the component</entry> + </row> + + <row> + <entry>remove()</entry> + <entry>Cancels the request for uploading a file by removing this file from + upload list and upload queue. Gets <code>$('id').component.entries[i]</code> as a parameter.</entry> + </row> + + <row> + <entry>stop()</entry> + <entry>Stops the uploading process</entry> + </row> + + <row> + <entry>submitForm()</entry> + <entry>Submits form to server. All added files will be put to model and + event.</entry> + </row> + + </tbody> + </tgroup> + </table> + <table id="objectProperties"> + <title>Client-side object properties</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Property</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>entries</entry> + <entry>Returns a array of all files in the list </entry> + </row> + + + + <row> + <entry>entries.length</entry> + <entry>Returns the number of files in the list </entry> + </row> + + + <row> + <entry>entries[i].fileName</entry> + <entry>Returns the file name, that is retrieved by the array index </entry> + </row> + + + + <row> + <entry>entries[i].state </entry> + <entry>Returns the file state. Possible states are <itemizedlist> + + <listitem> + <para>"initialized" - the file is added, + corresponds to FileUploadEntry.INITIALIZED constant </para> + </listitem> + <listitem> + <para>"progress" - the file is being uploaded, + corresponds to FileUploadEntry.UPLOAD_IN_PROGRESS + constant</para> + </listitem> + <listitem> + <para>"ready" - uploading is in process, + corresponds to FileUploadEntry.READY constant The file will + be uploaded on queue order.</para> + </listitem> + <listitem> + <para>"canceled" - uploading of the file is + canceled, corresponds to FileUploadEntry.UPLOAD_CANCELED + constant </para> + </listitem> + <listitem> + <para>"done" - the file is uploaded + successfully, corresponds to FileUploadEntry.UPLOAD_SUCCESS + constant</para> + </listitem> + <listitem> + <para>"transfer_error" - a file transfer error + occurred, corresponds to + FileUploadEntry.UPLOAD_TRANSFER_ERROR constant </para> + </listitem> + <listitem> + <para>"size_error" - the file exceeded maximum + size, corresponds to FileUploadEntry.UPLOAD_SIZE_ERROR + constant</para> + </listitem> + + + </itemizedlist> + </entry> + </row> + + + + <row> + <entry>entries[i].size</entry> + <entry> Returns the size of the file. Available in flash enabled version + only</entry> + </row> + <row> + <entry>entries[i].Type</entry> + <entry>Returns the mime type of the file. Available in flash enabled version + only</entry> + </row> + <row> + <entry>entries[i].creator </entry> + <entry>Returns the name of the author of the file. Available in flash + enabled version only</entry> + </row> + <row> + <entry>entries[i].creationDate</entry> + <entry>Returns the date when the file was created. Available in flash + enabled version only</entry> + </row> + <row> + <entry>entries[i].modificationDate</entry> + <entry>Returns the date of the last file modification. Available in flash + enabled version only</entry> + </row> + + + + + </tbody> + </tgroup> + </table> + <table id="objectPropertiesWithAttributes"> + <title>Client-side object properties available with specific <link linkend="fileUploadEventAttributes"> event attributes</link> + </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Property</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + + + + <row> + <entry>entry.state </entry> + <entry>Returns the file state. Possible states are <itemizedlist> + + <listitem> + <para>"initialized" - the file is added, + corresponds to FileUploadEntry.INITIALIZED constant </para> + </listitem> + <listitem> + <para>"progress" - the file is being uploaded, + corresponds to FileUploadEntry.UPLOAD_IN_PROGRESS + constant</para> + </listitem> + <listitem> + <para>"ready" - uploading is in process, + corresponds to FileUploadEntry.READY constant The file will + be uploaded on queue order.</para> + </listitem> + <listitem> + <para>"canceled" - uploading of the file is + canceled, corresponds to FileUploadEntry.UPLOAD_CANCELED + constant </para> + </listitem> + <listitem> + <para>"done" - the file is uploaded + successfully, corresponds to FileUploadEntry.UPLOAD_SUCCESS + constant</para> + </listitem> + <listitem> + <para>"transfer_error" - a file transfer error + occurred, corresponds to + FileUploadEntry.UPLOAD_TRANSFER_ERROR constant </para> + </listitem> + <listitem> + <para>"size_error" - the file exceeded maximum + size, corresponds to FileUploadEntry.UPLOAD_SIZE_ERROR + constant</para> + </listitem> + + + </itemizedlist> + </entry> + </row> + + <row> + <entry>entry.fileName </entry> + <entry>Returns the file's name. This property works with all event + handlers except for "onadd". </entry> + </row> + + + + <row> + <entry>entry.size</entry> + <entry> Returns the size of the file. Available in flash enabled version + only</entry> + </row> + <row> + <entry>entry.Type</entry> + <entry>Returns the mime type of the file. Available in flash enabled version + only</entry> + </row> + <row> + <entry>entry.creator </entry> + <entry>Returns the name of the author of the file. Available in flash + enabled version only</entry> + </row> + <row> + <entry>entry.creationDate</entry> + <entry>Returns the date when the file was created. Available in flash + enabled version only</entry> + </row> + <row> + <entry>entry.modificationDate</entry> + <entry>Returns the date of the last file modification. Available in flash + enabled version only</entry> + </row> + + + + + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>label</entry> + <entry>Defines the information regarding the ongoing process</entry> + </row> + <row> + <entry>progress</entry> + <entry>Defines the information regarding the uploading process</entry> + </row> + + </tbody> + </tgroup> + </table> + <table id="fileUploadCN"> + <title>Classes names that define a component representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-fileupload-list-decor</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a + fileUpload</entry> + </row> + <row> + <entry>rich-fileupload-font</entry> + <entry>Defines styles for a font of buttons and items</entry> + </row> + <row> + <entry>rich-fileupload-toolbar-decor</entry> + <entry>Defines styles for a toolbar</entry> + </row> + <row> + <entry> rich-fileupload-list-overflow</entry> + <entry>Defines styles for a list of files</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define buttons representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-fileupload-button</entry> + <entry>Defines styles for a buttons</entry> + </row> + <row> + <entry>rich-fileupload-button-border</entry> + <entry>Defines styles for a border of buttons</entry> + </row> + <row> + <entry>rich-fileupload-button-light</entry> + <entry>Defines styles for a highlight of button</entry> + </row> + <row> + <entry>rich-fileupload-button-press</entry> + <entry>Defines styles for a pressed button</entry> + </row> + <row> + <entry>rich-fileupload-button-dis</entry> + <entry>Defines styles for a disabled button</entry> + </row> + <row> + <entry>rich-fileupload-button-selection</entry> + <entry>Defines styles for "Upload", + "Clean" buttons</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define the representation of the buttons' icons</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-fileupload-ico</entry> + <entry>Defines styles for an icon</entry> + </row> + <row> + <entry>rich-fileupload-ico-add</entry> + <entry>Defines styles for a "Add" button icon</entry> + </row> + <row> + <entry>rich-fileupload-ico-start</entry> + <entry>Defines styles for a "Upload" button icon</entry> + </row> + <row> + <entry>rich-fileupload-ico-stop</entry> + <entry>Defines styles for a "Stop" button icon</entry> + </row> + <row> + <entry>rich-fileupload-ico-clear</entry> + <entry>Defines styles for a "Clear" button icon</entry> + </row> + <row> + <entry>rich-fileupload-ico-add-dis</entry> + <entry>Defines styles for a disabled "Add" button + icon</entry> + </row> + <row> + <entry>rich-fileupload-ico-start-dis</entry> + <entry>Defines styles for a disabled "Upload" button + icon</entry> + </row> + <row> + <entry>rich-fileupload-ico-clear-dis</entry> + <entry>Defines styles for a disabled "Clear" button + icon</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define list items representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-fileupload-table-td</entry> + <entry>Defines styles for a wrapper &lt;td&gt; element of a list + items</entry> + </row> + <row> + <entry>rich-fileupload-anc</entry> + <entry>Defines styles for "Cancel", + "Stop", "Clear" links</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/fileUpload.... RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> + <property>&lt;rich:fileUpload&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_gmap.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_gmap.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_gmap.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,326 @@ +<section role="NotInToc" id="rich_gmap"> + <title> + &lt; + rich:gmap + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>Component that presents the Google <property>map</property> in the JSF applications.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/gmap_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Presents all the Google <property>map</property> functionality</para> + </listitem> + <listitem> + <para>Highly customizable via attributes</para> + </listitem> + <listitem> + <para>No developers JavaScript writing needed to use on a pages</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + To use + <emphasis> + <property>Google Map</property> + </emphasis> + in your application, generate a key on + <ulink url="http://google.com/apis/maps"> + Google Map official resource + </ulink> + . One key could be used for one directory on the server. + </para> + <para> + Here are the main settings of initial rendering performed + with a component + <property>map</property> + that are accessible with the following attributes: + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"zoom"</property> + </emphasis> + defines an approximation size (boundary values 1-18) + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"lat"</property> + </emphasis> + specifies an initial latitude coordinate in degrees, + as a number between -90 and +90 + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"lng"</property> + </emphasis> + specifies an initial longitude coordinate in + degrees, as a number between -180 and +180 + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"mapType"</property> + </emphasis> + specifies a type of a rendered map (<code>G_NORMAL_MAP</code>, + <code>G_SATELLITE_MAP</code> (DEFAULT), <code>G_HYBRID_MAP</code>) + </para> + </listitem> + </itemizedlist> + <para> + For example, the city of Paris is shown after rendering with + the following initial settings: + <code>lat = "48.44"</code> + , + <code>lng = "2.24"</code> + and + <code>zoom = "5"</code> + . + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> + initial rendering + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/gmap2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + It's also possible to set accessible controls on the + <property>map</property> + with the help of the attributes: + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property> + "showGMapTypeControl" + </property> + </emphasis> + determines whether the controls for a map type + definition are switched on + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> + "showGScaleControl" + </property> + </emphasis> + determines whether the controls for scaling are + switched on + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> + "showGLargeMapControl" + </property> + </emphasis> + determines whether the control for + <property>map</property> + scale rendering is rendered + </para> + </listitem> + </itemizedlist> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> + accessible controls + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/gmap3.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + To set the controls as well as to perform other activities (Zoom + In/Out etc.) is possible with your JavaScript, i.e. declare + a name of a <property>map</property> object in the + <emphasis> + <property>"gmapVar"</property> + </emphasis> + attribute and then call the object directly with + <emphasis> + <property>Google Maps</property> + </emphasis> API. + </para> + + <para> + For instance, if you have <code>gmapVar = "map"</code> declared for your component, to zoom in a map you should call <code>map.zoomIn()</code> on an + event. See also an example of <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> usage on the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=... Live Demo</ulink>. + </para> + + <tip> + <title>Tip:</title> + <para>You do not need to use reRender to perform uptades for the <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> component. Use the <emphasis> + <property>"gmapVar"</property> + </emphasis> attribute and + <ulink url="http://code.google.com/intl/ru/apis/maps/documentation/referenc... Maps native API</ulink> instead as it's described above.</para> + </tip> + + <para> + Moreover, to add e.g. some JavaScript effects, events + defined on it are used. + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>etc.</para> + </listitem> + </itemizedlist> + + <note> + <para> + Google Map does not support XHTML format of the page. + Thus, if you use Facelets and JSF 1.2, do not forget to + put the following tags somewhere on the page: + </para> + <programlisting role="XML">... +&lt;f:view contentType="text/html"&gt;...&lt;/f:view&gt; +... +</programlisting> + </note> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/gmap.html">Table of + &lt;rich:gmap&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Gmap</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlGmap</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Gmap</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.GmapRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.GmapTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="gC"> + <title> + Classes names that define a component appearance + </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-gmap</entry> + <entry> + Defines styles for a wrapper &lt;div&gt; + element of a component + </entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/gmap.jsf?c=... + On the component Live Demo page + </ulink> + you can see the example of + <emphasis role="bold"> + <property>&lt;rich:gmap&gt;</property> + </emphasis> + usage and sources for the given example. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_graphValidator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_graphValidator.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_graphValidator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,171 @@ +<section role="NotInToc" id="rich_graphValidator"> + <title> + &lt; + rich:graphValidator + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.2</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The<emphasis role="bold"> + <property>&lt;rich:graphValidator&gt;</property> + </emphasis>component allows to register Hibernate Validators for multiple input components.</para> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Skips all JSF processing except validation</para> + </listitem> + + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + The<emphasis role="bold"> + <property>&lt;rich:graphValidator&gt;</property> + </emphasis>component behaves basically the same way as the <emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis> The deference between these two components is that in order to + validate some input data with a <emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis> component, it should be a nested element of an input component, + whereas <emphasis role="bold"> + <property>&lt;rich:graphValidator&gt;</property> + </emphasis> wraps multiple input components and validates the data received from + them. </para> + + <para>The following example demonstrates a pattern of how the <emphasis role="bold"> + <property>&lt;rich:graphValidator&gt;</property> + </emphasis> can be used:</para> + <programlisting role="XML">... +&lt;rich:graphValidator&gt; + &lt;h:panelGrid columns="3"&gt; + &lt;h:outputText value="Name:" /&gt; + &lt;h:inputText value="#{validationBean.name}" id="name"&gt; + &lt;f:validateLength minimum="2" /&gt; + &lt;/h:inputText&gt; + &lt;rich:message for="name" /&gt; + &lt;h:outputText value="Email:" /&gt; + &lt;h:inputText value="#{validationBean.email}" id="email" /&gt; + &lt;rich:message for="email" /&gt; + &lt;/h:panelGrid&gt; +&lt;/rich:graphValidator&gt; +...</programlisting> + + <para>The data validation can be also performed using Hibernate Validator, the same way as + it is done with <emphasis role="bold"> + <property>&lt;rich:beanValidator&gt;</property> + </emphasis>. </para> + + + + <para>The components's architecture provides an option to bind the component to a + managed bean, which is done with the <emphasis> + <property>"value"</property> + </emphasis> attribute. The attribute ensures that the entered data is valid + after the model is updated by revalidating the bean properties.</para> + <para>Please look at the example below.</para> + + + <programlisting role="XML">... +&lt;rich:graphValidator summary="Invalid values: " value="#{dayStatistics}"&gt; + &lt;a4j:repeat value="#{dayStatistics.dayPasstimes}" var="pt" id="table"&gt; + &lt;h:outputText value="#{pt.title}" /&gt; + &lt;rich:inputNumberSpinner minValue="0" maxValue="24" value="#{pt.time}" id="time" /&gt; + &lt;rich:message for="time" /&gt; + &lt;/a4j:repeat&gt; +&lt;/rich:graphValidator&gt; +...</programlisting> + + + <para>Hence, the given above code will provide the functionality that is illustrated on the images below.</para> + + <figure> + <title>"Games" field did not pass validation</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/graphValidator11.png"/> + </imageobject> + </mediaobject> + </figure> + <para>As you can see from the picture the "Games" field did not pass validation, as <emphasis role="bold"> + <property>&lt;rich:graphValidator&gt;</property> + </emphasis> can be used to perform validation of a single input item. + </para> + + <figure> + <title>Total sum of all input values is incorrect</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/graphValidator12.png"/> + </imageobject> + </mediaobject> + </figure> + <para> The figure above shows that the entered data was revalidated after all fields were completed, and the data did not pass revalidation since the total sum was incorrect. </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/graphValidator.html">Table of + &lt;rich:graphValidator&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.graphValidator</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlgraphValidator</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.graphValidator</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.graphValidatorRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.graphValidatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit the <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/graphValida... page</ulink> at RichFaces LiveDemo for examples of component usage and their sources. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_hotKey.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_hotKey.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_hotKey.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,281 @@ +<section role="NotInToc" id="rich_hotKey"> + <title> + &lt; + rich:hotKey + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.2</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> component allows to register hot keys for the page or particular elements and to define client-side processing functions for these keys. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para> + Includes all features of the <ulink url="http://code.google.com/p/js-hotkeys/">Javascript jQuery Hotkeys Plugin</ulink> + </para> + </listitem> + <listitem> + <para> + Hot key registration by request through JavaScript API + </para> + </listitem> + <listitem> + <para> + Possibility to attach <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> to a whole page or + to a particular element using <emphasis> + <property>"selector"</property> + </emphasis> attribute + </para> + </listitem> + <listitem> + <para> + Hot key registration timing + </para> + </listitem> + + <listitem> + <para> + Enabling/disabling the <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> using JavaScript API + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + There are two ways to register <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis>: + </para> + <itemizedlist> + <listitem> + <para> + just place it anywhere on the page. In this case the <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> + component is attached to the whole page (<property>html[0] element</property>). This is default scenario. + </para> + </listitem> + <listitem> + <para> + attach it with <emphasis> + <property>"selector"</property> + </emphasis> attribute to all the elements defined using this selector. + This attribute uses defined by <ulink url="http://www.w3.org">w3c consortium</ulink> syntax for CSS rule selector with some jQuery extensions. + </para> + </listitem> + </itemizedlist> + <para> + The <emphasis> + <property>"key"</property> + </emphasis> attribute defines the hot key itself + which is processed by the component. + </para> + <para> + After the hot key has been registered and defined you could set the <emphasis> + <property>"handler"</property> + </emphasis> + attribute which determines a JavaScript function to be called every time when corresponding keys are pressed. + </para> + <para> + <emphasis role="bold"> + Example: + </emphasis> + </para> + <programlisting role="XML">... +&lt;rich:listShuttle var="cap" sourceValue="#{capitalsBean.capitals}" id="ls"&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State flag"/&gt; + &lt;/f:facet&gt; + &lt;h:graphicImage value="#{cap.stateFlag}"/&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="State name"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{cap.name}"/&gt; + &lt;/rich:column&gt; +&lt;/rich:listShuttle&gt; +&lt;rich:hotKey selector="#ls" key="right" handler="#{rich:component('ls')}.copy()"/&gt; +&lt;rich:hotKey selector="#ls" key="left" handler="#{rich:component('ls')}.remove()"/&gt; +&lt;rich:hotKey selector="#ls" key="end" handler="#{rich:component('ls')}.copyAll()"/&gt; +&lt;rich:hotKey selector="#ls" key="home" handler="#{rich:component('ls')}.removeAll()"/&gt; +...</programlisting> + <para> + In the example above the <emphasis> + <property>"selector"</property> + </emphasis> attribute is used. + So the keys work only if <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component is focused. + </para> + <para> + You could press <property>Right</property> or <property>Left</property> keys in order to move some selected items between lists. + You could press <property>Home</property> or <property>End</property> buttons in order to move all items between lists. + </para> + <para> + With the help of the <emphasis> + <property>"timing"</property> + </emphasis> attribute + you could manage <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> registration timing. + There are three possible values of this attribute: + </para> + <itemizedlist> + <listitem> + <para> + "immediate" - the component is rendered in browser immediately (by default) + </para> + </listitem> + <listitem> + <para> + "onload" - the component is rendered after the page is fully loaded + </para> + </listitem> + <listitem> + <para> + "onregistercall" - the component is rendered only after JavaScript API for the key registration is used. + </para> + </listitem> + </itemizedlist> + <para> + The <emphasis> + <property>"type"</property> + </emphasis> attribute defines the type of keyboard event. Possible values are: + "onkeyup", "onkeypress" and "onkeydown". + </para> + <!--EXAMPLE --> + <para> + The <emphasis> + <property>"disableInInput"</property> + </emphasis> attribute disables the <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> if it is activated on input elements and the value of this attribute is "true". + </para> + <para> + The <emphasis> + <property>"checkParent"</property> + </emphasis> attribute defines the hotkey handling of events generated by child components nested into the parent component to which the <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> is attached. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> component also provides a number of JavaScript API functions. There is an example below. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form id="myForm"&gt; + &lt;rich:hotKey id="myKey" key="ctrl+g" handler="alert('Ctrl+G is pressed')" /&gt; + &lt;button onclick="${rich:component('myKey')}.enable(); return false;"&gt;Turn Ctrl+G On&lt;/button&gt; + &lt;button onclick="${rich:component('myKey')}.disable(); return false;"&gt;Turn Ctrl+G Off&lt;/button&gt; +&lt;/h:form&gt; +...</programlisting> + <para> + In the example above the <property>Ctrl+G</property> is registered as a global hotkey, + so if you press this key combination the alert window with the <property>"Ctrl+G is pressed"</property> text appears. With the help + of <property>enable()</property>, <property>disable()</property> JavaScript API fucntions you could enable or disable registered hotkey. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/hotKey.html">Table of + &lt;rich:hotKey&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.HotKey</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlHotKey</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.HotKey</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.HotKeyRenderer</entry> + </row> + <!--row> + <entry>tag-class</entry> + <entry></entry> + </row--> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry> + add(selector, key, handler) + </entry> + <entry> + Adds the hotkey(from key param) for elements targeted by selector. it assigns a handler function to the key + </entry> + </row> + <row> + <entry>remove()</entry> + <entry>Removes hotkey registration</entry> + </row> + <row> + <entry>enable()</entry> + <entry>Enables registered hotkey</entry> + </row> + <row> + <entry>disable()</entry> + <entry>Disables registered hotkey</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/hotKey.jsf?... RichFaces LiveDemo page </ulink> you can see an example of + <emphasis role="bold"> + <property>&lt;rich:hotKey&gt;</property> + </emphasis> usage and sources for the given example. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceInput.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,695 @@ +<section role="NotInToc" id="rich_inplaceInput"> + <title> + &lt; + rich:inplaceInput + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:inplaceInput&gt;</property> + </emphasis> is an input component used for displaying and editing data inputted. </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:inplaceInput&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>View/changed/edit states highly customizable representations</para> + </listitem> + <listitem> + <para>Changing state event customization</para> + </listitem> + <listitem> + <para>Possibility to call custom JavaScript function on state changes</para> + </listitem> + <listitem> + <para>Optional "inline" or "block" element rendering on a page</para> + </listitem> + <listitem> + <para>Edit mode activation when the component gets focus with the "Tab"</para> + </listitem> + <listitem> + <para>Sizes synchronizations between modes</para> + </listitem> + <listitem> + <para>Controls customization</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + The + <emphasis role="bold"> + <property>&lt;rich:inplaceInput&gt;</property> + </emphasis> + component was designed to facilitate displaying and inputting(editing) some data. + </para> + + <para> + The <emphasis> + <property>"value"</property> + </emphasis> attribute is a value-binding expression for the current value of the component. + </para> + <!--para> + However, if + <emphasis><property>&quot;value&quot;</property></emphasis> + attribute is not defined, you can use + <emphasis><property>&quot;defaultLabel&quot;</property></emphasis> attribute + which displays some default text while + <emphasis><property>&quot;value&quot;</property></emphasis> + attribute stays undefined. + </para--> <para> + The component has three functional states: + </para> + <itemizedlist> + <listitem> + <para> + <property>View</property> state displays default label with the value taken from + <emphasis> + <property>"value"</property> + </emphasis> or <emphasis> + <property>"defaultLabel"</property> + </emphasis> attributes. + </para> + <para> + If the initial value of the <emphasis> + <property>"value"</property> + </emphasis> + attribute is "null" or <property>empty string</property> + the <emphasis> + <property>"defaultLabel"</property> + </emphasis> attribute is used to define default label. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceInput value="#{bean.value}" defaultLabel="click to edit"/&gt; +... </programlisting> + + <!-- <para> + The managed bean code: + </para>--> +<!-- <programlisting role="JAVA"><![CDATA[... +private String value = null; +...]]> </programlisting>--> + <para> + In the example above the <emphasis> + <property>"value"</property> + </emphasis> attribute is not initialized + therefore "<code>click to edit</code>" text, that + <emphasis> + <property>"defaultLabel"</property> + </emphasis>, contains is displayed. + </para> + <para> + This is the result: + </para> + <figure> + <title>View state</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput2.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + <listitem> + <para> + <property>Edit</property> state - input representation to allow value edit + </para> + <figure> + <title>Edit state</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput3.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + <listitem> + <para> + <property>Changed</property> state - value representation after it was changed</para> + <figure> + <title>Changed state</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput4.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + </itemizedlist> + + <para> + The <emphasis> + <property>"editEvent"</property> + </emphasis> attribute provides an option to assign a JavaScript action + to initiate the change of the state from <property>view</property>/<property>changed</property> to <property>edit</property>. + The default value is "onclick". + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceInput value="#{bean.value}" editEvent="ondblclick"/&gt; +... </programlisting> + + <!--note> + <title>Note:</title> + <para> + Do not use &quot;on&quot; prefix applying event action. E.g. use &quot;click&quot; instead of &quot;onClick&quot;, use &quot;mouseover&quot; instead of &quot;onMouseOver&quot;. + </para> + </note--> + + + <para> + The <emphasis role="bold"> + <property>&lt;rich:inplaceInput&gt;</property> + </emphasis> + component provides specific event attributes: + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"oneditactivation"</property> + </emphasis> which is fired on <property>edit</property> state activation + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"oneditactivated"</property> + </emphasis> which is fired when <property>edit</property> state is activated + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onviewactivation"</property> + </emphasis> which is fired on <property>view</property> state activation + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onviewactivated"</property> + </emphasis> which is fired after the component is changed to representation state + </para> + </listitem> + </itemizedlist> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceInput value="#{bean.value}" oneditactivation="if (!confirm('Are you sure you want to change the value?')){return false;}" /&gt; +... </programlisting> + <para> + The given code illustrates how <emphasis> + <property>"oneditactivation"</property> + </emphasis> attribute works, + namely when the state is being changed from <property>view</property> to <property>edit</property>, + a confirmation window with a message <code>"Are you sure you want to change value?"</code> comes up. + </para> + + <para> + Using the boolean <emphasis> + <property>"selectOnEdit"</property> + </emphasis> attribute set to true, + the text in the input field will be selected when + the change from <property>view</property>/<property>changed</property> state to <property>edit</property> occurs. + </para> + + <para>This is the result:</para> + + <figure> + <title>Usage of the <emphasis> + <property>"selectOnEdit"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput5.png"/> + </imageobject> + </mediaobject> + </figure> + + + + <para> + If the <emphasis role="bold"> + <property>&lt;rich:inplaceInput&gt;</property> + </emphasis> loses focus, input data is saved automatically + and the component displays a new value. Additionally, the data is saved when "Enter" is pressed. + Nevertheless, you can use the <emphasis> + <property>"showControls"</property> + </emphasis> + attribute, which makes "Save" and "Cancel" buttons appear next to the input field. + If the controls are used, data is not saved automatically when the form loses focus: user has to confirm that he/she wants to save/discard the data explicitly. + In both cases(with controls or without them) the input data can be discarded by pressing "Esc" key. + + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceInput value="#{bean.value}" showControls="true"/&gt; +... </programlisting> + <figure> + <title>Usage <emphasis> + <property>"showControls"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput6.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + You can also position the controls relatively to the input field, by means of + </para> + <itemizedlist> + <listitem> + <para> + The <emphasis> + <property>"controlsHorizontalPosition"</property> + </emphasis> attribute + with "left", "right" and "center" definitions + </para> + </listitem> + <listitem> + <para> + The <emphasis> + <property>"controlsVerticalPosition "</property> + </emphasis> attribute + with "bottom", "center" and "top" definitions + </para> + </listitem> + </itemizedlist> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceInput value="#{bean.value}" showControls="true" controlsVerticalPosition="bottom" controlsHorizontalPosition="left"/&gt; +... </programlisting> + <para> + This is the result: + </para> + <figure> + <title>Positioning of "Save" and "Cancel" buttons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput7.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + It is also possible to use <emphasis> + <property>"controls"</property> + </emphasis> facet in order to replace the default controls with facets content. + See the example below. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceInput defaultLabel="Click here to edit" showControls="true" controlsHorizontalPosition="left" controlsVerticalPosition="bottom" id="inplaceInput"&gt; + &lt;f:facet name="controls"&gt; + &lt;h:commandButton value="Save" onclick="#{rich:component('inplaceInput')}.save();" type="button" /&gt; + &lt;h:commandButton value="Cancel" onclick="#{rich:component('inplaceInput')}.cancel();" type="button" /&gt; + &lt;/f:facet&gt; +&lt;/rich:inplaceInput&gt; +... </programlisting> + <para> + This is the result: + </para> + <figure> + <title> + <emphasis> + <property>"controls"</property> + </emphasis> facet usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput8.png"/> + </imageobject> + </mediaobject> + </figure> + + <note> + <title>Note:</title> + <para> + The <emphasis> + <property>"controls"</property> + </emphasis>facet also implies using + <emphasis> + <property>"showControls"</property> + </emphasis> + attribute and it has to be defined as "true". + </para> + </note> + <para> + Redefinition of the + "save" and "cancel" icons can be performed using + <emphasis> + <property>"saveControlIcon"</property> + </emphasis> + and + <emphasis> + <property>"cancelControlIcon"</property> + </emphasis> + attributes. You need to define the path to where your images are located. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceInput value="#{bean.value}" defaultLabel='click to edit' + showControls="true" + controlsHorizontalPosition="left" + controlsVerticalPosition="top" + saveControlIcon="/images/cancel.gif" + cancelControlIcon="/images/save.gif"/&gt; + ... </programlisting> + <figure> + <title>Redefining of "save" and "cancel" buttons</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceInput9.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + The <emphasis role="bold"> + <property>&lt;rich:inplaceInput&gt;</property> + </emphasis> component could be rendered with + <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> + elements to display its value. + In order to change default <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis> output, + use <emphasis> + <property>"layout"</property> + </emphasis> attribute with "block" value. + </para> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:inplaceInput&gt;</property> + </emphasis> component supports standard + <emphasis> + <property>"tabindex"</property> + </emphasis> attribute. + When the component gets focus the <property>edit</property> mode is activated. + </para> + <para> + The + <emphasis> + <property>"inputWidth"</property> + </emphasis>, + <emphasis> + <property>"minInputWidth"</property> + </emphasis>, + <emphasis> + <property>"maxInputWidth"</property> + </emphasis> + attributes are provided to specify the width, minimal width and maximal width for the input element respectively. + </para> + <table> + <title>Keyboard usage</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>ENTER</entry> + <entry>Saves the input data, and changes the state from edit to changed</entry> + </row> + <row> + <entry>ESC</entry> + <entry>Changes the state from edit to view or changed, value is not affected</entry> + </row> + <row> + <entry>TAB</entry> + <entry>Switches between the components</entry> + </row> + </tbody> + </tgroup> + </table> + + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/inplaceInput.html">Table of + &lt;rich:inplaceInput&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.inplaceInput</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlInplaceInput</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.inplaceInput</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.inplaceInputRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.inplaceInputTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>edit()</entry> + <entry>Changes the state to edit </entry> + </row> + <row> + <entry>cancel()</entry> + <entry>Changes its state to the previous one before editing (changed or view)</entry> + </row> + <row> + <entry>save()</entry> + <entry>Changes its state to changed with a new value</entry> + </row> + <row> + <entry>getValue()</entry> + <entry>Gets the current value</entry> + </row> + <row> + <entry>setValue(newValue) </entry> + <entry>Sets the current value (to be implemented)</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>controls</entry> + <entry>Defines the contols contents. Related attributes are "saveControlIcon" and "cancelControlIcon"</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace</entry> + <entry>Defines styles for a wrapper &lt;span&gt; (or &lt;div&gt;) element of a component</entry> + </row> + <row> + <entry>rich-inplace-input</entry> + <entry>Defines styles for the component input field</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn_iI"> + <title>Class name for the view state</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace-view</entry> + <entry>Defines styles for the view state</entry> + </row> + <row> + <entry>rich-inplace-input-view-hover</entry> + <entry>Defines styles for hovered text in the view state </entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Class name for the input field in edit state</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace-field</entry> + <entry>Defines styles for the input field look and feel in edit state</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Class name for the "Changed" state</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace-changed</entry> + <entry>Defines styles for the "Changed" state</entry> + </row> + <row> + <entry> rich-inplace-input-changed-hover </entry> + <entry>Defines styles for the hovered text in the "Changed" state</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names for "save" and "cancel" controls in Edit state</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-inplace-control</entry> + <entry>Defines styles for the controls</entry> + </row> + <row> + <entry>rich-inplace-control-press</entry> + <entry>Defines styles for the controls when either of the buttons is pressed</entry> + </row> + <row> + <entry>rich-inplace-shadow-size</entry> + <entry>Defines size of the shadow</entry> + </row> + <row> + <entry>rich-inplace-shadow-tl</entry> + <entry>Defines styles for the shadow in the top left corner </entry> + </row> + <row> + <entry>rich-inplace-shadow-tr</entry> + <entry>Defines styles for the shadow in the top right corner</entry> + </row> + <row> + <entry>rich-inplace-shadow-bl</entry> + <entry>Defines styles for the shadow in the bottom left corner</entry> + </row> + <row> + <entry>rich-inplace-shadow-br</entry> + <entry>Defines styles for the shadow in the bottom right corner</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inplaceInpu... the component Live Demo page</ulink> + you can see the example of <emphasis role="bold"> + <property>&lt;rich:inplaceIput&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inplaceSelect.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,726 @@ +<section role="NotInToc" id="rich_inplaceSelect"> + <title> + &lt; + rich:inplaceSelect + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:inplaceSelect&gt;</property> + </emphasis> is used for creation select based inputs: it shows the value as text in one state and enables editing the value, providing a list of options in another state</para> + + <figure> + <title>Three states of <emphasis role="bold"> + <property>&lt;rich:inplaceSelect&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>View/changed/edit states highly customizable representations</para> + </listitem> + <listitem> + <para>Optional "inline" or "block" element rendering on a page</para> + </listitem> + <listitem> + <para>Changing state event customization</para> + </listitem> + <listitem> + <para>Possibility to call custom JavaScript function on state changes</para> + </listitem> + <listitem> + <para>Edit mode activation when the component got focus with the "Tab"</para> + </listitem> + <listitem> + <para>Sizes synchronizations between modes</para> + </listitem> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + + <para> + The <emphasis> + <property>"value"</property> + </emphasis> attribute is a value-binding expression for the current value of the component. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;rich:inplaceSelect&gt;</property> + </emphasis> component has three functional states: + </para> + <itemizedlist> + <listitem> + <para> + <property>View</property> state displays default label with the value taken from + <emphasis> + <property>"value"</property> + </emphasis> or <emphasis> + <property>"defaultLabel"</property> + </emphasis> attributes. + </para> + <para> + If the initial value of the <emphasis> + <property>"value"</property> + </emphasis> + attribute is "null" or <property>empty string</property> + the <emphasis> + <property>"defaultLabel"</property> + </emphasis> attribute is used to define default label. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.value}" defaultLabel="click to edit"&gt; + &lt;f:selectItems value="#{bean.selectItems}" /&gt; +&lt;/rich:inplaceSelect&gt; +... </programlisting> + <!-- <para> + The managed bean code: + </para> + <programlisting role="JAVA"><![CDATA[... +private String value = ""; +...]]> </programlisting>--> + + + <para> + In the example above the <emphasis> + <property>"value"</property> + </emphasis> attribute is not initialized + therefore "<code>click to edit</code>" text, that + <emphasis> + <property>"defaultLabel"</property> + </emphasis>, contains is displayed. + </para> + <para> + This is the result: + </para> + <figure> + <title>View state</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect2.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + <listitem> + <para> + <property>Edit </property>state - select representation to allow value edit + </para> + <figure> + <title>Edit state</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect3.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + <listitem> + <para> + <property>Changed</property> state - value representation after it was changed + </para> + <figure> + <title>Changed state</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect4.png"/> + </imageobject> + </mediaobject> + </figure> + </listitem> + </itemizedlist> + + <para> + You can form the list of the options using <emphasis role="bold"> + <property>&lt;f:selectItem/&gt;</property> + </emphasis> and + <emphasis role="bold"> + <property>&lt;f:selectItems/&gt;</property> + </emphasis> JSF components. + </para> + <para> + Please, see the example below. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="click to edit"&gt; + &lt;f:selectItems value="#{bean.selectItems}"/&gt; + &lt;f:selectItem itemValue="1" itemLabel="factory"/&gt; + &lt;f:selectItem itemValue="2" itemLabel="newspaper"/&gt; +&lt;/rich:inplaceSelect&gt; +...</programlisting> + + <para> + In the example above the value of the selected item is available via <emphasis> + <property>"value"</property> + </emphasis> attribute. +</para> + <para> + The <emphasis> + <property>"editEvent"</property> + </emphasis> attribute provides an option to assign an JavaScript action + that initiates the change of the state from <property>view</property> to <property>edit</property>. + The default value is "onclick". + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.inputValue}" defaultLabel="Double Click to edit" editEvent="ondblclick"&gt; + &lt;f:selectItems value="#{demo.selectItems}" /&gt; +&lt;/rich:inplaceSelect&gt; +...</programlisting> + <para> + The <emphasis role="bold"> + <property>&lt;rich:inplaceSelect&gt;</property> + </emphasis> + component provides specific event attributes: + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"oneditactivation"</property> + </emphasis> fired on <property>edit</property> state activation + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"oneditactivated"</property> + </emphasis> fired when <property>edit</property> state is activated + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onviewactivation"</property> + </emphasis> fired on <property>view</property> state activation + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onviewactivated"</property> + </emphasis> fired after the component is changed to representation state + </para> + </listitem> + </itemizedlist> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.inputValue}" oneditactivation="if (!confirm('Are you sure you want to change the value?')){return false;}"&gt; + &lt;f:selectItems value="#{demo.selectItems}" /&gt; +&lt;/rich:inplaceSelect&gt; +... </programlisting> + <para> + The given code illustrates how <emphasis> + <property>"oneditactivation"</property> + </emphasis> attribute works, + namely when the state is being changed from <property>view</property> to <property>edit</property>, + a confirmation window with a message <code>"Are you sure you want to change value?"</code> comes up. + </para> + + <!-- <para> + The <emphasis><property>&quot;selectOnEdit&quot;</property></emphasis> (with possible values &quot;true&quot;, &quot;false&quot;) gives you an + option to make the text in the input field selected right after the change from <property>view</property> state to <property>edit</property> occurs. + </para> + <programlisting role="XML"><![CDATA[... +<rich:inplaceSelect value="#{bean.inputValue}" selectOnEdit="true"> + <f:selectItems value="#{bean.selectItems}"/> +</rich:inplaceSelect> +...]]></programlisting> --> + + + + <para> + To prevent opening the drop-down list by default, once <property>edit</property> state is activated, + set the <emphasis> + <property>"openOnEdit"</property> + </emphasis> attribute to "false". + The default value is "true". + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.inputValue}" showControls="true" openOnEdit="false"&gt; + &lt;f:selectItems value="#{bean.selectItems}"/&gt; +&lt;/rich:inplaceSelect&gt; +...</programlisting> + + + <para> + This is the result: + </para> + <figure> + <title>The <emphasis> + <property>"openOnEdit"</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect5.png"/> + </imageobject> + </mediaobject> + </figure> + + + <para> + Nowever, if you want to confirm the data saving explicitly you can use the <emphasis> + <property>"showControls"</property> + </emphasis> attribute, + which makes "Save" and "Cancel" buttons (displayed as icons) appear next to the input field. + <property>Edit</property> state can be deactivated by pressing "Esc" key. + An option in the drop-drown list can be also selected by pressing "Enter". + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.inputValue}" showControls="true"&gt; + &lt;f:selectItems value="#{bean.selectItems}"/&gt; +&lt;/rich:inplaceSelect&gt; +...</programlisting> + <para> + This is the result: + </para> + <figure> + <title>The <emphasis> + <property>"showControls"</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect6.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + You can also position the controls relatively to the input field, by means of + </para> + <itemizedlist> + <listitem> + <para> + The <emphasis> + <property>"controlsHorizontalPosition"</property> + </emphasis> attribute + with "left", "right" and "center" definitions + </para> + </listitem> + <listitem> + <para> + The <emphasis> + <property>"controlsVerticalPosition "</property> + </emphasis> attribute + with "bottom" and "top" definitions + </para> + </listitem> + </itemizedlist> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.inputValue}" controlsHorizontalPosition="left" controlsVerticalPosition="center" showControls="true"&gt; + &lt;f:selectItems value="#{bean.selectItems}"/&gt; +&lt;/rich:inplaceSelect&gt; +... </programlisting> + <para> + This is the result: + </para> + <figure> + <title>Controls positioning</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect7.png"/> + </imageobject> + </mediaobject> + </figure> + <para>It is also possible to use <emphasis> + <property>"controls"</property> + </emphasis> + facet in order to replace the default controls with facets content. See the example below. + </para> + <para>Please, see the example.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inplaceSelect value="#{bean.inputValue}" showControls="true"&gt; + &lt;f:facet name="controls"&gt; + &lt;button onclick="#{rich:component('inplaceSelect')}.save();" type="button"&gt;Save&lt;/button&gt; + &lt;button onclick="#{rich:component('inplaceSelect')}.cancel();" type="button"&gt;Cancel&lt;/button&gt; + &lt;/f:facet&gt; + &lt;f:selectItems value="#{bean.selectItems}"/&gt; +&lt;/rich:inplaceSelect&gt; +... </programlisting> + <para> + This is the result: + </para> + <figure> + <title> + <emphasis> + <property>"controls"</property> + </emphasis> facet usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inplaceSelect8.png"/> + </imageobject> + </mediaobject> + </figure> + <note> + <title>Note:</title> + <para> + The <emphasis> + <property>"controls"</property> + </emphasis>facet also implies using + <emphasis> + <property>"showControls"</property> + </emphasis> + attribute and it has to be defined as "true". + </para> + </note> + + + <!--Icons redefinitions--> + <!--para> + Redefinition of the + &quot;save&quot; and &quot;cancel&quot; icons can be performed using + <emphasis><property>&quot;saveControlIcon&quot;</property></emphasis> + and + <emphasis><property>&quot;cancelControlIcon&quot;</property></emphasis> + attributes r. You need to define the path to where your images are located. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML"><![CDATA[... +<rich:inplaceSelect + value="#{inplaceComponentsBean.inputValue}" defaultLabel="Click to edit" showControls="true" + showControls="true" + controlsHorizontalPosition="left" + controlsVerticalPosition="top" + saveControlIcon="/richfaces-demo/richfaces/cancel.gif" + cancelControlIcon="/richfaces-demo/richfaces/save.gif"> + +<f:selectItem itemValue="0" itemLabel="oil well"/> +<f:selectItem itemValue="1" itemLabel="factory"/> +<f:selectItem itemValue="2" itemLabel="newspaper"/> +</rich:inplaceSelect> + ...]]> </programlisting--> <para> + The <emphasis role="bold"> + <property>&lt;rich:inplaceSelect&gt;</property> + </emphasis> component could be rendered with + <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> + elements to display its value. + In order to change default <emphasis role="bold"> + <property>&lt;span&gt;</property> + </emphasis> output, + use the <emphasis> + <property>"layout"</property> + </emphasis> attribute with "block" value. + </para> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:inplaceSelect&gt;</property> + </emphasis> component supports standard + <emphasis> + <property>"tabindex"</property> + </emphasis> attribute. + When the component gets focus the <property>edit</property> mode is activated and drop-down list is opened. + </para> + <para> + The + <emphasis> + <property>"selectWidth"</property> + </emphasis>, + <emphasis> + <property>"minSelectWidth"</property> + </emphasis> and + <emphasis> + <property>"maxSelectWidth"</property> + </emphasis> + attributes are provided to specify the width, minimal width and maximal width for the input element respectively. + </para> + <para> + In order to specify the height and width parameters for the list items of the component, you can use + <emphasis> + <property>"listHeight"</property> + </emphasis> and + <emphasis> + <property>" listWidth"</property> + </emphasis> attributes. + + + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/inplaceSelect.html">Table of + &lt;rich:inplaceSelect&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.InplaceSelect</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlInplaceSelect</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.InplaceSelect</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.InplaceSelectRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.InplaceSelectTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>edit()</entry> + <entry>Changes the state to edit </entry> + + </row> + <row> + <entry>cancel()</entry> + <entry>Changes its state to the previous one before editing (changed or view)</entry> + + </row> + + + <row> + <entry>save()</entry> + <entry>Changes its state to changed with a new value</entry> + </row> + + <row> + <entry>getValue()</entry> + <entry>Gets the current value</entry> + </row> + + <row> + <entry>setValue(newValue)</entry> + <entry>Sets the current value and name</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>controls</entry> + <entry>Defines the contols contents. Related attributes are "saveControlIcon" and "cancelControlIcon"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="cn3"> + <title>Class name for the view state</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace-select-view</entry> + <entry>Defines styles for the select view</entry> + </row> + + + </tbody> + </tgroup> + </table> + <table> + <title>Class name for the input field in edit state</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace-select-field</entry> + <entry>Defines styles for the select field</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Class name for the control</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace-select-control</entry> + <entry>Defines styles for the select control</entry> + </row> + <row> + <entry>rich-inplace-select-control-press</entry> + <entry>Defines styles for the pressed select control</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Class name for the list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-inplace-select-list-decoration</entry> + <entry>Defines styles for a wrapper &lt;table&gt; element of an inplaceSelect</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names for the selected item</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-inplace-select-selected-item</entry> + <entry>Defines styles for the selected item</entry> + </row> + + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names for the shadow</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-inplace-select-shadow-tl</entry> + <entry>Defines styles for the top-left shadow</entry> + </row> + <row> + <entry>rich-inplace-select-shadow-tr</entry> + <entry>Defines styles for the top-right shadow</entry> + </row> + <row> + <entry>rich-inplace-select-shadow-bl</entry> + <entry>Defines styles for the bottom-left shadow</entry> + </row> + <row> + <entry>rich-inplace-select-shadow-br</entry> + <entry>Defines styles for the bottom-right shadow</entry> + </row> + + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inplaceSele... the component Live Demo page</ulink> + you can see the example of <emphasis role="bold"> + <property>&lt;rich:inplaceSelect&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSlider.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSlider.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSlider.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,413 @@ +<section role="NotInToc" id="rich_inputNumberSlider"> + <title> + &lt; + rich:inputNumberSlider + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property moreinfo="none">&lt;rich:inputNumberSlider&gt;</property> + </emphasis> component is a slider component. A handler's position corresponds to a definite value on the slider track. In order to change the value you can slide a handler or set the necessary value into the input field. + You can dispose it horizontally or vertically on the page.</para> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:inputNumberSlider&gt;</property> + </emphasis> component, horizontal and vertical views</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inputNumberSlider_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Fully skinnable control and input elements</para> + </listitem> + <listitem> + <para>Optional value text field with an attribute-managed position</para> + </listitem> + <listitem> + <para>Optional disablement of the component on a page</para> + </listitem> + <listitem> + <para>Optional toolTip to display the current value while a handle is dragged</para> + </listitem> + <listitem> + <para>Dragged state is stable after the mouse moves</para> + </listitem> + <listitem> + <para>Optional manual input possible if a text input field is present</para> + </listitem> + <listitem> + <para>Validation of manual input</para> + </listitem> + <listitem> + <para>Possibility to display 2 controls that increase/decrease the value by the defined step width, when they will be clicked.</para> + </listitem> + <listitem> + <para>Attribute "orientation" that can have the values "vertical" and "horizontal" to define in which direction the slider should be movable. + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:inputNumberSlider&gt;</property> + </emphasis> + is used to facilitate your data input with rich UI Controls. + </para> + <para> + Here is the simplest variant of a slider definition with + <emphasis> + <property moreinfo="none">"minValue"</property> + , + </emphasis> + <emphasis> + <property moreinfo="none">"maxValue"</property> + </emphasis> + and + <emphasis> + <property moreinfo="none">"step"</property> + </emphasis> + (on default is "1") attributes, which define the + beginning and the end of a numerical area and a + <property moreinfo="none">slider</property> + property step. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML" format="linespecific">&lt;rich:inputNumberSlider&gt;&lt;/rich:inputNumberSlider&gt;</programlisting> + <para>It's generated on a page:</para> + <figure float="0"> + <title> + Generated + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:inputNumberSlider&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inputNumberSlider2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + Using + <emphasis> + <property moreinfo="none">"showInput"</property> + </emphasis> + (default is "true") and + <emphasis> + <property moreinfo="none">"enableManualInput"</property> + </emphasis> + (default value is "true") attributes, it's possible to + output the input area near the slider, and make it read-only + or editable. + </para> + <para> + To remove input area use + <code>showInput = "false"</code> + : + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML" format="linespecific">&lt;rich:inputNumberSlider minValue="1" maxValue="100" showInput="false"/&gt;</programlisting> + <para>It's displayed at a page like:</para> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:inputNumberSlider&gt;</property> + </emphasis> + without input field + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inputNumberSlider3.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + It's also possible to switch off displaying of + "boundary values" and a toolTip showing on a + handle drawing. This could be performed with the help of the + component defined attributes: + <emphasis> + <property moreinfo="none">"showBoundaryValues"</property> + </emphasis> + which is responsible for "boundary values" + displaying (default is true) and + <emphasis> + <property moreinfo="none">"showToolTip"</property> + </emphasis> + which is responsible for tooltTip displaying (default is + "true"). + </para> + <para> + Moreover, to add e.g. some JavaScript effects, events + defined on it are used. + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property moreinfo="none">"onchange"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property moreinfo="none">"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property moreinfo="none">"onclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property moreinfo="none">"onfocus"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property moreinfo="none">"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>etc.</para> + </listitem> + </itemizedlist> + <para> + The + <emphasis> + <property moreinfo="none">"label"</property> + </emphasis> + attribute is a generic attribute. The + <emphasis> + <property moreinfo="none">"label"</property> + </emphasis> + attribute provides an association between a component, and + the message that the component (indirectly) produced. This + attribute defines the parameters of a localized error and + informational messages that occur as a result of conversion, + validation, or other application actions during the request + processing lifecycle. With the help of this attribute you + can replace the last parameter substitution token shown in + the messages. For example, {1} for + <code>"DoubleRangeValidator.MAXIMUM"</code> + , {2} for + <code>"ShortConverter.SHORT"</code>. + </para> + <!-- <para>Using the + <emphasis> + <property>&quot;orientation&quot;</property> + </emphasis> + attribute (default is &quot;horizontal&quot;) is possible to change slider position. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[<rich:inputNumberSlider minValue="0" maxValue="100" value="84" orientation="vertical"/>]]></programlisting> + <para>It looks at page like:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;&slider;&gt;</property> + </emphasis> + in a vertical orientation. + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inputNumberSlider_vertical.png" /> + </imageobject> + </mediaobject> + </figure>--><para>The <emphasis> + <property moreinfo="none">"showArrows"</property> + </emphasis> boolean attribute when set to "true" enables additional controls for increasing and decreasing slider value. + The controls (arrows by default) are placed in the beginning and in the end of slider track:</para> + <figure float="0"> + <title> + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:inputNumberSlider&gt;</property> + </emphasis> with additional controls</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inputNumberSlider4.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Clicking an arrow changes the driven value on the amount defined with <emphasis> + <property moreinfo="none">"step"</property> + </emphasis> attribute. + Keepeng an arrow control pressed changes the value continuous. + Time that value takes to change from one step to another is definded with <emphasis> + <property moreinfo="none">"delay"</property> + </emphasis> attribute. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/inputNumberSlider.html">Table of + &lt;rich:inputNumberSlider&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.inputNumberSlider</entry> + </row> + <row> + <entry>component-class</entry> + <entry> + org.richfaces.component.html.HtmlInputNumberSlider + </entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.inputNumberSlider</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry> + org.richfaces.InputNumberSliderRenderer + </entry> + </row> + <row> + <entry>tag-class</entry> + <entry> + org.richfaces.taglib.InputNumberSliderTag + </entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn"> + <title> + Classes names that define a component appearance + </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-slider</entry> + <entry> + Defines styles for a wrapper table element + of a component + </entry> + </row> + <row> + <entry>rich-inslider-track</entry> + <entry>Defines styles for a bar</entry> + </row> + <row> + <entry>rich-inslider-handler</entry> + <entry> + Defines styles for a slider handler + </entry> + </row> + <row> + <entry>rich-inslider-handler-selected</entry> + <entry> + Defines styles for a selected handler + </entry> + </row> + <row> + <entry>rich-inslider-field</entry> + <entry>Defines styles for a text field</entry> + </row> + <row> + <entry>rich-inslider-right-num</entry> + <entry> + Defines styles for the right number + </entry> + </row> + <row> + <entry>rich-inslider-left-num</entry> + <entry> + Defines styles for the left number + </entry> + </row> + <row> + <entry>rich-inslider-track-border</entry> + <entry> + Defines styles for track border + </entry> + </row> + <row> + <entry>rich-inslider-tip</entry> + <entry>Defines styles for a hint</entry> + </row> + <row> + <entry>inputNumberSlider-increase-vertical</entry> + <entry>Defines styles for the top arrow</entry> + </row> + <row> + <entry>inputNumberSlider-decrease-vertical</entry> + <entry>Defines styles for the bottom arrow</entry> + </row> + <row> + <entry>inputNumberSlider-increase-horizontal</entry> + <entry>Defines styles for the right arrow</entry> + </row> + <row> + <entry>inputNumberSlider-decrease-horizontal</entry> + <entry>Defines styles for the left arrow</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... + On the component Live Demo page + </ulink> + you can see the example of + <emphasis role="bold"> + <property moreinfo="none">&lt;rich:inputNumberSlider&gt;</property> + </emphasis> + usage and sources for the given example. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSpinner.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSpinner.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_inputNumberSpinner.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,284 @@ +<section role="NotInToc" id="rich_inputNumberSpinner"> + <title> + &lt; + rich:inputNumberSpinner + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A single line input field that lets selecting a number using controls near + a text field. It's possible to change a value using + "Up/Down" keyboard keys. The keyboard input in a + field is possible if it isn't locked by the <emphasis> + <property>"enableManualInput"</property> + </emphasis> attribute. When arrow controls are pressed, the cursor can + be moved in any way without losing a dragged state.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inputNumberSpinner_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Fully skinnable control and input elements</para> + </listitem> + <listitem> + <para>3D look and feel with an easily customizable + appearance</para> + </listitem> + <listitem> + <para>Attribute-managed positions of the controls + (inside/outside of the input field)</para> + </listitem> + <listitem> + <para>Keyboard controls support</para> + </listitem> + <listitem> + <para>Optional disablement of the component on a page</para> + </listitem> + <listitem> + <para>Optional <emphasis> + <property>"cycled"</property> + </emphasis> mode of scrolling values</para> + </listitem> + <listitem> + <para>Optional manual/controls-only input into a value text + field</para> + </listitem> + <listitem> + <para>Validation of manual input</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> is used to facilitate your data input with rich UI + Controls. </para> + <para> Here is the simplest variant of <property>spinner</property> definition + with <emphasis> + <property>"minValue"</property> , </emphasis> + <emphasis> + <property>"maxValue"</property> + </emphasis> and <emphasis> + <property>"step"</property> + </emphasis> (on default is "1") attributes, which + define the beginning and the end of numerical area and a + <property>spinner</property> step. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:inputNumberSpinner minValue="1" maxValue="100"/&gt; +... +</programlisting> + <para>It generates on a page:</para> + <figure> + <title> Generated <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/inputNumberSpinner2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> There are also several attributes to define functionality peculiarities: </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"cycled"</property> + </emphasis> if the attribute is + "true" after the current value + reaches the border value it's be reversed + to another border value after next + increasing/decreasing. In other case possibilities + of next increasing/decreasing are locked </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"disabled"</property> + </emphasis> is an attribute that defines whether a + component is active on a page </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"enableManualInput"</property> + </emphasis> is an attribute that defines whether a + keyboard input is possible or only UI controls + could be used </para> + </listitem> + </itemizedlist> + <para> Moreover, to add e.g. some JavaScript effects, events defined on it are + used </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onchange"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onfocus"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>etc.</para> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property>"label"</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>"label"</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>"DoubleRangeValidator.MAXIMUM"</code> + , {2} for <code>"ShortConverter.SHORT"</code> . + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/inputNumberSpinner.html">Table of + &lt;rich:inputNumberSpinner&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.inputNumberSpinner</entry> + </row> + <row> + <entry>component-class</entry> + <entry> + org.richfaces.component.html.HtmlInputNumberSpinner + </entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.inputNumberSpinner</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry> org.richfaces.InputNumberSpinnerRenderer + </entry> + </row> + <row> + <entry>tag-class</entry> + <entry> org.richfaces.taglib.InputNumberSpinnerTag + </entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn1"> + <title> Classes names that define a component appearance </title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-spinner-c</entry> + <entry> Defines styles for a wrapper + table element of a component + </entry> + </row> + <row> + <entry>rich-spinner-input-container</entry> + <entry>Defines styles for a + container</entry> + </row> + <row> + <entry>rich-spinner-input</entry> + <entry> Defines styles for a wrapper + &lt;td&gt; element for + input fields </entry> + </row> + <row> + <entry>rich-spinner-button</entry> + <entry>Defines styles for a + button</entry> + </row> + <row> + <entry>rich-spinner-buttons</entry> + <entry>Defines styles for all + buttons</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/inputNumber... On the component Live Demo page </ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:inputNumberSpinner&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_insert.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_insert.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_insert.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,125 @@ +<section role="NotInToc" id="rich_insert"> + <title> + &lt; + rich:insert + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:insert&gt;</property> + </emphasis> component is used for highlighting, source code inserting and, optionally, format the file from the application context into the page.</para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Source code highlighting</para> + </listitem> + <listitem> + <para>Variety of formats for source code highlighting</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The are two basic attributes. The <emphasis> + <property>"src"</property> + </emphasis> attribute defines the path to the file with source code. The <emphasis> + <property>"highlight"</property> + </emphasis> attribute defines the type of a syntax highlighting.</para> + <para>If <emphasis> + <property>"highlight"</property> + </emphasis> attribute is defined and <ulink url="https://jhighlight.dev.java.net/"> + JHighlight</ulink> open source library is in the classpath, the text from the file is + formated and colorized.</para> + <para>An example is placed below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:insert src="/pages/sourcePage.xhtml" highlight="xhtml"/&gt; +...</programlisting> + + <para>The result of using <emphasis role="bold"> + <property>&lt;rich:insert&gt;</property> + </emphasis> component is shown on the picture:</para> + <figure> + <title>Source code highlighting</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/insert_init.png"/> + </imageobject> + </mediaobject> + </figure> + <para>The <emphasis role="bold"> + <property>&lt;rich:insert&gt;</property> + </emphasis> component provides the same functionality as <ulink url="https://jhighlight.dev.java.net/">JHighlight</ulink>;. Thus, all names of highlight + style classes for source code of particular language could be changed to your names, which are + used by the <ulink url="https://jhighlight.dev.java.net/">JHighlight</ulink> library.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/insert.html">Table of + &lt;rich:insert&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.ui.Insert</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.ui.component.html.HtmlInsert</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.ui.Insert</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.ui.InsertRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.ui.taglib.InsertTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/insert.jsf?... RichFaces LiveDemo page </ulink> you can found some additional information for <emphasis role="bold"> + <property>&lt;rich:insert&gt;</property> + </emphasis> component usage. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_jQuery.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_jQuery.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_jQuery.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,368 @@ +<section role="NotInToc" id="rich_jQuery"> + <title> + &lt; + rich:jQuery + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> allows to apply styles and behaviour to DOM objects.</para> + + <!--mediaobject> + <imageobject> + <imagedata fileref="images/jQuery.png"/> + </imageobject> + </mediaobject--> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Presents jQuery JavaScript framework functionality</para> + </listitem> + <listitem> + <para>Able to apply onto JSF components and other DOM objects.</para> + </listitem> + <listitem> + <para>Works without conflicts with prototype.js library</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> can be used in two main modes:</para> + <itemizedlist> + <listitem> + <para>as a one-time query applied immediately or on a document ready event</para> + </listitem> + <listitem> + <para>as a JavaScript function that can be invoked from the JavaScript code</para> + </listitem> + </itemizedlist> + <para>The mode is chosen with <emphasis> + <property>"timing"</property> + </emphasis> attribute that has the following options:</para> + <itemizedlist> + <listitem> + <para>"immediate" - applying a query immediately</para> + </listitem> + <listitem> + <para>"onload" - applying a query when a document is loaded</para> + </listitem> + <listitem> + <para>onJScall - applying a query by invoked JavaScript function defined with the <emphasis> + <property>"name"</property> + </emphasis> attribute</para> + </listitem> + </itemizedlist> + <para>Definition of the <emphasis> + <property>"name"</property> + </emphasis> attribute is mandatory when the value of <emphasis> + <property>"timing"</property> + </emphasis> attribute is "onJScall". If the<emphasis> + <property>"name"</property> + </emphasis> attribute is defined when <emphasis> + <property>"timing"</property> + </emphasis> value equals to "immediate" or + "onload", the query is applied according to this + value, but you still have an opportunity to invoke it by a function name.</para> + <para>The <emphasis> + <property>"selector"</property> + </emphasis> attribute defines an object or a list of objects. The query is defined with the <emphasis> + <property>"query"</property> + </emphasis>attribute.</para> + <para>Here is an example of how to highlight odd rows in a table:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="CSS">... +&lt;style&gt; + .odd { + background-color: #FFC; + } +&lt;/style&gt; +...</programlisting> + + <programlisting role="XML">... +&lt;rich:table id="customList" ...&gt; + ... +&lt;/rich:table&gt; +... +&lt;rich:jQuery selector="#customList tr:odd" timing="onload" query="addClass(odd)" /&gt; +...</programlisting> + <para>The <emphasis> + <property>"selector"</property> + </emphasis> attribute uses defined by w3c consortium syntax for CSS rule <ulink url="http://www.w3.org/TR/REC-CSS2/selector.html">selector&l... with some jQuery + extensions </para> + <para>Those are typical examples of using selector in the <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> component.</para> + + <table> + <title>Examples of using selector</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Selector</entry> + + <entry>Comment</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>"p[a]"</entry> + <entry>In a document all "p" tags with "a" tag + inside are selected</entry> + </row> + + <row> + <entry>"ul/li"</entry> + <entry>All "li" elements of unordered "ul" lists are selected + </entry> + </row> + + <row> + <entry>"p.foo[a]"</entry> + <entry>All "p" tags with "foo" class and inserted + "a" tag are selected</entry> + </row> + + <row> + <entry>"input[@name=bar]"</entry> + <entry>All "input" tags with "name" attribute which + value is "bar" are selected</entry> + </row> + + <row> + <entry>"input[@type=radio][@checked]"</entry> + <entry>All "input" tags with attribute + "type"="radio" and attribute value = + "chekced" are selected</entry> + </row> + + <row> + <entry>"p,span,td"</entry> + <entry>All tag elements "p" or"span" or + "td" are selected</entry> + </row> + + <row> + <entry>"p#secret"</entry> + <entry>"p" paragraph element with "id" + identification = "secret" is selected</entry> + </row> + + <row> + <entry>"p span"</entry> + <entry>"span" tag is a (direct or non-direct) child of + "p" tag. If it's necessary, use "p &gt; + span" or "p/span" is selected</entry> + </row> + + <row> + <entry>"p[@foo^=bar]"</entry> + <entry>"p" tag containing "foo" attribute with + textual value beginning with "bar" word is selected</entry> + </row> + + <row> + <entry>"p[@foo$=bar] "</entry> + <entry>"p" tag containing "foo" attribute with + textual value ending with "bar" word is selected</entry> + </row> + + <row> + <entry>"p[@foo*=bar] "</entry> + <entry>"p" tag with "foo" attribute containing + substring "bar" in any place is selected</entry> + </row> + + <row> + <entry>"p//span "</entry> + <entry>"span" tag that is a (direct or non-direct) child of + "p" tag is selected</entry> + </row> + + <row> + <entry>"p/../span "</entry> + <entry>"span" tag that is a grandchild of "p" tag is selected</entry> + </row> + + </tbody> + </tgroup> + </table> + + <para>In addition, RichFaces allows using either a component id or client id if you apply the + query to a JSF component. When you define a selector, RichFaces examines its content and + tries to replace the defined in the selector id with a component id if it's found.</para> + <para>For example, you have the following code:</para> + + <programlisting role="XML">... +&lt;h:form id="form"&gt; + ... + &lt;h:panelGrid id="menu"&gt; + &lt;h:graphicImage ... /&gt; + &lt;h:graphicImage ... /&gt; + ... + &lt;/h:panelGrid&gt; +&lt;/h:form&gt; +...</programlisting> + + <para>The actual id of the <emphasis role="bold"> + <property>&lt;h:panelGrid&gt;</property> + </emphasis> table in the browser DOM is <code>"form:menu"</code>. However, you still can + reference to images inside this table using the following selector: </para> + + <programlisting role="XML">... +&lt;rich:jQuery selector="#menu img" query="..." /&gt; +...</programlisting> + + <para>You can define the exact id in the selector if you want. The following code reference to + the same set of a DOM object:</para> + + <programlisting role="XML">... +&lt;rich:jQuery selector="#form\\:menu img" query="..." /&gt; +...</programlisting> + + <para>Pay attention to double slashes that escape a colon in the id.</para> + + <para>In case when the <emphasis> + <property>"name"</property> + </emphasis> attribute is defined, <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> generates a JavaScript function that might be used from any place of JavaScript + code on a page.</para> + + <para>There is an example of how to enlarge the picture smoothly on a mouse over event and return + back to the normal size on mouse out:</para> + + <programlisting role="XML">... +&lt;h:graphicImage width="50" value="/images/price.png" + onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this)" /&gt; +&lt;h:graphicImage width="50" value="/images/discount.png" + onmouseover="enlargePic(this, {pwidth:'100px'})" onmouseout="releasePic(this)" /&gt; +... +&lt;rich:jQuery name="enlargePic" timing="onJScall" query="animate({width:param.pwidth})" /&gt; +&lt;rich:jQuery name="releasePic" timing="onJScall" query="animate({width:'50px'})"/&gt; +...</programlisting> + + <para>The JavaScript could use two parameters. The first parameter is a replacement for the + selector attribute. Thus, you can share the same query, applying it to the different DOM + objects. You can use a literal value or a direct reference for an existing DOM object. The + second parameter can be used to path the specific value inside the query. The JSON syntax is + used for the second parameter. The "param." namespace is used for + referencing data inside the parameter value.</para> + + <para> + <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> adds styles and behavior to the DOM object dynamically. This means if you replace + something on a page during an Ajax response, the applied artifacts is overwritten. But you + are allowed to apply them again after the Ajax response is complete.</para> + <para>Usually, it could be done with reRendering the <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> components in the same Ajax interaction with the components these queries are + applied to. Note, that queries with <emphasis> + <property>"timing"</property> + </emphasis> attribute set to "onload" are not + invoked even if the query is reRendered, because a DOM document is not fully reloaded during + the Ajax interaction. If you need to re-applies query with + "onload" value of <emphasis> + <property>"timing"</property> + </emphasis> attribute, define the <emphasis> + <property>"name"</property> + </emphasis> attribute and invoke the query by name in the <emphasis> + <property>"oncomplete"</property> + </emphasis> attribute of the Ajax component.</para> + + <para>RichFaces includes jQuery JavaScript framework. You can use the futures of jQuery directly + without defining the <emphasis role="bold"> + <property>&lt;rich:jQuery&gt;</property> + </emphasis> component on a page if it is convenient for you. To start using the jQuery feature + on the page, include the library into a page with the following code:</para> + + <programlisting role="XML">... +&lt;a4j:loadScript src="resource://jquery.js"/&gt; +...</programlisting> + + <para>Refer to the <ulink url="http://docs.jquery.com/">jQuery documentation</ulink> for the + right syntax. Remember to use <code>jQuery()</code> function instead of <code>$()</code>, as soon as jQuery works + without conflicts with <code>prototype.js</code>.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/jQuery.html">Table of + &lt;rich:jQuery&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.JQuery</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlJQuery</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.JQuery</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.JQueryRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.JQueryTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para>More information about jQuery framework and its features you can read in<ulink url="http://jquery.com/">jQuery official documentation</ulink>.</para> + <para>How to use jQuery with other libraries see also in<ulink url="http://docs.jquery.com/Using_jQuery_with_Other_Libraries"&... official documentation</ulink>.</para> + + <para> + Some additional information about usage of component can be found + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf?... its LiveDemo</ulink>. + </para> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layout.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layout.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layout.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,123 @@ +<section role="NotInToc" id="rich_layout"> + <title> + &lt; + rich:layout + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.3.1</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> component is designed to build layouts basing on Yahoo UI Grids CSS + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Cross-borwser compatibility</para> + </listitem> + <listitem> + <para>Easy layout creation</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>The <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> allows to build a grid that can be used to make the layout on a page. The <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> is used in conjunction with the <emphasis role="bold"> + <property>&lt;rich:layoutPanel&gt;</property> + </emphasis> that is used as a child element and carries the main burden of building the grid.</para> + + <para>Hence, you need to use the <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> as a container and <emphasis role="bold"> + <property>&lt;rich:layoutPanel&gt;</property> + </emphasis> to create areas inside the container.</para> This is how you can make a layout with 5 areas: + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:layout&gt; + &lt;rich:layoutPanel position="top"&gt; + &lt;!--top--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="left"&gt; + &lt;!--left--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="center"&gt; + &lt;!--center--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="right"&gt; + &lt;!--right--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="bottom"&gt; + &lt;!--bottom--&gt; + &lt;/rich:layoutPanel&gt; +&lt;/rich:layout&gt; +...</programlisting> + <para>To get more details about <emphasis role="bold"> + <property>&lt;rich:layoutPanel&gt;</property> + </emphasis> please read the <link linkend="rich_layoutPanel"> chapter about layoutPanel </link> in the guide.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/layout.html">Table of + &lt;rich:layout&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.layout</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlLayout</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Layout</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.LayoutRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.layoutTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para>Visit + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf... page at + RichFaces Live Demo for examples of component usage and their sources.</para> + <para>The <ulink url="http://www.jboss.org/community/docs/DOC-13336">Layout components for RichFaces 3.3.1</ulink> on the JBoss.org Wiki</para> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layoutPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layoutPanel.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_layoutPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,134 @@ +<section role="NotInToc" id="rich_layoutPanel"> + <title> + &lt; + rich:layoutPanel + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.3.1</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:layouPanel&gt;</property> + </emphasis> is an auxiliary component used to create layout areas within the + <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> container. + </para> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + + <listitem> + <para>Cross-browser compatibility</para> + </listitem> + <listitem> + <para>Provides possibility of an easy layout creation</para> + </listitem> + + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:layoutPanel&gt;</property> + </emphasis> component is used to split the area inside the <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> into up to 5 parts: top, left, center, right, bottom. + + </para> + <para>The <emphasis> + <property>"position"</property> + </emphasis> attribute defines the position of the <emphasis role="bold"> + <property>&lt;rich:layoutPanel&gt;</property> + </emphasis> in the area created with <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> .</para> + <programlisting role="XML">... +&lt;rich:layout&gt; + &lt;rich:layoutPanel position="top"&gt; + &lt;!--top--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="left"&gt; + &lt;!--left--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="center"&gt; + &lt;!--center--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="right"&gt; + &lt;!--right--&gt; + &lt;/rich:layoutPanel&gt; + &lt;rich:layoutPanel position="bottom"&gt; + &lt;!--bottom--&gt; + &lt;/rich:layoutPanel&gt; +&lt;/rich:layout&gt; +...</programlisting> + <para>You can specify the width of the layout area with the <emphasis> + <property>"width"</property> + </emphasis>attribute.</para> + + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/layoutPanel.html">Table of + &lt;rich:layoutPanel&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.LayoutPanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlLayoutPanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.LayoutPanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.LayoutPanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.LayoutPanelTag</entry> + </row> + + </tbody> + + </tgroup> + + + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf... RichFaces Live Demo page </ulink> you can see an example of <emphasis role="bold"> + <property>&lt;rich:layoutPanel&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para>The <link linkend="rich_layout"> + <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> + </link> chapter of the guide.</para> + <para>The <ulink url="http://www.jboss.org/community/docs/DOC-13336">Layout components for RichFaces 3.3.1</ulink> on the JBoss.org Wiki.</para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_listShuttle.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_listShuttle.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_listShuttle.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,876 @@ +<section role="NotInToc" id="rich_listShuttle"> + <title> + &lt; + rich:listShuttle + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.3</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component is used for moving chosen items + from one list into another with their optional reordering there.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:ListShuttle&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/listShuttle_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Reordering possibility for lists items</para> + </listitem> + <listitem> + <para>Multiple selection of lists items</para> + </listitem> + <listitem> + <para>Keyboard support</para> + </listitem> + <!--listitem> Built-In Drag-and-Drop support</listitem--> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component consists of the following parts: <itemizedlist> + <listitem> + <para>two <property>item lists</property> (source and target). List consists of + items. Each item has three different representations: common, selected, active</para> + </listitem> + <listitem> + <para>optional <property>caption</property> element</para> + </listitem> + <listitem> + <para> + <property>optional ordering controls set</property> is a set of controls + that performs reordering</para> + </listitem> + <listitem> + <para> + <property>move controls set</property> is a set of controls, which + performs moving items between lists</para> + </listitem> + </itemizedlist> + </para> + <note> + <title>Note:</title> + <para>Now the listener can not be called from the column facet. This is a temporary limitation. The additional information can be found in <ulink url="http://jira.jboss.org/jira/browse/RF-5327">RichFaces Jira</ulink>.</para> + </note> + <para> The <emphasis> + <property>"sourceValue" </property> + </emphasis> attribute defines a List or Array of items to be shown in the source list.</para> + <para>The <emphasis> + <property>"targetValue" </property> + </emphasis> attribute defines a List or Array of items to be shown in the target list.</para> + <para> The <emphasis> + <property>"var" </property> + </emphasis> attribute could be shared between both Lists or Arrays to define lists on the page.</para> + + <para> + The <emphasis> + <property>"sourceRequired"</property> + </emphasis> and + <emphasis> + <property>"targetRequired"</property> + </emphasis> attributes define the case when + source and target values are being validated. If the value of both attributes is "true" + there should be at least one item in source and target lists. Otherwise validation fails. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form id="myForm"&gt; + &lt;rich:messages&gt; + &lt;f:facet name="errorMarker"&gt; + &lt;h:graphicImage value="/images/ajax/error.gif" /&gt; + &lt;/f:facet&gt; + &lt;/rich:messages&gt; + &lt;rich:listShuttle id="myListShuttle" sourceValue="#{toolBar.freeItems}" targetValue="#{toolBar.items}" + sourceRequired = "true" targetRequired = "true" var="items" converter="listShuttleconverter" + sourceCaptionLabel="Source List" targetCaptionLabel="Target List"&gt; + &lt;rich:column&gt; + &lt;h:graphicImage value="#{items.iconURI}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{items.label}" /&gt; + &lt;/rich:column&gt; + &lt;/rich:listShuttle&gt; + &lt;a4j:commandButton value="Submit" /&gt; +&lt;/h:form&gt; +...</programlisting> + <para> + In the example above the source list is empty. If you submit the form validation fails and error message appears on a page. + </para> + <para> + This is the result: + </para> + <figure> + <title>Style classes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/listShuttle2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + The <emphasis> + <property>"converter" </property> + </emphasis> attribute is used to convert component data to a particular component's value. + For example, when you select items in a list, a converter is used to format a set of objects to a strings to be displayed. + </para> + <note id="conv"> + + </note> + <para> + The <emphasis> + <property>"sourceSelection" </property> + </emphasis> attribute stores the collection of items selected by you in the source list. + The <emphasis> + <property>"targetSelection" </property> + </emphasis> attribute stores the collection of items selected by you in the target list. + </para> + <para>Captions could be added to a list only after it was defined as a <emphasis> + <property>"sourceCaption"</property> + </emphasis> and <emphasis> + <property>"targetCaption"</property> + </emphasis> named facets inside the component or defined with the <emphasis> + <property>"sourceCaptionLabel"</property> + </emphasis> and <emphasis> + <property>"targetCaptionLabel"</property> + </emphasis> attribute. + </para> + <programlisting role="XML">... +&lt;rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" sourceSelection="#{bean.sourceSelection}" + targetSelection="#{bean.targetSelection}" converter="listShuttleconverter"&gt; + &lt;f:facet name="sourceCaption"&gt; + &lt;h:outputText value="Cars Store #1" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="targetCaption"&gt; + &lt;h:outputText value="Cars Store #2" /&gt; + &lt;/f:facet&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{items.name}" /&gt; + &lt;/rich:column&gt; +&lt;/rich:listShuttle&gt; +...</programlisting> + <!-- ordering control set--> + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component provides the possibility to use <property>ordering controls + set</property>, which performs reordering in the target item list. Every control has + possibility to be disabled. </para> + <para>An <property>ordering controls set</property> could be defined with + <emphasis> + <property>"topControlLabel"</property> + </emphasis>, <emphasis> + <property>"bottomControlLabel"</property> + </emphasis>, + <emphasis> + <property>"upControlLabel"</property> + </emphasis>, <emphasis> + <property>"downControlLabel"</property> + </emphasis>attributes. + </para> + <para>It is also possible to use + <emphasis> + <property> "topControl" </property> + </emphasis>, <emphasis> + <property>"topControlDisabled"</property> + </emphasis>, <emphasis> + <property> "bottomControl"</property> + </emphasis>, <emphasis> + <property> "bottomControlDisabled" </property> + </emphasis>, <emphasis> + <property> "upControl" </property> + </emphasis>, <emphasis> + <property> "upControlDisabled" </property> + </emphasis>, <emphasis> + <property> "downControl"</property> + </emphasis>, <emphasis> + <property> "downControlDisabled" </property> + </emphasis> facets in order to replace the default controls with facets content. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter"&gt; + ... + &lt;f:facet name="topControl"&gt; + &lt;h:outputText value="Move to top" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="upControl"&gt; + &lt;h:outputText value="Move up" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="downControl"&gt; + &lt;h:outputText value="Move down" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="bottomControl"&gt; + &lt;h:outputText value="Move to bottom" /&gt; + &lt;/f:facet&gt; +&lt;/rich:listShuttle&gt; +... +</programlisting> + + <!-- copy/move control set --> + + <para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis>component also provides 4 predefined controls in <property>move + controls set</property> for moving items between source and target lists. + Every control has possibility to be disabled. </para> + <para>A <property>move controls set</property> could be defined with + <emphasis> + <property>"copyControlLabel"</property> + </emphasis>, <emphasis> + <property>"removeControlLabel"</property> + </emphasis>, + <emphasis> + <property>"copyAllControlLabel"</property> + </emphasis>, <emphasis> + <property>"removeAllControlLabel"</property> + </emphasis>attributes. + </para> + <para>It is also possible to use + <emphasis> + <property>"copyControl" </property> + </emphasis>, + <emphasis> + <property>"removeControl" </property> + </emphasis>, + <emphasis> + <property>"copyAllControl" </property> + </emphasis>, + <emphasis> + <property>"removeAllControl" </property> + </emphasis> + facets in order to replace the default controls with facets content. + </para> + <programlisting role="XML">... +&lt;rich:listShuttle var="item" sourceValue="#{bean.source}" targetValue="#{bean.target}" converter="listShuttleconverter" + copyControlLabel="Copy" removeControlLabel="Remove" + copyAllControlLabel="Copy all" removeAllControlLabel="Remove all"&gt; + &lt;h:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Cars" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{item.name}" /&gt; + &lt;/h:column&gt; +&lt;/rich:listShuttle&gt; +... +</programlisting> + <!-- The following facets currently do not work--> + <!--<emphasis> + <property>&quot;copy_disabled&quot; </property> + </emphasis>, --> + <!--<emphasis> + <property>&quot;remove_disabled&quot; </property> + </emphasis>, --> + <!--<emphasis> + <property>&quot;copyAll_disabled&quot; </property> + </emphasis>, --> + <!--<emphasis> + <property>&quot;removeAll_disabled&quot; </property> + </emphasis>--> + + <para>Controls rendering is based on the <emphasis> + <property>"controlsType" </property> + </emphasis> attribute. Possible types are <property>button</property> and + <property>none</property>.</para> + <note> + <para> + Currently the button controls type is based on <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> element. + </para> + </note> + <para> + The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component allows to use internationalization method + to redefine and localize the labels. You could use application resource bundle and define + <code>RICH_SHUTTLES_TOP_LABEL</code>, + <code>RICH_SHUTTLES_BOTTOM_LABEL</code>, + <code>RICH_SHUTTLES_UP_LABEL</code>, + <code>RICH_SHUTTLES_DOWN_LABEL</code> + <code>RICH_LIST_SHUTTLE_COPY_ALL_LABEL</code>, + <code>RICH_LIST_SHUTTLE_COPY_LABEL</code>, + <code>RICH_LIST_SHUTTLE_REMOVE_ALL_LABEL</code>, + <code>RICH_LIST_SHUTTLE_REMOVE_LABEL</code> there. + </para> + <para> + You could also pack <code>org.richfaces.renderkit.listShuttle</code> resource bundle with your JARs defining the same properties. + </para> + <!-- template wiil be done in 3.2.0 --> + <!--para>The <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> component provides the possibility to be customized using templating. The + customization could be performed by layout definition nested to component.</para> + <para>10 elements could be provided to be defined inside template (all standard controls + should also possible to use inside): {sourceList}, {targetList}, {CopyControl}, + {removeCotrol}, {copyAllControl}, {removeAllControl}, {topcontrol}, {bottomControl}, + {downCotrol}, {upControl}.</para> + <para>The markup defined in the initial picture could be defined as in the following + example.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:listShuttle> +... + <h:panelGrid columns="4"> + <h:outputText value="{sourceList}"/> + <h:panelGroup> + <h:outputText value="{copyAllControl}"/> + <h:outputText value="{copyControl}"/> + <h:outputText value="{removeControl}"/> + <h:outputText value="{removeAllControl}"/> + </h:panelGroup> + <h:outputText value="targetList"/> + <h:panelGroup> + <h:outputText value="{topControl}"/> + <h:outputText value="{upControl}"/> + <h:outputText value="{downControl}"/> + <h:outputText value="{bottomControl}"/> + </h:panelGroup> + </h:panelGrid> + </rich:listShuttle> +... +]]></programlisting--> + <table> + <title>Keyboard usage for elements selection</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>CTRL+click</entry> + <entry>Inverts selection for an item</entry> + </row> + <row> + <entry>SHIFT+click</entry> + <entry>Selects all rows from active one to a clicked row if they differ, + else select the actve row. All other selections are cleared</entry> + </row> + <row> + <entry>CTRL+A</entry> + <entry>Selects all elements inside the list if some active element is + already present in a list</entry> + </row> + <row> + <entry>Up, Down arrows</entry> + <entry>Changes the active element to the next or previous in a list and make + it the only selected. Scroll follows the selection to keep it + visible</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Keyboard usage for elements reordering</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>Home</entry> + <entry>Moves selected set to the top of a list (for target list only)</entry> + </row> + <row> + <entry>End</entry> + <entry>Moves selected set to the bottom of a list (for target list only)</entry> + </row> + <row> + <entry>CTRL+Up arrow</entry> + <entry>Moves selected item to one position upper</entry> + </row> + <row> + <entry>CTRL+Down arrow</entry> + <entry>Moves selected item to one position lower</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/listShuttle.html">Table of + &lt;rich:listShuttle&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ListShuttle</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlListShuttle</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ListShuttle</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ListShuttleRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ListShuttleTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <!-- + <row> + <entry>SortAscending()</entry> + <entry>Sorts items in the list ascending</entry> + </row> + <row> + <entry>SortDescending()</entry> + <entry>Sorts items in the list descending</entry> + </row> + <row> + <entry>Sort()</entry> + <entry>Inverts current sorting</entry> + </row> + --> + <!--Controls common API --> + <!--row> + <entry role="tbi">hide()</entry> + <entry role="tbi">Hides ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">show()</entry> + <entry role="tbi">Shows ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">isShown()</entry> + <entry role="tbi">Checks if current control is shown (to be implemented)</entry> + </row--> + <row> + <entry role="tbi">enable()</entry> + <entry role="tbi">Enables ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">disable()</entry> + <entry role="tbi">Disables ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">isEnabled()</entry> + <entry role="tbi">Checks if current control is enabled (to be implemented)</entry> + </row> + <!--List managing API --> + <row> + <entry>up()</entry> + <entry>Moves up selected item in the list</entry> + </row> + <row> + <entry>down()</entry> + <entry>Moves down selected item in the list</entry> + </row> + <row> + <entry>top()</entry> + <entry>Moves top selected item in the list</entry> + </row> + <row> + <entry>bottom()</entry> + <entry>Moves bottom selected item in the list</entry> + </row> + <row> + <entry>copy()</entry> + <entry>Copies selected item from the source list to the target list</entry> + </row> + <row> + <entry>remove()</entry> + <entry>Removes selected item from the target list to the source list</entry> + </row> + <row> + <entry>copyAll()</entry> + <entry>Copies all items from the source list to the target list</entry> + </row> + <row> + <entry>removeAll()</entry> + <entry>Removes all items from the target list to the source list </entry> + </row> + <row> + <entry role="tbi">getSelection()</entry> + <entry role="tbi">Returns currently selected item (to be implemented)</entry> + </row> + <row> + <entry role="tbi">getItems()</entry> + <entry role="tbi">Returns the collection of all items (to be implemented)</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>copyAllControl</entry> + <entry>Redefines the label content for the "copyAll" control. Related attribute is "copyAllControlLabel"</entry> + </row> + <row> + <entry>removeAllControl</entry> + <entry>Redefines the label content for the "removeAll" control. Related attribute is "removeAllControlLabel"</entry> + </row> + <row> + <entry>copyControl</entry> + <entry>Redefines the label content for the "copy" control. Related attribute is "copyControlLabel"</entry> + </row> + <row> + <entry>removeControl</entry> + <entry>Redefines the label content for the "remove" control. Related attribute is "removeControlLabel"</entry> + </row> + <row> + <entry>copyAllControlDisabled</entry> + <entry>Redefines the disabled label content for the "copyAll" control</entry> + </row> + <row> + <entry>removeAllControlDisabled</entry> + <entry>Redefines the disabled label content for the "removeAll" control</entry> + </row> + <row> + <entry>caption</entry> + <entry>Redefines the caption control</entry> + </row> + <row> + <entry>sourceCaption</entry> + <entry>Defines source list caption representation text. Related attribute is "sourceCaptionLabel"</entry> + </row> + <row> + <entry>targetCaption</entry> + <entry>Defines source list target representation text. Related attribute is "targetCaptionLabel"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="CN"> + <title>Classes names that define a list representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-list-shuttle</entry> + <entry>Defines styles for a wrapper table element of a listShuttle</entry> + </row> + <row> + <entry>rich-list-shuttle-caption</entry> + <entry>Defines styles for a list caption</entry> + </row> + <row> + <entry>rich-shuttle-body</entry> + <entry>Defines styles for a list body</entry> + </row> + <row> + <entry>rich-shuttle-list-content</entry> + <entry>Defines styles for a list content</entry> + </row> + <row> + <entry>rich-shuttle-source-items</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element for source list</entry> + </row> + <row> + <entry>rich-shuttle-target-items</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element for target list</entry> + </row> + <row> + <entry>rich-shuttle-list-header</entry> + <entry>Defines styles for a lists header</entry> + </row> + <row> + <entry>rich-shuttle-header-tab-cell</entry> + <entry>Defines styles for a header cell</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a caption representations in a source and target lists</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-source-caption</entry> + <entry>Defines styles for a caption in a source list</entry> + </row> + <row> + <entry>rich-shuttle-target-caption</entry> + <entry>Defines styles for a caption in a target list</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a rows representations in a source list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-source-row</entry> + <entry>Defines styles for a row in a source list</entry> + </row> + <row> + <entry>rich-shuttle-source-row-selected</entry> + <entry>Defines styles for a selected row in a source list</entry> + </row> + <row> + <entry>rich-shuttle-source-row-active</entry> + <entry>Defines styles for an active row in a source list</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a rows representations in a target list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-target-row</entry> + <entry>Defines styles for a row in a target list</entry> + </row> + <row> + <entry>rich-shuttle-target-row-selected</entry> + <entry>Defines styles for a selected row in a target list</entry> + </row> + <row> + <entry>rich-shuttle-target-row-active</entry> + <entry>Defines styles for an active row in a target list</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a cells representations in a source list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-source-cell</entry> + <entry>Defines styles for a cell in a source list</entry> + </row> + <row> + <entry>rich-shuttle-source-cell-selected</entry> + <entry>Defines styles for a selected cell in a source list</entry> + </row> + <row> + <entry>rich-shuttle-source-cell-active</entry> + <entry>Defines styles for an active cell in a source list</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a cells representations in a target list</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-target-cell</entry> + <entry>Defines styles for a cell in a target list</entry> + </row> + <row> + <entry>rich-shuttle-target-cell-selected</entry> + <entry>Defines styles for a selected cell in a target list</entry> + </row> + <row> + <entry>rich-shuttle-target-cell-active</entry> + <entry>Defines styles for an active cell in a target list</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define controls representations</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-shuttle-controls</entry> + <entry>Defines styles for a controls group</entry> + </row> + <row> + <entry>rich-shuttle-top</entry> + <entry>Defines styles for a "Top" control</entry> + </row> + <row> + <entry>rich-shuttle-bottom</entry> + <entry>Defines styles for a "Bottom" control</entry> + </row> + <row> + <entry>rich-shuttle-up</entry> + <entry>Defines styles for a "Up" control</entry> + </row> + <row> + <entry>rich-shuttle-down</entry> + <entry>Defines styles for a "Down" control</entry> + </row> + + <row> + <entry>rich-shuttle-copy</entry> + <entry>Defines styles for a "Copy" control</entry> + </row> + + <row> + <entry>rich-shuttle-remove</entry> + <entry>Defines styles for a "Remove" control</entry> + </row> + + <row> + <entry>rich-shuttle-copyAll</entry> + <entry>Defines styles for a "copyAll" control</entry> + </row> + <row> + <entry>rich-shuttle-removeAll</entry> + <entry>Defines styles for a "removeAll" control</entry> + </row> + <row> + <entry>rich-shuttle-control-disabled</entry> + <entry>Defines styles for a control in a disabled state</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a button representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-list-shuttle-button</entry> + <entry>Defines styles for a button</entry> + </row> + <row> + <entry>rich-list-shuttle-button-disabled</entry> + <entry>Defines styles for a disabled button</entry> + </row> + <row> + <entry>rich-list-shuttle-button-light</entry> + <entry>Defines styles for a button highlight</entry> + </row> + <row> + <entry>rich-list-shuttle-button-press</entry> + <entry>Defines styles for a pressed button</entry> + </row> + <row> + <entry>rich-list-shuttle-button-content</entry> + <entry>Defines styles for a button content</entry> + </row> + <row> + <entry>rich-list-shuttle-button-selection</entry> + <entry>Defines styles for a button selection</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/listShuttle... RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> + <property>&lt;rich:listShuttle&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuGroup.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,279 @@ +<section role="NotInToc" id="rich_menuGroup"> + <title> + &lt; + rich:menuGroup + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> component is used to define an expandable group of items inside a pop-up list or another group.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuGroup_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look-and-feel</para> + </listitem> + <listitem> + <para>Grouping of any menu's items</para> + </listitem> + <listitem> + <para>Pop-up appearance event customization</para> + </listitem> + <listitem> + <para>Support for disabling</para> + </listitem> + <listitem> + <para>Smart user-defined positioning</para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Details of Usage</title> + <para> The <emphasis> + <property>"value"</property> + </emphasis> attribute defines the text representation of a group element in the page. </para> + <para> The <emphasis> + <property>"icon"</property> + </emphasis> attribute defines an icon for the component. The <emphasis> + <property>"iconDisabled"</property> + </emphasis> attribute defines an icon for when the group is disabled. Also you can use + the <emphasis> + <property>"icon"</property> + </emphasis> and <emphasis> + <property>"iconDisabled"</property> + </emphasis> facets. If the facets are defined, the corresponding <emphasis> + <property>"icon"</property> + </emphasis> and <emphasis> + <property>"iconDisabled"</property> + </emphasis> attributes are ignored and the facets' contents are used as icons. + This could be used for an item check box implementation. </para> + <para> Here is an example: </para> + <programlisting role="XML">... +&lt;f:facet name="icon"&gt; + &lt;h:selectBooleanCheckbox value="#{bean.property}"/&gt; +&lt;/f:facet&gt; +... +</programlisting> + <para> The <emphasis> + <property>"iconFolder"</property> + </emphasis> and <emphasis> + <property>"iconFolderDisabled"</property> + </emphasis> attributes are defined for using icons as folder icons. The <emphasis> + <property>"iconFolder"</property> + </emphasis> and <emphasis> + <property>"iconFolderDisabled"</property> + </emphasis> facets use their contents as folder icon representations in place of the + attribute values. </para> + <para> The <emphasis> + <property>"direction"</property> + </emphasis> attribute is used to define which way to display the menu as shown in the + example below: </para> + <para>Possible values are:</para> + <itemizedlist> + <listitem> + <para>"left - down" - a submenu is attached to the left side of the menu and is + dropping down</para> + </listitem> + <listitem> + <para>"left - up" - a submenu is attached to the left side of the menu and is dropping + up</para> + </listitem> + <listitem> + <para>"right - down" - a submenu is attached to the right side of the menu and is + dropping down</para> + </listitem> + <listitem> + <para>"right - up" - a submenu is attached to the right side of the menu and is + dropping up</para> + </listitem> + <listitem> + <para>"auto - smart" positioning activation</para> + </listitem> + </itemizedlist> + <para> By default, the <emphasis> + <property>"direction"</property> + </emphasis> attribute is set to "auto". </para> + <para> Here is an example: </para> + <programlisting role="XML">... +&lt;rich:menuGroup value="Save As..." direction="left-down"&gt; + &lt;rich:menuItem submitMode="ajax" value="Text File" action="#{ddmenu.doSaveText}"/&gt; + &lt;rich:menuItem submitMode="ajax" value="PDF File" action="#{ddmenu.doSavePDF}"/&gt; +&lt;/rich:menuGroup&gt; +... +</programlisting> + <para> This would be the result: </para> + <figure> + <title>Using the <emphasis> + <property>"direction"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuGroup2.png"/> + </imageobject> + </mediaobject> + </figure> + <note> + <title>Note:</title> + <para> The <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> component was designed to be used only for pop-up menu list creation.</para> + </note> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/menuGroup.html">Table of + &lt;rich:menuGroup&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.MenuGroup</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlMenuGroup</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DropDownMenu</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.MenuGroupRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.MenuGroupTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>icon</entry> + <entry>Redefines the icon for the enabled item state. Related attribute is "icon"</entry> + </row> + <row> + <entry>iconFolder</entry> + <entry>Redefines the folder icon for the enabled item state. Related attribute is "iconFolder"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_mG"> + <title>Classes names that define an appearance of group elements</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-group</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element for a group</entry> + </row> + <row> + <entry>rich-menu-item-label</entry> + <entry>Defines styles for a label of an item</entry> + </row> + <row> + <entry>rich-menu-item-icon</entry> + <entry>Defines styles for the left icon of an item</entry> + </row> + <row> + <entry>rich-menu-item-folder</entry> + <entry>Defines styles for the right icon of an item</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define different states</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-item-label-disabled</entry> + <entry>Defines styles for a label of a disabled item</entry> + </row> + <row> + <entry>rich-menu-item-icon-disabled</entry> + <entry>Defines styles for the left icon of a disabled item</entry> + </row> + <row> + <entry>rich-menu-item-folder-disabled</entry> + <entry>Defines styles for the right icon of a disabled item</entry> + </row> + <row> + <entry>rich-menu-group-hover</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a hover group</entry> + </row> + <row> + <entry>rich-menu-item-icon-enabled</entry> + <entry>Defines styles for the left icon of an enabled item</entry> + </row> + <row> + <entry>rich-menu-item-icon-selected</entry> + <entry>Defines styles for the left icon of a selected item</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:menuGroup&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuItem.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuItem.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuItem.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,325 @@ +<section role="NotInToc" id="rich_menuItem"> + <title> + &lt; + rich:menuItem + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> component is used for the definition of a single item inside a pop-up list.</para> + <para>This component can be used not only within <emphasis role="bold"> + <property>&lt;rich:dropDownMenu&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:contextMenu&gt;</property> + </emphasis>, but also it can used as a standalone component. + For example, you can use it as nested component of the <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis>.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuItem_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look-and-feel</para> + </listitem> + <listitem> + <para>Different submission modes</para> + </listitem> + <listitem> + <para>Support for disabling</para> + </listitem> + <listitem> + <para>Custom content support</para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Details of Usage</title> + <para> The <emphasis> + <property>"value"</property> + </emphasis> attribute defines the text representation for an item + element. </para> + <para> There are two icon-related attributes. The <emphasis> + <property>"icon"</property> + </emphasis> attribute defines an icon. The <emphasis> + <property>"iconDisabled"</property> + </emphasis> attribute defines an icon for a disabled item. Also you + can use the <emphasis> + <property>"icon"</property> + </emphasis> and <emphasis> + <property>"iconDisabled"</property> + </emphasis> facets. If the facets are defined, the corresponding <emphasis> + <property>"icon"</property> + </emphasis> and <emphasis> + <property>"iconDisabled"</property> + </emphasis> attributes are ignored and the facets content is shown as + an icon. It could be used for an item check box implementation. </para> + <para> Here is an example: </para> + <programlisting role="XML">... +&lt;f:facet name="icon"&gt; + &lt;h:selectBooleanCheckbox value="#{bean.property}"/&gt; +&lt;/f:facet&gt; +... +</programlisting> + + <para>The <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> + <emphasis> + <property>"submitMode"</property> + </emphasis> attribute can be set to three possible parameters:</para> + + <itemizedlist> + <listitem> + <para> + <code>Server</code> (default)</para> + </listitem> + </itemizedlist> + + <para>Regular form submission request is used.</para> + + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + + <para>Ajax submission is used for switching.</para> + + <itemizedlist> + <listitem> + <para> + <code>None</code> + </para> + </listitem> + </itemizedlist> + + <para>The <emphasis> + <property>"action"</property> + </emphasis> and <emphasis> + <property>"actionListener"</property> + </emphasis> item's attributes are ignored. Menu items + don' fire any submits themselves. The behavior is fully + defined by the components nested into items.</para> + <para> For example, you can put any content into an item, but, in this case, you + should set the <emphasis> + <property>"submitMode"</property> + </emphasis> attribute as <emphasis> + <property>"none"</property> + </emphasis>.</para> + <para> Here is an example: </para> + <programlisting role="XML">... +&lt;rich:dropDownMenu&gt; + ... + &lt;rich:menuItem submitMode="none"&gt; + &lt;h:outputLink value="www.jboss.org"/&gt; + &lt;/rich:menuItem&gt; + ... +&lt;rich:dropDownMenu&gt; +... +</programlisting> + <para> You can use the <emphasis> + <property>"disabled"</property> + </emphasis> attribute to set the item state. </para> + <para> Here is an example: </para> + <programlisting role="XML">... +&lt;rich:dropDownMenu&gt; + &lt;rich:menuItem value="Disable" disabled="true"/&gt; +&lt;rich:dropDownMenu&gt; +... +</programlisting> + <note> + <title>Note:</title> + <para> The <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> component was designed to be used only for + pop-up menu list creation.</para> + </note> + <para> Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find <link linkend="process">RichFaces Developer Guide section about "process" attribute </link>. </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/menuItem.html">Table of + &lt;rich:menuItem&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.MenuItem</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlMenuItem</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DropDownMenu</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.MenuItemRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.MenuItemTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>icon</entry> + <entry>Redefines the icon for the enabled item state. Related attribute is "icon"</entry> + </row> + <row> + <entry>iconDisabled</entry> + <entry>Redefines the folder icon the disabled item state. Related attribute is "iconDisabled"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_mI"> + <title>Classes names that define an appearance of item elements</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-item</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element + for an item</entry> + </row> + <row> + <entry>rich-menu-item-label</entry> + <entry>Defines styles for a label of an + item</entry> + </row> + <row> + <entry>rich-menu-item-icon</entry> + <entry>Defines styles for the left icon + of an item</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define different states</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-item-disabled</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + an item</entry> + </row> + <row> + <entry>rich-menu-item-enabled</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + an enabled item</entry> + </row> + <row> + <entry>rich-menu-item-hover</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a hover item</entry> + </row> + + <row> + <entry>rich-menu-item-label-disabled</entry> + <entry>Defines styles for a label of a + disabled item</entry> + </row> + <row> + <entry>rich-menu-item-icon-disabled</entry> + <entry>Defines styles for the left icon + of a disabled item</entry> + </row> + <row> + <entry>rich-menu-item-label-enabled</entry> + <entry>Defines styles for a label of an + enabled item</entry> + </row> + <row> + <entry>rich-menu-item-icon-enabled</entry> + <entry>Defines styles for the left icon + of an enabled item</entry> + </row> + <row> + <entry>rich-menu-item-label-selected</entry> + <entry>Defines styles for a label of a + selected item</entry> + </row> + <row> + <entry>rich-menu-item-icon-selected</entry> + <entry>Defines styles for the left icon + of a selected item</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:menuItem&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuSeparator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuSeparator.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_menuSeparator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,96 @@ +<section role="NotInToc" id="rich_menuSeparator"> + <title> + &lt; + rich:menuSeparator + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:menuSeparator&gt;</property> + </emphasis> component is used for the definition of a horizontal separator that can be placed between groups or items.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:menuSeparator&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/menuSeparator_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/menuSeparator.html">Table of + &lt;rich:menuSeparator&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.MenuSeparator</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlMenuSeparator</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.DropDownMenu</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.MenuSeparatorRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.MenuSeparatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_mS"> + <title>Classes names that define separator element appearance.</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-menu-separator</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element for a separator</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/dropDownMen... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:menuSeparator&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_message.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_message.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_message.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,253 @@ +<section role="NotInToc" id="rich_message"> + <title> + &lt; + rich:message + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component is used for rendering a single message for a specific component. </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/message_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel </para> + </listitem> + <listitem> + <para>Tracking both traditional and Ajax based requests</para> + </listitem> + <listitem> + <para>Optional toolTip to display the detail portion of the message</para> + </listitem> + <listitem> + <para>Additionally customizable with attributes and facets</para> + </listitem> + <listitem> + <para>Additionally provides two parts to be optionally defined: marker and + label</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> The component has the same behavior as standard <emphasis role="bold"> + <property>&lt;h:message&gt;</property> + </emphasis>component except next two features: <itemizedlist> + <listitem> + <para>It's ajaxRendered. It means that the component is reRendered after Ajax request + automatically without outputPanel usage</para> + </listitem> + <listitem> + <para>The component optionally provides "passed" state which will be shown if no message is displayed</para> + </listitem> + <listitem> + <para>Provides possibility to add some marker to message. By default a marker element + isn't shown</para> + </listitem> + </itemizedlist> + </para> + <para> A set of facets which can be used for marker defining: <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"passedMarker"</property> + </emphasis>. This facet is provided to allow setting a marker to display if + there is no message</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"errorMarker"</property> + </emphasis>. This facet is provided to allow setting a marker to display if there + is a message with a severity class of "ERROR"</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"fatalMarker"</property> + </emphasis>. This facet is provided to allow setting a marker to display if there + is a message with a severity class of "FATAL"</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"infoMarker"</property> + </emphasis>. This facet is provided to allow setting a marker to display if there + is a message with a severity class of "INFO"</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"warnMarker"</property> + </emphasis>. This facet is provided to allow setting a marker to display if there + is a message with a severity class of "WARN"</para> + </listitem> + </itemizedlist> + </para> + + <para> The following example shows different variants for component customization. The + attribute <emphasis> + <property>"passedLabel"</property> + </emphasis> is used for definition of the label to display when no message + appears. But the message component doesn't appear before the form submission even when + state is defined as passed (on initial rendering). Boolean attribute<emphasis> + <property> "showSummary" </property> + </emphasis>defines possibility to + display summary portion of displayed messages. The facets <emphasis> + <property>"errorMarker"</property> + </emphasis> and <emphasis> + <property>"passedMarker"</property> + </emphasis> set + corresponding images for markers. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:message for="id" passedLabel="No errors" showSummary="true"&gt; + &lt;f:facet name="errorMarker"&gt; + &lt;h:graphicImage url="/image/error.png"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="passedMarker"&gt; + &lt;h:graphicImage url="/image/passed.png"/&gt; + &lt;/f:facet&gt; +&lt;/rich:message&gt; +... +</programlisting> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/message.html">Table of + &lt;rich:message&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.component.RichMessage</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlRichMessage</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.RichMessage</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.RichMessagesHtmlBaseRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.RichMessageTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>errorMarker</entry> + <entry>Redefines the content for the marker if there is message with a severity class of "ERROR"</entry> + </row> + <row> + <entry>fatalError</entry> + <entry>Redefines the content for the marker if there is message with a severity class of "FATAL"</entry> + </row> + <row> + <entry>infoError</entry> + <entry>Redefines the content for the marker if there is message with a severity class of "INFO"</entry> + </row> + <row> + <entry>warnError</entry> + <entry>Redefines the content for the marker if there is message with a severity class of "WARN"</entry> + </row> + <row> + <entry>passedError</entry> + <entry>Redefines the content for the marker if there is no message</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="mC"> + <title>Classes names that define a component appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-message</entry> + + <entry>Defines styles for a wrapper element</entry> + </row> + + <row> + <entry>rich-message-marker</entry> + + <entry>Defines styles for a marker</entry> + </row> + + <row> + <entry>rich-message-label</entry> + + <entry>Defines styles for a label</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/message.jsf... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_messages.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_messages.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_messages.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,248 @@ +<section role="NotInToc" id="rich_messages"> + <title> + &lt; + rich:messages + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> component is similar to <emphasis role="bold"> + <property>&lt;rich:message&gt;</property> + </emphasis> component but used for rendering all messages for the components.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/messages_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Track both traditional and Ajax based requests</para> + </listitem> + <listitem> + <para>Optional ToolTip to display a detailed part of the messages</para> + </listitem> + <listitem> + <para>Additionally customizable via attributes and facets</para> + </listitem> + <listitem> + <para>Additionally provides of three parts to be optionally defined: marker, label and header</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> component is considered as JSF HTML <emphasis role="bold"> + <property>&lt;h:messages&gt;</property> + </emphasis>, + extended with following features: + <itemizedlist> + <listitem> + <para>Ajax support (the component does not require to be wrapped in <emphasis role="bold"> + <property>&lt;a4j:outputPanel&gt;</property> + </emphasis> in order to be rendered during Ajax requests);</para> + </listitem> + <listitem> + <para>possibilty to add graphical markers (pictograms) to reinforce a message for both "passed" or "failed" states;</para> + </listitem> + <listitem> + <para>set of predefined CSS classes for customizing messages appearance.</para> + </listitem> + </itemizedlist> + </para> + <para>There are two optional parts that could be defined for every message: marker and text label. The set of facets, which can be used for a marker definition, is shown below:</para> + + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>errorMarker</entry> + <entry>Defines marker for "Error" message severity class</entry> + </row> + <row> + <entry>fatalMarker</entry> + <entry>Defines marker for "Fatal" message severity class</entry> + </row> + <row> + <entry>infoMarker</entry> + <entry>Defines marker for "Info" message severity class</entry> + </row> + <row> + <entry>warnMarker</entry> + <entry>Defines marker for "Warn" message severity class</entry> + </row> + <!--row> + <entry>passedMarker</entry> + <entry>Defines marker if there is no message</entry> + </row--> + </tbody> + </tgroup> + </table> + + <para>The following example shows different variants of customization of the component.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;rich:messages layout="table" tooltip="true" showDetail="false" showSummary="true"&gt; + &lt;f:facet name="errorMarker"&gt; + &lt;h:graphicImage url="/image/error.png"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="infoMarker"&gt; + &lt;h:graphicImage url="/image/info.png"/&gt; + &lt;/f:facet&gt; + &lt;/rich:messages&gt;</programlisting> + + <para>The <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> component keeps all messages for all components even after only one Ajax-validated component was updated.</para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/messages.html">Table of + &lt;rich:messages&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.component.RichMessages</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlRichMessages</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.RichMessages</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.HtmlRichMessagesRendere</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.RichMessagesTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>errorMarker</entry> + <entry>Defines marker for "Error" message severity class</entry> + </row> + <row> + <entry>fatalMarker</entry> + <entry>Defines marker for "Fatal" message severity class</entry> + </row> + <row> + <entry>infoMarker</entry> + <entry>Defines marker for "Info" message severity class</entry> + </row> + <row> + <entry>warnMarker</entry> + <entry>Defines marker for "Warn" message severity class</entry> + </row> + <!--row> + <entry>passedMarker</entry> + <entry>Defines marker if there is no message</entry> + </row--> + </tbody> + </tgroup> + </table> + <table id="tab_msC"> + <title>Classes names that define a component appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-messages</entry> + + <entry>Defines styles for a wrapper + element</entry> + </row> + + <row> + <entry>rich-messages-marker</entry> + + <entry>Defines styles for a + marker</entry> + </row> + + <row> + <entry>rich-messages-label</entry> + + <entry>Defines styles for a + label</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/messages.js... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:messages&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_modalPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,624 @@ +<section role="NotInToc" id="rich_modalPanel"> + <title> + &lt; + rich:modalPanel + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component implements a modal dialog window. All operations in + the main application window are locked out while this window is active. + Opening and closing the window is done through client JavaScript + code.</para> + + <figure> + <title>The <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component opens in closest to observer layer. + All other layers are dimmed by blocking <code>&lt;div&gt;</code> element (gray on the picture).</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/modalPanel_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Support of draggable operations and size changes by you</para> + </listitem> + <listitem> + <para>Easy positioning for the modal dialog window</para> + </listitem> + <listitem> + <para>Possibility to restore of the previous component state on a page (including position on the screen) after submitting and reloading</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>The component is defined as a panel with some content inside that displays + its content as a modal dialog. To call it and to close it, the client + API for the window is used.</para> + + <table> + <title>Functions description</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>Richfaces.showModalPanel (client + Id)</entry> + + <entry>Opens a window with a specified client + Id</entry> + </row> + + <row> + <entry>Richfaces.hideModalPanel (client + Id)</entry> + + <entry>Closes a window with a specified client + Id</entry> + </row> + + <row> + <entry>Richfaces.hideTopModalPanel ()</entry> + + <entry>Closes the current visible window at the top</entry> + </row> + </tbody> + </tgroup> + </table> + + <important> + <title>Important:</title> + <para>To work properly the &lt;rich:modalPanel&gt; should + always be placed outside the original &lt;h:form&gt; + and must include its own &lt;h:form&gt; for such + cases like performing submissions from within the + &lt;rich:modalPanel&gt;. </para> + </important> + <note> + <title>Note:</title> + <para>In order to avoid a bug in IE, the root node of the dialog is + moved on the top of a DOM tree. </para> + </note> + + + <para>It's possible to add a <emphasis> + <property>"header"</property> + </emphasis> facet to the component to set the content for the + header.</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a onclick="Richfaces.showModalPanel('pnl');" href="#"&gt;Show ModalPanel&lt;/a&gt; +&lt;a4j:form&gt; + &lt;rich:modalPanel id="pnl"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="This is a panel header" /&gt; + &lt;/f:facet&gt; + &lt;p&gt;The &amp;lt;rich:modalPanel&amp;gt; accepts different types of information: + from simple text to iterative components such as &amp;lt;rich:dataTable&amp;gt;, etc. + &lt;/p&gt; + &lt;a onclick="Richfaces.hideModalPanel('pnl');" href="#"&gt;Hide&lt;/a&gt; + &lt;/rich:modalPanel&gt; +&lt;/a4j:form&gt;</programlisting> + + <para>Here is what happening on the page:</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> with links</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/modalPanel2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>A facet named <emphasis> + <property>"controls"</property> + </emphasis> can be added to the component to place control elements on + a header.</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;a onclick="Richfaces.showModalPanel('pnl');" href="#"&gt;Show ModalPanel&lt;/a&gt; +&lt;a4j:form&gt; + &lt;rich:modalPanel id="pnl"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="This is a panel header" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="controls"&gt; + &lt;h:graphicImage value="/pages/close.png" style="cursor:pointer" onclick="Richfaces.hideModalPanel('pnl')" /&gt; + &lt;/f:facet&gt; + &lt;p&gt;The &amp;lt;rich:modalPanel&amp;gt; accepts different types of information: + from simple text to iterative components such as &amp;lt;rich:dataTable&amp;gt;, etc. + &lt;/p&gt; + &lt;/rich:modalPanel&gt; +&lt;/a4j:form&gt;</programlisting> + + <para>The result:</para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> with 'Close' control</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/modalPanel3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>To understand the sence of "<emphasis> + <property>domElementAttachment</property> + </emphasis>" attribute you should understand the + <emphasis>stacking context</emphasis> in the division + element (<code>&lt;div&gt;</code>) HTML makeup. Since each + positioned or z-indexed element (in CSS <code>position: + absolute</code> or <code>relative</code> or <code>z-index: + [any integer value different from 0]</code>) form their own + stacking context the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> nested into such element may be overlapped with another + elements, which appear later in HTML hierarchy and assimilated with + basic stacking context (HTML &lt;body&gt;). To make the panel + rendered in closest to the observer layer and avoid such overlapping, + the component was designed in way when it is always being + automatically assimilated with <code>&lt;body&gt;</code> and + with a very high rendering layer (<code>z-index</code>). Due to some + side effects the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> should not always be assimilated with + <code>&lt;body&gt;</code> stacking context. The "<emphasis> + <property>domElementAttachment</property> + </emphasis>" attribute helps to reassign the panel to it + '<emphasis>parent</emphasis>' or + '<emphasis>form</emphasis>' element. If + '<emphasis>form</emphasis>' is used and no + parent form is available the panel is functioning as if it is + assimilated with <code>&lt;body&gt;</code>. </para> + + <note> + <title>Note:</title> + <para>If "<emphasis> + <property>domElementAttachment</property> + </emphasis>" value is not + '<emphasis>body</emphasis>' then + some overlapping may occur. </para> + </note> + + <para>To manage window placement relative to the component, there are <emphasis> + <property>"left"</property> + </emphasis> and <emphasis> + <property>"top"</property> + </emphasis> attributes defining a window shifting relative to the + top-left corner of the window.</para> + + <para>Modal windows can also support resize and move operations on the client + side. To allow or disallow these operations, set the <emphasis> + <property>"resizeable"</property> + </emphasis> and <emphasis> + <property>"moveable"</property> + </emphasis> attributes to "true" or + "false" values. Window resizing is also limited by <emphasis> + <property>"minWidth"</property> + </emphasis> and <emphasis> + <property>"minHeight"</property> + </emphasis> attributes specifying the minimal window sizes.</para> + <para> Also you can use <emphasis> + <property>"minWidth"</property> + </emphasis> and <emphasis> + <property>"minHeight"</property> + </emphasis> attributes used as <code>showModalPanel()</code> arguments + in JavaScript options. </para> + <para> You can pass your parameters during modalPanel opening or closing. This + passing could be performed in the following way: </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">Richfaces.showModalPanel('panelId', {left: auto, param1: value1});</programlisting> + <para> Thus, except the standard modalPanel parameters you can pass any of your + own parameters. </para> + <para> Also modalPanel allows to handle its own opening and closing events on + the client side. The <emphasis> + <property>"onshow"</property> + </emphasis> attribute is used in this case. </para> + <para> The following example shows how on the client side to define opening and + closing event handling in such a way that your own parameters could + also be obtained: </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">onshow="alert(event.parameters.param1)"</programlisting> + + <para> Here, during modalPanel opening the value of a passing parameter is + output. </para> + <para> More information about this problem could be found on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Development Forum</ulink>.</para> + <para> There is a possibility to restore of the previous component state on a + page (including position on the screen) after submitting and + reloading. The modalPanel has some special attributes like <emphasis> + <property>"showWhenRendered"</property> + </emphasis> and <emphasis> + <property>"keepVisualState"</property> + </emphasis>. </para> + <para> + <emphasis> + <property>"showWhenRendered"</property> + </emphasis> - This boolean attribute is used if modalPanel should be + rendered after first page loading. </para> + <para> + <emphasis> + <property> "keepVisualState"</property> + </emphasis> - Used if modalPanel should save state after submission. + If <code>keepVisualState="true"</code> then + parameters which modalPanel has during opening should be submitted and + passed to new page. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">&lt;a href="javascript:Richfaces.showModalPanel('pnl', {top:'10px', left:'10px', height:'400'});"&gt;Show&lt;/a&gt;</programlisting> + + <para> Here, if you open modal dialog window using current link and after + submits data then modalPanel destination and height on new loaded page + is restored. </para> + <para>if you need the content of the modalPanel to be submitted - you need to + remember two important rules: </para> + <itemizedlist> + <listitem> + <para>modalPanel must have its own form if it has form + elements (input or/and command components) inside + (as it was shown in the example above) </para> + </listitem> + <listitem> + <para>modalPanel must not be included into the form (on any + level up) if it has the form inside.</para> + </listitem> + </itemizedlist> + <para>Simple example of using commandButton within modalPanel is placed + below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">&lt;a4j:form&gt; +&lt;rich:modalPanel&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Test" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="controls"&gt; + &lt;h:commandLink value="Close" style="cursor:pointer" onclick="Richfaces.hideModalPanel('mp')" /&gt; + &lt;/f:facet&gt; + &lt;h:form&gt; + &lt;h:commandButton value="Test" action="#{TESTCONTROLLER.test}" /&gt; + &lt;/h:form&gt; +&lt;/rich:modalPanel&gt;</programlisting> + + + + <para>See also discussion about this problem on the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... Users Forum</ulink>.</para> + <para> The <emphasis> + <property>"label"</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>"label"</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>"DoubleRangeValidator.MAXIMUM"</code>, + {2} for <code>"ShortConverter.SHORT"</code>. </para> + <para>In RichFaces Cookbook article about + <ulink url="http://wiki.jboss.org/auth/wiki/RichFacesCookbook/DetailModalPa... Modal Panel </ulink> there is information for those of you who + would like to click on a details link in table and have it show a + modal panel with information loaded from the server. </para> + + <para> + To avoid overlapping of the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component on the page by any embed objects (inserted with HTML <code>&lt;EMBED&gt;</code> tag) set the <emphasis> + <property>"overlapEmbedObjects"</property> + </emphasis> attribute to "true". + </para> + + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/modalPanel.html">Table of + &lt;rich:modalPanel&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.ModalPanel</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlModalPanel</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.ModalPanel</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.ModalPanelRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.ModalPanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>show()</entry> + <entry>Opens the corresponding modalPanel</entry> + </row> + + <row> + <entry>hide()</entry> + <entry>Closes the corresponding modalPanel</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Define the header content</entry> + </row> + <row> + <entry>controls</entry> + <entry>Defines the control elements on the + header</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="mPC"> + <title>Classes names that define a component appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-modalpanel</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of a + modalPanel</entry> + </row> + + <row> + <entry>rich-mpnl-mask-div</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of a mask</entry> + </row> + + <row> + <entry>rich-mpnl_panel</entry> + + <entry>Defines styles for a modalPanel</entry> + </row> + + <row> + <entry>rich-mp-container </entry> + + <entry>Defines styles for a modalPanel + container</entry> + </row> + + <row> + <entry>rich-mpnl-resizer</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of a resizing + element</entry> + </row> + + <row> + <entry>rich-mpnl-shadow</entry> + + <entry>Defines styles for a modalPanel + shadow</entry> + </row> + + <row> + <entry>rich-mp-content-table</entry> + + <entry>Defines styles for a &lt;table&gt; + element of a modalPanel</entry> + </row> + + <row> + <entry>rich-mpnl-header</entry> + + <entry>Defines styles for a modalPanel + header</entry> + </row> + + <row> + <entry>rich-mpnl-header-cell</entry> + + <entry>Defines styles for a header cell</entry> + </row> + + <row> + <entry>rich-mpnl-text</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of a header + text</entry> + </row> + + <row> + <entry>rich-mpnl-body</entry> + + <entry>Defines styles for a content inside a + modalPanel</entry> + </row> + + <row> + <entry>rich-mpnl-controls</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of a modalPanel + control</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para>Visit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/modalPanel.... ModalPanel page</ulink> at RichFaces Livedemo for examples + of component usage and their sources. </para> + + <para>Read the "<ulink url="http://eclipse.dzone.com/articles/an-introduction-to-jboss-rich... An Introduction To JBoss RichFaces</ulink>" + tutorial by Max Katz to find out how the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> helps to edit and save changes for table entries. </para> + + <para>Some articles at JBoss portal describing different aspects of <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> usage: </para> + + <itemizedlist> + <listitem> + <para> "<ulink url="http://www.jboss.org/community/docs/DOC-11436">ModalPan... article + describes how to create a typical wizard with the + help of <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> component (the same could also be + found in the "<ulink url="http://www.jboss.org/community/wiki/PanelsandOutput#Organizewiz... How to organize wizards using the + &lt;rich:modalPanel&gt; + component?</ulink>" chapter of RichFaces + FAQ guide); </para> + </listitem> + <listitem> + <para>Refer to the "<ulink url="http://www.jboss.org/community/docs/DOC-11853">How to do a detail view modalPanel in a + table</ulink>" article in the RichFaces cookbook at JBoss Portal to find out how to + build a table with details link clicking on which + will display a modal panel with information loaded from the server.</para> + </listitem> + <listitem> + <para>"<ulink url="http://www.jboss.org/community/docs/DOC-11435">ModalPan... article + gives examples of validation in <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> (the same in the <ulink url="http://www.jboss.com/index.html?module=bb&amp;op=viewtopic&... topic</ulink> at RichFaces Users + Forum);</para> + </listitem> + <listitem> + <para>"<ulink url="http://www.jboss.org/community/docs/DOC-11863">RichFace... article + describes how to show a "Please + wait" box and block the input while the + Ajax request is being processed using combination + of <emphasis role="bold"> + <property>&lt;a4j:status&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> components. </para> + </listitem> + </itemizedlist> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_nodeSelectListener.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_nodeSelectListener.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_nodeSelectListener.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,113 @@ +<section role="NotInToc" id="rich_nodeSelectListener"> + <title> + &lt; + rich:nodeSelectListener + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:nodeSelectListener&gt;</property> + </emphasis> + represents an action listener method that is notified after selection of a node. + </para> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Allows to define some "nodeSelect" listeners for the component</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:nodeSelectListener&gt;</property> + </emphasis> is used as a nested tag with <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> + and <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components. +</para> + <para> +Attribute <emphasis> + <property>"type"</property> + </emphasis> defines the fully qualified Java class name for listener. + This class should implement <ulink url="&apidoc_framework;org/richfaces/event/NodeSelectedListener.html"> + <code>org.richfaces.event.NodeSelectedListener</code> + </ulink>. + interface</para> + + <para> + <emphasis role="bold">The typical variant of using:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:tree switchType="server" value="#{project.data}" var="item" nodeFace="#{item.type}"&gt; + &lt;rich:nodeSelectListener type="demo.ListenerBean"/&gt; + ... + &lt;!-- Tree nodes --&gt; + ... +&lt;/rich:tree&gt; +... +</programlisting> + + <para> + <emphasis role="bold">Java bean source:</emphasis> + </para> + + <programlisting role="JAVA">package demo; +import org.richfaces.event.NodeSelectedEvent; +public class ListenerBean implements org.richfaces.event.NodeSelectedListener{ + ... + public void processSelection(NodeSelectedEvent arg0){ + //Custom Developer Code + } + ... +} +</programlisting> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/nodeSelectListener.html">Table of + &lt;rich:nodeSelectListener&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + + <row> + <entry>listener-class</entry> + <entry>org.richfaces.event.NodeSelectedListener</entry> + </row> + <row> + <entry>event-class</entry> + <entry>org.richfaces.event.NodeSelectedEvent</entry> + </row> + + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.NodeSelectListenerTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_orderingList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_orderingList.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_orderingList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,794 @@ +<section role="NotInToc" id="rich_orderingList"> + <title> + &lt; + rich:orderingList + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.3</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> is a component for ordering items in a list. This component provides possibilities to reorder a list and sort it on the client side.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/orderingList_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Reordering possibility for list items</para> + </listitem> + <!--listitem>Customizable component layout (captions, headers, list items and ordering control set)</listitem--> + <!--listitem>Disabled/enabled ordering controls</listitem--> + <listitem> + <para>Multiple selection of list items</para> + </listitem> + <listitem> + <para>Keyboard support</para> + </listitem> + <!--listitem>Possibility to manage selection from + <itemizedlist> + <listitem><para>Keyboard</para></listitem> + <listitem><para>Server side</para></listitem> + </itemizedlist> + </listitem--> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <!--maintenance of component orderingList--> + + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component consists of <itemizedlist> + <listitem> + <para> + <property>Item list</property> element that displays a list of items. It + has three different representations for a single element: common, selected, + active. Combination of these states is possible.</para> + </listitem> + <listitem> + <para> + <property>Ordering controls set</property> + </para> + </listitem> + </itemizedlist> + </para> + + <!-- attributes of component orderingList --> + + <para>The <emphasis> + <property> "value"</property> + </emphasis> and <emphasis> + <property>"var" </property> + </emphasis> attributes are used to access the values of a list. </para> + + <para>Controls rendering is based on the <emphasis> + <property>"controlsType" </property> + </emphasis> attribute. Possible types are button or none. + </para> + <note> + <para> + Currently the button controls type is based on <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> element. + </para> + </note> + <para>The information about the <emphasis> + <property>"converter"</property> + </emphasis> attribute is <link linkend="conv">here</link>.</para> + <para> The <emphasis> + <property>"selection" </property> + </emphasis> attribute stores the collection of items selected by you. In the example + below after submitting the form the current collection is placed in the object's + property and then <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> with selected items is shown. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:orderingList value="#{bean.simpleItems}" var="item" selection="#{bean.selection}" controlsType="button"&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Cars" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{item}" /&gt; + &lt;/rich:column&gt; + &lt;/rich:orderingList&gt; + &lt;rich:dataTable id="infoPanelID" value="#{bean.info}" var="info" rendered="true"&gt; + &lt;rich:column&gt; + &lt;h:outputText value="#{info}" /&gt; + &lt;/rich:column&gt; + &lt;/rich:dataTable&gt; + &lt;a4j:commandButton value="reRender" reRender="infoPanelID" /&gt; +&lt;/h:form&gt; +...</programlisting> + <para> The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component allows to use <emphasis> + <property>"caption"</property> + </emphasis> + <!--and <emphasis> + <property>&quot;footer&quot; </property> + </emphasis> --> + facet. + A caption could be also defined with <emphasis> + <property>"captionLabel"</property> + </emphasis> attribute. + </para> + + <!-- ADD SCREENSHOT--> + + <para>Simple example is placed below.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}"&gt; + &lt;f:facet name="caption"&gt; + &lt;h:outputText value="Caption Facet" /&gt; + &lt;/f:facet&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Cars" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{item.name}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Price" /&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{item.price}" /&gt; + &lt;/rich:column&gt; +&lt;/rich:orderingList&gt; +...</programlisting> + + <!-- ordering control set--> + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component provides the possibility to use <property>ordering controls + set</property>, which performs reordering. Every control has possibility to be disabled. </para> + <para>An <property>ordering controls set</property> could be defined with <emphasis> + <property>"topControlLabel"</property> + </emphasis>, <emphasis> + <property>"bottomControlLabel"</property> + </emphasis>, <emphasis> + <property>"upControlLabel"</property> + </emphasis>, <emphasis> + <property>"downControlLabel"</property> + </emphasis>attributes. </para> + <para>It is also possible to use <emphasis> + <property>"topControl" </property> + </emphasis>, + <emphasis> + <property>"topControlDisabled"</property> + </emphasis>, <emphasis> + <property>"bottomControl"</property> + </emphasis>, + <emphasis> + <property>"bottomControlDisabled" </property> + </emphasis>, <emphasis> + <property>"upControl" </property> + </emphasis>, + <emphasis> + <property>"upControlDisabled" </property> + </emphasis>, + <emphasis> + <property>"downControl"</property> + </emphasis>, <emphasis> + <property>"downControlDisabled" </property> + </emphasis> facets in order to replace the default controls with facets content. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:orderingList value="#{bean.simpleItems}" var="item" controlsType="button" selection="#{bean.selection}"&gt; + &lt;f:facet name="topControl"&gt; + &lt;h:outputText value="Move to top" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="upControl"&gt; + &lt;h:outputText value="Move up" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="downControl"&gt; + &lt;h:outputText value="Move down" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="bottomControl"&gt; + &lt;h:outputText value="Move to bottom" /&gt; + &lt;/f:facet&gt; +&lt;rich:orderingList&gt; +...</programlisting> + + <para>The position of the controls relatively to a list could be customized with: <itemizedlist> + <!--listitem> + <emphasis> + <property>&quot;controlsPosition&quot;</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem><para>left - controls could be rendered to the left side of a list</para></listitem> + <listitem><para>right(default) - controls could be rendered to the right side of a + list </para></listitem> + <listitem><para>top - controls could be rendered above the list </para></listitem> + <listitem><para>bottom - controls could be rendered below the list </para></listitem> + </itemizedlist> + </listitem--> + <listitem> + <para> + <emphasis> + <property> "controlsHorizontalAlign"</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem> + <para>"left" - controls render to the left side of a list</para> + </listitem> + <listitem> + <para>"right" (default) - controls render to the right side of a list</para> + </listitem> + <listitem> + <para>"center" - controls is centered</para> + </listitem> + </itemizedlist> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "controlsVerticalAlign"</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem> + <para>"top" - controls render aligned to the top side of a list </para> + </listitem> + <listitem> + <para>"bottom" - controls render aligned to the bottom side of a list </para> + </listitem> + <listitem> + <para>"center" (default) - controls is centered relatively to a list + </para> + </listitem> + </itemizedlist> + </para> + </listitem> + <!--listitem><emphasis> + <property>&quot;controlsLayout&quot;</property> + </emphasis> attribute. Possible values: <itemizedlist> + <listitem><para>inline - controls defined one by one in line </para></listitem> + <listitem><para>block - controls defined in column </para></listitem> + </itemizedlist> + </listitem--> + </itemizedlist> + </para> + + <para>The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component has a possibility to hide any of the controls by pairs using + following attributes: <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"orderControlsVisible"</property> + </emphasis> attribute has two values: "true" or "false". If false + <property>Up</property> and <property>Down</property> controls are not + displayed.</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"fastOrderControlsVisible"</property> + </emphasis> attribute has two values: "true" or "false". If false + <property>Top</property> and <property>Bottom</property> controls are not + displayed.</para> + </listitem> + </itemizedlist> + </para> + <para> + The <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> component allows to use internationalization method + to redefine and localize the labels. You could use application resource bundle and define + <code>RICH_SHUTTLES_TOP_LABEL</code>, + <code>RICH_SHUTTLES_BOTTOM_LABEL</code>, + <code>RICH_SHUTTLES_UP_LABEL</code>, + <code>RICH_SHUTTLES_DOWN_LABEL</code> there. + </para> + <para> + You could also pack <code>org.richfaces.renderkit.orderingList</code> resource bundle with your JARs defining the same properties. + </para> + <!-- Wiil be done for 3.2.0 version--> + <!--para>The component provides possibility to be customized using templating. The + customization could be performed by a layout definition nested into the component. 5 + elements are provided to be defined inside template: {list}, {topControl}, + {bottomControl}, {downCotrol}, {upControl}. <para>The example is placed below.</para> + </para> + <para>Example:</para> + <programlisting role="XML"><![CDATA[... +<rich:orderingList> + <h:panelGrid columns="2" columnClasses="class1 class2"> + <h:outputText value="{list}"/> + <h:panelGroup> + <h:outputText value="{topControl}"/> + <h:outputText value="{upControl}"/> + <h:outputText value="{downControl}"/> + <h:outputText value="{bottomControl}"/> + </h:panelGroup> + </h:panelGrid> +</rich:orderingList> +...]]> + </programlisting--> + + <table> + <title>Keyboard usage for elements selection</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>CTRL+click</entry> + <entry>Inverts selection for an item</entry> + </row> + <row> + <entry>SHIFT+click</entry> + <entry>Selects all rows from active one to a clicked row if they differ, + else select the active row. All other selections are cleared</entry> + </row> + <row> + <entry>CTRL+A</entry> + <entry>Selects all elements inside the list if some active element is + already present in a list</entry> + </row> + <row> + <entry>Up, Down arrows</entry> + <entry>Changes the active and selected elements to the next or previous in a list</entry> + </row> + </tbody> + </tgroup> + </table> + + + <table> + <title>Keyboard usage for elements reordering</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>Page Up</entry> + <entry>Moves selected set to the top of a list</entry> + </row> + <row> + <entry>Page Down</entry> + <entry>Moves selected set to the bottom of a list</entry> + </row> + <row> + <entry>CTRL+Up arrow</entry> + <entry>Moves selected item to one position upper</entry> + </row> + <row> + <entry>CTRL+Down arrow</entry> + <entry>Moves selected item to one position lower</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/orderingList.html">Table of + &lt;rich:orderingList&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.OrderingList</entry> + </row> + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlOrderingList</entry> + </row> + <row> + <entry>component-family</entry> + + <entry>org.richfaces.OrderingList</entry> + </row> + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.OrderingListRenderer</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <!-- + <row> + <entry>SortAscending()</entry> + <entry>Sorts items in the list ascending</entry> + </row> + <row> + <entry>SortDescending()</entry> + <entry>Sorts items in the list descending</entry> + </row> + <row> + <entry>Sort()</entry> + <entry>Inverts current sorting</entry> + </row> + --> + + <!--Controls common API --> + <row> + <entry role="tbi">hide()</entry> + <entry role="tbi">Hides ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">show()</entry> + <entry role="tbi">Shows ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">isShown()</entry> + <entry role="tbi">Checks if current control is shown (to be implemented)</entry> + </row> + <row> + <entry role="tbi">enable()</entry> + <entry role="tbi">Enables ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">disable()</entry> + <entry role="tbi">Disables ordering control (to be implemented)</entry> + </row> + <row> + <entry role="tbi">isEnabled()</entry> + <entry role="tbi">Checks if current control is enabled (to be implemented)</entry> + </row> + <!--List managing API --> + <row> + <entry>Up()</entry> + <entry>Moves up selected item in the list</entry> + </row> + <row> + <entry>Down()</entry> + <entry>Moves down selected item in the list</entry> + </row> + <row> + <entry>Top()</entry> + <entry>Moves top selected item in the list</entry> + </row> + <row> + <entry>Bottom()</entry> + <entry>Moves bottom selected item in the list</entry> + </row> + <row> + <entry>getSelection()</entry> + <entry>Returns currently selected item</entry> + </row> + <row> + <entry>getItems()</entry> + <entry>Returns the collection of all items</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>caption</entry> + <entry>Redefines the caption content. Related attribute is "captionLabel"</entry> + </row> + <row> + <entry>topControl</entry> + <entry>Redefines the label for the "Top" control. Related attribute is "topControlLabel"</entry> + </row> + <row> + <entry>bottomControl</entry> + <entry>Redefines the label for the "Bottom" control. Related attribute is "bottomControlLabel"</entry> + </row> + <row> + <entry>upControl</entry> + <entry>Redefines the label for the "Up" control. Related attribute is "upControlLabel"</entry> + </row> + <row> + <entry>downControl</entry> + <entry>Redefines the label for the "Down" control. Related attribute is "downControlLabel"</entry> + </row> + <row> + <entry>topControlDisabled</entry> + <entry>Redefines the disabled label for the "Top" control</entry> + </row> + <row> + <entry>bottomControlDisabled</entry> + <entry>Redefines the disabled label for the "Bottom" control</entry> + </row> + <row> + <entry>upControlDisabled</entry> + <entry>Redefines the disabled label for the "Up" control</entry> + </row> + <row> + <entry>downControlDisabled</entry> + <entry>Redefines the disabled label for the "Down" control</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="OrderLC"> + <title>Classes names that define a list representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-body</entry> + <entry>Defines styles for a wrapper table element of an orderingList</entry> + </row> + <row> + <entry>rich-ordering-list-output</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a + list</entry> + </row> + <row> + <entry>rich-ordering-list-items</entry> + <entry>Defines styles for a wrapper table element of items in the + list</entry> + </row> + <row> + <entry>rich-ordering-list-content</entry> + <entry>Defines styles for a list content</entry> + </row> + <row> + <entry>rich-ordering-list-header</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element for a list + header</entry> + </row> + <row> + <entry>rich-ordering-list-table-header</entry> + <entry>Defines styles for a wrapper &lt;tr&gt; element for a list + header</entry> + </row> + <row> + <entry>rich-ordering-list-table-header-cell</entry> + <entry>Defines styles for a header cell</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a caption representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-caption</entry> + <entry>Defines styles for a caption</entry> + </row> + <row> + <entry>rich-ordering-list-caption-disabled</entry> + <entry>Defines styles for a caption in disabled state</entry> + </row> + <row> + <entry>rich-ordering-list-caption-active</entry> + <entry>Defines styles for a caption in active state</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define rows representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-row</entry> + <entry>Defines styles for a row</entry> + </row> + <row> + <entry>rich-ordering-list-row-selected</entry> + <entry>Defines styles for a selected row</entry> + </row> + <row> + <entry>rich-ordering-list-row-active</entry> + <entry>Defines styles for an active row</entry> + </row> + <row> + <entry>rich-ordering-list-row-disabled</entry> + <entry>Defines styles for a disabled row</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define cells representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-cell</entry> + <entry>Defines styles for a cell</entry> + </row> + <row> + <entry>rich-ordering-list-cell-selected</entry> + <entry>Defines styles for a selected cell</entry> + </row> + <row> + <entry>rich-ordering-list-cell-active</entry> + <entry>Defines styles for an active cell</entry> + </row> + <row> + <entry>rich-ordering-list-cell-disabled</entry> + <entry>Defines styles for a disabled cell</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a button representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-list-button</entry> + <entry>Defines styles for a button</entry> + </row> + <row> + <entry>rich-ordering-list-button-disabled</entry> + <entry>Defines styles for a disabled button</entry> + </row> + <row> + <entry>rich-ordering-list-button-light</entry> + <entry>Defines styles for a button highlight</entry> + </row> + <row> + <entry>rich-ordering-list-button-press</entry> + <entry>Defines styles for a pressed button</entry> + </row> + <row> + <entry>rich-ordering-list-button-content</entry> + <entry>Defines styles for a button content</entry> + </row> + <row> + <entry>rich-ordering-list-button-selection</entry> + <entry>Defines styles for a button selection</entry> + </row> + <row> + <entry>rich-ordering-list-button-valign</entry> + <entry>Defines styles for a wrapper &lt;td&gt; element for buttons + vertical align</entry> + </row> + <row> + <entry>rich-ordering-list-button-layout</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of buttons + layout</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define controls representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-ordering-controls</entry> + <entry>Defines styles for a controls group</entry> + </row> + <row> + <entry>rich-ordering-control-top</entry> + <entry>Defines styles for a "top" control</entry> + </row> + <row> + <entry>rich-ordering-control-bottom</entry> + <entry>Defines styles for a "bottom" control</entry> + </row> + <row> + <entry>rich-ordering-control-up</entry> + <entry>Defines styles for a "up" control</entry> + </row> + <row> + <entry>rich-ordering-control-down</entry> + <entry>Defines styles for a "down" control</entry> + </row> + <row> + <entry>rich-ordering-control-disabled</entry> + <entry>Defines styles for controls in disabled state</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/orderingLis... RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> + <property>&lt;rich:orderingList&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,28 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:page</keyword> - </keywordset> - <releaseinfo>3.3.1</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para>The <emphasis role="bold"> - <property>&lt;rich:page&gt;</property> - </emphasis> component is used to create basic (X)HTML markup and define document parameters like DOCTYPE, title etc. The component also allows to build top level layout: header, bottom, center and left or right layout areas.</para> - - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - - - <listitem><para>Option to change the renderer of the component (themes support)</para></listitem> - <listitem><para>Possibility to define parameters of an HTML page</para></listitem> - <listitem><para>Possibility to create page layout with facets</para></listitem> - <listitem><para>Provides styling based on RichFaces skinnability</para></listitem> - </itemizedlist> - </section> -</section> Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_page.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,564 +1,290 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:page</keyword> - <keyword>page</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.component.html.HtmlPage</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlPage</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Page</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.PageRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.PageTag</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:page> - <!-- page body --> -</rich:page> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlPage; -... -HtmlPage myHtmlPage = new HtmlPage(); -...]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> - - component together with the <emphasis role="bold"><property>&lt;rich:layout&gt;</property></emphasis> component provides - a full-fledged mechanism for markup creation. </para> - - - <para> - - First of all, to declare the document type of the page you should use the <emphasis><property>&quot;markupType&quot;</property></emphasis> attribute which has the following values: - </para> - - <itemizedlist> - <listitem><para>&quot;html&quot;</para></listitem> - <listitem><para>&quot;html-transitional&quot;</para></listitem> - <listitem><para>&quot;xhtml&quot;</para></listitem> - <listitem><para>&quot;xhtml-transitional&quot;</para></listitem> - <listitem><para>&quot;html-frameset&quot;</para></listitem> - <listitem><para>&quot;html-3.2&quot;</para></listitem> - - </itemizedlist> - <para>The default value is &quot;html&quot;.</para> - <para> - The <emphasis><property>&quot;contentType&quot;</property></emphasis> allows to specify the type of the content and encoding for the page. - </para> - - <para> - The title of the page can be set with the <emphasis><property>&quot;pageTile&quot;</property></emphasis> attribute. - To place some other page parameters (like meta information, links to CSS style sheets etc.) in the &lt;head&gt; element of an HTML page use &quot;pageHeader&quot; facet. - - </para> -<para> - <emphasis role="bold">Example:</emphasis> -</para> - -<programlisting role="XML"><![CDATA[... -<rich:page pageTitle="The title of the page" markupType="xhtml"> - <f:facet name="pageHeader"> - <meta content="The rich:page component" name="keywords" /> - <link rel="shortcut icon" href="/images/favicon.ico" /> - <link href="/css/style.css" rel="stylesheet" type="text/css" /> - <script type="text/javascript" src="/js/menu.js"></script> - </f:facet> - <!-- page content --> -</rich:page> -...]]></programlisting> - - <note> - <title>Note:</title> - <para>Note, the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component encodes the full page structure. Therefore, be sure you don&apos;t - use the doctype declaration, root html element, head and body elements on the same page where you&apos;ve put this component.</para> - </note> - - <para>The implementation of the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component provides four facets that you can use to arrange the layout of the page: &quot;header&quot;, &quot;subheader&quot;, &quot;sidebar&quot; and &quot;footer&quot;. Their behavior is quite self-explanatory. </para> - <para>The position of the panel rendered by the &quot;sidebar&quot; facet can be set with the <emphasis><property>&quot;sidebarPosition&quot;</property></emphasis> attribute that can take either &quot;right&quot; or &quot;left&quot; as values, you can also specify the width for this facet with the <emphasis><property>&quot;sidebarWidth&quot;</property></emphasis> attribute. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - - - <programlisting role="XML"><![CDATA[... -<rich:page sidebarPosition="left" sidebarWidth="300"> - <f:facet name="header"> - <!-- header content --> - </f:facet> - <f:facet name="sidebar"> - <!-- side panel content --> - </f:facet> - <!-- body content --> - <f:facet name="footer"> - <!-- footer content --> - </f:facet> -</rich:page> -...]]></programlisting> - - - <para>The <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component also provides attributes to define CSS classes for each nested facet as well as a body part of the page created with the component.</para> - - - <para>Several templates are available for the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component. A template can be activated with the <emphasis><property>&quot;theme&quot;</property></emphasis> attribute.</para> - - <para>The theme defines the way the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> is rendered. Default renderer(default theme) of the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> has no mappings to skin parameters and just provides CSS classes for the page part. However, the <property>simple</property> theme, which is an extension of the default theme, has mappings to skin parameters and adds the RichFaces skinning for the page elements. </para> - - <para>As a whole, RichFaces provides 4 themes for the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component out-of-the-box: &quot;simple&quot;, &quot;violetRays&quot;, &quot;oldschool&quot;, &quot;smooth&quot;. The <ulink url="http://www.jboss.org/community/docs/DOC-13635">Creating a Theme for &lt;rich:page&gt;</ulink> article tells how you can create your custom theme for the <emphasis role="bold"><property>&lt;rich:page&gt;</property></emphasis> component. </para> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>pageHeader</entry> - <entry>Creates the &lt;head/&gt; part of the HTML page</entry> - </row> - <row> - <entry>header</entry> - <entry>Creates a header</entry> - </row> - - <row> - <entry>subheader</entry> - <entry>Creates a horizontal panel under the header</entry> - </row> - <row> - <entry>footer</entry> - <entry>Creates a footer</entry> - </row> - - <row> - <entry>sidebar</entry> - <entry>Creates a left/right panel</entry> - </row> - - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Skin Parameters for the &quot;simple&quot; theme</title> - <table> - <title>Skin parameters for the &lt;body/&gt; HTML element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters for the whole page</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - - - <table> - <title>Skin parameters for the header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalSizeFont </entry> - <entry>border-bottom-color</entry> - </row> - - <row> - <entry>headerGradientColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>trimColor</entry> - <entry>color</entry> - </row> - - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - - - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - - - <table> - <title>Skin parameters for the content area of the page</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - - <row> - <entry>trimColor</entry> - <entry>color</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - - - <table> - <title>Skin parameters for the footer</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>border-top-color</entry> - </row> - - <row> - <entry>panelBorderColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters for the side panel</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - - </tbody> - </tgroup> - </table> - - - <table> - <title>Skin parameters for h1,h2,h3 HTML tags</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - - <row> - <entry>headTextColor</entry> - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters for p,ul,ol HTML tags</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - - <row> - <entry>controlTextColor</entry> - <entry>color</entry> - </row> - - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters for the hovered link</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>hoverLinkColor</entry> - <entry>color</entry> - </row> - - - </tbody> - </tgroup> - </table> - - - - <table> - <title>Skin parameters for the visited link</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - - <row> - <entry>visitedLinkColor</entry> - <entry>color</entry> - </row> - - - </tbody> - </tgroup> - </table> - - - </section> - - - <section> - <title>Component CSS Selectors</title> - - <table id="RichpageSelectors"> - <title>CSS Selectors that define the representation of the component's blocks</title> - <tgroup cols="2"> - <thead> - <row> - <entry>CSS Selector</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - - <row> - <entry>.rich-page</entry> - <entry>Defines styles for the whole page</entry> - </row> - - - <row> - <entry>.rich-page-header</entry> - <entry>Defines styles for the header</entry> - </row> - - <row> - <entry>.rich-page-subheader</entry> - <entry>Defines styles for the block under the header</entry> - </row> - - <row> - <entry>.rich-page-sidebar</entry> - <entry>Defines styles for the sidebar</entry> - </row> - - <row> - <entry>.rich-page-body</entry> - <entry>Defines styles for the body part of the page</entry> - </row> - - <row> - <entry>.rich-page-footer</entry> - <entry>Defines styles for the footer</entry> - </row> - - - </tbody> - </tgroup> - </table> - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf... - >On the component Live Demo page</ulink> you can see the example of <emphasis role="bold"> - <property>&lt;rich:page&gt;</property> - </emphasis> component usage and sources for the given example. </para> - <para>The <ulink url="http://www.jboss.org/community/docs/DOC-13336">Layout components for RichFaces 3.3.1</ulink> on the JBoss.org Wiki</para> - </section> +<section role="NotInToc" id="rich_page"> + <title> + &lt; + rich:page + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.3.1</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component is used to create basic (X)HTML markup and define document parameters like DOCTYPE, title etc. The component also allows to build top level layout: header, bottom, center and left or right layout areas.</para> + + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + + + <listitem> + <para>Option to change the renderer of the component (themes support)</para> + </listitem> + <listitem> + <para>Possibility to define parameters of an HTML page</para> + </listitem> + <listitem> + <para>Possibility to create page layout with facets</para> + </listitem> + <listitem> + <para>Provides styling based on RichFaces skinnability</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> + + component together with the <emphasis role="bold"> + <property>&lt;rich:layout&gt;</property> + </emphasis> component provides + a full-fledged mechanism for markup creation. </para> + + + <para> + + First of all, to declare the document type of the page you should use the <emphasis> + <property>"markupType"</property> + </emphasis> attribute which has the following values: + </para> + <itemizedlist> + <listitem> + <para>"html"</para> + </listitem> + <listitem> + <para>"html-transitional"</para> + </listitem> + <listitem> + <para>"xhtml"</para> + </listitem> + <listitem> + <para>"xhtml-transitional"</para> + </listitem> + <listitem> + <para>"html-frameset"</para> + </listitem> + <listitem> + <para>"html-3.2"</para> + </listitem> + + </itemizedlist> + <para>The default value is "html".</para> + <para> + The <emphasis> + <property>"contentType"</property> + </emphasis> allows to specify the type of the content and encoding for the page. + </para> + + <para> + The title of the page can be set with the <emphasis> + <property>"pageTile"</property> + </emphasis> attribute. + To place some other page parameters (like meta information, links to CSS style sheets etc.) in the &lt;head&gt; element of an HTML page use "pageHeader" facet. + + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:page pageTitle="The title of the page" markupType="xhtml"&gt; + &lt;f:facet name="pageHeader"&gt; + &lt;meta content="The rich:page component" name="keywords" /&gt; + &lt;link rel="shortcut icon" href="/images/favicon.ico" /&gt; + &lt;link href="/css/style.css" rel="stylesheet" type="text/css" /&gt; + &lt;script type="text/javascript" src="/js/menu.js"&gt;&lt;/script&gt; + &lt;/f:facet&gt; + &lt;!-- page content --&gt; +&lt;/rich:page&gt; +...</programlisting> + <note> + <title>Note:</title> + <para>Note, the <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component encodes the full page structure. Therefore, be sure you don't + use the doctype declaration, root html element, head and body elements on the same page where you've put this component.</para> + </note> + + <para>The implementation of the <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component provides four facets that you can use to arrange the layout of the page: "header", "subheader", "sidebar" and "footer". Their behavior is quite self-explanatory. </para> + <para>The position of the panel rendered by the "sidebar" facet can be set with the <emphasis> + <property>"sidebarPosition"</property> + </emphasis> attribute that can take either "right" or "left" as values, you can also specify the width for this facet with the <emphasis> + <property>"sidebarWidth"</property> + </emphasis> attribute. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + + + <programlisting role="XML">... +&lt;rich:page sidebarPosition="left" sidebarWidth="300"&gt; + &lt;f:facet name="header"&gt; + &lt;!-- header content --&gt; + &lt;/f:facet&gt; + &lt;f:facet name="sidebar"&gt; + &lt;!-- side panel content --&gt; + &lt;/f:facet&gt; + &lt;!-- body content --&gt; + &lt;f:facet name="footer"&gt; + &lt;!-- footer content --&gt; + &lt;/f:facet&gt; +&lt;/rich:page&gt; +...</programlisting> + <para>The <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component also provides attributes to define CSS classes for each nested facet as well as a body part of the page created with the component.</para> + + + <para>Several templates are available for the <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component. A template can be activated with the <emphasis> + <property>"theme"</property> + </emphasis> attribute.</para> + + <para>The theme defines the way the <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> is rendered. Default renderer(default theme) of the <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> has no mappings to skin parameters and just provides CSS classes for the page part. However, the <property>simple</property> theme, which is an extension of the default theme, has mappings to skin parameters and adds the RichFaces skinning for the page elements. </para> + + <para>As a whole, RichFaces provides 4 themes for the <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component out-of-the-box: "simple", "violetRays", "oldschool", "smooth". The <ulink url="http://www.jboss.org/community/docs/DOC-13635">Creating a Theme for &lt;rich:page&gt;</ulink> article tells how you can create your custom theme for the <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component. </para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/page.html">Table of + &lt;rich:page&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.component.html.HtmlPage</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPage</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Page</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.PageRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.PageTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet Name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>pageHeader</entry> + <entry>Creates the &lt;head/&gt; part of the HTML page</entry> + </row> + <row> + <entry>header</entry> + <entry>Creates a header</entry> + </row> + + <row> + <entry>subheader</entry> + <entry>Creates a horizontal panel under the header</entry> + </row> + <row> + <entry>footer</entry> + <entry>Creates a footer</entry> + </row> + <row> + <entry>sidebar</entry> + <entry>Creates a left/right panel</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="RichpageSelectors"> + <title>CSS Selectors that define the representation of the component's blocks</title> + <tgroup cols="2"> + <thead> + <row> + <entry>CSS Selector</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + + <row> + <entry>.rich-page</entry> + <entry>Defines styles for the whole page</entry> + </row> + <row> + <entry>.rich-page-header</entry> + <entry>Defines styles for the header</entry> + </row> + + <row> + <entry>.rich-page-subheader</entry> + <entry>Defines styles for the block under the header</entry> + </row> + + <row> + <entry>.rich-page-sidebar</entry> + <entry>Defines styles for the sidebar</entry> + </row> + <row> + <entry>.rich-page-body</entry> + <entry>Defines styles for the body part of the page</entry> + </row> + <row> + <entry>.rich-page-footer</entry> + <entry>Defines styles for the footer</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/layouts.jsf... the component Live Demo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:page&gt;</property> + </emphasis> component usage and sources for the given example. </para> + <para>The <ulink url="http://www.jboss.org/community/docs/DOC-13336">Layout components for RichFaces 3.3.1</ulink> on the JBoss.org Wiki</para> + </section> </section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_paint2D.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_paint2D.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_paint2D.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,180 @@ +<section role="NotInToc" id="rich_paint2D"> + <title> + &lt; + rich:paint2D + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>Create image by painting from a managed bean method, same as <emphasis> + <property>"paint"</property> + </emphasis> (Graphics2D) + in <emphasis> + <property>"SWING"</property> + </emphasis> components. </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:paint2D&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/paint2D_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Simple Graphics2D - painting style directly on the Web page</para> + </listitem> + <listitem> + <para>Supports client/server caching for generated images</para> + </listitem> + <listitem> + <para>Fully supports <emphasis> + <property>"JPEG"</property> + </emphasis> (24-bit, default), <emphasis> + <property>"GIF"</property> + </emphasis> (8-bit with + transparency), and <emphasis> + <property>"PNG"</property> + </emphasis> (32-bit with transparency) + formats for sending generated images</para> + </listitem> + <listitem> + <para>Easily customizable borders and white space to wrap the image</para> + </listitem> + <listitem> + <para>Dynamically settable paint parameters using tag attributes</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The example shows two main attributes of the component:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"paint"</property> + </emphasis> + </para> + <para>Specify a method receiving an object specified in data as a parameter and sending + graphical information into the stream</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"data"</property> + </emphasis> + </para> + <para>Specifies a bean class keeping your data for rendering</para> + </listitem> + </itemizedlist> + <para> + <note> + <title>Note:</title> + <para>Data object should implement serializable interface </para> + </note> + </para> + <para>The <emphasis> + <property>"format"</property> + </emphasis> attribute of the component defines a format of visual data passing to the server.</para> + <para>Generated data can be used as a cacheable or non-cacheable resource. It's defined + with <emphasis> + <property>"cacheable"</property> + </emphasis> attribute. If cache support is turned on, a key is created in URI with a mix of + size (width/height), <code>"paint"</code> method, <emphasis> + <property>"format"</property> + </emphasis> and <emphasis> + <property>"data"</property> + </emphasis> attributes.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA">paintBean.java: + +public void paint(Graphics2D g2, Object obj) { + // code that gets data from the data Bean (PaintData) + PaintData data = (PaintData) obj; + ... + // a code drawing a rectangle + g2.drawRect(0, 0, data.Width, data.Height); + ... + // some more code placing graphical data into g2 stream below +} + +dataBean.java: + +public class PaintData implements Serializable{ + private static final long serialVersionUID = 1L; + Integer Width=100; + Integer Height=50; + ... +} + +page.xhtml: + +... +&lt;rich:paint2D paint="#{paint2D.paint}" data="#{paint2DModel.data}"/&gt; +... +</programlisting> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/paint2D.html">Table of + &lt;rich:paint2D&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Paint2D</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPaint2D</entry> + </row> + <row> + <entry>component-family</entry> + <entry>javax.faces.Output</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.Paint2DRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.Paint2DTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/paint2D.jsf... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:paint2D&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,270 @@ +<section role="NotInToc" id="rich_panel"> + <title> + &lt; + rich:panel + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A skinnable <property>panel</property> that is rendered as a bordered rectangle with or + without a header.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panel_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel </para> + </listitem> + <listitem> + <para>Support for any content inside</para> + </listitem> + <listitem> + <para>Header adding feature</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis> + <property>"header"</property> + </emphasis> attribute defines text to be represented. If you can use the + <emphasis> + <property>"header"</property> + </emphasis> facet, you can even not use the <emphasis> + <property>"header"</property> + </emphasis> attribute.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panel&gt; + &lt;f:facet name="header"&gt; + &lt;h:graphicImage value="/images/img1.png"/&gt; + &lt;/f:facet&gt; + ... + &lt;!--Any Content inside--&gt; + ... +&lt;/rich:panel&gt; +... +</programlisting> + + <para> + <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> components are used to group page content pieces on similarly formatted + rectangular <property>panels</property>. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panel&gt; + ... +&lt;/rich:panel&gt; +... +</programlisting> + <para>It's generating on a page in the following way:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> without header</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panel2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The example shows that similar rectangular areas are formed with a particular style.</para> + <para>When creating a <property>panel</property> with a header element, one more <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> element is added with content defined for a header.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panel&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Olympus EVOLT E-500 "/&gt; + &lt;/f:facet&gt; + ... +&lt;/rich:panel&gt; +... +</programlisting> + <para>It's displayed on a page in the following way:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> with header</emphasis> + </title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panel3.png"/> + </imageobject> + </mediaobject> + </figure> + <para>As it has been mentioned <link linkend="panel">above</link>, the component is mostly used for a page style definition, + hence the main attributes are style ones.</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property> "styleClass" </property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "headerClass" </property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "bodyClass" </property> + </emphasis> + </para> + </listitem> + </itemizedlist> + <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/panel.html">Table of + &lt;rich:panel&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.panel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.panel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.PanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.PanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Defines the header content</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn11"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-panel</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> + </row> + <row> + <entry>rich-panel-header</entry> + <entry>Defines styles for a header element</entry> + </row> + <row> + <entry>rich-panel-body</entry> + <entry>Defines styles for a body element</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?c... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:panel&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBar.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,164 @@ +<section role="NotInToc" id="rich_panelBar"> + <title> + &lt; + rich:panelBar + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + <property>panelBar</property> is used for grouping any content which is loaded on the client + side and appears as groups divided on child panels after the header is clicked.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> with content inside</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelBar_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Skinnable slide panel and child items</para> + </listitem> + <listitem> + <para>Groups any content inside each panel</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>As it was mentioned <link linkend="panelBar">above</link>, + <property>panelBar</property> is used for grouping any content on the client, thus its + customization deals only with specification of sizes and styles for rendering.</para> + <para> + <emphasis> + <property>"width"</property> + </emphasis> and <emphasis> + <property>"height"</property> + </emphasis> (both are 100% on default) attributes stand apart.</para> + <para>Style attributes are described further.</para> + <para> + <property>panelBar</property> could contain any number of child + <property>panelBarItem</property> components inside, which content is uploaded onto the + client and headers are controls to open the corresponding child element.</para> + <!--para> + The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute is a generic attribute. + The <emphasis> + <property>&quot;label&quot;</property> + </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. + This attribute defines the parameters of localized error and informational messages that + occur as a result of conversion, validation, or other application actions during the request + processing lifecycle. With the help of this attribute you can replace the + last parameter substitution token shown in the messages. For example, {1} for <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, {2} + for <code>&quot;ShortConverter.SHORT&quot;</code>. + </para--> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/panelBar.html">Table of + &lt;rich:panelBar&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.PanelBar</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPanelBar</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.PanelBar</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.PanelBarRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.PanelBarTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_pB"> + <title>Class name that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-panelbar</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a + component</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Style component classes</title> + <tgroup cols="2"> + <thead> + <row> + <entry>A class attribute</entry> + <entry>A component element defined by an attribute</entry> + </row> + </thead> + <tbody> + <row> + <entry>styleClass</entry> + <entry>Applicable to a whole component (together with headers)</entry> + </row> + <row> + <entry>headerClass</entry> + <entry>Applicable to a header element</entry> + </row> + <row> + <entry>contentClass</entry> + <entry>Applicable to a content </entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelBar.js... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:panelBar&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBarItem.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBarItem.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelBarItem.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,183 @@ +<section role="NotInToc" id="rich_panelBarItem"> + <title> + &lt; + rich:panelBarItem + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + <property>panelBarItem</property> is used for grouping any content inside within one + panelBar which is loaded on client side and appears as groups divided on child panels after + header is clicked.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panelBarItem&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelBarItem_init.png" scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel </para> + </listitem> + <listitem> + <para>Groups any content inside each Panels</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis> + <property> "label"</property> + </emphasis> attribute defines text to be represented. If you can use the <emphasis> + <property>"label"</property> + </emphasis> facet, you can even not use the <emphasis> + <property>"label"</property> + </emphasis> attribute.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelBarItem...&gt; + &lt;f:facet name="label"&gt; + &lt;h:graphicImage value="/images/img1.png"/&gt; + &lt;/f:facet&gt; + ... + &lt;!--Any Content inside--&gt; + ... +&lt;/rich:panelBarItem&gt; +... +</programlisting> + <para>As it was mentioned <link linkend="panelBarItem">above</link>, + <property>panelBarItem</property> is used for grouping any content inside within one + <property>panelBar</property>, thus its customization deals only with specification of sizes + and styles for rendering.</para> + <para> + <property>panelBar</property> could contain any number of child + <property>panelBarItem</property> components inside, which content is uploaded onto the client + and headers are controls to open the corresponding child element.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/panelBarItem.html">Table of + &lt;rich:panelBarItem&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.PanelBarItem</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPanelBarItem</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.PanelBarItem</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.PanelBarItemRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.PanelBarItemTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>label</entry> + <entry>defines the label text on the panel item header</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_pBI"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-panelbar-header</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a header + element</entry> + </row> + + <row> + <entry>rich-panelbar-header-act</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of an active header + element</entry> + </row> + + <row> + <entry>rich-panelbar-content</entry> + <entry>Defines styles for a content</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Style component classes</title> + <tgroup cols="2"> + <thead> + <row> + <entry>A class attribute</entry> + <entry>A component element defined by an attribute</entry> + </row> + </thead> + <tbody> + <row> + <entry>headerClass</entry> + <entry>Applicable to a header element</entry> + </row> + <row> + <entry>contentClass</entry> + <entry>Applicable to a content</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenu.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenu.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenu.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,328 @@ +<section role="NotInToc" id="rich_panelMenu"> + <title> + &lt; + rich:panelMenu + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> component is used to define an in line vertical menu on a page.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenu_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Different submission modes</para> + </listitem> + <listitem> + <para>Collapsing/expanding sublevels with optional request sending</para> + </listitem> + <listitem> + <para>Custom and predefined icons support</para> + </listitem> + <listitem> + <para>Disablement support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>All attributes are not required.</para> + <para>Use <emphasis> + <property>"event"</property> + </emphasis> attribute to define an event for appearance of collapsing/expanding sublevels. + Default value is "onclick". An example could be seen below.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelMenu event="onmouseover"&gt; + &lt;!--Nested panelMenu components--&gt; +&lt;/rich:panelMenu&gt; +...</programlisting> + + <para>Switching mode could be chosen with the <emphasis> + <property>"mode"</property> + </emphasis> attribute for all panelMenu items except ones where this attribute was redefined. + By default all items send traditional request. </para> + <para>The <emphasis> + <property>"expandMode"</property> + </emphasis> attribute defines the submission modes for all collapsing/expanding panelMenu + groups except ones where this attribute was redefined. </para> + <para>The <emphasis> + <property>"mode"</property> + </emphasis> and <emphasis> + <property>"expandMode"</property> + </emphasis> attributes could be used with three possible parameters. The <emphasis> + <property>"mode"</property> + </emphasis> attribute defines parameters for all included <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> elements.</para> + + <itemizedlist> + <listitem> + <para> + <code>Server</code> (default)</para> + </listitem> + </itemizedlist> + + <para>The common submission of the form is performed and a page is completely refreshed.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelMenu mode="server"&gt; + &lt;rich:panelMenuGroup label="test Group" action="#{bean.action}"&gt; + &lt;rich:panelMenuItem label="test" action="#{capitalsBean.action}"&gt; + &lt;f:param value="test value" name="test"/&gt; + &lt;/rich:panelMenuItem&gt; + &lt;/rich:panelMenuGroup&gt; +&lt;/rich:panelMenu&gt; +...</programlisting> + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + + <para>An Ajax form submission is performed, and additionally specified elements in the <emphasis> + <property>"reRender"</property> + </emphasis> attribute are reRendered.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelMenu mode="ajax"&gt; + &lt;rich:panelMenuGroup label="test Group" action="#{bean.action}"&gt; + &lt;rich:panelMenuItem label="test" reRender="test" action="#{capitalsBean.action}"&gt; + &lt;f:param value="test value" name="test"/&gt; + &lt;/rich:panelMenuItem&gt; + &lt;/rich:panelMenuGroup&gt; +&lt;/rich:panelMenu&gt; +...</programlisting> + <itemizedlist> + <listitem> + <para> + <code>None</code> + </para> + </listitem> + </itemizedlist> + + <para> + <emphasis> + <property>"Action"</property> + </emphasis> and <emphasis> + <property>"ActionListener"</property> + </emphasis> item's attributes are ignored. Items don't fire any submits itself. Behavior is + fully defined by the components nested into items.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelMenu event="onclick" submitMode="none"&gt; + &lt;rich:panelMenuItem label="Link to external page"&gt; + &lt;h:outputLink ... &gt; + &lt;rich:panelMenuItem&gt; +&lt;/rich:panelMenu&gt; +...</programlisting> + + <note> + <title>Note:</title> + <para> As the <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> component doesn't provide its own form, use it between + <emphasis role="bold"> + <property>&lt;h:form&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;/h:form&gt;</property> + </emphasis> tags.</para> + </note> + + <para>The <emphasis> + <property>"expandSingle"</property> + </emphasis> attribute is defined for expanding more than one submenu on the same level. The + default value is <emphasis> + <property>"false"</property> + </emphasis>. If it's true the previously opened group on the top level closes before + opening another one. See the picture below.</para> + + <figure> + <title>Using the <emphasis> + <property>"expandSingle"</property> + </emphasis> attribute</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenu2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>The <emphasis> + <property>"selectedChild"</property> + </emphasis> attribute is used for defining the name of the selected group or item. An example + for group is placed below:</para> + + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelMenu selectedChild="thisChild"&gt; + &lt;rich:panelMenuGroup label="Group1" name="thisChild"&gt; + &lt;!--Nested panelMenu components--&gt; + &lt;/rich:panelMenuGroup&gt; +&lt;/rich:panelMenu&gt; +...</programlisting> + <para> + The <emphasis> + <property>"label"</property> + </emphasis> attribute is a generic attribute. + The <emphasis> + <property>"label"</property> + </emphasis> attribute provides an association between a component, and the message that the component (indirectly) produced. + This attribute defines the parameters of localized error and informational messages that + occur as a result of conversion, validation, or other application actions during the request + processing lifecycle. With the help of this attribute you can replace the + last parameter substitution token shown in the messages. For example, {1} for <code>"DoubleRangeValidator.MAXIMUM"</code>, {2} + for <code>"ShortConverter.SHORT"</code>. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/panelMenu.html">Table of + &lt;rich:panelMenu&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.PanelMenu</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlPanelMenu</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.PanelMenu</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.PanelMenuRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.PanelMenuTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>expand()</entry> + + <entry>Expands group element</entry> + </row> + + <row> + <entry>collapse()</entry> + + <entry>Collapses group element</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn_pM"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-pmenu</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> + </row> + <row> + <entry>rich-pmenu-top-group</entry> + <entry>Defines styles for a top group element of a component</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:panelMenu&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuGroup.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,349 @@ +<section role="NotInToc" id="rich_panelMenuGroup"> + <title> + &lt; + rich:panelMenuGroup + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:panelMenuGroup&gt;</property> + </emphasis> component is used to define an expandable group of items inside the panel menu or other group.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panelMenuGroup&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuGroup_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look-and-feel</para> + </listitem> + <listitem> + <para>Different submission modes inside every group</para> + </listitem> + <listitem> + <para>Optional submissions on expand collapse groups</para> + </listitem> + <listitem> + <para>Custom and predefined icons supported</para> + </listitem> + <listitem> + <para>Support for disabling</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>All attributes except <emphasis> + <property>"label"</property> + </emphasis> are optional. The <emphasis> + <property>"label"</property> + </emphasis> attribute defines text to be represented.</para> + <para>Switching mode could be chosen with the<emphasis> + <property> "expandMode"</property> + </emphasis> attribute for the concrete panelMenu group.</para> + <para>The <emphasis> + <property>"expandMode"</property> + </emphasis> attribute could be used with three possible parameters:</para> + + <itemizedlist> + <listitem> + <para> + <code>ServerM</code> (default)</para> + </listitem> + </itemizedlist> + + <para>Regular form submission request is used.</para> + + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + + <para>Ajax submission is used for switching.</para> + + <itemizedlist> + <listitem> + <para> + <code>None</code> + </para> + </listitem> + </itemizedlist> + + <para> + <emphasis> + <property>"Action"</property> + </emphasis> and <emphasis> + <property>"actionListener"</property> + </emphasis> attributes are ignored. Items don't fire any submits itself. Behavior is + fully defined by the components nested into items.</para> + + <para>There are three icon-related attributes. The <emphasis> + <property>"iconExpanded"</property> + </emphasis> attribute defines an icon for an expanded state. The <emphasis> + <property>"iconCollapsed"</property> + </emphasis> attribute defines an icon for a collapsed state. The <emphasis> + <property>"iconDisabled"</property> + </emphasis> attribute defines an icon for a disabled state.</para> + + <para>Default icons are shown on the picture below:</para> + + <figure> + <title>Default icons</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuGroup2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelMenu&gt; + &lt;rich:panelMenuGroup label="Group1" iconExpanded="disc" iconCollapsed="chevron"&gt; + &lt;!--Nested panelMenu components--&gt; + &lt;/rich:panelMenuGroup&gt; +&lt;/rich:panelMenu&gt; +...</programlisting> + <para> As the result the pictures are shown below. The first one represents the collapsed state, + the second one - expanded state:</para> + + <figure> + <title>Collapsed state</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuGroup3.png"/> + </imageobject> + </mediaobject> + </figure> + + <figure> + <title>Expanded state</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuGroup4.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>It's also possible to define a path to the icon. Simple code is placed below.</para> + + <programlisting role="XML">... +&lt;rich:panelMenu&gt; + &lt;rich:panelMenuGroup label="Group1" iconExpanded="\images\img1.png" iconCollapsed="\images\img2.png"&gt; + &lt;!--Nested menu components--&gt; + &lt;/rich:panelMenuGroup&gt; +&lt;/rich:panelMenu&gt; +...</programlisting> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find <link linkend="process">" Decide what to process " </link> guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/panelMenuGroup.html">Table of + &lt;rich:panelMenuGroup&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.PanelMenuGroup</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlPanelMenuGroup</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.PanelMenuGroup</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.PanelMenuGroupRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.PanelMenuGroupTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>expand()</entry> + + <entry>Expand group element</entry> + </row> + + <row> + <entry>collapse()</entry> + + <entry>Collapse group element</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="panelMenuC"> + <title>Classes names that define an upper level groups</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>rich-pmenu-top-group-self-icon</entry> + + <entry>Defines styles for a top group icon</entry> + </row> + + <row> + <entry>rich-pmenu-top-group-self-label</entry> + + <entry>Defines styles for a top group label</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a second and lower level groups</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>rich-pmenu-group</entry> + + <entry>Defines styles for a group</entry> + </row> + + <row> + <entry>rich-pmenu-group-self-icon</entry> + + <entry>Defines styles for a group icon</entry> + </row> + + <row> + <entry>rich-pmenu-group-self-label</entry> + + <entry>Defines styles for a group label</entry> + </row> + </tbody> + + </tgroup> + </table> + <table> + <title>Classes names that define a group state</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-hovered-element</entry> + + <entry>Defines styles for a hovered group element</entry> + </row> + + <row> + <entry>rich-pmenu-disabled-element</entry> + + <entry>Defines styles for a disabled group element</entry> + </row> + </tbody> + + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Some additional information about usage of component can be found + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j... the component Live Demo page</ulink>. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuItem.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuItem.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_panelMenuItem.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,342 @@ +<section role="NotInToc" id="rich_panelMenuItem"> + <title> + &lt; + rich:panelMenuItem + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> component is used to define a single item inside popup list.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:panelMenuItem&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look-and-feel</para> + </listitem> + <listitem> + <para>Different submission modes</para> + </listitem> + <listitem> + <para>Optionally supports any content inside</para> + </listitem> + <listitem> + <para>Custom and predefined icons supported</para> + </listitem> + <listitem> + <para>Support for disabling</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>All attributes except <emphasis> + <property>"label"</property> + </emphasis> are optional. The <emphasis> + <property>"label"</property> + </emphasis> attribute defines text to be represented.</para> + <para>The <emphasis> + <property>"mode"</property> + </emphasis> attribute could be used with three possible parameters:</para> + + <itemizedlist> + <listitem> + <para> + <code>Server</code> (default)</para> + </listitem> + </itemizedlist> + + <para>Regular form submission request is used.</para> + + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + + <para>Ajax submission is used for switching.</para> + + <itemizedlist> + <listitem> + <para> + <code>None</code> + </para> + </listitem> + </itemizedlist> + + <para> + <emphasis> + <property>"Action"</property> + </emphasis> and <emphasis> + <property>"actionListener"</property> + </emphasis> attributes are ignored. Items don't fire any + submits itself. Behavior is fully defined by the components nested + into items.</para> + + <para>Here is an example for value "none":</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:panelMenu&gt; + ... + &lt;rich:panelMenuItem mode="none" onclick="document.location.href='http://labs.jboss.com/jbossrich... + &lt;h:outputLink value="http://labs.jboss.com/jbossrichfaces/"&gt; + &lt;h:outputText value="RichFaces Home Page"&gt;&lt;/h:outputText&gt; + &lt;/h:outputLink&gt; + &lt;/rich:panelMenuItem&gt; + ... +&lt;/rich:panelMenu&gt; +...</programlisting> + + <para>There are two icon-related attributes. The <emphasis> + <property>"icon"</property> + </emphasis> attribute defines an icon. The <emphasis> + <property>"iconDisabled"</property> + </emphasis> attribute defines an icon for a disabled item.</para> + + <para>Default icons are shown on the picture below:</para> + + <figure> + <title>Default icons</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... + &lt;rich:panelMenu&gt; + ... + &lt;rich:panelMenuItem value="Item 1.1" icon="chevronUp" /&gt; + ... + &lt;/rich:panelMenu&gt; +...</programlisting> + <para> As the result the picture is shown below:</para> + + <figure> + <title>Using an <emphasis> + <property>"icon"</property> + </emphasis> attribute</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/panelMenuItem3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>It's also possible to define a path to the icon. Simple code is + placed below.</para> + + <programlisting role="XML">... +&lt;rich:panelMenu&gt; + ... + &lt;rich:panelMenuItem value="Item 1.1" icon="\images\img1.png" /&gt; + ... +&lt;/rich:panelMenu&gt; +...</programlisting> + <para> Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the + <link linkend="process"> "Decide what to process" </link> guide section. </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/panelMenuItem.html">Table of + &lt;rich:panelMenuItem&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + + <tbody> + <row> + <entry>component-type</entry> + + <entry>org.richfaces.PanelMenuItem</entry> + </row> + + <row> + <entry>component-class</entry> + + <entry>org.richfaces.component.html.HtmlPanelMenuItem</entry> + </row> + + <row> + <entry>component-family</entry> + + <entry>org.richfaces.PanelMenuItem</entry> + </row> + + <row> + <entry>renderer-type</entry> + + <entry>org.richfaces.PanelMenuItemRenderer</entry> + </row> + + <row> + <entry>tag-class</entry> + + <entry>org.richfaces.taglib.PanelMenuItemTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn_pMI"> + <title>Classes names that define the first level items</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-top-item</entry> + + <entry>Defines styles for a top panel + menu item</entry> + </row> + + <row> + <entry>rich-pmenu-top-item-icon</entry> + + <entry>Defines styles for a top panel + menu item icon</entry> + </row> + + <row> + <entry>rich-pmenu-top-item-label</entry> + + <entry>Defines styles for a top panel + menu item label</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define the second and lower level items</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-item</entry> + + <entry>Defines styles for a panel menu + item</entry> + </row> + + <row> + <entry>rich-pmenu-item-icon</entry> + + <entry>Defines styles for a panel menu + item icon</entry> + </row> + + <row> + <entry>rich-pmenu-item-label</entry> + + <entry>Defines styles for a panel menu + item label</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define items state</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-pmenu-item-selected</entry> + + <entry>Defines styles for a panel menu + selected item</entry> + </row> + + <row> + <entry>rich-pmenu-disabled-element</entry> + + <entry>Defines styles for a disabled + panel menu item</entry> + </row> + + <row> + <entry>rich-pmenu-hovered-element</entry> + + <entry>Defines styles for a hovered + panel menu item</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> Some additional information about usage of component can be found on this <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/panelMenu.j... page</ulink>. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_pickList.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_pickList.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_pickList.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,599 @@ +<section role="NotInToc" id="rich_pickList"> + <title> + &lt; + rich:pickList + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> component is used for moving selected item(s) from one list into another. + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/pickList_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Multiple selection of list items</para> + </listitem> + <listitem> + <para>Keyboard support</para> + </listitem> + <listitem> + <para>Supports standard JSF internationalization</para> + </listitem> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <!--listitem> + <para>Disablement support</para> + </listitem--> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> component consists of <itemizedlist> + <listitem> + <para>2 <property>item lists</property>. Every item has three different representations: common, selected, active. + Combination of these states is possible.</para> + </listitem> + <listitem> + <para> + <property>Move controls set</property> is a set of controls, which performs moving items between lists. + </para> + </listitem> + </itemizedlist> + </para> + + <para> + The <emphasis> + <property>"value"</property> + </emphasis> attribute is the initial value of this component. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;f:selectItem /&gt;</property> + </emphasis> or <emphasis role="bold"> + <property>&lt;f:selectItems /&gt;</property> + </emphasis> facets are used to define the values of a source list. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:pickList value="#{pickBean.listValues}"&gt; + &lt;f:selectItem itemValue="Bentley" itemLabel="Bentley"/&gt; + &lt;f:selectItem itemValue="Audi" itemLabel="Audi"/&gt; + &lt;f:selectItems value="#{pickBean.sourceList}"/&gt; +&lt;/rich:pickList&gt; +...</programlisting> + + <para> + The <emphasis> + <property> "switchByClick"</property> + </emphasis> attribute provides an option to copy and remove items between lists by one click. + Default value of this attribute is "false", so you need a double click to copy, remove items from one list to another. + </para> + <para> + Lables of the <property>move controls</property> can be defined with + <emphasis> + <property> "copyAllControlLabel"</property> + </emphasis>, + <emphasis> + <property> "copyControlLabel"</property> + </emphasis>, + <emphasis> + <property> "removeControlLabel"</property> + </emphasis>, + <emphasis> + <property> "removeAllControlLabel"</property> + </emphasis> attributes. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:pickList copyAllControlLabel = "#{pickBean.copyAllLabel}" copyControlLabel = "#{pickBean.copyLabel}" + removeControlLabel = "#{pickBean.removeLabel}" removeAllControlLabel ="#{pickBean.removeAllLabel}" value="#{pickBean.listValues}"&gt; + &lt;f:selectItem itemValue="Bentley" itemLabel="Bentley"/&gt; + &lt;f:selectItem itemValue="Audi" itemLabel="Audi"/&gt; + &lt;f:selectItems value="#{pickBean.sourceList}"/&gt; +&lt;/rich:pickList&gt; +...</programlisting> + <para> + If you don't want to display labels on the buttons you need to set + <emphasis> + <property> "showButtonsLabel"</property> + </emphasis> to "false". + </para> + <figure> + <title>Move control buttons without labels</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/pickList2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + Alternative to the given attributes are the following facets: <emphasis> + <property>"copyAllControl"</property> + </emphasis>, + <emphasis> + <property>"removeAllControl"</property> + </emphasis>, + <emphasis> + <property>"copyControl"</property> + </emphasis>, + <emphasis> + <property>"removeControl"</property> + </emphasis>, + <emphasis> + <property>"copyAllControlDisabled"</property> + </emphasis>, + <emphasis> + <property>"removeAllControlDisabled"</property> + </emphasis>, + <emphasis> + <property>"copyControlDisabled"</property> + </emphasis>, + <emphasis> + <property>"removeControlDisabled"</property> + </emphasis>, + <emphasis> + <property>"caption"</property> + </emphasis>. + </para> + <para> + It is an example of usage of the facets and it is identical to the previous example. + </para> + <programlisting role="XML">... +&lt;rich:pickList value="#{pickBean.listValues}"&gt; + &lt;f:facet name="copyAllControl"&gt; + &lt;h:commandButton value="#{pickBean.copyAllLabel}" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="copyControl"&gt; + &lt;h:commandButton value="#{pickBean.copyLabel}" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="removeControl"&gt; + &lt;h:commandButton value="#{pickBean.removeLabel}" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="removeAllControl"&gt; + &lt;h:commandButton value="#{pickBean.removeAllLabel}" /&gt; + &lt;/f:facet&gt; + &lt;f:selectItem itemValue="Bentley" itemLabel="Bentley"/&gt; + &lt;f:selectItem itemValue="Audi" itemLabel="Audi"/&gt; + &lt;f:selectItems value="#{pickBean.sourceList}"/&gt; +&lt;/rich:pickList&gt; +...</programlisting> + <para> + With the help of <emphasis> + <property>"moveControlsVerticalAlign"</property> + </emphasis> attribute + you can align <property>move controls</property> vertically. + </para> + <para>The possible value for <emphasis> + <property>"moveControlsVerticalAlign"</property> + </emphasis> are "top", "bottom" and "center" (default value).</para> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> + component provides resizing of lists by using such attributes as: + <itemizedlist> + <listitem> + <para> + <emphasis> + <property> "listsHeight"</property> + </emphasis> defines height of the lists. + + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "sourceListWidth"</property> + </emphasis> defines width of a source list. + + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property> "targetListWidth"</property> + </emphasis> defines width of a target list. + + </para> + </listitem> + </itemizedlist> + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:pickList listsHeight="#{pickBean.listsHeight}" sourceListWidth="#{pickBean.sourceListWidth}" targetListWidth="#{pickBean.targetListWidth}" value="#{pickBean.listValues}"&gt; + &lt;f:selectItem itemValue="Bentley" itemLabel="Bentley"/&gt; + &lt;f:selectItem itemValue="Audi" itemLabel="Audi"/&gt; + &lt;f:selectItems value="#{pickBean.sourceList}"/&gt; +&lt;/rich:pickList&gt; +...</programlisting> + + <para>The <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> component allows to use internationalization method + to redefine and localize the labels. You could use application resource bundle and define + <code>RICH_PICK_LIST_COPY_ALL_LABEL</code>, + <code>RICH_PICK_LIST_COPY_LABEL</code>, + <code>RICH_PICK_LIST_REMOVE_ALL_LABEL</code>, + <code>RICH_PICK_LIST_REMOVE_LABEL</code> there. + </para> + + <table> + <title>Keyboard usage for elements selection</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Keys and combinations </entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>CTRL+click</entry> + <entry>Inverts selection for an item</entry> + </row> + <row> + <entry>SHIFT+click</entry> + <entry>Selects all rows from active one to a clicked row if they differ, + else select the active row. All other selections are cleared</entry> + </row> + <row> + <entry>CTRL+A</entry> + <entry>Selects all elements inside the list if some active element is + already present in a list</entry> + </row> + <row> + <entry>Up, Down arrows</entry> + <entry>Changes the active and selected elements to the next or previous in a list</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/pickList.html">Table of + &lt;rich:pickList&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.PickList</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlPickList</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.PickList</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.PickListRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.PickListTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>copyAllControl</entry> + <entry>Redefines the "copyAll" label with the control set. Related attribute is "copyAllControlLabel"</entry> + </row> + <row> + <entry>removeAllControl</entry> + <entry>Redefines the "removeAll" label with the control set. Related attribute is "removeAllControlLabel"</entry> + </row> + <row> + <entry>copyControl</entry> + <entry>Redefines the "copy" label with the control set. Related attribute is "copyControlLabel"</entry> + </row> + <row> + <entry>removeControl</entry> + <entry>Redefines the "remove" label with the control set. Related attribute is "removeControlLabel"</entry> + </row> + <row> + <entry>copyAllControlDisabled</entry> + <entry>Redefines the disabled "copyAll" label with the control set.</entry> + </row> + <row> + <entry>removeAllControlDisabled</entry> + <entry>Redefines the disabled "removeAll" label with the control set.</entry> + </row> + <row> + <entry>copyControlDisabled</entry> + <entry>Redefines the disabled "copy" label with the control set.</entry> + </row> + <row> + <entry>removeControlDisabled</entry> + <entry>Redefines the disabled "remove" label with the control set.</entry> + </row> + <row> + <entry>caption</entry> + <entry>Defines the "caption" label with the control set.</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="pickListC"> + <title>Classes names that define a list representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-list-picklist</entry> + <entry>Defines styles for a wrapper &lt;table&gt; element of a pickList</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a source and target items representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-source-items</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a source list</entry> + </row> + <row> + <entry>rich-picklist-target-items</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a target list</entry> + </row> + + <row> + <entry>rich-picklist-body</entry> + <entry>Defines styles for a wrapper &lt;table&gt; element of a list body (source and target)</entry> + </row> + + <row> + <entry>rich-picklist-list</entry> + <entry>Defines styles for a (source and target) list</entry> + </row> + + <row> + <entry>rich-picklist-list-content</entry> + <entry>Defines styles for a (source and target) list content</entry> + </row> + + <row> + <entry>rich-picklist-internal-tab</entry> + <entry>Defines styles for a wrapper &lt;table&gt; element of list items (source and target)</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define rows representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-source-row</entry> + <entry>Defines styles for a source list row</entry> + </row> + <row> + <entry>rich-picklist-source-row-selected</entry> + <entry>Defines styles for a selected row in a source list</entry> + </row> + <row> + <entry>rich-picklist-target-row-selected</entry> + <entry>Defines styles for a selected row in a target list</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a source cell representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-source-cell</entry> + <entry>Defines styles for a cell in a source list</entry> + </row> + <row> + <entry>rich-picklist-source-cell-selected</entry> + <entry>Defines styles for a selected cell in a source list</entry> + </row> + <row> + <entry>rich-picklist-source-cell-active</entry> + <entry>Defines styles for an active cell in a source list</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a target cell representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-target-cell</entry> + <entry>Defines styles for a target list cell</entry> + </row> + <row> + <entry>rich-picklist-target-cell-selected</entry> + <entry>Defines styles for a selected cell in a target list</entry> + </row> + <row> + <entry>rich-picklist-target-cell-active</entry> + <entry>Defines styles for an active cell in a target list</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a control representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-picklist-controls</entry> + <entry>Defines styles for wrapper &lt;div&gt; element of a pickList controls</entry> + </row> + <row> + <entry>rich-picklist-control-disabled</entry> + <entry>Defines styles for a control in a disabled state</entry> + </row> + <row> + <entry>rich-picklist-control-copyall</entry> + <entry>Defines styles for a "copyAll" control</entry> + </row> + <row> + <entry>rich-picklist-control-copy</entry> + <entry>Defines styles for a "Copy" control</entry> + </row> + <row> + <entry>rich-picklist-control-remove</entry> + <entry>Defines styles for a "Remove" control</entry> + </row> + <row> + <entry>rich-picklist-control-removeall</entry> + <entry>Defines styles for a "removeAll" control</entry> + </row> + <row> + <entry>rich-picklist-control-img</entry> + <entry>Defines styles for a control image</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a button representation</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-list-picklist-button</entry> + <entry>Defines styles for a button</entry> + </row> + <row> + <entry>rich-list-picklist-button-disabled</entry> + <entry>Defines styles for a disabled button</entry> + </row> + <row> + <entry>rich-list-picklist-button-press</entry> + <entry>Defines styles for a pressed button</entry> + </row> + <row> + <entry>rich-list-picklist-button-light</entry> + <entry>Defines styles for a button highlight</entry> + </row> + <row> + <entry>rich-list-picklist-button-selection</entry> + <entry>Defines styles for a button selection</entry> + </row> + <row> + <entry>rich-list-picklist-button-content</entry> + <entry>Defines styles for a button content</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/pickList.js... RichFaces LiveDemo page </ulink> you can see an example of <emphasis role="bold"> + <property>&lt;rich:pickList&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_progressBar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_progressBar.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_progressBar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,565 @@ +<section role="NotInToc" id="rich_progressBar"> + <title> + &lt; + rich:progressBar + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.2.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis> component is designed for displaying a progress bar which shows the current status of the process. </para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/progressBar_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + + + <listitem> + <para>Ajax or Client modes</para> + </listitem> + <listitem> + <para>Option to control rerendering frequency</para> + </listitem> + <listitem> + <para>Customizable status information label </para> + </listitem> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + As it was mentioned above, the <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis> + component displays the status of the ongoing process. + </para> + + <para>The <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis> component can run in two modes: <code>Ajax</code> (default) and <code>Client</code>. + </para> + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> - In this mode the component works the same way as <emphasis role="bold"> + <property>&lt;a4j:poll/&gt;</property> + </emphasis> which gets the current progress value from the sever, repeating after a set time interval. </para> + + </listitem> + <listitem> + <para> + <code>Client</code> - The current progress value in <property>Client</property> mode is set using JavaScript API </para> + </listitem> + </itemizedlist> + <para> + In order to define the mode you need to use <emphasis> + <property>"mode"</property> + </emphasis> attribute. + </para> + + <para> + One of the key attributes of the component is <emphasis> + <property>"interval"</property> + </emphasis> which defines the frequency of status polling and rerenders the component when the value is updated. + </para> + <para> + Polling is active while the <emphasis> + <property>"enabled"</property> + </emphasis> attribute is "true".</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue}" id="progrs" interval="900" enabled="true"/&gt; +... </programlisting> + <para> + With the help of <emphasis> + <property>"timeout"</property> + </emphasis> attribute you can define the waiting time on a particular request. + If a response is not received during this time the request is aborted. + </para> + + + <para> + Status of the process is calculated basing on values of the following attributes: + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"value"</property> + </emphasis> is a value binding to the current progress value + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"minValue"</property> + </emphasis> (default value is "0") sets minimal progress value + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"maxValue"</property> + </emphasis> (default value is "100") sets maximum progress value + </para> + </listitem> + </itemizedlist> + </para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue}" minValue="50" maxValue="400"/&gt; +... </programlisting> + <para>This is the result</para> + <figure> + <title>Progress bar</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/progressBar2.png"/> + </imageobject> + </mediaobject> + </figure> + <!--para> + The <emphasis><property> &quot;label&quot;</property></emphasis> attribute is responsible for displaying informational + data, information on the progress bar, if it&apos;s not displayed using children components. + If this attribute is not set and the children components are not used either, no textual information + regarding ongoing process will be indicated. + In order to indicate the current status you need to pass the value to this attribute. Please see an example. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML"><![CDATA[... +<rich:progressBar value="#{bean.incValue}" id="progrs" label="{value}%"/> +...]]></programlisting> + + <para> + Displaying information on a progress bar can be also performed using + + <emphasis role="bold"><property>&lt;h:outputText&gt;</property></emphasis> within + <emphasis role="bold"><property>&lt;rich:progressBar&gt;</property> </emphasis> tags passing the progress value to the value of the JSF tag. +</para> +<para> +<emphasis role="bold">Example:</emphasis> +</para> + +<programlisting role="XML"><![CDATA[... +<rich:progressBar value="#{bean.incValue1}"> +<h:outputText value="#{bean.incValue1}"/> +</rich:progressBar> +...]]> </programlisting--> <para> + There are two ways to display information on a progress bar: + </para> + <itemizedlist> + <listitem> + <para>Using <emphasis> + <property> "label"</property> + </emphasis> attribute</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue}" id="progrs" label="#{bean.incValue}"/&gt; +...</programlisting> + </listitem> + + <listitem> + <para>Using any child(nested) components. One of the components that can be used is <emphasis role="bold"> + <property>&lt;h:outputText /&gt;</property> + </emphasis> + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue}"&gt; + &lt;h:outputText value="#{bean.incValue} %"/&gt; +&lt;/rich:progressBar&gt; +... </programlisting> + </listitem> + + </itemizedlist> + + <!--Macrosubs--> + + <para> + The <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis> + component provides 3 predefined macrosubstitution parameters: + + <itemizedlist> + <listitem> + <para> + <code>{value}</code> contains the current value</para> + </listitem> + <listitem> + <para> + <code>{minValue}</code> contains min value</para> + </listitem> + <listitem> + <para> + <code>{maxValue}</code> contains max value</para> + </listitem> + </itemizedlist> + + You can use them as follows: + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue1}" minValue="400" maxValue="900"&gt; + &lt;h:outputText value="Min value is {minValue}, current value is {value}, max value is {maxValue}"/&gt; +&lt;/rich:progressBar&gt; +... </programlisting> + <para>This is the result:</para> + <figure> + <title>Macrosubstitution</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/progressBar3.png"/> + </imageobject> + </mediaobject> + </figure> + <!--END of Macrosubs--> + + <!-- Parameters--> + <!--para> + The <emphasis><property>&quot;parameters&quot;</property></emphasis> + is also a special attribute that can be used for substitutional purposes. + All you need is to define a value of your own parameter + (e.g parameters=&quot;param:&apos;#{bean.incValue1}&apos;&quot;) + and you can use it to pass the data. + </para--> <para> + The <emphasis> + <property>"parameters"</property> + </emphasis> + is also a special attribute which defines parameters that can be to get additional data from server (e.g. additional info about process status). + All you need is to define the value of your own parameter + (e.g <code>parameters="param:'#{bean.incValue1}'"</code>) + and you can use it to pass the data. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue}" parameters="param:'#{bean.dwnlSpeed}'"&gt; + &lt;h:outputText value="download speed {param} KB/s"/&gt; +&lt;/rich:progressBar&gt; +... </programlisting> + <para>This is the result:</para> + <figure> + <title>Usage of parameters</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/progressBar4.png"/> + </imageobject> + </mediaobject> + </figure> + + + + <!-- END Parameters--> + + <para> + The <emphasis> + <property>"progressVar"</property> + </emphasis> attribute (deprecated) defines request scoped variable that could be used + for substitution purpose. This variable contains the data taken from <emphasis> + <property>"value"</property> + </emphasis> attribute. + Please, study carefully the following example. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue1}" enabled="#{bean.enabled1}" id="progrs1" progressVar="progress"&gt; + &lt;h:outputText value="{progress}%"/&gt; +&lt;/rich:progressBar&gt; +... </programlisting> + <para>In the shown example <emphasis> + <property> "progressVar"</property> + </emphasis> attribute + defines a variable "progress" with the value taken from <emphasis> + <property>"value"</property> + </emphasis> + attribute of the <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis> component. + The "progress" variable performs substitution passing the current progress value to the + <emphasis> + <property>"value"</property> + </emphasis> attribute of the + <emphasis role="bold"> + <property>&lt;h:outputText&gt;</property> + </emphasis>. + This is how the current value of a progress appears on + the label of <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis>.</para> + + <para>As the + <emphasis> + <property> "progressVar"</property> + </emphasis> attribute is deprecated, it's better to use + the predefined macrosubstitution parameter <code>{value}</code> instead. See how you can rewrite the above example with the help of <code>{value}</code>. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue1}" enabled="#{bean.enabled1}" id="progrs1"&gt; + &lt;h:outputText value="{value}%"/&gt; +&lt;/rich:progressBar&gt; +... </programlisting> + + <para> + The component can also employ <emphasis> + <property> "initial"</property> + </emphasis> and <emphasis> + <property> "complete"</property> + </emphasis> facets to display the states of the process: + <emphasis> + <property>"initial"</property> + </emphasis> facet is displayed when the progress value is less or equal to <emphasis> + <property> "minValue"</property> + </emphasis>, and the <emphasis> + <property>"complete"</property> + </emphasis> facet is shown when the value is greater or equal to <emphasis> + <property> "maxValue"</property> + </emphasis>. Please see an example below. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:progressBar value="#{bean.incValue1}"&gt; + &lt;f:facet name="initial"&gt; + &lt;h:outputText value="Process not started"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="complete"&gt; + &lt;h:outputText value="Process completed"/&gt; + &lt;/f:facet&gt; +&lt;/rich:progressBar&gt; + ... </programlisting> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find <link linkend="process">" Decide what to process " </link> guide section. + </para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/progressBar.html">Table of + &lt;rich:progressBar&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ProgressBar</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlProgressBar</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ProgressBar</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.ProgressBarRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ProgressBarTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Function</entry> + <entry>Description</entry> + + </row> + </thead> + <tbody> + <!--Sorting API --> + <row> + <entry>enable()</entry> + <entry>Begins polling for Ajax mode </entry> + + </row> + <row> + <entry>disable()</entry> + <entry>Stops polling for Ajax mode</entry> + + </row> + + <row> + <entry>setValue(value)</entry> + <entry>Updates the progress of the process</entry> + + </row> + <row> + <entry>setLabel(label)</entry> + <entry>Update the label for the process</entry> + + </row> + + + + + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>initial</entry> + <entry>Defines the information content about the state of the process if the progress value is less or equal to "minValue"</entry> + </row> + <row> + <entry>complete</entry> + <entry>Defines the information content about the state of the process if the value is greater or equal to "maxValue"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="pBclasses"> + <title>Classes names for the progressBar without a label</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-progress-bar-shell</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a progressBar</entry> + </row> + <row> + <entry>rich-progress-bar-uploaded</entry> + <entry>Defines styles for the completed progress area</entry> + </row> + <row> + <entry>rich-progress-bar-height</entry> + <entry>Defines height for a progressBar</entry> + </row> + <row> + <entry>rich-progress-bar-width</entry> + <entry>Defines width for a progressBar</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names for the progressBar with a label</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-progress-bar-shell-dig</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a progressBar</entry> + </row> + <row> + <entry>rich-progress-bar-uploaded-dig</entry> + <entry>Defines styles for the label</entry> + </row> + <row> + <entry>rich-progress-bar-remained</entry> + <entry>Defines styles for the remained progress area</entry> + </row> + <row> + <entry>rich-progress-bar-completed</entry> + <entry>Defines styles for the completed progress area</entry> + </row> + <row> + <entry>rich-progress-bar-height-dig</entry> + <entry>Defines height for a progressBar</entry> + </row> + <row> + <entry>rich-progress-bar-width</entry> + <entry>Defines width for a progressBar</entry> + </row> + </tbody> + </tgroup> + </table> + <note> + <title>Note:</title> + <para>It's necessary to define width of the component in pixels only.</para> + </note> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/progressBar... the component Live Demo page</ulink> + you can see the example of <emphasis role="bold"> + <property>&lt;rich:progressBar&gt;</property> + </emphasis> usage and sources for the given example. </para> + + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_recursiveTreeNodesAdaptor.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_recursiveTreeNodesAdaptor.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_recursiveTreeNodesAdaptor.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,163 @@ +<section role="NotInToc" id="rich_recursiveTreeNodesAdaptor"> + <title> + &lt; + rich:recursiveTreeNodesAdaptor + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> + </emphasis> is + an extension of a <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor&gt;</property> + </emphasis> component + that provides the possibility to define data models and process nodes recursively. </para> + <figure> + <title>Expanded tree with <emphasis role="bold"> + <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/recursiveTreeNodesAdaptor_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Allows to define combined data models</para> + </listitem> + <listitem> + <para>Possibility to define nodes for processing via attributes</para> + </listitem> + <listitem> + <para>Allows to process nodes recursively</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> + </emphasis> component has a + <emphasis> + <property>"roots"</property> + </emphasis> attribute that defines collection to use at the top of recursion. + </para> + <para> + The <emphasis> + <property>"nodes"</property> + </emphasis> attribute defines collection to use on another recursion levels. + </para> + <para> + The <emphasis> + <property>"var"</property> + </emphasis> attribute is used to access to the current collection element. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> + </emphasis> component can be nested without any limitations. + See the following example. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:tree adviseNodeOpened="#{treeModelBean.adviseNodeOpened}" switchType="client"&gt; + &lt;rich:treeNodesAdaptor id="project" nodes="#{loaderBean.projects}" var="project"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{project.click}" value="Project: #{project.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:recursiveTreeNodesAdaptor id="dir" var="dir" root="#{project.dirs}" nodes="#{dir.directories}"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{dir.click}" value="Directory: #{dir.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNodesAdaptor id="file" var="file" nodes="#{dir.files}"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{file.click}" value="File: #{file.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;/rich:treeNodesAdaptor&gt; + &lt;rich:treeNodesAdaptor id="file1" var="file" nodes="#{dir.files}"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{file.click}" value="File1: #{file.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;/rich:treeNodesAdaptor&gt; + &lt;rich:recursiveTreeNodesAdaptor id="archiveEntry" var="archiveEntry" + roots="#{dir.files}" nodes="#{archiveEntry.archiveEntries}" + includedRoot="#{archiveEntry.class.simpleName == 'ArchiveFile'}" + includedNode="#{archiveEntry.class.simpleName == 'ArchiveEntry'}"&gt; + &lt;rich:treeNode id="archiveEntryNode"&gt; + &lt;h:commandLink action="#{archiveEntry.click}" value="Archive entry: #{archiveEntry.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;/rich:recursiveTreeNodesAdaptor&gt; + &lt;/rich:recursiveTreeNodesAdaptor&gt; + &lt;/rich:treeNodesAdaptor&gt; +&lt;/rich:tree&gt; +... +</programlisting> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/recursiveTreeNodesAdaptor.html">Table of + &lt;rich:recursiveTreeNodesAdaptor&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.RecursiveTreeNodesAdaptor</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlRecursiveTreeNodesAdaptor</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.RecursiveTreeNodesAdaptor</entry> + </row> + <!-- + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.EffectRenderer</entry> + </row> + --> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.RecursiveTreeNodesAdaptorTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/treeNodesAd... the component Live Demo page</ulink> + you can see the example of <emphasis role="bold"> + <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> + </emphasis> usage. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_scrollableDataTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_scrollableDataTable.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_scrollableDataTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,496 @@ +<section role="NotInToc" id="rich_scrollableDataTable"> + <title> + &lt; + rich:scrollableDataTable + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component is used for the table-like component creation. + The component just adds the set of additional features described below in comparison with the standard table. + </para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/scrollableDataTable_init.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Variable content of the table cells</para> + </listitem> + <listitem> + <para>Dynamically fetching the rows from the server when the table is scrolled up and down</para> + </listitem> + <listitem> + <para>Resizing columns by mouse dragging the column bar</para> + </listitem> + <listitem> + <para>Sorting column by clicking the header</para> + </listitem> + <listitem> + <para>Fixed one or more left columns when table is scrolled horizontally</para> + </listitem> + <listitem> + <para>One and multi-selection rows mode</para> + </listitem> + <listitem> + <para>Built-it drag-n-drop support</para> + </listitem> + <listitem> + <para> + <link linkend="sort">Sorting column values</link> + </para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> The component represents on a page as a scrollable table with some fixed + (non-scrollable) rows ( with header and footer) and columns. Like + other tables <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> also has optional footer and header that could be + implemented using the corresponding facets. Columns of the table are + optionally resizable. Resizing is available using "drag and drop" of + the column vertical borders. <!--There is possibility to expand or + collapse the columns through JS API on the client side. -->You can define + the number of the fixed columns from the left side using attribute <emphasis> + <property>"frozenColCount"</property> + </emphasis> that is not scrolled via horizontal scroll. </para> + <para> There is possibility to increase component performance using attribute <emphasis> + <property>"hideWhenScrolling"</property> + </emphasis>. If attribute value is "true" data is + hidden during scrolling. </para> + + <para> It's possible to select the whole row with onclick on the row or + some set of rows. Selection is optional and availability of such + feature is defined on the component. There are two ways to select a + few rows: </para> + <itemizedlist> + <listitem> + <para>Just clicking the columns one by one.</para> + </listitem> + <listitem> + <para>Clicking some row with the SHIFT button + hold. In this case all the rows starting + from last selected up to clicked should + be selected.</para> + </listitem> + </itemizedlist> + + + <!--para> The columns provides the possibility of expanding/collapsing on the + client side through the next JS API:</para> <itemizedlist> + <listitem> + <para><code>collapse(columnId)</code> - Performs + the collapse action for the column with + the corresponding id</para> + </listitem> + </itemizedlist--> + <para> It's possible to sort the table content after + clicks on the header. The feature is optional (to disable it, use attribute sortable on rich:column ). Every column should be + pointed to the comparator method that is used for sorting the table. + In case the <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> is already sorted by some column and the header of this + column has been clicked again - the sorting is reversed. </para> + <para>After sorting selection that was made before is reset</para> + + <para> + <emphasis role="bold">The typical variant of using:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:scrollableDataTable value="#{modelBuilder.model}" var="issues" + frozenColCount="1" + first="0" + rows="40" + width="300px" + height="396px"&gt; + &lt;rich:column width="100px"&gt; + &lt;f:facet name="header" &gt; + &lt;h:outputText value="State"/&gt; + &lt;/f:facet&gt; + &lt;h:outputText value="#{issues.cell1}"/&gt; + &lt;f:facet name="footer"&gt; + &lt;h:outputText value="State"/&gt; + &lt;/f:facet&gt; + &lt;/rich:column&gt; + &lt;!--Set of columns and header/footer facets--&gt; +&lt;/rich:scrollableDataTable&gt; +... +</programlisting> + + <para>The <emphasis> + <property>"selection"</property> + </emphasis> attribute allows to get the row data when using + <property>one and multi-selection rows mode</property>.</para> + <para>This attribute is a reference to object to the instance of + + <ulink url="&apidoc_framework;org/richfaces/model/selection/Selection.html"> + <code>org.richfaces.model.selection.Selection</code> + </ulink>. + interface + + + interface, containing current collection of objects selected by you.</para> + <para>In the following example when you submit the form, current collection of + the selected objects is placed in the object's property. Then + on complete action the <emphasis role="bold"> + <property>&lt;rich:modalPanel&gt;</property> + </emphasis> with selected data is shown.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:spacer height="30" /&gt; + &lt;rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="200px" + width="300px" id="carList" rows="40" columnClasses="col" + value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single" + selection="#{dataTableScrollerBean.selection}"&gt; + &lt;rich:column id="make"&gt; + &lt;f:facet name="header"&gt;&lt;h:outputText styleClass="headerText" value="Make" /&gt;&lt;/f:facet&gt; + &lt;h:outputText value="#{category.make}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="model"&gt; + &lt;f:facet name="header"&gt;&lt;h:outputText styleClass="headerText" value="Model" /&gt;&lt;/f:facet&gt; + &lt;h:outputText value="#{category.model}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="price"&gt; + &lt;f:facet name="header"&gt;&lt;h:outputText styleClass="headerText" value="Price" /&gt;&lt;/f:facet&gt; + &lt;h:outputText value="#{category.price}" /&gt; + &lt;/rich:column&gt; + &lt;/rich:scrollableDataTable&gt; + &lt;rich:spacer height="20px"/&gt; + &lt;a4j:commandButton value="Show Current Selection" reRender="table" + action="#{dataTableScrollerBean.takeSelection}" + oncomplete="javascript:Richfaces.showModalPanel('panel');"/&gt; +&lt;/h:form&gt; +&lt;rich:modalPanel id="panel" autosized="true"&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Selected Rows"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="controls"&gt; + &lt;span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')"&gt;X&lt;/span&gt; + &lt;/f:facet&gt; + &lt;rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table"&gt; + &lt;rich:column&gt; + &lt;f:facet name="header"&gt;&lt;h:outputText value="Make" /&gt;&lt;/f:facet&gt; + &lt;h:outputText value="#{sel.make}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="model"&gt; + &lt;f:facet name="header"&gt;&lt;h:outputText value="Model" /&gt;&lt;/f:facet&gt; + &lt;h:outputText value="#{sel.model}" /&gt; + &lt;/rich:column&gt; + &lt;rich:column id="price"&gt; + &lt;f:facet name="header"&gt;&lt;h:outputText value="Price" /&gt;&lt;/f:facet&gt; + &lt;h:outputText value="#{sel.price}" /&gt; + &lt;/rich:column&gt; + &lt;/rich:dataTable&gt; +&lt;/rich:modalPanel&gt; +...</programlisting> + <para>This is a result:</para> + <figure> + <title>The <emphasis> + <property>"selection"</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/scrollableDataTable2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + <ulink url="http://wiki.jboss.org/wiki/RichFacesCookbook/ScrollableDataTabl... RichFaces LiveDemo page </ulink> you can find fuller example of use of this + attribute with example bean.</para> + <para> The <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component has the following extra attributes for event + processing on the client:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onselectionchange"</property> + </emphasis> + </para> + </listitem> + <!-- <listitem> + <para> + <emphasis> + <property>&quot;oncomplete&quot;</property> + </emphasis> + </para> + </listitem> --> + <listitem> + <para> + <emphasis> + <property>"onRowClick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onRowDblClick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onRowMouseUp"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onRowMouseDown"</property> + </emphasis> + </para> + </listitem> + </itemizedlist> + + <para>From version 3.3.1 it becomes possible to switch selection mode with selectionMode attribute</para> + + <para>Information about sorting and filtering you can find in RichFaces Developer guide section about<link linkend="sort">sorting</link>.</para> + <para> Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the + <link linkend="process"> "Decide what to process" </link> guide section. </para> + <note> + <title>Note:</title> + <para> + If you want to use specific features such as pagination on database level you should pass to the + <emphasis> + <property>"value"</property> + </emphasis> of the + <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> component + an object which class extends <code>org.richfaces.model.ScrollableTableDataModel</code>. + </para> + </note> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/scrollableDataTable.html">Table of + &lt;rich:scrollableDataTable&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.component.ScrollableDataTable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlScrollableDataTable</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.ScrollableDataTable</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.ScrollableDataTableRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ScrollableDataTableTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Defines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Defines the footer content</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="scrdattableC"> + <title>Classes names that define a component appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-sdt</entry> + + <entry>Defines styles for a component + appearance</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define footer and header elements</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>rich-sdt-header-cell</entry> + + <entry>Defines styles for header + cells</entry> + </row> + + <row> + <entry>rich-sdt-header-row</entry> + + <entry>Defines styles for a header + raw</entry> + </row> + + <row> + <entry>rich-sdt-column-cell</entry> + + <entry>Defines styles for column + cells</entry> + </row> + <row> + <entry>rich-sdt-footer-cell</entry> + + <entry>Defines styles for footer + cells</entry> + </row> + + <row> + <entry>rich-sdt-footer-row</entry> + + <entry>Defines styles for a footer + raw</entry> + </row> + <row> + <entry>rich-sdt-hsep</entry> + + <entry>Defines styles for header + separators</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define different states</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>rich-sdt-row-active</entry> + + <entry>Defines styles for an active + row</entry> + </row> + + <row> + <entry>rich-sdt-row-selected</entry> + + <entry>Defines styles for a selected + row</entry> + </row> + + <row> + <entry>rich-sdt-column-sort-up</entry> + + <entry>Defines styles for ascending + sorted column</entry> + </row> + + <row> + <entry>rich-sdt-column-sort-down</entry> + + <entry>Defines styles for descending + sorted column</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableD... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:scrollableDataTable&gt;</property> + </emphasis> usage. </para> + <para>Cookbook article <ulink url="http://www.jboss.org/community/docs/DOC-11857"> + Scrollable dataTable Selection Usage + </ulink> provides a simple example of how you can use the "selection" attribute in order to get row selection in rich:scrollableDataTable. </para> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_separator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_separator.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_separator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,175 @@ +<section role="NotInToc" id="rich_separator"> + <title> + &lt; + rich:separator + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A horizontal line to use as a <property>separator</property> in a layout. The line type + can be customized with the <code>"lineType"</code> parameter.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/separator_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel </para> + </listitem> + <listitem> + <para>Leveraging layout elements creation</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> is a simple layout component, + which represents a <property>separator</property> stylized as a skin. + Thus, the main attributes that define its style are <emphasis> + <property>"style"</property> + </emphasis> and <emphasis> + <property>"styleClass".</property> + </emphasis> In addition there are <emphasis> + <property>"width"</property> + </emphasis> and <emphasis> + <property>"height"</property> + </emphasis> attributes that should be specified in pixels. + On the HTML page the component is transposed into HTML <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis> tag.</para> + + <para>The line type can be customized with the <code>"lineType"</code> parameter. For example, different line types are shown after rendering with the + following initial settings <code>lineType="double"</code>and <code>lineType="solid"</code>. + </para> + <figure> + <title>Different line types of <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/separator2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>Except style attributes, there are also event definition attributes:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/separator.html">Table of + &lt;rich:separator&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.separator</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSeparator</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.separator</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SeparatorRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SeparatorTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="sepC"> + <title>Classes names that define a component appearance</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-separator</entry> + + <entry>Defines styles for a component appearance</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/separator.j... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:separator&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_simpleTogglePanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_simpleTogglePanel.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_simpleTogglePanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,299 @@ +<section role="NotInToc" id="rich_simpleTogglePanel"> + <title> + &lt; + rich:simpleTogglePanel + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A collapsible panel, which content shows/hides after activating a header control.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:simpleTogglePanel&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/simpleTogglePanel_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel </para> + </listitem> + <listitem> + <para>Support for any content inside</para> + </listitem> + <listitem> + <para>Collapsing expanding content</para> + </listitem> + <listitem> + <para>Three modes of collapsing/expanding</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> + </para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + </listitem> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The component is a simplified version of <property>toggle panel</property> that initially + has a defined layout as a panel with a header playing a role of a mode switching control. On a + component header element, it's possible to define a label using an attribute with the + same name.</para> + + <para>Switching mode could be defined with the <emphasis> + <property>"switchType"</property> + </emphasis> attribute with three possible parameters.</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> (DEFAULT)</para> + <para>The common submission is performed around + <property>simpleTogglePanel</property> and a page is completely rendered on a called + panel. Only one at a time panel is uploaded onto the client side.</para> + </listitem> + <listitem> + <para> + <code> Ajax</code> + </para> + <para>AJAX form submission is performed around the panel, content of the called + panel is uploaded on Ajax request and additionally specified elements in the <emphasis> + <property>"reRender"</property> + </emphasis> attribute are rendered. Only one at a time panel is uploaded on the client + side.</para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + <para> All panels are uploaded on the client side. Switching from the active + to the hidden panel is performed with client JavaScript.</para> + </listitem> + </itemizedlist> + <para>The <emphasis role="bold"> + <property>&lt;rich:simpleTogglePanel&gt;</property> + </emphasis>component also has an <emphasis> + <property>"opened"</property> + </emphasis> attribute responsible for keeping a panel state. It gives an + opportunity to manage state of the component from a model. + If the value of this attribute is"true" the component is expanded. + </para> + + <!--SIMPLE EXAMPLE NEEDED --> + + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover "</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onclick "</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout "</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:simpleTogglePanel&gt;</property> + </emphasis> states</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/simpleTogglePanel2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> + <para> + With help of + <emphasis> + <property> + "openMarker" + </property> + </emphasis> + and + <emphasis> + <property> + "closeMarker" + </property> + </emphasis> facets you can set toggle icon for + <property> + simpleTogglePanel + </property>. + </para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find <link linkend="process">" Decide what to process " </link> guide section. + </para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/simpleTogglePanel.html">Table of + &lt;rich:simpleTogglePanel&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.SimpleTogglePanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSimpleTogglePanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SimpleTogglePanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SimpleTogglePanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SimpleTogglePanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>openMarker</entry> + <entry>Redefines the icon for expanding the panel</entry> + </row> + <row> + <entry>closeMarker</entry> + <entry>Redefines the icon for collapsing the panel</entry> + </row> + + </tbody> + </tgroup> + </table> + <table id="simpTogPanC"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-stglpanel</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> + </row> + <row> + <entry>rich-stglpanel-header</entry> + <entry>Defines styles for header element of a component</entry> + </row> + <row> + <entry>rich-stglpnl-marker</entry> + <entry>Defines styles for a wrapper &lt;div&gt; element of a marker</entry> + </row> + + <row> + <entry>rich-stglpanel-body</entry> + <entry>Defines styles for a component content</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Style component classes</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Class description</entry> + </row> + </thead> + <tbody> + <row> + <entry>styleClass</entry> + <entry>The class defines panel common style. It's used in the outside <emphasis role="bold"> + <property>&lt;div&gt;</property> + </emphasis>element</entry> + </row> + <row> + <entry>bodyClass</entry> + <entry>applicable to panels body elements</entry> + </row> + <row> + <entry>headerClass</entry> + <entry>applicable to header elements</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/simpleToggl... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:simpleTogglePanel&gt;</property> + </emphasis> usage and sources for the given example. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_spacer.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_spacer.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_spacer.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,134 @@ +<section role="NotInToc" id="rich_spacer"> + <title> + &lt; + rich:spacer + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> A <property>spacer</property> that is used in layout and rendered as a transparent image.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:spacer&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/spacer_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Easily used as a transparent layout <property>spacer</property> + </para> + </listitem> + <listitem> + <para>Horizontal or vertical spacing is managed by an attribute</para> + </listitem> + <listitem> + <para>Easily customizable sizes parameters</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + <emphasis role="bold"> + <property>&lt;rich:spacer&gt;</property> + </emphasis> is a simple layout component which represents a transparent + <property>spacer</property>. Thus, the main attributes that define its style are <emphasis> + <property>"style"</property> + </emphasis> and <emphasis> + <property>"styleClass"</property>.</emphasis> + </para> + <para>In addition, the attributes are responsible for the component size: <emphasis> + <property>"width"</property> + </emphasis> and <emphasis> + <property>"height"</property>.</emphasis> + </para> + <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover "</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onclick "</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout "</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/spacer.html">Table of + &lt;rich:spacer&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.spacer</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSpacer</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.spacer</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SpacerRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SpacerTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/spacer.jsf?... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:spacer&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_subTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_subTable.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_subTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,276 @@ +<section role="NotInToc" id="rich_subTable"> + <title> + &lt; + rich:subTable + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component is used for inserting <property>subtables</property> into tables with opportunity to choose data from a model + and built-in Ajax updates support.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> element</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/subTable_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Completely skinned table rows and child elements</para> + </listitem> + <listitem> + <para>Possibility to insert complex columnGroup subcomponents</para> + </listitem> + <listitem> + <para>Possibility to combine rows and columns inside</para> + </listitem> + <listitem> + <para>Possibility to update a limited set of rows with Ajax</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para>The <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> component is similar to the <emphasis role="bold"> + <property>&lt;h:dataTable&gt;</property> + </emphasis> one, except Ajax support and skinnability. One more difference is that the + component doesn't add the wrapping <emphasis role="bold"> + <property>&lt;table&gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;tbody&gt;</property> + </emphasis> tags. Ajax support is possible, because the component was created basing on the + <emphasis role="bold"> + <property>&lt;a4j:repeat&gt;</property> + </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> + <property>"ajaxKeys"</property> + </emphasis> attribute allows to define row keys that is updated after an Ajax request.</para> + + <para>Here is an example:</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:dataTable value="#{capitalsBean.capitals}" var="capitals"&gt; + &lt;rich:column&gt; + ... + &lt;/rich:column&gt; + &lt;rich:subTable value="#{capitals.details}" var="detail" ajaxKeys="#{bean.ajaxSet}" binding="#{bean.subtable}" id="subtable"&gt; + &lt;rich:column&gt; + ... + &lt;/rich:column&gt; + &lt;/rich:subTable&gt; +&lt;/rich:dataTable&gt; +... +&lt;a4j:commandButton action="#{tableBean.action}" reRender="subtable"/&gt; +... +</programlisting> + <para> In the example <emphasis> + <property>"reRender"</property> + </emphasis> attribute contains value of <emphasis> + <property>"id"</property> + </emphasis> attribute for <emphasis role="bold"> + <property>&lt;rich:subTable&gt;</property> + </emphasis> component. As a result the component is updated after an Ajax request.</para> + + <para>The component allows to use <emphasis> + <property>"header"</property> + </emphasis> and <emphasis> + <property>"footer"</property> + </emphasis> facets for output. See an example for <emphasis role="bold"> + <property>&lt;rich:dataTable&gt;</property> + </emphasis> + <link linkend="table_ex">component</link>.</para> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/subTable.html">Table of + &lt;rich:subTable&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.SubTable</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSubTable</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SubTable</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SubTableRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SubTableTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>header</entry> + <entry>Defines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Defines the footer content</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_sT"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-subtable</entry> + <entry>Defines styles for all subtable</entry> + </row> + <row> + <entry>rich-subtable-caption</entry> + <entry>Defines styles for a "caption" facet element</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define header and footer elements</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-subtable-header</entry> + <entry>Defines styles for a subtable header row</entry> + </row> + + <row> + <entry>rich-subtable-header-continue</entry> + <entry>Defines styles for all subtable header lines after the first</entry> + </row> + <row> + <entry>rich-subtable-subheader</entry> + <entry>Defines styles for a column header of subtable</entry> + </row> + + <row> + <entry>rich-subtable-subfooter</entry> + <entry>Defines styles for a column footer of subtable</entry> + </row> + + <row> + <entry>rich-subtable-footer</entry> + <entry>Defines styles for a subtable footer row</entry> + </row> + + <row> + <entry>rich-subtable-footer-continue</entry> + <entry>Defines styles for all subtable footer lines after the first</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define rows and cells</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-subtable-headercell</entry> + <entry>Defines styles for a subtable header cell</entry> + </row> + + <row> + <entry>rich-subtable-subheadercell</entry> + <entry>Defines styles for a column header cell of subtable</entry> + </row> + <row> + <entry>rich-subtable-cell</entry> + <entry>Defines styles for a subtable cell</entry> + </row> + <row> + <entry>rich-subtable-row</entry> + <entry>Defines styles for a subtable row</entry> + </row> + <row> + <entry>rich-subtable-firstrow</entry> + <entry>Defines styles for a subtable start row</entry> + </row> + + <row> + <entry>rich-subtable-subfootercell</entry> + <entry>Defines styles for a column footer cell of subtable</entry> + </row> + + <row> + <entry>rich-subtable-footercell</entry> + <entry>Defines styles for a subtable footer cell</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_suggestionbox.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_suggestionbox.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_suggestionbox.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,724 @@ +<section role="NotInToc" id="rich_suggestionbox"> + <title> + &lt; + rich:suggestionbox + &gt; + <emphasis role="since"> + <superscript> + available since + <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The component adds on-keypress suggestions capabilities to any input + text component + like + <emphasis role="bold"> + <property>&lt;h:inputText&gt;</property> + </emphasis> + . + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + component + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox_init.png" /> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para> + Adds + <emphasis> + <property>"onkeypress"</property> + </emphasis> + suggestions capabilities to any input text component + </para> + </listitem> + <listitem> + <para>Possible to render table as a popup suggestion</para> + </listitem> + <listitem> + <para>Can be pointed to any Ajax request status indicator of the + page</para> + </listitem> + <listitem> + <para>Easily customizable look-and-feel</para> + </listitem> + <listitem> + <para>Fully skinnable component</para> + </listitem> + <listitem> + <para>Managing area of components submitted on Ajax request</para> + </listitem> + <listitem> + <para>Flexible list of components to update after Ajax request + managed by attributes</para> + </listitem> + <listitem> + <para>Setting restriction to Ajax request generation</para> + </listitem> + <listitem> + <para>Keyboard navigation support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <section> + <title>Main attributes</title> + <para>There are 3 main component attributes:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"for"</property> + </emphasis> + contains an ID of an input component + for which the suggestion + support is provided + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"suggestionAction"</property> + </emphasis> + defines the method to get a collection of suggestion data on + request + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"var"</property> + </emphasis> + defines a collection name that provides an access for the current + row while iterating through + </para> + </listitem> + </itemizedlist> + <para>To create the simplest variant on a page use the following + syntax:</para> + <programlisting role="XML">... + &lt;h:inputText id="city" value="#{capitalsBean.capital}" /&gt; + &lt;rich:suggestionbox for="city" var="result" + suggestionAction="#{capitalsBean.autocomplete}"&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{result.name}" /&gt; + &lt;/h:column&gt; + &lt;/rich:suggestionbox&gt; + ... +</programlisting> + <para> + There is a managed bean: + </para> + <programlisting role="JAVA">... + public class SBbean { + + private ArrayList&lt;Capital&gt; capitals = new ArrayList&lt;Capital&gt;(); + private ArrayList&lt;String&gt; capitalsNames = new + ArrayList&lt;String&gt;(); + private List&lt;SelectItem&gt; capitalsOptions = new + ArrayList&lt;SelectItem&gt;(); + private String capital = ""; + + public List&lt;Capital&gt; autocomplete(Object suggest) { + String pref = (String) suggest; + ArrayList&lt;Capital&gt; result = new ArrayList&lt;Capital&gt;(); + + Iterator&lt;Capital&gt; iterator = getCapitals().iterator(); + while (iterator.hasNext()) { + Capital elem = ((Capital) iterator.next()); + if ((elem.getName() != null &amp;&amp; elem.getName().toLowerCase() + .indexOf(pref.toLowerCase()) == 0) + || "".equals(pref)) { + result.add(elem); + } + } + return result; + } + + public SBbean() { + URL rulesUrl = getClass().getResource("capitals-rules.xml"); + Digester digester = DigesterLoader.createDigester(rulesUrl); + digester.push(this); + try { + digester.parse(getClass().getResourceAsStream("capitals.xml")); + } catch (IOException e) { + throw new FacesException(e); + } catch (SAXException e) { + throw new FacesException(e); + } + capitalsNames.clear(); + for (Capital cap : capitals) { + capitalsNames.add(cap.getName()); + } + capitalsOptions.clear(); + for (Capital cap : capitals) { + capitalsOptions.add(new SelectItem(cap.getName(), cap.getState())); + } + } + + public String addCapital(Capital capital) { + capitals.add(capital); + return null; + } + } +</programlisting> + <para> + In the example above when suggestion item (city) is selected it is + set as a value of + <code>&lt;h:inputText id="city"/&gt;</code> + . + </para> + <para> + Here is a result: + </para> + <figure> + <title> + <emphasis role="bold"> + Simple + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox_simple.png" /> + </imageobject> + </mediaobject> + </figure> + + <para> + The + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + component could get any collection + and outputs it in a + popup in + several columns. The + <emphasis> + <property>"fetchValue"</property> + </emphasis> + attribute points to the data that is inserted into the input field + if a particular row is selected + or clicked from the suggested list. + Therefore when some string is chosen input + receives the proper value. + </para> + <programlisting role="XML">... + &lt;h:inputText id="city" value="#{capitalsBean.capital}" /&gt; + &lt;rich:suggestionbox for="city" var="result" + fetchValue="#{result.state}" + suggestionAction="#{capitalsBean.autocomplete}"&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{result.name}" /&gt; + &lt;/h:column&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{result.state}" /&gt; + &lt;/h:column&gt; + &lt;/rich:suggestionbox&gt; + ... +</programlisting> + <para> + In the example above if you choose any string input will receive the + corresponding value + from the second column containing + <code>#{result.state}</code> + . + </para> + <para>Here is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + with output in several columns + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox2.png" /> + </imageobject> + </mediaobject> + </figure> + <para> + There is also one more important attribute named + <emphasis> + <property>"tokens"</property> + </emphasis> + that specifies separators after which a set of some + characters + sequence is defined as a new prefix beginning from this + separator and + not from the string beginning. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... + &lt;h:inputText id="city" value="#{capitalsBean.capital}" /&gt; + &lt;rich:suggestionbox for="city" var="result" + suggestionAction="#{capitalsBean.autocomplete}" + tokens=","&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{result.name}" /&gt; + &lt;/h:column&gt; + &lt;/rich:suggestionbox&gt; + ... +</programlisting> + <para>This example shows that when a city is chosen and a comma and + first letter + character are input, Ajax request is called again, but + it + submits a + value starting from the last token:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + with chosen word + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox3.png" /> + </imageobject> + </mediaobject> + </figure> + <para> + For + a multiple definition use either " + <code>,.;[]</code> + " + syntax as a value for + <emphasis> + <property>"tokens"</property> + </emphasis> + attribute or link a parameter to some bean + property that transmits + separators collection. + </para> + </section> + <section> + <title>JavaScript API</title> + <para> + There is such feature of the + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + component as + <property>object selection</property> + . + If you want to get the selected item as object on the client side + you should set the value of the + <emphasis> + <property> "usingSuggestObjects" </property> + </emphasis> + attribute + to "true". + After that you should specify + JavaScript method in + the + <emphasis> + <property> "onobjectchange"</property> + </emphasis> + attribute and pass the + <code>suggestion</code> + object as a parameter: + </para> + <programlisting role="XML">... + &lt;h:inputText id="city" value="#{capitalsBean.capital}" /&gt; + &lt;rich:suggestionbox for="city" var="result" + suggestionAction="#{capitalsBean.autocomplete}" + onobjectchange="processObjects(suggestion)" + usingSuggestObjects="true"&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{result.name}" /&gt; + &lt;/h:column&gt; + &lt;/rich:suggestionbox&gt; + &lt;h:panelGroup&gt; + &lt;div id="state"&gt;&lt;/div&gt; + &lt;/h:panelGroup&gt; + ... +</programlisting> + <para> + When the item is selected you can get it as an object on the client + side and use + <code>getSelectedItems()</code> + method to access any object properties: + </para> + <programlisting role="XML">&lt;script + type="text/javascript"&gt; + function processObjects(suggestionBox) { + var items = suggestionBox.getSelectedItems(); + var state; + if (items &amp;&amp; items.length &gt; 0) { + for ( var i = 0; i &lt; items.length; i++) { + state = items[i].state; + } + document.getElementById('state').innerHTML = "State: "+state; + }else{ + document.getElementById('state').innerHTML = ''; + } + } + &lt;/script&gt; </programlisting> + <para> + Here is a result: + </para> + <figure> + <title> + Usage of + <code>getSelectedItems()</code> + method + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionboxAPI.png" /> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Other attributes and facets</title> + <para> + In addition to attributes common for Ajax action components + and + limiting requests quantity and frequency, + the + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + has one more its own attribute + limiting requests: the + <emphasis> + <property>"minChars"</property> + </emphasis> + attribute. This attribute defines characters quantity + inputted into a + field after which Ajax requests are called to perform + suggestion. + </para> + + + <para> + There is possibility to define what is shown if the autocomplete + returns empty list. Attribute + <emphasis> + <property> "nothingLabel" </property> + </emphasis> + or facet with the same name could be used for this purpose. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... + &lt;rich:suggestionbox for="city" var="result" + suggestionAction="#{capitalsBean.autocomplete}" + nothingLabel="No cities found"&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{result.name}" /&gt; + &lt;/h:column&gt; + &lt;/rich:suggestionbox&gt; + ... +</programlisting> + <para>Here is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + with empty list + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox4.png" /> + </imageobject> + </mediaobject> + </figure> + <para> + You can also use facets for the further + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + customization: + </para> + <programlisting role="XML">... + &lt;h:inputText id="city" value="#{capitalsBean.capital}" /&gt; + &lt;rich:suggestionbox for="city" var="result" + suggestionAction="#{capitalsBean.autocomplete}"&gt; + &lt;f:facet name="nothingLabel"&gt; + &lt;h:outputText value="No cities found" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="header"&gt; + &lt;h:outputText value="Select your city" /&gt; + &lt;/f:facet&gt; + &lt;h:column&gt; + &lt;h:outputText value="#{result.name}" /&gt; + &lt;/h:column&gt; + &lt;/rich:suggestionbox&gt; + ... +</programlisting> + <para> + Here is a result: + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + facets + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/suggestionbox5.png" /> + </imageobject> + </mediaobject> + </figure> + <para> + Information about the + <emphasis> + <property>"process"</property> + </emphasis> + attribute usage you can findin the + <link linkend="process"> "Decide what to process" </link> + guide section. + </para> + <para> + In RichFaces Wiki article about + <ulink + url="http://wiki.jboss.org/wiki/RichFacesSuggestionGettingAdditional... + Additional Properties </ulink> + you can find example of getting additional + properties. + </para> + </section> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/suggestionbox.html">Table of + &lt;rich:suggestionbox&gt; + attributes</ulink> + . + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.SuggestionBox</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.SuggestionBox</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.SuggestionBoxRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.SuggestionBoxTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>nothingLabel</entry> + <entry>Redefines the content item if the autocomplete returns + empty + list. Related attribute is "nothingLabel"</entry> + </row> + <row> + <entry>popup</entry> + <entry>Redefines the content for the popup list of the suggestion + </entry> + </row> + <row> + <entry>header</entry> + <entry>Defines the header content</entry> + </row> + <row> + <entry>footer</entry> + <entry>Defines the footer content</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="suggBoxC"> + <title>Classes names that define a suggestionbox</title> + + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + <row> + <entry>rich-sb-common-container</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; element of + a suggestion container</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-1</entry> + + <entry>Defines styles for the first + wrapper &lt;div&gt; + element of a suggestion box + exterior</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-2</entry> + + <entry>Defines styles for the second + wrapper &lt;div&gt; + element of a suggestion box + exterior</entry> + </row> + + <row> + <entry>rich-sb-ext-decor-3</entry> + + <entry>Defines styles for the third + wrapper &lt;div&gt; + element of a suggestion box + exterior</entry> + </row> + + <row> + <entry>rich-sb-overflow</entry> + + <entry>Defines styles for a wrapper + &lt;div&gt; + element</entry> + </row> + + <row> + <entry>rich-sb-int-decor-table</entry> + + <entry>Defines styles for a suggestion + box table</entry> + </row> + + <row> + <entry>rich-sb-int</entry> + + <entry>Defines the styles for a + suggestion box table rows + (tr)</entry> + </row> + + <row> + <entry>rich-sb-cell-padding</entry> + + <entry>Defines the styles for suggestion + box table cells (td)</entry> + </row> + + <row> + <entry>rich-sb-int-sel</entry> + + <entry>Defines styles for a selected + row</entry> + </row> + + <row> + <entry>rich-sb-shadow</entry> + + <entry>Defines styles for a suggestion + boxshadow</entry> + </row> + + </tbody> + </tgroup> + </table> + <para> + You can find all necessary information about style classes + redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </para> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Visit + <ulink + url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + </ulink> + page at RichFaces Livedemo for examples of component usage and + sources. + </para> + <para> + RichFaces cookbook at JBoss Portal includes some articles that cover + different aspects of working with + <emphasis role="bold"> + <property>&lt;rich:suggestionbox&gt;</property> + </emphasis> + : + </para> + <itemizedlist> + <listitem> + <para> + " + <ulink url="http://www.jboss.org/community/docs/DOC-11851">Creating suggestion box dynamically</ulink> + "; + </para> + </listitem> + <listitem> + <para> + " + <ulink url="http://www.jboss.org/community/docs/DOC-11865">Getting additional properties from + &lt;rich:suggectionbox&gt;</ulink> + ". + </para> + </listitem> + </itemizedlist> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tab.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,314 @@ +<section role="NotInToc" id="rich_tab"> + <title> + &lt; + rich:tab + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A <property>tab</property> section within a tab panel.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Fully skinnable <property>tabs</property> content</para> + </listitem> + <listitem> + <para>Disabled/enabled <property>tab</property> options</para> + </listitem> + <listitem> + <para>Groups any content inside a <property>tab</property> + </para> + </listitem> + <listitem> + <para>Each <property>tab</property> has a unique name for a direct access (e.g. for + switching between tabs)</para> + </listitem> + <listitem> + <para>Switch methods can be easily customized for every <property>tab</property> + separately with attribute to:</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> + </para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + </listitem> + <listitem> + <para> + <code>AJAX</code> + </para> + </listitem> + </itemizedlist> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>The main component function is to define a content group that is rendered + and processed when the <property>tab</property> is active, i.e. click + on a <property>tab</property> causes switching onto a + <property>tab</property> containing content corresponded to this + <property>tab</property>.</para> + <para>The <emphasis> + <property>"label"</property> + </emphasis> attribute defines text to be represented. If you can use + the <emphasis> + <property>"label"</property> + </emphasis> facet, you can even not use the <emphasis> + <property>"label"</property> + </emphasis> attribute.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:tab&gt; + &lt;f:facet name="label"&gt; + &lt;h:graphicImage value="/images/img1.png"/&gt; + &lt;/f:facet&gt; + ... + &lt;!--Any Content inside--&gt; + ... +&lt;/rich:tab&gt; +... +</programlisting> + + <para>A marker on a <property>tab</property> header defined with the <emphasis> + <property>"label"</property> + </emphasis> attribute. Moreover, each <property>tab</property> could + be disabled (switching on this <property>tab</property> is impossible) + with the <emphasis> + <property>"disable"</property> + </emphasis> attribute.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:tabPanel width="20%"&gt; + &lt;tabs:tab label="Canon"&gt; + &lt;h:outputText value="Canon EOS Digital Rebel XT" /&gt; + ... + &lt;/tabs:tab&gt; + &lt;tabs:tab label="Nikon"&gt; + &lt;h:outputText value="Nikon D70s" /&gt; + ... + &lt;/tabs:tab&gt; + &lt;tabs:tab label="Olympus"&gt; + &lt;h:outputText value="Olympus EVOLT E-500" /&gt; + ... + &lt;/tabs:tab&gt; + &lt;tabs:tab disabled="true" name="disabled" label="Disabled"/&gt; +&lt;/rich:tabPanel&gt; +...</programlisting> + <para>With this example it's possible to generate the <property>tab + panel</property> with the last disabled and three active + <property>tabs</property> (see the picture).</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> with disabled <emphasis role="bold"> + <property>&lt;rich:tab&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tab2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Switching mode could be defined not only for the whole panel + <property>tab</property>, but also for each particular + <property>tab</property>, i.e. switching onto one + <property>tab</property> could be performed right on the client with + the corresponding JavaScript and onto another <property>tab</property> + with an Ajax request on the server. <property>Tab</property> switching + modes are the same as <property>tabPanel</property> ones.</para> + <para>Each <property>tab</property> also has an attribute name (alias for <emphasis> + <property>"id"</property> + </emphasis> attribute). Using this attribute value it's + possible e.g. to set an active <property>tab</property> on a model + level specifying this name in the corresponding attribute of the whole + <property>tab</property>.</para> + <para>Except the specific component attributes it has all necessary attributes + for JavaScript event definition.</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> + <para> Some event could be performed on the tab which has been entered/left + using <emphasis> + <property>"ontabenter"</property> + </emphasis>/<emphasis> + <property>"ontableave"</property> + </emphasis> attributes. See the example below.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:tabPanel&gt; + &lt;rich:tab label="Tab1" ontabenter="alert()"&gt; + ... + &lt;/rich:tab&gt; + ... +&lt;/rich:tabPanel&gt; +...</programlisting> + <para> The following example shows how on the client side to get the names of + <code>entered</code>/<code>left</code> tabs. </para> + <programlisting role="JAVA">ontabenter="alert(leftTabName)"</programlisting> + <para> Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the + <link linkend="process"> "Decide what to process" </link> guide section. </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/tab.html">Table of + &lt;rich:tab&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Tab</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTab</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Tab</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TabRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TabTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>label</entry> + <entry>Defines the text for the actual "tab" in a tab section</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_tab"> + <title>Classes names that define a tab</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tab-header</entry> + <entry>Defines styles for a tab + header</entry> + </row> + + <row> + <entry>rich-tab-label</entry> + <entry>Defines styles for a tab + label</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a tab states</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tab-active</entry> + <entry>Defines styles for an active + tab</entry> + </row> + <row> + <entry>rich-tab-inactive</entry> + <entry>Defines styles for an inactive + tab</entry> + </row> + <row> + <entry>rich-tab-disabled</entry> + <entry>Defines styles for a disabled + tab</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tabPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tabPanel.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tabPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,335 @@ +<section role="NotInToc" id="rich_tabPanel"> + <title> + &lt; + rich:tabPanel + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A <property>tab panel</property> displaying tabs for grouping content of the panel.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tabPanel_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Skinnable <property>tab panel</property> and child items</para> + </listitem> + <listitem> + <para>Disabled/enabled tab options</para> + </listitem> + <listitem> + <para>Customizable headers</para> + </listitem> + <listitem> + <para>Group any content inside a tab</para> + </listitem> + <listitem> + <para>Each tab has a unique name for direct access (e.g. for switching between tabs)</para> + </listitem> + <listitem> + <para>Switch methods can be easily customized with attribute to:</para> + <itemizedlist> + <listitem> + <para> + <code> + Server + </code> + </para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + </listitem> + <listitem> + <para> + <code>AJAX</code> + </para> + </listitem> + + </itemizedlist> + </listitem> + <listitem> + <para>Switch methods can be selected for the whole <property>tab panel</property> and for the + each tab separately</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>As it was mentioned <link linkend="tabPanel">above</link>, + <property>tabPanel</property> groups content on panels and + performs switching from one to another. Hence, modes of switching + between panels are described first of all.</para> + <note> + <title>Note:</title> + <para> All <property>tabPanels</property> should be wrapped into a + form element so as content is correctly submitted inside. If + a form is placed into each tab, the Action elements of Tab + controls appear to be out of the form and content submission + inside the panels could be performed only for Action + components inside tabs.</para> + </note> + <para>Switching mode could be chosen with the <property>tabPanel</property> + attribute <emphasis> + <property>"switchType"</property> + </emphasis> with three possible parameters.</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> (DEFAULT)</para> + <para>The common submission is performed around + <property>tabPanel</property> and a page + is completely rendered on a called panel. Only one + at a time <property>tabPanel</property> is + uploaded onto the client side.</para> + </listitem> + <listitem> + <para> + <code>Ajax</code> + </para> + <para>AJAX form submission is performed around the + <property>tabPanel</property>, content + of the called <property>tabPanel</property> is + uploaded on Ajax request. Only one at a + time <property>tabPanel</property> is uploaded on + the client.</para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + <para> All <property>tabPanels</property> are uploaded on + the client side. The switching from the active to + the hidden <property>panel</property> is performed + with client JavaScript.</para> + </listitem> + </itemizedlist> + <para>As a result, the <property>tabPanel</property> is switched to the second + tab according to the action returning outcome for moving onto another + page and switching from the second to the first tab is performed.</para> + <para>There is also the <emphasis> + <property>"selectedTab"</property> + </emphasis> attribute. The attribute keeps an active tab name; + therefore, an active <property>tabPanel</property> could be changed + with setting a name of the necessary tab to this attribute.</para> + <para>There is also the <emphasis> + <property>"headerAlignment"</property> + </emphasis> attribute responsible for rendering of + <property>tabPanel</property> components. The attribute has several + values: "left" (Default), "right", + "center", which specify Tabs components location on + the top of the tabPanel.</para> + + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:tabPanel width="40%" headerAlignment="right"&gt; + &lt;rich:tab label="Canon"&gt; + ... + &lt;/rich:tab&gt; + &lt;rich:tab label="Nikon"&gt; + ... + &lt;/rich:tab&gt; + &lt;rich:tab label="Olympus"&gt; + ... + &lt;/rich:tab&gt; +&lt;/rich:tabPanel&gt; +... +</programlisting> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> with right aligned tabs</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tabPanel2.png"/> + </imageobject> + </mediaobject> + </figure> + <para> The <emphasis> + <property>"label"</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>"label"</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>"DoubleRangeValidator.MAXIMUM"</code>, + {2} for <code>"ShortConverter.SHORT"</code>. </para> + <para>Except the specific attributes, the component has all necessary attributes + for JavaScript events definition.</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> etc. </para> + </listitem> + </itemizedlist> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/tabPanel.html">Table of + &lt;rich:tabPanel&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.tabPanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmltabPanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.tabPanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.tabPanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.tabPanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn5"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tabpanel</entry> + <entry>Defines styles for all + tabPanel</entry> + </row> + <row> + <entry>rich-tabpanel-content</entry> + <entry>Defines styles for an internal + content</entry> + </row> + <row> + <entry>rich-tabpanel-content-position</entry> + <entry>Defines styles for a wrapper + element of a tabPanel content. + It should define a shift equal + to borders width in order to + overlap panel tabs</entry> + </row> + <row> + <entry>rich-tabhdr-side-border</entry> + <entry>Defines styles for side elements + of a tabPanel header</entry> + </row> + <row> + <entry>rich-tabhdr-side-cell</entry> + <entry>Defines styles for a header + internal element</entry> + </row> + <row> + <entry>rich-tab-bottom-line</entry> + <entry>Defines styles for a tab bottom + line element of a tabPanel + </entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define different tab header states + (corresponds to rich-tabhdr-side-cell)</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tabhdr-cell-active</entry> + <entry>Defines styles for an internal + element of an active + header</entry> + </row> + <row> + <entry>rich-tabhdr-cell-inactive</entry> + <entry>Defines styles for an internal + element of an inactive label + </entry> + </row> + <row> + <entry>rich-tabhdr-cell-disabled</entry> + <entry>Defines styles for an internal + element of a disabled label + </entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.js... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:tabPanel&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toggleControl.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toggleControl.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toggleControl.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,186 @@ +<section role="NotInToc" id="rich_toggleControl"> + <title> + &lt; + rich:toggleControl + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A link type <property>control</property> for switching between + <property>togglePanel</property> facets. Target + Panel is specified with <emphasis> + <property>"for"</property> + </emphasis> + attribute. It can be located inside or outside the <property>togglePanel</property>. As the result of switching + between facets previous facet is hidden and another one (specified with + <emphasis> + <property>"switchToState"</property> + </emphasis> or panel + <emphasis> + <property>"stateOrder"</property> + </emphasis> attributes) is + shown.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/toggleControl_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel</para> + </listitem> + <listitem> + <para>Can be located anywhere in a page layout</para> + </listitem> + <listitem> + <para>Switching is provided in the three modes</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> + </para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + </listitem> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>As it was mentioned <link linkend="toggleControl">above</link>, the <property>control</property> could be in any place in + layout and linked to a switching panel that is managed with <emphasis> + <property>"for"</property> + </emphasis> attribute (in the <emphasis> + <property>"for"</property> + </emphasis> attribute the full component <emphasis> + <property>"id"</property> + </emphasis> is specified according to naming + containers).</para> + <para>The <property>togglePanel</property> could be also switched from the side of the control instead of being strictly defined +in <emphasis> + <property>"switchOrder"</property> + </emphasis> attribute of <emphasis role="bold"> + <property>&lt;rich:togglePanel&gt;</property>.</emphasis> + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:togglePanel id="panel" initialState="empty" switchType="client"&gt; + &lt;f:facet name="first"&gt; + &lt;h:panelGroup&gt; + &lt;rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/&gt; + &lt;rich:toggleControl for="helloForm:panel" value=" Second" switchToState="second"/&gt; + &lt;!--Some content--&gt; + &lt;/h:panelGroup&gt; + &lt;/f:facet&gt; + &lt;f:facet name="second"&gt; + &lt;h:panelGroup&gt; + &lt;rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/&gt; + &lt;rich:toggleControl for="helloForm:panel" value=" first" switchToState="first"/&gt; + &lt;!--Some content--&gt; + &lt;/h:panelGroup&gt; + &lt;/f:facet&gt; + &lt;f:facet name="empty"&gt; + &lt;h:panelGroup&gt; + &lt;rich:toggleControl for="helloForm:panel" value="first" switchToState="first"/&gt; + &lt;rich:toggleControl for="helloForm:panel" value=" second" switchToState="second"/&gt; + &lt;/h:panelGroup&gt; + &lt;/f:facet&gt; +&lt;/rich:togglePanel&gt; +... +</programlisting> + <para>In this example the switching is performed on facets specified in the <emphasis> + <property>"switchToState"</property> + </emphasis> attribute.</para> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find <link linkend="process">" Decide what to process " </link> guide section. + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/toggleControl.html">Table of + &lt;rich:toggleControl&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ToggleControl</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlToggleControl</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ToggleControl</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ToggleControlRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ToggleControlTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_tC"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tglctrl</entry> + <entry>Defines styles for a toggle control</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_togglePanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_togglePanel.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_togglePanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,232 @@ +<section role="NotInToc" id="rich_togglePanel"> + <title> + &lt; + rich:togglePanel + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A wrapper component with named facets, where every facet is shown after activation of + the corresponding <property>toggleControl</property> + (the other is hidden).</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:togglePanel&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/togglePanel_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Support for any content inside</para> + </listitem> + <listitem> + <para>Three modes of facets switching</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> + </para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + </listitem> + <listitem> + <para> + <code>Ajax</code> + </para> + </listitem> + </itemizedlist> + </listitem> + <listitem> + <para>Controls for <property>togglePanel</property> can be everywhere in layout</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>As it was mentioned <link linkend="togglePanel">above</link>, + <property>togglePanel</property> splits content into named + facets that become rendered and processed when a click performed on + controls linked to this <property>togglePanel</property> (either + switched on the client or send requests on the server for switching).</para> + <para>The initial component state is defined with <emphasis> + <property>"initialState"</property> + </emphasis> attribute, where a facet name that is shown at first is + defined.</para> + <note> + <title>Note:</title> + <para> It's also possible to define an <emphasis> + <property>"empty"</property> + </emphasis> facet to implement the functionality as + drop-down panels have and make the facet active when no + content is required to be rendered.</para> + </note> + <para>Switching mode could be defined with the <emphasis> + <property>"switchType"</property> + </emphasis> attribute with three possible parameters:</para> + <itemizedlist> + <listitem> + <para> + <code>Server</code> (DEFAULT)</para> + <para>The common submission is performed around + <property>togglePanel</property> and a + page is completely rendered on a called panel. + Only one at a time the panel is uploaded onto the + client side.</para> + </listitem> + <listitem> + <para> + <code>Ajax</code> + </para> + <para>AJAX form submission is performed around the panel, + content of the called panel is uploaded on an Ajax + request . Only one at a + time the panel is uploaded on the client + side.</para> + </listitem> + <listitem> + <para> + <code>Client</code> + </para> + <para> All panels are uploaded on the client side. The + switching from the active to the hidden panel is + performed with client JavaScript.</para> + </listitem> + </itemizedlist> + <para>"Facets" switching order could be defined on the side of + <emphasis role="bold"> + <property>&lt;rich:toggleControl&gt;</property> + </emphasis> component or on the panel. On the side of the togglePanel + it's possible to define facets switching order with the <emphasis> + <property>"stateOrder"</property> + </emphasis> attribute. The facets names are enumerated in such an + order that they are rendered when a control is clicked, as + it's not defined where to switch beforehand.</para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:togglePanel id="panel" initialState="panelB" switchType="client" + stateOrder="panelA,panelB,panelC"&gt; + &lt;f:facet name="panelA"&gt; + ... + &lt;/f:facet&gt; + &lt;f:facet name="panelB"&gt; + ... + &lt;/f:facet&gt; + &lt;f:facet name="panelC"&gt; + ... + &lt;/f:facet&gt; +&lt;/rich:togglePanel&gt; +&lt;rich:toggleControl for="panel" value="Switch"/&gt; +... +</programlisting> + <para>The example shows a <property>togglePanel</property> initial state when + the second facet (<code>panelB</code>) is rendered and successive + switching from the first to the second happens.</para> + <para> The <emphasis> + <property>"label"</property> + </emphasis> attribute is a generic attribute. The <emphasis> + <property>"label"</property> + </emphasis> attribute provides an association between a component, and + the message that the component (indirectly) produced. This attribute + defines the parameters of localized error and informational messages + that occur as a result of conversion, validation, or other application + actions during the request processing lifecycle. With the help of this + attribute you can replace the last parameter substitution token shown + in the messages. For example, {1} for + <code>"DoubleRangeValidator.MAXIMUM"</code>, + {2} for <code>"ShortConverter.SHORT"</code>. </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/togglePanel.html">Table of + &lt;rich:togglePanel&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.TogglePanel</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTogglePanel</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.TogglePanel</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TogglePanelRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.Taglib.togglePanelTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="togglePC"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-toggle-panel</entry> + <entry>Defines styles for all + component</entry> + </row> + + <row> + <entry>rich-tglctrl</entry> + <entry>Defines styles for a toggle + control</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:togglePanel&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBar.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,224 @@ +<section role="NotInToc" id="rich_toolBar"> + <title> + &lt; + rich:toolBar + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A horizontal bar with Action items on it that accepts any JSF components as children.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> with action items</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/toolBar_init.png" scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Skinnable menu panel and child items</para> + </listitem> + <listitem> + <para>Standard top menu bar that can be used in accordance with a menu component</para> + </listitem> + <listitem> + <para>Grouping bar content</para> + </listitem> + <listitem> + <para>Easily place content on any side of a menu bar using predefined group layout</para> + </listitem> + <listitem> + <para>Predefined separators for menu items and groups</para> + </listitem> + <listitem> + <para>Any content inside</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>A <property>toolBar</property> is a wrapper component that facilitates creation of menu + and <property>tool bars</property>. All components defined inside are located on a stylized + bar with possibility to group, arrange on the both bar sides, and place predefined separators + between them.</para> + <para>Grouping and an input side definition is described for <property>toolBarGroup</property> + that defines this functionality.</para> + <para>Separators are located between components with the help of the <emphasis> + <property>"itemSeparator"</property> + </emphasis> attribute with four predefined values:</para> + <itemizedlist> + <listitem> + <para> "none" </para> + </listitem> + <listitem> + <para> "line" </para> + </listitem> + <listitem> + <para> "square" </para> + </listitem> + <listitem> + <para> "disc" </para> + </listitem> + </itemizedlist> + <para>For example, when setting a separator of a disc type, the following result is produced:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> with a <emphasis> + <property>"disc"</property> + </emphasis> separator</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/toolBar2.png" scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + <para>Moreover, for <property>toolBar</property> style <emphasis> + <property>"width"</property> + </emphasis> and <emphasis> + <property>"height"</property> + </emphasis> attributes are placed above all.</para> + <para>A custom separator can be added with the help of <emphasis> + <property>"itemSeparator"</property> + </emphasis> facet.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;f:facet name="itemSeparator"&gt; + &lt;rich:separator width="2" height="14" /&gt; +&lt;/f:facet&gt; +... +</programlisting> + <para>Custom separator can be also specified by URL to the separator image in the attribute <emphasis> + <property>"itemSeparator"</property> + </emphasis> of the <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis>. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:toolBar id="toolBar" width="#{bean.width}" height="#{bean.height}" itemSeparator="/images/separator_img.jpg"/&gt; +... +</programlisting> + <para>This is a result:</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> with <emphasis> + <property>"itemSeparator"</property> + </emphasis> attribute.</title> + + <mediaobject> + <imageobject> + <imagedata fileref="images/toolBar4.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/toolBar.html">Table of + &lt;rich:toolBar&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ToolBar</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlToolBar</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ToolBar</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ToolBarRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ToolBarTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>itemSeparator</entry> + <entry>Defines the custom separator. Related attribute is "itemSeparator"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="toolBC"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-toolbar</entry> + <entry>Defines styles for a toolbar element</entry> + </row> + <row> + <entry>rich-toolbar-item</entry> + <entry>Defines styles for a toolbar item</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolBar.jsf... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:toolBar&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBarGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBarGroup.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolBarGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,153 @@ +<section role="NotInToc" id="rich_toolBarGroup"> + <title> + &lt; + rich:toolBarGroup + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>A group of items inside a tool bar.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolbarGroup&gt;</property> + </emphasis> with items on it</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/toolBarGroup_init.png" scalefit="1"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Fully skinnable with its child items</para> + </listitem> + <listitem> + <para>Grouping bar content</para> + </listitem> + <listitem> + <para>Easily place content on either side of tool bar using a predefined group layout</para> + </listitem> + <listitem> + <para>Predefined separators for menu items and groups</para> + </listitem> + <listitem> + <para>Any content inside</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para>A <property>toolBarGroup</property> is a wrapper component that groups <property>toolBar</property> content and facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with a possibility to group, arrange on the both bar sides, and place predefined separators between them.</para> + <para>Separators are located between components with the help of the <emphasis> + <property>"itemSeparator"</property> + </emphasis> attribute with four + predefined values:</para> + <itemizedlist> + <listitem> + <para> "none" </para> + </listitem> + <listitem> + <para> "line" </para> + </listitem> + <listitem> + <para> "square" </para> + </listitem> + <listitem> + <para> "disc" </para> + </listitem> + </itemizedlist> + <para>To control the group location inside, use the <emphasis> + <property>"location"</property> + </emphasis> attribute with "left" (DEFAULT) and "right" values.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:toolBar itemSeparator="disc" width="500"&gt; + &lt;rich:toolBarGroup itemSeparator="line"&gt; + &lt;h:commandLink value="Command 1.1"/&gt; + &lt;h:commandLink value="Command 2.1"/&gt; + &lt;/rich:toolBarGroup&gt; + &lt;rich:toolBarGroup itemSeparator="line" location="right"&gt; + &lt;h:commandLink value="Command 1.2"/&gt; + &lt;h:commandLink value="Command 2.2"/&gt; + &lt;/rich:toolBarGroup&gt; +&lt;/rich:toolBar&gt; +... +</programlisting> + <para>The code result is the following:</para> + <figure> + <title>Stylized <emphasis role="bold"> + <property>&lt;rich:toolbarGroup&gt;</property> + </emphasis> with <emphasis> + <property>"location"</property> + </emphasis>, <emphasis> + <property>"itemSeparator"</property> + </emphasis> attributes</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/toolBarGroup2.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/toolBarGroup.html">Table of + &lt;rich:toolBarGroup&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.ToolBarGroup</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlToolBarGroup</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.ToolBarGroup</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.ToolBarGroupRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.ToolBarGroupTag</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + Some additional information about usage of component can be found + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolBar.jsf... the component Live Demo page</ulink>. + </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolTip.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolTip.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_toolTip.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,478 @@ +<section role="NotInToc" id="rich_toolTip"> + <title> + &lt; + rich:toolTip + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> component is used + for creation of event-triggered non modal popup, that contains information regarding the page element, that event was applied to. + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/toolTip_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Highly customizable look and feel </para> + </listitem> + <listitem> + <para>Different ways of data loading to toolTip</para> + </listitem> + <listitem> + <para>Disablement support</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + Text information, labeled on the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis>, is specified with <emphasis> + <property>"value"</property> + </emphasis> attribute. + Text that is put between tooltip start and end tags will also be rendered as tooltip content and could be marked with HTML tags. + Images, links, buttons and other RichFaces components are also may be put and composed inside the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis>. + The <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> borders are stretched automatically to enclose the contents. + </para> + <para> + There are three ways to attach the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> to a page element. + The first and simplest one is when the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> is nested into a page element the tooltip is applied to. + This way is shown on example in the <link linkend="tab_ccpt">Creating the Component with a Page Tag</link> section. + The <emphasis> + <property>"attached"</property> + </emphasis> attribute is "true" by default in this case, + which means that the tolltip will be invoked automatically when the mouse cursor is hovered above the parent component. + </para> + + <para> + The second one uses <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> + <emphasis> + <property>"for"</property> + </emphasis> attribute. + In this case the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> is defined separately from a component it is applied to. + </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;rich:panel id="panelId"&gt; +... +&lt;/rich:panel&gt; +&lt;rich:toolTip value="This is a tooltip." for="panelId"/&gt;</programlisting> + + <para>These two ways are also applicable for HTML elements that are not presented in components tree built by facelets. + Use <emphasis> + <property>"for"</property> + </emphasis> attribute to attach the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> in both cases. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;!-- The &lt;rich:toolTip&gt; is nested into the parent HTML element --&gt; +&lt;div id="para1"&gt; + &lt;p&gt;This paragraph and tooltip are nested into the same &lt;div&gt; element.&lt;/p&gt; + &lt;rich:toolTip for="para1"&gt;This is a tooltip.&lt;/rich:toolTip&gt; +&lt;/div&gt; + +&lt;!-- The &lt;rich:toolTip&gt; is defined separately --&gt; +&lt;div id="para2"&gt; + &lt;p&gt;The tooltip for this paragraph is defined separately.&lt;/p&gt; +&lt;/div&gt; +&lt;rich:toolTip for="para2"&gt;This is a tooltip.&lt;/rich:toolTip&gt;</programlisting> + + <para>The third way to invoke the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> uses JS API function. + List of JS API functions available for <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> is listed <link linkend="tab_jsapi">below</link>. + JS API functions are defined for a component the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> is applied to. + The <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> + <emphasis> + <property>"attached"</property> + </emphasis> attribute should be set to "false" in this case. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">&lt;rich:panel id="panelId" onclick="#{rich:component("tooltipId")}.show(event);" /&gt; +&lt;a4j:form&gt; + &lt;rich:toolTip id="tooltipId" attached="false" value="This is a tooltip."/&gt; +&lt;/a4j:form&gt;</programlisting> + + <note> + <title>Notes:</title> + <para>To provide <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> component proper work in complex cases do the following: + <itemizedlist> + <listitem> + <para>specify <emphasis> + <property>"id's"</property> + </emphasis> for both <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> and component it is applied to;</para> + </listitem> + <listitem> + <para>define the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> as last child, when nesting it into the component the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> is applied to;</para> + </listitem> + <listitem> + <para>put the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> into <emphasis role="bold"> + <property>&lt;a4j:form&gt;</property> + </emphasis> when invoking it with JS API function.</para> + </listitem> + </itemizedlist> + </para> + </note> + + <para> + The <emphasis> + <property>"mode"</property> + </emphasis> attribute is provided you to control the way of data loading to <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis>. + The component works properly in client and Ajax modes. + In client mode <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> content is rendered once on the server and could be rerendered only via external submit. + In Ajax mode <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> content is requested from server for every activation. + For Ajax mode there is possibility to define a facet <emphasis> + <property>"defaultContent"</property> + </emphasis>, which provides default <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> content to be displayed, while main content is loading into the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> (see the example below). + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:commandLink value="Simple Link" id="link"&gt; + &lt;rich:toolTip followMouse="true" direction="top-right" mode="ajax" value="#{bean.toolTipContent}" horizontalOffset="5" + verticalOffset="5" layout="block"&gt; + &lt;f:facet name="defaultContent"&gt; + &lt;f:verbatim&gt;DEFAULT TOOLTIP CONTENT&lt;/f:verbatim&gt; + &lt;/f:facet&gt; + &lt;/rich:toolTip&gt; +&lt;/h:commandLink&gt; +... +</programlisting> + <para> + This is the result: + </para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> component with default content</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/toolTip2.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + And after <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> loaded it is changed to next one: + </para> + + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> component with loaded content</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/toolTip3.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> + <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> appears attached to the corner + dependent on the <emphasis> + <property>"direction"</property> + </emphasis> attribute. + By default it is positioned bottom-right. + <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> activation occurs after an event, + defined on the parent component, takes into consideration the "delay" attribute + or after calling JS API function <code>show()</code>. + <emphasis> + <property>"hideEvent"</property> + </emphasis> attribute defines the way + how <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> disappears. + It default value is "none", so the <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> does not disappears. + Deactivation may be set for example on <emphasis> + <property>mouseout</property> + </emphasis> event on the parent component + (excepting the situation when the mouse is hovered onto the + <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> itself) + or after calling JS API function <code>hide()</code>. + </para> + <para> + By default, <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> appears smart positioned. But as you can see from the previous example, you + can define an appearance direction via the corresponding attribute <emphasis> + <property>"direction"</property> + </emphasis>. + And also it's possible to define vertical and horizontal offsets relatively to a mouse position. + </para> + <para> + Disabled <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> is rendered to a page as usual but JS that responds for its activation is disabled until <code>enable()</code> is called. + </para> + <para> + Moreover, to add some JavaScript effects, client events defined on it are used: + </para> + <para> + Standart: + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"ondblclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmousemove"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + </itemizedlist> + </para> + <para> + Special: + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onshow"</property> + </emphasis> - Called after the tooltip is called (some element hovered) but before its request</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"oncomplete"</property> + </emphasis> - Called just after the tooltip is shown</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onhide"</property> + </emphasis> - Called after the tooltip is hidden</para> + </listitem> + </itemizedlist> + </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/toolTip.html">Table of + &lt;rich:toolTip&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.component.toolTip</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlToolTip</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.component.toolTip</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.renderkit.html.toolTipRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.HtmlToolTipTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>JavaScript API</title> + + <tgroup cols="2"> + <thead> + <row>every acti + <entry>Function</entry> + + <entry>Description</entry> + </row> + </thead> + + <tbody> + + <row> + <entry>show()</entry> + + <entry>Shows the corresponding toolTip</entry> + </row> + + <row> + <entry>hide()</entry> + + <entry>Hides the corresponding toolTip</entry> + </row> + + <row> + <entry>enable()</entry> + + <entry>Enables the corresponding toolTip</entry> + </row> + + <row> + <entry>disable()</entry> + + <entry>Disables the corresponding toolTip</entry> + </row> + + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>defaultContent</entry> + <entry>Defines the default content for toolTip. It is used only if mode = "ajax"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn6"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tool-tip</entry> + <entry>Defines styles for a wrapper &lt;span&gt; or &lt;div&gt; element of a toolTip</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolTip.jsf... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:toolTip&gt;</property> + </emphasis> usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tree.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tree.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_tree.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,950 @@ +<section role="NotInToc" id="rich_tree"> + <title> + &lt; + rich:tree + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component is designed for hierarchical data presentation and is applied for building +a tree structure with a drag-and-drop capability. </para> + <figure> + <title>Expanded <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> with child elements</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree_init.png"/> + </imageobject> + </mediaobject> + </figure> + <!--para>On the screenshot above, there is an example of the <property>tree</property> with an expanded node. This node + contains its own node with several leaves. Besides, it&apos;s possible to choose your own + icons for tree nodes.</para--> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + + <listitem> + <para>Highly customizable look-and-feel</para> + </listitem> + <listitem> + <para>Built-in drag and drop capability, than enable relocating tree nodes within the tree</para> + </listitem> + <listitem> + <para>Built-in Ajax processing</para> + </listitem> + <listitem> + <para>Possibility to define a visual representation by node type</para> + </listitem> + <listitem> + <para>Support of several root elements in a tree</para> + </listitem> + + + + + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> As it has been mentioned <link linkend="tree">above</link> the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component allows rendering any tree-like data model. </para> + <para> You can build your <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> using model (<code>org.richfaces.model.TreeNode</code> or + <code>javax.swing.tree.TreeNode</code>). In this case the + <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component interacts with data model via + <code>"TreeNode"</code> interface (<ulink url="&apidoc_framework;org/richfaces/model/TreeNode.html"> org.richfaces.model.TreeNode </ulink>) that is used for + the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> nodes representation. </para> + <para> Actually you can develop and use your own implementation of the + <code>"TreeNode"</code> interface or use a + default one, which is defined with a default class + <code>"TreeNodeImpl"</code> (<ulink url="&apidoc_framework;org/richfaces/model/TreeNodeImpl.html"> org.richfaces.model.TreeNodeImpl </ulink>). </para> + <para> The <emphasis> + <property>"value"</property> + </emphasis> attribute of the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component contains a nodes structure defined in a bean + property. </para> + <para> When the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component is being rendered it iterates over the model + nodes and renders them using one of its <property>immediate</property> + <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> children. Data property of the current model + <code>TreeNode</code> is exposed using <emphasis> + <property>"var"</property> + </emphasis> attribute, so if + <code>var="station"</code> you can refer + to that data using <code>#{station}</code> syntax. </para> + <para> In the following example the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> is built from a simple + <code>org.richfaces.model.TreeNode</code> model: </para> + <programlisting role="JAVA">... +private TreeNodeImpl&lt;String&gt; stationRoot = new TreeNodeImpl&lt;String&gt;(); +private TreeNodeImpl&lt;String&gt; stationNodes = new TreeNodeImpl&lt;String&gt;(); +private String[] kickRadioFeed = { "Hall &amp; Oates - Kiss On My List", + "David Bowie - Let's Dance", "Lyn Collins - Think (About It)", + "Kim Carnes - Bette Davis Eyes", + "KC &amp; the Sunshine Band - Give It Up" }; + ... +stationRoot.setData("KickRadio"); +stationNodes.addChild(0, stationRoot); +for (int i = 0; i &lt; kickRadioFeed.length; i++){ + TreeNodeImpl&lt;String&gt; child = new TreeNodeImpl&lt;String&gt;(); + child.setData(kickRadioFeed[i]); + stationRoot.addChild(i, child); +} +...</programlisting> + <para> As it is mentioned before you need to pass + <code>#{stations.stationNodes}</code> property to the <emphasis> + <property>"value"</property> + </emphasis> attribute and define the <emphasis> + <property>"var"</property> + </emphasis> attribute in order to refer to the data: </para> + <programlisting role="XML">... +&lt;rich:tree value="#{stations.stationNodes}" var="station"&gt; + &lt;rich:treeNode&gt; + &lt;h:outputText value="#{station}" /&gt; + &lt;/rich:treeNode&gt; +&lt;/rich:tree&gt; +...</programlisting> + <para> This is a result: </para> + <figure> + <title>A simple <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> from a + <code>org.richfaces.model.TreeNode</code> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/treeModel.png"/> + </imageobject> + </mediaobject> + </figure> + + <para> Implementation of the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component provides another way to build a tree. This + approach implies using a + <code>"XmlTreeDataBuilder"</code> class + (<ulink url="&apidoc;org/richfaces/component/xml/XmlTreeDataBuilder.html"> org.richfaces.component.xml.XmlTreeDataBuilder </ulink>) + that allows to transform XML into structures of objects containing + <code>"XmlNodeData"</code> (<ulink url="&apidoc_framework;org/richfaces/component/xml/XmlNodeData.html"> org.richfaces.component.xml.XmlNodeData </ulink>) + instances as data, which could be represented by the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component. </para> + <para> Let's try to build a simple <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> from a local XML file. In the following example a simple + XML file (stations.xml) is used as a radio station playlist: </para> + <programlisting role="XML">&lt;?xml version="1.0"?&gt; +&lt;station name="KickRadio"&gt; + &lt;feed date="today"&gt; + &lt;song time="07:00"&gt;Hall &amp; Oates - Kiss On My List&lt;/song&gt; + &lt;song time="07:03"&gt;David Bowie - Let's Dance&lt;/song&gt; + &lt;song time="07:06"&gt;Lyn Collins - Think (About It)&lt;/song&gt; + &lt;song time="07:10"&gt;Kim Carnes - Bette Davis Eyes&lt;/song&gt; + &lt;song time="07:15"&gt;KC &amp; the Sunshine Band - Give It Up&lt;/song&gt; + &lt;/feed&gt; +&lt;/station&gt;</programlisting> + <para> Now you need to create a bean that holds a model nodes: </para> + <programlisting role="JAVA">... +private TreeNode data; + ... +FacesContext context = FacesContext.getCurrentInstance(); +data = XmlTreeDataBuilder.build(new InputSource(getClass().getResourceAsStream("stations.xml"))); +...</programlisting> + <para> Finally you should set the <emphasis> + <property>"value"</property> + </emphasis> attribute to the <code>data</code> bean property and + define the <emphasis> + <property>"var"</property> + </emphasis> attribute in order to refer to the data of nodes: </para> + <programlisting role="XML">... +&lt;rich:tree id="treeXML" value="#{stations.data}" var="vardata"&gt; + &lt;rich:treeNode&gt; + &lt;h:outputText value="#{vardata.attributes['name']}" /&gt; + &lt;h:outputText value="#{vardata.attributes['date']}" /&gt; + &lt;h:outputText value="#{vardata.attributes['time']}" /&gt; + &lt;h:outputText value=" #{vardata.text}" /&gt; + &lt;/rich:treeNode&gt; +&lt;/rich:tree&gt; +...</programlisting> + <para>This is a result:</para> + <figure> + <title>A simple <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> from a local XML file</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/treeXML.png"/> + </imageobject> + </mediaobject> + </figure> + + <para>It's possible to define a visual representation of a node data + model (to define a node icon) and its behavior in correspondence with + the data contained in this node (with a value of the <emphasis> + <property>"var"</property> + </emphasis> attribute). The node behavior is defined by the components + nested into the <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> (e.g. links or buttons). For these purposes you should use <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute. For each tree node a value of <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute is evaluated and <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> with a value of <emphasis> + <property>"type"</property> + </emphasis> attribute equal to a value of <emphasis> + <property>"nodeFace"</property> + </emphasis> is used for node representation. See an example + below.</para> + + <para id="example"> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"&gt; + &lt;rich:treeNode type="artist" iconLeaf="/images/tree/singer.png" icon="/images/tree/singer.png"&gt; + &lt;h:outputText value="#{item.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNode type="album" iconLeaf="/images/tree/disc.png" icon="/images/tree/disc.png"&gt; + &lt;h:outputText value="#{item.title}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNode type="song" iconLeaf="/images/tree/song.png" icon="/images/tree/song.png"&gt; + &lt;h:outputText value="#{item.title}" /&gt; + &lt;/rich:treeNode&gt; + &lt;/rich:tree&gt; +&lt;/h:form&gt; +...</programlisting> + <para>This is a result: </para> + <figure> + <title>The <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>In the example above, when each node of data model is processed, data + contained in the <code>"data"</code> property of + <property>"TreeNode"</property> interface + is assigned to a request scope variable, which name is defined with <emphasis> + <property>"var"</property> + </emphasis> attribute. The value of the <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute is evaluated in correspondence with the data + assigned to the <emphasis> + <property>"var"</property> + </emphasis> attribute. The corresponding <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> component (with a value of <emphasis> + <property>"type"</property> + </emphasis> attribute equal to a value of <emphasis> + <property>"nodeFace"</property> + </emphasis>) is used for the node representation. For example, during + data model processing, an object with a name "Chris + Rea" was inserted in the <emphasis> + <property>"var"</property> + </emphasis> attribute. Then the value of <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute was evaluated as + <code>"artist"</code>. Thus, for the node + representation the <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> with <emphasis> + <property>"type"</property> + </emphasis> equal to "<code>artist</code>" was + used.</para> + <para>You can also assign an EL-expression as value of the <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute. See an example below: </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="JAVA"> +nodeFace="#{data.name != 'param-value' ? 'artist' : 'album'}" + </programlisting> + <para>There are some essential points in a <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute usage: you need to define notions for + <property>typeless</property> and a + <property>default</property> nodes. </para> + + <para>The <property>typeless node</property> is the first <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> component (from all children nodes nested to the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component) with not defined <emphasis> + <property>"type"</property> + </emphasis> attribute and defined <emphasis> + <property>"rendered"</property> + </emphasis> attribute. The <property>typeless node</property> is used + for representation when <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute is null.</para> + <para> + <property>Default node</property> has the following interior + presentation:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;h:outputText value="#{varAttributeName}"&gt; +...</programlisting> + <para> + <emphasis> + <property>"varAttributeName"</property> + </emphasis> is a value for <emphasis> + <property>"var"</property> + </emphasis> attribute. </para> + <para> + <property>Default node</property> is used in the following cases:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute is defined, but its value + isn't equal to any <emphasis> + <property>"type"</property> + </emphasis> attribute value from all children + nodes;</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"nodeFace"</property> + </emphasis> attribute is defined and its value is + equal to a value of some <emphasis> + <property>"type"</property> + </emphasis> attribute from all children nodes, but + the value of <emphasis> + <property>"rendered"</property> + </emphasis> attribute for this node is + <property>"false"</property>.</para> + </listitem> + </itemizedlist> + <para>There is also one thing that has to be remembered using <emphasis> + <property>"type"</property> + </emphasis> and <emphasis> + <property>"rendered"</property> + </emphasis> attributes: it's possible to define several + <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components with equal values of <emphasis> + <property>"type"</property> + </emphasis> attribute and different values of <emphasis> + <property>"rendered"</property> + </emphasis> attribute. It provides a possibility to define different + representation styles for the same node types. In the example with + artists and their albums (see <link linkend="example">above</link>) + it's possible to represent albums that are available for sale + and albums that are not available. Please study the example + below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"&gt; + ... + &lt;rich:treeNode type="album" iconLeaf="/images/tree/album.gif" icon="/images/tree/album.gif" + rendered="#{item.exist}"&gt; + &lt;h:outputText value="#{item.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNode type="album" iconLeaf="/images/tree/album_absent.gif" icon="/images/tree/album_absent.gif" + rendered="#{not item.exist}"&gt; + &lt;h:outputText value="#{item.name}" /&gt; + &lt;/rich:treeNode&gt; + ... + &lt;/rich:tree&gt; +&lt;/h:form&gt; +...</programlisting> + <para>This is a result of the code: </para> + <figure> + <title>The <emphasis> + <property>"type"</property> + </emphasis> and the <emphasis> + <property>"rendered"</property> + </emphasis> attributes usage</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree4.png"/> + </imageobject> + </mediaobject> + </figure> + <para>In the example the <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> components has equal values of the <emphasis> + <property>"type"</property> + </emphasis> attribute. Depending on value of the <emphasis> + <property>"rendered"</property> + </emphasis> attribute the corresponding <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> component is selected for node representation. If an album + is available for sale the value of the <emphasis> + <property>"rendered"</property> + </emphasis> for the first <emphasis> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> component is "true", for the second one + is "false". Thus, the first <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> is selected for node representation. </para> + <para>Tree node can be run in tree modes. Modes can be specified with <emphasis> + <property>"switchType"</property> + </emphasis> attribute for<emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component.</para> + <itemizedlist> + <listitem> + <para> + <code>Ajax</code> (default value) - Ajax submission is + used performing the functionality. Note, that for + collapse/expand operations an Ajax request is sent + to the server and it can cause a short + delay.</para> + </listitem> + <listitem> + <para> + <code>Server</code> - regular form of submission + request is used.</para> + </listitem> + <listitem> + <para> + <code>Client</code> – all operations are performed + totally on the client; no interaction with a + server is involved. Full page content is reloaded + after every action.</para> + </listitem> + </itemizedlist> + <para> The <emphasis> + <property>"icon"</property> + </emphasis>, <emphasis> + <property>"iconCollapsed"</property> + </emphasis>, <emphasis> + <property>"iconExpanded"</property> + </emphasis>, <emphasis> + <property>"iconLeaf"</property> + </emphasis> attributes set the icons' images for the + component. You can also define icons using facets with the same names. + If the facets are defined, the corresponding attributes are ignored + and facets' content is used as icons. By default the width of + a rendered facet area is 16px. </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:tree value="#{library.data}" var="item"&gt; + ... + &lt;f:facet name="icon"&gt; + &lt;h:graphicImage value="/images/tree/singer.png "/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="iconCollapsed"&gt; + &lt;h:graphicImage value="/images/tree/singer.png" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="iconExpanded"&gt; + &lt;h:graphicImage value="/images/tree/singer.png" /&gt; + &lt;/f:facet&gt; + &lt;f:facet name="iconLeaf"&gt; + &lt;h:graphicImage value="/images/tree/song.png" /&gt; + &lt;/f:facet&gt; + ... +&lt;/rich:tree&gt; +...</programlisting> + + <para> The <emphasis role="bold"> + <property>&lt;rich: tree&gt;</property> + </emphasis> component can be used together with <emphasis role="bold"> + <property>&lt;rich: treeNodeAdaptor&gt;</property> + </emphasis>. In this case there is no need to specify the attributes <emphasis> + <property>"value"</property> + </emphasis> and <emphasis> + <property>"var"</property> + </emphasis>. Besides, visual representation shouldn't be + defined right in the <property>tree</property>. In this case a + <emphasis role="bold"> + <property>&lt;rich: tree&gt;</property> + </emphasis> tag is applied mainly for defining common attributes such + as <emphasis> + <property>"ajaxSubmitSelection"</property> + </emphasis> etc. </para> + <para> Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find in the <link linkend="process"> "Decide what to + process" </link> guide section. </para> + <!--<tip> + <title>Tip:</title> + <para> + <emphasis> + <property>&quot;rowKeyConverter&quot;</property> + </emphasis> support for the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> is pending! </para> + </tip>--> + + <para>As it's mentioned before, the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component uses a data model to represent the tree-like + nodes structure on the page. To identify a particular node during a + client request, the model provides a set of unique keys for tree + nodes. The <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> can use strings as keys values + which may contain special characters not allowed by browsers, such as + the left angle bracket (&lt;), ampersand (&amp;), ant etc. Thus, to + have a possibility to use unallowed characters in the + <property>tree</property> nodes keys, the following converters + are provided: </para> + <itemizedlist> + <listitem> + <para> + <code>org.richfaces.TreeRowKeyConverter</code> that is + used for <property>"TreeNode"</property> based trees. + The key should be of a + <code>java.lang.String</code> type.</para> + </listitem> + <listitem> + <para> + <code>org.richfaces.TreeAdaptorRowKeyConverter</code> + that is used for adaptor-based trees (see + <link linkend="rich_treeNodesAdaptor"> + <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor&gt;</property> + </emphasis> + </link>, <link linkend="rich_recursiveTreeNodesAdaptor"> + <emphasis role="bold"> + <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> + </emphasis> + </link>). The key should be of a + <code>java.lang.String</code> type.</para> + </listitem> + <listitem> + <para> + <code>org.richfaces.TreeAdaptorIntegerRowKeyConverter</code> + which is provided for adaptor-based trees. The key + should be of a <code>java.lang.Integer</code> + type.</para> + </listitem> + </itemizedlist> + + <para>The converters can be extended in order to have a possibility for + implementing custom converters.</para> + <para>To apply a converter to the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component, you should define it as a value of the <emphasis> + <property>"rowKeyConverter"</property> + </emphasis> attribute.</para> + + <para>Have a look at the example of a tree which contains the RichFaces + components as its nodes and the components attributes as the nodes + child elements. As the components have unallowed characters (&lt; + and &gt;) in their names, the <code>org.richfaces.TreeRowKeyConverter</code> is used here.</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;rich:tree value="#{treeBean.data}" var="node" switchType="ajax" rowKeyConverter="org.richfaces.TreeRowKeyConverter"&gt; + &lt;rich:treeNode ajaxSingle="true"&gt; + &lt;h:outputText value="#{node}"/&gt; + &lt;/rich:treeNode&gt; +&lt;/rich:tree&gt; +...</programlisting> + + <para>In the example the tree uses the following data model:</para> + + <programlisting role="JAVA">... +String[ ] components = {"&lt; a4j:ajaxListener &gt;", "&lt; a4j:keepAlive &gt;", "&lt; a4j:actionparam &gt;" }; +String[ ][ ] attributes = {{"type"}, + {"ajaxOnly", "beanName"}, + {"actionListener", "assignTo", "binding", "converter", "id", "name", "noEscape", "value"}}; + +data = new TreeNodeImpl&lt;String&gt;(); + +for (int i = 0; i &lt; components.length; i++) { + TreeNode&lt;String&gt; child = new TreeNodeImpl&lt;String&gt;(); + child.setData(components[i]); + data.addChild(components[i], child); + + for (int j = 0; j &lt; attributes[i].length; j++) { + TreeNode&lt;String&gt; grandChild = new TreeNodeImpl&lt;String&gt;(); + grandChild.setData(attributes[i][j]); + child.addChild(attributes[i][j], grandChild); + } +} +...</programlisting> + + </section> + <section id="tsebro" role="updated"> + <title>Built-in Drag and Drop</title> + <para>Words "built-in" in this context mean, that <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component has its own attributes, that provide + <property>drag-and-drop</property> capability. These + attributes can be divided into two groups: those ones which provide + <property>drag</property> and those which provide + <property>drop</property> operations (see the tables below). </para> + + <table> + <title>Drag group</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Attribute Name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>dragValue</entry> + <entry>Element value drag passed into processing + after a Drop event</entry> + </row> + <row> + <entry>dragListener</entry> + <entry>A listener that processes a Drag + event</entry> + </row> + <row> + <entry>dragIndicator</entry> + <entry>Id of a component that is used as a drag + pointer during the drag operation</entry> + </row> + <row> + <entry>dragType</entry> + <entry>Defines a drag zone type that is used for + definition of a dragged element, which can be + accepted by a drop zone</entry> + </row> + </tbody> + </tgroup> + </table> + + <table> + <title>Drop group</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Attribute Name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>dropValue</entry> + <entry>Element value drop passed into processing + after Drop events </entry> + </row> + <row> + <entry>dropListener</entry> + <entry>A listener that processes a Drop event. + </entry> + </row> + <row> + <entry>acceptedTypes</entry> + <entry>Drag zone names are allowed to be processed + with a Drop zone</entry> + </row> + <row> + <entry>typeMapping</entry> + <entry>Drag zones names mapping on the + corresponding drop zone parameters</entry> + </row> + </tbody> + </tgroup> + </table> + + <para>Consider <property>drag-and-drop</property> inside a tree. All zones, + which are assumed to be dragged, must be marked. In terms of <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> these zones completely correspond to tree nodes. So, all + dragging nodes should be marked with <emphasis> + <property>"dragType"</property> + </emphasis> attribute. Then, to mark zone(-s), where the dragging node + could be dropped, pass the type of dragging node to the <emphasis> + <property>"acceptedTypes"</property> + </emphasis> attribute of the drop zone. It would be good to itemize, + that each tree node in the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component’s structure has its own + <emphasis>key</emphasis>. Depending on how the component is used, + these keys can be generated by the component itself or can be taken + from the component’s data model. Keys help to identify each node in a + tree; key is what exactly being passing from one node to another in + <property>drag-and-drop</property> operations. Finally, the + method binding, that will process <property>drag-and-drop</property> + operation, should be pointed via <emphasis> + <property>"dropListener"</property> + </emphasis> attribute of the <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis>. </para> + <para> Chapters "<link linkend="ch1">6.40 + &lt;dragIndicator&gt;</link>" and + "<link linkend="dndParam">6.39 + &lt;dndParam&gt;</link>" describes how to + apply visual element, that show some additional information (e.g. + dragging item name) while operating with + <property>drag-and-drop</property>. </para> + <para> Page code, that describes a tree with built in + <property>drag-and-drop</property> in the way it is + considered, is shown below. </para> + + <para> + <emphasis role="bold">Example:</emphasis> + </para> + + <programlisting role="XML">... +&lt;h:form&gt; + &lt;rich:tree style="width:300px" value="#{libraryAjaxTree.data}" nodeFace="#{item.type}" var="item" dragIndicator=":treeDragIndicator" dropListener="#{libraryAjaxTree.processDrop}"&gt; + &lt;rich:treeNode type="artist" icon="/images/tree/group.png" iconLeaf="/images/tree/group.png" acceptedTypes="album"&gt; + &lt;h:outputText value="#{item.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNode type="album" icon="/images/tree/cd.png" iconLeaf="/images/tree/cd.png" dragType="album" acceptedTypes="song"&gt; + &lt;h:outputText value="#{item.title}" /&gt; + &lt;rich:dndParam name="label" type="drag" value="Album: #{item.title}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNode type="song" icon="/images/tree/music.png" iconLeaf="/images/tree/music.png" dragType="song"&gt; + &lt;h:outputText value="#{item.title}" /&gt; + &lt;rich:dndParam name="label" type="drag" value="Song: #{item.title}" /&gt; + &lt;/rich:treeNode&gt; + &lt;/rich:tree&gt; +&lt;/h:form&gt; +...</programlisting> + + <para>This code renders following tree:</para> + + <figure> + <title>Drag-and-drop operations</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/tree5.png"/> + </imageobject> + </mediaobject> + </figure> + + </section> + <section> + <title>Events Handling</title> + <para>Listeners classes that process events on the server side are defined with + the help of:</para> + <itemizedlist> + <listitem> + <para> + <property>changeExpandListener</property> processes + expand/collapse event of a + <property>treeNode</property> + </para> + </listitem> + <listitem> + <para> + <property>dropListener</property> processes a Drop + event</para> + </listitem> + <listitem> + <para> + <property>dragListener</property> processes a Drag + event</para> + </listitem> + <listitem> + <para> + <property>nodeSelectListener</property> is called + during request sending on a node selecting event + (if request sending on this event is + defined)</para> + </listitem> + </itemizedlist> + + <para>Listener methods can be defined using the <link linkend="treeNodeKF">following attributes</link> or using nested tags.</para> + <para>Client event attributes are:</para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onexpand"</property> + </emphasis> is a script expression to invoke when + a node is expanded</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"oncollapse"</property> + </emphasis> is a script expression to invoke when + a node is collapsed</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"ondragexit"</property> + </emphasis> is a script expression to invoke when + an element passing out from a tree zone</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"ondragstart"</property> + </emphasis> is a script expression to invoke when + dragging starts</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"ondragend"</property> + </emphasis> is a script expression to invoke when + dragging ends (a drop event)</para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"ondragenter"</property> + </emphasis>is a script expression to invoke when a + dragged element appears on a tree</para> + </listitem> + </itemizedlist> + + <para>They can be used to add some JavaScript effects.</para> + + <para> Standart HTML event attributes like<emphasis> + <property>"onclick"</property> + </emphasis>, <emphasis> + <property>"onmousedown"</property> + </emphasis>, <emphasis> + <property>"onmouseover"</property> + </emphasis> etc. can be also used. Event handlers of a <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> component capture events occured on any + <property>tree</property> part. But event handlers of + <property>treeNode</property> capture events occured on + <property>treeNode</property> only, except for children + events. </para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/tree.html">Table of + &lt;rich:tree&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.Tree</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTree</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.Tree</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TreeRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TreeTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>icon</entry> + <entry>Redefines the icon for node. Related + attribute is "icon"</entry> + </row> + <row> + <entry>iconCollapsed</entry> + <entry>Redefines the icon for collapsed node. + Related attribute is + "iconCollapsed"</entry> + </row> + <row> + <entry>iconExpanded</entry> + <entry>Redefines the icon for expanded node. + Related attribute is + "iconExpanded"</entry> + </row> + <row> + <entry>iconLeaf</entry> + <entry>Redefines the icon for component leaves. + Related attribute is + "iconLeaf"</entry> + </row> + </tbody> + </tgroup> + </table> + <table id="tab_cn7"> + <title>Classes names that define a component appearance</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tree</entry> + <entry>Defines styles for a wrapper + &lt;div&gt; element of a tree</entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=... the component LiveDemo page</ulink> you can see the + example of <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis> usage and sources for the given example. </para> + <para>How to Expand/Collapse Tree Nodes from code, see in this<ulink url="http://labs.jboss.com/wiki/ExpandCollapseTreeNodes">wiki article</ulink>. </para> + </section> +</section> Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNode.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNode.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNode.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,305 @@ +<section role="NotInToc" id="rich_treeNode"> + <title> + &lt; + rich:treeNode + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.0.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> component is designed + for creating sets of tree elements within a <emphasis role="bold"> + <property>&lt;rich:tree&gt;</property> + </emphasis>component. + + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/treeNode_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section id="treeNodeKF"> + <title>Key Features</title> + + <itemizedlist> + <listitem> + <para>Possibility to assign different icon images for each node within a tree</para> + </listitem> + <listitem> + <para>Drag and Drop support</para> + </listitem> + <listitem> + <para>Look-and-Feel customization</para> + </listitem> + + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> The <emphasis> + <property>"icon"</property> + </emphasis>, <emphasis> + <property>"iconCollapsed"</property> + </emphasis>, <emphasis> + <property>"iconExpanded"</property> + </emphasis>, <emphasis> + <property>"iconLeaf"</property> + </emphasis> attributes define icons for the component. Also you can define icons using facets + with the same names. If the facets are defined, the corresponding attributes are ignored and + facets contents are used as icons. The width of a rendered facet area is 16px. </para> + <programlisting role="XML">... +&lt;rich:tree ...&gt; + ... + &lt;rich:treeNode ...&gt; + &lt;f:facet name="icon"&gt; + &lt;outputText value="A"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="iconCollapsed"&gt; + &lt;outputText value="B"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="iconExpanded"&gt; + &lt;outputText value="C"/&gt; + &lt;/f:facet&gt; + &lt;f:facet name="iconLeaf"&gt; + &lt;outputText value="D"/&gt; + &lt;/f:facet&gt; + &lt;/rich:treeNode&gt; + ... +&lt;/rich:tree&gt; +... +</programlisting> + <para>As it has been mentioned <link linkend="treeNode">above</link>, <emphasis role="bold"> + <property>&lt;rich:treeNode&gt;</property> + </emphasis> defines a template for nodes + rendering in a tree. Thus, during XML document rendering (a web.xml application) as a tree, + the following nodes output (passed via <code>var="data"</code> on a tree) happens:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:tree ... faceNode="simpleNode" ... value="#{bean.data}" var="data"&gt; + &lt;rich:treeNode type="simpleNode"&gt; + &lt;h:outputText value="context-param:"/&gt; + &lt;h:inputText value="#{data.name}"/&gt; + &lt;/rich:treeNode&gt; +&lt;/rich:tree&gt; +... +</programlisting> + <figure> + <title>Nodes output</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/treeNode2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Hence,<emphasis role="bold"> + <property>&lt;h:outputText /&gt;</property> + </emphasis> tag outputs the <code>"context-param"</code> string and + then the <emphasis role="bold"> + <property>&lt;h:inputText /&gt;</property> + </emphasis> outputs the <code>data.name</code> element of this node. + </para> + <para>Different nodes for rendering could be defined depending on some conditions on the tree + level. Each condition represents some rendering template. To get more information on various + <property>treeNodesAdaptorAdaptor</property> definition for nodes, <link linkend="tree">see the tree + component chapter</link>.</para> + <para>Switching between expanded/collapsed modes is also managed on the tree level and defined + in <link linkend="tree">the corresponding section</link>.</para> + <para>Default nodes of the tree level as well as the ones defined with the + <property>treeNodesAdaptorAdaptor</property> component could send Ajax requests when selected with the + mouse, it's managed with the <emphasis> + <property>"ajaxSubmitSelection"</property> + </emphasis> attribute (true/false).</para> + <para> + Information about the <emphasis> + <property>"process"</property> + </emphasis> attribute usage you can find <link linkend="process">" Decide what to process " </link> guide section. + </para> + </section> + <section> + <title>Built-in Drag and Drop</title> + <para>The main information on Drag and Drop operations is given in <link linkend="tree">the + corresponding paragraph</link> of the <property>tree</property> component chapter. + It's only necessary to mention that each node could also be a Drag element as well as + a Drop container, i.e. the container and the element have all attributes, listeners and ways + of behavior similar to the ones of the <emphasis role="bold"> + <property>&lt;rich:dragSupport &gt;</property> + </emphasis> and <emphasis role="bold"> + <property>&lt;rich:dropSupport &gt;</property> + </emphasis> components simultaneously.</para> + </section> + <section> + <title>Events Handling</title> + <para>Just as Drag and Drop operations it corresponds to the one described on <link linkend="tree">the tree component level</link> for a default Node.</para> + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/treeNode.html">Table of + &lt;rich:treeNode&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.TreeNode</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTreeNode</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.TreeNode</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.TreeNodeRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TreeNodeTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Facets</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Facet name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>icon</entry> + <entry>Redefines the icon for node. Related attribute is "icon"</entry> + </row> + <row> + <entry>iconCollapsed</entry> + <entry>Redefines the icon for collapsed node. Related attribute is "iconCollapsed"</entry> + </row> + <row> + <entry>iconExpanded</entry> + <entry>Redefines the icon for expanded node. Related attribute is "iconExpanded"</entry> + </row> + <row> + <entry>iconLeaf</entry> + <entry>Redefines the icon for component leaves. Related attribute is "iconLeaf"</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define a node element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-tree-node</entry> + <entry>Defines styles for a tree node</entry> + </row> + + <row> + <entry>rich-tree-node-handle</entry> + <entry>Defines styles for a tree node handle</entry> + </row> + + <row> + <entry>rich-tree-node-handleicon</entry> + <entry>Defines styles for a tree node handle icon</entry> + </row> + + <row> + <entry>rich-tree-node-children</entry> + <entry>Defines styles for all tree node subnodes</entry> + </row> + <row> + <entry>rich-tree-node-text</entry> + <entry>Defines styles for a tree node text</entry> + </row> + <row> + <entry>rich-tree-node-icon</entry> + <entry>Defines styles for a tree node icon</entry> + </row> + <row> + <entry>rich-tree-h-ic-img</entry> + <entry>Defines styles for an image of a tree node</entry> + </row> + <row> + <entry>rich-tree-node-icon-leaf</entry> + <entry>Defines styles for a tree node icon leaf</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title>Classes names that define states for a node element</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + + <row> + <entry>rich-tree-node-selected</entry> + <entry>Defines styles for a selected tree node </entry> + </row> + <row> + <entry>rich-tree-node-highlighted</entry> + <entry>Defines styles for a highlighted tree node </entry> + </row> + + <row> + <entry>rich-tree-node-handleicon-collapsed</entry> + <entry>Defines styles for a collapsed tree node handleicon </entry> + </row> + <row> + <entry>rich-tree-node-handleicon-expanded</entry> + <entry>Defines styles for a expanded tree node handleicon</entry> + </row> + + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para>How to Expand/Collapse Tree Nodes from code see in this<ulink url="http://labs.jboss.com/wiki/ExpandCollapsetreeNodesAdaptor"... article</ulink>. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNodesAdaptor.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNodesAdaptor.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_treeNodesAdaptor.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,146 @@ +<section role="NotInToc" id="rich_treeNodesAdaptor"> + <title> + &lt; + rich:treeNodesAdaptor + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor&gt;</property> + </emphasis> provides the possibility to define data models + and create representations for them. + </para> + <figure> + <title>Expanded tree with <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor&gt;</property> + </emphasis> + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/treeNodesAdaptor_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Allows to define combined data models</para> + </listitem> + <listitem> + <para>Possibility to define nodes for processing via attributes</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + <para> + The <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor&gt;</property> + </emphasis> component + has a <emphasis> + <property>"nodes"</property> + </emphasis> attribute that defines a collection of elements to iterate through. + </para> + <para> + Collections are allowed to include lists, arrays, maps, XML NodeList and NamedNodeMap either as a single object. + </para> + <para> + The <emphasis> + <property>"var"</property> + </emphasis> attribute is used to access to the current collection element. + </para> + <para> + The <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor&gt;</property> + </emphasis> component can be nested without any limitations. + See the following example. + </para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:tree adviseNodeOpened="#{treeModelBean.adviseNodeOpened}" switchType="client"&gt; + &lt;rich:treeNodesAdaptor id="project" nodes="#{loaderBean.projects}" var="project"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{project.click}" value="Project: #{project.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNodesAdaptor id="srcDir" var="srcDir" nodes="#{project.srcDirs}"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{srcDir.click}" value="Source directory: #{srcDir.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNodesAdaptor id="pkg" var="pkg" nodes="#{srcDir.packages}"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{pkg.click}" value="Package: #{pkg.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;rich:treeNodesAdaptor id="class" var="class" nodes="#{pkg.classes}"&gt; + &lt;rich:treeNode&gt; + &lt;h:commandLink action="#{class.click}" value="Class: #{class.name}" /&gt; + &lt;/rich:treeNode&gt; + &lt;/rich:treeNodesAdaptor&gt; + &lt;/rich:treeNodesAdaptor&gt; + &lt;/rich:treeNodesAdaptor&gt; + &lt;/rich:treeNodesAdaptor&gt; +&lt;/rich:tree&gt; +...</programlisting> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/treeNodesAdaptor.html">Table of + &lt;rich:treeNodesAdaptor&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.TreeNodesAdaptor</entry> + </row> + <row> + <entry>component-class</entry> + <entry>org.richfaces.component.html.HtmlTreeNodesAdaptor</entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.TreeNodesAdaptor</entry> + </row> + <!-- + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.EffectRenderer</entry> + </row> + --> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.TreeNodesAdaptorTag</entry> + </row> + </tbody> + </tgroup> + </table> + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/treeNodesAd... the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"> + <property>&lt;rich:treeNodesAdaptor &gt;</property> + </emphasis> + usage and sources for the given example. </para> + </section> +</section> \ No newline at end of file Added: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_virtualEarth.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_virtualEarth.xml (rev 0) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/rich_virtualEarth.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -0,0 +1,266 @@ +<section role="NotInToc" id="rich_virtualEarth"> + <title> + &lt; + rich:virtualEarth + &gt; + <emphasis role="since"> + <superscript> available since <emphasis role="version">3.1.0</emphasis> + </superscript> + </emphasis> + </title> + <section> + <title>Description</title> + <para>The component presents the Microsoft <property>Virtual Earth map</property> in the JSF applications.</para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis> component</title> + <mediaobject> + <imageobject> + <imagedata fileref="images/virtualEarth_init.png"/> + </imageobject> + </mediaobject> + </figure> + </section> + <section> + <title>Key Features</title> + <itemizedlist> + <listitem> + <para>Presents the Microsoft <property>Virtual Earth map</property> functionality</para> + </listitem> + <listitem> + <para>Highly customizable via attributes</para> + </listitem> + <listitem> + <para>No developers JavaScript writing is needed to use it on a pages</para> + </listitem> + </itemizedlist> + </section> + <section> + <title>Details of Usage</title> + + <para> + Here are the main settings of initial rendering performed + with a component + <property>map</property> + that are accessible with the following attributes: + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"zoom"</property> + </emphasis> + defines an approximation size (boundary values 1-18) + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"lat"</property> + </emphasis> + specifies an initial latitude coordinate in degrees, + as a number between -90 and +90 + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"lng"</property> + </emphasis> + specifies an initial longitude coordinate in + degrees, as a number between -180 and +180 + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"dashboardSize"</property> + </emphasis> + specifies a type of a rendered map (Normal, Small, + Tiny) + </para> + </listitem> + </itemizedlist> + <para> + For example, the city of Paris is shown after rendering with + the following initial settings: + <code>lat = "48.833"</code> + , + <code>lng = "2.40"</code> + and + <code>zoom = "11"</code> + . + </para> + <figure> + <title> + <emphasis role="bold"> + <property>&lt;rich:virtualEarth&gt;</property> + </emphasis> + initial rendering + </title> + <mediaobject> + <imageobject> + <imagedata fileref="images/virtualEarth2.png"/> + </imageobject> + </mediaobject> + </figure> + <para>Code for this example is placed below:</para> + <para> + <emphasis role="bold">Example:</emphasis> + </para> + <programlisting role="XML">... +&lt;rich:virtualEarth style="width:800px;" id="vm" lat="48.833" lng="2.40" + dashboardSize="Normal" zoom="11" mapStyle="Hybrid" var="map" /&gt; +... +</programlisting> + + <para> + To set all these parameters and perform some activity (Zoom + In/Out etc.) is possible with your JavaScript, i.e. declare + a name of an object on a + <property>map</property> + in the + <emphasis> + <property>"var"</property> + </emphasis> + attribute and then call the object directly with API + <emphasis> + <property>Microsoft Virtual Earth map</property> + . + </emphasis> + </para> + <para> + For example, to approximate a map for + <code>var = "map"</code> + declared inside the component, call + <code>map.ZoomIn()</code> + on an event. + </para> + <para> + Moreover, to add e.g. some JavaScript effects, events + defined on it are used. + </para> + <itemizedlist> + <listitem> + <para> + <emphasis> + <property>"onmouseover"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onclick"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para> + <emphasis> + <property>"onmouseout"</property> + </emphasis> + </para> + </listitem> + <listitem> + <para>etc.</para> + </listitem> + </itemizedlist> + + <note> + <para> + Virtual Earth does not support XHTML format of the page. + Thus, if you use Facelets and JSF 1.2, do not forget to + put the following tags somewhere on the page: + </para> + <programlisting role="XML">... +&lt;f:view contentType="text/html"&gt;...&lt;/f:view&gt; +... +</programlisting> + </note> + + </section> + <section> + <title>Reference Data</title> + <para> + <ulink url="&tlddoc;rich/virtualEarth.html">Table of + &lt;rich:virtualEarth&gt; + attributes</ulink>. + </para> + <table> + <title>Component Identification Parameters</title> + <tgroup cols="2"> + <thead> + <row> + <entry>Name</entry> + <entry>Value</entry> + </row> + </thead> + <tbody> + <row> + <entry>component-type</entry> + <entry>org.richfaces.VirtualEarth</entry> + </row> + <row> + <entry>component-class</entry> + <entry> + org.richfaces.component.html.HtmlVirtualEarth + </entry> + </row> + <row> + <entry>component-family</entry> + <entry>org.richfaces.VirtualEarth</entry> + </row> + <row> + <entry>renderer-type</entry> + <entry>org.richfaces.VirtualEarthRenderer</entry> + </row> + <row> + <entry>tag-class</entry> + <entry>org.richfaces.taglib.VirtualEarthTag</entry> + </row> + </tbody> + </tgroup> + </table> + <table> + <title> + Classes names that define a component appearance + </title> + <tgroup cols="2"> + <thead> + <row> + <entry>Class name</entry> + <entry>Description</entry> + </row> + </thead> + <tbody> + <row> + <entry>rich-virtualEarth</entry> + <entry> + Defines styles for a wrapper &lt;div&gt; + element of a component + </entry> + </row> + </tbody> + </tgroup> + </table> + You can find all necessary information about style classes redefinition in + <link linkend="customstyles">Definition of Custom Style Classes</link> + section. + </section> + <section> + <title>Relevant Resources Links</title> + <para> + <ulink url="http://msdn2.microsoft.com/en-us/library/bb429619.aspx"> + Here + </ulink> + you can found additional information about Microsoft + <property>Virtual Earth map</property>. + </para> + <para> + Some additional information about usage of component can be found + <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/virtualEart... its LiveDemo page</ulink>.</para> + </section> +</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,40 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:scrollableDataTable</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> component is used for the table-like component creation. - The component just adds the set of additional features described below in comparison with the standard table. - </para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/scrollableDataTable_init.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Variable content of the table cells</para></listitem> - <listitem><para>Dynamically fetching the rows from the server when the table is scrolled up and down</para></listitem> - <listitem><para>Resizing columns by mouse dragging the column bar</para></listitem> - <listitem><para>Sorting column by clicking the header</para></listitem> - <listitem><para>Fixed one or more left columns when table is scrolled horizontally</para></listitem> - <listitem><para>One and multi-selection rows mode</para></listitem> - <listitem><para>Built-it drag-n-drop support</para></listitem> - <listitem><para><link linkend="sort">Sorting column values</link></para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/scrollableDataTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,798 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> - -<section> - <sectioninfo> - <keywordset> - <keyword>rich:scrollableDataTable</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.component.ScrollableDataTable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlScrollableDataTable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.ScrollableDataTable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.ScrollableDataTableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ScrollableDataTableTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:scrollableDataTable value="#{dataTableScrollerBean.allCars}" var="category"> - <!--Set of columns and header/footer facets--> -</rich:scrollableDataTable> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlScrollableDataTable; -... -HtmlScrollableDataTable myScrollableDataTable = new HtmlScrollableDataTable(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> The component represents on a page as a scrollable table with some fixed - (non-scrollable) rows ( with header and footer) and columns. Like - other tables <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> also has optional footer and header that could be - implemented using the corresponding facets. Columns of the table are - optionally resizable. Resizing is available using "drag and drop" of - the column vertical borders. <!--There is possibility to expand or - collapse the columns through JS API on the client side. -->You can define - the number of the fixed columns from the left side using attribute <emphasis> - <property>&quot;frozenColCount&quot;</property> - </emphasis> that is not scrolled via horizontal scroll. </para> - <para> There is possibility to increase component performance using attribute <emphasis> - <property>&quot;hideWhenScrolling&quot;</property> - </emphasis>. If attribute value is &quot;true&quot; data is - hidden during scrolling. </para> - - <para> It&apos;s possible to select the whole row with onclick on the row or - some set of rows. Selection is optional and availability of such - feature is defined on the component. There are two ways to select a - few rows: </para> <itemizedlist> - <listitem> - <para>Just clicking the columns one by one.</para> - </listitem> - <listitem> - <para>Clicking some row with the SHIFT button - hold. In this case all the rows starting - from last selected up to clicked should - be selected.</para> - </listitem> - </itemizedlist> - - - <!--para> The columns provides the possibility of expanding/collapsing on the - client side through the next JS API:</para> <itemizedlist> - <listitem> - <para><code>collapse(columnId)</code> - Performs - the collapse action for the column with - the corresponding id</para> - </listitem> - </itemizedlist--> - <para> It&apos;s possible to sort the table content after - clicks on the header. The feature is optional (to disable it, use attribute sortable on rich:column ). Every column should be - pointed to the comparator method that is used for sorting the table. - In case the <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> is already sorted by some column and the header of this - column has been clicked again - the sorting is reversed. </para> - <para>After sorting selection that was made before is reset</para> - - <para> - <emphasis role="bold">The typical variant of using:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:scrollableDataTable value="#{modelBuilder.model}" var="issues" - frozenColCount="1" - first="0" - rows="40" - width="300px" - height="396px"> - <rich:column width="100px"> - <f:facet name="header" > - <h:outputText value="State"/> - </f:facet> - <h:outputText value="#{issues.cell1}"/> - <f:facet name="footer"> - <h:outputText value="State"/> - </f:facet> - </rich:column> - <!--Set of columns and header/footer facets--> -</rich:scrollableDataTable> -... -]]></programlisting> - - <para>The <emphasis> - <property>&quot;selection&quot;</property> - </emphasis> attribute allows to get the row data when using - <property>one and multi-selection rows mode</property>.</para> - <para>This attribute is a reference to object to the instance of - - <ulink url="&apidoc_framework;/org/richfaces/model/selection/Selection.html"> <code>org.richfaces.model.selection.Selection</code></ulink>. - interface - - - interface, containing current collection of objects selected by you.</para> - <para>In the following example when you submit the form, current collection of - the selected objects is placed in the object&apos;s property. Then - on complete action the <emphasis role="bold"> - <property>&lt;rich:modalPanel&gt;</property> - </emphasis> with selected data is shown.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:spacer height="30" /> - <rich:scrollableDataTable rowKeyVar="rkv" frozenColCount="1" height="200px" - width="300px" id="carList" rows="40" columnClasses="col" - value="#{dataTableScrollerBean.allCars}" var="category" sortMode="single" - selection="#{dataTableScrollerBean.selection}"> - <rich:column id="make"> - <f:facet name="header"><h:outputText styleClass="headerText" value="Make" /></f:facet> - <h:outputText value="#{category.make}" /> - </rich:column> - <rich:column id="model"> - <f:facet name="header"><h:outputText styleClass="headerText" value="Model" /></f:facet> - <h:outputText value="#{category.model}" /> - </rich:column> - <rich:column id="price"> - <f:facet name="header"><h:outputText styleClass="headerText" value="Price" /></f:facet> - <h:outputText value="#{category.price}" /> - </rich:column> - </rich:scrollableDataTable> - <rich:spacer height="20px"/> - <a4j:commandButton value="Show Current Selection" reRender="table" - action="#{dataTableScrollerBean.takeSelection}" - oncomplete="javascript:Richfaces.showModalPanel('panel');"/> -</h:form> -<rich:modalPanel id="panel" autosized="true"> - <f:facet name="header"> - <h:outputText value="Selected Rows"/> - </f:facet> - <f:facet name="controls"> - <span style="cursor:pointer" onclick="javascript:Richfaces.hideModalPanel('panel')">X</span> - </f:facet> - <rich:dataTable value="#{dataTableScrollerBean.selectedCars}" var="sel" id="table"> - <rich:column> - <f:facet name="header"><h:outputText value="Make" /></f:facet> - <h:outputText value="#{sel.make}" /> - </rich:column> - <rich:column id="model"> - <f:facet name="header"><h:outputText value="Model" /></f:facet> - <h:outputText value="#{sel.model}" /> - </rich:column> - <rich:column id="price"> - <f:facet name="header"><h:outputText value="Price" /></f:facet> - <h:outputText value="#{sel.price}" /> - </rich:column> - </rich:dataTable> -</rich:modalPanel> -...]]></programlisting> - <para>This is a result:</para> - <figure> - <title>The <emphasis> - <property>&quot;selection&quot;</property> - </emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/scrollableDataTable2.png" - /> - </imageobject> - </mediaobject> - </figure> - <para><ulink - url="http://wiki.jboss.org/wiki/RichFacesCookbook/ScrollableDataTabl... - >On RichFaces LiveDemo page </ulink> you can find fuller example of use of this - attribute with example bean.</para> - <para> The <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> component has the following extra attributes for event - processing on the client:</para> <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;onselectionchange&quot;</property> - </emphasis> - </para> - </listitem> - <!-- <listitem> - <para> - <emphasis> - <property>&quot;oncomplete&quot;</property> - </emphasis> - </para> - </listitem> --> - <listitem> - <para> - <emphasis> - <property>&quot;onRowClick&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onRowDblClick&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onRowMouseUp&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onRowMouseDown&quot;</property> - </emphasis> - </para> - </listitem> - </itemizedlist> - - <para>From version 3.3.1 it becomes possible to switch selection mode with selectionMode attribute</para> - - <para>Information about sorting and filtering you can find in RichFaces Developer guide section about<link linkend="sort" - >sorting</link>.</para> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find in the - <link linkend="process"> &quot;Decide what to process&quot; </link> guide section. </para> - <note> - <title>Note:</title> - <para> - If you want to use specific features such as pagination on database level you should pass to the - <emphasis><property>&quot;value&quot;</property></emphasis> of the - <emphasis role="bold"><property>&lt;rich:scrollableDataTable&gt;</property></emphasis> component - an object which class extends <code>org.richfaces.model.ScrollableTableDataModel</code>. - </para> - </note> - </section> - - - <!--section> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>collapse(columnId)</entry> - - <entry>Performs a collapse action for - column with corresponding - Id</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section--> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Defines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Defines the footer content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters for all table</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-width</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters for header rows and cells</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-bottom-width</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>tableBorderWidth</entry> - <entry>border-right-width</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-right-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters for footer rows and cells</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableSubfooterBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - - <row> - <entry>tableBorderColor</entry> - <entry>border-right-color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters for column cells </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tableBorderColor</entry> - <entry>border-right-color</entry> - </row> - <row> - <entry>tableBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters for active rows</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters for selected rows</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component - elements.</para> - - <figure> - <title>Classes names</title> - - <mediaobject> - <imageobject> - <imagedata - fileref="images/scrollableDataTable_cn.png" - scale="90"/> - </imageobject> - </mediaobject> - </figure> - - <table id="scrdattableC"> - <title>Classes names that define a component appearance</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-sdt</entry> - - <entry>Defines styles for a component - appearance</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define footer and header elements</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>rich-sdt-header-cell</entry> - - <entry>Defines styles for header - cells</entry> - </row> - - <row> - <entry>rich-sdt-header-row</entry> - - <entry>Defines styles for a header - raw</entry> - </row> - - <row> - <entry>rich-sdt-column-cell</entry> - - <entry>Defines styles for column - cells</entry> - </row> - <row> - <entry>rich-sdt-footer-cell</entry> - - <entry>Defines styles for footer - cells</entry> - </row> - - <row> - <entry>rich-sdt-footer-row</entry> - - <entry>Defines styles for a footer - raw</entry> - </row> - <row> - <entry>rich-sdt-hsep</entry> - - <entry>Defines styles for header - separators</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define different states</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>rich-sdt-row-active</entry> - - <entry>Defines styles for an active - row</entry> - </row> - - <row> - <entry>rich-sdt-row-selected</entry> - - <entry>Defines styles for a selected - row</entry> - </row> - - <row> - <entry>rich-sdt-column-sort-up</entry> - - <entry>Defines styles for ascending - sorted column</entry> - </row> - - <row> - <entry>rich-sdt-column-sort-down</entry> - - <entry>Defines styles for descending - sorted column</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="scrdattableC"> above</link>) and define - necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-sdt-header-cell{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/scrollableDataTable_pc.png" - /> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for header cell was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> - <property>styleClass</property> attributes. An example is placed - below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color:#ffead9; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;selectedClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:scrollableDataTable ... selectedClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata - fileref="images/scrollableDataTable_oc.png" - /> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color for selected - item was changed.</para> - - - - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/scrollableD... - >On the component LiveDemo page</ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:scrollableDataTable&gt;</property> - </emphasis> usage. </para> - <para>Cookbook article <ulink url="http://www.jboss.org/community/docs/DOC-11857"> - Scrollable dataTable Selection Usage - </ulink> provides a simple example of how you can use the "selection" attribute in order to get row selection in rich:scrollableDataTable. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,30 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:separator</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A horizontal line to use as a <property>separator</property> in a layout. The line type - can be customized with the <code>&quot;lineType&quot;</code> parameter.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:separator&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/separator_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel </para></listitem> - <listitem><para>Leveraging layout elements creation</para></listitem> - </itemizedlist> -</section> -</section> - - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/separator.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,212 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <sectioninfo> - <keywordset> - <keyword>horizontal line</keyword> - <keyword>rich:separator</keyword> - <keyword>HtmlSeparator</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.separator</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSeparator</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.separator</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SeparatorRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SeparatorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:separator/> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSeparator; -... -HtmlSeparator mySeparator = new HtmlSeparator(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para><emphasis role="bold"><property>&lt;rich:separator&gt;</property></emphasis> is a simple layout component, - which represents a <property>separator</property> stylized as a skin. - Thus, the main attributes that define its style are <emphasis> <property>&quot;style&quot;</property> - </emphasis> and <emphasis><property>&quot;styleClass&quot;.</property> - </emphasis> In addition there are <emphasis><property>&quot;width&quot;</property></emphasis> and <emphasis><property>&quot;height&quot;</property> - </emphasis> attributes that should be specified in pixels. - On the HTML page the component is transposed into HTML <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> tag.</para> - - <para>The line type can be customized with the <code>&quot;lineType&quot;</code> parameter. For example, different line types are shown after rendering with the - following initial settings <code>lineType=&quot;double&quot;</code>and <code>lineType=&quot;solid&quot;</code>. - </para> - <figure> - <title>Different line types of <emphasis role="bold"><property>&lt;rich:separator&gt;</property></emphasis></title> - <mediaobject> - <imageobject> - <imagedata fileref="images/separator2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>Except style attributes, there are also event definition attributes:</para> - <itemizedlist> - <listitem><para> <emphasis><property>&quot;onmouseover&quot;</property></emphasis> </para></listitem> - <listitem><para> <emphasis><property>&quot;onclick&quot;</property></emphasis> </para></listitem> - <listitem><para> <emphasis><property>&quot;onmouseout&quot;</property></emphasis> </para></listitem> - <listitem><para> etc. </para></listitem> - </itemizedlist> - - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis></para> - - <para>To redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:separator&gt;</property> - </emphasis> components at once, you should add to your style sheets the <emphasis> - <property>style class</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:separator&gt;</property> - </emphasis> component.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <table id="sepC"> - <title>Classes names that define a component appearance</title> - - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - <row> - <entry>rich-separator</entry> - - <entry>Defines styles for a component appearance</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:separator&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="sepC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-separator{ - background-color:#ff7700; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/separator_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example background color for separator was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:separator&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:separator&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color:#ffead9; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:separator&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:separator ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and styleClass attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/separator_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,background color for separator was changed.</para> - - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/separator.j... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:separator&gt;</property></emphasis> usage and sources for the given example. </para> - </section> - -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:simpleTogglePanel</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A collapsible panel, which content shows/hides after activating a header control.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/simpleTogglePanel_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel </para></listitem> - <listitem><para>Support for any content inside</para></listitem> - <listitem><para>Collapsing expanding content</para></listitem> - <listitem><para>Three modes of collapsing/expanding</para> - <itemizedlist> - <listitem><para><code>Server</code></para></listitem> - <listitem><para><code>Client</code></para></listitem> - <listitem><para><code>Ajax</code></para></listitem> - </itemizedlist> - </listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/simpleTogglePanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,434 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>panel</keyword> - <keyword>rich:simpleTogglePanel</keyword> - <keyword>HtmlSimpleTogglePanel</keyword> - <keyword>switch</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.SimpleTogglePanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSimpleTogglePanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SimpleTogglePanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SimpleTogglePanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SimpleTogglePanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:simpleTogglePanel> - ... -</rich:simpleTogglePanel> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSimpleTogglePanel; -... -HtmlSimpleTogglePanel myPanel = new HtmlSimpleTogglePanel(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The component is a simplified version of <property>toggle panel</property> that initially - has a defined layout as a panel with a header playing a role of a mode switching control. On a - component header element, it&apos;s possible to define a label using an attribute with the - same name.</para> - - <para>Switching mode could be defined with the <emphasis> - <property>&quot;switchType&quot;</property> - </emphasis> attribute with three possible parameters.</para> - <itemizedlist> - <listitem><para> <code>Server</code> (DEFAULT)</para><para>The common submission is performed around - <property>simpleTogglePanel</property> and a page is completely rendered on a called - panel. Only one at a time panel is uploaded onto the client side.</para> - </listitem> - <listitem><para><code> Ajax</code></para><para>AJAX form submission is performed around the panel, content of the called - panel is uploaded on Ajax request and additionally specified elements in the <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute are rendered. Only one at a time panel is uploaded on the client - side.</para> - </listitem> - <listitem><para><code>Client</code></para> <para> All panels are uploaded on the client side. Switching from the active - to the hidden panel is performed with client JavaScript.</para> - </listitem> - </itemizedlist> - <para>The <emphasis role="bold" - ><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis>component also has an <emphasis> - <property>&quot;opened&quot;</property> - </emphasis> attribute responsible for keeping a panel state. It gives an - opportunity to manage state of the component from a model. - If the value of this attribute is&quot;true&quot; the component is expanded. - </para> - - <!--SIMPLE EXAMPLE NEEDED --> - - <itemizedlist> - <listitem><para> <emphasis><property>&quot;onmouseover &quot;</property></emphasis></para></listitem> - <listitem><para> <emphasis><property>&quot;onclick &quot;</property></emphasis></para></listitem> - <listitem><para> <emphasis><property>&quot;onmouseout &quot;</property></emphasis></para></listitem> - <listitem><para> etc. </para></listitem> - </itemizedlist> - <figure> - <title><emphasis role="bold"><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis> states</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/simpleTogglePanel2.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - <para> - With help of - <emphasis> - <property> - &quot;openMarker&quot; - </property> - </emphasis> - and - <emphasis> - <property> - &quot;closeMarker&quot; - </property> - </emphasis> facets you can set toggle icon for - <property> - simpleTogglePanel - </property>. - </para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">&quot; Decide what to process &quot; </link> guide section. - </para> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>openMarker</entry> - <entry>Redefines the icon for expanding the panel</entry> - </row> - <row> - <entry>closeMarker</entry> - <entry>Redefines the icon for collapsing the panel</entry> - </row> - - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:simpleTooglePanel&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:simpleTooglePanel&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters for a whole component</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters for a header element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>headerSizeFont</entry> - <entry>font-size </entry> - </row> - <row> - <entry>headTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerWeightFont</entry> - <entry>font-weight</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters for a body element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>panelTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/simpleTogglePanel_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table id="simpTogPanC"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-stglpanel</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a component</entry> - </row> - <row> - <entry>rich-stglpanel-header</entry> - <entry>Defines styles for header element of a component</entry> - </row> - <row> - <entry>rich-stglpnl-marker</entry> - <entry>Defines styles for a wrapper &lt;div&gt; element of a marker</entry> - </row> - - <row> - <entry>rich-stglpanel-body</entry> - <entry>Defines styles for a component content</entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Style component classes</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Class description</entry> - </row> - </thead> - <tbody> - <row> - <entry>styleClass</entry> - <entry>The class defines panel common style. It&apos;s used in the outside <emphasis - role="bold"> - <property>&lt;div&gt;</property> - </emphasis>element</entry> - </row> - <row> - <entry>bodyClass</entry> - <entry>applicable to panels body elements</entry> - </row> - <row> - <entry>headerClass</entry> - <entry>applicable to header elements</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:simpleTogglePanel&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="simpTogPanC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-stglpanel-header{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/simpleTogglePanel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for header was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color:#ffead9; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;bodyClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:simpleTogglePanel ... bodyClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/simpleTogglePanel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,background color for body was changed.</para> - - - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/simpleToggl... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:simpleTogglePanel&gt;</property></emphasis> usage and sources for the given example. - </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:spacer</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para> A <property>spacer</property> that is used in layout and rendered as a transparent image.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:spacer&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/spacer_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Easily used as a transparent layout <property>spacer</property></para></listitem> - <listitem><para>Horizontal or vertical spacing is managed by an attribute</para></listitem> - <listitem><para>Easily customizable sizes parameters</para></listitem> - </itemizedlist> -</section> -</section> - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/spacer.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,111 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>transparent image</keyword> - <keyword>rich:spacer</keyword> - <keyword>HtmlSpacer</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.spacer</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSpacer</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.spacer</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SpacerRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SpacerTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax::</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:spacer/> -...]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSpacer; -... -HtmlSpacer mySpacer = new HtmlSpacer(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para><emphasis role="bold"> - <property>&lt;rich:spacer&gt;</property> - </emphasis> is a simple layout component which represents a transparent - <property>spacer</property>. Thus, the main attributes that define its style are <emphasis> - <property>&quot;style&quot;</property> - </emphasis> and <emphasis><property>&quot;styleClass&quot;</property>.</emphasis></para> - <para>In addition, the attributes are responsible for the component size: <emphasis> - <property>&quot;width&quot;</property> - </emphasis> and <emphasis><property>&quot;height&quot;</property>.</emphasis></para> - <para>Moreover, to add e.g. some JavaScript effects, events defined on it are used.</para> - <itemizedlist> - <listitem><para> <emphasis><property>&quot;onmouseover &quot;</property></emphasis></para></listitem> - <listitem><para> <emphasis><property>&quot;onclick &quot;</property></emphasis></para></listitem> - <listitem><para> <emphasis><property>&quot;onmouseout &quot;</property></emphasis></para></listitem> - <listitem><para> etc. </para></listitem> - </itemizedlist> - - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>On the component generation, the framework presents a default rich-spacer class in <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> of a generated component, i.e. in order to redefine appearance of all - <property>spacers</property> at once, it&apos;s necessary to redefine this class in your - own CSS (replacing in the result properties defined in a skin with your own).</para> - <para>To define appearance of the particular <property>spacer</property>, it&apos;s possible - to write your own CSS classes and properties in the component style attributes - (<emphasis><property>&quot;style&quot;</property>, </emphasis> - <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis>) modifying component property.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/spacer.jsf?... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:spacer&gt;</property></emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,14 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<root> - <section> - <sectioninfo> - <keywordset> - <keyword>a4j:status</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> component generates elements for displaying of the current Ajax requests status. - There are two status modes: Ajax request is in process or finished.</para> - </section> -</root> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/status.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,170 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<chapter> - <chapterinfo> - <keywordset> - <keyword>a4j:status</keyword> - </keywordset> - </chapterinfo> - <para><table frame="all"> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Status</entry> - </row> - <row> - <entry>component-family</entry> - <entry>javax.faces.Panel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxStatus</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxStatusRenderer</entry> - </row> - </tbody> - </tgroup> - </table></para> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>There are two ways to define elements indicating a request status :</para> - <itemizedlist> - <listitem><para> - With <emphasis > - <property>&quot;StartText&quot;/&quot;StopText&quot;</property> - </emphasis> atributes:</para> - <programlisting role="XML"><![CDATA[<a4j:status startText="Progress" stopText="Done" for="stat1">]]></programlisting> - <para>In this case, text elements for the corresponding status are generated.</para> - </listitem> - </itemizedlist> - <itemizedlist> - <listitem><para> - With <emphasis><property>&quot;Start&quot;</property></emphasis>/<emphasis><property>&quot;Stop&quot;</property></emphasis > facets definition:</para> - <programlisting role="XML"><![CDATA[<a4j:status for="stat2"> - <f:facet name="start"> - <h:graphicImage value="ajax_process.png" /> - </f:facet> - <f:facet name="stop"> - <h:graphicImage value="ajax_stoped.png" /> - </f:facet> -</a4j:status>]]></programlisting> - <para>In this case, the elements are generated for each status and correspond the facets content.</para> - </listitem> - </itemizedlist> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.ajax4jsf.component.html.HtmlAjaxStatus; -... -HtmlAjaxStatus myStatus = new HtmlAjaxStatus(); -...]]></programlisting> - </section> - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>start</entry> - <entry>Redefines the content for display on starting request</entry> - </row> - <row> - <entry>stop</entry> - <entry>Redefines the content for display on request complete</entry> - </row> - </tbody> - </tgroup> - - </table> - </section> - <section> - - - <title>Details of usage</title> - <para>There are two ways for the components or containers definition, which Ajax requests status is tracked by a component.<itemizedlist> - <listitem><para> - Definition with the <emphasis > - <property>&quot;for&quot;</property> - </emphasis> -attribute on the <emphasis role="bold"> - <property>&lt;a4j:status&gt;</property> - </emphasis> component. Here <emphasis > - <property>&quot;for&quot;</property> - </emphasis> - attribute should point at an Ajax container (<emphasis role="bold"><property>&lt;a4j:region&gt;</property></emphasis>) <property>id</property>, which requests are tracked by a component. - </para></listitem> - </itemizedlist><itemizedlist> - <listitem><para> - Definition with the <emphasis > - <property>&quot;status&quot;</property> - </emphasis> -attribute obtained by any RichFaces library action component. The attribute should point at the <emphasis role="bold"> - <property>&lt;a4j:status&gt;</property> -</emphasis> component <property>id</property>. Then this <emphasis role="bold"> - <property>&lt;a4j:status&gt;</property> - </emphasis> component shows the status for the request fired from this action component. - </para></listitem> - </itemizedlist></para> - <para>The component creates two <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> or <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> - elements depending on attribute <emphasis><property>&quot;layout&quot;</property></emphasis> - with content defined for each status, one of the elements (start) is initially hidden. At the beginning of an Ajax request, elements state is inversed, hence the second element is shown and the first is hidden. At the end of a response processing, elements display states return to its initial values.</para> - <para><emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<a4j:status startText="Started" stopText="stopped" />]]></programlisting> - <para>The code shown in the example above is decoded on a page as:</para><programlisting role="XML"><![CDATA[<span id="j_id20:status.start" style="display: none"> - Started -</span> -<span id="j_id20:status.stop"> - Stopped -</span>]]></programlisting> - <para>and after the generation of an Ajax response is changed to:</para> - <programlisting role="XML"><![CDATA[<span id="j_id20:status.start"> - Started -</span> -<span id="j_id20:status.stop" style="display: none"> - Stopped -</span>]]></programlisting> - <para>There is a possibility to group a <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> elements content into <emphasis role="bold"><property>&lt;div&gt;</property></emphasis> elements, instead of <emphasis role="bold"><property>&lt;span&gt;</property></emphasis>. To use it, just redefine the <emphasis > - <property>&quot;layout&quot;</property> - </emphasis> - attribute from &quot;inline&quot; (default) to &quot;block&quot;.</para> - </section> - <section> - <title>Relevant resources links</title> - <para> - Vizit <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/status.jsf?... page</ulink> at RichFaces Livedemo for examples of component usage and their sources. - </para> - <para> - Useful articles at JBoss portal: - </para> - <itemizedlist> - <listitem> - <para> - <ulink url="http://wiki.jboss.org/wiki/RichFacesPleaseWaitBox">Rich... describes how to show a &quot;Please Wait&quot; box and block the input while the Ajax request is processed using combination of <emphasis role="bold"><property>&lt;a4j:status&gt;</property></emphasis> and <emphasis role="bold"><property>&lt;rich:modalPanel&gt;</property></emphasis>. - </para> - </listitem> - </itemizedlist> - - </section> -</chapter> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,35 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:subTable</keyword> -</keywordset> -</sectioninfo> -<sectioninfo> -<keywordset> -<keyword>subTable</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The component is used for inserting <property>subtables</property> into tables with opportunity to choose data from a model - and built-in Ajax updates support.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:subTable&gt;</property></emphasis> element</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/subTable_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Completely skinned table rows and child elements</para></listitem> - <listitem><para>Possibility to insert complex columnGroup subcomponents</para></listitem> - <listitem><para>Possibility to combine rows and columns inside</para></listitem> - <listitem><para>Possibility to update a limited set of rows with Ajax</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/subTable.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,383 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:subTable</keyword> - <keyword>HtmlSubTable</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.SubTable</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSubTable</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SubTable</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SubTableRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SubTableTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used on a page:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="capitals"> - <rich:column> - ... - </rich:column> - <rich:subTable value=#{capitals.details} var="detail"> - <rich:column> - ... - </rich:column> - </rich:subTable> -</rich:dataTable> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlSubTable; -... -HtmlSubTable mySubTable = new HtmlSubTable(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - - <para>The <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> component is similar to the <emphasis role="bold"> - <property>&lt;h:dataTable&gt;</property> - </emphasis> one, except Ajax support and skinnability. One more difference is that the - component doesn&apos;t add the wrapping <emphasis role="bold"> - <property>&lt;table&gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;tbody&gt;</property> - </emphasis> tags. Ajax support is possible, because the component was created basing on the - <emphasis role="bold"> - <property>&lt;a4j:repeat&gt;</property> - </emphasis> component and as a result it could be partially updated with Ajax. <emphasis> - <property>&quot;ajaxKeys&quot;</property> - </emphasis> attribute allows to define row keys that is updated after an Ajax request.</para> - - <para>Here is an example:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:dataTable value="#{capitalsBean.capitals}" var="capitals"> - <rich:column> - ... - </rich:column> - <rich:subTable value="#{capitals.details}" var="detail" ajaxKeys="#{bean.ajaxSet}" binding="#{bean.subtable}" id="subtable"> - <rich:column> - ... - </rich:column> - </rich:subTable> -</rich:dataTable> -... -<a4j:commandButton action="#{tableBean.action}" reRender="subtable"/> -... -]]></programlisting> - <para> In the example <emphasis> - <property>&quot;reRender&quot;</property> - </emphasis> attribute contains value of <emphasis> - <property>&quot;id&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> component. As a result the component is updated after an Ajax request.</para> - - <para>The component allows to use <emphasis> - <property>&quot;header&quot;</property> - </emphasis> and <emphasis> - <property>&quot;footer&quot;</property> - </emphasis> facets for output. See an example for <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="table_ex">component</link>.</para> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>header</entry> - <entry>Defines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Defines the footer content</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - - <para>Skin parameters redefinition for <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> are the same as for the <emphasis role="bold"> - <property>&lt;rich:dataTable&gt;</property> - </emphasis> - <link linkend="SPR">component</link>.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <table id="tab_sT"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-subtable</entry> - <entry>Defines styles for all subtable</entry> - </row> - <row> - <entry>rich-subtable-caption</entry> - <entry>Defines styles for a &quot;caption&quot; facet element</entry> - </row> - - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define header and footer elements</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-subtable-header</entry> - <entry>Defines styles for a subtable header row</entry> - </row> - - <row> - <entry>rich-subtable-header-continue</entry> - <entry>Defines styles for all subtable header lines after the first</entry> - </row> - <row> - <entry>rich-subtable-subheader</entry> - <entry>Defines styles for a column header of subtable</entry> - </row> - - <row> - <entry>rich-subtable-subfooter</entry> - <entry>Defines styles for a column footer of subtable</entry> - </row> - - <row> - <entry>rich-subtable-footer</entry> - <entry>Defines styles for a subtable footer row</entry> - </row> - - <row> - <entry>rich-subtable-footer-continue</entry> - <entry>Defines styles for all subtable footer lines after the first</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define rows and cells</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-subtable-headercell</entry> - <entry>Defines styles for a subtable header cell</entry> - </row> - - <row> - <entry>rich-subtable-subheadercell</entry> - <entry>Defines styles for a column header cell of subtable</entry> - </row> - <row> - <entry>rich-subtable-cell</entry> - <entry>Defines styles for a subtable cell</entry> - </row> - <row> - <entry>rich-subtable-row</entry> - <entry>Defines styles for a subtable row</entry> - </row> - <row> - <entry>rich-subtable-firstrow</entry> - <entry>Defines styles for a subtable start row</entry> - </row> - - <row> - <entry>rich-subtable-subfootercell</entry> - <entry>Defines styles for a column footer cell of subtable</entry> - </row> - - <row> - <entry>rich-subtable-footercell</entry> - <entry>Defines styles for a subtable footer cell</entry> - </row> - - </tbody> - </tgroup> - </table> - <figure> - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/subTable_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:subTable&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_sT"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-subtable-footer{ - font-weight: bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/subTable_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a footer font weight was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:subTable&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:subTable&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color: #fff5ec; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;columnClasses&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:subTable&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:subTable ... columnClasses="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/subTable_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the background color for columns was changed.</para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,73 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:suggestionBox</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Description</title> - <para> - The component adds on-keypress suggestions capabilities to any input - text component - like - <emphasis role="bold"> - <property>&lt;h:inputText&gt;</property> - </emphasis> - . - </para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - component - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox_init.png" /> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem> - <para> - Adds - <emphasis> - <property>&quot;onkeypress&quot;</property> - </emphasis> - suggestions capabilities to any input text component - </para> - </listitem> - <listitem> - <para>Possible to render table as a popup suggestion</para> - </listitem> - <listitem> - <para>Can be pointed to any Ajax request status indicator of the - page</para> - </listitem> - <listitem> - <para>Easily customizable look-and-feel</para> - </listitem> - <listitem> - <para>Fully skinnable component</para> - </listitem> - <listitem> - <para>Managing area of components submitted on Ajax request</para> - </listitem> - <listitem> - <para>Flexible list of components to update after Ajax request - managed by attributes</para> - </listitem> - <listitem> - <para>Setting restriction to Ajax request generation</para> - </listitem> - <listitem> - <para>Keyboard navigation support</para> - </listitem> - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/suggestionbox.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,771 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>on-keypress suggestion</keyword> - <keyword>rich:suggestionbox</keyword> - <keyword>HtmlsuggestionBox</keyword> - </keywordset> - </sectioninfo> - - <section> - <title>Details of Usage</title> - - <section> - <title>Main attributes</title> - <para>There are 3 main component attributes:</para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;for&quot;</property> - </emphasis> - contains an ID of an input component - for which the suggestion - support is provided - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;suggestionAction&quot;</property> - </emphasis> - defines the method to get a collection of suggestion data on - request - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;var&quot;</property> - </emphasis> - defines a collection name that provides an access for the current - row while iterating through - </para> - </listitem> - </itemizedlist> - <para>To create the simplest variant on a page use the following - syntax:</para> - <programlisting role="XML"><![CDATA[... -<h:inputText id="city" value="#{capitalsBean.capital}" /> -<rich:suggestionbox for="city" var="result" suggestionAction="#{capitalsBean.autocomplete}"> - <h:column> - <h:outputText value="#{result.name}" /> - </h:column> -</rich:suggestionbox> -... -]]></programlisting> - <para> - There is a managed bean: - </para> - <programlisting role="JAVA"><![CDATA[... -public class SBbean { - - private ArrayList<Capital> capitals = new ArrayList<Capital>(); - private ArrayList<String> capitalsNames = new ArrayList<String>(); - private List<SelectItem> capitalsOptions = new ArrayList<SelectItem>(); - private String capital = ""; - - public List<Capital> autocomplete(Object suggest) { - String pref = (String) suggest; - ArrayList<Capital> result = new ArrayList<Capital>(); - - Iterator<Capital> iterator = getCapitals().iterator(); - while (iterator.hasNext()) { - Capital elem = ((Capital) iterator.next()); - if ((elem.getName() != null && elem.getName().toLowerCase() - .indexOf(pref.toLowerCase()) == 0) - || "".equals(pref)) { - result.add(elem); - } - } - return result; - } - - public SBbean() { - URL rulesUrl = getClass().getResource("capitals-rules.xml"); - Digester digester = DigesterLoader.createDigester(rulesUrl); - digester.push(this); - try { - digester.parse(getClass().getResourceAsStream("capitals.xml")); - } catch (IOException e) { - throw new FacesException(e); - } catch (SAXException e) { - throw new FacesException(e); - } - capitalsNames.clear(); - for (Capital cap : capitals) { - capitalsNames.add(cap.getName()); - } - capitalsOptions.clear(); - for (Capital cap : capitals) { - capitalsOptions.add(new SelectItem(cap.getName(), cap.getState())); - } - } - - public String addCapital(Capital capital) { - capitals.add(capital); - return null; - } -} -]]></programlisting> - <para> - In the example above when suggestion item (city) is selected it is - set as a value of - <code>&lt;h:inputText id="city"/&gt;</code> - . - </para> - <para> - Here is a result: - </para> - <figure> - <title> - <emphasis role="bold"> - Simple - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox_simple.png" /> - </imageobject> - </mediaobject> - </figure> - - <para> - The - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - component could get any collection - and outputs it in a - popup in - several columns. The - <emphasis> - <property>&quot;fetchValue&quot;</property> - </emphasis> - attribute points to the data that is inserted into the input field - if a particular row is selected - or clicked from the suggested list. - Therefore when some string is chosen input - receives the proper value. - </para> - <programlisting role="XML"><![CDATA[... -<h:inputText id="city" value="#{capitalsBean.capital}" /> -<rich:suggestionbox for="city" var="result" fetchValue="#{result.state}" - suggestionAction="#{capitalsBean.autocomplete}"> - <h:column> - <h:outputText value="#{result.name}" /> - </h:column> - <h:column> - <h:outputText value="#{result.state}" /> - </h:column> -</rich:suggestionbox> -... -]]></programlisting> - <para> - In the example above if you choose any string input will receive the - corresponding value - from the second column containing - <code>#{result.state}</code> - . - </para> - <para>Here is a result:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - with output in several columns - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox2.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - There is also one more important attribute named - <emphasis> - <property>&quot;tokens&quot;</property> - </emphasis> - that specifies separators after which a set of some - characters - sequence is defined as a new prefix beginning from this - separator and - not from the string beginning. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:inputText id="city" value="#{capitalsBean.capital}" /> -<rich:suggestionbox for="city" var="result" suggestionAction="#{capitalsBean.autocomplete}" - tokens=","> - <h:column> - <h:outputText value="#{result.name}" /> - </h:column> -</rich:suggestionbox> -... -]]></programlisting> - <para>This example shows that when a city is chosen and a comma and - first letter - character are input, Ajax request is called again, but - it - submits a - value starting from the last token:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - with chosen word - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox3.png" /> - </imageobject> - </mediaobject> - </figure> - <para>For - a multiple definition use either &quot; - <code>,.;[]</code> - &quot; - syntax as a value for - <emphasis> - <property>&quot;tokens&quot;</property> - </emphasis> - attribute or link a parameter to some bean - property that transmits - separators collection. - </para> - </section> - <section> - <title>JavaScript API</title> - <para> - There is such feature of the - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - component as - <property>object selection</property> - . - If you want to get the selected item as object on the client side - you should set the value of the - <emphasis> - <property> &quot;usingSuggestObjects&quot; </property> - </emphasis> - attribute - to &quot;true&quot;. - After that you should specify - JavaScript method in the - <emphasis> - <property> &quot;onobjectchange&quot;</property> - </emphasis> - attribute and pass the - <code>suggestion</code> - object as a parameter: - </para> - <programlisting role="XML"><![CDATA[... -<h:inputText id="city" value="#{capitalsBean.capital}" /> -<rich:suggestionbox for="city" var="result" suggestionAction="#{capitalsBean.autocomplete}" - onobjectchange="processObjects(suggestion)" usingSuggestObjects="true"> - <h:column> - <h:outputText value="#{result.name}" /> - </h:column> -</rich:suggestionbox> -<h:panelGroup> - <div id="state"></div> -</h:panelGroup> -... -]]></programlisting> - <para> - When the item is selected you can get it as an object on the client - side and use - <code>getSelectedItems()</code> - method to access any object properties: - </para> - <programlisting role="XML"><![CDATA[<script type="text/javascript"> -function processObjects(suggestionBox) { - var items = suggestionBox.getSelectedItems(); - var state; - if (items && items.length > 0) { - for ( var i = 0; i < items.length; i++) { - state = items[i].state; - } - document.getElementById('state').innerHTML = "State: "+state; - }else{ - document.getElementById('state').innerHTML = ''; - } -} -</script> -]]></programlisting> - <para> - Here is a result: - </para> - <figure> - <title> - Usage of - <code>getSelectedItems()</code> - method - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionboxAPI.png" /> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Other attributes and facets</title> - <para> - In addition to attributes common for Ajax action components - and - limiting requests quantity and frequency, - the - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - has one more its own attribute - limiting requests: the - <emphasis> - <property>&quot;minChars&quot;</property> - </emphasis> - attribute. This attribute defines characters quantity - inputted into a - field after which Ajax requests are called to perform - suggestion. - </para> - - - <para> - There is possibility to define what is shown if the autocomplete - returns empty list. Attribute - <emphasis> - <property> &quot;nothingLabel&quot; </property> - </emphasis> - or facet with the same name could be used for this purpose. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:suggestionbox for="city" var="result" suggestionAction="#{capitalsBean.autocomplete}" - nothingLabel="No cities found"> - <h:column> - <h:outputText value="#{result.name}" /> - </h:column> -</rich:suggestionbox> -... -]]></programlisting> - <para>Here is a result:</para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - with empty list - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox4.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - You can also use facets for the further - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - customization: - </para> - <programlisting role="XML"><![CDATA[... -<h:inputText id="city" value="#{capitalsBean.capital}" /> -<rich:suggestionbox for="city" var="result" suggestionAction="#{capitalsBean.autocomplete}"> - <f:facet name="nothingLabel"> - <h:outputText value="No cities found" /> - </f:facet> - <f:facet name="header"> - <h:outputText value="Select your city" /> - </f:facet> - <h:column> - <h:outputText value="#{result.name}" /> - </h:column> -</rich:suggestionbox> -... -]]></programlisting> - <para> - Here is a result: - </para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - facets - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox5.png" /> - </imageobject> - </mediaobject> - </figure> - <para> - Information about the - <emphasis> - <property>&quot;process&quot;</property> - </emphasis> - attribute usage you can findin the - <link linkend="process"> &quot;Decide what to process&quot; </link> - guide section. - </para> - <para> - In RichFaces Wiki article about - <ulink - url="http://wiki.jboss.org/wiki/RichFacesSuggestionGettingAdditional... - Additional Properties </ulink> - you can find example of getting additional - properties. - </para> - </section> - <section> - <title>Custom style classes redefinition</title> - <para> - In order to redefine styles for all - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - components on a page using CSS, it&apos;s enough to - create classes - with the same names (possible classes could be found in - the tables - <link linkend="suggBoxC"> above</link> - ) and define - necessary properties in them. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-sb-int{ - font-weight:bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox_pc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font weight for rows was changed.</para> - - <para>Also - it&apos;s possible to change styles of particular - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - component. In this case you should create own style - classes and use - them in corresponding - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> - attributes. An example is placed below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color:#f0ddcd; -} -...]]></programlisting> - <para> - The - <emphasis> - <property>&quot;selectedClass&quot;</property> - </emphasis> - attribute for - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - is defined as it&apos;s shown in the example below: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:suggestionbox ... selectedClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title> - Redefinition styles with own classes and - <emphasis> - <property>styleClass</property> - </emphasis> - attributes - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/suggestionbox_oc.png" /> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,background color for - selected - item was changed.</para> - </section> - - </section> - <section> - <sectioninfo> - <keywordset> - <keyword>rich:suggestionbox</keyword> - </keywordset> - </sectioninfo> - <title>Reference Data</title> - <para> - - <ulink - url="http://www.jboss.org/file-access/default/members/jbossrichfaces... - Table of &lt;rich:suggestionbox&gt; attributes - </ulink> - </para> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.SuggestionBox</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlSuggestionBox</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.SuggestionBox</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.SuggestionBoxRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.SuggestionBoxTag</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>nothingLabel</entry> - <entry>Redefines the content item if the autocomplete returns - empty - list. Related attribute is &quot;nothingLabel&quot;</entry> - </row> - <row> - <entry>popup</entry> - <entry>Redefines the content for the popup list of the suggestion - </entry> - </row> - <row> - <entry>header</entry> - <entry>Defines the header content</entry> - </row> - <row> - <entry>footer</entry> - <entry>Defines the footer content</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>JavaScript API</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>callSuggestion()</entry> - <entry>Calls the suggestion. If the - &quot;ignoreMinChars&quot; - value is - &quot;true&quot; then - the number of symbols to send - a query - is no longer actual - for callSuggestion()</entry> - </row> - - <row> - <entry>getSelectedItems()</entry> - <entry>Returns the array of - objects</entry> - </row> - - </tbody> - </tgroup> - </table> - <table id="suggBoxC"> - <title>Classes names with the corresponding skin parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - <entry>Skin Parameters</entry> - <entry>CSS properties</entry> - - </row> - </thead> - <tbody> - <row> - <entry morerows="2">.rich-sb-int</entry> - <entry morerows="2">Defines the styles for a - suggestion box table - rows - &lt;tr&gt;</entry> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - - <row> - <entry morerows="3">.rich-sb-int-sel</entry> - <entry morerows="3">Defines styles for a selected - row</entry> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry morerows="1">.rich-sb-ext-decor-2</entry> - <entry morerows="1">Defines styles for the second - wrapper - &lt;div&gt; - element of - a suggestion box - exterior</entry> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>additionalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry morerows="2">.rich-sb-shadow</entry> - <entry morerows="2">Defines styles for a suggestion - boxshadow - </entry> - <entry>shadowBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>shadowBackgroundColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>shadowOpacity</entry> - <entry>opacity</entry> - </row> - - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - Vizit - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/suggestionB... role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis></ulink> - page at RichFaces Livedemo for examples of component usage and - sources. - </para> - <para> - RichFaces cookbook at JBoss Portal includes some articles that cover - different aspects of working with - <emphasis role="bold"> - <property>&lt;rich:suggestionbox&gt;</property> - </emphasis> - : - </para> - <itemizedlist> - <listitem> - <para> - &quot; - <ulink url="http://www.jboss.org/community/docs/DOC-11851">Creating suggestion box dynamically</ulink> - &quot;; - </para> - </listitem> - <listitem> - <para> - &quot; - <ulink url="http://www.jboss.org/community/docs/DOC-11865">Getting additional properties from - &lt;rich:suggectionbox&gt;</ulink> - &quot;. - </para> - </listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,24 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <section> - <sectioninfo> - <keywordset> - <keyword>a4j:support</keyword> - <keyword>component</keyword> - </keywordset> - </sectioninfo> - -<title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> component - is the most important core component in the RichFaces library. - It enriches any existing non-Ajax JSF or RichFaces component with Ajax capability. - All other RichFaces Ajax components are based on the same principles - <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> has. - <!-- - The requests are invoked by definite user activity and used for updating - and re-rendering page contents partially after a response from server. - --> - </para> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/support.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,272 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>a4j:support</keyword> - </keywordset> - </sectioninfo> - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.ajax4jsf.Support</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.ajax4jsf.AjaxSupport</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.ajax4jsf.component.html.HtmlAjaxSupport</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.ajax4jsf.components.AjaxSupportRenderer</entry> - </row> - </tbody> - </tgroup> - </table> - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page you should put - <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> - as a nested element into the component that you want to enhance with - Ajax functionality. - You should also specify an event that will trigger - an Ajax request. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<h:inputText value="#{bean.text}"> - <a4j:support event="onkeyup" reRender="repeater"/> -</h:inputText> -<h:outputText id="repeater" value="#{bean.text}"/>]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - In order to add the - <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> - in Java code you should add it as - <property>facet</property> - , not as a child: - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[HtmlInputText inputText = new HtmlInputText(); -... -HtmlAjaxSupport ajaxSupport = new HtmlAjaxSupport(); -ajaxSupport.setActionExpression(FacesContext.getCurrentInstance().getApplication().getExpressionFactory().createMethodExpression( - FacesContext.getCurrentInstance().getELContext(), "#{bean.action}", String.class, new Class[] {})); -ajaxSupport.setEvent("onkeyup"); -ajaxSupport.setReRender("output"); -inputText.getFacets().put("a4jsupport", ajaxSupport); -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> - The <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> - component has two key attributes: - </para> - <itemizedlist> - <listitem> - <para> - mandatory - <emphasis><property>&quot;event&quot;</property></emphasis> attribute that defines the JavaScript event - the Ajax support will be attached to - </para> - </listitem> - <listitem> - <para> - <emphasis><property>&quot;reRender&quot;</property></emphasis> attribute that defines id(s) - of JSF component(s) that should be rerendered after an Ajax request - </para> - </listitem> - </itemizedlist> - <para> - As mentioned above, the <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> component - adds Ajax capability to non-Ajax JSF components. - Let&apos;s create ajaxed <emphasis role="bold"><property>&lt;h:selectOneMenu&gt;</property></emphasis> called - &quot;Planets and Their Moons&quot;. - </para> - <para> - We begin with the common behavior description. When a page is rendered you see only one select box with the list of planets. - When you select a planet the <emphasis role="bold"><property>&lt;h:dataTable&gt;</property></emphasis> - containing moons of the selected planet appears. - </para> - <para> - In other words we need <emphasis role="bold"><property>&lt;h:selectOneMenu&gt;</property></emphasis> - with the nested <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> component that - is attached to the <property>onchange</property> event. - </para> - <para> - When an Ajax response comes back the <emphasis role="bold"><property>&lt;h:dataTable&gt;</property></emphasis> - is re-rendered on the server side and updated on the client. - </para> - <programlisting role="XML"><![CDATA[... -<h:form id="planetsForm"> - <h:outputLabel value="Select the planet:" for="planets" /> - <h:selectOneMenu id="planets" value="#{planetsMoons.currentPlanet}" valueChangeListener="#{planetsMoons.planetChanged}"> - <f:selectItems value="#{planetsMoons.planetsList}" /> - <a4j:support event="onchange" reRender="moons" /> - </h:selectOneMenu> - <h:dataTable id="moons" value="#{planetsMoons.moonsList}" var="item"> - <h:column> - <h:outputText value="#{item}"/> - </h:column> - </h:dataTable> -</h:form> -...]]></programlisting> - <para> - Finally we need a backing bean: - </para> - <programlisting role="JAVA"><![CDATA[... -public class PlanetsMoons { - private String currentPlanet=""; - public List<SelectItem> planetsList = new ArrayList<SelectItem>(); - public List<String> moonsList = new ArrayList<String>(); - private static final String [] EARTH = {"The Moon"}; - private static final String [] MARS = {"Deimos", "Phobos"}; - private static final String [] JUPITER = {"Europa", "Gamymede", "Callisto"}; - - public PlanetsMoons() { - SelectItem item = new SelectItem("earth", "Earth"); - planetsList.add(item); - item = new SelectItem("mars", "Mars"); - planetsList.add(item); - item = new SelectItem("jupiter", "Jupiter"); - planetsList.add(item); - } - - public void planetChanged(ValueChangeEvent event){ - moonsList.clear(); - String[] currentItems; - if (((String)event.getNewValue()).equals("earth")) { - currentItems = EARTH; - }else if(((String)event.getNewValue()).equals("mars")){ - currentItems = MARS; - }else{ - currentItems = JUPITER; - } - for (int i = 0; i < currentItems.length; i++) { - moonsList.add(currentItems[i]); - } - } - - //Getters and Setters - ... -} -]]></programlisting> - <para> - There are two properties <code>planetsList</code> and <code>moonsList</code>. - The <code>planetsList</code> is filled with planets names in the constructor. - After you select the planet, - the <code>planetChanged()</code> listener is called and - the <code>moonsList</code> is populated with proper values of moons. - </para> - <para> - With the help of - <emphasis> - <property>&quot;onsubmit&quot;</property> - </emphasis> - and - <emphasis> - <property>&quot;oncomplete&quot;</property> - </emphasis> - attributes the <emphasis role="bold"><property>&lt;a4j:support&gt;</property></emphasis> component - allows to use JavaScript calls before and after an Ajax request - respectively. - Actually the JavaScript specified in the <emphasis><property>&quot;oncomplete&quot;</property></emphasis> attribute - will be executed in any case whether the Ajax request is completed successfully or not. - </para> - <para> - You can easily add confirmation dialog for the planet select box and colorize - <emphasis role="bold"><property>&lt;h:dataTable&gt;</property></emphasis> after the Ajax response: - </para> - <programlisting role="XML"><![CDATA[... -<h:form id="planetsForm"> - <h:outputLabel value="Select the planet:" for="planets" /> - <h:selectOneMenu id="planets" value="#{planetsMoons.currentPlanet}" valueChangeListener="#{planetsMoons.planetChanged}"> - <f:selectItems value="#{planetsMoons.planetsList}" /> - <a4j:support event="onchange" reRender="moons" - onsubmit="if(!confirm('Are you sure to change the planet?')) {form.reset(); return false;}" - oncomplete="document.getElementById('planetsForm:moonsPanel').style.backgroundColor='#c8dcf9';" /> - </h:selectOneMenu> - <h:dataTable id="moons" value="#{planetsMoons.moonsList}" var="item"> - <h:column> - <h:outputText value="#{item}"/> - </h:column> - </h:dataTable> -</h:form> -...]]></programlisting> - <para> - There is the result: - </para> - <figure> - <title> - &quot;Planets and Their Moons&quot; - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/supportSample.png"/> - </imageobject> - </mediaobject> - </figure> - <para> - Information about the - <emphasis> - <property>&quot;process&quot;</property> - </emphasis> - attribute usage you can find in the &quot; - <link linkend="process">Decide what to process</link> - &quot; guide section. - </para> - - <note> - <title>Tip:</title> - <para> - The - <emphasis role="bold"> - <property>&lt;a4j:support&gt;</property> - </emphasis> - component created on a page as following - </para> - <programlisting role="XML"><![CDATA[<h:inputText value="#{bean.text}"> - <a4j:support event="onkeyup" reRender="output" action="#{bean.action}"/> -</h:inputText>]]></programlisting> - <para>is decoded in HTML as</para> - <programlisting role="XML"><![CDATA[<input onkeyup="A4J.AJAX.Submit( Some request parameters )"/>]]></programlisting> - </note> - </section> - <section> - <title>Relevant resources links</title> - <para> - Visit - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/support.jsf... demo page</ulink> - at RichFaces live demo for examples of component usage and their - sources. - </para> - - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,38 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:tab</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A <property>tab</property> section within a tab panel.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:tab&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Fully skinnable <property>tabs</property> content</para></listitem> - <listitem><para>Disabled/enabled <property>tab</property> options</para></listitem> - <listitem><para>Groups any content inside a <property>tab</property></para></listitem> - <listitem><para>Each <property>tab</property> has a unique name for a direct access (e.g. for - switching between tabs)</para></listitem> - <listitem><para>Switch methods can be easily customized for every <property>tab</property> - separately with attribute to:</para> - <itemizedlist> - <listitem><para><code>Server</code></para></listitem> - <listitem><para><code>Client</code></para></listitem> - <listitem><para><code>AJAX</code></para></listitem> - </itemizedlist> - </listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tab.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,509 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:tab</keyword> - <keyword>HtmlTab</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Tab</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTab</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Tab</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TabRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TabTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tabPanel> - <!--Set of Tabs inside--> - <rich:tab> - ... - </rich:tab> -</rich:tabPanel> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlTab; -... -HtmlTab myTab = new HtmlTab(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>The main component function is to define a content group that is rendered - and processed when the <property>tab</property> is active, i.e. click - on a <property>tab</property> causes switching onto a - <property>tab</property> containing content corresponded to this - <property>tab</property>.</para> - <para>The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute defines text to be represented. If you can use - the <emphasis> - <property>&quot;label&quot;</property> - </emphasis> facet, you can even not use the <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tab> - <f:facet name="label"> - <h:graphicImage value="/images/img1.png"/> - </f:facet> - ... - <!--Any Content inside--> - ... -</rich:tab> -... -]]></programlisting> - - <para>A marker on a <property>tab</property> header defined with the <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute. Moreover, each <property>tab</property> could - be disabled (switching on this <property>tab</property> is impossible) - with the <emphasis> - <property>&quot;disable&quot;</property> - </emphasis> attribute.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tabPanel width="20%"> - <tabs:tab label="Canon"> - <h:outputText value="Canon EOS Digital Rebel XT" /> - ... - </tabs:tab> - <tabs:tab label="Nikon"> - <h:outputText value="Nikon D70s" /> - ... - </tabs:tab> - <tabs:tab label="Olympus"> - <h:outputText value="Olympus EVOLT E-500" /> - ... - </tabs:tab> - <tabs:tab disabled="true" name="disabled" label="Disabled"/> -</rich:tabPanel> -...]]></programlisting> - <para>With this example it&apos;s possible to generate the <property>tab - panel</property> with the last disabled and three active - <property>tabs</property> (see the picture).</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> with disabled <emphasis role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis></title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Switching mode could be defined not only for the whole panel - <property>tab</property>, but also for each particular - <property>tab</property>, i.e. switching onto one - <property>tab</property> could be performed right on the client with - the corresponding JavaScript and onto another <property>tab</property> - with an Ajax request on the server. <property>Tab</property> switching - modes are the same as <property>tabPanel</property> ones.</para> - <para>Each <property>tab</property> also has an attribute name (alias for <emphasis> - <property>&quot;id&quot;</property> - </emphasis> attribute). Using this attribute value it&apos;s - possible e.g. to set an active <property>tab</property> on a model - level specifying this name in the corresponding attribute of the whole - <property>tab</property>.</para> - <para>Except the specific component attributes it has all necessary attributes - for JavaScript event definition.</para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;onmouseover&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onmouseout&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> etc. </para> - </listitem> - </itemizedlist> - <para> Some event could be performed on the tab which has been entered/left - using <emphasis> - <property>&quot;ontabenter&quot;</property> - </emphasis>/<emphasis> - <property>&quot;ontableave&quot;</property> - </emphasis> attributes. See the example below.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tabPanel> - <rich:tab label="Tab1" ontabenter="alert()"> - ... - </rich:tab> - ... -</rich:tabPanel> -...]]></programlisting> - <para> The following example shows how on the client side to get the names of - <code>entered</code>/<code>left</code> tabs. </para> - <programlisting role="JAVA"><![CDATA[ontabenter="alert(leftTabName)"]]></programlisting> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find in the - <link linkend="process"> &quot;Decide what to process&quot; </link> guide section. </para> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>label</entry> - <entry>Defines the text for the actual &quot;tab&quot; in a tab section</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <note> - <title>Note:</title> - <para> A panel appearance and content is defined with a - <property>tab</property> panel i.e. on the - <property>tab</property> level it&apos;s possible to - define only an appearance of this <property>tab</property> - header. </para> - </note> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a tab header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters redefinition for an active tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for an inactive tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a disabled tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tabBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>subBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>tabDisabledTextColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - - <table id="tab_tab"> - <title>Classes names that define a tab</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tab-header</entry> - <entry>Defines styles for a tab - header</entry> - </row> - - <row> - <entry>rich-tab-label</entry> - <entry>Defines styles for a tab - label</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Classes names that define a tab states</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tab-active</entry> - <entry>Defines styles for an active - tab</entry> - </row> - <row> - <entry>rich-tab-inactive</entry> - <entry>Defines styles for an inactive - tab</entry> - </row> - <row> - <entry>rich-tab-disabled</entry> - <entry>Defines styles for a disabled - tab</entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="tab_tab"> above</link>) and define necessary - properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-tab-header{ - font-weight: bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a header font weight was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:tab&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - border-color: #5d9ffc; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:tab&gt; </property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:tab ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tab_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the border color was - changed.</para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,46 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:tabPanel</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A <property>tab panel</property> displaying tabs for grouping content of the panel.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:tabPanel&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Skinnable <property>tab panel</property> and child items</para></listitem> - <listitem><para>Disabled/enabled tab options</para></listitem> - <listitem><para>Customizable headers</para></listitem> - <listitem><para>Group any content inside a tab</para></listitem> - <listitem><para>Each tab has a unique name for direct access (e.g. for switching between tabs)</para></listitem> - <listitem><para>Switch methods can be easily customized with attribute to:</para> - <itemizedlist> - <listitem><para><code> - Server - </code></para></listitem> - <listitem><para> - <code>Client</code> - </para></listitem> - <listitem><para> - <code>AJAX</code> - </para></listitem> - - </itemizedlist> - </listitem> - <listitem><para>Switch methods can be selected for the whole <property>tab panel</property> and for the - each tab separately</para></listitem> - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tabPanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,481 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>tab</keyword> - <keyword>rich:tabPanel</keyword> - <keyword>HtmltabPanel</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.tabPanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmltabPanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.tabPanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.tabPanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.tabPanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tabPanel> - <!--Set of Tabs inside--> - <rich:tab> - ... - </rich:tab> -</rich:tabPanel> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmltabPanel; -... -HtmltabPanel mytabPanel = new HtmltabPanel(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it was mentioned <link linkend="tabPanel">above</link>, - <property>tabPanel</property> groups content on panels and - performs switching from one to another. Hence, modes of switching - between panels are described first of all.</para> - <note> - <title>Note:</title> - <para> All <property>tabPanels</property> should be wrapped into a - form element so as content is correctly submitted inside. If - a form is placed into each tab, the Action elements of Tab - controls appear to be out of the form and content submission - inside the panels could be performed only for Action - components inside tabs.</para> - </note> - <para>Switching mode could be chosen with the <property>tabPanel</property> - attribute <emphasis> - <property>&quot;switchType&quot;</property> - </emphasis> with three possible parameters.</para> - <itemizedlist> - <listitem> - <para><code>Server</code> (DEFAULT)</para> - <para>The common submission is performed around - <property>tabPanel</property> and a page - is completely rendered on a called panel. Only one - at a time <property>tabPanel</property> is - uploaded onto the client side.</para> - </listitem> - <listitem> - <para> - <code>Ajax</code> - </para> - <para>AJAX form submission is performed around the - <property>tabPanel</property>, content - of the called <property>tabPanel</property> is - uploaded on Ajax request. Only one at a - time <property>tabPanel</property> is uploaded on - the client.</para> - </listitem> - <listitem> - <para> - <code>Client</code> - </para> - <para> All <property>tabPanels</property> are uploaded on - the client side. The switching from the active to - the hidden <property>panel</property> is performed - with client JavaScript.</para> - </listitem> - </itemizedlist> - <para>As a result, the <property>tabPanel</property> is switched to the second - tab according to the action returning outcome for moving onto another - page and switching from the second to the first tab is performed.</para> - <para>There is also the <emphasis> - <property>&quot;selectedTab&quot;</property> - </emphasis> attribute. The attribute keeps an active tab name; - therefore, an active <property>tabPanel</property> could be changed - with setting a name of the necessary tab to this attribute.</para> - <para>There is also the <emphasis> - <property>&quot;headerAlignment&quot;</property> - </emphasis> attribute responsible for rendering of - <property>tabPanel</property> components. The attribute has several - values: &quot;left&quot; (Default), &quot;right&quot;, - &quot;center&quot;, which specify Tabs components location on - the top of the tabPanel.</para> - - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tabPanel width="40%" headerAlignment="right"> - <rich:tab label="Canon"> - ... - </rich:tab> - <rich:tab label="Nikon"> - ... - </rich:tab> - <rich:tab label="Olympus"> - ... - </rich:tab> -</rich:tabPanel> -... -]]></programlisting> - - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> with right aligned tabs</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel2.png"/> - </imageobject> - </mediaobject> - </figure> - <para> The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and - the message that the component (indirectly) produced. This attribute - defines the parameters of localized error and informational messages - that occur as a result of conversion, validation, or other application - actions during the request processing lifecycle. With the help of this - attribute you can replace the last parameter substitution token shown - in the messages. For example, {1} for - <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, - {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> - <para>Except the specific attributes, the component has all necessary attributes - for JavaScript events definition.</para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;onmouseover&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;onmouseout&quot;</property> - </emphasis> - </para> - </listitem> - <listitem> - <para> etc. </para> - </listitem> - </itemizedlist> - - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a header</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-top-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for an internal content</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>generalBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>generalTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-bottom-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-right-color</entry> - </row> - <row> - <entry>panelBorderColor</entry> - <entry>border-left-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - - <para>On the screenshot there are classes names that define styles for component - elements.</para> - <figure> - - <title>Style classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel_cn.png" - scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - - <table id="tab_cn5"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tabpanel</entry> - <entry>Defines styles for all - tabPanel</entry> - </row> - <row> - <entry>rich-tabpanel-content</entry> - <entry>Defines styles for an internal - content</entry> - </row> - <row> - <entry>rich-tabpanel-content-position</entry> - <entry>Defines styles for a wrapper - element of a tabPanel content. - It should define a shift equal - to borders width in order to - overlap panel tabs</entry> - </row> - <row> - <entry>rich-tabhdr-side-border</entry> - <entry>Defines styles for side elements - of a tabPanel header</entry> - </row> - <row> - <entry>rich-tabhdr-side-cell</entry> - <entry>Defines styles for a header - internal element</entry> - </row> - <row> - <entry>rich-tab-bottom-line</entry> - <entry>Defines styles for a tab bottom - line element of a tabPanel - </entry> - </row> - </tbody> - </tgroup> - </table> - - - <table> - <title>Classes names that define different tab header states - (corresponds to rich-tabhdr-side-cell)</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tabhdr-cell-active</entry> - <entry>Defines styles for an internal - element of an active - header</entry> - </row> - <row> - <entry>rich-tabhdr-cell-inactive</entry> - <entry>Defines styles for an internal - element of an inactive label - </entry> - </row> - <row> - <entry>rich-tabhdr-cell-disabled</entry> - <entry>Defines styles for an internal - element of a disabled label - </entry> - </row> - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the table <link linkend="tab_cn5">above</link>) and define necessary - properties in them. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-tabhdr-cell-active{ - font-weight: bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a tab active font weight and text color were changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> - <emphasis> - <property>styleClass</property> - </emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style: italic; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:tabPanel&gt; </property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:tabPanel ... activeTabClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>styleClass</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tabPanel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, font style on inactive tab was - changed.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.js... - >On the component LiveDemo page</ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:tabPanel&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,41 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> -<keyword>rich:toggleControl</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A link type <property>control</property> for switching between - <property>togglePanel</property> facets. Target - Panel is specified with <emphasis ><property>&quot;for&quot;</property></emphasis> - attribute. It can be located inside or outside the <property>togglePanel</property>. As the result of switching - between facets previous facet is hidden and another one (specified with - <emphasis ><property>&quot;switchToState&quot;</property></emphasis> or panel - <emphasis ><property>&quot;stateOrder&quot;</property></emphasis> attributes) is - shown.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:toggleControl&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toggleControl_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel</para></listitem> - <listitem><para>Can be located anywhere in a page layout</para></listitem> - <listitem><para>Switching is provided in the three modes</para> - <itemizedlist> - <listitem><para><code>Server</code></para></listitem> - <listitem><para><code>Client</code></para></listitem> - <listitem><para><code>Ajax</code></para></listitem> - </itemizedlist> - </listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toggleControl.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,214 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>control</keyword> -<keyword>rich:toggleControl</keyword> -<keyword>HtmlToggleControl</keyword> -<keyword>switching</keyword> -</keywordset> -</sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ToggleControl</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlToggleControl</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ToggleControl</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ToggleControlRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ToggleControlTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:toggleControl for="panel"/> - ... - <rich:togglePanel id="panel" stateOrder="[facets order to be switched]"> - <!--Set of Facets--> - </rich:togglePanel> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlToggleControl; -... -HtmlToggleControl myControl = new HtmlToggleControl(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it was mentioned <link linkend="toggleControl">above</link>, the <property>control</property> could be in any place in - layout and linked to a switching panel that is managed with <emphasis - -><property>&quot;for&quot;</property></emphasis> attribute (in the <emphasis - -><property>&quot;for&quot;</property></emphasis> attribute the full component <emphasis><property>&quot;id&quot;</property></emphasis> is specified according to naming - containers).</para> -<para>The <property>togglePanel</property> could be also switched from the side of the control instead of being strictly defined -in <emphasis -><property>&quot;switchOrder&quot;</property></emphasis> attribute of <emphasis role="bold"><property>&lt;rich:togglePanel&gt;</property>.</emphasis></para> -<para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... -<rich:togglePanel id="panel" initialState="empty" switchType="client"> - <f:facet name="first"> - <h:panelGroup> - <rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/> - <rich:toggleControl for="helloForm:panel" value=" Second" switchToState="second"/> - <!--Some content--> - </h:panelGroup> - </f:facet> - <f:facet name="second"> - <h:panelGroup> - <rich:toggleControl for="helloForm:panel" value="Empty" switchToState="empty"/> - <rich:toggleControl for="helloForm:panel" value=" first" switchToState="first"/> - <!--Some content--> - </h:panelGroup> - </f:facet> - <f:facet name="empty"> - <h:panelGroup> - <rich:toggleControl for="helloForm:panel" value="first" switchToState="first"/> - <rich:toggleControl for="helloForm:panel" value=" second" switchToState="second"/> - </h:panelGroup> - </f:facet> -</rich:togglePanel> -... -]]></programlisting> -<para>In this example the switching is performed on facets specified in the <emphasis -><property>&quot;switchToState&quot;</property></emphasis> attribute.</para> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">&quot; Decide what to process &quot; </link> guide section. - </para> - </section> - - <section> - <title>Look-and-Feel Customization</title> - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property></emphasis></para> - <para>To redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:toggleControl&gt;</property> - </emphasis> components at once, you should add to your style sheets <emphasis> - <property>style class</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:toggleControl&gt;</property> - </emphasis> component. -</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <table id="tab_tC"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tglctrl</entry> - <entry>Defines styles for a toggle control</entry> - </row> - - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:toggleControl&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="tab_tC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-tglctrl { - font-family: monospace; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toggleControl_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example font family was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:toggleControl&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:toggleControl&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass { - font-style: italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:toggleControl&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:toggleControl ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toggleControl_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, the font style was changed.</para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,36 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> -<keyword>rich:togglePanel</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A wrapper component with named facets, where every facet is shown after activation of - the corresponding <property>toggleControl</property> - (the other is hidden).</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:togglePanel&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/togglePanel_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Support for any content inside</para></listitem> - <listitem><para>Three modes of facets switching</para> - <itemizedlist> - <listitem><para><code>Server</code></para></listitem> - <listitem><para><code>Client</code></para></listitem> - <listitem><para><code>Ajax</code></para></listitem> - </itemizedlist> - </listitem> - <listitem><para>Controls for <property>togglePanel</property> can be everywhere in layout</para></listitem> - </itemizedlist> -</section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/togglePanel.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,301 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>facet</keyword> - <keyword>rich:togglePanel</keyword> - <keyword>HtmltogglePanel</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.TogglePanel</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTogglePanel</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.TogglePanel</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TogglePanelRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.Taglib.togglePanelTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it could be used in a page: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:togglePanel> - <f:facet name="first"> - ... - </f:facet> - <f:facet name="second"> - ... - </f:facet> - ... -</rich:togglePanel> -... -<!--Set of the toggleControls somewhere on a page--> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmltogglePanel; -... -HtmltogglePanel myPanel = new HtmltogglePanel(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>As it was mentioned <link linkend="togglePanel">above</link>, - <property>togglePanel</property> splits content into named - facets that become rendered and processed when a click performed on - controls linked to this <property>togglePanel</property> (either - switched on the client or send requests on the server for switching).</para> - <para>The initial component state is defined with <emphasis> - <property>&quot;initialState&quot;</property> - </emphasis> attribute, where a facet name that is shown at first is - defined.</para> - <note> - <title>Note:</title> - <para> It&apos;s also possible to define an <emphasis> - <property>&quot;empty&quot;</property> - </emphasis> facet to implement the functionality as - drop-down panels have and make the facet active when no - content is required to be rendered.</para> - </note> - <para>Switching mode could be defined with the <emphasis> - <property>&quot;switchType&quot;</property> - </emphasis> attribute with three possible parameters:</para> - <itemizedlist> - <listitem> - <para> - <code>Server</code> (DEFAULT)</para> - <para>The common submission is performed around - <property>togglePanel</property> and a - page is completely rendered on a called panel. - Only one at a time the panel is uploaded onto the - client side.</para> - </listitem> - <listitem> - <para> - <code>Ajax</code> - </para> - <para>AJAX form submission is performed around the panel, - content of the called panel is uploaded on an Ajax - request . Only one at a - time the panel is uploaded on the client - side.</para> - </listitem> - <listitem> - <para> - <code>Client</code> - </para> - <para> All panels are uploaded on the client side. The - switching from the active to the hidden panel is - performed with client JavaScript.</para> - </listitem> - </itemizedlist> - <para>&quot;Facets&quot; switching order could be defined on the side of - <emphasis role="bold"> - <property>&lt;rich:toggleControl&gt;</property> - </emphasis> component or on the panel. On the side of the togglePanel - it&apos;s possible to define facets switching order with the <emphasis> - <property>&quot;stateOrder&quot;</property> - </emphasis> attribute. The facets names are enumerated in such an - order that they are rendered when a control is clicked, as - it&apos;s not defined where to switch beforehand.</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:togglePanel id="panel" initialState="panelB" switchType="client" - stateOrder="panelA,panelB,panelC"> - <f:facet name="panelA"> - ... - </f:facet> - <f:facet name="panelB"> - ... - </f:facet> - <f:facet name="panelC"> - ... - </f:facet> -</rich:togglePanel> -<rich:toggleControl for="panel" value="Switch"/> -... -]]></programlisting> - <para>The example shows a <property>togglePanel</property> initial state when - the second facet (<code>panelB</code>) is rendered and successive - switching from the first to the second happens.</para> - <para> The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute is a generic attribute. The <emphasis> - <property>&quot;label&quot;</property> - </emphasis> attribute provides an association between a component, and - the message that the component (indirectly) produced. This attribute - defines the parameters of localized error and informational messages - that occur as a result of conversion, validation, or other application - actions during the request processing lifecycle. With the help of this - attribute you can replace the last parameter substitution token shown - in the messages. For example, {1} for - <code>&quot;DoubleRangeValidator.MAXIMUM&quot;</code>, - {2} for <code>&quot;ShortConverter.SHORT&quot;</code>. </para> - </section> - <section> - <title>Look-and-Feel Customization</title> - <para>The component doesn&apos;t have its own representation rendering only - content of its facets, thus all look and feel is set only for - content.</para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <table id="togglePC"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-toggle-panel</entry> - <entry>Defines styles for all - component</entry> - </row> - - <row> - <entry>rich-tglctrl</entry> - <entry>Defines styles for a toggle - control</entry> - </row> - - </tbody> - </tgroup> - </table> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:togglePanel&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the tables <link linkend="togglePC"> above</link>) and define - necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-toggle-panel{ - font-style:italic; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/togglePanel_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example the font style for output text was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis - role="bold"> - <property>&lt;rich:togglePanel&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:togglePanel&gt;</property> - </emphasis> - <property>styleClass</property> attributes. An example is placed - below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - background-color:#bed6f8; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:togglePanel&gt;</property> - </emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:togglePanel ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/togglePanel_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color for panel was - changed.</para> - - - - - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/togglePanel... - >On the component LiveDemo page</ulink> you can see the example of <emphasis - role="bold"> - <property>&lt;rich:togglePanel&gt;</property> - </emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,34 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:toolBar</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A horizontal bar with Action items on it that accepts any JSF components as children.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:toolBar&gt;</property></emphasis> with action items</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBar_init.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Skinnable menu panel and child items</para></listitem> - <listitem><para>Standard top menu bar that can be used in accordance with a menu component</para></listitem> - <listitem><para>Grouping bar content</para></listitem> - <listitem><para>Easily place content on any side of a menu bar using predefined group layout</para></listitem> - <listitem><para>Predefined separators for menu items and groups</para></listitem> - <listitem><para>Any content inside</para></listitem> - </itemizedlist> -</section> -</section> - - Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBar.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,354 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>bar</keyword> - <keyword>rich:toolBar</keyword> - <keyword>HtmlToolBar</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ToolBar</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlToolBar</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ToolBar</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ToolBarRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ToolBarTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:toolBar> - <!--Set of action or other JSF components--> -</rich:toolBar> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlToolBar; -... -HtmlToolBar myToolBar = new HtmlToolBar(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para>A <property>toolBar</property> is a wrapper component that facilitates creation of menu - and <property>tool bars</property>. All components defined inside are located on a stylized - bar with possibility to group, arrange on the both bar sides, and place predefined separators - between them.</para> - <para>Grouping and an input side definition is described for <property>toolBarGroup</property> - that defines this functionality.</para> - <para>Separators are located between components with the help of the <emphasis> - <property>&quot;itemSeparator&quot;</property> - </emphasis> attribute with four predefined values:</para> - <itemizedlist> - <listitem><para> &quot;none&quot; </para></listitem> - <listitem><para> &quot;line&quot; </para></listitem> - <listitem><para> &quot;square&quot; </para></listitem> - <listitem><para> &quot;disc&quot; </para></listitem> - </itemizedlist> - <para>For example, when setting a separator of a disc type, the following result is produced:</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:toolBar&gt;</property></emphasis> with a <emphasis><property>&quot;disc&quot;</property></emphasis> separator</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBar2.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - <para>Moreover, for <property>toolBar</property> style <emphasis> - <property>&quot;width&quot;</property> - </emphasis> and <emphasis> - <property>&quot;height&quot;</property> - </emphasis> attributes are placed above all.</para> - <para>A custom separator can be added with the help of <emphasis><property>&quot;itemSeparator&quot;</property></emphasis> facet.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<f:facet name="itemSeparator"> - <rich:separator width="2" height="14" /> -</f:facet> -... -]]></programlisting> - <para>Custom separator can be also specified by URL to the separator image in the attribute <emphasis> - <property>&quot;itemSeparator&quot;</property> - </emphasis> of the <emphasis role="bold"><property>&lt;rich:toolBar&gt;</property></emphasis>. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:toolBar id="toolBar" width="#{bean.width}" height="#{bean.height}" itemSeparator="/images/separator_img.jpg"/> -... -]]></programlisting> - <para>This is a result:</para> - <figure> - <title><emphasis role="bold"> - <property>&lt;rich:toolBar&gt;</property> - </emphasis> with <emphasis> - <property>&quot;itemSeparator&quot;</property> - </emphasis> attribute.</title> - - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBar4.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <para>As it could be seen in the picture above, the image for itemSeparator was changed.</para> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>itemSeparator</entry> - <entry>Defines the custom separator. Related attribute is &quot;itemSeparator&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:toolBar&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:toolBar&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a component exterior</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>headerBackgroundColor</entry> - <entry>background-color</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Skin parameters redefinition for a component item</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>headerTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>headerWeightFont</entry> - <entry>font-weight</entry> - </row> - <row> - <entry>headerFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <table id="toolBC"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-toolbar</entry> - <entry>Defines styles for a toolbar element</entry> - </row> - <row> - <entry>rich-toolbar-item</entry> - <entry>Defines styles for a toolbar item</entry> - </row> - </tbody> - </tgroup> - </table> - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBar_cn.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:toolBar&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the tables <link linkend="toolBC"> above</link>) and define necessary properties in them. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-toolbar-item{ - font-weight:bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBar_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example font weight for items was changed.</para> - - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:toolBar&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:toolBar&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style:italic; - font-weight:bold; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:toolBar&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:toolBar ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBar_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,the font style and the font weight for items was changed.</para> - - - - <para>The component also has the standard attributes <emphasis> - <property>&quot;style&quot;</property> - </emphasis> and <emphasis> - <property>&quot;styleClass&quot;</property> - </emphasis> that could redefine an appearance of a particular component variants.</para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolBar.jsf... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:toolBar&gt;</property></emphasis> usage and sources for the given example. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,30 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:toolBarGroup</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>A group of items inside a tool bar.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:toolbarGroup&gt;</property></emphasis> with items on it</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBarGroup_init.png" scalefit="1"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Fully skinnable with its child items</para></listitem> - <listitem><para>Grouping bar content</para></listitem> - <listitem><para>Easily place content on either side of tool bar using a predefined group layout</para></listitem> - <listitem><para>Predefined separators for menu items and groups</para></listitem> - <listitem><para>Any content inside</para></listitem> - </itemizedlist> -</section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolBarGroup.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,194 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>items</keyword> -<keyword>rich:toolBarGroup</keyword> -<keyword>HtmlToolBarGroup</keyword> -</keywordset> -</sectioninfo> - <section> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.ToolBarGroup</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlToolBarGroup</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.ToolBarGroup</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.ToolBarGroupRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.ToolBarGroupTag</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Creating the Component with a Page Tag</title> - <para>To create the simplest variant on a page use the following syntax:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:toolBar> - ... - <rich:toolBarGroup> - <!--Set of action or other JSF components--> - </rich:toolBarGroup> - <rich:toolBarGroup> - <!--Set of action or other JSF components--> - </rich:toolBarGroup> - ... -</rich:toolBar> -... -]]></programlisting> - </section> - <section> -<title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlToolBarGroup; -... -HtmlToolBarGroup myToolBarGroup = new HtmlToolBarGroup(); -... -]]></programlisting> - </section> - - - <section> - <title>Details of Usage</title> - <para>A <property>toolBarGroup</property> is a wrapper component that groups <property>toolBar</property> content and facilitates creation of menu and tool bars. All components defined inside are located on a stylized bar with a possibility to group, arrange on the both bar sides, and place predefined separators between them.</para> - <para>Separators are located between components with the help of the <emphasis - -><property>&quot;itemSeparator&quot;</property></emphasis> attribute with four - predefined values:</para> - <itemizedlist> - <listitem><para> &quot;none&quot; </para></listitem> - <listitem><para> &quot;line&quot; </para></listitem> - <listitem><para> &quot;square&quot; </para></listitem> - <listitem><para> &quot;disc&quot; </para></listitem> - </itemizedlist> - <para>To control the group location inside, use the <emphasis - -><property>&quot;location&quot;</property></emphasis> attribute with &quot;left&quot; (DEFAULT) and &quot;right&quot; values.</para> - <para><emphasis role="bold">Example:</emphasis></para> - <programlisting role="XML"><![CDATA[... -<rich:toolBar itemSeparator="disc" width="500"> - <rich:toolBarGroup itemSeparator="line"> - <h:commandLink value="Command 1.1"/> - <h:commandLink value="Command 2.1"/> - </rich:toolBarGroup> - <rich:toolBarGroup itemSeparator="line" location="right"> - <h:commandLink value="Command 1.2"/> - <h:commandLink value="Command 2.2"/> - </rich:toolBarGroup> -</rich:toolBar> -... -]]></programlisting> -<para>The code result is the following:</para> - <figure> - <title>Stylized <emphasis role="bold"><property>&lt;rich:toolbarGroup&gt;</property></emphasis> with <emphasis - - ><property>&quot;location&quot;</property></emphasis>, <emphasis - - ><property>&quot;itemSeparator&quot;</property></emphasis> attributes</title> -<mediaobject> - <imageobject> - <imagedata fileref="images/toolBarGroup2.png"/> - </imageobject> -</mediaobject> - </figure> - </section> - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:toolBarGroup&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:toolBarGroup&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - <section> - <title>Definition of Custom Style Classes</title> - <para>It&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:toolBarGroup&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:toolBarGroup&gt;</property></emphasis> <property>styleClass</property> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style: italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:toolBarGroup&gt;</property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:toolBarGroup ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>&quot;styleClass&quot;</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolBarGroup_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above,font style for first <property>toolBarGroup</property> was changed.</para> - </section> - <section> - <title>Relevant resources links</title> - <para> - Some additional information about usage of component can be found - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolBar.jsf... the component Live Demo page</ulink>. - </para> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,31 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:toolTip</keyword> -</keywordset> -<releaseinfo>3.1.0</releaseinfo> -</sectioninfo> -<section> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> component is used - for creation of event-triggered non modal popup, that contains information regarding the page element, that event was applied to. - </para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolTip_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Highly customizable look and feel </para></listitem> - <listitem><para>Different ways of data loading to toolTip</para></listitem> - <listitem><para>Disablement support</para></listitem> - </itemizedlist> -</section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/toolTip.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,457 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> -<sectioninfo> -<keywordset> -<keyword>toolTip</keyword> -<keyword>rich:toolTip</keyword> -<keyword>HtmltoolTip</keyword> -</keywordset> -</sectioninfo> - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.component.toolTip</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlToolTip</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.component.toolTip</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.renderkit.html.toolTipRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.HtmlToolTipTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section id="tab_ccpt"> - <title>Creating the Component with a Page Tag</title> - <para>The simplest way to create the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> component on a page is as following:</para> - - <programlisting role="XML"><![CDATA[... -<rich:panel> - <rich:toolTip value="Hello, I am the content of this tooltip!"/> -</rich:panel> -... -]]></programlisting> -</section> - -<section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlToolTip; -... -HtmltoolTip mytoolTip = new HtmltoolTip(); -... -]]></programlisting> -</section> - - <section> - <title>Details of Usage</title> - <para> - Text information, labeled on the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>, is specified with <emphasis><property>&quot;value&quot;</property></emphasis> attribute. - Text that is put between tooltip start and end tags will also be rendered as tooltip content and could be marked with HTML tags. - Images, links, buttons and other RichFaces components are also may be put and composed inside the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>. - The <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> borders are stretched automatically to enclose the contents. - </para> - <para> - There are three ways to attach the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> to a page element. - The first and simplest one is when the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is nested into a page element the tooltip is applied to. - This way is shown on example in the <link linkend="tab_ccpt">Creating the Component with a Page Tag</link> section. - The <emphasis><property>&quot;attached&quot;</property></emphasis> attribute is &quot;true&quot; by default in this case, - which means that the tolltip will be invoked automatically when the mouse cursor is hovered above the parent component. - </para> - - <para> - The second one uses <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> <emphasis><property>&quot;for&quot;</property></emphasis> attribute. - In this case the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is defined separately from a component it is applied to. - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panel id="panelId"> -... -</rich:panel> -<rich:toolTip value="This is a tooltip." for="panelId"/>]]></programlisting> - - <para>These two ways are also applicable for HTML elements that are not presented in components tree built by facelets. - Use <emphasis><property>&quot;for&quot;</property></emphasis> attribute to attach the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> in both cases. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<!-- The <rich:toolTip> is nested into the parent HTML element --> -<div id="para1"> - <p>This paragraph and tooltip are nested into the same <div> element.</p> - <rich:toolTip for="para1">This is a tooltip.</rich:toolTip> -</div> - -<!-- The <rich:toolTip> is defined separately --> -<div id="para2"> - <p>The tooltip for this paragraph is defined separately.</p> -</div> -<rich:toolTip for="para2">This is a tooltip.</rich:toolTip>]]></programlisting> - - <para>The third way to invoke the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> uses JS API function. - List of JS API functions available for <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is listed <link linkend="tab_jsapi">below</link>. - JS API functions are defined for a component the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is applied to. - The <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> <emphasis><property>&quot;attached&quot;</property></emphasis> attribute should be set to &quot;false&quot; in this case. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:panel id="panelId" onclick="#{rich:component("tooltipId")}.show(event);" /> -<a4j:form> - <rich:toolTip id="tooltipId" attached="false" value="This is a tooltip."/> -</a4j:form>]]></programlisting> - - <note> - <title>Notes:</title> - <para>To provide <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> component proper work in complex cases do the following: - <itemizedlist> - <listitem><para>specify <emphasis><property>&quot;id&apos;s&quot;</property></emphasis> for both <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> and component it is applied to;</para></listitem> - <listitem><para>define the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> as last child, when nesting it into the component the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is applied to;</para></listitem> - <listitem><para>put the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> into <emphasis role="bold"><property>&lt;a4j:form&gt;</property></emphasis> when invoking it with JS API function.</para></listitem> - </itemizedlist> - </para> - </note> - - <para> - The <emphasis><property>&quot;mode&quot;</property></emphasis> attribute is provided you to control the way of data loading to <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis>. - The component works properly in client and Ajax modes. - In client mode <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> content is rendered once on the server and could be rerendered only via external submit. - In Ajax mode <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> content is requested from server for every activation. - For Ajax mode there is possibility to define a facet <emphasis><property>&quot;defaultContent&quot;</property></emphasis>, which provides default <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> content to be displayed, while main content is loading into the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> (see the example below). - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:commandLink value="Simple Link" id="link"> - <rich:toolTip followMouse="true" direction="top-right" mode="ajax" value="#{bean.toolTipContent}" horizontalOffset="5" - verticalOffset="5" layout="block"> - <f:facet name="defaultContent"> - <f:verbatim>DEFAULT TOOLTIP CONTENT</f:verbatim> - </f:facet> - </rich:toolTip> -</h:commandLink> -... -]]></programlisting> - <para> - This is the result: - </para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> component with default content</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolTip2.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - And after <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> loaded it is changed to next one: - </para> - - <figure> - <title><emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> component with loaded content</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolTip3.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> - <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> appears attached to the corner - dependent on the <emphasis><property>&quot;direction&quot;</property></emphasis> attribute. - By default it is positioned bottom-right. - <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> activation occurs after an event, - defined on the parent component, takes into consideration the &quot;delay&quot; attribute - or after calling JS API function <code>show()</code>. - <emphasis><property>&quot;hideEvent&quot;</property></emphasis> attribute defines the way - how <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> disappears. - It default value is &quot;none&quot;, so the <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> does not disappears. - Deactivation may be set for example on <emphasis><property>mouseout</property></emphasis> event on the parent component - (excepting the situation when the mouse is hovered onto the - <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> itself) - or after calling JS API function <code>hide()</code>. - </para> - <para> - By default, <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> appears smart positioned. But as you can see from the previous example, you - can define an appearance direction via the corresponding attribute <emphasis><property>&quot;direction&quot;</property></emphasis>. - And also it&apos;s possible to define vertical and horizontal offsets relatively to a mouse position. - </para> - <para> - Disabled <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> is rendered to a page as usual but JS that responds for its activation is disabled until <code>enable()</code> is called. - </para> - <para> - Moreover, to add some JavaScript effects, client events defined on it are used: - </para> - <para> - Standart: - <itemizedlist> - <listitem><para><emphasis><property>&quot;onclick&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;ondblclick&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;onmouseout&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;onmousemove&quot;</property></emphasis></para></listitem> - <listitem><para><emphasis><property>&quot;onmouseover&quot;</property></emphasis></para></listitem> - </itemizedlist> - </para> - <para> - Special: - <itemizedlist> - <listitem><para><emphasis><property>&quot;onshow&quot;</property></emphasis> - Called after the tooltip is called (some element hovered) but before its request</para></listitem> - <listitem><para><emphasis><property>&quot;oncomplete&quot;</property></emphasis> - Called just after the tooltip is shown</para></listitem> - <listitem><para><emphasis><property>&quot;onhide&quot;</property></emphasis> - Called after the tooltip is hidden</para></listitem> - </itemizedlist> - </para> - </section> - - <section id="tab_jsapi"> - <title>JavaScript API</title> - <table> - <title>JavaScript API</title> - - <tgroup cols="2"> - <thead> - <row>every acti - <entry>Function</entry> - - <entry>Description</entry> - </row> - </thead> - - <tbody> - - <row> - <entry>show()</entry> - - <entry>Shows the corresponding toolTip</entry> - </row> - - <row> - <entry>hide()</entry> - - <entry>Hides the corresponding toolTip</entry> - </row> - - <row> - <entry>enable()</entry> - - <entry>Enables the corresponding toolTip</entry> - </row> - - <row> - <entry>disable()</entry> - - <entry>Disables the corresponding toolTip</entry> - </row> - - </tbody> - </tgroup> - </table> - - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>defaultContent</entry> - <entry>Defines the default content for toolTip. It is used only if mode = &quot;ajax&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:toolTip&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:toolTip&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - - </section> - <section> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters redefinition for a component</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>tipBackgroundColor</entry> - <entry>background-color</entry> - </row> - <row> - <entry>tipBorderColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>generalSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>generalFamilyFont</entry> - <entry>font-family</entry> - </row> - <row> - <entry>generalFontColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - -</section> - - - <section> - <title>Definition of Custom Style Classes</title> - <table id="tab_cn6"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tool-tip</entry> - <entry>Defines styles for a wrapper &lt;span&gt; or &lt;div&gt; element of a toolTip</entry> - </row> - </tbody> - </tgroup> - </table> - - <para> - It depends on <emphasis role="bold"><property>&lt;rich:toolTip&gt;</property></emphasis> layout what a wrapper element <emphasis role="bold"><property>&lt;span&gt;</property></emphasis> or <emphasis role="bold"><property>&lt;div&gt;</property></emphasis>to choose. - </para> - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:toolTip&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names (possible classes could be found in the table <link linkend="tab_cn6">above</link>) and define necessary properties in them. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.rich-tool-tip{ - background-color: #eef2f8; - border-color: #7196c8; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolTip_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a tool tip background color, border color and font style were changed.</para> - <para>Also it&apos;s possible to change styles of particular <emphasis role="bold" - ><property>&lt;rich:toolTip&gt;</property></emphasis> component. In this case you should create own style classes and use them in corresponding <emphasis role="bold" - ><property>&lt;rich:toolTip&gt;</property></emphasis> <emphasis><property>styleClass</property></emphasis> attributes. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-style: italic; -} -...]]></programlisting> - <para>The <emphasis><property>&quot;styleClass&quot;</property></emphasis> attribute for <emphasis role="bold" - ><property>&lt;rich:toolTip&gt; </property></emphasis> is defined as it&apos;s shown in the example below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:toolTip ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and <emphasis><property>styleClass</property></emphasis> attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/toolTip_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it could be seen on the picture above, background color and border color of <property>tool tip</property> were changed.</para> -</section> - <section> - <title>Relevant Resources Links</title> - <para><ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/toolTip.jsf... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold" - ><property>&lt;rich:toolTip&gt;</property></emphasis> usage and sources for the given example. </para> - </section> -</section> - \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,39 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:tree</keyword> - </keywordset> - </sectioninfo> - <section> - <title>Description</title> - <para>The component is designed for hierarchical data presentation and is applied for building -a tree structure with a drag-and-drop capability. </para> - <figure> - <title>Expanded <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis> with child elements</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tree_init.png"/> - </imageobject> - </mediaobject> - </figure> - <!--para>On the screenshot above, there is an example of the <property>tree</property> with an expanded node. This node - contains its own node with several leaves. Besides, it&apos;s possible to choose your own - icons for tree nodes.</para--> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - -<listitem><para>Highly customizable look-and-feel</para></listitem> -<listitem><para>Built-in drag and drop capability, than enable relocating tree nodes within the tree</para></listitem> -<listitem><para>Built-in Ajax processing</para></listitem> -<listitem><para>Possibility to define a visual representation by node type</para></listitem> -<listitem><para>Support of several root elements in a tree</para></listitem> - - - - - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/tree.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,1082 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>presentation of data</keyword> - <keyword>rich:tree</keyword> - <keyword>HtmlTree</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.Tree</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTree</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.Tree</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TreeRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TreeTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>There are two ways to set up a tree</para> - <itemizedlist> - <listitem> - <para>Using model (<code>org.richfaces.model.TreeNode</code> - or <code>javax.swing.tree.TreeNode</code>) </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tree value="#{library.data}" var="item" > - <rich:treeNode icon="/images/tree/singer.png" > - <h:outputText value="#{item.name}" /> - </rich:treeNode> - ... -</rich:tree> -...]]></programlisting> - - </listitem> - <listitem> - <para> Using model tags <emphasis role="bold"> - <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> - </emphasis>, <emphasis role="bold"> - <property>&lt;rich:treeNodesAdaptor&gt;</property> - </emphasis>. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tree> - <rich:recursiveTreeNodesAdaptor roots="#{fileSystemBean.sourceRoots}" var="item" nodes="#{item.nodes}" /> -</rich:tree> -...]]></programlisting> - </listitem> - </itemizedlist> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlTree; -... -HtmlTree myTree = new HtmlTree(); -...]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> As it has been mentioned <link linkend="tree">above</link> the <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component allows rendering any tree-like data model. </para> - <para> You can build your <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> using model (<code>org.richfaces.model.TreeNode</code> or - <code>javax.swing.tree.TreeNode</code>). In this case the - <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component interacts with data model via - <code>&quot;TreeNode&quot;</code> interface (<ulink - url="&apidoc_framework;/org/richfaces/model/TreeNode.html" - > org.richfaces.model.TreeNode </ulink>) that is used for - the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> nodes representation. </para> - <para> Actually you can develop and use your own implementation of the - <code>&quot;TreeNode&quot;</code> interface or use a - default one, which is defined with a default class - <code>&quot;TreeNodeImpl&quot;</code> (<ulink - url="&apidoc_framework;/org/richfaces/model/TreeNodeImpl.html" - > org.richfaces.model.TreeNodeImpl </ulink>). </para> - <para> The <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute of the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component contains a nodes structure defined in a bean - property. </para> - <para> When the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component is being rendered it iterates over the model - nodes and renders them using one of its <property>immediate</property> - <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> children. Data property of the current model - <code>TreeNode</code> is exposed using <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute, so if - <code>var=&quot;station&quot;</code> you can refer - to that data using <code>#{station}</code> syntax. </para> - <para> In the following example the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> is built from a simple - <code>org.richfaces.model.TreeNode</code> model: </para> - <programlisting role="JAVA"><![CDATA[... -private TreeNodeImpl<String> stationRoot = new TreeNodeImpl<String>(); -private TreeNodeImpl<String> stationNodes = new TreeNodeImpl<String>(); -private String[] kickRadioFeed = { "Hall & Oates - Kiss On My List", - "David Bowie - Let's Dance", "Lyn Collins - Think (About It)", - "Kim Carnes - Bette Davis Eyes", - "KC & the Sunshine Band - Give It Up" }; - ... -stationRoot.setData("KickRadio"); -stationNodes.addChild(0, stationRoot); -for (int i = 0; i < kickRadioFeed.length; i++){ - TreeNodeImpl<String> child = new TreeNodeImpl<String>(); - child.setData(kickRadioFeed[i]); - stationRoot.addChild(i, child); -} -...]]></programlisting> - <para> As it is mentioned before you need to pass - <code>#{stations.stationNodes}</code> property to the <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute and define the <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute in order to refer to the data: </para> - <programlisting role="XML"><![CDATA[... -<rich:tree value="#{stations.stationNodes}" var="station"> - <rich:treeNode> - <h:outputText value="#{station}" /> - </rich:treeNode> -</rich:tree> -...]]></programlisting> - <para> This is a result: </para> - <figure> - <title>A simple <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> from a - <code>org.richfaces.model.TreeNode</code></title> - <mediaobject> - <imageobject> - <imagedata fileref="images/treeModel.png"/> - </imageobject> - </mediaobject> - </figure> - - <para> Implementation of the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component provides another way to build a tree. This - approach implies using a - <code>&quot;XmlTreeDataBuilder&quot;</code> class - (<ulink - url="&apidoc;/org/richfaces/component/xml/XmlTreeDataBuilder.html" - > org.richfaces.component.xml.XmlTreeDataBuilder </ulink>) - that allows to transform XML into structures of objects containing - <code>&quot;XmlNodeData&quot;</code> (<ulink - url="&apidoc_framework;/org/richfaces/component/xml/XmlNodeData.html" - > org.richfaces.component.xml.XmlNodeData </ulink>) - instances as data, which could be represented by the <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component. </para> - <para> Let&apos;s try to build a simple <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> from a local XML file. In the following example a simple - XML file (stations.xml) is used as a radio station playlist: </para> - <programlisting role="XML"><![CDATA[<?xml version="1.0"?> -<station name="KickRadio"> - <feed date="today"> - <song time="07:00">Hall & Oates - Kiss On My List</song> - <song time="07:03">David Bowie - Let's Dance</song> - <song time="07:06">Lyn Collins - Think (About It)</song> - <song time="07:10">Kim Carnes - Bette Davis Eyes</song> - <song time="07:15">KC & the Sunshine Band - Give It Up</song> - </feed> -</station>]]></programlisting> - <para> Now you need to create a bean that holds a model nodes: </para> - <programlisting role="JAVA"><![CDATA[... -private TreeNode data; - ... -FacesContext context = FacesContext.getCurrentInstance(); -data = XmlTreeDataBuilder.build(new InputSource(getClass().getResourceAsStream("stations.xml"))); -...]]></programlisting> - <para> Finally you should set the <emphasis> - <property>&quot;value&quot;</property> - </emphasis> attribute to the <code>data</code> bean property and - define the <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute in order to refer to the data of nodes: </para> - <programlisting role="XML"><![CDATA[... -<rich:tree id="treeXML" value="#{stations.data}" var="vardata"> - <rich:treeNode> - <h:outputText value="#{vardata.attributes['name']}" /> - <h:outputText value="#{vardata.attributes['date']}" /> - <h:outputText value="#{vardata.attributes['time']}" /> - <h:outputText value=" #{vardata.text}" /> - </rich:treeNode> -</rich:tree> -...]]></programlisting> - <para>This is a result:</para> - <figure> - <title>A simple <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> from a local XML file</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/treeXML.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>It&apos;s possible to define a visual representation of a node data - model (to define a node icon) and its behavior in correspondence with - the data contained in this node (with a value of the <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute). The node behavior is defined by the components - nested into the <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> (e.g. links or buttons). For these purposes you should use <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute. For each tree node a value of <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute is evaluated and <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> with a value of <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute equal to a value of <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> is used for node representation. See an example - below.</para> - - <para id="example"> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> - <rich:treeNode type="artist" iconLeaf="/images/tree/singer.png" icon="/images/tree/singer.png"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album" iconLeaf="/images/tree/disc.png" icon="/images/tree/disc.png"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - <rich:treeNode type="song" iconLeaf="/images/tree/song.png" icon="/images/tree/song.png"> - <h:outputText value="#{item.title}" /> - </rich:treeNode> - </rich:tree> -</h:form> -...]]></programlisting> - <para>This is a result: </para> - <figure> - <title>The <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tree2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the example above, when each node of data model is processed, data - contained in the <code>&quot;data&quot;</code> property of - <property>&quot;TreeNode&quot;</property> interface - is assigned to a request scope variable, which name is defined with <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute. The value of the <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute is evaluated in correspondence with the data - assigned to the <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute. The corresponding <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> component (with a value of <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute equal to a value of <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis>) is used for the node representation. For example, during - data model processing, an object with a name &quot;Chris - Rea&quot; was inserted in the <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute. Then the value of <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute was evaluated as - <code>&quot;artist&quot;</code>. Thus, for the node - representation the <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> with <emphasis> - <property>&quot;type&quot;</property> - </emphasis> equal to &quot;<code>artist</code>&quot; was - used.</para> - <para>You can also assign an EL-expression as value of the <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute. See an example below: </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[ -nodeFace="#{data.name != 'param-value' ? 'artist' : 'album'}" - ]]></programlisting> - <para>There are some essential points in a <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute usage: you need to define notions for - <property>typeless</property> and a - <property>default</property> nodes. </para> - - <para>The <property>typeless node</property> is the first <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> component (from all children nodes nested to the <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component) with not defined <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute and defined <emphasis> - <property>&quot;rendered&quot;</property> - </emphasis> attribute. The <property>typeless node</property> is used - for representation when <emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute is null.</para> - <para><property>Default node</property> has the following interior - presentation:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<h:outputText value="#{varAttributeName}"> -...]]></programlisting> - <para> - <emphasis> - <property>&quot;varAttributeName&quot;</property> - </emphasis> is a value for <emphasis> - <property>&quot;var&quot;</property> - </emphasis> attribute. </para> - <para><property>Default node</property> is used in the following cases:</para> - <itemizedlist> - <listitem> - <para><emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute is defined, but its value - isn&apos;t equal to any <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute value from all children - nodes;</para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;nodeFace&quot;</property> - </emphasis> attribute is defined and its value is - equal to a value of some <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute from all children nodes, but - the value of <emphasis> - <property>&quot;rendered&quot;</property> - </emphasis> attribute for this node is - <property>&quot;false&quot;</property>.</para> - </listitem> - </itemizedlist> - <para>There is also one thing that has to be remembered using <emphasis> - <property>&quot;type&quot;</property> - </emphasis> and <emphasis> - <property>&quot;rendered&quot;</property> - </emphasis> attributes: it&apos;s possible to define several - <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> components with equal values of <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute and different values of <emphasis> - <property>&quot;rendered&quot;</property> - </emphasis> attribute. It provides a possibility to define different - representation styles for the same node types. In the example with - artists and their albums (see <link linkend="example">above</link>) - it&apos;s possible to represent albums that are available for sale - and albums that are not available. Please study the example - below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:tree style="width:300px" value="#{library.data}" var="item" nodeFace="#{item.type}"> - ... - <rich:treeNode type="album" iconLeaf="/images/tree/album.gif" icon="/images/tree/album.gif" - rendered="#{item.exist}"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album" iconLeaf="/images/tree/album_absent.gif" icon="/images/tree/album_absent.gif" - rendered="#{not item.exist}"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - ... - </rich:tree> -</h:form> -...]]></programlisting> - <para>This is a result of the code: </para> - <figure> - <title>The <emphasis> - <property>&quot;type&quot;</property> - </emphasis> and the <emphasis> - <property>&quot;rendered&quot;</property> - </emphasis> attributes usage</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tree4.png"/> - </imageobject> - </mediaobject> - </figure> - <para>In the example the <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> components has equal values of the <emphasis> - <property>&quot;type&quot;</property> - </emphasis> attribute. Depending on value of the <emphasis> - <property>&quot;rendered&quot;</property> - </emphasis> attribute the corresponding <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> component is selected for node representation. If an album - is available for sale the value of the <emphasis> - <property>&quot;rendered&quot;</property> - </emphasis> for the first <emphasis> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> component is &quot;true&quot;, for the second one - is &quot;false&quot;. Thus, the first <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> is selected for node representation. </para> - <para>Tree node can be run in tree modes. Modes can be specified with <emphasis> - <property>&quot;switchType&quot;</property> - </emphasis> attribute for<emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component.</para> - <itemizedlist> - <listitem> - <para><code>Ajax</code> (default value) - Ajax submission is - used performing the functionality. Note, that for - collapse/expand operations an Ajax request is sent - to the server and it can cause a short - delay.</para> - </listitem> - <listitem> - <para><code>Server</code> - regular form of submission - request is used.</para> - </listitem> - <listitem> - <para><code>Client</code> – all operations are performed - totally on the client; no interaction with a - server is involved. Full page content is reloaded - after every action.</para> - </listitem> - </itemizedlist> - <para> The <emphasis> - <property>&quot;icon&quot;</property> - </emphasis>, <emphasis> - <property>&quot;iconCollapsed&quot;</property> - </emphasis>, <emphasis> - <property>&quot;iconExpanded&quot;</property> - </emphasis>, <emphasis> - <property>&quot;iconLeaf&quot;</property> - </emphasis> attributes set the icons&apos; images for the - component. You can also define icons using facets with the same names. - If the facets are defined, the corresponding attributes are ignored - and facets&apos; content is used as icons. By default the width of - a rendered facet area is 16px. </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:tree value="#{library.data}" var="item"> - ... - <f:facet name="icon"> - <h:graphicImage value="/images/tree/singer.png "/> - </f:facet> - <f:facet name="iconCollapsed"> - <h:graphicImage value="/images/tree/singer.png" /> - </f:facet> - <f:facet name="iconExpanded"> - <h:graphicImage value="/images/tree/singer.png" /> - </f:facet> - <f:facet name="iconLeaf"> - <h:graphicImage value="/images/tree/song.png" /> - </f:facet> - ... -</rich:tree> -...]]></programlisting> - - <para> The <emphasis role="bold"> - <property>&lt;rich: tree&gt;</property> - </emphasis> component can be used together with <emphasis role="bold"> - <property>&lt;rich: treeNodeAdaptor&gt;</property> - </emphasis>. In this case there is no need to specify the attributes <emphasis> - <property>&quot;value&quot;</property> - </emphasis> and <emphasis> - <property>&quot;var&quot;</property> - </emphasis>. Besides, visual representation shouldn&apos;t be - defined right in the <property>tree</property>. In this case a - <emphasis role="bold"> - <property>&lt;rich: tree&gt;</property> - </emphasis> tag is applied mainly for defining common attributes such - as <emphasis> - <property>&quot;ajaxSubmitSelection&quot;</property> - </emphasis> etc. </para> - <para> Information about the <emphasis> - <property>&quot;process&quot;</property> - </emphasis> attribute usage you can find in the <link - linkend="process"> &quot;Decide what to - process&quot; </link> guide section. </para> - <!--<tip> - <title>Tip:</title> - <para> - <emphasis> - <property>&quot;rowKeyConverter&quot;</property> - </emphasis> support for the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> is pending! </para> - </tip>--> - - <para>As it&apos;s mentioned before, the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component uses a data model to represent the tree-like - nodes structure on the page. To identify a particular node during a - client request, the model provides a set of unique keys for tree - nodes. The <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> can use strings as keys values - which may contain special characters not allowed by browsers, such as - the left angle bracket (&lt;), ampersand (&amp;), ant etc. Thus, to - have a possibility to use unallowed characters in the - <property>tree</property> nodes keys, the following converters - are provided: </para> - <itemizedlist> - <listitem> - <para><code>org.richfaces.TreeRowKeyConverter</code> that is - used for <property>&quot;TreeNode&quot;</property> based trees. - The key should be of a - <code>java.lang.String</code> type.</para> - </listitem> - <listitem> - <para><code>org.richfaces.TreeAdaptorRowKeyConverter</code> - that is used for adaptor-based trees (see - <link linkend="rich_treeNodesAdaptor"><emphasis role="bold"> - <property>&lt;rich:treeNodesAdaptor&gt;</property> - </emphasis></link>, <link linkend="rich_recursiveTreeNodesAdaptor"><emphasis role="bold"> - <property>&lt;rich:recursiveTreeNodesAdaptor&gt;</property> - </emphasis></link>). The key should be of a - <code>java.lang.String</code> type.</para> - </listitem> - <listitem> - <para><code>org.richfaces.TreeAdaptorIntegerRowKeyConverter</code> - which is provided for adaptor-based trees. The key - should be of a <code>java.lang.Integer</code> - type.</para> - </listitem> - </itemizedlist> - - <para>The converters can be extended in order to have a possibility for - implementing custom converters.</para> - <para>To apply a converter to the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component, you should define it as a value of the <emphasis> - <property>&quot;rowKeyConverter&quot;</property> - </emphasis> attribute.</para> - - <para>Have a look at the example of a tree which contains the RichFaces - components as its nodes and the components attributes as the nodes - child elements. As the components have unallowed characters (&lt; - and &gt;) in their names, the <code>org.richfaces.TreeRowKeyConverter</code> is used here.</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<rich:tree value="#{treeBean.data}" var="node" switchType="ajax" rowKeyConverter="org.richfaces.TreeRowKeyConverter"> - <rich:treeNode ajaxSingle="true"> - <h:outputText value="#{node}"/> - </rich:treeNode> -</rich:tree> -...]]></programlisting> - - <para>In the example the tree uses the following data model:</para> - - <programlisting role="JAVA"><![CDATA[... -String[ ] components = {"< a4j:ajaxListener >", "< a4j:keepAlive >", "< a4j:actionparam >" }; -String[ ][ ] attributes = {{"type"}, - {"ajaxOnly", "beanName"}, - {"actionListener", "assignTo", "binding", "converter", "id", "name", "noEscape", "value"}}; - -data = new TreeNodeImpl<String>(); - -for (int i = 0; i < components.length; i++) { - TreeNode<String> child = new TreeNodeImpl<String>(); - child.setData(components[i]); - data.addChild(components[i], child); - - for (int j = 0; j < attributes[i].length; j++) { - TreeNode<String> grandChild = new TreeNodeImpl<String>(); - grandChild.setData(attributes[i][j]); - child.addChild(attributes[i][j], grandChild); - } -} -...]]></programlisting> - - </section> - - <section id="tsebro" role="updated"> - <title>Built-In Drag and Drop</title> - <para>Words &quot;built-in&quot; in this context mean, that <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component has its own attributes, that provide - <property>drag-and-drop</property> capability. These - attributes can be divided into two groups: those ones which provide - <property>drag</property> and those which provide - <property>drop</property> operations (see the tables below). </para> - - <table> - <title>Drag group</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Attribute Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>dragValue</entry> - <entry>Element value drag passed into processing - after a Drop event</entry> - </row> - <row> - <entry>dragListener</entry> - <entry>A listener that processes a Drag - event</entry> - </row> - <row> - <entry>dragIndicator</entry> - <entry>Id of a component that is used as a drag - pointer during the drag operation</entry> - </row> - <row> - <entry>dragType</entry> - <entry>Defines a drag zone type that is used for - definition of a dragged element, which can be - accepted by a drop zone</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Drop group</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Attribute Name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>dropValue</entry> - <entry>Element value drop passed into processing - after Drop events </entry> - </row> - <row> - <entry>dropListener</entry> - <entry>A listener that processes a Drop event. - </entry> - </row> - <row> - <entry>acceptedTypes</entry> - <entry>Drag zone names are allowed to be processed - with a Drop zone</entry> - </row> - <row> - <entry>typeMapping</entry> - <entry>Drag zones names mapping on the - corresponding drop zone parameters</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>Consider <property>drag-and-drop</property> inside a tree. All zones, - which are assumed to be dragged, must be marked. In terms of <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> these zones completely correspond to tree nodes. So, all - dragging nodes should be marked with <emphasis> - <property>&quot;dragType&quot;</property> - </emphasis> attribute. Then, to mark zone(-s), where the dragging node - could be dropped, pass the type of dragging node to the <emphasis> - <property>&quot;acceptedTypes&quot;</property> - </emphasis> attribute of the drop zone. It would be good to itemize, - that each tree node in the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component’s structure has its own - <emphasis>key</emphasis>. Depending on how the component is used, - these keys can be generated by the component itself or can be taken - from the component’s data model. Keys help to identify each node in a - tree; key is what exactly being passing from one node to another in - <property>drag-and-drop</property> operations. Finally, the - method binding, that will process <property>drag-and-drop</property> - operation, should be pointed via <emphasis> - <property>&quot;dropListener&quot;</property> - </emphasis> attribute of the <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis>. </para> - <para> Chapters &quot;<link linkend="ch1">6.40 - &lt;dragIndicator&gt;</link>&quot; and - &quot;<link linkend="dndParam">6.39 - &lt;dndParam&gt;</link>&quot; describes how to - apply visual element, that show some additional information (e.g. - dragging item name) while operating with - <property>drag-and-drop</property>. </para> - <para> Page code, that describes a tree with built in - <property>drag-and-drop</property> in the way it is - considered, is shown below. </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - - <programlisting role="XML"><![CDATA[... -<h:form> - <rich:tree style="width:300px" value="#{libraryAjaxTree.data}" nodeFace="#{item.type}" var="item" dragIndicator=":treeDragIndicator" dropListener="#{libraryAjaxTree.processDrop}"> - <rich:treeNode type="artist" icon="/images/tree/group.png" iconLeaf="/images/tree/group.png" acceptedTypes="album"> - <h:outputText value="#{item.name}" /> - </rich:treeNode> - <rich:treeNode type="album" icon="/images/tree/cd.png" iconLeaf="/images/tree/cd.png" dragType="album" acceptedTypes="song"> - <h:outputText value="#{item.title}" /> - <rich:dndParam name="label" type="drag" value="Album: #{item.title}" /> - </rich:treeNode> - <rich:treeNode type="song" icon="/images/tree/music.png" iconLeaf="/images/tree/music.png" dragType="song"> - <h:outputText value="#{item.title}" /> - <rich:dndParam name="label" type="drag" value="Song: #{item.title}" /> - </rich:treeNode> - </rich:tree> -</h:form> -...]]></programlisting> - - <para>This code renders following tree:</para> - - <figure> - <title>Drag-and-drop operations</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tree5.png"/> - </imageobject> - </mediaobject> - </figure> - - </section> - - <section> - <title>Events handling</title> - <para>Listeners classes that process events on the server side are defined with - the help of:</para> - <itemizedlist> - <listitem> - <para><property>changeExpandListener</property> processes - expand/collapse event of a - <property>treeNode</property></para> - </listitem> - <listitem> - <para><property>dropListener</property> processes a Drop - event</para> - </listitem> - <listitem> - <para><property>dragListener</property> processes a Drag - event</para> - </listitem> - <listitem> - <para><property>nodeSelectListener</property> is called - during request sending on a node selecting event - (if request sending on this event is - defined)</para> - </listitem> - </itemizedlist> - - <para>Listener methods can be defined using the <link linkend="treeNodeKF" - >following attributes</link> or using nested tags.</para> - <para>Client event attributes are:</para> - <itemizedlist> - <listitem> - <para><emphasis> - <property>&quot;onexpand&quot;</property> - </emphasis> is a script expression to invoke when - a node is expanded</para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;oncollapse&quot;</property> - </emphasis> is a script expression to invoke when - a node is collapsed</para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;ondragexit&quot;</property> - </emphasis> is a script expression to invoke when - an element passing out from a tree zone</para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;ondragstart&quot;</property> - </emphasis> is a script expression to invoke when - dragging starts</para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;ondragend&quot;</property> - </emphasis> is a script expression to invoke when - dragging ends (a drop event)</para> - </listitem> - <listitem> - <para><emphasis> - <property>&quot;ondragenter&quot;</property> - </emphasis>is a script expression to invoke when a - dragged element appears on a tree</para> - </listitem> - </itemizedlist> - - <para>They can be used to add some JavaScript effects.</para> - - <para> Standart HTML event attributes like<emphasis> - <property>&quot;onclick&quot;</property> - </emphasis>, <emphasis> - <property>&quot;onmousedown&quot;</property> - </emphasis>, <emphasis> - <property>&quot;onmouseover&quot;</property> - </emphasis> etc. can be also used. Event handlers of a <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component capture events occured on any - <property>tree</property> part. But event handlers of - <property>treeNode</property> capture events occured on - <property>treeNode</property> only, except for children - events. </para> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>icon</entry> - <entry>Redefines the icon for node. Related - attribute is &quot;icon&quot;</entry> - </row> - <row> - <entry>iconCollapsed</entry> - <entry>Redefines the icon for collapsed node. - Related attribute is - &quot;iconCollapsed&quot;</entry> - </row> - <row> - <entry>iconExpanded</entry> - <entry>Redefines the icon for expanded node. - Related attribute is - &quot;iconExpanded&quot;</entry> - </row> - <row> - <entry>iconLeaf</entry> - <entry>Redefines the icon for component leaves. - Related attribute is - &quot;iconLeaf&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section> - <title>Skin Parameters Redefinition:</title> - <para>There is only one skin parameter for <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis>. As it&apos;s a wrapper component for <emphasis - role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> components, look and feel customization is described in - the <link linkend="SPRofTN">corresponding section</link>.</para> - <table> - <title>Skin parameters for a wrapper element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>overAllBackground</entry> - <entry>background-color </entry> - </row> - </tbody> - </tgroup> - </table> - </section> - <section> - <title>Definition of Custom Style Classes</title> - - <table id="tab_cn7"> - <title>Classes names that define a component appearance</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tree</entry> - <entry>Defines styles for a wrapper - &lt;div&gt; element of a tree</entry> - </row> - </tbody> - </tgroup> - </table> - - <para>In order to redefine styles for all <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to - create classes with the same names (possible classes could be found in - the table <link linkend="tab_cn7">above</link>) and define necessary - properties in them. An example is placed below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... - .rich-tree{ - font-weight:bold; -} -...]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with predefined classes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tree_pc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>In the example a tree font weight was changed to bold.</para> - <para>Also it&apos;s possible to change styles of a particular <emphasis - role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> component. In this case you should create own style - classes and use them in corresponding <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> - <property>styleClass</property> attributes. An example is placed - below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="CSS"><![CDATA[... -.myClass{ - font-weight:bold; -} -...]]></programlisting> - <para>The <emphasis> - <property>&quot;highlightedClass&quot;</property> - </emphasis> attribute for <emphasis role="bold"> - <property>&lt;rich:tree&gt; </property> - </emphasis> is defined as it&apos;s shown in the example - below:</para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[<rich:tree ... styleClass="myClass"/> -]]></programlisting> - - <para>This is a result:</para> - - <figure> - <title>Redefinition styles with own classes and styleClass - attributes</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/tree_oc.png"/> - </imageobject> - </mediaobject> - </figure> - - <para>As it&apos;s shown on the picture above, font weight of highlighted - text node of a <property>tree</property> was changed to bold.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?c=... - >On the component LiveDemo page</ulink> you can see the - example of <emphasis role="bold"> - <property>&lt;rich:tree&gt;</property> - </emphasis> usage and sources for the given example. </para> - <para>How to Expand/Collapse Tree Nodes from code, see in this<ulink - url="http://labs.jboss.com/wiki/ExpandCollapseTreeNodes" - >wiki article</ulink>. </para> - </section> - -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,33 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:treeNode</keyword> -</keywordset> -</sectioninfo> -<section> -<title>Description</title> - <para>The <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property></emphasis> component is designed - for creating sets of tree elements within a <emphasis role="bold"><property>&lt;rich:tree&gt;</property></emphasis>component. - - </para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:treeNode&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/treeNode_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section id="treeNodeKF"> - <title>Key Features</title> - - <itemizedlist> - <listitem><para>Possibility to assign different icon images for each node within a tree</para></listitem> - <listitem><para>Drag and Drop support</para></listitem> - <listitem><para>Look-and-Feel customization</para></listitem> - - </itemizedlist> - </section> -</section> \ No newline at end of file Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNode.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,426 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>node</keyword> - <keyword>rich:treeNode</keyword> - <keyword>HtmlTreeNode</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.TreeNode</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTreeNode</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.TreeNode</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.TreeNodeRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TreeNodeTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para>Here is a simple example as it can be used on a page: </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tree ... faceNode="simpleNode"> - <rich:treeNode type="simpleNode"> - <!--Tree node data displaying template--> - </rich:treeNode> -</rich:tree> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlTreeNode; -... -HtmlTreeNode myPanel = new HtmlTreeNode(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - <para> The <emphasis> - <property>&quot;icon&quot;</property> - </emphasis>, <emphasis> - <property>&quot;iconCollapsed&quot;</property> - </emphasis>, <emphasis> - <property>&quot;iconExpanded&quot;</property> - </emphasis>, <emphasis> - <property>&quot;iconLeaf&quot;</property> - </emphasis> attributes define icons for the component. Also you can define icons using facets - with the same names. If the facets are defined, the corresponding attributes are ignored and - facets contents are used as icons. The width of a rendered facet area is 16px. </para> - - <programlisting role="XML"><![CDATA[... -<rich:tree ...> - ... - <rich:treeNode ...> - <f:facet name="icon"> - <outputText value="A"/> - </f:facet> - <f:facet name="iconCollapsed"> - <outputText value="B"/> - </f:facet> - <f:facet name="iconExpanded"> - <outputText value="C"/> - </f:facet> - <f:facet name="iconLeaf"> - <outputText value="D"/> - </f:facet> - </rich:treeNode> - ... -</rich:tree> -... -]]></programlisting> - <para>As it has been mentioned <link linkend="treeNode">above</link>, <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property></emphasis> defines a template for nodes - rendering in a tree. Thus, during XML document rendering (a web.xml application) as a tree, - the following nodes output (passed via <code>var=&quot;data&quot;</code> on a tree) happens:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tree ... faceNode="simpleNode" ... value="#{bean.data}" var="data"> - <rich:treeNode type="simpleNode"> - <h:outputText value="context-param:"/> - <h:inputText value="#{data.name}"/> - </rich:treeNode> -</rich:tree> -... -]]></programlisting> - <figure> - <title>Nodes output</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/treeNode2.png"/> - </imageobject> - </mediaobject> - </figure> - <para>Hence,<emphasis role="bold"><property>&lt;h:outputText /&gt;</property></emphasis> tag outputs the <code>&quot;context-param&quot;</code> string and - then the <emphasis role="bold"><property>&lt;h:inputText /&gt;</property></emphasis> outputs the <code>data.name</code> element of this node. - </para> - <para>Different nodes for rendering could be defined depending on some conditions on the tree - level. Each condition represents some rendering template. To get more information on various - <property>treeNodesAdaptorAdaptor</property> definition for nodes, <link linkend="tree">see the tree - component chapter</link>.</para> - <para>Switching between expanded/collapsed modes is also managed on the tree level and defined - in <link linkend="tree">the corresponding section</link>.</para> - <para>Default nodes of the tree level as well as the ones defined with the - <property>treeNodesAdaptorAdaptor</property> component could send Ajax requests when selected with the - mouse, it&apos;s managed with the <emphasis> - <property>&quot;ajaxSubmitSelection&quot;</property> - </emphasis> attribute (true/false).</para> - <para> - Information about the <emphasis><property>&quot;process&quot;</property></emphasis> attribute usage you can find <link linkend="process">&quot; Decide what to process &quot; </link> guide section. - </para> - </section> - <section> - <title>Built-in Drag and Drop</title> - <para>The main information on Drag and Drop operations is given in <link linkend="tree">the - corresponding paragraph</link> of the <property>tree</property> component chapter. - It&apos;s only necessary to mention that each node could also be a Drag element as well as - a Drop container, i.e. the container and the element have all attributes, listeners and ways - of behavior similar to the ones of the <emphasis role="bold"> - <property>&lt;rich:dragSupport &gt;</property> - </emphasis> and <emphasis role="bold"> - <property>&lt;rich:dropSupport &gt;</property> - </emphasis> components simultaneously.</para> - </section> - <section> - <title>Events Handling</title> - <para>Just as Drag and Drop operations it corresponds to the one described on <link - linkend="tree">the tree component level</link> for a default Node.</para> - </section> - - <section> - <title>Facets</title> - <table> - <title>Facets</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Facet name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>icon</entry> - <entry>Redefines the icon for node. Related attribute is &quot;icon&quot;</entry> - </row> - <row> - <entry>iconCollapsed</entry> - <entry>Redefines the icon for collapsed node. Related attribute is &quot;iconCollapsed&quot;</entry> - </row> - <row> - <entry>iconExpanded</entry> - <entry>Redefines the icon for expanded node. Related attribute is &quot;iconExpanded&quot;</entry> - </row> - <row> - <entry>iconLeaf</entry> - <entry>Redefines the icon for component leaves. Related attribute is &quot;iconLeaf&quot;</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Look-and-Feel Customization</title> - - <para>For skinnability implementation, the components use a <emphasis> - <property>style class redefinition method.</property> - </emphasis> Default style classes are mapped on <emphasis> - <property>skin parameters.</property> - </emphasis></para> - - <para>There are two ways to redefine the appearance of all <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> components at once:</para> - - <itemizedlist> - <listitem> - <para>Redefine the corresponding skin parameters</para> - </listitem> - - <listitem> - <para>Add to your style sheets <emphasis> - <property>style classes</property> - </emphasis> used by a <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> component</para> - </listitem> - </itemizedlist> - </section> - - <section id="SPRofTN"> - <title>Skin Parameters Redefinition</title> - <table> - <title>Skin parameters for a node element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>panelTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>preferableDataSizeFont</entry> - <entry>font-size</entry> - </row> - <row> - <entry>preferableDataFamilyFont</entry> - <entry>font-family</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters for a selected element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>headerBackgroundColor</entry> - <entry>border-color</entry> - </row> - <row> - <entry>panelTextColor</entry> - <entry>color</entry> - </row> - <row> - <entry>selectControlColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - <table> - <title>Skin parameters for a mouseovered element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Skin parameters</entry> - <entry>CSS properties</entry> - </row> - </thead> - <tbody> - <row> - <entry>selectControlColor</entry> - <entry>color</entry> - </row> - </tbody> - </tgroup> - </table> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <para>On the screenshot there are classes names that define styles for component elements.</para> - - <figure> - <title>Classes names</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/treeNode_cn.png"/> - </imageobject> - </mediaobject> - </figure> - - <table> - <title>Classes names that define a node element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-tree-node</entry> - <entry>Defines styles for a tree node</entry> - </row> - - <row> - <entry>rich-tree-node-handle</entry> - <entry>Defines styles for a tree node handle</entry> - </row> - - <row> - <entry>rich-tree-node-handleicon</entry> - <entry>Defines styles for a tree node handle icon</entry> - </row> - - <row> - <entry>rich-tree-node-children</entry> - <entry>Defines styles for all tree node subnodes</entry> - </row> - <row> - <entry>rich-tree-node-text</entry> - <entry>Defines styles for a tree node text</entry> - </row> - <row> - <entry>rich-tree-node-icon</entry> - <entry>Defines styles for a tree node icon</entry> - </row> - <row> - <entry>rich-tree-h-ic-img</entry> - <entry>Defines styles for an image of a tree node</entry> - </row> - <row> - <entry>rich-tree-node-icon-leaf</entry> - <entry>Defines styles for a tree node icon leaf</entry> - </row> - </tbody> - </tgroup> - </table> - - <table> - <title>Classes names that define states for a node element</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - - <row> - <entry>rich-tree-node-selected</entry> - <entry>Defines styles for a selected tree node </entry> - </row> - <row> - <entry>rich-tree-node-highlighted</entry> - <entry>Defines styles for a highlighted tree node </entry> - </row> - - <row> - <entry>rich-tree-node-handleicon-collapsed</entry> - <entry>Defines styles for a collapsed tree node handleicon </entry> - </row> - <row> - <entry>rich-tree-node-handleicon-expanded</entry> - <entry>Defines styles for a expanded tree node handleicon</entry> - </row> - - </tbody> - </tgroup> - </table> - - <para>In order to redefine the style for all <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> components on a page using CSS, it&apos;s enough to create classes with the - same names and define the necessary properties in them.</para> - - <para>For instance, if you need to change the size of a tree node image, you should redefine the <code>.rich-tree-h-ic-img</code> class properties:</para> - <programlisting role="CSS"><![CDATA[... -.rich-tree-h-ic-img{ - width:30px; - height:30px; -} -...]]></programlisting> - - <para>To change the style of particular <emphasis role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis> components define your own style classes in the corresponding <emphasis - role="bold"> - <property>&lt;rich:treeNode&gt;</property> - </emphasis>attributes.</para> - <para>It is also possible to change look and feel of specific <emphasis role="bold"><property>&lt;rich:treeNode&gt;</property> - </emphasis> with the help of defining for them <emphasis> - <property>&quot;selectedClass&quot;</property> - </emphasis> and <emphasis> - <property>&quot;highlightedClass&quot;</property> - </emphasis> attributes by their specific classes.</para> - </section> - - <section> - <title>Relevant Resources Links</title> - <para>How to Expand/Collapse Tree Nodes from code see in this<ulink - url="http://labs.jboss.com/wiki/ExpandCollapsetreeNodesAdaptor"... article</ulink>. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,31 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> - <sectioninfo> - <keywordset> - <keyword>rich:treeNodesAdaptor</keyword> - </keywordset> - <releaseinfo>3.1.0</releaseinfo> - </sectioninfo> - <section> - <title>Description</title> - <para> - The <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> provides the possibility to define data models - and create representations for them. - </para> - <figure> - <title>Expanded tree with <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis></title> - <mediaobject> - <imageobject> - <imagedata fileref="images/treeNodesAdaptor_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Allows to define combined data models</para></listitem> - <listitem><para>Possibility to define nodes for processing via attributes</para></listitem> - </itemizedlist> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/treeNodesAdaptor.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,132 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>treeNodesAdaptor</keyword> - <keyword>rich:treeNodesAdaptor</keyword> - <keyword>HtmltreeNodesAdaptor</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.TreeNodesAdaptor</entry> - </row> - <row> - <entry>component-class</entry> - <entry>org.richfaces.component.html.HtmlTreeNodesAdaptor</entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.TreeNodesAdaptor</entry> - </row> - <!-- - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.EffectRenderer</entry> - </row> - --> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.TreeNodesAdaptorTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <!--para> - In order to create the simplest variant of <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> on a page use the - following syntax: - </para--> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:treeNodesAdaptor var="issue" nodes="#{model.issues}"> - <rich:treeNode> - <h:commandLink action="#{project.click}" value="Project: #{project.name}" /> - </rich:treeNode> - ... - <!-- Others nodes --> - ... -</rich:treeNodesAdaptor> -...]]></programlisting> - </section> - - <section> - <title>Creating the Component Dynamically Using Java</title> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlTreeNodesAdaptor; -... -HtmlTreeNodesAdaptor myTreeNodesAdaptor = new HtmlTreeNodesAdaptor(); -... -]]></programlisting> - </section> - - <section> - <title>Details of Usage</title> - <para> - The <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component - has a <emphasis><property>&quot;nodes&quot;</property></emphasis> attribute that defines a collection of elements to iterate through. - </para> - <para> - Collections are allowed to include lists, arrays, maps, XML NodeList and NamedNodeMap either as a single object. - </para> - <para> - The <emphasis><property>&quot;var&quot;</property></emphasis> attribute is used to access to the current collection element. - </para> - <para> - The <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor&gt;</property></emphasis> component can be nested without any limitations. - See the following example. - </para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:tree adviseNodeOpened="#{treeModelBean.adviseNodeOpened}" switchType="client"> - <rich:treeNodesAdaptor id="project" nodes="#{loaderBean.projects}" var="project"> - <rich:treeNode> - <h:commandLink action="#{project.click}" value="Project: #{project.name}" /> - </rich:treeNode> - <rich:treeNodesAdaptor id="srcDir" var="srcDir" nodes="#{project.srcDirs}"> - <rich:treeNode> - <h:commandLink action="#{srcDir.click}" value="Source directory: #{srcDir.name}" /> - </rich:treeNode> - <rich:treeNodesAdaptor id="pkg" var="pkg" nodes="#{srcDir.packages}"> - <rich:treeNode> - <h:commandLink action="#{pkg.click}" value="Package: #{pkg.name}" /> - </rich:treeNode> - <rich:treeNodesAdaptor id="class" var="class" nodes="#{pkg.classes}"> - <rich:treeNode> - <h:commandLink action="#{class.click}" value="Class: #{class.name}" /> - </rich:treeNode> - </rich:treeNodesAdaptor> - </rich:treeNodesAdaptor> - </rich:treeNodesAdaptor> - </rich:treeNodesAdaptor> -</rich:tree> -...]]></programlisting> - - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/treeNodesAd... - >On the component LiveDemo page</ulink> you can see the example of <emphasis role="bold"><property>&lt;rich:treeNodesAdaptor &gt;</property></emphasis> - usage and sources for the given example. </para> - </section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.desc.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.desc.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.desc.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,29 +0,0 @@ -<?xml version="1.0" encoding="UTF-8"?> -<section> -<sectioninfo> -<keywordset> - <keyword>rich:virtualEarth</keyword> -</keywordset> -<releaseinfo>3.1.0</releaseinfo> -</sectioninfo> -<section> -<title>Description</title> - <para>The component presents the Microsoft <property>Virtual Earth map</property> in the JSF applications.</para> - <figure> - <title><emphasis role="bold"><property>&lt;rich:virtualEarth&gt;</property></emphasis> component</title> - <mediaobject> - <imageobject> - <imagedata fileref="images/virtualEarth_init.png"/> - </imageobject> - </mediaobject> - </figure> - </section> - <section> - <title>Key Features</title> - <itemizedlist> - <listitem><para>Presents the Microsoft <property>Virtual Earth map</property> functionality</para></listitem> - <listitem><para>Highly customizable via attributes</para></listitem> - <listitem><para>No developers JavaScript writing is needed to use it on a pages</para></listitem> - </itemizedlist> -</section> -</section> Deleted: branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/included/virtualEarth.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,283 +0,0 @@ -<?xml version='1.0' encoding='UTF-8'?> -<section> - <sectioninfo> - <keywordset> - <keyword>map</keyword> - <keyword>Virtual Earth</keyword> - </keywordset> - </sectioninfo> - - <table> - <title>Component identification parameters</title> - <tgroup cols="2"> - <thead> - <row> - <entry>Name</entry> - <entry>Value</entry> - </row> - </thead> - <tbody> - <row> - <entry>component-type</entry> - <entry>org.richfaces.VirtualEarth</entry> - </row> - <row> - <entry>component-class</entry> - <entry> - org.richfaces.component.html.HtmlVirtualEarth - </entry> - </row> - <row> - <entry>component-family</entry> - <entry>org.richfaces.VirtualEarth</entry> - </row> - <row> - <entry>renderer-type</entry> - <entry>org.richfaces.VirtualEarthRenderer</entry> - </row> - <row> - <entry>tag-class</entry> - <entry>org.richfaces.taglib.VirtualEarthTag</entry> - </row> - </tbody> - </tgroup> - </table> - - <section> - <title>Creating the Component with a Page Tag</title> - <para> - To create the simplest variant on a page use the following - syntax: - </para> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:virtualEarth lat="..." lng="..."/> -... -]]></programlisting> - </section> - <section> - <title>Creating the Component Dynamically Using Java</title> - - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlVirtualEarth; -... -HtmlVirtualEarth myMap = new HtmlVirtualEarth(); -... -]]></programlisting> - </section> - <section> - <title>Details of Usage</title> - - <para> - Here are the main settings of initial rendering performed - with a component - <property>map</property> - that are accessible with the following attributes: - </para> - <itemizedlist> - <listitem> - <para> - <emphasis> - <property>&quot;zoom&quot;</property> - </emphasis> - defines an approximation size (boundary values 1-18) - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;lat&quot;</property> - </emphasis> - specifies an initial latitude coordinate in degrees, - as a number between -90 and +90 - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;lng&quot;</property> - </emphasis> - specifies an initial longitude coordinate in - degrees, as a number between -180 and +180 - </para> - </listitem> - <listitem> - <para> - <emphasis> - <property>&quot;dashboardSize&quot;</property> - </emphasis> - specifies a type of a rendered map (Normal, Small, - Tiny) - </para> - </listitem> - </itemizedlist> - <para> - For example, the city of Paris is shown after rendering with - the following initial settings: - <code>lat = &quot;48.833&quot;</code> - , - <code>lng = &quot;2.40&quot;</code> - and - <code>zoom = &quot;11&quot;</code> - . - </para> - <figure> - <title> - <emphasis role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis> - initial rendering - </title> - <mediaobject> - <imageobject> - <imagedata fileref="images/virtualEarth2.png" /> - </imageobject> - </mediaobject> - </figure> - <para>Code for this example is placed below:</para> - <para> - <emphasis role="bold">Example:</emphasis> - </para> - <programlisting role="XML"><![CDATA[... -<rich:virtualEarth style="width:800px;" id="vm" lat="48.833" lng="2.40" - dashboardSize="Normal" zoom="11" mapStyle="Hybrid" var="map" /> -... -]]></programlisting> - - <para> - To set all these parameters and perform some activity (Zoom - In/Out etc.) is possible with your JavaScript, i.e. declare - a name of an object on a - <property>map</property> - in the - <emphasis> - <property>&quot;var&quot;</property> - </emphasis> - attribute and then call the object directly with API - <emphasis> - <property>Microsoft Virtual Earth map</property> - . - </emphasis> - </para> - <para> - For example, to approximate a map for - <code>var = &quot;map&quot;</code> - declared inside the component, call - <code>map.ZoomIn()</code> - on an event. - </para> - <para> - Moreover, to add e.g. some JavaScript effects, events - defined on it are used. - </para> - <itemizedlist> - <listitem> - <para><emphasis><property>&quot;onmouseover&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onclick&quot;</property></emphasis></para> - </listitem> - <listitem> - <para><emphasis><property>&quot;onmouseout&quot;</property></emphasis></para> - </listitem> - <listitem> - <para>etc.</para> - </listitem> - </itemizedlist> - - <note> - <para> - Virtual Earth does not support XHTML format of the page. - Thus, if you use Facelets and JSF 1.2, do not forget to - put the following tags somewhere on the page: - </para> - <programlisting role="XML"><![CDATA[... -<f:view contentType="text/html">...</f:view> -... -]]></programlisting> - </note> - - </section> - <section> - <title>Look-and-Feel Customization</title> - <para> - <emphasis role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis> - component isn&apos;t tied to skin parameters, as there is no - additional elements on it, except the ones provided with - <emphasis> - <property>Virtual Earth map</property> - . - </emphasis> - </para> - </section> - - <section> - <title>Definition of Custom Style Classes</title> - <table> - <title> - Classes names that define a component appearance - </title> - <tgroup cols="2"> - <thead> - <row> - <entry>Class name</entry> - <entry>Description</entry> - </row> - </thead> - <tbody> - <row> - <entry>rich-virtualEarth</entry> - <entry> - Defines styles for a wrapper &lt;div&gt; - element of a component - </entry> - </row> - </tbody> - </tgroup> - </table> - - <para> - In order to redefine styles for all - <emphasis role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis> - components on a page using CSS, it&apos;s enough to create - class with the same name and define necessary properties in - it. - </para> - - <para> - To change styles of particular - <emphasis role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis> - components, define your own style class in the corresponding - <emphasis role="bold"> - <property>&lt;rich:virtualEarth&gt;</property> - </emphasis> - attribute. - </para> - </section> - <section> - <title>Relevant Resources Links</title> - <para> - <ulink - url="http://msdn2.microsoft.com/en-us/library/bb429619.aspx"> - Here - </ulink> - you can found additional information about Microsoft - <property>Virtual Earth map</property>. - </para> - <para> - Some additional information about usage of component can be found - <ulink url="http://livedemo.exadel.com/richfaces-demo/richfaces/virtualEart... its LiveDemo page</ulink>.</para> - </section> - -</section> Modified: branches/community/3.3.X/docs/userguide/en/src/main/docbook/master.xml =================================================================== --- branches/community/3.3.X/docs/userguide/en/src/main/docbook/master.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/en/src/main/docbook/master.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -1,6 +1,8 @@ <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE book PUBLIC "-//OASIS//DTD DocBook XML V4.3//EN" "http://www.docbook.org/xml/4.3CR3/docbookx.dtd" [ + + <!ENTITY rfcintro SYSTEM "modules/RFCintro.xml"> <!ENTITY rfctechreqs SYSTEM "modules/RFCtechreqs.xml"> <!ENTITY rfcGettingStarted SYSTEM "modules/RFCGettingStarted.xml"> @@ -11,131 +13,132 @@ <!ENTITY rfcidesupport SYSTEM "modules/RFCidesupport.xml"> <!ENTITY rfclinks SYSTEM "modules/RFClinks.xml"> - <!ENTITY a4j_actionparam SYSTEM "../../../target/generated/a4j_actionparam.xml"> - <!ENTITY a4j_form SYSTEM "../../../target/generated/a4j_form.xml"> - <!ENTITY a4j_region SYSTEM "../../../target/generated/a4j_region.xml"> - <!ENTITY a4j_support SYSTEM "../../../target/generated/a4j_support.xml"> - <!ENTITY a4j_commandButton SYSTEM "../../../target/generated/a4j_commandButton.xml"> - <!ENTITY a4j_commandLink SYSTEM "../../../target/generated/a4j_commandLink.xml"> - <!ENTITY a4j_jsFunction SYSTEM "../../../target/generated/a4j_jsFunction.xml"> - <!ENTITY a4j_poll SYSTEM "../../../target/generated/a4j_poll.xml"> - <!ENTITY a4j_push SYSTEM "../../../target/generated/a4j_push.xml"> - <!ENTITY a4j_queue SYSTEM "../../../target/generated/a4j_queue.xml"> - <!ENTITY a4j_status SYSTEM "../../../target/generated/a4j_status.xml"> - <!ENTITY a4j_ajaxListener SYSTEM "../../../target/generated/a4j_ajaxListener.xml"> + <!ENTITY a4j_actionparam SYSTEM "included/a4j_actionparam.xml"> + <!ENTITY a4j_form SYSTEM "included/a4j_form.xml"> + <!ENTITY a4j_region SYSTEM "included/a4j_region.xml"> + <!ENTITY a4j_support SYSTEM "included/a4j_support.xml"> + <!ENTITY a4j_commandButton SYSTEM "included/a4j_commandButton.xml"> + <!ENTITY a4j_commandLink SYSTEM "included/a4j_commandLink.xml"> + <!ENTITY a4j_jsFunction SYSTEM "included/a4j_jsFunction.xml"> + <!ENTITY a4j_poll SYSTEM "included/a4j_poll.xml"> + <!ENTITY a4j_push SYSTEM "included/a4j_push.xml"> + <!ENTITY a4j_queue SYSTEM "included/a4j_queue.xml"> + <!ENTITY a4j_status SYSTEM "included/a4j_status.xml"> + <!ENTITY a4j_ajaxListener SYSTEM "included/a4j_ajaxListener.xml"> - <!ENTITY a4j_loadBundle SYSTEM "../../../target/generated/a4j_loadBundle.xml"> - <!ENTITY a4j_loadScript SYSTEM "../../../target/generated/a4j_loadScript.xml"> - <!ENTITY a4j_loadStyle SYSTEM "../../../target/generated/a4j_loadStyle.xml"> - <!ENTITY a4j_keepAlive SYSTEM "../../../target/generated/a4j_keepAlive.xml"> + <!ENTITY a4j_loadBundle SYSTEM "included/a4j_loadBundle.xml"> + <!ENTITY a4j_loadScript SYSTEM "included/a4j_loadScript.xml"> + <!ENTITY a4j_loadStyle SYSTEM "included/a4j_loadStyle.xml"> + <!ENTITY a4j_keepAlive SYSTEM "included/a4j_keepAlive.xml"> - <!ENTITY rich_ajaxValidator SYSTEM "../../../target/generated/rich_ajaxValidator.xml"> - <!ENTITY rich_beanValidator SYSTEM "../../../target/generated/rich_beanValidator.xml"> - <!ENTITY rich_graphValidator SYSTEM "../../../target/generated/rich_graphValidator.xml"> + <!ENTITY rich_ajaxValidator SYSTEM "included/rich_ajaxValidator.xml"> + <!ENTITY rich_beanValidator SYSTEM "included/rich_beanValidator.xml"> + <!ENTITY rich_graphValidator SYSTEM "included/rich_graphValidator.xml"> - <!ENTITY a4j_mediaOutput SYSTEM "../../../target/generated/a4j_mediaOutput.xml"> - <!ENTITY a4j_include SYSTEM "../../../target/generated/a4j_include.xml"> - <!ENTITY a4j_outputPanel SYSTEM "../../../target/generated/a4j_outputPanel.xml"> + <!ENTITY a4j_mediaOutput SYSTEM "included/a4j_mediaOutput.xml"> + <!ENTITY a4j_include SYSTEM "included/a4j_include.xml"> + <!ENTITY a4j_outputPanel SYSTEM "included/a4j_outputPanel.xml"> - <!ENTITY a4j_page SYSTEM "../../../target/generated/a4j_page.xml"> - <!ENTITY a4j_portlet SYSTEM "../../../target/generated/a4j_portlet.xml"> - <!ENTITY a4j_htmlCommandLink SYSTEM "../../../target/generated/a4j_htmlCommandLink.xml"> - <!ENTITY a4j_log SYSTEM "../../../target/generated/a4j_log.xml"> + <!ENTITY a4j_page SYSTEM "included/a4j_page.xml"> + <!ENTITY a4j_portlet SYSTEM "included/a4j_portlet.xml"> + <!ENTITY a4j_htmlCommandLink SYSTEM "included/a4j_htmlCommandLink.xml"> + <!ENTITY a4j_log SYSTEM "included/a4j_log.xml"> - <!ENTITY rich_column SYSTEM "../../../target/generated/rich_column.xml"> - <!ENTITY rich_columnGroup SYSTEM "../../../target/generated/rich_columnGroup.xml"> - <!ENTITY rich_columns SYSTEM "../../../target/generated/rich_columns.xml"> - <!ENTITY rich_dataDefinitionList SYSTEM "../../../target/generated/rich_dataDefinitionList.xml"> - <!ENTITY rich_dataFilterSlider SYSTEM "../../../target/generated/rich_dataFilterSlider.xml"> - <!ENTITY rich_dataGrid SYSTEM "../../../target/generated/rich_dataGrid.xml"> - <!ENTITY rich_dataList SYSTEM "../../../target/generated/rich_dataList.xml"> - <!ENTITY rich_dataOrderedList SYSTEM "../../../target/generated/rich_dataOrderedList.xml"> - <!ENTITY rich_datascroller SYSTEM "../../../target/generated/rich_datascroller.xml"> - <!ENTITY rich_dataTable SYSTEM "../../../target/generated/rich_dataTable.xml"> - <!ENTITY rich_subTable SYSTEM "../../../target/generated/rich_subTable.xml"> - <!ENTITY rich_extendedDataTable SYSTEM "../../../target/generated/rich_extendedDataTable.xml"> - <!ENTITY a4j_repeat SYSTEM "../../../target/generated/a4j_repeat.xml"> - <!ENTITY rich_scrollableDataTable SYSTEM "../../../target/generated/rich_scrollableDataTable.xml"> + <!ENTITY rich_column SYSTEM "included/rich_column.xml"> + <!ENTITY rich_columnGroup SYSTEM "included/rich_columnGroup.xml"> + <!ENTITY rich_columns SYSTEM "included/rich_columns.xml"> + <!ENTITY rich_dataDefinitionList SYSTEM "included/rich_dataDefinitionList.xml"> + <!ENTITY rich_dataFilterSlider SYSTEM "included/rich_dataFilterSlider.xml"> + <!ENTITY rich_dataGrid SYSTEM "included/rich_dataGrid.xml"> + <!ENTITY rich_dataList SYSTEM "included/rich_dataList.xml"> + <!ENTITY rich_dataOrderedList SYSTEM "included/rich_dataOrderedList.xml"> + <!ENTITY rich_datascroller SYSTEM "included/rich_datascroller.xml"> + <!ENTITY rich_dataTable SYSTEM "included/rich_dataTable.xml"> + <!ENTITY rich_subTable SYSTEM "included/rich_subTable.xml"> + <!ENTITY rich_extendedDataTable SYSTEM "included/rich_extendedDataTable.xml"> + <!ENTITY a4j_repeat SYSTEM "included/a4j_repeat.xml"> + <!ENTITY rich_scrollableDataTable SYSTEM "included/rich_scrollableDataTable.xml"> - <!ENTITY rich_dragIndicator SYSTEM "../../../target/generated/rich_dragIndicator.xml"> - <!ENTITY rich_dragSupport SYSTEM "../../../target/generated/rich_dragSupport.xml"> - <!ENTITY rich_dndParam SYSTEM "../../../target/generated/rich_dndParam.xml"> - <!ENTITY rich_dropSupport SYSTEM "../../../target/generated/rich_dropSupport.xml"> - <!ENTITY rich_dropListener SYSTEM "../../../target/generated/rich_dropListener.xml"> - <!ENTITY rich_dragListener SYSTEM "../../../target/generated/rich_dragListener.xml"> + <!ENTITY rich_dragIndicator SYSTEM "included/rich_dragIndicator.xml"> + <!ENTITY rich_dragSupport SYSTEM "included/rich_dragSupport.xml"> + <!ENTITY rich_dndParam SYSTEM "included/rich_dndParam.xml"> + <!ENTITY rich_dropSupport SYSTEM "included/rich_dropSupport.xml"> + <!ENTITY rich_dropListener SYSTEM "included/rich_dropListener.xml"> + <!ENTITY rich_dragListener SYSTEM "included/rich_dragListener.xml"> - <!ENTITY rich_contextMenu SYSTEM "../../../target/generated/rich_contextMenu.xml"> - <!ENTITY rich_dropDownMenu SYSTEM "../../../target/generated/rich_dropDownMenu.xml"> - <!ENTITY rich_menuGroup SYSTEM "../../../target/generated/rich_menuGroup.xml"> - <!ENTITY rich_menuItem SYSTEM "../../../target/generated/rich_menuItem.xml"> - <!ENTITY rich_menuSeparator SYSTEM "../../../target/generated/rich_menuSeparator.xml"> + <!ENTITY rich_contextMenu SYSTEM "included/rich_contextMenu.xml"> + <!ENTITY rich_dropDownMenu SYSTEM "included/rich_dropDownMenu.xml"> + <!ENTITY rich_menuGroup SYSTEM "included/rich_menuGroup.xml"> + <!ENTITY rich_menuItem SYSTEM "included/rich_menuItem.xml"> + <!ENTITY rich_menuSeparator SYSTEM "included/rich_menuSeparator.xml"> - <!ENTITY rich_recursiveTreeNodesAdaptor SYSTEM "../../../target/generated/rich_recursiveTreeNodesAdaptor.xml"> - <!ENTITY rich_tree SYSTEM "../../../target/generated/rich_tree.xml"> - <!ENTITY rich_treeNode SYSTEM "../../../target/generated/rich_treeNode.xml"> - <!ENTITY rich_treeNodesAdaptor SYSTEM "../../../target/generated/rich_treeNodesAdaptor.xml"> - <!ENTITY rich_changeExpandListener SYSTEM "../../../target/generated/rich_changeExpandListener.xml"> - <!ENTITY rich_nodeSelectListener SYSTEM "../../../target/generated/rich_nodeSelectListener.xml"> + <!ENTITY rich_recursiveTreeNodesAdaptor SYSTEM "included/rich_recursiveTreeNodesAdaptor.xml"> + <!ENTITY rich_tree SYSTEM "included/rich_tree.xml"> + <!ENTITY rich_treeNode SYSTEM "included/rich_treeNode.xml"> + <!ENTITY rich_treeNodesAdaptor SYSTEM "included/rich_treeNodesAdaptor.xml"> + <!ENTITY rich_changeExpandListener SYSTEM "included/rich_changeExpandListener.xml"> + <!ENTITY rich_nodeSelectListener SYSTEM "included/rich_nodeSelectListener.xml"> - <!ENTITY rich_modalPanel SYSTEM "../../../target/generated/rich_modalPanel.xml"> - <!ENTITY rich_paint2D SYSTEM "../../../target/generated/rich_paint2D.xml"> - <!ENTITY rich_panel SYSTEM "../../../target/generated/rich_panel.xml"> - <!ENTITY rich_panelBar SYSTEM "../../../target/generated/rich_panelBar.xml"> - <!ENTITY rich_panelBarItem SYSTEM "../../../target/generated/rich_panelBarItem.xml"> - <!ENTITY rich_panelMenu SYSTEM "../../../target/generated/rich_panelMenu.xml"> - <!ENTITY rich_panelMenuItem SYSTEM "../../../target/generated/rich_panelMenuItem.xml"> - <!ENTITY rich_panelMenuGroup SYSTEM "../../../target/generated/rich_panelMenuGroup.xml"> - <!ENTITY rich_progressBar SYSTEM "../../../target/generated/rich_progressBar.xml"> - <!ENTITY rich_separator SYSTEM "../../../target/generated/rich_separator.xml"> - <!ENTITY rich_simpleTogglePanel SYSTEM "../../../target/generated/rich_simpleTogglePanel.xml"> - <!ENTITY rich_spacer SYSTEM "../../../target/generated/rich_spacer.xml"> - <!ENTITY rich_tabPanel SYSTEM "../../../target/generated/rich_tabPanel.xml"> - <!ENTITY rich_tab SYSTEM "../../../target/generated/rich_tab.xml"> - <!ENTITY rich_togglePanel SYSTEM "../../../target/generated/rich_togglePanel.xml"> - <!ENTITY rich_toggleControl SYSTEM "../../../target/generated/rich_toggleControl.xml"> - <!ENTITY rich_toolBar SYSTEM "../../../target/generated/rich_toolBar.xml"> - <!ENTITY rich_toolBarGroup SYSTEM "../../../target/generated/rich_toolBarGroup.xml"> - <!ENTITY rich_toolTip SYSTEM "../../../target/generated/rich_toolTip.xml"> + <!ENTITY rich_modalPanel SYSTEM "included/rich_modalPanel.xml"> + <!ENTITY rich_paint2D SYSTEM "included/rich_paint2D.xml"> + <!ENTITY rich_panel SYSTEM "included/rich_panel.xml"> + <!ENTITY rich_panelBar SYSTEM "included/rich_panelBar.xml"> + <!ENTITY rich_panelBarItem SYSTEM "included/rich_panelBarItem.xml"> + <!ENTITY rich_panelMenu SYSTEM "included/rich_panelMenu.xml"> + <!ENTITY rich_panelMenuItem SYSTEM "included/rich_panelMenuItem.xml"> + <!ENTITY rich_panelMenuGroup SYSTEM "included/rich_panelMenuGroup.xml"> + <!ENTITY rich_progressBar SYSTEM "included/rich_progressBar.xml"> + <!ENTITY rich_separator SYSTEM "included/rich_separator.xml"> + <!ENTITY rich_simpleTogglePanel SYSTEM "included/rich_simpleTogglePanel.xml"> + <!ENTITY rich_spacer SYSTEM "included/rich_spacer.xml"> + <!ENTITY rich_tabPanel SYSTEM "included/rich_tabPanel.xml"> + <!ENTITY rich_tab SYSTEM "included/rich_tab.xml"> + <!ENTITY rich_togglePanel SYSTEM "included/rich_togglePanel.xml"> + <!ENTITY rich_toggleControl SYSTEM "included/rich_toggleControl.xml"> + <!ENTITY rich_toolBar SYSTEM "included/rich_toolBar.xml"> + <!ENTITY rich_toolBarGroup SYSTEM "included/rich_toolBarGroup.xml"> + <!ENTITY rich_toolTip SYSTEM "included/rich_toolTip.xml"> - <!ENTITY rich_calendar SYSTEM "../../../target/generated/rich_calendar.xml"> - <!ENTITY rich_colorPicker SYSTEM "../../../target/generated/rich_colorPicker.xml"> - <!ENTITY rich_comboBox SYSTEM "../../../target/generated/rich_comboBox.xml"> - <!ENTITY rich_editor SYSTEM "../../../target/generated/rich_editor.xml"> - <!ENTITY rich_fileUpload SYSTEM "../../../target/generated/rich_fileUpload.xml"> - <!ENTITY rich_inplaceInput SYSTEM "../../../target/generated/rich_inplaceInput.xml"> - <!ENTITY rich_inplaceSelect SYSTEM "../../../target/generated/rich_inplaceSelect.xml"> - <!ENTITY rich_inputNumberSlider SYSTEM "../../../target/generated/rich_inputNumberSlider.xml"> - <!ENTITY rich_inputNumberSpinner SYSTEM "../../../target/generated/rich_inputNumberSpinner.xml"> - <!ENTITY rich_suggestionbox SYSTEM "../../../target/generated/rich_suggestionbox.xml"> + <!ENTITY rich_calendar SYSTEM "included/rich_calendar.xml"> + <!ENTITY rich_colorPicker SYSTEM "included/rich_colorPicker.xml"> + <!ENTITY rich_comboBox SYSTEM "included/rich_comboBox.xml"> + <!ENTITY rich_editor SYSTEM "included/rich_editor.xml"> + <!ENTITY rich_fileUpload SYSTEM "included/rich_fileUpload.xml"> + <!ENTITY rich_inplaceInput SYSTEM "included/rich_inplaceInput.xml"> + <!ENTITY rich_inplaceSelect SYSTEM "included/rich_inplaceSelect.xml"> + <!ENTITY rich_inputNumberSlider SYSTEM "included/rich_inputNumberSlider.xml"> + <!ENTITY rich_inputNumberSpinner SYSTEM "included/rich_inputNumberSpinner.xml"> + <!ENTITY rich_suggestionbox SYSTEM "included/rich_suggestionbox.xml"> - <!ENTITY rich_listShuttle SYSTEM "../../../target/generated/rich_listShuttle.xml"> - <!ENTITY rich_orderingList SYSTEM "../../../target/generated/rich_orderingList.xml"> - <!ENTITY rich_pickList SYSTEM "../../../target/generated/rich_pickList.xml"> + <!ENTITY rich_listShuttle SYSTEM "included/rich_listShuttle.xml"> + <!ENTITY rich_orderingList SYSTEM "included/rich_orderingList.xml"> + <!ENTITY rich_pickList SYSTEM "included/rich_pickList.xml"> - <!ENTITY rich_page SYSTEM "../../../target/generated/rich_page.xml"> - <!ENTITY rich_layout SYSTEM "../../../target/generated/rich_layout.xml"> - <!ENTITY rich_layoutPanel SYSTEM "../../../target/generated/rich_layoutPanel.xml"> + <!ENTITY rich_page SYSTEM "included/rich_page.xml"> + <!ENTITY rich_layout SYSTEM "included/rich_layout.xml"> + <!ENTITY rich_layoutPanel SYSTEM "included/rich_layoutPanel.xml"> - <!ENTITY rich_componentControl SYSTEM "../../../target/generated/rich_componentControl.xml"> - <!ENTITY rich_effect SYSTEM "../../../target/generated/rich_effect.xml"> - <!ENTITY rich_gmap SYSTEM "../../../target/generated/rich_gmap.xml"> - <!ENTITY rich_virtualEarth SYSTEM "../../../target/generated/rich_virtualEarth.xml"> - <!ENTITY rich_hotKey SYSTEM "../../../target/generated/rich_hotKey.xml"> - <!ENTITY rich_insert SYSTEM "../../../target/generated/rich_insert.xml"> - <!ENTITY rich_message SYSTEM "../../../target/generated/rich_message.xml"> - <!ENTITY rich_messages SYSTEM "../../../target/generated/rich_messages.xml"> - <!ENTITY rich_jQuery SYSTEM "../../../target/generated/rich_jQuery.xml"> + <!ENTITY rich_componentControl SYSTEM "included/rich_componentControl.xml"> + <!ENTITY rich_effect SYSTEM "included/rich_effect.xml"> + <!ENTITY rich_gmap SYSTEM "included/rich_gmap.xml"> + <!ENTITY rich_virtualEarth SYSTEM "included/rich_virtualEarth.xml"> + <!ENTITY rich_hotKey SYSTEM "included/rich_hotKey.xml"> + <!ENTITY rich_insert SYSTEM "included/rich_insert.xml"> + <!ENTITY rich_message SYSTEM "included/rich_message.xml"> + <!ENTITY rich_messages SYSTEM "included/rich_messages.xml"> + <!ENTITY rich_jQuery SYSTEM "included/rich_jQuery.xml"> - <!ENTITY cdkguide "../../cdkguide/html_single/index.html"> - <!ENTITY devguide "../../devguide/html_single/index.html"> - <!ENTITY migrationguide "../../migrationguide/html_single/index.html"> - <!ENTITY photoalbumguide "../../realworld/html_single/index.html"> - <!ENTITY realworld "../../realworld/html_single/index.html"> - <!ENTITY tlddoc "../../tlddoc/index.html"> - <!ENTITY apidoc "../../apidoc/index.html"> - <!ENTITY apidoc_framework "../../apidoc_framework/index.html"> + <!ENTITY cdkguide "http://docs.jboss.org/richfaces/3.3.1.GA/en/cdkguide/html_single/"> + <!ENTITY devguide "http://docs.jboss.org/richfaces/3.3.1.GA/en/devguide/html_single/"> + <!ENTITY migrationguide "http://docs.jboss.org/richfaces/3.3.1.GA/en/migrationguide/html_single/"> + <!ENTITY photoalbumguide "http://docs.jboss.org/richfaces/3.3.1.GA/en/realworld/html_single/"> + <!ENTITY realworld "http://docs.jboss.org/richfaces/3.3.1.GA/en/realworld/html_single/"> + <!ENTITY tlddoc "http://docs.jboss.org/richfaces/3.3.1.GA/en/tlddoc/"> + <!ENTITY apidoc "http://docs.jboss.org/richfaces/3.3.1.GA/en/apidoc/"> + <!ENTITY apidoc_framework "http://docs.jboss.org/richfaces/3.3.1.GA/en/apidoc_framework/"> + ]> <book> <bookinfo> @@ -169,11 +172,11 @@ </bookinfo> <toc/> - &rfcintro; - &rfctechreqs; + &rfcintro; + &rfctechreqs; &rfcGettingStarted; &rfcSettings; - &rfcarchitectover; + &rfcarchitectover; <chapter role="NotInToc" id="RichFacesComponentsLibrary" xreflabel="RichFacesComponentsLibrary"> <?dbhtml filename="RichFacesComponentsLibrary.html"?> Modified: branches/community/3.3.X/docs/userguide/pom.xml =================================================================== --- branches/community/3.3.X/docs/userguide/pom.xml 2009-08-18 15:41:09 UTC (rev 15206) +++ branches/community/3.3.X/docs/userguide/pom.xml 2009-08-18 17:11:51 UTC (rev 15207) @@ -111,541 +111,6 @@ <artifactItems> <artifactItem> <groupId> - org.richfaces.ui - </groupId> - <artifactId>core</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - beanValidator - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - calendar - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - editor - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - columns - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - extendedDataTable - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - fileUpload - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - progressBar - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - inplaceInput - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - inplaceSelect - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - hotKey - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - combobox - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - pickList - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - componentControl - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - contextMenu - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - dataFilterSlider - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - datascroller - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - dataTable - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - drag-drop - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - dropdown-menu - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>effect</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>gmap</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - virtualEarth - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - inputnumber-slider - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - inputnumber-spinner - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - insert - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - jQuery - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - listShuttle - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - menu-components - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>message</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - panelmenu - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - modal-panel - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - orderingList - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>paint2D</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>panel</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - panelbar - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - scrollableDataTable - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - simpleTogglePanel - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - separator - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>spacer</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - suggestionbox - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - tabPanel - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId> - togglePanel - </artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>toolBar</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>tooltip</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>tree</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>treeModel</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>jQuery</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>layout</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> - org.richfaces.ui - </groupId> - <artifactId>colorPicker</artifactId> - <version> - ${project.version} - </version> - </artifactItem> - <artifactItem> - <groupId> org.richfaces.docs.common-resources </groupId> <artifactId> @@ -675,180 +140,6 @@ </executions> </plugin> <plugin> - <groupId>org.codehaus.mojo</groupId> - <artifactId>xml-maven-plugin</artifactId> - <version>1.0-beta-2</version> - <executions> - <execution> - <id>transformTld</id> - <phase>process-resources</phase> - <goals> - <goal>transform</goal> - </goals> - </execution> - </executions> - <dependencies> - <dependency> - <groupId>net.sf.saxon</groupId> - <artifactId>saxon</artifactId> - <version>8.7</version> - </dependency> - <!--dependency> - <groupId>org.apache.xmlgraphics</groupId> - <artifactId>fop</artifactId> - <version>0.95</version> - </dependency--> - </dependencies> - <configuration> - <transformationSets> - <!--transformationSet> - <dir> - ${project.build.directory}/library/org/richfaces/renderkit/html/css - </dir> - <includes> - <include>*.xcss</include> - </includes> - <excludes> - <exclude>*.xml</exclude> - </excludes> - <outputDir> - ${project.build.directory}${file.separator}generated${file.separator}xcss - </outputDir> - <stylesheet> - ${project.build.directory}/common-resources/xslt/f.xsl - </stylesheet> - <fileMappers> - <fileMapper implementation="org.codehaus.plexus.components.io.filemappers.FileExtensionMapper"> - <targetExtension> - xml - </targetExtension> - </fileMapper> - </fileMappers> - <parameters> - <parameter> - <name>lang</name> - <value> - ..${file.separator}..${file.separator}..${file.separator}src${file.separator}main${file.separator}docbook - </value> - </parameter> - <parameter> - <name>title</name> - <value>${project.name}</value> - </parameter> - <parameter> - <name>separator</name> - <value>${file.separator}</value> - </parameter> - </parameters> - </transformationSet--> - <transformationSet> - <dir> - ${project.build.directory}/library/META-INF - </dir> - <includes> - <include>*.tld</include> - </includes> - <excludes> - <exclude>a4j.*</exclude> - </excludes> - <outputDir> - ${project.build.directory}${file.separator}generated - </outputDir> - <stylesheet> - ${project.build.directory}${file.separator}common-resources${file.separator}xslt${file.separator}f.xsl - </stylesheet> - <fileMappers> - <fileMapper implementation="org.codehaus.plexus.components.io.filemappers.FileExtensionMapper"> - <targetExtension> - xml - </targetExtension> - </fileMapper> - </fileMappers> - <parameters> - <parameter> - <name>lang</name> - <value> - ..${file.separator}..${file.separator}..${file.separator}src${file.separator}main${file.separator}docbook - </value> - </parameter> - <parameter> - <name>title</name> - <value>${project.name}</value> - </parameter> - <parameter> - <name>separator</name> - <value>${file.separator}</value> - </parameter> - <parameter> - <name>prefix</name> - <value>rich</value> - </parameter> - <parameter> - <name>xcssPath</name> - <value>..${file.separator}..${file.separator}generated${file.separator}xcss</value> - </parameter> - <parameter> - <name>outputDir</name> - <value>${project.build.directory}${file.separator}generated${file.separator}</value> - </parameter> - </parameters> - </transformationSet> - <transformationSet> - <dir> - ${project.build.directory}${file.separator}library${file.separator}META-INF - </dir> - <includes> - <include>a4j.*</include> - </includes> - <excludes> - <exclude>*.xml</exclude> - </excludes> - <outputDir> - ${project.build.directory}${file.separator}generated${file.separator} - </outputDir> - <stylesheet> - ${project.build.directory}${file.separator}common-resources${file.separator}xslt${file.separator}f.xsl - </stylesheet> - <fileMappers> - <fileMapper implementation="org.codehaus.plexus.components.io.filemappers.FileExtensionMapper"> - <targetExtension> - xml - </targetExtension> - </fileMapper> - </fileMappers> - <parameters> - <parameter> - <name>lang</name> - <value> - ..${file.separator}..${file.separator}..${file.separator}src${file.separator}main${file.separator}docbook - </value> - </parameter> - <parameter> - <name>title</name> - <value>${project.name}</value> - </parameter> - <parameter> - <name>separator</name> - <value>${file.separator}</value> - </parameter> - <parameter> - <name>prefix</name> - <value>a4j</value> - </parameter> - <parameter> - <name>xcssPath</name> - <value>..${file.separator}..${file.separator}generated${file.separator}xcss</value> - </parameter> - <parameter> - <name>outputDir</name> - <value>${project.build.directory}${file.separator}generated${file.separator}</value> - </parameter> - </parameters> - </transformationSet> - </transformationSets> - </configuration> - </plugin> - <plugin> <groupId>org.jboss.maven.plugins</groupId> <artifactId>maven-jdocbook-plugin</artifactId> <version>2.1.0-200803311251UTC-MPJDOCBOOK-8</version> @@ -967,16 +258,6 @@ <xmlTransformerType> saxon </xmlTransformerType> - <!-- - <transformerParameters> - <property> - <name>custom.titlepage.img</name> - <value> - ${basedir}/src/main/resources/shared/images/hibernate_logo_a.png - </value> - </property> - </transformerParameters> - --> <docbookVersion>1.72.0</docbookVersion> </options> </configuration> @@ -985,21 +266,7 @@ </plugins> </pluginManagement> </build> - - <!-- report plugin is currently hosed - <reporting> - <plugins> - <plugin> - <groupId>org.jboss.maven.plugin</groupId> - <artifactId>jboss-docbook-plugin</artifactId> - </plugin> - </plugins> - </reporting> - --> - - <modules> <module>en</module> </modules> - </project>