时间戳

首页 > 解决方案 > 如何使用 XML 字符串以编程方式创建片段

xml - 如何使用 XML 字符串以编程方式创建片段

问题描述

我有一个包含 XML 片段定义的字符串，我想使用它创建一个控件。

XML 字符串示例：

var sFrag = "<core:FragmentDefinition xmlns='sap.m' xmlns:core='sap.ui.core'>
    <Dialog showHeader='false' class='transparentBG dialogScrollHeight100' contentWidth='90%' afterClose='dialogAddNewAfterclose'>
        <content>
            <Button text='X' press='closeDialog'/>
            <Text text='Hello Meirav!'/>
            <HBox alignItems='Center'>
                <Label text='Product Name: '/>
                <Label text='{currentProduct&gt;/Name}'/>
            </HBox>
            <HBox height='30px'/>
            <HBox alignItems='Center'>
                <Label text='Product Price: '/>
                <Input value='{currentProduct&gt;/Price}'/>
            </HBox>
            <HBox height='30px' />
            <Button text='Save Update' press='saveUpdateFromFrag'/>
        </content>
    </Dialog>
</core:FragmentDefinition>"

可能吗？

标签： xmlsapui5

解决方案

是的，与 类似XMLView.create，Fragment 也支持从 XML 字符串创建控件。

UI5≥1.58

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/m/Button",
], async (Fragment, Button) => {
  "use strict";

  const dialog = await Fragment.load({
    definition: `<Dialog xmlns="sap.m"
      title="My Dialog"
      class="sapUiResponsiveContentPadding">
      <Text text="Some Dialog content.." />
      <beginButton>
        <Button id="myBeginButton"
          text="Handle Event from Fragment"
          press=".onBeginButtonPress" />
      </beginButton>
    </Dialog>`,
    controller: { // can be just "this" in a Controller definition.
      onBeginButtonPress: () => alert("Event handler triggered!"),
    },
  });
  new Button({
    text: "Open Dialog",
    press: () => dialog.open(),
  }).placeAt("content");
});
<script defer id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m"
  data-sap-ui-async="true"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

API参考：sap/ui/core/Fragment.load

PS：<FragmentDefinition>仅当片段定义包含多个根节点时才需要。这里不是这种情况，因此可以将其删除。

UI5 ≤ 1.56

如果使用旧版本，您将不得不使用已弃用的 API sap.ui.xmlfragment。

const fragmentContent = `<Dialog xmlns="sap.m"><!-- ... --></Dialog>`;
const dialog = sap.ui.xmlfragment({ fragmentContent }, this);

而不是definition，需要将字符串内容分配给属性fragmentContent，并且控制器实例应作为第二个参数 ( this) 传递。

推荐阅读