You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@rave.apache.org by mf...@apache.org on 2012/04/23 15:51:04 UTC

svn commit: r1329241 [3/6] - in /rave/trunk: ./ rave-components/rave-web/src/main/java/org/apache/rave/portal/web/util/ rave-portal-resources/src/main/resources/ rave-portal-resources/src/main/webapp/WEB-INF/jsp/layouts/ rave-portal-resources/src/main/...

Modified: rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/page.jsp
URL: http://svn.apache.org/viewvc/rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/page.jsp?rev=1329241&r1=1329240&r2=1329241&view=diff
==============================================================================
--- rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/page.jsp (original)
+++ rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/page.jsp Mon Apr 23 13:51:02 2012
@@ -1,3 +1,4 @@
+<%@ taglib prefix="portal" uri="http://www.apache.org/rave/tags" %>
 <%--
   Licensed to the Apache Software Foundation (ASF) under one
   or more contributor license agreements.  See the NOTICE file
@@ -22,149 +23,215 @@
 <jsp:useBean id="pages" type="java.util.List<org.apache.rave.portal.model.Page>" scope="request"/>
 <jsp:useBean id="pageLayouts" type="java.util.List<org.apache.rave.portal.model.PageLayout>" scope="request"/>
 <%--@elvariable id="page" type="org.apache.rave.portal.model.Page"--%>
-<header>
-    <nav class="topnav">
-        <ul class="horizontal-list">
-        	<li>
-                <c:set var="profileUrl">/app/person/<sec:authentication property="principal.username" />?referringPageId=${page.entityId}</c:set>
-                <a href="<spring:url value="${profileUrl}" />">
-                  <fmt:message key="page.profile.title">
-                  	<fmt:param><c:out value="${page.owner.displayName}"/></fmt:param>
-                  </fmt:message>
-                </a>
-            </li>
-            <li>
-                <a href="<spring:url value="/app/store?referringPageId=${page.entityId}" />">
-                  <fmt:message key="page.store.title"/>
-                </a>
-            </li>
-            <sec:authorize url="/app/admin/">
-                <li>
-                    <a href="<spring:url value="/app/admin/"/>">
-                        <fmt:message key="page.general.toadmininterface"/>
-                    </a>
-                </li>
-            </sec:authorize>
-            <li>
-                <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">
-                  <fmt:message key="page.general.logout"/></a>
-            </li>
-        </ul>
-    </nav>
-  <h1>
-      <fmt:message key="page.home.welcome"><fmt:param>
-          <c:choose>
-              <c:when test="${not empty page.owner.displayName}"><c:out value="${page.owner.displayName}"/></c:when>
-              <c:otherwise><c:out value="${page.owner.username}"/></c:otherwise>
-          </c:choose>
-      </fmt:param></fmt:message>
-  </h1>
-</header>
-<input id="currentPageId" type="hidden" value="${page.entityId}" />
+<div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </a>
+            <span class="brand">
+                <fmt:message key="page.home.welcome">
+                    <fmt:param>
+                        <c:choose>
+                            <c:when test="${not empty page.owner.displayName}"><c:out value="${page.owner.displayName}"/></c:when>
+                            <c:otherwise><c:out value="${page.owner.username}"/></c:otherwise>
+                        </c:choose>
+                    </fmt:param>
+                </fmt:message>
+            </span>
+            <div class="nav-collapse">
+                <ul class="nav pull-right">
+                    <li>
+                        <c:set var="profileUrl">/app/person/<sec:authentication property="principal.username"/>?referringPageId=${page.entityId}
+                        </c:set>
+                        <a href="<spring:url value="${profileUrl}" />">
+                        <fmt:message key="page.profile.title">
+                            <fmt:param><c:out value="${page.owner.displayName}"/></fmt:param>
+                        </fmt:message>
+                        </a>
+                    </li>
+                    <li>
+                        <a href="<spring:url value="/app/store?referringPageId=${page.entityId}" />">
+                        <fmt:message key="page.store.title"/>
+                        </a>
+                    </li>
+                    <sec:authorize url="/app/admin/">
+                        <li>
+                            <a href="<spring:url value="/app/admin/"/>">
+                            <fmt:message key="page.general.toadmininterface"/>
+                            </a>
+                        </li>
+                    </sec:authorize>
+                    <li>
+                        <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">
+                        <fmt:message key="page.general.logout"/></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+
+<input id="currentPageId" type="hidden" value="${page.entityId}"/>
 <c:set var="hasOnlyOnePage" scope="request">
     <c:choose>
         <c:when test="${fn:length(pages) == 1}">true</c:when>
         <c:otherwise>false</c:otherwise>
     </c:choose>
 </c:set>
-<div id="tabsHeader">
-    <%-- render the page tabs --%>
-    <div id="tabs" class="rave-ui-tabs">
-        <c:forEach var="userPage" items="${pages}">
-             <%-- determine if the current page in the list matches the page the user is viewing --%>
-             <c:set var="isCurrentPage">
-                 <c:choose>
-                     <c:when test="${page.entityId == userPage.entityId}">true</c:when>
-                     <c:otherwise>false</c:otherwise>
-                 </c:choose>
-             </c:set>
-             <div id="tab-${userPage.entityId}" class="rave-ui-tab<c:if test="${isCurrentPage}"> rave-ui-tab-selected</c:if>">
-                <div id="pageTitle-${userPage.entityId}" class="page-title" onclick="rave.viewPage(${userPage.entityId});"><c:out value="${userPage.name}"/></div>
-                <c:if test="${isCurrentPage}">
-                    <div id="pageMenuWrapper">
-                        <span id="pageMenuButton" class="ui-icon ui-icon-circle-triangle-s" title="<fmt:message key="page.menu.title"/>"></span>
-                        <div id="pageMenu" class="page-menu">
-                            <div id="pageMenuEdit" class="page-menu-item"><fmt:message key="page.general.editpage"/></div>
-                            <div id="pageMenuDelete" class="page-menu-item<c:if test='${hasOnlyOnePage}'> page-menu-item-disabled</c:if>">
-                              <fmt:message key="page.general.deletepage"/></div>
-                            <div id="pageMenuMove" class="page-menu-item<c:if test='${hasOnlyOnePage}'> page-menu-item-disabled</c:if>">
-                              <fmt:message key="page.general.movepage"/></div>
-                        </div>
-                    </div>
-                </c:if>
+
+
+<div class="container-fluid">
+    <nav>
+        <ul class="nav nav-tabs">
+            <c:forEach var="userPage" items="${pages}">
+                <%-- determine if the current page in the list matches the page the user is viewing --%>
+                <c:set var="isCurrentPage">
+                    <c:choose>
+                        <c:when test="${page.entityId == userPage.entityId}">true</c:when>
+                        <c:otherwise>false</c:otherwise>
+                    </c:choose>
+                </c:set>
+                <c:choose>
+                    <c:when test="${isCurrentPage}">
+                        <li id="tab-${userPage.entityId}" class="active dropdown">
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><c:out value="${userPage.name}"/><b class="caret"></b></a>
+                            <ul class="dropdown-menu">
+                                <li id="pageMenuEdit"><a href="#"><fmt:message key="page.general.editpage"/></a></li>
+                                <li id="pageMenuDelete" class="<c:if test='${hasOnlyOnePage}'>menu-item-disabled</c:if>"><a href="#"><fmt:message key="page.general.deletepage"/></a></li>
+                                <li id="pageMenuMove" class="<c:if test='${hasOnlyOnePage}'>menu-item-disabled</c:if>"><a href="#"><fmt:message key="page.general.movepage"/></a></li>
+                            </ul>
+                        </li>
+                    </c:when>
+                    <c:otherwise>
+                        <li id="tab-${userPage.entityId}" onclick="rave.viewPage(${userPage.entityId});"><a href="#"><c:out value="${userPage.name}"/></a></li>
+                    </c:otherwise>
+                </c:choose>
+            </c:forEach>
+            <li id="addPageButton"><a href="#"><i class="icon-plus"></i></a></li>
+        </ul>
+    </nav>
+
+
+    <div class="row-fluid">
+        <div id="emptyPageMessageWrapper" class="emptyPageMessageWrapper hidden">
+            <div class="emptyPageMessage">
+                <a href="<spring:url value="/app/store?referringPageId=${page.entityId}" />"><fmt:message key="page.general.empty"/></a>
             </div>
