git clone https://github.com/sergiykh/you-do-not-know-openui5.git
cd you-do-not-know-openui5
git checkout tags/app-as-component
├── .babelrc
├── .eslintrc (new)
├── .editorconfig
├── .gitignore
├── LICENSE.md
├── README.md
├── gulpfile.js
├── package.json
├── proxies.js
├── src
├── app
├── controllers
| ├── CreateCustomer.controller.js => (New)
| ├── CustomerDetail.controller.js => (New)
| ├── Customer.controller.js => (New)
| ├── Login.controller.js => (New)
├── views
| ├── CreateCustomer.view.html => (New)
| ├── CustomerDetail.view.xml => (New)
| ├── Customer.view.json => (New)
| ├── Login.view.js => (New)
├── pages
| ├── CreateCustomer.page.js => (New)
| ├── CustomerDetail.page.js => (Changed)
| ├── Customer.page.js => (Changed)
| ├── Login.page.js => (Changed)
├── Component.js => (Chaged)
├── manifest.json
├── app.config.js
├── app.startup.js
└── index.html
export default sap.ui.controller("app.controllers.Login", {
navToCustomers() {
app.to("customers");
}
})
export default sap.ui.controller("app.controllers.Customers", {
navToCustomerDetail() {
app.to("customerDetail");
}
})
import MessageToast from "sap/m/MessageToast";
export default sap.ui.controller("app.controllers.CustomerDetail", {
printDetails() {
MessageToast.show("Customer's Detail Printed");
}
})
export default sap.ui.controller("app.controllers.CreateCustomer", {
navToCustomerDetail() {
app.to("customerDetail");
}
})
import Input from "sap/m/Input";
import Label from "sap/m/Label";
import Button from "sap/m/Button";
export default sap.ui.jsview("app.views.Login", {
getControllerName: function() {
return "app.controllers.Login";
},
createContent: function(oController) {
return [
new Label({
text: "Username"
}),
new Input({
placeholder: "type here"
}),
new Label({
text: "Password"
}),
new Input({
placeholder: "type here"
}),
new Button({
text : "Login",
press : [oController.navToCustomers, oController]
})
]
}
})
{
"Type":"sap.ui.core.mvc.JSONView",
"controllerName":"app.controllers.Customers",
"content": {
"Type": "sap.m.ScrollContainer",
"content": [
{
"Type": "sap.m.StandardTile",
"icon": "sap-icon://customer",
"title": "Customer 1",
"info": "Active",
"press": "navToCustomerDetail"
},
{
"Type": "sap.m.StandardTile",
"icon": "sap-icon://customer",
"title": "Customer 2",
"info": "Not Active",
"press": "navToCustomerDetail"
}
]
}
}
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
controllerName="app.controllers.CustomerDetail">
<Label
text="Username"/>
<Input
value="Awesome Username"/>
<Label
text="Email"/>
<Input
value="Awesome@Email.com"/>
<Button
text="Print Details"
press="printDetails"/>
</mvc:View>
<template data-controller-name="app.controllers.CreateCustomer">
<div data-sap-ui-type="sap.m.Label" data-text="Name"></div>
<div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
<div data-sap-ui-type="sap.m.Label" data-text="Surname"></div>
<div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
<div data-sap-ui-type="sap.m.Label" data-text="Password"></div>
<div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
<div data-sap-ui-type="sap.m.Label" data-text="Repeat Password"></div>
<div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div>
<div data-sap-ui-type="sap.m.Button" data-text="Save and Go" data-press="navToCustomerDetail"></div>
</template>
// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";
// Create object and export as module to use in future
export default new Page("login", {
title: "Login",
showNavButton: false,
// Now content of Page is JSView
// We also can use other factory function instead of sap.ui.view()
// content: sap.ui.jsview("login-view", "app.views.Login")
content: sap.ui.view({
id:"login-view",
type:sap.ui.core.mvc.ViewType.JS,
viewName:"app.views.Login"
})
})
// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";
// Create object and export as module to use in future
export default new Page("customers", {
title: "Customers",
showNavButton: true,
navButtonPress : function () {
app.back();
},
// Now content of Page is JSONView
// We also can use other factory function instead of sap.ui.view()
// content: sap.ui.jsonview("customers-view", "app.views.Customers")
content: sap.ui.view({
id:"customers-view",
type:sap.ui.core.mvc.ViewType.JSON,
viewName:"app.views.Customers"
})
})
// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";
// Create object and export as module to use in future
export default new Page("customerDetail", {
title: "Customer Detail",
showNavButton: true,
navButtonPress : function () {
app.back();
},
// Now content of Page is XMLView
// We also can use other factory function instead of sap.ui.view()
// content: sap.ui.xmlview("customer-detail-view", "app.views.CustomerDetail")
content: sap.ui.view({
id:"customer-detail-view",
type:sap.ui.core.mvc.ViewType.XML,
viewName:"app.views.CustomerDetail"
})
})
// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";
// Create object and export as module to use in future
export default new Page("create-customer", {
title: "Create Customer",
showNavButton: true,
navButtonPress : function () {
app.back();
},
// Now content of Page is HTMLView
// We also can use other factory function instead of sap.ui.view()
// content: sap.ui.htmlview("create-customer-view", "app.views.CreateCustomer")
content: sap.ui.view({
id:"create-customer-view",
type:sap.ui.core.mvc.ViewType.HTML,
viewName:"app.views.CreateCustomer"
})
})
gulp
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
6 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |