"More code, less talk"
git clone https://github.com/sergiykh/you-do-not-know-openui5.git
cd you-do-not-know-openui5
git checkout tags/bootstrapping
├── .babelrc => (New)
├── .editorconfig
├── .gitignore
├── LICENSE.md
├── README.md
├── gulpfile.js => (Changed)
├── package.json => (Changed)
├── proxies.js
├── src
├── app => (New)
├── pages => (New)
├── CustomerDetail.page.js => (New)
├── Customer.page.js => (New)
├── Login.page.js => (New)
├── app.config.js => (Changed)
├── app.startup.js => (Changed)
└── index.html
mkdir -p src/app/pages
yarn add -D @types/openui5 babel-core babel-preset-ui5 gulp-babel merge-stream gulp-sourcemaps gulp-replace
{
"presets": [
"ui5"
]
}
const gulp = require('gulp');
const browserSync = require('browser-sync');
// require babel gulp plugin, merge stream plugin and sourcemaps gulp plugin
const babel = require('gulp-babel');
const merge = require('merge-stream');
const sourcemaps = require('gulp-sourcemaps');
const replace = require('gulp-replace');
...
// stream for all files except .js
const copy = () => {
return gulp.src([
'src/**/*',
'!src/**/*js'
]);
};
// stream for all .js files
const copyJs = () => {
let b = babel()
.on("error", (e) => {
console.log(e.stack);
b.end();
});
return gulp.src([
'src/**/*js'
])
.pipe(sourcemaps.init())
.pipe(b)
.pipe(replace('src.', ''))
.pipe(replace('src/', ''))
.pipe(sourcemaps.write('.'))
};
// merge two streams and copy content of src folder to root path in-memory
gulp.task('app:build', () => {
return merge(copy(), copyJs())
.pipe(gulpMem.dest('/'));
});
...
...
theme: "sap_belize",
resourceRoots: {
"app": "app"
},
preload: "sync",
...
let app;
// Now we can use arrow functions in our code (feature of ES6)
sap.ui.getCore().attachInit(() => {
sap.ui.require([
"app/pages/Login.page",
"app/pages/Customers.page",
"app/pages/CustomerDetail.page"
], (Login, Customers, CustomerDetail) => {
app = new sap.m.App({
initialPage: "login"
});
app.addPage(Login);
app.addPage(Customers);
app.addPage(CustomerDetail);
app.placeAt("content");
});
});
// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";
import Input from "sap/m/Input";
import Label from "sap/m/Label";
import Button from "sap/m/Button";
// Create object and export as module to use in future
export default new Page("login", {
title: "Login",
showNavButton: false,
content: [
new Label({
text: "Username"
}),
new Input({
placeholder: "type here"
}),
new Label({
text: "Password"
}),
new Input({
placeholder: "type here"
}),
new Button({
text : "Login",
press : () => {
app.to("customers");
}
})
]
})
// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";
import TileContainer from "sap/m/TileContainer";
import StandardTile from "sap/m/StandardTile";
const customer = "Customer";
// Create object and export as module to use in future
export default new Page("customers", {
title: "Customers",
showNavButton: true,
navButtonPress : function () {
app.back();
},
content: [
new TileContainer({
tiles: [
new StandardTile({
icon: "sap-icon://customer",
// Now we can use string templates (feature if ES6)
title : `${customer} 1`,
info : "Active",
press: () => {
app.to("customerDetail")
}
}),
new StandardTile({
icon: "sap-icon://customer",
title : `${customer} 2`,
info : "Not Active",
press: () => {
app.to("customerDetail")
}
})
]
})
]
})
// Now we can use import/export modules (feature of ES6)
// Import openui5 modules
import Page from "sap/m/Page";
import MessageToast from "sap/m/MessageToast";
import Input from "sap/m/Input";
import Label from "sap/m/Label";
import Button from "sap/m/Button";
// Create object and export as module to use in future
export default new Page("customerDetail", {
title: "Customer Detail",
showNavButton: true,
navButtonPress : function () {
app.back();
},
content: [
new Label({
text: "Username"
}),
new Input({
value: "Awesome Username"
}),
new Label({
text: "Email"
}),
new Input({
value: "Awesome@Email.com"
}),
new Button({
text : "Print Details",
press : () => {
MessageToast.show("Customer's Detail Printed");
}
})
]
})
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 |
---|---|
11 | |
9 | |
7 | |
6 | |
4 | |
4 | |
3 | |
3 | |
3 | |
3 |