-        </c:forEach>
-        <%-- display the add page button at the end of the tabs --%>
-        <fmt:message key="page.general.addnewpage" var="addNewPageTitle"/>
-        <button id="add_page" title="${addNewPageTitle}" style="display: none;"></button>
+        </div>
+        <div class="regions">
+            <%-- insert the region layout template --%>
+            <tiles:insertTemplate template="${layout}"/>
+        </div>
+        <div class="clear-float">&nbsp;</div>
     </div>
-</div>
-<%--render the main page content (regions/widgets) --%>
-<div id="pageContent">
-    <div id="emptyPageMessageWrapper" class="emptyPageMessageWrapper hidden">
-        <div class="emptyPageMessage">
-            <a href="<spring:url value="/app/store?referringPageId=${page.entityId}" />"><fmt:message key="page.general.empty" /></a>
+
+
+    <div id="pageMenuDialog" class="modal hide" data-backdrop="static">
+        <div class="modal-header">
+            <a href="#" class="close" data-dismiss="modal">&times;</a>
+            <h3 id="pageMenuDialogHeader"></h3>
+        </div>
+        <div class="modal-body">
+            <form id="pageForm" class="form-horizontal">
+                <input type="hidden" name="tab_id" id="tab_id" value=""/>
+                <fieldset>
+                    <div class="control-group error">
+                        <label id="pageFormErrors" class="control-label"></label>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="tab_title"><fmt:message key="page.general.addpage.title"/></label>
+                        <div class="controls">
+                            <input id="tab_title" name="tab_title" class="input-xlarge focused required" type="text" value="" />
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="pageLayout"><fmt:message key="page.general.addpage.selectlayout"/></label>
+                        <div class="controls">
+                            <select name="pageLayout" id="pageLayout">
+                                <c:forEach var="pageLayout" items="${pageLayouts}">
+                                    <option value="${pageLayout.code}" id="${pageLayout.code}_id">
+                                        <fmt:message key="page.general.addpage.layout.${pageLayout.code}"/></option>
+                                </c:forEach>
+                            </select>
+                        </div>
+                    </div>
+                </fieldset>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <a id="pageMenuCloseButton" href="#" class="btn"><fmt:message key="_rave_client.common.cancel"/></a>
+            <a id="pageMenuUpdateButton" href="#" class="btn btn-primary"></a>
         </div>
     </div>
-    <div class="regions">
-        <%-- insert the region layout template --%>
-        <tiles:insertTemplate template="${layout}"/>
+
+    <div id="movePageDialog" class="modal hide" data-backdrop="static">
+        <div class="modal-header">
+            <a href="#" class="close" data-dismiss="modal">&times;</a>
+            <h3><fmt:message key="page.general.movethispage"/></h3>
+        </div>
+        <div class="modal-body">
+            <form id="movePageForm" class="form-horizontal">
+                <fieldset>
+                    <div class="control-group">
+                        <div class="controls">
+                            <select id="moveAfterPageId">
+                                <c:if test="${page.renderSequence != 1}">
+                                    <option value="-1"><fmt:message key="page.general.movethispage.tofirst"/></option>
+                                </c:if>
+                                <c:forEach var="userPage" items="${pages}">
+                                    <c:if test="${userPage.entityId != page.entityId}">
+                                        <option value="${userPage.entityId}">
+                                            <fmt:message key="page.general.movethispage.after">
+                                                <fmt:param><c:out value="${userPage.name}"/></fmt:param>
+                                            </fmt:message>
+                                        </option>
+                                    </c:if>
+                                </c:forEach>
+                            </select>
+                        </div>
+                    </div>
+                </fieldset>
+            </form>
+        </div>
+        <div class="modal-footer">
+            <a href="#" class="btn" onclick="$('#movePageDialog').modal('hide');"><fmt:message key="_rave_client.common.cancel"/></a>
+            <a href="#" class="btn btn-primary" onclick="rave.layout.movePage();"><fmt:message key="page.general.movepage"/></a>
+        </div>
     </div>
-    <div class="clear-float">&nbsp;</div>
-</div>
-<fmt:message key="page.general.addnewpage" var="addNewPageTitle"/>
-<div id="dialog" title="${addNewPageTitle}" class="dialog hidden">
-    <form id="pageForm">
-        <div id="pageFormErrors" class="error"></div>
-        <fieldset class="ui-helper-reset">
-            <input type="hidden" name="tab_id" id="tab_id" value="" />
-            <label for="tab_title"><fmt:message key="page.general.addpage.title"/></label>
-            <input type="text" name="tab_title" id="tab_title" value="" class="required ui-widget-content ui-corner-all" />
-            <label for="pageLayout"><fmt:message key="page.general.addpage.selectlayout"/></label>
-            <select name="pageLayout" id="pageLayout">
-                <c:forEach var="pageLayout" items="${pageLayouts}">
-                    <option value="${pageLayout.code}" id="${pageLayout.code}_id"><fmt:message key="page.general.addpage.layout.${pageLayout.code}"/></option>
-                </c:forEach>
-            </select>
-        </fieldset>
-    </form>
-</div>
-<fmt:message key="page.general.movepage" var="movePageTitle"/>
-<div id="movePageDialog" title="${movePageTitle}" class="dialog hidden">
-    <div><fmt:message key="page.general.movethispage"/></div>
-    <form id="movePageForm">
-        <select id="moveAfterPageId">
-            <c:if test="${page.renderSequence != 1}">
-                <option value="-1"><fmt:message key="page.general.movethispage.tofirst"/></option>
-            </c:if>
-            <c:forEach var="userPage" items="${pages}">
-                <c:if test="${userPage.entityId != page.entityId}">
-                    <option value="${userPage.entityId}">
-                      <fmt:message key="page.general.movethispage.after">
-                          <fmt:param><c:out value="${userPage.name}"/></fmt:param>
-                      </fmt:message>
-                    </option>
-                </c:if>
-            </c:forEach>
-        </select>
-    </form>
-</div>
-<fmt:message key="widget.menu.movetopage" var="moveWidgetToPageTitle"/>
-<div id="moveWidgetDialog" title="${moveWidgetToPageTitle}" class="dialog hidden">
-    <div><fmt:message key="widget.menu.movethiswidget"/></div>
-    <form id="moveWidgetForm">
-        <select id="moveToPageId">
-            <c:forEach var="userPage" items="${pages}">
-                <c:if test="${userPage.entityId != page.entityId}">
-                    <option value="${userPage.entityId}">
-                        <c:out value="${userPage.name}"/>
-                    </option>
-                </c:if>
-            </c:forEach>
-        </select>
-    </form>
-</div>
 
