Liferay中日历组件的使用

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>