-1

我是 Sap Hybris 的初学者。我想了解后台扩展以及如何创建我们的自定义小部件。只是一个小例子来理解不同的步骤。

4

2 回答 2

5

我将清除创建小部件的步骤

创建小部件

要创建小部件，您需要从创建小部件定义开始。小部件的定义在definition.xml文件中提供。

程序

  1. 在myextension/backoffice/resources/widgets目录中创建一个名为 mysearch 的新文件夹。

  2. 在 mysearch 文件夹中，创建一个 definition.xml 文件。

  3. 添加有关搜索小部件的信息。

您可以提供名称、描述、默认标题、作者和版本等信息。每个小部件必须有一个由扩展名和小部件名称组成的唯一 ID。对于本教程，小部件 ID 是 org.myextension.widgets.mysearch。

定义.xml：

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<widget-definition id="org.myextension.widgets.mysearch" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.hybris.com/schema/cockpitng/widget-definition.xsd">

    <name>My Search</name>
    <description>My own search widget.</description>
    <defaultTitle>Search</defaultTitle>
    <author>Me</author>
    <version>0.1</version>

</widget-definition>

创建小部件视图：

此小部件的视图在 ZK ZUL 文件中定义，该文件以定义.xml（在本例中为 mysearch.zul）中指定的小部件 ID 的最后一部分命名。

语境

在 mysearch.zul 文件中，您定义所有前端组件。对于搜索小部件，您需要两个组件：一个文本框和一个按钮。

程序

  1. 在 mysearch 文件夹中，创建 mysearch.zul 文件。
  2. 添加文本框和按钮组件，为每个组件提供一个 ID，以及一个按钮标签。您的 mysearch.zul 文件应该或多或少类似于以下示例。

我的搜索.zul

<widget xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.zkoss.org/2005/zul">
    <style src="${wr}/default.css"/>
    <div>
        <hlayout>
            <textbox id="searchInput"/>
            <button id="searchBtn" label="Search"/>
        </hlayout>
    </div>
</widget>

部署小部件

现在，需要部署新创建的小部件。

程序

  1. 包括你的新扩展：

    一个。打开 <HYBRIS_CONFIG_DIR>/localextensions.xml 文件。

    湾。添加以下行
    <extension name="myextension" />

    C。保存文件。

  2. 构建您的项目：

调用 ant clean all 构建 SAP Hybris Commerce 并启动服务器

将小部件添加到应用程序

部署小部件后，您需要将小部件添加到应用程序。

实现搜索服务

小部件需要实现一些逻辑。由于小部件负责搜索，因此要实现 SearchService。

语境

在创建控制器之前，您必须添加一个 SearchService，供您的搜索小部件使用。

程序

  1. 将一个名为 SearchService 的新类添加到 org.myextension 包中的 src 文件夹。以下代码是一个示例实现。

搜索服务.java

package org.myextension;

import java.util.ArrayList;
import java.util.List;

public class SearchService {
    public List<String> search(final String text) {
        List<String> result = new ArrayList<String>();
        result.add(text);
        result.add("Hello");
        result.add("Cockpit NG");
        result.add("Developer");

        return result;
    }
}
  1. 将新实现添加到位于 myextension/resources 目录中的 Spring 上下文文件中：

myextension-backoffice-spring.xml

<bean id="searchService" class="org.myextension.SearchService"/>

创建控制器

新创建的小部件需要一个小部件控制器。

语境

由于您尚未为“搜索”按钮定义任何操作，因此单击它时不会发生任何事情。为此，您需要创建一个控制器。

程序

  1. 在 myextension/backoffice/src/org/myextension 中，使用以下包名创建一个控制器：org.myextension.widgets.mysearch。

控制器应该扩展 DefaultWidgetController。将其命名为 MySearchController。

  1. 添加以下操作的实现：

    一个。在文本框中键入搜索查询时，它应该触发搜索。

    湾。按下搜索按钮时，应执行搜索查询的搜索。

MySearchController.java

package org.myextension.widgets.mysearch;

import java.util.List;

import org.myextension.SearchService;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.select.annotation.WireVariable;
import org.zkoss.zul.Messagebox;
import org.zkoss.zul.Textbox;

import com.hybris.cockpitng.annotations.ViewEvent;
import com.hybris.cockpitng.util.DefaultWidgetController;

public class MySearchController extends DefaultWidgetController {
    private Textbox searchInput;

    @WireVariable
    private SearchService searchService;

    @ViewEvent(componentID = "searchBtn", eventName = Events.ON_CLICK)
    public void doSearch() throws InterruptedException {
        List<String> result = searchService.search(searchInput.getText());
        Messagebox.show(result.get(0));
    }
}
  1. 在 definition.xml 中添加一个控制器类（位于 myextension/backoffice/resources/widgets/mysearch 目录中的那个）。

定义.xml

  1. 像在部署小部件过程中所做的那样重建系统。

  2. 单击搜索按钮。

将出现一条弹出消息，其中包含您在文本框中键入的相同文本。

于 2018-04-08T11:35:56.773 回答
0

还必须创建 mysearch.zul

<widget xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.zkoss.org/2005/zul">
    <style src="${wr}/default.css"/>
    <div>
        <hlayout>
            <textbox id="searchInput"/>
            <button id="searchBtn" label="Search"/>
        </hlayout>
    </div>
</widget>
于 2018-11-27T14:16:28.023 回答