+    <fmt:message key="widget.menu.movetopage" var="moveWidgetToPageTitle"/>
+    <div id="moveWidgetModal" class="modal hide" data-backdrop="static">
+        <div class="modal-header">
+			<a href="#" class="close" data-dismiss="modal">&times;</a>
+			<h3><fmt:message key="widget.menu.movethiswidget"/></h3>
+		</div>
+		<div class="modal-body">
+			<form id="moveWidgetForm" class="form-horizontal">
+			    <fieldset>
+			        <div class="control-group">
+			            <div class="controls">
+                            <select id="moveToPageId">
+                                <c:forEach var="userPage" items="${pages}">
+                                    <c:if test="${userPage.entityId != page.entityId}">
+                                        <option value="${userPage.entityId}">
+                                            <c:out value="${userPage.name}"/>
+                                        </option>
+                                    </c:if>
+                                </c:forEach>
+                            </select>
+                        </div>
+                    </div>
+				</fieldset>
+			</form>
+		</div>
+		<div class="modal-footer">
+            <a href="#" class="btn" onclick="$('#moveWidgetModal').modal('hide');"><fmt:message key="_rave_client.common.cancel"/></a>
+            <a href="#" class="btn btn-primary" onclick="rave.layout.moveWidgetToPage($('#moveWidgetModal').data('regionWidgetId'));"><fmt:message key="_rave_client.common.move"/></a>
+		</div>
+    </div>
 <portal:register-init-script location="${'BEFORE_RAVE'}">
     <script>
         //Define the global widgets map.  This map will be populated by RegionWidgetRender providers.

Modified: rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/personProfile.jsp
URL: http://svn.apache.org/viewvc/rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/personProfile.jsp?rev=1329241&r1=1329240&r2=1329241&view=diff
==============================================================================
--- rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/personProfile.jsp (original)
+++ rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/personProfile.jsp Mon Apr 23 13:51:02 2012
@@ -41,115 +41,150 @@
 
 <!-- get the title of contact information -->
 <fmt:message key="page.personProfile.contact.info" var="contactInfo"/>
-
-<header>
-   	<nav class="topnav">
-       	<ul class="horizontal-list">
-       		<li>
-                <c:choose>
-                    <c:when test="${empty referringPageId}">
-                        <spring:url value="/index.html" var="gobackurl"/>
-                    </c:when>
-                    <c:otherwise>
-                        <spring:url value="/app/page/view/${referringPageId}" var="gobackurl"/>
-                    </c:otherwise>
-                </c:choose>
-                <a href="<c:out value="${gobackurl}"/>"><fmt:message key="page.general.back"/></a>
-            </li>
-            <sec:authorize url="/app/admin/">
-                <li>
-                    <a href="<spring:url value="/app/admin/"/>">
-                        <fmt:message key="page.general.toadmininterface"/>
-                    </a>
-                </li>
-            </sec:authorize>
-       		<li>
-                <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">
-                  <fmt:message key="page.general.logout"/></a>
-            </li>
-       	</ul>
-   	</nav>
-	<h1>${pageTitle}</h1>
-</header>
-<div id="person-profile-left">
-    <div id="personProfileContent">
-        <form:form id="editAccountForm" commandName="userProfile" action="person?referringPageId=${referringPageId}" method="POST">
-            <!-- Display personal information of user-->
-            <h2><fmt:message key="page.profile.personal.info" /></h2>
-            <fieldset>
-                <p>
-                    <label for="givenNameField"><fmt:message key="page.profile.first.name"/></label>
-                    <label id="givenName" class="profile-info-visible"><c:out value="${userProfile.givenName}"/></label>
-                    <form:input id="givenNameField" path="givenName" class="profile-info-hidden" value="${userProfile.givenName}" />
-                </p>
-                <br>
-                <p>
-                    <label for="familyNameField"><fmt:message key="page.profile.last.name"/></label>
-                    <label id="familyName" class="profile-info-visible"><c:out value="${userProfile.familyName}"/></label>
-                    <form:input id="familyNameField" path="familyName" class="profile-info-hidden" value="${userProfile.familyName}"/>
-                </p>
-                <p>
-                    <label for="displayNameField" class="profile-info-hidden"><fmt:message key="page.profile.display.name"/></label>
-                    <form:input id="displayNameField" path="displayName" class="profile-info-hidden" value="${userProfile.displayName}"/>
-                </p>
-            </fieldset>
-
-            <!-- Display basic information of user -->
-            <h2><fmt:message key="page.profile.basic.info" /></h2>
-            <fieldset>
-                <p>
-                    <label for="aboutMeField"><fmt:message key="page.profile.about.me"/></label>
-                    <label id="aboutMe" class="profile-info-visible"><c:out value=" ${userProfile.aboutMe}"/></label>
-                    <form:textarea id="aboutMeField" path="aboutMe" class="profile-info-hidden" value="${userProfile.aboutMe}" />
-                </p>
-                <br>
-                <p>
-                    <label for="statusField"><fmt:message key="page.profile.status"/></label>
-                    <label id="status" class="profile-info-visible"><c:out value=" ${userProfile.status}"/></label>
-                    <form:input id="statusField" path="status" class="profile-info-hidden" value="${userProfile.status}" />
-                </p>
-            </fieldset>
-
-            <!-- Display contact information of user -->
-            <h2><fmt:message key="page.profile.contact.info" /></h2>
-            <fieldset>
-                <p>
-                    <label for="emailField"><fmt:message key="page.profile.email"/></label>
-                    <label id="email" class="profile-info-visible"><c:out value=" ${userProfile.email}"/></label>
-                    <form:input id="emailField" path="email" class="profile-info-hidden" value="${userProfile.email}" />
-                </p>
-            </fieldset>
-            <%-- only display the edit profile button if the current logged in user matches the profile being viewed --%>
-            <c:set var="currentUsername"><sec:authentication property="principal.username" htmlEscape="false" /></c:set>
-            <c:if test="${currentUsername == userProfile.username}">
-                <fieldset>
-                    <p>
-                        <input type="hidden" id="profileInfo" value="profile-info" />
-                        <button type="button" id="profileEdit" class="profile-info-visible"><fmt:message key="page.profile.edit"/></button>
-                        <fmt:message key="page.profile.save" var="save"/>
-                        <input type="submit" class="profile-info-hidden" value="${save}"/>
-                        <button type="button" class="profile-info-hidden" id="cancelEdit"><fmt:message key="page.profile.cancel"/></button>
-                    </p>
-                </fieldset>
-            </c:if>
-        </form:form>
-    </div>
-
-    <%--render the sub pages --%>
-    <div id="pageContent" class="person-profile-page-content">
-        <div class="regions">
-            <%-- insert the region layout template --%>
-            <tiles:insertTemplate template="${layout}"/>
+<div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </a>
+            <span class="brand">
+                <fmt:message key="page.home.welcome">
+                    <fmt:param>
+                        <c:choose>
+                            <c:when test="${not empty page.owner.displayName}"><c:out value="${page.owner.displayName}"/></c:when>
+                            <c:otherwise><c:out value="${page.owner.username}"/></c:otherwise>
+                        </c:choose>
+                    </fmt:param>
+                </fmt:message>
+            </span>
+            <div class="nav-collapse">
+                <ul class="nav pull-right">
+                    <li>
+                        <c:choose>
+                            <c:when test="${empty referringPageId}">
+                                <spring:url value="/index.html" var="gobackurl"/>
+                            </c:when>
+                            <c:otherwise>
+                                <spring:url value="/app/page/view/${referringPageId}" var="gobackurl"/>
+                            </c:otherwise>
+                        </c:choose>
+                        <a href="<c:out value="${gobackurl}"/>"><fmt:message key="page.general.back"/></a>
+                    </li>
+                    <sec:authorize url="/app/admin/">
+                        <li>
+                            <a href="<spring:url value="/app/admin/"/>">
+                            <fmt:message key="page.general.toadmininterface"/>
+                            </a>
+                        </li>
+                    </sec:authorize>
+                    <li>
+                        <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">
+                        <fmt:message key="page.general.logout"/></a>
+                    </li>
+                </ul>
+            </div>
         </div>
