如何在 liferay 6.2 网页内容中添加动作

How can I add action in the liferay 6.2 web content

我在 liferay 6.2 网站上工作,我有一个网页内容页面,我可以在其中添加文章和其他一些资源。我想创建在弹出操作中可用的功能来复制或移动到选定的目的地。

但我不知道如何将这些操作添加到我的 liferay 门户。

当用户点击 "Action" 按钮(红色圆圈)时,我希望在弹出窗口中显示我的新操作。

创建一个挂钩

From Liferay's Knowledge base

From your command line terminal, navigate to your Plugins SDK’s hooks folder. To create a hook project, you must execute the create script. Here’s the format to follow in executing the script:

create.[sh|bat] [project-name] "[Hook Display Name]"

On Linux and Mac OS X, you’d enter a command similar to the one in this example:

./create.sh journal-hook "Journal Hook"

On Windows, you’d enter a command similar to the one in this example:

create.bat journal-hook "Journal Hook"

Liferay IDE’s New Project wizard and the create scripts generate hook projects in your Plugin SDK’s hooks folder. The Plugins SDK automatically appends “-hook” to your project name.

您需要安装 Apache ANT 才能工作。如需安装请参考以下文档

创建挂钩后,在您的 Liferay IDE 或 Liferay Developers Studio(或 Eclipse)中将其打开。您应该会看到与此类似的内容。


Journal JavaServer Page (JSP) 挂钩

If you noticed above I used the word journal in the hook plugin's name. Journal is synonymous with web content in Liferay. Generally you will see Web Content used in written material for users and administrators, and journal used in material for developers.

你的问题比较大,主要是问三个问题。

  1. 我们如何创建一个钩子
  2. 我要覆盖哪个页面
  3. 如何在该图标菜单中添加其他操作
  4. 如何创建弹出窗口 window 当我 select 我的新菜单选项

问题 #1 已得到解答。您的 post 中的问题 #2 没有明确说明,但我假设您是在谈论 期刊内容 view.jsp =140=] 门户组件

A few things to note. View.jsp is Liferay's directory index page (akin to Apache's index.html). Liferay's "core" functionality is actually (for the most part) dozens of JSR-286 and JSR-186 portlets.

问题三终于是我们开始编码的地方了。在您的 META-INF 文件夹下创建一个名为 jsp 的目录(这是我们按照惯例放置 JSP 覆盖文件的地方)。导航到您的 liferay-hook.xml 文件,清除所有现有内容,然后粘贴以下内容 xml.

liferay-hook.xml

<hook>
    <custom-jsp-dir>/META-INF/jsp</custom-jsp-dir>
</hook>

If you are in Liferay Developer Studio make sure you are in the source tab as opposed to the Overview tab.

此文件夹现在将存放您希望覆盖的每个 jsp 文件。在这个例子中,我们将只覆盖一个文件。该目录遵循特定的配置约定,其中您希望覆盖的任何jsp文件必须存在于该目录中,并且与它存在于门户本身中的相对位置相同。

对于我们的特定示例,日记内容 portlet 的目录索引文件存在于以下目录中。

META-INF/
      jsp/
        html/
          portlet/
            journal_content/
              + view.jsp

您不需要自己创建整个结构。您只能创建 jsp 文件夹。创建该文件夹后,再次打开 liferay-hook.xml,但这次在 Overview 中打开它。执行以下步骤

  1. 单击自定义 jsps 标签旁边的绿色加号。
  2. 搜索 /html/portlet/journal_content/view.jsp
  3. 双击搜索返回的唯一项目
  4. Ctrl + s 保存

您应该会看到创建的文件夹结构和目录索引文件。如果切换回 source 视图,您会注意到没有生成新的 xml。这就是 配置约定 的工作原理。

现在,在您的 WEB-INF 文件夹中创建一个名为 html 的新文件夹。在该文件夹中创建一个名为 view.jsp 的新 jsp。这将是您的 hooks 目录索引,它将是您的弹出窗口 window。您的结构最终应该如下所示。

您的钩子插件已完全配置,剩下的就是编码。在 /html/view.jsp 中输入一些样板代码。

<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui"%>
<%@ taglib uri="http://liferay.com/tld/util" prefix="liferay-util"%>

<liferay-ui:panel collapsible="false" title="Custom Option">
    <aui:form  name="fm" onSubmit="event.preventDefault();">
        <aui:input name="name" label="Name"></aui:input>
        <aui:button-row>
            <aui:button type="cancel" onClick="closeWindow('journalWindow');"></aui:button>
            <aui:button type="submit"></aui:button>
        </aui:button-row>
    </aui:form>
