1: 根据template创建一个Free style的 Fiori application。 https://www.cnblogs.com/liyafei/p/15742879.html
创建两个View和两个controller。提供json文件作为数据源。
2： 给view 添加 table 和column. https://www.cnblogs.com/liyafei/p/15748430.html
View1.xml
<mvc:View
controllerName="hansentestnavigation.controller.View1" //指定controller
xmlns:mvc="sap.ui.core.mvc" //指定使用的 component或者framework, 并给一个别名。
displayBlock="true"
xmlns="sap.m"
>
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<Table class="sapUiSizeCompact" id="table1" includeItemInSelection="true" items="{path: 'DataModel>/Objects'}" mode="MultiSelect"
selectionChange="onselectionChange"> //id指定id, path指定数据源，从哪个datamodel中哪个字段json object. selectionChange 定义一个事件 onselectionchange
<columns> // 指定列。
<Column>
<Label text="Product Name"/>
</Column>
<Column>
<Label text="Supplier"/>
</Column>
<Column>
<Label text="Price"/>
</Column>
<Column>
<Label text="Units Ordered"/>
</Column>
</columns>
<ColumnListItem press="onPress" type="Navigation"> // 指定onPress事件，指定类型为导航。
<Text text="{DataModel>Name}"></Text> 指定从哪个datamodel获取值，DataModel该名字应该和controller 中的datamodel名字相同。
<Text text="{DataModel>Supplier}"></Text>
<Text text="{DataModel>Price}"></Text>
<Text text="{DataModel>Units}"></Text>
</ColumnListItem>
</Table>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
View2.xml
<mvc:View
controllerName="hansentestnavigation.controller.View2" //指定controller2， 如果不指定，该controll将不能在前端页面加载出来。
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m"
>
<Shell id="shell">
<App id="app">
<pages>
<Page id="page2" navButtonPress="onNavBack" showNavButton="true" title="Tableview2"> //指定一个事件 onNavBack
<content>
<Table class="sapUiSizeCompact" id="abc" items="{path: 'navigationModel>/Objects'}"> // 指定model
<columns>
<Column width="11rem">
<Label text="Product Name"/>
</Column>
<Column width="11rem">
<Label text="Supplier"/>
</Column>
<Column hAlign="End" width="6rem">
<Label text="Price"/>
</Column>
<Column hAlign="End" width="15rem">
<Label text="Units Ordered"/>
</Column>
</columns>
<ColumnListItem press="onPress" type="Navigation">
<Text text="{navigationModel>Name}"></Text>
<Text text="{navigationModel>Supplier}"></Text>
<Text text="{navigationModel>Price}"></Text>
<Text text="{navigationModel>Units}"></Text>
</ColumnListItem>
</Table>
</content>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
3： manefist 文件。
{
"_version": "1.32.0",
"sap.app": {
"id": "hansentestnavigation",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "0.0.1"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"dataSources": {
"mainService": {
"uri": "/sap/opu/odata/",
"type": "OData",
"settings": {
"annotations": [],
"localUri": "localService/metadata.xml",
"odataVersion": "4.0"
}
}
},
// 将数据源加载进来。
"dataSources": {
"tableData_alias": { //给一个别名。
"uri": "model/Object.json", //指定json文件路径。
"type": "JSON"
}
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": false,
"dependencies": {
"minUI5Version": "1.97.0",
"libs": {
"sap.ui.core": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "hansentestnavigation.i18n.i18n"
}
},
"": {
"dataSource": "mainService",
"preload": true,
"settings": {
"synchronizationMode": "None",
"operationMode": "Server",
"autoExpandSelect": true,
"earlyRequests": true,
"groupId": "$direct"
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": { // 指定路由的配置
"config": {
"routerClass": "sap.m.routing.Router", //指定路由class
"viewType": "XML",
"async": true,
"viewPath": "hansentestnavigation.view", // view的路径
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [ // 指定有几个route
{
"name": "View1", //该View的名字。
"pattern": "View1", // 对route 路径进行匹配。
"target": "View1", // 指定从下面targets 里面找哪个目标。
"controlAggregation": "pages"
},
{
"pattern": "View2/{selectedobj}",
"name": "View2",
"target": "View2",
"controlAggregation": "pages"
}
],
"targets": { //路由到这里。
"View1": {
"viewName": "View1" // 找具体的View
},
"View2": {
"viewName": "View2"
}
}
},
"rootView": {
"viewName": "hansentestnavigation.view.View1", // 根View， 首次打开project，会出现该View。
"type": "XML",
"async": true,
"id": "View1"
}
}
}
4： component.js 。 该js文件会加载一些component。
sap.ui.define([
"sap/ui/core/UIComponent", // 定义要使用的component。
"sap/ui/Device",
"hansentestnavigation/model/models",
"sap/ui/model/json/JSONModel" //初始化json model
],
function (UIComponent, Device, models) { // 如果方法中要使用上面声明的 component， 需要在function 中传入。
"use strict";
return UIComponent.extend("hansentestnavigation.Component", { // 扩展project component
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize(); // 初始化路由。
// set the device model
this.setModel(models.createDeviceModel(), "device"); // 调用model.js 文件，设置device model.
}
});
}
);
model.js
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function (JSONModel, Device) {
"use strict";
return {
createDeviceModel: function () {
var oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel;
}
};
});
5: View1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller" //使用controller组件
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller) {
"use strict";
return Controller.extend("hansentestnavigation.controller.View1", {
onInit: function () {
var dataModel = this.getOwnerComponent().getModel("tableData");
this.getView().setModel(dataModel, "DataModel");
},
/*this below code for cilck on row the the page will navgate to next View*/
onPress: function(oEvent) {
var spath = oEvent.getSource().getBindingContext("DataModel").getPath();
var selectedPath = JSON.stringify(oEvent.getSource().getBindingContext("DataModel").getProperty(spath));
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("View2", {
"selectedobj": selectedPath
});
},
/*this below code for selected the row data and then navigate to next View */
onselectionChange: function() {
var contexts = this.getView().byId("table1").getSelectedContexts();
var items = contexts.map(function(c) {
return c.getObject();
});
var selectedItems = JSON.stringify(items);
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("View2", {
"selectedobj": selectedItems
});
}
});
});
View2.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/json/JSONModel",
"sap/ui/core/routing/History"
],
/**
* @param {typeof sap.ui.core.mvc.Controller} Controller
*/
function (Controller,JSONModel,History) {
"use strict";
return Controller.extend("hansentestnavigation.controller.View2", {
onInit: function () {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("View2").attachMatched(this._onObjectMatched, this);
},
_onObjectMatched: function(oEvent) {
var selectedArguments = oEvent.getParameter("arguments");
var selectedRecord = JSON.parse(selectedArguments.selectedobj);
var obj = {
"Objects": selectedRecord
};
var navigationobjModel = new JSONModel();
navigationobjModel.setData(obj);
this.getView().setModel(navigationobjModel, "navigationModel");
},
onNavBack: function() {
// window.history.go(-1);
var oHistory = History.getInstance();
var sPreviousHash = oHistory.getPreviousHash();
if (sPreviousHash !== undefined) {
window.history.go(-1);
} else {
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.navTo("View1", true);
}
// var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
// oRouter.navTo("TargetView1");
}
});
});