-        <div class="clear-float">&nbsp;</div>
     </div>
 </div>
-<div id="person-profile-right">
-    <div>
-        <%-- render the person profile parent page region/widgets --%>
-        <c:forEach var="region" items="${page.regions}" varStatus="status">
-            <rave:region region="${region}" regionIdx="${status.count}" />
-        </c:forEach>
+
+<div class="container-fluid navbar-spacer">
+    <div class="row-fluid">
+        <div class="span9">
+            <div id="personProfileContent" class="row-fluid">
+                <form:form id="editAccountForm" commandName="userProfile" action="person?referringPageId=${referringPageId}" method="POST">
+                    <!-- Display personal information of user-->
+                    <h2><fmt:message key="page.profile.personal.info" /></h2>
+                    <fieldset>
+                        <div class="span12">
+                            <p>
+                                <label for="givenNameField"><fmt:message key="page.profile.first.name"/></label>
+                                <label id="givenName" class="profile-info-visible"><c:out value="${userProfile.givenName}"/></label>
+                                <form:input id="givenNameField" path="givenName" class="profile-info-hidden" value="${userProfile.givenName}" />
+                            </p>
+                        </div>
+                        <div class="span12">
+                            <p>
+                                <label for="familyNameField"><fmt:message key="page.profile.last.name"/></label>
+                                <label id="familyName" class="profile-info-visible"><c:out value="${userProfile.familyName}"/></label>
+                                <form:input id="familyNameField" path="familyName" class="profile-info-hidden" value="${userProfile.familyName}"/>
+                            </p>
+                        </div>
+                        <div class="span12">
+                            <p>
+                                <label for="displayNameField" class="profile-info-hidden"><fmt:message key="page.profile.display.name"/></label>
+                                <form:input id="displayNameField" path="displayName" class="profile-info-hidden" value="${userProfile.displayName}"/>
+                            </p>
+                        </div>
+                    </fieldset>
+
+                    <!-- Display basic information of user -->
+                    <h2><fmt:message key="page.profile.basic.info" /></h2>
+                    <fieldset>
+                        <div class="span12">
+                            <p>
+                                <label for="aboutMeField"><fmt:message key="page.profile.about.me"/></label>
+                                <label id="aboutMe" class="profile-info-visible"><c:out value=" ${userProfile.aboutMe}"/></label>
+                                <form:textarea id="aboutMeField" path="aboutMe" class="profile-info-hidden" value="${userProfile.aboutMe}" />
+                            </p>
+                        </div>
+                        <div class="span12">
+                            <p>
+                                <label for="statusField"><fmt:message key="page.profile.status"/></label>
+                                <label id="status" class="profile-info-visible"><c:out value=" ${userProfile.status}"/></label>
+                                <form:input id="statusField" path="status" class="profile-info-hidden" value="${userProfile.status}" />
+                            </p>
+                        </div>
+                    </fieldset>
+
+                    <!-- Display contact information of user -->
+                    <h2><fmt:message key="page.profile.contact.info" /></h2>
+                    <fieldset>
+                        <div class="span12">
+                            <p>
+                                <label for="emailField"><fmt:message key="page.profile.email"/></label>
+                                <label id="email" class="profile-info-visible"><c:out value=" ${userProfile.email}"/></label>
+                                <form:input id="emailField" path="email" class="profile-info-hidden" value="${userProfile.email}" />
+                            </p>
+                        </div>
+                    </fieldset>
+                    <%-- only display the edit profile button if the current logged in user matches the profile being viewed --%>
+                    <c:set var="currentUsername"><sec:authentication property="principal.username" htmlEscape="false" /></c:set>
+                    <c:if test="${currentUsername == userProfile.username}">
+                        <fieldset>
+                            <div class="span12">
+                                <p>
+                                    <input type="hidden" id="profileInfo" value="profile-info" />
+                                    <button type="button" id="profileEdit" class="btn btn-primary profile-info-visible"><fmt:message key="page.profile.edit"/></button>
+                                    <fmt:message key="page.profile.save" var="save"/>
+                                    <input type="submit" class="btn btn-primary profile-info-hidden" value="${save}"/>
+                                    <button type="button" class="btn profile-info-hidden" id="cancelEdit"><fmt:message key="page.profile.cancel"/></button>
+                                </p>
+                             </div>
+                        </fieldset>
+                    </c:if>
+                </form:form>
+            </div>
+
+            <%--render the sub pages --%>
+            <div>
+
+                    <%-- insert the region layout template --%>
+                    <tiles:insertTemplate template="${layout}"/>
+
+                <div class="clear-float">&nbsp;</div>
+            </div>
+        </div>
+        <div class="span3">
+            <div>
+                <%-- render the person profile parent page region/widgets --%>
+                <c:forEach var="region" items="${page.regions}" varStatus="status">
+                    <rave:region region="${region}" regionIdx="${status.count}" />
+                </c:forEach>
+            </div>
+        </div>
+    <div class="clear-float">&nbsp;</div>
     </div>
 </div>
 <div class="clear-float">&nbsp;</div>