</liferay-ui:panel>

我们只是创建了一个简单的表单,不做任何严格的展示。如您所见,有一个

closeWindow(string)

我们将在其他页面上定义的函数。现在,打开 ../journal_content/view.jsp 页面。正下方

<%@ include file="/html/portlet/journal_content/init.jsp" %>

添加以下代码

<liferay-portlet:renderURL var="customActionURL"  windowState="<%=LiferayWindowState.POP_UP.toString()%>">
    <portlet:param name="mvcPath" value="/html/view.jsp" />
</liferay-portlet:renderURL>

<aui:script use="aui-base, liferay-util-window, aui-io-plugin-deprecated">
    var A = AUI();
    A.one('#<portlet:namespace/>customAction').on('click', function(event){
    var custom_popup= Liferay.Util.Window.getWindow({
        dialog: {
            centered: true,
            constrain2view: true,
            modal: true,
            resizable: false,
            width: 475
        }
     }).plug(A.Plugin.DialogIframe, {
         autoLoad: true,
         iframeCssClass: 'dialog-iframe',
         uri:'<%=customActionURL.toString()%>'
     }).render();

     login_popup.show();
     login_popup.titleNode.html("Custom Action");
});


Liferay.provide(window, 'closeWindow', function(id) {
    var dialog = Liferay.Util.getWindow(id);
    dialog.destroy(); 
}, ['aui-base','aui-dialog','aui-dialog-iframe']);
</aui:script>

代码很容易解释,但我将给出一个简短的概述。前几行我们为 view.jsp 页面创建了一个 url。我们给它一个变量名 customActionURL 以便稍后引用,指定它是一个弹出窗口 window(因此它不会在 window 中显示门户主题的 header,我们发送一个 mvcPath没有目标的参数。

<liferay-portlet:renderURL var="customActionURL"  windowState="<%=LiferayWindowState.POP_UP.toString()%>">
    <portlet:param name="mvcPath" value="/html/view.jsp" />
</liferay-portlet:renderURL>

We then create an event listener for our yet to be created customAction icon. When clicked it will launch a new popup window with our renderURL destination. Finally, we create a a closeWindow function which closes the popup.

最后,我们需要在列表中实际添加新的图标项。找到以下代码。

<div class="lfr-icon-actions">
    <c:if test="<%= showEditArticleIcon %>">
        <liferay-portlet:renderURL portletName="<%= PortletKeys.JOURNAL %>" var="editURL" windowState="<%= WindowState.MAXIMIZED.toString() %>">
            <portlet:param name="struts_action" value="/journal/edit_article" />
            <portlet:param name="redirect" value="<%= currentURL %>" />
            <portlet:param name="groupId" value="<%= String.valueOf(latestArticle.getGroupId()) %>" />
            <portlet:param name="folderId" value="<%= String.valueOf(latestArticle.getFolderId()) %>" />
            <portlet:param name="articleId" value="<%= latestArticle.getArticleId() %>" />
            <portlet:param name="version" value="<%= String.valueOf(latestArticle.getVersion()) %>" />
        </liferay-portlet:renderURL>

        <liferay-ui:icon
            cssClass="lfr-icon-action lfr-icon-action-edit"
            image="edit"
            label="<%= true %>"
            message="edit"
            url="<%= editURL %>"
        />
    </c:if>

在这段代码的正下方写入以下内容。

<liferay-ui:icon iconCssClass="icon-link" message="Custom Action" id="customAction" />

如果 parent window 正在重定向,您可能需要添加以下属性

<liferay-ui:icon iconCssClass="icon-link" message="Custom Action" id="customAction" url="event.preventDefault()" />

构建并运行

构建和部署挂钩是一个轻松的过程。此说明可能不准确,因为它们取决于您的应用程序服务器。

These instructions are also dependent on your build tool. Liferay supports ANT, IVY, Maven, and Gradle. I am assuming you are using ANT.

在您的 IDE 中找到挂钩的 build.xml 文件。这是您的 ANT 构建脚本。只需将该文件拖放到您的 ANT 透视图中即可。

现在双击所有目标。

您也可以在命令行上 运行 通过导航到系统资源管理器中的 hooks 文件夹并 运行ning

ant all

完成后,只需启动您的嵌入式 Tomcat(或您使用的 servlet 容器)。

希望这对您有所帮助。请让我知道任何问题、意见、疑虑等。我也将非常感激l 求反馈!