- 浏览: 443778 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
g_man1990:
update config 不成功啊
build-helper-maven-plugin 配置多 source resource 文件 -
netwelfare:
文章很详细,就是太长了,读起来有点困难,倒不如写精练点,像这篇 ...
Java 基本类型 -
huyuancai1010:
function commitForm() {
var ...
加时间戳或者随机数去除js缓存 -
Smile__:
不过这个东西以前还真没研究过 。
hibernate.jdbc.fetch_size 和 hibernate.jdbc.batch_size -
Smile__:
想不到你也是北大青鸟的 。哈
hibernate.jdbc.fetch_size 和 hibernate.jdbc.batch_size
RichFace标签学习笔记
rich:componentControl 标签和rich:ModolPanel标签
示例:
<rich:modalPanel id="panel" width="350" height="100">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Modal Panel"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png" style="cursor:pointer" id="hidelink"/>
<rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<h:outputText value="This panel is called using Component Control Component"></h:outputText>
<br/>
<h:outputText value="Closure link (X) works also through Component Control"></h:outputText>
</rich:modalPanel>
<h:outputLink value="#" id="link">
Show Modal Panel
<rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
</h:outputLink>
ModolPanel效果:当点击页面中的某元素时,弹出一个类似关机效果的面板。
inputNumberSlider 输入数字滑竿
Panel:
带标题栏的panel
它可以通过h:fecter标签指定标题和底部。
PanelBar:
效果说明:该控件可以实现多个面板的折叠效果,在每个面板的数据区域可以放入任何JSF标签。并且面板的标题可以设定。
<rich:panelBar height="400" width="500">
<rich:panelBarItem
label="Write your own custom rich components with built-in AJAX support">
Component Development Kit (CDK) is a design-time extension for Ajax4jsf. The CDK includes
</rich:panelBarItem>
<rich:panelBarItem
label="Package resources with the application's Java classes ">
In addition to its core, Ajax functionality of Ajax4jsf provides an advanced
support for the diff
</rich:panelBarItem>
<rich:panelBarItem label="Easily generate images on-the-fly">
Resource framework can generate images on-the-fly so that it becomes possible
to create images using the familiar approach of the Java graphic2D library.
</rich:panelBarItem>
</rich:panelBar>
PanelMenu标签:
<h:panelGrid columns="2" columnClasses="cols" width="100%">
<rich:panelMenu style="width:200px" mode="ajax"
iconExpandedGroup="disc" iconCollapsedGroup="disc"
iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
iconCollapsedTopGroup="chevronDown" iconCollapsedTopPosition="right" >
<rich:panelMenuGroup label="Group 1">
<rich:panelMenuItem label="Item 1.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 1.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 1.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuGroup label="Group 2">
<rich:panelMenuItem label="Item 2.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.3"/>
</rich:panelMenuItem>
<rich:panelMenuGroup label="Group 2.4">
<rich:panelMenuItem label="Item 2.4.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.4.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.4.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuItem label="Item 2.5" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.5"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuGroup label="Group 3">
<rich:panelMenuItem label="Item 3.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 3.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 3.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
</rich:panelMenu>
<rich:panel bodyClass="rich-laguna-panel-no-header">
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="#{panelMenu.current} selected" id="current"/>
</a4j:outputPanel>
</rich:panel>
</h:panelGrid>
progressBar标签 :
<h:form>
<a4j:outputPanel id="progressPanel">
<rich:progressBar value="#{progressBarBean.currentValue}"
interval="2000" label="#{progressBarBean.currentValue} %"
enabled="#{progressBarBean.enabled}" minValue="-1" maxValue="100"
reRenderAfterComplete="progressPanel">
<f:facet name="initial">
<br />
<h:outputText value="Process doesn't started yet" />
<a4j:commandButton action="#{progressBarBean.startProcess}"
value="Start Process" reRender="progressPanel"
rendered="#{progressBarBean.buttonRendered}"
style="margin: 9px 0px 5px;" />
</f:facet>
<f:facet name="complete">
<br />
<h:outputText value="Process Done" />
<a4j:commandButton action="#{progressBarBean.startProcess}"
value="Restart Process" reRender="progressPanel"
rendered="#{progressBarBean.buttonRendered}"
style="margin: 9px 0px 5px;" />
</f:facet>
</rich:progressBar>
</a4j:outputPanel>
</h:form>
Separator标签:
<p>This is default separator:</p>
<rich:separator/>
<p>This is tick 75% beveled separator aligned to the center:</p>
<rich:separator lineType="beveled" height="8" width="75%" align="center"/>
<p>Here is more examples of different line types:</p>
<rich:separator height="2" lineType="dotted"/><br/>
<rich:separator height="2" lineType="dashed"/><br/>
<rich:separator height="4" lineType="double"/><br/>
<rich:separator height="2" lineType="solid"/><br/>
simpleTogglePanel 标签:
<rich:simpleTogglePanel switchType="client" label="Add AJAX capability to existing JSF applications">
The framework is implemented by using a component library. The library
set Ajax functionality into existing pages, so there is no need to write
any JavaScript code or to replace existing components with new Ajax one.
Ajax4jsf enables page-wide Ajax support instead of the traditional
component-wide support and it gives the opportunity to define the event
on the page. An event invokes an Ajax request and areas of the page
which are synchronized with the JSF Component Tree after changing the
data on the server by Ajax request in accordance with events fired on
the client.
</rich:simpleTogglePanel>
解释:点击该panel的标题栏将隐藏、显示内容部分。其中的switchType为client将无刷新的隐藏显示内容部分。该控件的标题栏不能添加图片,样式不可以自己设定。
tablePanel标签:
<rich:tabPanel>
<rich:tab label="First">
Here is tab #1
</rich:tab>
<rich:tab label="Second">
Here is tab #2
</rich:tab>
<rich:tab label="Third">
Here is tab #3
</rich:tab>
</rich:tabPanel>
<br/><br/>
<p>Here is an example of tab panel switched in "ajax" style. Second tab is disabled.</p>
<rich:tabPanel switchType="ajax">
<rich:tab label="First">
Here is tab #1
</rich:tab>
<rich:tab label="Second" disabled="true">
Here is tab #2
</rich:tab>
<rich:tab label="Third">
Here is tab #3
</rich:tab>
</rich:tabPanel>
<br/><br/>
<p>Here is an example of tab panel switched completely on client.</p>
<rich:tabPanel switchType="client">
<rich:tab label="First">
Here is tab #1
</rich:tab>
<rich:tab label="Second">
Here is tab #2
</rich:tab>
<rich:tab label="Third">
Here is tab #3
</rich:tab>
</rich:tabPanel>
解释:tabPanel 的switchType有server client ajax三种。Server会产生页面的刷新,ajax会异步的刷新,client则不会跟服务器进行交互。
Tool Bar标签:
<style>
.barsearch {
height:14px;
width:100px;
}
.barsearchbutton {
border-width:1px;
background-color:#{a4jSkin.generalBackgroundColor};
}
</style>
<h:form>
<rich:toolBar height="34" itemSeparator="line">
<rich:toolBarGroup>
<h:graphicImage id="edit" value="/images/icons/edit.gif" />
<h:outputLabel value="Edit" for="edit" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="find" value="/images/icons/find.gif" />
<h:outputLabel value="Find" for="find" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="filter" value="/images/icons/filter.gif" />
<h:outputLabel value="Filter" for="filter" />
</rich:toolBarGroup>
<rich:toolBarGroup location="right">
<h:inputText styleClass="barsearch" />
<h:commandButton styleClass="barsearchbutton" onclick="return false;" value="Search" />
</rich:toolBarGroup>
</rich:toolBar>
</h:form>
ToolTip标签:
<style>
.tooltip {
background-color:#{richSkin.generalBackgroundColor};
border-width:3px;
padding:10px;
}
.tooltip-text {
width:350px;
height:80px;
cursor:arrow;
border-width:2px;
text-align:center;
display: table-cell;
vertical-align: middle;
}
.tooltipData {
font-weight: bold;
}
</style>
<h:panelGrid columns="2">
<rich:panel id="sample1" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
Here you can see <b>default client-side</b> tool-tip
</p>
<rich:toolTip>
<span style="white-space:nowrap">
This tool-tip content was <strong>pre-rendered</strong> to the page.<br/>
The look of this tool-tip is 100% defined by skin.
</span>
</rich:toolTip>
</rich:panel>
<rich:panel id="sample2" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
This tool-tip will <b>follow mouse</b>. Also this tool-tip has a <b>delay 0.5 sec</b>,
so be patient!
</p>
<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
<span style="white-space:nowrap">
This tool-tip content also <strong>pre-rendered</strong> to the page.<br/>
However, the look of this tool-tip is customized<br/>
by styleClass attribute.
</span>
</rich:toolTip>
</rich:panel>
<h:form>
<rich:panel id="sample3" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
This tool-tip rendered on server <b>in separate request</b>.
</p>
<rich:toolTip direction="top-right" mode="ajax" styleClass="tooltip" layout="block">
<f:facet name="defaultContent">
<strong>Wait...</strong>
</f:facet>
<span style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong>
</span>
<h:panelGrid columns="2">
<h:outputText style="white-space:nowrap" value="tooltips requested:" />
<h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" />
</h:panelGrid>
</rich:toolTip>
</rich:panel>
</h:form>
<h:form>
<rich:panel id="sample4" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
This tool-tip will be <b>activated on mouse click</b>. It also has a <b>bottom-left</b> position.
</p>
<rich:toolTip showEvent="onclick" direction="bottom-left" mode="ajax" styleClass="tooltip" layout="block">
<f:facet name="defaultContent">
<strong>Wait...</strong>
</f:facet>
<span style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong><br/></span>
<h:panelGrid columns="2">
<h:outputText style="white-space:nowrap" value="tooltips requested:" />
<h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" />
</h:panelGrid>
</rich:toolTip>
</rich:panel>
</h:form>
</h:panelGrid>
Calendar标签:
右边控件绑定been层中的属性都是Calendar的一系列属性。
<style type="text/css">
.ecol1 { vertical-align: top; padding-right : 25px }
.ecol2 { vertical-align: top; border-left: #ACBECE 1px solid; padding-left : 10px }
.rich-calendar-tool-btn{
font-family: Arial, Verdana;
}
</style>
<h:form>
<h:panelGrid id="panel" columns="2" columnClasses="ecol1, ecol2">
<a4j:outputPanel id="calendar" layout="block">
<rich:calendar value="#{calendarBean.selectedDate}"
locale="#{calendarBean.locale}"
popup="#{calendarBean.popup}"
datePattern="#{calendarBean.pattern}"
showApplyButton="#{calendarBean.showApply}" cellWidth="24px" cellHeight="22px" style="width:200px"/>
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputText value="Popup Mode:" />
<h:selectBooleanCheckbox value="#{calendarBean.popup}">
<a4j:support event="onclick" reRender="calendar"/>
</h:selectBooleanCheckbox>
<h:outputText value="Apply Button:" />
<h:selectBooleanCheckbox value="#{calendarBean.showApply}">
<a4j:support event="onclick" reRender="calendar"/>
</h:selectBooleanCheckbox>
<h:outputText value="Select Locale" />
<h:selectOneRadio value="en/US" valueChangeListener="#{calendarBean.selectLocale}">
<a4j:support event="onclick" reRender="calendar"/>
<f:selectItem itemLabel="US" itemValue="en/US"/>
<f:selectItem itemLabel="DE" itemValue="de/DE"/>
<f:selectItem itemLabel="FR" itemValue="fr/FR"/>
<f:selectItem itemLabel="RU" itemValue="ru/RU"/>
</h:selectOneRadio>
<h:outputText value="Select Date Pattern:"/>
<h:selectOneMenu value="#{calendarBean.pattern}">
<a4j:support event="onchange" reRender="calendar"/>
<f:selectItem itemLabel="d/M/yy HH:mm" itemValue="d/M/yy HH:mm"/>
<f:selectItem itemLabel="dd/M/yy hh:mm a" itemValue="dd/M/yy hh:mm a"/>
<f:selectItem itemLabel="d/MMM/y" itemValue="d/MMM/y"/>
<f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d, yyyy"/>
</h:selectOneMenu>
</h:panelGrid>
</h:panelGrid>
</h:form>
comboBox 标签:
该控件可以实现google搜索框的效果,唯一不同的地方就是右边有一个向下的箭头。
File Upload控件:
说明:在建立的页面中发现不到该标签。
Inplace Input标签:
SuggestionBox标签:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:form id="suggestionbox_form">
<p>
Suggestion Box will suggest you states capitals names. Comma and space could be used as suggestions separators."
</p>
<h:inputText value="#{capitalsBean.capital}" id="text" />
<rich:suggestionbox id="suggestionBoxId" for="text" tokens=",["
rules="#{suggestionBox.rules}"
suggestionAction="#{capitalsBean.autocomplete}" var="result"
fetchValue="#{result.name}" rows="#{suggestionBox.intRows}"
first="#{suggestionBox.intFirst}"
minChars="#{suggestionBox.minchars}"
shadowOpacity="#{suggestionBox.shadowOpacity}"
border="#{suggestionBox.border}" width="#{suggestionBox.width}"
height="#{suggestionBox.height}"
shadowDepth="#{suggestionBox.shadowDepth}"
cellpadding="#{suggestionBox.cellpadding}"
nothingLabel="No capitals found" columnClasses="center">
<h:column>
<f:facet name="header">
<h:outputText value="123"></h:outputText>
</f:facet>
<h:graphicImage value="#{result.stateFlag}" />
</h:column>
<h:column>
<h:outputText value="#{result.name}" />
</h:column>
<h:column>
<h:outputText value="#{result.state}" style="font-style:italic"/>
</h:column>
</rich:suggestionbox>
<rich:spacer height="30px"/>
<h:panelGrid columns="2" border="0" >
<h:outputText value="Border" />
<rich:inputNumberSlider minValue="1" maxValue="5"
value="#{suggestionBox.border}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Width" />
<rich:inputNumberSlider minValue="150" maxValue="350" step="50"
value="#{suggestionBox.width}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Height" />
<rich:inputNumberSlider minValue="100" maxValue="300" step="50"
value="#{suggestionBox.height}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Shadow Depth" />
<rich:inputNumberSlider minValue="3" maxValue="6"
value="#{suggestionBox.shadowDepth}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Shadow Opacity" />
<rich:inputNumberSlider minValue="1" maxValue="9"
value="#{suggestionBox.shadowOpacity}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Cellpadding" />
<rich:inputNumberSlider minValue="1" maxValue="20"
value="#{suggestionBox.cellpadding}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
</h:panelGrid>
</h:form>
</ui:composition>
Tree标签:
Page Source:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.col, .col2 {
width:50%;
vertical-align:top;
}
</style>
<h:form>
<h:panelGrid columns="2" width="100%" columnClasses="col1,col2">
<rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}"
reRender="selectedNode" ajaxSubmitSelection="true" switchType="client"
value="#{simpleTreeBean.treeNode}" var="item">
</rich:tree>
<h:outputText escape="false" value="Selected Node: #{simpleTreeBean.nodeTitle}" id="selectedNode" />
</h:panelGrid>
</h:form>
</ui:composition>
Been层:
package org.richfaces.demo.tree;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
import javax.faces.FacesException;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import org.richfaces.component.UITree;
import org.richfaces.event.NodeSelectedEvent;
import org.richfaces.model.TreeNode;
import org.richfaces.model.TreeNodeImpl;
public class SimpleTreeBean {
private TreeNode rootNode = null;
private String nodeTitle;
private static final String DATA_PATH = "/richfaces/tree/examples/simple-tree-data.properties";
private void addNodes(String path, TreeNode node, Properties properties) {
boolean end = false;
int counter = 1;
while (!end) {
String key = path != null ? path + '.' + counter : String.valueOf(counter);
String value = properties.getProperty(key);
if (value != null) {
TreeNodeImpl nodeImpl = new TreeNodeImpl();
nodeImpl.setData(value);
node.addChild(new Integer(counter), nodeImpl);
addNodes(key, nodeImpl, properties);
counter++;
} else {
end = true;
}
}
}
private void loadTree() {
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
InputStream dataStream = externalContext.getResourceAsStream(DATA_PATH);
try {
Properties properties = new Properties();
properties.load(dataStream);
rootNode = new TreeNodeImpl();
addNodes(null, rootNode, properties);
} catch (IOException e) {
throw new FacesException(e.getMessage(), e);
} finally {
if (dataStream != null) {
try {
dataStream.close();
} catch (IOException e) {
externalContext.log(e.getMessage(), e);
}
}
}
}
public TreeNode getTreeNode() {
if (rootNode == null) {
loadTree();
}
return rootNode;
}
public void processSelection(NodeSelectedEvent event) {
UITree tree = (UITree) event.getComponent();
nodeTitle = (String) tree.getRowData();
}
public String getNodeTitle() {
return nodeTitle;
}
public void setNodeTitle(String nodeTitle) {
this.nodeTitle = nodeTitle;
}
}
数据:
1=Daniel Defo
1.1=Robinson Crusoe
1.1.1=Start In Life
1.1.2=Slavery And Escape
1.1.3=Wrecked On A Desert Island
1.1.4=First Weeks On The Island
1.1.5=Builds A House - The Journal
1.1.6=Ill And Conscience-Stricken
1.1.7=Agricultural Experience
1.1.8=Surveys His Position
1.1.9=A Boat
1.1.10=Tames Goats
1.1.11=Finds Print Of Man's Foot On The Sand
1.1.12=A Cave Retreat
1.1.13=Wreck Of A Spanish Ship
1.1.14=A Dream Realised
1.1.15=Friday's Education
1.1.16=Rescue Of Prisoners From Cannibals
1.1.17=Visit Of Mutineers
1.1.18=The Ship Recovered
1.1.19=Return To England
1.1.20=Fight Between Friday And A Bear
2=Edgar Allan Poe
2.1=Plays
2.1.1=Politian
2.2=Short stories
2.2.1=The Assignation
2.2.2=Berenice
2.2.3=The Black Cat
2.2.4=The Cask of Amontillado
2.2.5=A Descent into the Maelstrom
2.3=Poetry
2.3.1=Alone
2.3.2=An Enigma
2.3.3=Annabel Lee
2.3.4=Bridal Ballad
3=Henry Wadsworth Longfellow
3.1=The Song of Hiawatha
3.1.1=Introduction
3.1.2=I. The Peace-Pipe
3.1.3=II. The Four Winds
3.1.4=III. Hiawatha's Childhood
3.1.5=IV. Hiawatha and Mudjekeewis
3.1.6=V. Hiawatha's Fasting
3.1.7=VI. Hiawatha's Friends
3.1.8=VII. Hiawatha's Sailing
3.1.9=VIII. Hiawatha's Fishing
3.1.10=IX. Hiawatha and the Pearl-Feather
3.1.11=X. Hiawatha's Wooing
3.1.12=XI. Hiawatha's Wedding-Feast
3.1.13=XII. The Son of the Evening Star
3.1.14=XIII. Blessing the Cornfields
3.1.15=XIV. Picture-Writing
3.1.16=XV. Hiawatha's Lamentation
3.1.17=XVI. Pau-Puk-Keewis
3.1.18=XVII. The Hunting of Pau-Puk-Keewis
3.1.19=XVIII. The Death of Kwasind
3.1.20=XIX. The Ghosts
3.1.21=XX. The Famine
3.1.22=XXI. The White Man's Foot
3.1.23=XXII. Hiawatha's Departure
3.2=Poetry
3.2.1=A Psalm Of Life
3.2.2=Birds Of Passage
3.2.3=Hiawatha's Childhood
3.2.4=Hymn To The Night
AJAX Support
Action Parameter标签:
解释:parameter标签的value属性会通过assingnto属性赋值给been层中的name。
Ajax Form标签:
当单击左边的按钮时页面看不到刷新效果,当点击右边的按钮时会有刷新效果。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style type="text/css">
.dr-pnl-b {
padding: 25px;
}
</style>
<h:panelGrid columns="2">
<rich:panel>
<f:facet name="header">
<h:outputText value="Form with ajaxSubmit equals true"/>
</f:facet>
<a4j:form ajaxSubmit="true" reRender="name">
<h:panelGrid>
<h:commandButton value="Set Local Name to John (Ajax)" action="#{userBean.nameItJohn}" />
<h:outputText id="name" value="Name:#{userBean.name}" />
</h:panelGrid>
</a4j:form>
</rich:panel>
<rich:panel>
<f:facet name="header">
<h:outputText value="Form with ajaxSubmit equals false"/>
</f:facet>
<a4j:form>
<h:panelGrid>
<h:commandButton value="Set Both Name to Mark (non-Ajax)" action="#{userBean.nameItMark}" />
<h:outputText id="name" value="Name:#{userBean.name}" />
</h:panelGrid>
</a4j:form>
</rich:panel>
</h:panelGrid>
</ui:composition>
JS Function标签:
说明:当鼠标放到三个名字上时在name后会显示相应的名字。
使用说明::jsFunction的name属性绑定的是JS方法名,该方法有一个参数,该参数是通过actionparam 标签的assignTo属性传给been层的。该标签的reRender属性指定要刷新的区域。该标签要用a4j:form标签包起来。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<table width="400">
<tbody>
<tr>
<td><span onmouseover="updateName('Alex')" onmouseout="updateName('')">Alex</span></td>
<td><span onmouseover="updateName('Jonh')" onmouseout="updateName('')">Jonh</span></td>
<td><span onmouseover="updateName('Roger')" onmouseout="updateName('')">Roger</span></td>
</tr>
<rich:spacer height="10" />
<tr>
<td colspan="3">Name: <b><h:outputText id="showname" value="#{userBean.name}" /></b></td>
</tr>
</tbody>
</table>
<a4j:form>
<a4j:jsFunction name="updateName" reRender="showname">
<a4j:actionparam name="param1" assignTo="#{userBean.name}" />
</a4j:jsFunction>
</a4j:form>
<br />
</ui:composition>
Poll标签:
说明:该标签相当于一个计时器,会以某频率刷新页面上的指定区域。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<a4j:region>
<h:form>
<a4j:poll id="poll" interval="500" enabled="#{pollBean.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" <b
rich:componentControl 标签和rich:ModolPanel标签
示例:
<rich:modalPanel id="panel" width="350" height="100">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Modal Panel"></h:outputText>
</h:panelGroup>
</f:facet>
<f:facet name="controls">
<h:panelGroup>
<h:graphicImage value="/images/modal/close.png" style="cursor:pointer" id="hidelink"/>
<rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>
</h:panelGroup>
</f:facet>
<h:outputText value="This panel is called using Component Control Component"></h:outputText>
<br/>
<h:outputText value="Closure link (X) works also through Component Control"></h:outputText>
</rich:modalPanel>
<h:outputLink value="#" id="link">
Show Modal Panel
<rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
</h:outputLink>
ModolPanel效果:当点击页面中的某元素时,弹出一个类似关机效果的面板。
inputNumberSlider 输入数字滑竿
Panel:
带标题栏的panel
它可以通过h:fecter标签指定标题和底部。
PanelBar:
效果说明:该控件可以实现多个面板的折叠效果,在每个面板的数据区域可以放入任何JSF标签。并且面板的标题可以设定。
<rich:panelBar height="400" width="500">
<rich:panelBarItem
label="Write your own custom rich components with built-in AJAX support">
Component Development Kit (CDK) is a design-time extension for Ajax4jsf. The CDK includes
</rich:panelBarItem>
<rich:panelBarItem
label="Package resources with the application's Java classes ">
In addition to its core, Ajax functionality of Ajax4jsf provides an advanced
support for the diff
</rich:panelBarItem>
<rich:panelBarItem label="Easily generate images on-the-fly">
Resource framework can generate images on-the-fly so that it becomes possible
to create images using the familiar approach of the Java graphic2D library.
</rich:panelBarItem>
</rich:panelBar>
PanelMenu标签:
<h:panelGrid columns="2" columnClasses="cols" width="100%">
<rich:panelMenu style="width:200px" mode="ajax"
iconExpandedGroup="disc" iconCollapsedGroup="disc"
iconExpandedTopGroup="chevronUp" iconGroupTopPosition="right"
iconCollapsedTopGroup="chevronDown" iconCollapsedTopPosition="right" >
<rich:panelMenuGroup label="Group 1">
<rich:panelMenuItem label="Item 1.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 1.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 1.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 1.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuGroup label="Group 2">
<rich:panelMenuItem label="Item 2.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.3"/>
</rich:panelMenuItem>
<rich:panelMenuGroup label="Group 2.4">
<rich:panelMenuItem label="Item 2.4.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.4.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 2.4.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.4.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuItem label="Item 2.5" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 2.5"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
<rich:panelMenuGroup label="Group 3">
<rich:panelMenuItem label="Item 3.1" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.1"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 3.2" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.2"/>
</rich:panelMenuItem>
<rich:panelMenuItem label="Item 3.3" action="#{panelMenu.updateCurrent}">
<f:param name="current" value="Item 3.3"/>
</rich:panelMenuItem>
</rich:panelMenuGroup>
</rich:panelMenu>
<rich:panel bodyClass="rich-laguna-panel-no-header">
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="#{panelMenu.current} selected" id="current"/>
</a4j:outputPanel>
</rich:panel>
</h:panelGrid>
progressBar标签 :
<h:form>
<a4j:outputPanel id="progressPanel">
<rich:progressBar value="#{progressBarBean.currentValue}"
interval="2000" label="#{progressBarBean.currentValue} %"
enabled="#{progressBarBean.enabled}" minValue="-1" maxValue="100"
reRenderAfterComplete="progressPanel">
<f:facet name="initial">
<br />
<h:outputText value="Process doesn't started yet" />
<a4j:commandButton action="#{progressBarBean.startProcess}"
value="Start Process" reRender="progressPanel"
rendered="#{progressBarBean.buttonRendered}"
style="margin: 9px 0px 5px;" />
</f:facet>
<f:facet name="complete">
<br />
<h:outputText value="Process Done" />
<a4j:commandButton action="#{progressBarBean.startProcess}"
value="Restart Process" reRender="progressPanel"
rendered="#{progressBarBean.buttonRendered}"
style="margin: 9px 0px 5px;" />
</f:facet>
</rich:progressBar>
</a4j:outputPanel>
</h:form>
Separator标签:
<p>This is default separator:</p>
<rich:separator/>
<p>This is tick 75% beveled separator aligned to the center:</p>
<rich:separator lineType="beveled" height="8" width="75%" align="center"/>
<p>Here is more examples of different line types:</p>
<rich:separator height="2" lineType="dotted"/><br/>
<rich:separator height="2" lineType="dashed"/><br/>
<rich:separator height="4" lineType="double"/><br/>
<rich:separator height="2" lineType="solid"/><br/>
simpleTogglePanel 标签:
<rich:simpleTogglePanel switchType="client" label="Add AJAX capability to existing JSF applications">
The framework is implemented by using a component library. The library
set Ajax functionality into existing pages, so there is no need to write
any JavaScript code or to replace existing components with new Ajax one.
Ajax4jsf enables page-wide Ajax support instead of the traditional
component-wide support and it gives the opportunity to define the event
on the page. An event invokes an Ajax request and areas of the page
which are synchronized with the JSF Component Tree after changing the
data on the server by Ajax request in accordance with events fired on
the client.
</rich:simpleTogglePanel>
解释:点击该panel的标题栏将隐藏、显示内容部分。其中的switchType为client将无刷新的隐藏显示内容部分。该控件的标题栏不能添加图片,样式不可以自己设定。
tablePanel标签:
<rich:tabPanel>
<rich:tab label="First">
Here is tab #1
</rich:tab>
<rich:tab label="Second">
Here is tab #2
</rich:tab>
<rich:tab label="Third">
Here is tab #3
</rich:tab>
</rich:tabPanel>
<br/><br/>
<p>Here is an example of tab panel switched in "ajax" style. Second tab is disabled.</p>
<rich:tabPanel switchType="ajax">
<rich:tab label="First">
Here is tab #1
</rich:tab>
<rich:tab label="Second" disabled="true">
Here is tab #2
</rich:tab>
<rich:tab label="Third">
Here is tab #3
</rich:tab>
</rich:tabPanel>
<br/><br/>
<p>Here is an example of tab panel switched completely on client.</p>
<rich:tabPanel switchType="client">
<rich:tab label="First">
Here is tab #1
</rich:tab>
<rich:tab label="Second">
Here is tab #2
</rich:tab>
<rich:tab label="Third">
Here is tab #3
</rich:tab>
</rich:tabPanel>
解释:tabPanel 的switchType有server client ajax三种。Server会产生页面的刷新,ajax会异步的刷新,client则不会跟服务器进行交互。
Tool Bar标签:
<style>
.barsearch {
height:14px;
width:100px;
}
.barsearchbutton {
border-width:1px;
background-color:#{a4jSkin.generalBackgroundColor};
}
</style>
<h:form>
<rich:toolBar height="34" itemSeparator="line">
<rich:toolBarGroup>
<h:graphicImage id="edit" value="/images/icons/edit.gif" />
<h:outputLabel value="Edit" for="edit" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="find" value="/images/icons/find.gif" />
<h:outputLabel value="Find" for="find" />
</rich:toolBarGroup>
<rich:toolBarGroup>
<h:graphicImage id="filter" value="/images/icons/filter.gif" />
<h:outputLabel value="Filter" for="filter" />
</rich:toolBarGroup>
<rich:toolBarGroup location="right">
<h:inputText styleClass="barsearch" />
<h:commandButton styleClass="barsearchbutton" onclick="return false;" value="Search" />
</rich:toolBarGroup>
</rich:toolBar>
</h:form>
ToolTip标签:
<style>
.tooltip {
background-color:#{richSkin.generalBackgroundColor};
border-width:3px;
padding:10px;
}
.tooltip-text {
width:350px;
height:80px;
cursor:arrow;
border-width:2px;
text-align:center;
display: table-cell;
vertical-align: middle;
}
.tooltipData {
font-weight: bold;
}
</style>
<h:panelGrid columns="2">
<rich:panel id="sample1" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
Here you can see <b>default client-side</b> tool-tip
</p>
<rich:toolTip>
<span style="white-space:nowrap">
This tool-tip content was <strong>pre-rendered</strong> to the page.<br/>
The look of this tool-tip is 100% defined by skin.
</span>
</rich:toolTip>
</rich:panel>
<rich:panel id="sample2" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
This tool-tip will <b>follow mouse</b>. Also this tool-tip has a <b>delay 0.5 sec</b>,
so be patient!
</p>
<rich:toolTip followMouse="true" direction="top-right" showDelay="500" styleClass="tooltip">
<span style="white-space:nowrap">
This tool-tip content also <strong>pre-rendered</strong> to the page.<br/>
However, the look of this tool-tip is customized<br/>
by styleClass attribute.
</span>
</rich:toolTip>
</rich:panel>
<h:form>
<rich:panel id="sample3" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
This tool-tip rendered on server <b>in separate request</b>.
</p>
<rich:toolTip direction="top-right" mode="ajax" styleClass="tooltip" layout="block">
<f:facet name="defaultContent">
<strong>Wait...</strong>
</f:facet>
<span style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong>
</span>
<h:panelGrid columns="2">
<h:outputText style="white-space:nowrap" value="tooltips requested:" />
<h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" />
</h:panelGrid>
</rich:toolTip>
</rich:panel>
</h:form>
<h:form>
<rich:panel id="sample4" styleClass="tooltip-text" bodyClass="rich-laguna-panel-no-header">
<p>
This tool-tip will be <b>activated on mouse click</b>. It also has a <b>bottom-left</b> position.
</p>
<rich:toolTip showEvent="onclick" direction="bottom-left" mode="ajax" styleClass="tooltip" layout="block">
<f:facet name="defaultContent">
<strong>Wait...</strong>
</f:facet>
<span style="white-space:nowrap">This tool-tip content was <strong>rendered on server</strong><br/></span>
<h:panelGrid columns="2">
<h:outputText style="white-space:nowrap" value="tooltips requested:" />
<h:outputText value="#{toolTipData.tooltipCounter}" styleClass="tooltipData" />
</h:panelGrid>
</rich:toolTip>
</rich:panel>
</h:form>
</h:panelGrid>
Calendar标签:
右边控件绑定been层中的属性都是Calendar的一系列属性。
<style type="text/css">
.ecol1 { vertical-align: top; padding-right : 25px }
.ecol2 { vertical-align: top; border-left: #ACBECE 1px solid; padding-left : 10px }
.rich-calendar-tool-btn{
font-family: Arial, Verdana;
}
</style>
<h:form>
<h:panelGrid id="panel" columns="2" columnClasses="ecol1, ecol2">
<a4j:outputPanel id="calendar" layout="block">
<rich:calendar value="#{calendarBean.selectedDate}"
locale="#{calendarBean.locale}"
popup="#{calendarBean.popup}"
datePattern="#{calendarBean.pattern}"
showApplyButton="#{calendarBean.showApply}" cellWidth="24px" cellHeight="22px" style="width:200px"/>
</a4j:outputPanel>
<h:panelGrid columns="2">
<h:outputText value="Popup Mode:" />
<h:selectBooleanCheckbox value="#{calendarBean.popup}">
<a4j:support event="onclick" reRender="calendar"/>
</h:selectBooleanCheckbox>
<h:outputText value="Apply Button:" />
<h:selectBooleanCheckbox value="#{calendarBean.showApply}">
<a4j:support event="onclick" reRender="calendar"/>
</h:selectBooleanCheckbox>
<h:outputText value="Select Locale" />
<h:selectOneRadio value="en/US" valueChangeListener="#{calendarBean.selectLocale}">
<a4j:support event="onclick" reRender="calendar"/>
<f:selectItem itemLabel="US" itemValue="en/US"/>
<f:selectItem itemLabel="DE" itemValue="de/DE"/>
<f:selectItem itemLabel="FR" itemValue="fr/FR"/>
<f:selectItem itemLabel="RU" itemValue="ru/RU"/>
</h:selectOneRadio>
<h:outputText value="Select Date Pattern:"/>
<h:selectOneMenu value="#{calendarBean.pattern}">
<a4j:support event="onchange" reRender="calendar"/>
<f:selectItem itemLabel="d/M/yy HH:mm" itemValue="d/M/yy HH:mm"/>
<f:selectItem itemLabel="dd/M/yy hh:mm a" itemValue="dd/M/yy hh:mm a"/>
<f:selectItem itemLabel="d/MMM/y" itemValue="d/MMM/y"/>
<f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d, yyyy"/>
</h:selectOneMenu>
</h:panelGrid>
</h:panelGrid>
</h:form>
comboBox 标签:
该控件可以实现google搜索框的效果,唯一不同的地方就是右边有一个向下的箭头。
File Upload控件:
说明:在建立的页面中发现不到该标签。
Inplace Input标签:
SuggestionBox标签:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<h:form id="suggestionbox_form">
<p>
Suggestion Box will suggest you states capitals names. Comma and space could be used as suggestions separators."
</p>
<h:inputText value="#{capitalsBean.capital}" id="text" />
<rich:suggestionbox id="suggestionBoxId" for="text" tokens=",["
rules="#{suggestionBox.rules}"
suggestionAction="#{capitalsBean.autocomplete}" var="result"
fetchValue="#{result.name}" rows="#{suggestionBox.intRows}"
first="#{suggestionBox.intFirst}"
minChars="#{suggestionBox.minchars}"
shadowOpacity="#{suggestionBox.shadowOpacity}"
border="#{suggestionBox.border}" width="#{suggestionBox.width}"
height="#{suggestionBox.height}"
shadowDepth="#{suggestionBox.shadowDepth}"
cellpadding="#{suggestionBox.cellpadding}"
nothingLabel="No capitals found" columnClasses="center">
<h:column>
<f:facet name="header">
<h:outputText value="123"></h:outputText>
</f:facet>
<h:graphicImage value="#{result.stateFlag}" />
</h:column>
<h:column>
<h:outputText value="#{result.name}" />
</h:column>
<h:column>
<h:outputText value="#{result.state}" style="font-style:italic"/>
</h:column>
</rich:suggestionbox>
<rich:spacer height="30px"/>
<h:panelGrid columns="2" border="0" >
<h:outputText value="Border" />
<rich:inputNumberSlider minValue="1" maxValue="5"
value="#{suggestionBox.border}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Width" />
<rich:inputNumberSlider minValue="150" maxValue="350" step="50"
value="#{suggestionBox.width}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Height" />
<rich:inputNumberSlider minValue="100" maxValue="300" step="50"
value="#{suggestionBox.height}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Shadow Depth" />
<rich:inputNumberSlider minValue="3" maxValue="6"
value="#{suggestionBox.shadowDepth}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Shadow Opacity" />
<rich:inputNumberSlider minValue="1" maxValue="9"
value="#{suggestionBox.shadowOpacity}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
<h:outputText value="Cellpadding" />
<rich:inputNumberSlider minValue="1" maxValue="20"
value="#{suggestionBox.cellpadding}">
<a4j:support event="onchange" reRender="suggestionBoxId" />
</rich:inputNumberSlider>
</h:panelGrid>
</h:form>
</ui:composition>
Tree标签:
Page Source:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style>
.col, .col2 {
width:50%;
vertical-align:top;
}
</style>
<h:form>
<h:panelGrid columns="2" width="100%" columnClasses="col1,col2">
<rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}"
reRender="selectedNode" ajaxSubmitSelection="true" switchType="client"
value="#{simpleTreeBean.treeNode}" var="item">
</rich:tree>
<h:outputText escape="false" value="Selected Node: #{simpleTreeBean.nodeTitle}" id="selectedNode" />
</h:panelGrid>
</h:form>
</ui:composition>
Been层:
package org.richfaces.demo.tree;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
import javax.faces.FacesException;
import javax.faces.context.ExternalContext;
import javax.faces.context.FacesContext;
import org.richfaces.component.UITree;
import org.richfaces.event.NodeSelectedEvent;
import org.richfaces.model.TreeNode;
import org.richfaces.model.TreeNodeImpl;
public class SimpleTreeBean {
private TreeNode rootNode = null;
private String nodeTitle;
private static final String DATA_PATH = "/richfaces/tree/examples/simple-tree-data.properties";
private void addNodes(String path, TreeNode node, Properties properties) {
boolean end = false;
int counter = 1;
while (!end) {
String key = path != null ? path + '.' + counter : String.valueOf(counter);
String value = properties.getProperty(key);
if (value != null) {
TreeNodeImpl nodeImpl = new TreeNodeImpl();
nodeImpl.setData(value);
node.addChild(new Integer(counter), nodeImpl);
addNodes(key, nodeImpl, properties);
counter++;
} else {
end = true;
}
}
}
private void loadTree() {
FacesContext facesContext = FacesContext.getCurrentInstance();
ExternalContext externalContext = facesContext.getExternalContext();
InputStream dataStream = externalContext.getResourceAsStream(DATA_PATH);
try {
Properties properties = new Properties();
properties.load(dataStream);
rootNode = new TreeNodeImpl();
addNodes(null, rootNode, properties);
} catch (IOException e) {
throw new FacesException(e.getMessage(), e);
} finally {
if (dataStream != null) {
try {
dataStream.close();
} catch (IOException e) {
externalContext.log(e.getMessage(), e);
}
}
}
}
public TreeNode getTreeNode() {
if (rootNode == null) {
loadTree();
}
return rootNode;
}
public void processSelection(NodeSelectedEvent event) {
UITree tree = (UITree) event.getComponent();
nodeTitle = (String) tree.getRowData();
}
public String getNodeTitle() {
return nodeTitle;
}
public void setNodeTitle(String nodeTitle) {
this.nodeTitle = nodeTitle;
}
}
数据:
1=Daniel Defo
1.1=Robinson Crusoe
1.1.1=Start In Life
1.1.2=Slavery And Escape
1.1.3=Wrecked On A Desert Island
1.1.4=First Weeks On The Island
1.1.5=Builds A House - The Journal
1.1.6=Ill And Conscience-Stricken
1.1.7=Agricultural Experience
1.1.8=Surveys His Position
1.1.9=A Boat
1.1.10=Tames Goats
1.1.11=Finds Print Of Man's Foot On The Sand
1.1.12=A Cave Retreat
1.1.13=Wreck Of A Spanish Ship
1.1.14=A Dream Realised
1.1.15=Friday's Education
1.1.16=Rescue Of Prisoners From Cannibals
1.1.17=Visit Of Mutineers
1.1.18=The Ship Recovered
1.1.19=Return To England
1.1.20=Fight Between Friday And A Bear
2=Edgar Allan Poe
2.1=Plays
2.1.1=Politian
2.2=Short stories
2.2.1=The Assignation
2.2.2=Berenice
2.2.3=The Black Cat
2.2.4=The Cask of Amontillado
2.2.5=A Descent into the Maelstrom
2.3=Poetry
2.3.1=Alone
2.3.2=An Enigma
2.3.3=Annabel Lee
2.3.4=Bridal Ballad
3=Henry Wadsworth Longfellow
3.1=The Song of Hiawatha
3.1.1=Introduction
3.1.2=I. The Peace-Pipe
3.1.3=II. The Four Winds
3.1.4=III. Hiawatha's Childhood
3.1.5=IV. Hiawatha and Mudjekeewis
3.1.6=V. Hiawatha's Fasting
3.1.7=VI. Hiawatha's Friends
3.1.8=VII. Hiawatha's Sailing
3.1.9=VIII. Hiawatha's Fishing
3.1.10=IX. Hiawatha and the Pearl-Feather
3.1.11=X. Hiawatha's Wooing
3.1.12=XI. Hiawatha's Wedding-Feast
3.1.13=XII. The Son of the Evening Star
3.1.14=XIII. Blessing the Cornfields
3.1.15=XIV. Picture-Writing
3.1.16=XV. Hiawatha's Lamentation
3.1.17=XVI. Pau-Puk-Keewis
3.1.18=XVII. The Hunting of Pau-Puk-Keewis
3.1.19=XVIII. The Death of Kwasind
3.1.20=XIX. The Ghosts
3.1.21=XX. The Famine
3.1.22=XXI. The White Man's Foot
3.1.23=XXII. Hiawatha's Departure
3.2=Poetry
3.2.1=A Psalm Of Life
3.2.2=Birds Of Passage
3.2.3=Hiawatha's Childhood
3.2.4=Hymn To The Night
AJAX Support
Action Parameter标签:
解释:parameter标签的value属性会通过assingnto属性赋值给been层中的name。
Ajax Form标签:
当单击左边的按钮时页面看不到刷新效果,当点击右边的按钮时会有刷新效果。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style type="text/css">
.dr-pnl-b {
padding: 25px;
}
</style>
<h:panelGrid columns="2">
<rich:panel>
<f:facet name="header">
<h:outputText value="Form with ajaxSubmit equals true"/>
</f:facet>
<a4j:form ajaxSubmit="true" reRender="name">
<h:panelGrid>
<h:commandButton value="Set Local Name to John (Ajax)" action="#{userBean.nameItJohn}" />
<h:outputText id="name" value="Name:#{userBean.name}" />
</h:panelGrid>
</a4j:form>
</rich:panel>
<rich:panel>
<f:facet name="header">
<h:outputText value="Form with ajaxSubmit equals false"/>
</f:facet>
<a4j:form>
<h:panelGrid>
<h:commandButton value="Set Both Name to Mark (non-Ajax)" action="#{userBean.nameItMark}" />
<h:outputText id="name" value="Name:#{userBean.name}" />
</h:panelGrid>
</a4j:form>
</rich:panel>
</h:panelGrid>
</ui:composition>
JS Function标签:
说明:当鼠标放到三个名字上时在name后会显示相应的名字。
使用说明::jsFunction的name属性绑定的是JS方法名,该方法有一个参数,该参数是通过actionparam 标签的assignTo属性传给been层的。该标签的reRender属性指定要刷新的区域。该标签要用a4j:form标签包起来。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<table width="400">
<tbody>
<tr>
<td><span onmouseover="updateName('Alex')" onmouseout="updateName('')">Alex</span></td>
<td><span onmouseover="updateName('Jonh')" onmouseout="updateName('')">Jonh</span></td>
<td><span onmouseover="updateName('Roger')" onmouseout="updateName('')">Roger</span></td>
</tr>
<rich:spacer height="10" />
<tr>
<td colspan="3">Name: <b><h:outputText id="showname" value="#{userBean.name}" /></b></td>
</tr>
</tbody>
</table>
<a4j:form>
<a4j:jsFunction name="updateName" reRender="showname">
<a4j:actionparam name="param1" assignTo="#{userBean.name}" />
</a4j:jsFunction>
</a4j:form>
<br />
</ui:composition>
Poll标签:
说明:该标签相当于一个计时器,会以某频率刷新页面上的指定区域。
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<a4j:region>
<h:form>
<a4j:poll id="poll" interval="500" enabled="#{pollBean.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" <b
发表评论
-
richfaces fileupload
2009-04-10 17:30 2333web.xml <filter& ... -
Rich:message 用tooltip显示
2009-03-10 14:19 2347因为用到了extjs查找dom节点的方法,所以包含一下连个脚步 ... -
richfaces 数据驱动menu(判断菜单切换间隔)
2009-03-10 11:22 2209<rich:tabPanel switchType=&q ... -
Jsf使用Extjs中的loadMask实现页面等待效果
2009-03-05 17:54 5846Introduce a technology ... -
使用cookie保存皮肤
2009-03-04 11:37 1628下面是使用cookie保存皮肤的代码: backbean: @ ... -
动态改变RichFaces自带的几种皮肤
2009-02-24 18:31 1957给RichFaces设置一个皮肤很简单,只要在web.xml文 ... -
Richfaces 自定义皮肤的两种方法
2009-01-20 17:37 2958Method one: change the whole a ... -
Richfaces tree 通过读取property文件构建树
2009-01-09 17:50 2145view: <h:panelGrid columns= ... -
Richfaces 中<rich:modalPanel />的开启与关闭方式
2009-01-09 14:41 2375Richfaces 中<rich:modalPanel ... -
a4j:jsFunction的使用
2009-01-08 16:17 4433Ajax4jsf所提供的灵活度是非常高。例如a4j:suppo ... -
A4j 动态include页面 格式注意
2009-01-08 15:42 2069<a4j:include ajaxRendered=&q ...
相关推荐
JSF2和RICHFACES4使用指南
Richfaces组件使用指南、richfaces手册(很详细、很全面的教程)
教会如何使用richfaces,及richfaces应用
java Richfaces组件使用指南
使用richfaces需要用到的jar包! commons-beanutils-1.7.0.jar,commons-codec-1.3.jar,commons-collections-3.2.jar,commons-digester-1.8.jar,commons-discovery-0.4.jar,commons-el-1.0.jar,commons-...
Richfaces3.3.3常用组件使用手册 便于学习Richfaces和a4j和jsf框架 很好很实用
本文档主要根据richfaces3.3.3 用户手册和demo 编写。 Richfaces 下载地址http://www.jboss.org/richfaces/download/stable。 demo 下载地址http://www.jboss.org/richfaces/demos。
RichFaces组件简介,复合组件,日期控件,Ajax标签, 轻松实现。RichFaces组件简介,复合组件,日期控件,Ajax标签, 轻松实现。RichFaces组件简介,复合组件,日期控件,Ajax标签, 轻松实现。
richfaces标签学习笔记richfaces标签学习笔记richfaces标签学习笔记richfaces标签学习笔记
Richfaces标签 简介Richfaces标签相关内容 初学者认知
这是richfaces 3.3.1的用户手册PDF版
详细的介绍了RichFaces中的Ajax组件的使用配置以及组件的使用方法。是为初学者了解ajax组件提供一点方便
richFaces的帮助文档 详细讲解richFaces的控件的使用 英文的哦~~
关于richfaces的一些比较好的资料,希望大家看了能有收获
Richfaces 使用说明
JSF实例子 richfaces实例 包括ajax,双联菜单等,所有的JSF,richfaces控件 直接放入到jboss 5 或者 6的defaut/deploy目录下即可运行。如:http://10.213.11.91/rs/
RichFaces_3.3.3_TLD.chm
richfaces中文开发文档 纯中文 适合维护老项目的人
richfaces3.1.4版的demo,运行在jboss和tomcat5.5下