Modified: rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/store.jsp
URL: http://svn.apache.org/viewvc/rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/store.jsp?rev=1329241&r1=1329240&r2=1329241&view=diff
==============================================================================
--- rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/store.jsp (original)
+++ rave/trunk/rave-portal-resources/src/main/webapp/WEB-INF/jsp/views/store.jsp Mon Apr 23 13:51:02 2012
@@ -19,329 +19,319 @@
 <%@ page language="java" trimDirectiveWhitespaces="true" %>
 <%@ include file="/WEB-INF/jsp/includes/taglibs.jsp" %>
 <fmt:setBundle basename="messages"/>
-
-<header>
-    <nav class="topnav">
-        <ul class="horizontal-list">
-            <li>
-                <a href="<spring:url value="/app/store/widget/add?referringPageId=${referringPageId}"/>"><fmt:message
-                        key="page.addwidget.title"/></a>
-            </li>
-            <li>
-                <c:choose>
-                    <c:when test="${empty referringPageId}">
-                        <spring:url value="/index.html" var="gobackurl"/>
-                    </c:when>
-                    <c:otherwise>
-                        <spring:url value="/app/page/view/${referringPageId}" var="gobackurl"/>
-                    </c:otherwise>
-                </c:choose>
-                <a href="<c:out value="${gobackurl}"/>"><fmt:message key="page.general.back"/></a>
-            </li>
-            <sec:authorize url="/app/admin/">
-                <li>
-                    <a href="<spring:url value="/app/admin/"/>">
-                        <fmt:message key="page.general.toadmininterface"/>
-                    </a>
-                </li>
-            </sec:authorize>
-            <li>
-                <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">
-                    <fmt:message key="page.general.logout"/></a>
-            </li>
-        </ul>
-    </nav>
-    <h1>${pagetitle}</h1>
-</header>
-
-<div id="content" class="pageContent">
-
-<section class="storeSearch">
-    <form action="<c:url value="/app/store/search"/>" method="GET">
-        <fieldset>
-            <input type="hidden" name="referringPageId" value="${referringPageId}">
-            <h2>
-                <label for="searchTerm"><fmt:message key="page.store.search"/></label>
-            </h2>
-            <p>
-                <input type="search" id="searchTerm" name="searchTerm" value="<c:out value="${searchTerm}"/>"/>
-                <fmt:message key="page.store.search.button" var="searchButtonText"/>
-                <input type="submit" value="${searchButtonText}"/>
-                <c:if test="${not empty searchTerm}">
-                    <a href="<spring:url value="/app/store?referringPageId=${referringPageId}"/>">
-                        <fmt:message key="admin.clearsearch"/></a>
-                </c:if>
-            </p>
-            <c:if test="${not empty tags}">
-                <div>
-                    <fmt:message key="page.store.list.widgets.tag"/>
-                    <select name="tagList" id="tagList" style="min-width:100px" >
-                        <option value="  "></option>
-                        <c:forEach var="tag" items="${tags}">
-                            <c:choose>
-                                <c:when test="${selectedTag==tag.keyword}">
-                                    <option selected>
-                                </c:when>
-                                <c:otherwise>
-                                    <option>
-                                </c:otherwise>
-                            </c:choose>
-                            <c:out value="${tag.keyword}"/>
-                            </option>
-                        </c:forEach>
-                    </select>
-                </div>
-            </c:if>
-
-            <c:if test="${not empty categories}">
-                <div>
-                    <fmt:message key="page.store.list.widgets.category"/>
-                    <select name="categoryList" id="categoryList" style="min-width:100px" >
-                        <option value="0"></option>
-                        <c:forEach var="category" items="${categories}">
-                            <c:choose>
-                                <c:when test="${selectedCategory==category.entityId}">
-                                    <option value="${category.entityId}" selected>
-                                </c:when>
-                                <c:otherwise>
-                                    <option value="${category.entityId}">
-                                </c:otherwise>
-                            </c:choose>
-                            <c:out value="${category.text}"/>
-                            </option>
-                        </c:forEach>
-                    </select>
-                </div>
-            </c:if>
-        </fieldset>
-    </form>
-
-    <div>
-        <a href="<spring:url value="/app/store/mine?referringPageId=${referringPageId}"/>"><fmt:message
-                key="page.store.list.widgets.mine"/></a>
-    </div>
-    <div>
-        <a href="<spring:url value="/app/store?referringPageId=${referringPageId}"/>"><fmt:message
-                key="page.store.list.widgets.all"/></a>
-    </div>
-</section>
-
-<section class="storeBox">
-    <c:choose>
-        <c:when test="${empty searchTerm and (empty widgets or widgets.totalResults eq 0)}">
-            <%-- Empty db --%>
-            <fmt:message key="page.store.list.noresult" var="listheader"/>
-        </c:when>
-        <c:when test="${empty searchTerm}">
-            <fmt:message key="page.store.list.result.x.to.y" var="listheader">
-                <fmt:param value="${widgets.offset + 1}"/>
-                <fmt:param value="${widgets.offset + fn:length(widgets.resultSet)}"/>
-                <fmt:param value="${widgets.totalResults}"/>
-            </fmt:message>
-        </c:when>
-        <c:when test="${not empty searchTerm and widgets.totalResults eq 0}">
-            <fmt:message key="page.store.list.search.noresult" var="listheader">
-                <fmt:param><c:out value="${searchTerm}"/></fmt:param>
-            </fmt:message>
-        </c:when>
-        <c:otherwise>
-            <fmt:message key="page.store.list.search.result.x.to.y" var="listheader">
-                <fmt:param value="${widgets.offset + 1}"/>
-                <fmt:param value="${widgets.offset + fn:length(widgets.resultSet)}"/>
-                <fmt:param value="${widgets.totalResults}"/>
-                <fmt:param><c:out value="${searchTerm}"/></fmt:param>
-            </fmt:message>
-        </c:otherwise>
-    </c:choose>
-    <h2>${listheader}</h2>
-    <%--@elvariable id="widgets" type="org.apache.rave.portal.model.util.SearchResult"--%>
-    <c:if test="${widgets.totalResults gt 0}">
-        <c:if test="${widgets.numberOfPages gt 1}">
-
-            <ul class="paging">
-                <c:forEach var="i" begin="1" end="${widgets.numberOfPages}">
-                    <c:url var="pageUrl" value="">
-                        <c:param name="referringPageId" value="${referringPageId}"/>
-                        <c:param name="searchTerm" value="${searchTerm}"/>
-                        <c:param name="offset" value="${(i - 1) * widgets.pageSize}"/>
-                    </c:url>
-
+<div class="navbar navbar-fixed-top">
+    <div class="navbar-inner">
+        <div class="container">
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </a>
+            <span class="brand">${pagetitle}</span>
+            <div class="nav-collapse">
+                <ul class="nav pull-right">
+                    <li>
+                        <a href="<spring:url value="/app/store/widget/add?referringPageId=${referringPageId}"/>"><fmt:message
+                            key="page.addwidget.title"/></a>
+                    </li>
                     <li>
                         <c:choose>
