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

debugcn 发表于 Dev

查拉菲·萨阿德

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

查拉菲·萨阿德

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

创建小部件

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

程序

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

您可以提供名称、描述、默认标题、作者和版本等信息。每个小部件必须有一个由扩展名和小部件名称组成的唯一 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 文件中定义，该文件以 definition.xml（在本例中为 mysearch.zul）中指定的小部件 ID 的最后部分命名。

语境

在 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>

部署小部件

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

程序

包括您的新扩展：

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

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

C。保存文件。
构建你的项目：

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

将小部件添加到应用程序

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

实现搜索服务

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

语境

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

程序

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

搜索服务

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。

添加以下操作的实现：

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

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

我的搜索控制器.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));
    }
}