中，我也分配了类bkChatButton，以便我以后可以添加一些css样式。

到目前为止很好…

初始化…

这是我们正在做的大部分繁重的工作。我们需要设计聊天机器人和所有子控件，在这个响应popover中。

开始通过导入一些css并创建按钮，我将一个内部函数绑定到按钮按下事件，该事件将打开聊天对话框。

打开按钮的函数看起来像这样…我使用responsivepopver的openBy函数，然后设置内容的高度和宽度。

您会注意到我给了我的按钮一个id，并且id基于控件的id，

这个.getId（）+"-bkChatButton"

这是一个好主意，好像控件被多次使用，每个控件都有不同的id，我们不会看到任何与重复id相关的错误。我需要给这个控件一个id来访问它，因为它的一个属性基于我的自定义控件属性。

我希望这个按钮图标是可配置的，但是在init函数中属性不可用。因此，我覆盖属性buttonIcon的setter，并调用实际存在于管理对象.js在某个地方。

最后我设置了我给id的按钮的图标。

这里要注意的最重要的事情是，

创建控件并调用init函数时，所分配的属性在init中不可用。

首先调用init，然后当XML解析器遇到属性时，调用setProperty（）方法逐个更新。因此，访问init方法中的属性将导致空值。为了更好地理解这一点，我在init和setters中放置了一些断点，我可以看到它们被调用以及调用的顺序。

用户输入…

聊天对话框只是一个sap.m.List（使用的FedListItems之间没有分隔符）和也是一个sap.m.FeedInput，最终用户将在其中写入。

让我们首先讨论FeedInput，FeedInput是一个UI5控件，用户键入文本并输入文本时需要按下按钮。我希望回车键也能发送消息。但是回车键的默认行为是移到下一行。

要解决这个问题，我在feed项中添加了一个事件delagate，所以现在当按下enter键时，调用下面的函数。首先我使用preventDefault（）停止carrage返回的发生。然后我检查feed项中是否有文本。如果有，我触发通常只在按下按钮时发生的事件。完成后，大数据分析，我清除文本。

您可以在上面看到，触发的事件是post，云服务器价格，并且在feed输入的创建中，我已经将此事件绑定到了\u oPost函数。现在让我们看一看。

当触发此事件时，我们需要做两件事，更新列表，云服务器那个好，删除新的聊天文本，并将此文本发送到聊天机器人以获得响应。由于我们是控件开发人员而不是应用程序开发人员，因此我们将触发自定义控件事件"send"文本。现在应用程序开发人员可以绑定到此事件以获取服务器响应。我们将在后面查看。

您可以看到上面我们添加了聊天功能addChatItem time查看…

addChatItem…

此功能旨在将聊天气泡中的文本添加到聊天对话框中，它有两个参数，文本和一个布尔值，决定是用户还是机器人添加文本。在上面我们可以看到它正在被用户调用。但是稍后我们会看到机器人调用它。

根据布尔值添加一个类，并用适当的气泡方向和正确的图像设置聊天气泡的样式。我们还可以

我也滚动到我的页面底部添加新聊天时列出。

使用控件…

现在控件是developer，下面的代码在自定义控件外部，并且是编写此控件的应用程序开发人员。

要使用控件，万云，他们只需在视图中定义名称空间，然后他们可以添加组件并绑定我们在控件的元数据中定义的所有属性。

我们还绑定到事件send。我们绑定函数onSendPressed，我们将在该视图的控制器中定义它。现在让我们看一下。

一旦调用了它，应用程序开发人员就可以包括对不管他们用的是什么聊天机器人，一旦回复回来，他们就使用前面提到的addChatItem函数，但是这一次它被调用为false，云教云，响应文本和气泡将被设计成一个机器人，调整对话框大小等。还有语音气泡的设计，这是在CSS中完成的，网上有很多资源可以解释。

有机会我会把所有的代码上传到gibhub。