当前位置: 首页 > Web前端 > vue.js

SAPFioriElements中SmartLink的工作原理介绍

时间:2023-03-31 15:18:08 vue.js

在OData模型元数据中声明的相应注释的帮助下,智能字段可以轻松定义超链接。此示例中的超链接在UI中如下所示:单击后,它将显示一个附加弹出窗口,其中包含应用程序中定义的更多信息代码:此示例项目的所有源代码都可以从此链接找到。项目资源概述(1)超链接字段的标签通过注释“sap:label”在元数据中定义(2)超链接字段本身在XML中定义看法。它的值绑定到OData模型中的字段名称。(3)在OData模型中,字段Name维护了注释“com.sap.vocabularies.Common.v1.SemanticObject”,因此在运行时UI5框架将其呈现为SmartLink。(4)一旦按下,UI5框架将r弹出一个弹出窗口,其中包含三个可供单击的链接。导航目标由应用程序定义如下。如何解析链接相关注释并创建SmartLink实例如前两篇博客所述,UI5框架将尝试扫描OData模型元数据中的所有潜在注释,因为现在语义注释可用,符合55有一个中央_getCreator,它将返回用于控件创建的专用函数名称。在我们的示例中,函数名称是_createEdmSemantic,因为语义注释的可用性:在这个_createEdmSemantic中,创建了一个新的SmartLink实例。在其构造函数中,注册Press事件处理器,添加超链接CSS类。当超链接被按下时弹出对话框是如何渲染的在事件处理器_linkPressed中,计算并返回语义属性:_linkPressed调用fOpen()进行Popup的创建和显示逻辑:作为第一个t步,在fOpen()中通过_createPopover()创建了一个新的弹出对话框。弹出对话框由NavigationPopover实现。单击此弹出对话框中的链接时,将调用_onInnerNavigate。为了在弹出对话框中呈现超链接,UI5框架必须知道导航目标url。此信息由应用程序提供并由UI5框架异步检索:来自应用程序的导航目标信息被传递到UI5框架回调中,并基于它们中的每一个创建LinkData实例,然后添加到弹出对话框实例。之后您可以观察到弹出对话框实例的聚合区域中维护了三个导航信息:一旦完成,TargetsObtained事件被引发:并且它的事件处理程序将调用弹出对话框的显示功能,所以你最终可以在UI中看到它。要获取更多Jerry的原创文章,请关注公众号"汪子熙":