-                            <c:when test="${i eq widgets.currentPage}">
-                                <span class="currentPage">${i}</span>
+                            <c:when test="${empty referringPageId}">
+                                <spring:url value="/index.html" var="gobackurl"/>
                             </c:when>
                             <c:otherwise>
-                                <a href="<c:out value="${pageUrl}"/>">${i}</a>
+                                <spring:url value="/app/page/view/${referringPageId}" var="gobackurl"/>
                             </c:otherwise>
                         </c:choose>
+                        <a href="<c:out value="${gobackurl}"/>"><fmt:message key="page.general.back"/></a>
                     </li>
-                </c:forEach>
-            </ul>
 
-        </c:if>
+                    <sec:authorize url="/app/admin/">
+                        <li>
+                            <a href="<spring:url value="/app/admin/"/>">
+                            <fmt:message key="page.general.toadmininterface"/>
+                            </a>
+                        </li>
+                    </sec:authorize>
+                    <li>
+                        <a href="<spring:url value="/j_spring_security_logout" htmlEscape="true" />">
+                        <fmt:message key="page.general.logout"/></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
 
-        <ul class="storeItems">
-            </br>
-                <%--@elvariable id="widget" type="org.apache.rave.portal.model.Widget"--%>
-            <c:forEach var="widget"
-                       items="${widgets.resultSet}">
-                <%--@elvariable id="widgetsStatistics" type="org.apache.rave.portal.model.util.WidgetStatistics"--%>
-                <c:set var="widgetStatistics" value="${widgetsStatistics[widget.entityId]}"/>
-                <c:choose>
-                    <c:when test='${widget.featured == "true"}' >
-                        <li class="storeItem storeItemFeatured">
-                    </c:when>
-                    <c:otherwise>
-                        <li class="storeItem">
-                    </c:otherwise>
-                </c:choose>
-
-                <div class="storeItemLeft">
-                        <c:if test="${not empty widget.thumbnailUrl}">
-                            <img class="storeWidgetThumbnail" src="${widget.thumbnailUrl}"
-                                 title="<c:out value="${widget.title}"/>" alt=""
-                                 width="120" height="60"/>
-                        </c:if>
-
-                        <div id="widgetAdded_${widget.entityId}" class="storeButton">
-                            <button class="storeItemButton"
-                                    id="addWidget_${widget.entityId}"
-                                    onclick="rave.api.rpc.addWidgetToPage({widgetId: ${widget.entityId}, pageId: ${referringPageId}, buttonId: this.id});">
-                                <fmt:message key="page.widget.addToPage"/>
-                            </button>
-                        </div>
+<div class="container-fluid navbar-spacer">
+    <div class="row-fluid">
+        <section class="span8">
+            <c:choose>
+                <c:when test="${empty searchTerm and (empty widgets or widgets.totalResults eq 0)}">
+                    <%-- Empty db --%>
+                    <fmt:message key="page.store.list.noresult" var="listheader"/>
+                </c:when>
+                <c:when test="${empty searchTerm}">
+                    <fmt:message key="page.store.list.result.x.to.y" var="listheader">
+                        <fmt:param value="${widgets.offset + 1}"/>
+                        <fmt:param value="${widgets.offset + fn:length(widgets.resultSet)}"/>
+                        <fmt:param value="${widgets.totalResults}"/>
+                    </fmt:message>
+                </c:when>
+                <c:when test="${not empty searchTerm and widgets.totalResults eq 0}">
+                    <fmt:message key="page.store.list.search.noresult" var="listheader">
+                        <fmt:param><c:out value="${searchTerm}"/></fmt:param>
+                    </fmt:message>
+                </c:when>
+                <c:otherwise>
+                    <fmt:message key="page.store.list.search.result.x.to.y" var="listheader">
+                        <fmt:param value="${widgets.offset + 1}"/>
+                        <fmt:param value="${widgets.offset + fn:length(widgets.resultSet)}"/>
+                        <fmt:param value="${widgets.totalResults}"/>
+                        <fmt:param><c:out value="${searchTerm}"/></fmt:param>
+                    </fmt:message>
+                </c:otherwise>
+            </c:choose>
+            <h2>${listheader}</h2>
+            <%--@elvariable id="widgets" type="org.apache.rave.portal.model.util.SearchResult"--%>
+            <c:if test="${widgets.totalResults gt 0}">
+                <c:if test="${widgets.numberOfPages gt 1}">
+                    <div>
+                        <ul class="pagination">
+                            <c:forEach var="i" begin="1" end="${widgets.numberOfPages}">
+                                <c:url var="pageUrl" value="">
+                                    <c:param name="referringPageId" value="${referringPageId}"/>
+                                    <c:param name="searchTerm" value="${searchTerm}"/>
+                                    <c:param name="offset" value="${(i - 1) * widgets.pageSize}"/>
+                                </c:url>
+                                <c:choose>
+                                    <c:when test="${i eq widgets.currentPage}">
+                                        <li class="active"><a href="#">${i}</a></li>
+                                    </c:when>
+                                    <c:otherwise>
+                                        <li><a href="<c:out value="${pageUrl}"/>">${i}</a></li>
+                                    </c:otherwise>
+                                </c:choose>
 
+                            </c:forEach>
+                        </ul>
                     </div>
 
-                    <div class="storeItemCenter">
+                </c:if>
+                <ul class="storeItems">
+                        <%--@elvariable id="widget" type="org.apache.rave.portal.model.Widget"--%>
+                    <c:forEach var="widget" items="${widgets.resultSet}">
+                        <%--@elvariable id="widgetsStatistics" type="org.apache.rave.portal.model.util.WidgetStatistics"--%>
+                        <c:set var="widgetStatistics" value="${widgetsStatistics[widget.entityId]}"/>
+                        <c:choose>
+                            <c:when test='${widget.featured == "true"}'>
+                                <li class="storeItem storeItemFeatured">
+                            </c:when>
+                            <c:otherwise>
+                                <li class="storeItem">
+                            </c:otherwise>
+                        </c:choose>
 
-                        <a id="widget-${widget.entityId}-title"
-                           class="secondaryPageItemTitle"
-                           href="<spring:url value="/app/store/widget/${widget.entityId}" />?referringPageId=${referringPageId}">
-                            <c:out value="${widget.title}"/>
-                        </a>
-                        <c:if test="${widget.disableRendering}">
-                            <div class="storeWidgetDisabled">
-                                <span class="widget-disabled-icon-store ui-icon ui-icon-alert"
-                                      title="<fmt:message key="widget.chrome.disabled"/>"></span>
-                                <c:out value="${widget.disableRenderingMessage}" escapeXml="true"/>
+                        <div class="storeItemLeft">
+                            <c:if test="${not empty widget.thumbnailUrl}">
+                                <img class="storeWidgetThumbnail" src="${widget.thumbnailUrl}"
+                                     title="<c:out value="${widget.title}"/>" alt=""
+                                     width="120" height="60"/>
+                            </c:if>
+
+                            <div id="widgetAdded_${widget.entityId}" class="storeButton">
+                                <button class="btn btn-small btn-primary" id="addWidget_${widget.entityId}"
+                                        onclick="rave.api.rpc.addWidgetToPage({widgetId: ${widget.entityId}, pageId: ${referringPageId}, buttonId: this.id});">
+                                    <fmt:message key="page.widget.addToPage"/>
+                                </button>
                             </div>
