最近實作了AUI的相簿功能，在這裡紀錄一下使用方法。
首先用javascript實作多重上傳欄位，程式碼如下；
<aui:script>
var countMin = 1;
var countMax = 10;
var commonName = "file";
var count = countMin;
function addField() {
if(count == countMax){
alert("一次最多上傳"+countMax+"個檔案");
}
else{
(++count)
document.getElementsByName('<portlet:namespace />hiddencount')[0].value=count; //這裡是把總共有幾個欄位存到隱藏的輸入框內傳至後端
document.getElementById("fieldSpace").innerHTML += "<div>" + '<input type="file" name="' + commonName + count + '"></div>'; //這裡是依照狀況增加上傳欄位
}
}
function delField() {
if (count > countMin) {
var fs = document.getElementById("fieldSpace");
fs.removeChild(fs.lastChild);
count--;
} else {
alert("已無可刪除的上傳欄位");
}
} //以上是刪除多餘的上傳欄位
</aui:script>
接著再使用
<div id="fieldSpace"></div><br>
<a href="javascript:" onclick="addField()">增加檔案</a>
<a href="javascript:" onclick="delField()">減少檔案</a><br><br>
<input type="reset" value="清除">
來呼叫產生上傳欄位的方法，完成後大概會像這樣；
如此一來，在後端我們便可以使用如下方法；
//以下將使用迴圈存入每一筆上傳的照片
for(int i=1;i<=count;i++){
submissionFileName = uploadRequest.getFileName("file"+i);
size = uploadRequest.getSize("file"+i);
is = uploadRequest.getFileAsStream("file"+i);
sourceFileName = submissionFileName;
mimeType = MimeTypesUtil.getContentType(submissionFileName);
title = activityTitle + String.valueOf(addOnTitle) + i;
//文件標題，可修改的，這個標題不能一樣不然會出錯，加上日期及編號以避免重複
FileEntry fileEntry = DLAppLocalServiceUtil.addFileEntry
(userId, repositoryId, photoFolderId,
sourceFileName, mimeType, title,
description, changeLog, is, size, serviceContext);
i是給予每一個不同上傳欄位的編號，如此一來便可以實作出多重上傳照片的功能。
接下來使用AUI的相簿檢視器來實作相簿，script碼如下；
<aui:script>
AUI().use(
'aui-image-viewer-base',
function(A) {
new A.ImageViewer(
{
caption: 'TSMC Photo',
captionFromTitle: true,
links: '#gallery a',
preloadAllImages: true
}
).render();
}
);
</aui:script>
使用了以上的代碼後在於JSP中呼叫；
<div id="gallery">
<div class="view-wrapper">
<!-- Image being displayed with Image Viewer -->
<%
for (int i = 0; i < results.size(); i++) {
ActivityCollection photo = (ActivityCollection) results.get(i);
%>
<div class="view-show-wrapper">
<div class="link-wrapper">
<a href="<%=firstUrl + photo.getFilePath()%>"
title="<%=photo.getTitle()%>"> <!-- Thumbnail of image to be displayed -->
<img src="<%=firstUrl + photo.getFilePath()%>" class="link-icon"/>
</a><br/>
<font face="微軟正黑體" size="2" >選擇</font>
<aui:input type="checkbox" name="collectionId" value="<%=photo.getCollectionId() %>" label="" />
</div>
</div>
<%
}
%>
</div>
</div>
<liferay-ui:search-paginator searchContainer="<%=searchContainer%>" />
</div>
由於上面結合了調整checkbox位置的div，所以看起來有點亂，主要功能為以下；
<a href="<%=firstUrl + photo.getFilePath()%>"
title="<%=photo.getTitle()%>"> <!-- Thumbnail of image to be displayed -->
<img src="<%=firstUrl + photo.getFilePath()%>" class="link-icon"/>
</a><br/>
一個顯示大圖，一個顯示縮圖的連結。縮圖只需要去調整長寬就可以了。
在這裡調整layout的css還不是很了解，但大致上如下；
#gallery .view-wrapper{
height: 200px;
}
#gallery .view-wrapper .link-wrapper{
float: left;
text-align: center;
}
#gallery .view-wrapper .link-wrapper .link-icon {
padding: 10px 10px 1px 10px;
width: 150px;
height: 100px;
}
以上的css抓取div並調整，放在main.css之中，完成後大致像這樣；
只要點選小圖便會顯示大圖，至於分頁功能，則是直接使用searchcontainer的API來實作，以下僅貼上代碼；
PortletURL portletURL = renderResponse.createRenderURL();
portletURL
.setParameter("mvcPath",
"/html/tsmc_volunteer_backend/activityCollection/activity_album_viewPhoto.jsp");
portletURL.setParameter("photoFolderId", String.valueOf(photoFolderId));
portletURL.setParameter("folderName", folderName);
SearchContainer searchContainer = new SearchContainer(
renderRequest, null, null,
SearchContainer.DEFAULT_CUR_PARAM, 10, portletURL, null,
null);
List<ActivityCollection> actPhoto = ActivityCollectionLocalServiceUtil
.getPhotosByFolderId(photoFolderId);
String firstUrl = themeDisplay.getPortalURL();//抓本機IP
//連結網址
List results = ListUtil.subList(actPhoto,
searchContainer.getStart(), searchContainer.getEnd());
searchContainer.setTotal(actPhoto.size());
searchContainer.setResults(results);
<div class="search-container">
//要分頁的內容
<liferay-ui:search-paginator searchContainer="<%=searchContainer%>" />
</div>
至此，相簿檢視便完成了。
再記載一下checkbox的使用；
<aui:input type="checkbox" name="collectionId" value="<%=photo.getCollectionId() %>" label="" />
當有value時便會傳value中的值到後端，後端用以下抓法；
long[] collectionId = ParamUtil.getLongValues(request, "collectionIdCheckbox");
主要是在name後面加上Checkbox，這樣就會判斷是否有勾選並抓值。
至此差不多就完成刪除的功能了!
