关于和 SAPUI5在 SAPMEPODPlugin 中的嵌入
**什么是POD Plugin？** ****
生产操作员仪表板(POD)是车间操作员和包含制造数据的应用程序之间的主要接口。它提供了模块化插件布局，无需自定义代码增强即可进行配置。通常使用POD来处理正在车间生产的产品。POD提供主视图，显示和管理用户的POD插件(POD
Plugin)的交互，而POD插件是一种与应用程序交互以提供特定的、通常非常具体的功能的程序。
有两种类型的POD插件
• UI插件——包括Java代码和JSP视图
• 非UI插件——只由Java代码组成的执行插件
我们通过客制化的UI插件用以在车间生产流程中提供灵活、可扩展的方式实现用户交互需求。
** 如何将SAPUI5嵌入POD Plugin？ **
UI插件由至少一个plugin类和一个包含JSF /
LSF控件的视图（JSP页面）组成。将SAPUI5嵌入POD，即是将SAPUI5视图嵌入UI插件的JSP视图中。以下从页面加载、操作响应和数据交互等方面介绍具体的实现方式：
** 🔹 页面加载 **
SAPUI5页面由视图view和控制器controller基础构成，通常需要在manifest.json文件中配置路由，用以页面的访问加载。在POD
UI插件的使用中，我们并不通过manifest.json来获取访问UI5页面的路径。
UI插件在faces-config.xml中被定义为managed bean，当UI插件被加载时，将从managed bean进行初始加载。示例如下：
UI插件由一个plugin类和一个JSP视图基础构成，在managed-bean-
class属性中声明这个plugin类的路径，并在defaultUrl属性中声明这个JSP视图的路径。
JSP视图包含JSF 控件，基于JSF 控件，可以在JSP中使用EL表达式按名称引用在faces-
config.xml中声明的插件，访问指定后台plugin类：
plugin类继承了标准类BasePodPlugin，通过重写getUrl方法，返回JSP中DemoPlugin.url访问的路径：
这里创建了一个新的JSP页面Demo.jsp，用以加载到标签中。在这个JSP页面中，将嵌入已经绘制好的SAPUI5的视图DemoView：
经此，UI5的视图view可以通过嵌套两层JSP页面加载到POD的UI插件中。
** 🔹 操作响应 **
那么当用户在前台进行页面操作时，后台将如何响应用户的操作？
在plugin类中需要实现消息监听接口IFrameOnMessageListenerInterface的processIFrameOnMessage方法。当用户进行操作时，在controller中调用window.sendMessageToPod(message,
oMessageData)向后台发送消息，即触发plugin类的消息监听，同时获取消息中传递的参数：
** 🔹 数据交互 **
通过IFrameOnMessageListenerInterface消息监听事件的参数可以获取到页面的Model数据，那么又如何将后台处理过的数据再交互给前端？
首先，在plugin类中，调用fireEvent方法（继承自BasePodPlugin类，通过将指定事件放入待处理的队列中来触发该事件），参数为IFramePostMessageListenerInterface接口的postIFrameMessage事件，并将需要返回给前端的数据绑定到该事件的参数中。
其次，在Demo.jsp中的receiveMessageFromPod方法获取到触发事件的响应，加载controller，并将事件参数传递给controller。
** 🔹 实现效果 **
**
**
**
**
** 【END】 **
**
**
作者：王友敬
审核：戴 燕
编辑：王 锐