-                        </c:if>
-                        <c:if test="${not empty widget.author}">
-                            <div class="storeWidgetAuthor"><fmt:message key="widget.author"/>: <c:out
-                                    value="${widget.author}"/></div>
-                        </c:if>
-                        <c:if test="${not empty widget.description}">
-                            <div class="storeWidgetDesc"><c:out
-                                    value="${fn:substring(widget.description, 0, 200)}..."/></div>
-                        </c:if>
-                        <div class="widgetRating">
-                            <fmt:message key="page.widget.rate"/>
 
-                            <div id="rating-${widget.entityId}" class="ratingButtons">
-                                <form>
+                        </div>
+
+                        <div class="storeItemCenter">
+                            <a id="widget-${widget.entityId}-title"
+                               class="secondaryPageItemTitle"
+                               href="<spring:url value="/app/store/widget/${widget.entityId}" />?referringPageId=${referringPageId}">
+                                <c:out value="${widget.title}"/>
+                            </a>
+                            <c:if test="${widget.disableRendering}">
+                                <div class="storeWidgetDisabled">
+                                            <span class="widget-disabled-icon-store ui-icon ui-icon-alert"
+                                                  title="<fmt:message key="widget.chrome.disabled"/>"></span>
+                                    <c:out value="${widget.disableRenderingMessage}" escapeXml="true"/>
+                                </div>
+                            </c:if>
+                            <c:if test="${not empty widget.author}">
+                                <div class="storeWidgetAuthor"><fmt:message key="widget.author"/>: <c:out
+                                        value="${widget.author}"/></div>
+                            </c:if>
+                            <c:if test="${not empty widget.description}">
+                                <div class="storeWidgetDesc"><c:out
+                                        value="${fn:substring(widget.description, 0, 200)}..."/></div>
+                            </c:if>
+                            <div class="widgetRating">
+                                <fmt:message key="page.widget.rate"/>
+                                <form class="hidden">
                                     <input type="hidden" id="rate-${widget.entityId}"
                                            value="${widgetsStatistics[widget.entityId]!=null?widgetsStatistics[widget.entityId].userRating:"-1"}">
                                 </form>
-                                <input type="radio" id="like-${widget.entityId}" class="widgetLikeButton"
-                                       name="rating-${widget.entityId}"${widgetsStatistics[widget.entityId].userRating==10?" checked='true'":""}>
-                                <label for="like-${widget.entityId}"></label>
-                                <input type="radio" id="dislike-${widget.entityId}" class="widgetDislikeButton"
-                                       name="rating-${widget.entityId}"${widgetsStatistics[widget.entityId].userRating==0?" checked='true'":""}>
-                                <label for="dislike-${widget.entityId}"> </label>
-
-                                <!-- Displaying the likes and dislikes rating along with total votes -->
-
+                                <div id="rating-${widget.entityId}" class="ratingButtons btn-group" data-toggle="buttons-radio">
+                                    <button id="like-${widget.entityId}" class="widgetLikeButton btn btn-small ${widgetsStatistics[widget.entityId].userRating==10? 'active btn-success':''}"
+                                            ${widgetsStatistics[widget.entityId].userRating==10 ? " checked='true'":""}
+                                            name="rating-${widget.entityId}"><i class="icon-plus"></i></button>
+                                    <button id="dislike-${widget.entityId}" class="widgetDislikeButton btn btn-small ${widgetsStatistics[widget.entityId].userRating==0? 'active btn-danger':''}"
+                                            ${widgetsStatistics[widget.entityId].userRating==0 ? " checked='true'":""}
+                                            name="rating-${widget.entityId}"><i class="icon-minus"></i></button>
+                                    <!-- Displaying the likes and dislikes rating along with total votes -->
+                                </div>
                             </div>
-                        </div>
-                        <c:if test="${not empty widget.tags}">
-                            <table class="widgetTags">
-                                <tr>
-                                    <td>
-                                        <fmt:message key="page.widget.tags.title"/>
-                                    </td>
-                                    <c:forEach var="tag" items="${widget.tags}">
-                                        <td class="storeWidgetDesc"><c:out value="${tag.tag.keyword}"/></td>
-                                    </c:forEach>
-                                </tr>
-                            </table>
-                        </c:if>
-                        <c:if test="${not empty widget.categories}">
-                            <table class="widgetCategories">
-                                <tr>
-                                    <td>
-                                        <fmt:message key="widget.categories"/>
-                                    </td>
-                                    <c:forEach var="category" items="${widget.categories}">
-                                        <td class="storeWidgetDesc"><c:out value="${category.text}"/></td>
-                                    </c:forEach>
-                                </tr>
-                            </table>
-                        </c:if>
-                        <ul class="horizontal-list">
-                            <!-- display total likes -->
-                            <li>
+                            <c:if test="${not empty widget.tags}">
+                                <table class="widgetTags">
+                                    <tr>
+                                        <td>
+                                            <fmt:message key="page.widget.tags.title"/>
+                                        </td>
+                                        <c:forEach var="tag" items="${widget.tags}">
+                                            <td class="storeWidgetDesc"><c:out value="${tag.tag.keyword}"/></td>
+                                        </c:forEach>
+                                    </tr>
+                                </table>
+                            </c:if>
+                            <c:if test="${not empty widget.categories}">
+                                <table class="widgetCategories">
+                                    <tr>
+                                        <td>
+                                            <fmt:message key="widget.categories"/>
+                                        </td>
+                                        <c:forEach var="category" items="${widget.categories}">
+                                            <td class="storeWidgetDesc"><c:out value="${category.text}"/></td>
+                                        </c:forEach>
+                                    </tr>
+                                </table>
+                            </c:if>
+                            <span class="widgetLikeCount">
                                 <c:set var="widgetLikes">
                                     ${widgetsStatistics[widget.entityId]!=null?widgetsStatistics[widget.entityId].totalLike:"0"}
                                 </c:set>
-                                <fmt:message key="page.widget.rate.likes"/><label id="totalLikes-${widget.entityId}"
-                                                                                  data-rave-widget-likes="${widgetLikes}">${widgetLikes}</label>
-                            </li>
-                            <!-- display total dislikes  -->
-                            <li>
+                                <span><fmt:message key="page.widget.rate.likes"/></span>
+                                <span id="totalLikes-${widget.entityId}" data-rave-widget-likes="${widgetLikes}">
+                                    ${widgetLikes}
+                                </span>
+                            </span>
+                            <span class="widgetDislikeCount">
                                 <c:set var="widgetDislikes">
                                     ${widgetsStatistics[widget.entityId]!=null?widgetsStatistics[widget.entityId].totalDislike:"0"}
                                 </c:set>
