把ExtJS的组件包装成 JSF 组件(2)

最新推荐文章于 2021-07-31 00:39:49 发布

asanlr

最新推荐文章于 2021-07-31 00:39:49 发布

阅读量97

点赞数

分类专栏： java 文章标签： JSF EXT SQL JavaScript Bean ViewUI

java 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

（续）Ext 的 DateField 输入日期很方便，因此决定把它做成 JSF 组件来使用。

写一个 JSF 组件比较麻烦，至少要写Component 类和一个 Tag 类，这种情况下，Component 负责 render 工作。
但通常我们都会写多一个 Renderer，负责 encode 、decode 及转换客户端提交的数值。
btw，Renderer 其实是通过 component 来调用的，因此，Renderer 中有什么方法，都可在UIComponent 中找到。

这个组件叫 ExtInputDate，Component 代码：

java 代码

public class ExtInputDate extends ExtInput {
public final static String COMPONENT_TYPE = "example.ExtInputDate";
public final static String COMPONENT_FAMILY = "example.ExtInputDate";
public final static String DEFAULT_FORMAT = "yyyy-MM-dd";
private String format;
private Integer width;
private Boolean readonly;
private Boolean disabled;
private String styleClass;
@Override
public String getFamily() {
return COMPONENT_FAMILY;
}
@Override
public String getEndingScript() {
// 输出 JavaScript 代码，略。注意转换 Java 的日期格式为 Ext 的日期格式
// ...
}
public String getFormat() {
if (format == null) {
ValueExpression ve = getValueExpression("format");
if (ve != null) {
format = (String) FacesUtils.getExpressionValue(ve, getFacesContext().getELContext());
}
if (format == null) {
format = DEFAULT_FORMAT;
}
}
return format;
}
public void setFormat(String format) {
this.format = format;
}
// 其他 getter / setter, 略
// TODO: ...
@Override
public void restoreState(FacesContext context, Object state) {
Object values[] = (Object[]) state;
super.restoreState(context, values[0]);
format = (String)values[1];
width = (Integer)values[2];
readonly = (Boolean)values[3];
disabled = (Boolean)values[4];
styleClass = (String)values[5];
}
@Override
public Object saveState(FacesContext context) {
Object values[] = new Object[6];
values[0] = super.saveState(context);
values[1] = format;
values[2] = width;
values[3] = readonly;
values[4] = disabled;
values[5] = styleClass;
return ((Object) (values));
}
}

Component 必须有 restoreState 和 saveState 方法，而且在这两个方法里面必须调用 super 的同名方法。
这一点，感觉很不爽...

UIInput 类的组件，有个变量叫 submittedValue，这个是客户端提交的值，
在 Apply Request Value 阶段 decode 的时候被设置，可以转换为String 类型；
另外有个 value 变量，存放 value 表达式的值。
那么，在 render 的时候，显示哪个值呢？
一般的做法是，如果 submittedValue 不为null，显示 submittedValue；否则显示 value。

Renderer类：

java 代码

public class ExtInputDateRenderer extends Renderer {
public final static String RENDERER_TYPE = "example.ExtInputDateRenderer";
@Override
public void encodeBegin(FacesContext context, UIComponent component)
throws IOException {
if (component.isRendered()) {
ResponseWriter writer = context.getResponseWriter();
String clientId = component.getClientId(context);
writer.startElement("div", component);
writer.writeAttribute("id", clientId, "clientId");
String styleClass = (String) component.getAttributes().get("styleClass");
if (StringUtils.isNotEmpty(styleClass)) {
writer.writeAttribute("class", styleClass, null);
}
writer.endElement("div");
}
}
@Override
public void decode(FacesContext context, UIComponent component) {
if (component.isRendered() && component instanceof ExtInputDate) {
Map paramMap = context.getExternalContext()
.getRequestParameterMap();
String clientId = component.getClientId(context);
// 允许 readonly
if (RendererUtils.isDisabled(component))
return;
if (paramMap.containsKey(clientId)) {
((EditableValueHolder) component).setSubmittedValue(paramMap.get(clientId));
}
} else {
throw new IllegalArgumentException("Unsupported component class "
+ component.getClass().getName());
}
}
@SuppressWarnings("unchecked")
public Object getConvertedValue(FacesContext context,
UIComponent component, Object submittedValue)
throws ConverterException {
ValueExpression valueExpression = component.getValueExpression("value");
if (valueExpression == null)
return null;
Class converterType = valueExpression.getType(context.getELContext());
if (converterType == String.class) {
return submittedValue;
} else if (converterType == Date.class
|| converterType == java.sql.Date.class) {
String s = (String) submittedValue;
if (StringUtils.isEmpty(s))
return null;
ExtInputDate inputDate = (ExtInputDate) component;
SimpleDateFormat df = new SimpleDateFormat(inputDate.getFormat());
try {
return df.parse(s);
} catch (ParseException e) {
throw new ConverterException(e);
}
} else {
throw new ConverterException();
}
}
}

这个组件里面，decode 所做的事情只是设置 submittdValue，
getConvertedValue() 函数把客户端提交的值，转换为相应的类型。
这个函数在 Update Model Value阶段由 Component 调用，
更新 managed-bean 的值。
一般来说，需要考虑是否有 converter。
不过这个组件中，自己负责日期转换的工作，因此不需要 converter。
此外，这个组件只支持 String, java.util.Date, java.sql.Date 三种类型的值。