Как предлагается в комментарии , существуют API-интерфейсы publi c, с помощью которых можно создавать элементы управления из строковых значений.
Дано: определение пользовательского интерфейса в формате XML
Дано: view определение в формате JSON
То же, что XMLView.create
, но вместо JSONView.create
:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/JSONView",
], JSONView => JSONView.create({
definition: `{
"Type":"sap.ui.core.mvc.JSONView",
"content": [
{
"Type":"sap.m.Input",
"width": "12rem",
"placeholder": "Edit me",
"change": "alert('Sample global handler triggered')"
}
]
}`,
}).then(view => view.placeAt("content"))));
<script 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-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Do c: JSON Просмотр
К сожалению, заводская функция для создание единого элемента управления из текста JSON (в настоящее время поддерживаются только XML, JS и HTML). Но если это действительно необходимо, вот моя попытка:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/m/Input",
"sap/ui/model/json/JSONModel",
], (Input, JSONModel) => {
"use strict";
const myController = {
onInit: function() {
createControlViaJSON({
definition: `{
"placeholder": "{/myPlaceHolder}",
"change": "onInputChange",
"width": "12rem"
}`,
TargetControl: Input,
controller: this,
}).setModel(new JSONModel({ myPlaceHolder: "Edit me" }))
.addStyleClass("sapUiTinyMargin")
.placeAt("content");
},
onInputChange: function(event) {
alert(`You typed: ${event.getParameter("value")}`);
},
};
// Emulating controller initialization:
myController.onInit();
// Could be a separate module:
function createControlViaJSON({ id, definition, TargetControl, controller }) {
// Very primitive sample! Ignoring aggregations, associations, etc..
const control = new TargetControl(id);
JSON.parse(definition, (key, value) => {
if (typeof controller[value] == "function") {
control.applySettings({
[key]: [controller[value], controller],
});
} else if (key) {
control.applySettings({
[key]: value,
});
}
});
return control;
}
}));
<script 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-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>