SAP HYBRIS [Y]：如何在后台创建我们的自定义小部件

Question

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

Answer 1

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

创建小部件

要创建小部件，您需要先创建小部件定义。 definition.xml 文件中提供了小部件的定义。

程序

在 myextension/backoffice/resources/widgets 目录中创建一个名为 mysearch 的新文件夹。
在 mysearch 文件夹中，创建一个 definition.xml 文件。
添加有关搜索小部件的信息。

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

definition.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 文件中定义，以 definition.xml 中指定的小部件 ID 的最后一部分命名（在本例中为 mysearch.zul）。

上下文

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

程序

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

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>

部署小部件

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

程序

包括您的新扩展：

一个。打开 /localextensions.xml 文件。

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

c。保存文件。
构建您的项目：

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

将小部件添加到应用程序

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

实施搜索服务

小部件需要实现一些逻辑。由于widget是负责搜索的，所以要实现SearchService

上下文

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

程序

将新的 class 命名为 SearchService 添加到 org.myextension 包内的 src 文件夹。以下代码是示例实现。

SearchService.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;
    }
}

将新实现添加到位于 myextension/resources 目录的 Spring 上下文文件中：

myextension-backoffice-spring.xml

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

创建控制器

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

上下文

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

程序

在myextension/backoffice/src/org/myextension中，创建一个包名如下的控制器： org.myextension.widgets.mysearch.

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

添加以下操作的实现：

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

b。当按下搜索按钮时，应该执行搜索查询的搜索。

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));
    }
}

在 definition.xml 中添加控制器 class（位于 myextension/backoffice/resources/widgets/mysearch 目录中的控制器）。

definition.xml

像在部署小部件过程中那样重建系统。
单击“搜索”按钮。

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

Answer 2

还必须创建 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>

SAP HYBRIS [Y]：如何在后台创建我们的自定义小部件

SAP HYBRIS [Y] : How to create our custom widget in backoffice

widget

hybris

zul

backoffice