RichFaces输入与输出组件全解析

### RichFaces 输入与输出组件全解析 #### 1. RichFaces 日历组件的使用与定制 RichFaces 的日历组件功能强大，支持多种定制方式，包括设置语言环境、服务端定制和客户端定制。 ##### 1.1 设置日历语言环境 可以通过 `locale` 属性设置日历的语言环境，例如设置为意大利语环境： ```xml <rich:calendar datePattern="dd/M/yy hh:mm:ss" locale="it"/> ``` 通常情况下，无需显式定义 `locale` 属性，应用当前语言环境会影响所有日历，并使用相应的资源包。 ##### 1.2 服务端定制：使用 CalendarDataModel 日历组件支持通过自定义数据模型来定制月份标记。要创建数据模型，需要实现 `CalendarDataModel` 和 `CalendarDataModelItem` 两个接口。 `CalendarDataModelItem` 接口的方法如下表所示： | 方法名 | 描述 | | --- | --- | | getStyleClass | 返回单个日期单元格的样式类 | | isEnabled | 返回一个布尔标志，定义该日期是否可选择 | | getData | 返回可用于客户端标记定制的额外数据映射 | | getTooltip | 返回给定日期的工具提示标签，当前未使用，为未来版本保留 | | getDay | 返回该月中的日期号 | 日历组件有两种工作模式：Ajax 模式和客户端模式。在客户端模式下，日历在客户端切换月份时会重新构建月份标记；在 Ajax 模式下，新的月份数据从服务器获取。 以下是一个使用 Ajax 模式的数据模型示例，定义了一些简单规则： - 当前日期之前的日期禁用并相应设置样式。 - 周二和周四被视为“忙碌”日，禁用并设置特殊样式。 - 周六和周日禁用并设置特殊样式。 JSF 页面代码如下： ```xml <style> .bdc { background-color: gray; } .wdc { font-weight: bold; font-style: italic; } </style> <h:form> <rich:calendar mode="ajax" popup="false" dataModel="#{calendarModel}" /> </h:form> ``` 注意：使用 Ajax 模式时，不要忘记将 `<rich:calendar>` 放在 `<h:form>` 内。 托管 Bean 代码如下： ```java @ManagedBean @ApplicationScoped public class CalendarModel implements CalendarDataModel { private static final String WEEKEND_DAY_CLASS = "wdc"; private static final String BUSY_DAY_CLASS = "bdc"; private static final String BOUNDARY_DAY_CLASS = "rf-ca-boundary-dates"; private boolean checkBusyDay(Calendar calendar) { return (calendar.get(Calendar.DAY_OF_WEEK) == Calendar.TUESDAY || calendar.get(Calendar.DAY_OF_WEEK) == Calendar.THURSDAY); } private boolean checkWeekend(Calendar calendar) { return (calendar.get(Calendar.DAY_OF_WEEK) == Calendar.SUNDAY || calendar.get(Calendar.DAY_OF_WEEK) == Calendar.SATURDAY); } public CalendarDataModelItem[] getData(Date[] dateArray) { CalendarDataModelItem[] modelItems = new CalendarModelItem[dateArray.length]; Calendar current = GregorianCalendar.getInstance(); Calendar today = GregorianCalendar.getInstance(); today.setTime(new Date()); for (int i = 0; i < dateArray.length; i++) { current.setTime(dateArray[i]); CalendarModelItem modelItem = new CalendarModelItem(); if (current.before(today)) { modelItem.setEnabled(false); modelItem.setStyleClass(BOUNDARY_DAY_CLASS); } else if (checkBusyDay(current)){ modelItem.setEnabled(false); modelItem.setStyleClass(BUSY_DAY_CLASS); } else if (checkWeekend(current)){ modelItem.setEnabled(false); modelItem.setStyleClass(WEEKEND_DAY_CLASS); } else{ modelItem.setEnabled(true); modelItem.setStyleClass(""); } modelItems[i] = modelItem; } return modelItems; } @Override public Object getToolTip(Date date) { return null; } } public class CalendarModelItem implements CalendarDataModelItem{ private boolean enabled; private String styleClass; @Override public boolean isEnabled() { return enabled; } @Override public String getStyleClass() { return styleClass; } public void setEnabled(boolean enabled) { this.enabled = enabled; } public void setStyleClass(String styleClass) { this.styleClass = styleClass; } } ``` ##### 1.3 客户端定制：使用 JavaScript 日历组件还支持客户端定制，有两个可用属性：`dayClassFunction` 和 `dayDisableFunction`。这些属性应定义为 JavaScript 函数名，函数应接受日期参数并返回 CSS 类和布尔标志，指示该日期是否可选择。 以下是一个客户端定制的示例： ```xml <style> .everyThirdDay { background-color: gray; } .weekendBold { font-weight: bold; font-style: italic; } </style> <script type="text/javascript"> var curDt = new Date(); function disablementFunction(day){ if (day.isWeekend) return false; if (curDt==undefined){ curDt = day.date.getDate(); } if (curDt.getTime() - day.date.getTime() < 0) return true; else return false; } function disabledClassesProv(day){ if (curDt.getTime() - day.date.getTime() >= 0) return 'rf-cal-boundary-day'; var res = ''; if (day.isWeekend) res+='weekendBold '; if (day.day%3==0) res+='everyThirdDay'; return res; } </script> <rich:calendar dayDisableFunction="disablementFu ```