Terry.Li-彬

前面分析了在頁面上增加一個portlet的服務器端的具體實現，現在分析其在瀏覽器端的實現，JavaScript要出場了。
前面提到在Add Content中點擊某個portlet的"Add"按鈕，其實就是調用了addPortlet(...)方法。

top_js.jspf
------------------

function addPortlet(plid, portletId, doAsUserId) {

  var refreshPortletList = getRefreshPortletList();

  if (refreshPortletList["_" + portletId]) {
    self.location = "<%= themeDisplay.getPathMain() %>/portal/update_layout?p_l_id=" + plid + "&p_p_id=" + portletId + "&doAsUserId=" + doAsUserId + "&<%=

Constants.CMD %>=<%= Constants.ADD %>&referer=<%= HttpUtil.encodeURL(currentURL) %>&refresh=1";
  }
 
  else {
    var loadingDiv = document.createElement("div");
    var container = document.getElementById("layout-column_column-1");

    if (container == null) {
      return;
    }

    loadingDiv.className = "loading-animation";

    container.appendChild(loadingDiv);

    var queryString = "<%= themeDisplay.getPathMain() %>/portal/update_layout?p_l_id=" + plid + "&p_p_id=" + portletId + "&doAsUserId=" + doAsUserId + "&<%=

Constants.CMD %>=<%= Constants.ADD %>&currentURL=<%= HttpUtil.encodeURL(currentURL) %>";

    /* queryString = /c/portal/update_layout?p_l_id=10102&p_p_id=reports&doAsUserId=&cmd=add&currentURL=%2Fweb%2Fguest%2Fhome */
    /* 這就是最終發送往服務器端的數據了，剛好可以與前面所分析的服務器端收到/c/portal/update_layout后的處理流程對應起來了。*/

    addPortletHTML(queryString, loadingDiv);
  }
}

portlet_js.jspf
--------------------

function getRefreshPortletList() {

  <%
  List allPortlets = PortletLocalServiceUtil.getPortlets(company.getCompanyId(), false, false);
 
  List nonAjaxPortlets = new ArrayList();

  for (int i = 0; i < allPortlets.size(); i++) {
    Portlet portlet = (Portlet)allPortlets.get(i);

    if (!portlet.isAjaxable()) {
      nonAjaxPortlets.add(portlet.getPortletId());
    }
  }

  StringMaker portletList = new StringMaker();

  for (int i = 0; i < nonAjaxPortlets.size(); i++) {
    portletList.append("_");
    portletList.append(nonAjaxPortlets.get(i));
    portletList.append(":true");
    portletList.append((i < nonAjaxPortlets.size() - 1) ? "," : "");
  }
 %>

  var refreshPortletList = { <%= portletList.toString() %> };
  return refreshPortletList;
}

function addPortletHTML(url, placeHolder) {

  var addPortletReturn = function(html) {

    var container = placeHolder.parentNode;

    var addDiv = document.createElement("div");

    addDiv.style.display = "none";

    addDiv.innerHTML = html;

    var portletBound = jQuery(".portlet-boundary:first", addDiv).get(0);

    portletBound.parentNode.removeChild(portletBound);

    var portletId = portletBound.id;

    portletId = portletId.replace(/^p_p_id_/,"");

    portletId = portletId.replace(/_$/,"");

    portletBound.portletId = portletId;

    Liferay.Portlet.flagAjax(portletId);

    container.replaceChild(portletBound, placeHolder);

    Liferay.Util.evalScripts(addDiv);

    if (!jQuery.browser.firefox) {
      Liferay.Util.evalScripts(portletBound);
    }

    <c:if test="<%= (layout != null) && (LayoutPermissionUtil.contains(permissionChecker, layout, ActionKeys.UPDATE)) %>">
      if (!portletBound.isStatic) {
        if (themeDisplay.isFreeformLayout()) {
          Liferay.Freeform.add(portletBound);
        }
        else {
          Liferay.Columns.add(portletBound);
        }
      }
    </c:if>

    if (jQuery.browser.firefox) {
      setTimeout("Liferay.Portlet.process(\"" + portletId + "\")", 0);
    }
    else {
      Liferay.Portlet.process(portletId);
    }

    Liferay.Util.addInputType(portletBound.id);
    Liferay.Util.addInputFocus(portletBound.id);

    if (window.location.hash) {
      window.location.hash = "p_" + portletId;
    }
    return portletId;
  };

  /* addPortletHTML()生成一個Ajax Request，收到Ajax Response后調用addPortletReturn。*/
  AjaxUtil.request(url, {
  onComplete: function(xmlHttpReq){
   addPortletReturn(xmlHttpReq.responseText);
  }
  });
}

  /* xmlHttpReq.responseText的內容就是該portlet要嵌入portal中的的HTML代碼片段，如下圖所示。在經過addPortletReturn()處理后完成portlet的添加工作*/

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=2177414