
$ mkdir ui5-webcomponents-starter
$ cd ui5-webcomponents-starter
$ npm init -y
src/index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ui5-button>Hello World</ui5-button><br><br>
<ui5-textarea placeholder="Type some text" max-length="8" show-exceeded-text></ui5-textarea><br><br>
<ui5-datepicker style="width: 180px"></ui5-datepicker><br><br>
<script src="./main.js"></script>
</body>
</html>
main.js
which contains our application with the following content:src/main.js
import "@ui5/webcomponents/dist/Button";
import "@ui5/webcomponents/dist/TextArea";
import "@ui5/webcomponents/dist/DatePicker";
To get the code of UI5 Web Components included in our project, we add ES6 Module import statements as described in the documentation of each component.
$ npm install @ui5/webcomponents --save
node_modules
folder which will be necessary for the next step.By far the easiest way to start a development server is using the zero-configuration bundler Parcel.
You can install parcel globally (you only need to do this once).
$ npm install -g parcel
Then simply run parcel by pointing it to HTML file and voilà - open the URL shown in the output to see your first app running.
$ parcel src/index.html
Server running at http:// localhost:1234
Built in 3.84s.
What happens under the hood is that parcel finds the main.js
file included from our index.html
, then follows the import statements it finds there and looks up the actual code of the UI5 web components from the node_modules
folder. Then a single JS bundle is created (similar to a openui5 CDN hosted bundle) and a static web server is started so this dynamically generated bundle is served to the browser locally.
And that's it. You can now import any UI5 web component like the <ui5-input>
by following the instructions on its documentation page: ui5-input sample and API documentation. Just add the import inside src/main.js
and use it either declaratively in index.html
or programatically via the DOM APIs inside src/main.js
. What is cool about using Parcel as a development server, is that it watches the source files for changes, automatically recreates the bundle and reloads the page on any change. You don't event need to hit refresh in the browser.
All UI5 web components implement the standard themes supported by SAP products. The default theme is Fiori 3 (technical name sap_fiori_3), but you can also try out Belize and High Contrast Black by using a URL parameter:
Note: URLs work only if you are following the examples locally!
Belize: http://localhost:1234?sap-ui-theme=sap_belize
High Contrast Black: http://localhost:1234?sap-ui-theme=sap_belize_hcb
Note: The application is responsible for setting the background color of the document for HCB, so it can look as in the image above.
Next up, as part of the enterprise readiness of the web components, there is full support for right to left languages. You can try it out either by parameter, or automatically for languages that are RTL. Go ahead and open the datepicker in RTL mode:
http://localhost:1234/?sap-ui-rtl=true
Or try out Hebrew to see RTL being derived from the language:
http://localhost:1234/?sap-ui-language=he
Finally, there is a global configuration setting that makes the components appear more compact. This is good for desktop based applications that contain a lot of data on the screen, vs the default cozy appearance which is suitable for both mobile and desktop.
http://localhost:1234/?sap-ui-compactSize=true
In a future blog post, we will explore how to create a production-ready bundle out of this starter project.
So stay tuned and happy coding. Don't forget to check out the other available web components in the playground. Also give the project a star on github if you'd like to show your appreciation for our work so far. Feel free to open an issue on github for any problems, suggestions or improvements you might want to see.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
14 | |
12 | |
12 | |
9 | |
7 | |
7 | |
7 | |
6 | |
5 | |
5 |