现在来看看63. XPages自定义控件（三）高级搜索之一中提到的RecordView自定义控件的代码。从控件的设计视图自上而下可以看到用于条件查询的控件、一个向用户反馈操作消息的Message自定义控件、常见的视图操作的几个按钮和一个XPages自带的视图控件。
RecordView控件的设计界面
RecordView控件从功能上分成的这四个部分，我们来一一检视：
用于条件查询的控件
RecordView控件上的多条件查询包括员工姓名和打卡的起始日期。员工姓名的输入又采用了另一个自定义控件InputUser，在用户键入姓名时提供员工姓名列表的辅助输入（type ahead）。InputUser控件的界面代码如下：
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
style="display:inline; ">
<xp:inputText id="Users" style="float:none;width:auto">
<xp:typeAhead mode="full" minChars="1" ignoreCase="true"
id="typeAhead1">
<xp:this.valueList><![CDATA[${app.usersOptions}]]></xp:this.valueList>
</xp:typeAhead>
</xp:inputText>
</xp:view>
辅助输入的值列表用表达式语言（expression language）设置，来自一个类名为starrow.xsp.App的managed bean的getUsersOptions()方法：
public List getUsersOptions() throws NotesException{
Vector result=new Vector();
try {
//获得HR数据库的路径
String path = getHRDBPath();
//XSPUtil是笔者编写的一个包含很多常用方法的工具类。
Database db=XSPUtil.getDatabase(path);
result=db.getView("bySCRO").getColumnValues(1);
} catch (NotesException e) {
if (e.id==NotesError.NOTES_ERR_DBNOACCESS){
XSPUtil.feedback(e.text);
}else{
throw e;
}
}
return result;
}
起始日期使用了两个XPages日期控件。其后的三个按钮，一个是用于测试，读取和显示从InputUser控件获得的用户名，另两个分别用于搜索和清除结果，XPage的代码片断如下：
<xp:button value="Search" id="btnSearch">
<xp:eventHandler event="onclick" action="#{app.search}"
submit="true" refreshMode="complete">
</xp:eventHandler>
</xp:button>
<xp:button value="Clear" id="button1">
<xp:eventHandler event="onclick" action="#{app.clearSearch}"
submit="true" refreshMode="complete">
</xp:eventHandler>
</xp:button>
可以看到两个按钮的onclick事件的响应程序也都是用表达式语言绑定到同一个managed bean里，不同的是这里采用的是表示动态计算的#符号而不是上面的InputUser控件用到的设定页面载入时记算的$符号，这并不是笔者的有意选择，而是因为如果选择更高效的页面载入时计算，XPages会报错。 public void search(){
//获得XPages视图控件
XspViewPanel viewPanel1 = (XspViewPanel) JSFUtil.findComponent("viewPanel1");
//获得视图控件绑定的的数据源
DominoViewData vd=(DominoViewData) viewPanel1.getData();
//为方便构造查询条件，创建一个字符串的Collection
Collection<String> filters=new Vector<String>();
String filter="";
//获得RecordView自定义控件
UIIncludeComposite cc=(UIIncludeComposite) JSFUtil.findComponent("recordView1");
//cc.getPropertyMap().getString("filter")
//com.ibm.xsp.FacesExceptionEx: Null value for composite component property filter
//如果设置了该控件的filter属性，则将属性值添加到查询条件里。
if (cc.getPropertyMap().get("filter")!=null){
filters.add("("+cc.getPropertyMap().get("filter")+")");
}
//获得输入起始时间的编辑框
XspInputText inpFrom=(XspInputText) JSFUtil.findComponent("inpFrom");
//获得起始时间值，格式化，并用它构造出用于全文搜索的语句
if (inpFrom.getValue()!=null && !inpFrom.getValue().equals("")){
SimpleDateFormat df=new SimpleDateFormat("MM/dd/yy");
Date from=(Date) inpFrom.getValue();
filters.add("([AccessTime]>="+df.format(from)+")");
}
//类似地处理结束时间
XspInputText inpTo=(XspInputText) JSFUtil.findComponent("inpTo");
if (inpTo.getValue()!=null && !inpTo.getValue().equals("")){
SimpleDateFormat df=new SimpleDateFormat("MM/dd/yy");
Date to=(Date) inpTo.getValue();
filters.add("([AccessTime]<="+df.format(to)+")");
}
//获得输入用户的编辑框，构造出查询语句
XspInputText inpUser=(XspInputText) JSFUtil.findComponent("Users");
if (!inpUser.getValue().equals("")){
filters.add("([StaffName]="+inpUser.getValueAsString()+")");
}
//合并出最终的查询语句，传递给Message自定义控件
filter=starrow.Commons.join(filters, " & ");
XSPUtil.getRequestMap().put("message", filter);
//设置数据源的搜索条件，即搜索。
vd.setSearch(filter);
}
public void clearSearch(){
//清空各个输入查询条件的编辑框
((XspInputText) JSFUtil.findComponent("inpFrom")).setValue("");
((XspInputText) JSFUtil.findComponent("inpTo")).setValue("");
((XspInputText) JSFUtil.findComponent("Users")).setValue("");
//调用搜索方法
this.search();
}
Message自定义控件
15. 如何在XPages中提示操作成功一文里介绍了在XPages中向用户提供操作结果反馈的两类方式，其中的第二种方式——在页面的某个部分显示消息——是现在流行的风格。很容易将这项功能封装在一个自定义控件里，这样在任何页面也只需在想要的位置放置，再在运行业务逻辑结束后将给用户的提示传递到指定的RequestScope的Message变量就可以了。上面的search()方法就运用了这一点。
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:text escape="true" id="message" value="#{requestScope.message}"
style="background-color:rgb(255,255,0)">
</xp:text>
</xp:view>反馈信息的格式，如字体、颜色和背景等都可以在控件里预先设置，整个应用程序里各处的反馈信息自动具有了统一的风格。
常见的视图操作的几个按钮
这些按钮是刷新、新建和删除，是最常见的视图操作。普通的刷新只需要用JavaScript重新载入当前页面或者在XPages的语境下提交一个空操作。而我们这里的RecordView控件显示的不是一个Notes视图而是一个视图的全文搜索的结果，所以在点击刷新按钮时还更新了数据库的全文索引。
<xp:button value="Refresh" id="button5">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:database.updateFTIndex(false);}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
新建按钮使用浏览器端JavaScript打开一个新页面。
<xp:button value="New" id="button3" rendered="true">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[window.open("record.xsp", "_blank");]]></xp:this.script>
</xp:eventHandler>
</xp:button>删除按钮为了简单直接调用了XPages提供的删除文档的简单操作（simple action）。
<xp:button value="Delete" id="button4">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:deleteSelectedDocuments view="viewPanel1"
message="Are you sure to delete the selected records?">
</xp:deleteSelectedDocuments>
</xp:this.action>
</xp:eventHandler>
</xp:button>
XPages视图控件
这个视图控件的设置和普通页面上的没有什么区别，除了其中的数据源和视图列的viewName、search、showCheckbox等属性绑定到了RecordView控件的自定义属性。
<xp:viewPanel rows="20" id="viewPanel1" viewStyle="width:99%"
pageName="/record.xsp">
<xp:this.facets>
<xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="headerPager" id="pager1">
</xp:pager>
<xp:pager partialRefresh="true" layout="Previous Group Next"
xp:key="footerPager" id="pager2">
</xp:pager>
</xp:this.facets>
<xp:this.data>
<xp:dominoView var="view1"
viewName="${javascript:compositeData.notesView;}"
search="#{javascript:compositeData.filter;}" sortOrder="descending"
sortColumn="$8">
</xp:dominoView>
</xp:this.data>
<xp:viewColumn id="viewColumn8" columnName="$8"
showCheckbox="${javascript:compositeData.showEdit}">
<xp:this.displayAs><![CDATA[${javascript:if (compositeData.showEdit) return "link";}]]></xp:this.displayAs>
<xp:this.facets>
<xp:viewColumnHeader xp:key="header"
id="viewColumnHeader8" value="Date">
</xp:viewColumnHeader>
</xp:this.facets>
<xp:this.converter>
<xp:convertDateTime type="date"></xp:convertDateTime>
</xp:this.converter>
</xp:viewColumn>
<xp:viewColumn columnName="StaffName" id="viewColumn4">
<xp:viewColumnHeader value="Staff Name"
id="viewColumnHeader4">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="AccessTime" id="viewColumn1">
<xp:this.converter>
<xp:convertDateTime type="time"></xp:convertDateTime>
</xp:this.converter>
<xp:viewColumnHeader value="Access Time"
id="viewColumnHeader1">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn id="viewColumn9" columnName="Type">
<xp:this.facets>
<xp:viewColumnHeader xp:key="header"
id="viewColumnHeader9" value="Type">
</xp:viewColumnHeader>
</xp:this.facets>
</xp:viewColumn>
<xp:viewColumn columnName="CardNo" id="viewColumn2"
rendered="false">
<xp:viewColumnHeader value="Card Number"
id="viewColumnHeader2">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="StaffNo" id="viewColumn3"
rendered="false">
<xp:viewColumnHeader value="Staff Number"
id="viewColumnHeader3">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Department" id="viewColumn5">
<xp:viewColumnHeader value="Department"
id="viewColumnHeader5">
</xp:viewColumnHeader>
</xp:viewColumn>
<xp:viewColumn columnName="Office" id="viewColumn7">
<xp:viewColumnHeader value="Office"
id="viewColumnHeader7">
</xp:viewColumnHeader>
</xp:viewColumn>
</xp:viewPanel>
自定义属性
在63. XPages自定义控件（三）高级搜索之一里，我们看到使用RecordView控件的几个页面在操作和视图显示上都有不同，在异常记录和考勤记录页面上可以使用条件查询，在补卡记录页面上可以新建和选择、删除记录。这些差异都是靠RecordView控件的自定义属性控制的。同理，决定控件展示的文档列表的Notes视图名和全文搜索的语句也是由自定义属性传递。
RecordView控件的自定义属性的设计视图
比如在显示考勤记录的页面里，关于RecordView控件的代码如下：
<xc:RecordView id="recordView1" notesView="vwRecord"
showSearch="${javascript:app.isAdmin()}">
<xc:this.filter><![CDATA[${javascript:var filter="[Type] is present";
if (!app.isAdmin()){
filter+=" & [StaffName]=" + context.getUser().getCommonName();
}
return filter;}]]></xc:this.filter>
</xc:RecordView>
在显示补卡记录的页面里，传递给RecordView控件的属性值就有了变化：
<xc:RecordView id="recordView1" notesView="vwRecord"
showSearch="${javascript:false;//app.isAdmin()}" showLink="true"
showCheckbox="true" showEdit="${javascript:app.isAdmin()}">
<xc:this.filter><![CDATA[${javascript:var filter="[MakeUp]=1";
if (!app.isAdmin()){
filter+=" & [StaffName]=" + context.getUser().getCommonName();
}
return filter;}]]></xc:this.filter>
</xc:RecordView>app.isAdmin()是managedbean里一个判断当前用户是否管理员的方法，如果是则显示所有员工的信息，否则只显示当前用户自己的信息。
RecordView控件的各个组成部分都已介绍完毕，下一篇文章会给出它们的完整代码，并介绍使用这个自定义控件遇上的问题和反映出来的XPages的缺陷。
分享到：
相关推荐
第二课：xpages各类控件的介绍，编辑控件、选择控件、文件处理控件、及开源库里面的常用控件的介绍与使用。
domino xpages 开发 视图View Start Key
domino xpages 开发 时间控件显示24小时制
domino xpages 开发 权限相关 控件只读
XPages是Notes/Domino中新的Web应用开发框架，本书共分为7个部分来分别阐述如何使用XPages进行Web开发，重点讲述了XPages开发的原则和基础、定制控件、高级脚本、可扩展性、脱机使用、主题定制、国际化、安全性及...
domino xpages 开发 时间给控件取赋值
XPages的灵活视图控件可重用的定制控件和配套库，可以放入任何Domino XPage应用程序中建立在jQuery和DataTables以及REST数据之上极其通用且可配置对XPages中的开箱即用工具感到无聊。 目标： 简化视图创建，避免一遍...
A Compact Resource to XPages Application Development and the XSP Language
XPages开发
以前收藏的一些html, xpages,xpages主题分析引用css和js的区别，今天分享出来，以方便大家更清楚的了解主题的引用js和css
domino xpages 开发 权限相关 权限设置html控件可见
domino xpages 文档开发 页面与定制控件绑定FORM特别说明
xpages repeat 显示序号，这个是非常实用的功能，这个实现就是这样的
ibm domino xpages jdbc范例
经几个网上的伙伴交流，做个免费xpages的培训，当然我们讲的内容可能不能大而全、不能面面俱到，但是就把以前 开发接触的知识点收集、归纳、串联来讲，希望能为想学习xpages的同学做个引入门的作用，更深的知识还是...
精通Xpages书本的配套练习题 其他的无。
XPages访问关系型数据库的方法介绍PPT
domino xpages 文档状态改变.
模板资料库文件，本实例系统介绍xpages的功能及用法,具有十分重要的参考价值.
domino xpages 开发 视图建立全文搜索