Liferay 6.1开发学习（十三）：弹出层/弹出对话框的使用
一、弹出div层
有几种写法，本质上是一样的，一种是普通的JavaScript代码，一种是使用aui标签。
1、普通的javascript代码
<script>
function test(){
AUI().use('aui-dialog', function(A) {
var popup = new A.Dialog(
{
bodyContent: A.one('#webDav').html(),
centered: true,
destroyOnClose: true,
modal: false,
title: '弹出层测试',
width: 500,
buttons: [
{
label: '确定',
handler: function() {
alert('点击了确定');
}
},{
label:'取消',
handler:function(){
this.close();
}
}
]
}
).render();
});
}
</script>
代码看起来有点小复杂，其实很简单，逐步的说明一下：
var popup： 这是定义当前的弹出层对象。在其他地方可以使用popup.close()关闭当前的对话框。
bodyContent: A.one('#webDav').html()：表示弹出层的正文，这里是弹出一个id为webDav的对象。A.one('#webDav').html()这是aui代码的写法（aui其实是YUI的衍生版，所以和YUI的用法基本上一样），表示选择id为webDav的对象，取其中的html代码。
centered：弹出后是否居中，默认为false.
destroyOnClose：是否在半闭时销毁
modal: 是否模态否，也就是是不是锁定背景是否让背景可以编辑，值为true/false，默认为false，为true时背景不可以编辑。
title:弹出层的标题，使用单引号或双引号。
width:弹出层的宽度，必须为数字，不能用百分比。如果不写为自适应。
height:弹出层的高度，如果不写为自适应。
buttons:在弹出层上面定义的按钮。非必须。我们一般添加确定和取消两个。多个按钮之间使用逗号分割，text的内容为按钮的显示值，handler为绑定的方法
2、使用aui标签
<aui:script use="aui-dialog">
var create = A.one('#createNew');
create.on(
'click',
function(event) {
var popup = new A.Dialog(
{
bodyContent: A.one('#webDav').html(),
centered: true,
modal: true,
title: '弹出层测试',
width: 500
}
).render();
}
);
</aui:script>
和上面的的基本上差不多，这里是在createNew的对象上绑定了一个click的方法，如果此对象被点击了，执行弹出层代码。其他的和上面的一样。
上面使用的是aui标签，所以需要在页中引入
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
3、使用Liferay.provide
此种方法和上面的非常类似，如下：
<aui:script>
Liferay.provide(
window,
'showDialog',
function() {
var A = AUI();
var dialog = new A.Dialog(
{
bodyContent: A.one('#webDav').html(),
destroyOnClose: true,
modal: false,
title: '这是标题',
width: 900
}
).render();
},
['aui-dialog']
);
</aui:script>
写法和上面的没有太多的区别，只是写法的不同。showDialog 这个参数其实就是函数名，在其他地方可以直接调用此方法来弹出下面的弹出层，如果是要传参数可以直接写在showDialog(arg)这个里面。上面的的function里面添加此参数。如function(arg)，在下面直接使用arg参数即可。
二、弹出一个HTML页面或者是JSP页面。
弹出一个页面的方法和上面的基本上相同，具体看下面的示例。
<aui:script>
Liferay.provide(
window,
'showDialog',
function() {
var A = AUI();
var url= "要弹出的页面的地址";
var dialog = new A.Dialog(
{
destroyOnClose: true,
modal: false,
title: '这是标题',
width: 900
}
).plug(
A.Plugin.IO,
{
uri: url
}
).render();
},
['aui-dialog']
);
</aui:script>
不同之处是加了一个plug来显示待弹出的页面地址。在dialog里面也可以添加bodyContent属性，里面可以添加上在弹出的过程的提示语，比“页面正在加载中请稍候……”，在url加载后将替换上面的内容。
三、弹出一个portlet页面。
使用二里面的方法也可以弹出一个portlet页面，但是有时候会不能正常工作，步骤2的弹出的原理还是弹出一个div，在这个div里面加载目标页面的内容。弹出portlet页面我们需要弹出一个iframe，这样就可以使弹出的portlet页面正常工作。方法如下：
<aui:script>
Liferay.provide(
window,
'showPortletUrl',
function(url) {
var instance = this;
Liferay.Util.openWindow(
{
cache: false,
dialog: {
align: Liferay.Util.Window.ALIGN_CENTER,
after: {
render: function(event) {
this.set('y', this.get('y') + 50);
}
},
width: 1000
},
dialogIframe: {
id: 'siteManagementIframe',
uri: url
},
title: '管理页面',
uri: url
}
);
},
['liferay-util-window']
);
</aui:script>
在上面的方法中我是将待弹出的porltet的URL以参数的形式传进来的，调用的时候方法为：showPortletUrl（url）。dialogIframe中的id为弹出的iframe的id名，uri为待加载的portlet页面地址。
注意：如果要弹出porltet，请讲windowState设为pop_up，也就是LiferayWindowState.POP_UP这个变量。
WoredPress垃圾评论屏蔽插件
博客的后台经常有大量的垃圾评论，由于设置了回复发邮件通知，手机上又有微信接受邮件通知，结果就是一天到晚收到垃圾评论的提醒，烦不胜烦。
刚开始琢磨着添加一个验证码来屏蔽垃圾评论，但是发现添加了验证码没有作用，难道这些垃圾评论不是程序生成的？还是WordPress有漏洞？不得而知。
在搜索插件的时候发现了一个叫Akismet的插件，对于屏蔽这些垃圾评论有奇效。
可以在wordpress的后台插件管理处搜索此插件进行安装。
安装之后在http://akismet.com/wordpress/申请一个密钥，填到此插件配置处即可启用垃圾评论屏蔽。
FusionCharts入门指南
最近在项目中做了一个自定义指标配置的功能，其中的指标展现部分使用的FusionCharts，这个图表的功能强大，入门简单。
一、下载相关文件
首先从官方网站下载相关的内容，下载地址：http://www.fusioncharts.com/download/trials/。
其中的fusioncharts是一些常用的指标类型，如饼图、折线图、柱状图等等。
官方下载地址：http://www.fusioncharts.com/Downloads/Evals/FusionCharts_XT_Evaluation.zip
FusionWidgets是一些像仪表盘、温度计、计量仪等类弄的图表。
官方下载地址：http://www.fusioncharts.com/Downloads/Evals/FusionWidgets_XT_Trial.zip
官方所有下载地址：包括以上和powecharts、map等。
http://www.fusioncharts.com/downloads/Evals/FusionChartsSuiteXTEval.zip
从官方网站上下载的是试用版，在图表的左上角会有一个Fusioncharts的水印（破解版就是去除这个水印，破解版可以到网上搜索，这里不再提供），如下图所示：
二、如何学习
破解版是去掉了上面的水印，相对于正式版没有其他的区别，所以代码的书写上是一样的。这里是以3.2版本为例的。
将下载的压缩包解压，双击里面的Index.html页面，会打开一个主页，里面显示有文档、示例等，其中的Documentation是文档，里面有详细的说明第一个的xml、json的示例，是学习使用的最佳文档。
Chart Gallery算是一个快速导览，里面提供一些效果的展示。
Live Deom常用图表的示例。
如果在这些里面不方便查找自己想要的，可以点击code目录，code目录下面有具体第一个图表的示例。点击相应的文件夹即可浏览示例代码。
三、如何编写
1、使用时首先将charts目录复制到自己的项目工程的某一个目录下面。
2、在页面中引入jquery的库（可以是charts目录下面的jquery，也可以是外部的）
3、引入FusionCharts.js库，这个库的路径是在charts目录下面，也就是图表所在的目录。
4、在页面中开始编写代码。示例（计量仪）代码如下：
<div id="chartContainer"></div>
<script type='text/javascript'>
var myChart = new FusionCharts( "FusionCharts/Cylinder.swf", "myChartId", "200", "250", "0", "1" );
var json={
"chart": {
"palette": "4", //颜色方案，有1-5
"lowerlimit": "0", //最小值
"upperlimit": "4000", //最大值
"numbersuffix": " 个", //单位
"bgcolor": "FFFFFF" //颜色
},
"value": "2452" //实际的值
};
myChart.setJSONData(json);
myChart.render("chartContainer");
</script>
5、为简单示意，就调了一个相关比较简单的图表，其他图表只是中间的JSON数据有区别，其他地方区别不大。
6、逐行解释意思：
new FusionCharts：这是新建一个图表对象，其中第一个参数为相对应的图表地址；第二个参数此图表的ID，用于在其他地方调用；第三个参数是宽；第四个是高；第五个为是否debug模式，0为否；第六个参数为是否注册js，也就是js和flash是否可以相互通信调有。一般为1.
var json:这里为我自己定义的json对象数据，FusionCharts支持XML和json两种数据格式，我这里是使用的json。
myChart.setJSONData(json)：将前面的数据传入到FusionCharts中。这里可以使用xml的，代码为myChart.setXMLData（xml）。如果是远程加载的，为myChart.setXMLUrl（url）。
myChart.render("chartContainer")：渲染FusionCharts。里面的参数为html元素的容器ID。也主是在哪一个容器里面显示此图表。
这样就完成了图表的显示。不同的图表中在于其中json或者xml数据的区别，和图表的一些元数据，如使用哪一个图表、宽、高等信息。其他一样，具体的可以看文档。
四、其他
在网上下载的破解版，有时候会出现有些图表数据不能正确显示，仔细观察但又发现json数据格式是正确。这个原因是由于js的问题，请从官网上下载最新的FusionCharts。然后将里面的FusionCharts.js替换破解版里面的即可。
Liferay的AUI框架如何学习
一、AUI是什么？
Liferay中的AUI框架，官方叫做Alloy，是一个UI超框架，能为浏览器的三方面，结构，风格和表现建立网络应用提供连续的简单的API。
它融合了三种设计语言：HTML, CSS 和 JAVA。
准确来说AUI是Liferay在YUI的基础上进行的Liferay扩展，以方便Liferay的一些实际应用和扩展。AUI的很多语法结构、使用方法都都和YUI相关不太多。熟悉YUI的能够快速熟悉AUI。
二、如何学习
学习AUI最简单的方法就是将官方的Alloy包下载下来，这个需要到Liferay官网上下载，没有和Liferay的下载包整合在一起。下载地址：http://www.liferay.com/downloads/liferay-projects/alloy-ui
下载下来的alloy包里面的包结构如下：
可以看到里面有API、demos等，我们主要关心这两个内容，可以在demos下面看到各个组件的demo，查看html的源代码即可看到使用方法，在API里面有各个组件的API说明。
通过查看demos和api就可以快速的掌握如何使用AUI。