在 sapui5 中手动从 XML 视图转换为 JavaScript 视图

Question

https://sapui5.hana.ondemand.com/#/controls 的文档提供了许多SAPUI5示例。但是所有视图都是用 XML 编写的。我可以在其他地方找到用JavaScript编写的示例，但我要求在XML代码上应用一般规则。这是一个示例List.view.xml我需要手动将其转换为List.view.js

<mvc:View
height="100%"
controllerName="sap.m.sample.ListSelectionSearch.List"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page
showHeader="false" >
<subHeader>
<Toolbar>
<SearchField
liveChange="onSearch"
width="100%" />
</Toolbar>
</subHeader>
<content>
<List
id="idList"
items="{/ProductCollection}"
selectionChange="onSelectionChange"
mode="MultiSelect"
includeItemInSelection="true" >
<infoToolbar>
<Toolbar
visible="false"
id="idInfoToolbar" >
<Label id="idFilterLabel" />
</Toolbar>
</infoToolbar>
<items>
<StandardListItem
title="{Name}"
description="{ProductId}"
icon="{ProductPicUrl}"
iconDensityAware="false"
iconInset="false" />
</items>
</List>
</content>
</Page>

任何帮助将不胜感激。

Answer 1

在SAPUI5的JSView中，列表聚合在控制器中完成，这是相同的：

或者，看看这个完整的应用程序示例 SAPUI5 JSView 应用程序

或

通过按Ctrl+SHIFT+Alt+S和 API 引用来使用诊断工具

sap.ui.define(["sap/m/Page", "sap/m/List", "sap/m/Toolbar", "sap/m/SearchField", "sap/m/Label", "sap/m/Text"], function(Page, List, Toolbar, SearchField, Label, Text) {
"use strict";
return sap.ui.jsview("sap.m.sample.ListSelectionSearch.View", {
getControllerName: function() {
return "sap.m.sample.ListSelectionSearch.List";
},
createContent: function(oController) {
var oToolbar = new Toolbar({
visible: true,
content: [
new SearchField({
liveChange: function() {
oController.onSearch();
},
width: "100%"
})
]
});
var oInfoToolbar = new Toolbar({
content: new Toolbar(this.createId("idInfoToolbar"), {
visible: true,
content: new Text({
text: "Label Text"
})
})
});
var oList = new List(this.createId("idList"), {
mode: "MultiSelect",
includeItemInSelection: true,
infoToolbar: oInfoToolbar
});
var oPage = new Page(this.createId("oPageId"), {
height: "100%",
title: "Page Title",
showHeader: true,
showSubHeader: true,
headerContent: oToolbar,
content: [oList]
});
var app = new sap.m.App();
app.addPage(oPage);
app.placeAt("content");
return app;
}
});
});
//in Controller 
sap.ui.define(["sap/m/StandardListItem", "sap/ui/model/json/JSONModel"], function(StandardListItem, JSONModel) {
"use strict";
var oData = {
"ProductCollection": [{
"titleId": 0,
"Name": "Olayinka Otuniyi",
"ProductId": "001",
"ProductPicUrl": "sap-icon://competitor"
}, {
"titleId": 1,
"Name": "Maria Anders",
"ProductId": "002",
"ProductPicUrl": "sap-icon://badge"
}, {
"titleId": 2,
"Name": "Ana Trujillo",
"ProductId": "003",
"ProductPicUrl": "sap-icon://broken-link"
}, {
"titleId": 3,
"Name": "Thomas Hardy",
"ProductId": "004",
"ProductPicUrl": "sap-icon://create"
}, {
"titleId": 4,
"Name": "Christina Berglund",
"ProductId": "005",
"ProductPicUrl": "sap-icon://pending"
}, {
"titleId": 5,
"Name": "Hanna Moos",
"ProductId": "006",
"ProductPicUrl": "sap-icon://decision"
}, {
"titleId": 6,
"Name": "Martín Sommer",
"ProductId": "007",
"ProductPicUrl": "sap-icon://process"
}, {
"titleId": 7,
"Name": "Laurence Lebihans",
"ProductId": "008",
"ProductPicUrl": "sap-icon://accept"
}, {
"titleId": 8,
"Name": "Elizabeth Lincoln",
"ProductId": "009",
"ProductPicUrl": "sap-icon://alert"
}]
};
return sap.ui.controller("sap.m.sample.ListSelectionSearch.List", {
//		onInit: function() {
//		},		
onAfterRendering: function() {
var oModel = new JSONModel(oData);
this.getView().setModel(oModel, "products");
var oTemplate = new StandardListItem({
title: "{products>Name}",
description: "{products>ProductId}",
icon: "{products>ProductPicUrl}",
iconDensityAware: false,
iconInset: false,
type: "Active"
});
oTemplate.attachPress(this.onSelectionChange, this);
this.getView().byId("idList").bindItems({
path: "/ProductCollection",
template: oTemplate,
model: "products"
});
},
onSearch: function() {
console.log("Searching");
},
onSelectionChange: function() {
console.log("changing Selection");
}
});
});

Answer 2

应该没有那么难：

new sap.m.Page({
showHeader: false,
subHeader: new sap.m.Toolbar({
content: [ // (**)
new sap.m.SearchField({
liveChange: onSearch, // event handler
width: "100%"
})
]
}),
content: [
new sap.m.List({
//...
})
]
});

或者你可以继续编写XML，然后使用API从中创建JS实例：

• sap.ui.xmlfragment
• sap.ui.xmlview

(**) 这可能是最棘手的部分。你怎么知道这应该包装在"内容"属性中？很简单！如果直接在另一个控件中看到一个控件(周围没有任何标记)，则表示内部控件处于父控件的默认聚合中。因此，您需要做的就是检查父控件的默认聚合的名称是什么。在sap.m.工具栏的情况下，它是一个content。

更新：但是，可能很难理解哪个聚合是默认的，因为在我们的文档中我们不显示此信息。我将就此事联系负责团队。作为一种解决方法，可以从源代码中获取此信息，例如 sap.m.Page - 请参阅元数据描述中的defaultAggregation定义。

Answer 3

请参阅下面的示例

视图：

sap.ui.jsview("ResourceRootName.view.ViewName", {
getControllerName: function() {
return "ResourceRootName.view.ViewName";
},
createContent : function(oController) {
this.oList = new sap.m.List({
showUnread: true,
mode: sap.ui.Device.system.phone ? sap.m.ListMode.None : sap.m.ListMode.SingleSelectMaster,
itemPress: [oController.onListSelect, oController]
});
this.page = new sap.m.Page({
title: "{i18n>pageTitle}",
navButtonText: "Home",
showNavButton: true,
navButtonPress: function() {
oController.handleNavBack();
},
subHeader: new sap.m.Bar({
contentMiddle: [
new sap.m.SearchField(oController.createId("searchFieldTasks"), {
width: "100%"
})
]
}),
content: [this.oList]
}); 
return this.page; //Note: if you need to return more than two controls you can do so by using array
}
});

在控制器中，您可以按如下方式绑定列表

控制器：

this.getView().oList.bindAggregation("items", {
path: "/EntityCollectionSet",
template: new sap.m.StandardListItem({
title: "{Title}",
description: "{Description}"
}),
filters: []//If you want to pass any filters
});