-                                <fmt:message key="page.widget.rate.dislikes"/><label
-                                    id="totalDislikes-${widget.entityId}"
-                                    data-rave-widget-dislikes="${widgetDislikes}">${widgetDislikes}</label>
-                            </li>
-                            <li class="widgetUserCount">
+                                <span><fmt:message key="page.widget.rate.dislikes"/></span>
+                                <span id="totalDislikes-${widget.entityId}" data-rave-widget-dislikes="${widgetDislikes}">
+                                    ${widgetDislikes}
+                                </span>
+                            </span>
+
+                            <span class="widgetUserCount">
                                 <c:set var="widgetUserCountGreaterThanZero"
                                        value="${widgetStatistics != null && widgetStatistics.totalUserCount > 0}"/>
-                                <c:if test="${widgetUserCountGreaterThanZero}"><a href="javascript:void(0);"
-                                                                                  onclick="rave.displayUsersOfWidget(${widget.entityId});"></c:if>
+                                <c:if test="${widgetUserCountGreaterThanZero}">
+                                    <a href="javascript:void(0);" onclick="rave.displayUsersOfWidget(${widget.entityId});">
+                                </c:if>
                                 <fmt:formatNumber groupingUsed="true"
-                                                  value="${widgetStatistics!=null?widgetStatistics.totalUserCount:0}"/>&nbsp;<fmt:message
-                                        key="page.widget.usercount"/>
+                                                  value="${widgetStatistics!=null?widgetStatistics.totalUserCount:0}"/>&nbsp;<fmt:message key="page.widget.usercount"/>
                                 <c:if test="${widgetUserCountGreaterThanZero}"></a></c:if>
-                            </li>
+                            </span>
+                        </div>
+
+                        <div class="clear-float"></div>
+                        </li>
+                    </c:forEach>
+                </ul>
+
+                <c:if test="${widgets.numberOfPages gt 1}">
+                    <div >
+                        <ul class="pagination">
+                            <c:forEach var="i" begin="1" end="${widgets.numberOfPages}">
+                                <c:url var="pageUrl" value="">
+                                    <c:param name="referringPageId" value="${referringPageId}"/>
+                                    <c:param name="searchTerm" value="${searchTerm}"/>
+                                    <c:param name="offset" value="${(i - 1) * widgets.pageSize}"/>
+                                </c:url>
+                                <c:choose>
+                                    <c:when test="${i eq widgets.currentPage}">
+                                        <li class="active"><a href="#">${i}</a></li>
+                                    </c:when>
+                                    <c:otherwise>
+                                        <li> <a href="<c:out value="${pageUrl}"/>">${i}</a></li>
+                                    </c:otherwise>
+                                </c:choose>
+                            </c:forEach>
                         </ul>
                     </div>
+                </c:if>
+            </c:if>
+        </section>
+        <section class="span4">
+            <form class="form-inline" action="<c:url value="/app/store/search"/>" method="GET">
+                <fieldset>
+                    <input type="hidden" name="referringPageId" value="${referringPageId}">
+                    <legend><fmt:message key="page.store.search"/></legend>
+                    <div class="control-group">
+                        <div class="input-append">
+                            <fmt:message key="page.store.search.button" var="searchButtonText"/>
+                            <input class="span3" type="search" id="searchTerm" name="searchTerm" value="<c:out value="${searchTerm}"/>"/>
+                            <button class="btn btn-primary" type="submit" value="${searchButtonText}">${searchButtonText}</button>
+                        </div>
+                    </div>
+                    <legend></legend>
+                    <c:if test="${not empty tags}">
+                        <div class="control-group">
+                            <label class="control-label" for="categoryList"><fmt:message key="page.store.list.widgets.tag"/></label>
+                            <div class="controls">
+                                <select name="tagList" id="tagList" class="span4">
+                                <option value=""></option>
+                                <c:forEach var="tag" items="${tags}">
+                                    <c:choose>
+                                        <c:when test="${selectedTag==tag.keyword}">
+                                            <option selected>
+                                        </c:when>
+                                        <c:otherwise>
+                                            <option>
+                                        </c:otherwise>
+                                    </c:choose>
+                                    <c:out value="${tag.keyword}"/>
+                                    </option>
+                                </c:forEach>
+                            </select>
+                            </div>
+                        </div>
+                    </c:if>
 
-                    <div class="clear-float"></div>
-                </li>
-            </c:forEach>
-        </ul>
-
-        <c:if test="${widgets.numberOfPages gt 1}">
-
-            <ul class="paging">
-                <c:forEach var="i" begin="1" end="${widgets.numberOfPages}">
-                    <c:url var="pageUrl" value="">
-                        <c:param name="referringPageId" value="${referringPageId}"/>
-                        <c:param name="searchTerm" value="${searchTerm}"/>
-                        <c:param name="offset" value="${(i - 1) * widgets.pageSize}"/>
-                    </c:url>
-
-                    <li>
-                        <c:choose>
-                            <c:when test="${i eq widgets.currentPage}">
-                                <span class="currentPage">${i}</span>
-                            </c:when>
-                            <c:otherwise>
-                                <a href="<c:out value="${pageUrl}"/>">${i}</a>
-                            </c:otherwise>
-                        </c:choose>
-                    </li>
-                </c:forEach>
-            </ul>
-
-        </c:if>
-    </c:if>
-</section>
-
+                    <c:if test="${not empty categories}">
+                        <div class="control-group">
+                            <label class="control-label" for="categoryList"><fmt:message key="page.store.list.widgets.category"/></label>
+                            <div class="controls">
+                                <select name="categoryList" id="categoryList" class="span4">
+                                    <option value="0"></option>
+                                    <c:forEach var="category" items="${categories}">
+                                        <c:choose>
+                                            <c:when test="${selectedCategory==category.entityId}">
+                                                <option value="${category.entityId}" selected>
+                                            </c:when>
+                                            <c:otherwise>
+                                                <option value="${category.entityId}">
+                                            </c:otherwise>
+                                        </c:choose>
+                                        <c:out value="${category.text}"/>
+                                        </option>
+                                    </c:forEach>
+                                </select>
+                            </div>
+                        </div>
+                    </c:if>
+                </fieldset>
+            </form>
+            <a class="btn btn-info" href="<spring:url value="/app/store/mine?referringPageId=${referringPageId}"/>"><fmt:message key="page.store.list.widgets.mine"/></a>
+            <a class="btn btn-info" href="<spring:url value="/app/store?referringPageId=${referringPageId}"/>"><fmt:message key="page.store.list.widgets.all"/></a>
+        </section>
+    </div>
 </div>
 
 <portal:register-init-script location="${'AFTER_RAVE'}">
@@ -350,4 +340,4 @@
             rave.store.init('<c:out value="${referringPageId}"/>');
         });
     </script>
-</portal:register-init-script>
\ No newline at end of file
+</portal:register-init-script>