我是Sap Hybris的初学者。我想了解后台扩展 以及如何创建自定义小部件。只是一个小例子，可以通过不同的步骤来理解。
我将清除创建小部件的步骤
创建小部件
要创建小部件，您需要从创建小部件定义开始。小部件的定义definition.xml文件中提供。
程序
myextension/backoffice/resources/widgets目录中创建一个名为 mysearch 的新文件夹。在 mysearch 文件夹中，创建一个定义.xml文件。
添加有关搜索微件的信息。
您可以提供名称、说明、默认标题、作者和版本等信息。每个小组件必须具有由扩展和小组件名称组成的唯一 ID。在本教程中，widget 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 文件中定义，该文件以定义中指定的小部件 ID 的最后一部分命名.xml(在本例中为 mysearch.zul)。
上下文
在 mysearch.zul 文件中，定义所有前端组件。对于搜索微件，您需要两个组件：文本框和按钮。
程序
- 在 mysearch 文件夹中，创建 mysearch.zul 文件。
- 添加文本框和按钮组件，为每个组件提供 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>
部署小组件
现在，需要部署新创建的小部件。
程序
包括您的新扩展：
a. 打开
/localextensions.xml 文件。 b. 添加以下行
<extension name="myextension" />c. 保存文件。
构建您的项目：
调用所有 ant 清理以构建 SAP Hybris Commerce 并启动服务器
将小组件添加到应用程序
部署小部件后，您需要将小部件添加到应用程序中。
实现搜索服务
小部件需要实现一些逻辑。由于小部件负责搜索，因此将实现搜索服务。
上下文
在创建控制器之前，必须添加搜索小组件使用的搜索服务。
程序
- 将一个名为 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;
}
}
- 将新的实现添加到位于 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));
}
}
- 在定义中添加一个控制器类.xml(位于myextension/backoffice/resources/widgets/mysearch目录中的那个)。
定义.xml
重建系统，就像在部署小组件过程中所做的那样。
单击搜索按钮。
此时将显示一条弹出消息，其中包含您在文本框中键入的文本相同的文本。
也必须创建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>