Welcome to OpenUI5
OpenUI5 is a comprehensive and versatile JavaScript framework that simplifies building complex web applications. With dozens of APIs at your fingertips, OpenUI5 enables developers to create rich and responsive UIs with minimal effort. In this post, we’ll provide an overview of OpenUI5, highlight some of its most useful APIs with code snippets, and demonstrate how to build a simple app using them. Let’s dive in!
Getting Started
To get started with OpenUI5, you need to include its library in your HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenUI5 Sample</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"></script>
</head>
<body>
</body>
</html>
Creating a Simple View
Here’s a simple example to create a view with data binding:
sap.ui.getCore().attachInit(function () {
new sap.m.App({
pages: [
new sap.m.Page({
title: "OpenUI5 Page",
content: [
new sap.m.Button({
text: "Press Me",
press: function () {
sap.m.MessageToast.show("Button Pressed");
}
})
]
})
]
}).placeAt("content");
});
API Examples
Button
Creating a button with a press event:
new sap.m.Button({
text: "Click Me",
press: function () {
alert("Button Clicked");
}
}).placeAt("body");
Message Toast
Show a message toast:
sap.m.MessageToast.show("This is a message!");
Input with Data Binding
Two-way data binding with an input field:
var oModel = new sap.ui.model.json.JSONModel({
value: "Initial Text"
});
var oInput = new sap.m.Input({
value: "{/value}",
valueLiveUpdate: true
});
oInput.setModel(oModel);
oInput.placeAt("body");
Table
Creating a table with rows and columns:
var oTable = new sap.m.Table({
columns: [
new sap.m.Column({
header: new sap.m.Label({text: "Name"})
}),
new sap.m.Column({
header: new sap.m.Label({text: "Age"})
})
]
});
var aData = [
{Name: "John", Age: 30},
{Name: "Doe", Age: 25},
{Name: "Smith", Age: 40}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: aData});
oTable.setModel(oModel);
oTable.bindItems("/modelData", new sap.m.ColumnListItem({
cells: [
new sap.m.Text({text: "{Name}"}),
new sap.m.Text({text: "{Age}"})
]
}));
oTable.placeAt("body");
Example Application
Let’s combine the above elements into a simple app:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OpenUI5 Simple App</title>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_belize"
data-sap-ui-libs="sap.m"></script>
<script>
sap.ui.getCore().attachInit(function () {
var app = new sap.m.App({
pages: [
new sap.m.Page({
title: "OpenUI5 Simple App",
content: [
new sap.m.Button({
text: "Show Message",
press: function () {
sap.m.MessageToast.show("Hello from OpenUI5");
}
}),
new sap.m.Input({
placeholder: "Enter text",
liveChange: function (oEvent) {
sap.m.MessageToast.show("Text changed: " + oEvent.getParameter("value"));
}
}),
new sap.m.Table({
columns: [
new sap.m.Column({
header: new sap.m.Label({text: "Name"})
}),
new sap.m.Column({
header: new sap.m.Label({text: "Age"})
})
],
items: {
path: "/modelData",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({text: "{Name}"}),
new sap.m.Text({text: "{Age}"})
]
})
}
})
]
})
]
});
var aData = [
{Name: "Alice", Age: 28},
{Name: "Bob", Age: 35},
{Name: "Charlie", Age: 45}
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({modelData: aData});
sap.ui.getCore().setModel(oModel);
app.placeAt("content");
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
And there you have it, a simple yet functional OpenUI5 application using various UI elements and data binding. OpenUI5 offers an extensive set of features that can significantly streamline your development process. Experiment with different components and APIs to make the most out of this powerful framework.
Hash: bf44be055fadc7245e8183cb1cf03b92e003577c48bf4deb4ab7e09c357fb75c
