Liferay中日历组件的使用
10.1 Journal Portlet的例子用法
在Liferay自带的portlet中,journal是一个很好的例子。
10.1.1 JSP中的用法
在文件portal-web/docroot/html/portlet/journal/edit_article.jsp中,用法如下:
<%
Calendar displayDate = new GregorianCalendar(timeZone, locale);
if (article.getDisplayDate() != null) {
displayDate.setTime(article.getDisplayDate());
}
%>
<liferay-ui:input-field model="<%= JournalArticle.class %>" bean="<%= article %>" field="displayDate" defaultValue="<%= displayDate %>" />
这样,将会显示日期控件,具体样式可以看实际运行的例子。年月日分别显示,并且有一个日历按钮,可以弹出一个典型的日历界面。
10.1.2 生成的HTMl代码
生成的代码还挺长,主要分成以下几个部分:
1、 相应的JavaScript语句
这部分代码,一是创建一个Calendar对象,就是会弹出来的日历页面。另有两个JS函数jsOnClose和jsOnSelect。
从这段代码可以看到,如果在一个页面中有多个Date输入框,将会生成多个Calendar对象。
2、 生成年月日的HTML代码
年月日代码,在Liferay里面,是三个单独的Select框。
3、 一个弹出日历页面的图片
用了一个图片calendar.gif,单击就会显示日历页面。
4、 生成时分的HTML代码
在Liferay里面,有两个Select框,和一个AM、PM的选项框。
10.1.3 Action中获取时间的方法
因为HTML代码是将时间分成了多个Input,因此在Action里面获取时间,并不是简单的getParameter,而是要根据多个input值,生成相应的Date。
核心代码为
int displayDateMonth = ParamUtil.getInteger(req, "displayDateMonth");
int displayDateDay = ParamUtil.getInteger(req, "displayDateDay");
int displayDateYear = ParamUtil.getInteger(req, "displayDateYear");
int displayDateHour = ParamUtil.getInteger(req, "displayDateHour");
int displayDateMinute = ParamUtil.getInteger(req, "displayDateMinute");
int displayDateAmPm = ParamUtil.getInteger(req, "displayDateAmPm");
if (displayDateAmPm == Calendar.PM) {
displayDateHour += 12;
}
Date displayDate = PortalUtil.getDate(
displayDateMonth, displayDateDay, displayDateYear,
displayDateHour, displayDateMinute, user.getTimeZone(),
new ArticleDisplayDateException());
具体可以看看PortalUtil.getDate的实现代码,就是利用GregorianCalendar生成Date对象。
10.2 源代码阅读
看到这里,可能会有一个疑问,几乎所有的input输入框,都是使用<liferay-ui:input-field>这个Taglib实现的,而且从JSP中,看不出在哪儿定义了这个input-field应该显示为日期,而不是普通的input窗口。
而这,可以通过阅读源代码来解释。具体代码为:
portal/portal-web/docroot/html/taglib/ui/input_field/page.jsp
通过阅读这段代码,可以知道,不同类型的field,将会生成不同的HTML代码,而依据就是配置文件portal-model-hints.xml和ext-model-hints.xml。这里面有Field的类型的定义。
比如,Journal里面的displayDate的定义则为:
<field name="displayDate" type="Date" />。
另外,通过源代码还可以看到,如果只是显示年月日,而不显示时分,可以设置为
<field name=" displayDate" type="Date">
<hint name="show-time">false</hint>
</field>