分三步:
1,liferay-portlet.xml
<portlet>
<portlet-name>albums</portlet-name>
<icon>/icon.png</icon>
<friendly-url-mapper-class>com.liferay.portal.kernel.portlet.DefaultFriendlyURLMapper</friendly-url-mapper-class>
<friendly-url-mapping>albums</friendly-url-mapping>
<friendly-url-routes>com/gsoft/webalbums/albums/portlet/albums-friendly-url-routes.xml</friendly-url-routes>
<restore-current-view>false</restore-current-view>
<instanceable>false</instanceable>
<css-class-wrapper>albums-portlet</css-class-wrapper>
</portlet>
2,albums-friendly-url-routes.xml
<?xml version="1.0"?>
<!DOCTYPE routes PUBLIC "-//Liferay//DTD Friendly URL Routes 6.0.0//EN" "http://www.liferay.com/dtd/liferay-friendly-url-routes_6_0_0.dtd">
<routes>
<route>
<pattern></pattern>
</route>
<route>
<pattern>/add_album</pattern>
<implicit-parameter name="jspPage">/html/albums/edit_album.jsp</implicit-parameter>
<implicit-parameter name="p_p_state">exclusive</implicit-parameter>
</route>
<route>
<pattern>/edit_album/{albumId:\d+}</pattern>
<implicit-parameter name="jspPage">/html/albums/edit_album.jsp</implicit-parameter>
<implicit-parameter name="p_p_state">exclusive</implicit-parameter>
</route>
<route>
<pattern>/share_album/{albumId:\d+}</pattern>
<implicit-parameter name="jspPage">/html/albums/share_album.jsp</implicit-parameter>
<implicit-parameter name="p_p_state">exclusive</implicit-parameter>
</route>
<route>
<pattern>/share_photo/{photoId:\d+}</pattern>
<implicit-parameter name="jspPage">/html/albums/share_album.jsp</implicit-parameter>
<implicit-parameter name="p_p_state">exclusive</implicit-parameter>
</route>
<route>
<pattern>/upload_photos</pattern>
<implicit-parameter name="jspPage">/html/albums/upload_photos.jsp</implicit-parameter>
</route>
<route>
<pattern>/edit_photos</pattern>
<implicit-parameter name="jspPage">/html/albums/edit_photos.jsp</implicit-parameter>
</route>
<route>
<pattern>/edit_photo/{photoId:\d+}</pattern>
<implicit-parameter name="jspPage">/html/albums/edit_photo.jsp</implicit-parameter>
<implicit-parameter name="p_p_state">exclusive</implicit-parameter>
</route>
<route>
<pattern>/get_photo</pattern>
<implicit-parameter name="cmd">getPhoto</implicit-parameter>
<implicit-parameter name="p_p_lifecycle">2</implicit-parameter>
</route>
<route>
<pattern>/delete_tag</pattern>
<implicit-parameter name="cmd">deleteTag</implicit-parameter>
<implicit-parameter name="p_p_lifecycle">2</implicit-parameter>
</route>
<route>
<pattern>/add_tag</pattern>
<implicit-parameter name="cmd">addTag</implicit-parameter>
<implicit-parameter name="p_p_lifecycle">2</implicit-parameter>
</route>
<route>
<pattern>/add_comment</pattern>
<implicit-parameter name="cmd">addComment</implicit-parameter>
<implicit-parameter name="p_p_lifecycle">2</implicit-parameter>
</route>
<route>
<pattern>/{jspPageName}</pattern>
<generated-parameter name="jspPage">/html/albums/{jspPageName}.jsp</generated-parameter>
<implicit-parameter name="p_p_state">exclusive</implicit-parameter>
</route>
<route>
<pattern>/view_album/{albumId:\d+}</pattern>
<implicit-parameter name="jspPage">/html/albums/view_album.jsp</implicit-parameter>
<implicit-parameter name="cmd">viewAlbum</implicit-parameter>
<implicit-parameter name="p_p_state">normal</implicit-parameter>
</route>
<route>
<pattern>/get_photos/{photoId:\d+}</pattern>
<implicit-parameter name="cmd">getPhotos</implicit-parameter>
<implicit-parameter name="p_p_lifecycle">2</implicit-parameter>
</route>
</routes>
3,view.jsp
<%--
/**
* Copyright (c) 2000-2010 Liferay, Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/normal1modify it under
* the terms of the GNU Lesser General Public License as published by the Free
* Software Foundation; either version 2.1 of the License, or (at your option)
* any later version.
*
* This library is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
* FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
* details.
*/
--%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/html/init.jsp" %>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/create.css" />
<link rel="stylesheet" href="<%= request.getContextPath() %>/css/style.css"/>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/css/shareAlbum.css" />
<script type="text/javascript" src="<%= request.getContextPath() %>/js/createAlbum.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/js/shareAlbum.js"></script>
<script type="text/javascript" src="<%= request.getContextPath() %>/js/createTheme.js"></script>
<c:choose>
<c:when test="<%=!themeDisplay.isSignedIn() %>">
<div class="portlet-msg-info">
<a href="<%= themeDisplay.getURLSignIn() %>" target="_top"><liferay-ui:message key="please-sign-in-to-access-this-application" /></a>
</div>
</c:when>
<c:otherwise>
<div class="album-manage">
<h1 class="myphoto-title">我的相册集:上传、分享、欣赏生活中的照片</h4>
<div class="tile-handle clearfix">
<span class="album-handle">
<a href="<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/upload_photos" class="tile-upload">上传照片</a><a href="javascript:;" class="tile-compile">创建相册</a>
<span class="aui-field aui-field-menu aui-field-select">
<span class="aui-field-content">
<select id="<portlet:namespace />orderBy" οnchange="search();" class="aui-field-input aui-field-input-select" name="menuField">
<option value="" ${param.orderBy==""?"selected":""}>排序</option>
<option value="1" ${param.orderBy=="1"?"selected":""}>创建日期</option>
<option value="2" ${param.orderBy=="2"?"selected":""}>浏览次数</option>
</select>
</span>
</span>
</span>
<span class="album-myphoto ">
<form action="" id="albumForm">
<input id="searchBtn" class="aui-button-input aui-button-input-submit" type="submit" value="查询" />
<input id="<portlet:namespace />keywords" onBlur="if (this.value == '') { this.value = '请输入相册名称、描述'; }" onFocus="if (this.value == '请输入相册名称、描述') { this.value = ''; }" class="aui-field-input aui-field-input-text" type="text" value='${(param.keywords==""||param.keywords==null)?"请输入相册名称、描述":param.keywords}' name="keywords" />
</form>
</span>
</div>
<div class="album-wrapper clearfix">
<c:forEach items="${list}" var="album">
<div class="album-innerbox">
<div class="album-top">
<a href="<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/view_album/${album.albumId}" class="album-top-title">${fn:substring(album.name, 0, 14)}</a>
<span class="album-top-hit">${album.photosCount}</span>
</div>
<span class="album-middle" title="${album.name}">
<a href="<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/view_album/${album.albumId}">
<c:set var="cover" value="${album.coverImage}" />
<span class="bigimg"><c:if test="${album.cover>0}"><img src="<%= request.getContextPath() %>/photo/medium?p_id=${album.cover}" alt='${cover!=null?cover.title:""}' /></c:if></span>
<c:forEach items="${album.photos}" var="photo" varStatus="i">
<img src="<%= request.getContextPath() %>/photo/small?p_id=${photo.photoId }" alt="${photo.title}" />
</c:forEach>
<c:if test="${album.photosCount<5}">
<c:forEach begin="0" end="${5-album.photosCount-1}" var="i">
<%-- <img src="<%= request.getContextPath() %>/photo/small?p_id=0" alt="暂无图片" /> --%>
<span></span>
</c:forEach>
</c:if>
</a>
<div class="topic-info-manage aui-helper-hidden">
<a class="album-info-manage-edit" href="javascript:;" title="编辑" albumId="${album.albumId}">编辑</a>
<a class="album-info-manage-del" href="javascript:;" title="删除" albumId="${album.albumId}">删除</a>
</div>
</span>
<div class="album-bottom">
<a class="share" albumId="${album.albumId}" href="javascript:void(0)">分享到主题</a>
</div>
</div>
</c:forEach>
</div>
</div>
<div class="paginatorA aui-helper-unselectable aui-paginator-container">
<c:set var="url" value='<%= PortalUtil.getLayoutURL(themeDisplay) + "/-/albums" %>' />
<c:set var="cur" value="${param.cur==null?1:param.cur}" />
<c:set var="delta" value="${param.delta==null?10:param.delta}" />
<c:set var="begin" value="${(((cur-3)<=0)||(maxPage<=6))?1:(cur-3)}" />
<c:set var="begin" value="${(maxPage>6&&(begin+5)>=maxPage)?(maxPage-5):begin}" />
<c:set var="end" value="${(begin+5)<=maxPage?(begin+5):maxPage}" />
<a class="aui-paginator-link aui-paginator-first-link" href="${url}?cur=1">首页</a>
<a class="aui-paginator-link aui-paginator-prev-link" href="${url}?cur=${(cur-1)>0?(cur-1):1}">
< 上页
</a>
<span class="aui-paginator-page-container">
<c:forEach begin="${begin}" end="${end}" var="i">
<a href="${url}?cur=${i}" class="aui-paginator-link aui-paginator-page-link <c:if test="${cur==i}">aui-paginator-current-page</c:if>" page="${i}">
${i}
</a>
</c:forEach>
<c:if test="${maxPage>6 && (cur-maxPage)<0}">...</c:if>
</span>
<a class="aui-paginator-link aui-paginator-next-link" href="${url}?cur=${(cur+1)>maxPage?maxPage:(cur+1)}">
下页 >
</a>
<a class="aui-paginator-link aui-paginator-last-link" href="${url}?cur=${maxPage}">
末页
</a>
<span class="aui-paginator-current-page-report">
(1 / ${maxPage})
</span>
<span class="aui-paginator-total">
(总共 ${count})
</span>
<!--
<select class="aui-paginator-rows-per-page" name="delta">
<option value="1" id="aui_3_3_0_1103" selected="selected">
1
</option>
<option value="3" id="aui_3_3_0_1104">
3
</option>
<option value="5" id="aui_3_3_0_1105">
5
</option>
<option value="7" id="aui_3_3_0_1106">
7
</option>
</select>
-->
</div>
<portlet:resourceURL var="addAlbumURL"><portlet:param name="cmd" value="add" /></portlet:resourceURL>
<portlet:resourceURL var="editAlbumURL"><portlet:param name="cmd" value="edit" /></portlet:resourceURL>
<portlet:resourceURL var="shareAlbumURL"><portlet:param name="cmd" value="shareAlbum" /></portlet:resourceURL>
<portlet:resourceURL var="getUserTreeURL"><portlet:param name="cmd" value="getUserTree" /></portlet:resourceURL>
<portlet:resourceURL var="addTopicURL"><portlet:param name="cmd" value="addTopic" /></portlet:resourceURL>
<portlet:resourceURL var="deleteAlbumURL"><portlet:param name="cmd" value="deleteAlbum" /></portlet:resourceURL>
<script type="text/javascript">
var baseUrl = "<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums?";
AUI().ready('node',function(A){
/**
*
* 新建相册:传参的顺序依次是回调方法、提交请求地址(url)、额外参数、新建相册模板路径(uri)、相册类型(新建或修改)、表单值(vlaues)、新建相册名称检测(albumNameCheckIO)
* 共享相册额外参数(shareParam)、共享相册模板路径(shareTempUrl)、新建主题确定请求路径(themeUrl)、新建主题额外参数、限定人员请求、主题名称检测地址(checkIO)
*
*/
A.one(".tile-compile").on('click',function(event){
var target = event.target;
var albumId = target.getAttribute('albumId');
window.createAlbum(function(event,values){
var data = A.JSON.parse(this.get('responseData'));
if (!data.exception) {
window.location.reload();
}else{
var checkNode = A.one('.checkStatu');
checkNode.setContent('名称已存在');
checkNode.removeClass('abled');
checkNode.addClass('disabled');
checkNode.show();
}
},
{
url:'<%= addAlbumURL.toString() %>'
},
{
action : "add"
},
{
uri:'<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/add_album'
},
{
type : "add"
},
{
values : ""
},
{
albumNameCheckIO : "<%= request.getContextPath() %>/html/topics_display/data/result.json"
},
{
albumId : albumId
},
{
shareTempUrl : '<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/share_album/0?cmd=shareAlbum'
},
{
themeUrl : '<%= addTopicURL.toString() %>'
},
{
},
{
treeIO : "<%= getUserTreeURL.toString() %>"
},
{
checkIO : ""
});
});
/**
*
* 相册分享到主题:额外参数(用户id、相册id等)、模板地址(shareTempUrl)、主题提交地址(themeUrl)、
* 主题参数、限定人员请求地址、主题名称检测地址(checkIO)
*
*/
A.all(".album-wrapper .share").on('click',function(e){
var target = e.target;
var albumId = target.getAttribute('albumId');
window.shareAlbum(function(event,values){
var ioRequest = A.io.request('<%= shareAlbumURL.toString() %>',{
autoLoad : false,
cache : true,
method : 'POST',
after : {
success : function(event){
}
},
data : values
}).start();
},
{
albumId : albumId //相册id
},
{
shareTempUrl:'<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/share_album/'+albumId+'?cmd=shareAlbum'
},
{
themeUrl : '<%= addTopicURL.toString() %>'
},
{
},
{
treeIO : "<%= getUserTreeURL.toString() %>"
},
{
checkIO : "<%= request.getContextPath() %>/html/topics_display/data/result.json"
}
);
});
A.all(".album-middle").on({
mouseenter:function(e){
var target=e.currentTarget;
target.one(".topic-info-manage").show();
},
mouseleave:function(e){
var target=e.currentTarget;
target.one(".topic-info-manage").hide();
}
});
/**
*
* 修改相册:传参的顺序依次是回调方法、提交请求地址(url)、额外参数、新建相册模板路径(uri)、、相册类型(新建或修改)、表单值(vlaues)、
* 修改相册名称检测(albumNameCheckIO)、共享相册确定请求地址(shareUrl)、
* 共享相册额外参数(shareParam)、共享相册模板路径(shareTempUrl)、新建主题确定请求路径(themeUrl)、新建主题额外参数、限定人员请求
*
*/
A.all(".album-info-manage-edit").on('click',function(e){
// var formValues = A.JSON.parse(e.target.getAttribute('data'));
var target = e.target;
var albumId = target.getAttribute('albumId');
window.createAlbum(function(event,values){
var data = A.JSON.parse(this.get('responseData'));
if (!data.exception) {
alert('修改成功!');
window.location.reload();
}else{
var checkNode = A.one('.checkStatu');
checkNode.setContent('名称已存在');
checkNode.removeClass('abled');
checkNode.addClass('disabled');
checkNode.show();
}
},
{
url:'<%= editAlbumURL.toString() %>'
},
{
action : "edit"
},
{
uri:'<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/edit_album/'+albumId
},
{
type : "modify"
},
{
values : ""
},
{
albumNameCheckIO : "<%= request.getContextPath() %>/html/topics_display/data/result.json"
},
{
},
{
shareTempUrl : '<%= PortalUtil.getLayoutURL(themeDisplay) %>/-/albums/share_album/'+albumId+'?cmd=shareAlbum'
},
{
themeUrl : '<%= addTopicURL.toString() %>'
},
{
},
{
treeIO : "<%= getUserTreeURL.toString() %>"
},
{
checkIO : ""
}
);
});
/**
*
* 删除相册
*
*/
A.all(".album-info-manage-del").on('click',function(e){
var albumId=e.target.getAttribute('albumId');
if(!confirm("确定删除该相册?")){
return;
}
var delIORequest = A.io.request('<%= deleteAlbumURL.toString() %>',{
autoLoad : false,
dataType : 'json',
cache : true,
data : {
albumId: albumId,
action : "del"
},
after : {
success : function(event){
var data = this.get('responseData');
alert(data.message);
window.location.reload();
}
}
}).start();
});
var getURL=function(){
var orderBy=A.one("#<portlet:namespace />orderBy").get("value");
var keywords=A.one("#<portlet:namespace />keywords").get("value");
keywords = keywords.replace(/^\s+|\s+$/, '');
if (keywords == "请输入相册名称、描述") {
keywords = "";
}
url = "orderBy="+orderBy+ '&keywords=' + keywords;
return url;
}
A.all(".aui-paginator-link").on("click",function(event){
event.preventDefault();
var target=event.currentTarget;
var href=target.getAttribute("href");
var url=href+"&"+getURL();
location.href = url;
//console.log(url);
});
A.one("#albumForm").on("submit",function(event){
event.preventDefault();
var url = baseUrl +getURL();
location.href = url;
});
});
function search() {
var keywords = document.getElementById("<portlet:namespace />keywords").value;
keywords = keywords.replace(/^\s+|\s+$/, '');
if (keywords == "请输入相册名称、描述") {
keywords = "";
}
//if (keywords != "") {
var url = baseUrl + 'keywords=' + keywords;
var orderBy = document.getElementById("<portlet:namespace />orderBy").value;
url += "&orderBy="+orderBy;
location.href = url;
//} else {
// alert("请输入查询内容!");
//}
}
</script>
</c:otherwise>
</c:choose>
参考地址:http://www.liferay.com/zh_CN/documentation/liferay-portal/6.1/development/-/ai/adding-friendly-url-mapping-to-the-portlet