RichFaces rich:inplaceInput用法详解 rich组件|RichFaces

本文概述

样式类和皮肤参数
例子

RichFaces提供了< rich：inplaceInput> 组件, 该组件用于创建可编辑的文本框。它允许以文本块的形式在线输入文本。它提高了文本的可读性。
它具有三个功能状态：

查看状态：在此状态下, 组件显示其初始设置, 例如单击以进行编辑。
编辑状态：在此状态下, 用户可以输入文本。
更改状态：在此状态下, 已确认组件的新值, 但可以根据需要再次进行编辑。

样式类和皮肤参数下表包含inplaceInput的样式类和相应的外观参数。

Class	Function	Skin Parameters	映射的CSS属性
.rf-ii	当它处于默认状态时, 用于定义就地输入的样式。	editorBackgroundColor	background-color
.rf-ii-act	当它处于编辑状态时, 用于定义就地输入的样式。	没有皮肤参数。
.rf-ii-chng	当它处于更改状态时, 用于定义就地输入的样式。	没有皮肤参数。
.rf-ii-dis	它用于在就地输入处于禁用状态时为其定义样式。	没有皮肤参数。
.rf-ii-fld	它用于为就地输入字段定义样式。	editBackgroundColor generalTextColor	背景色, 边框底色
.rf-ii-lbl	它用于为就地输入的标签定义样式。	generalSizeFont	font-size
.rf-ii-dflt-lbl	它用于为就地输入的默认标签定义样式。	没有皮肤参数。
.rf-ii-btn	它用于为就地输入按钮定义样式。	tabBackgroundColor	background-color
.rf-ii-btn-p		tabBackgroundColor	background-color
.rf-ii-btn-set, .rf-ii-btn-prepos, .rf-ii-btn-pos	用于定义按钮的位置。	没有皮肤参数。
.rf-ii-btn-shdw	它用于为就地输入的按钮阴影定义样式。	没有皮肤参数。
.rf-ii-btn-shdw-t, .rf-ii-btn-shdw-b, .rf-ii-btn-shdw-l, .rf-ii-btn-shdw-r	这些类定义按钮阴影的顶部, 底部, 左侧和右侧。	没有皮肤参数。
.rf-ii-none	当无法编辑时, 用于定义就地输入的样式。		没有皮肤参数。

例子在下面的示例中, 我们正在实现< rich：inplaceInput> 组件。本示例包含以下文件。
JSF文件
// inplace-input.xhtml

< ?xml version='1.0' encoding='UTF-8' ?> < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:a4j="http://richfaces.org/a4j"xmlns:rich="http://richfaces.org/rich"> < f:view> < h:head> < title> InplaceInput Example< /title> < /h:head> < h:body> < h:form> < rich:inplaceInputvalue="http://www.srcmini.com/#{user.name}"defaultLabel="Enter Your Name"> < /rich:inplaceInput> < /h:form> < /h:body> < /f:view> < /ui:composition>

托管豆
// User.java

import javax.faces.bean.ManagedBean; import javax.faces.bean.RequestScoped; @ManagedBean@RequestScopedpublic class User {String name; public String getName() {return name; }public void setName(String name) {this.name = name; }}

输出