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

Posted 2021-04-06

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

答案

在这里找到关于hybris后台如何创建自定义小部件https://help.hybris.com/6.6.0/hcd/8bd4366a86691014b818f8dd642790a8.html的完整教程

祝好运。

另一答案

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

创建一个小部件

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

程序

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

您可以提供名称，描述，默认标题，作者和版本等信息。每个窗口小部件必须具有由扩展名和窗口小部件名称组成的唯一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>

创建窗口小部件视图：

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

上下文

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

程序

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

mysearch.zul

部署Widget

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

程序

1. 包括您的新扩展程序： 一个。打开/localextensions.xml文件。 湾添加以下行 C。保存文件。
2. 建立你的项目：

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

将Widget添加到应用程序

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

实施搜索服务

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

上下文

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

程序

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

search service.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;
}
}

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

myextension-后台，spring.xml

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

创建一个控制器

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

上下文

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

程序

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

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

2. 添加以下操作的实现： 一个。在文本框中键入搜索查询时，应触发搜索。 湾按下“搜索”按钮时，应执行搜索查询的搜索。

my search controller.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));
}
}

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

definition.xml

4. 像在部署窗口小部件过程中一样重建系统。
5. 单击“搜索”按钮。

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

另一答案

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