I saw that UI5 offers a 'Code Editor'-Control. So I decided to implement it and try out a few things with it. It's layout is influenced by the SAP system transaction SE80 (IDE).
It implements usage for some basic - already existing (provided by the control itself) - functionality like:
- Syntax Highlighting
- Theming
- Pretty Printing
In addition to that you can save your code snippets into your browser. This is made possible by UI5s own abstracted implementation of the Web Storage API.
It was also the first time for me to implement the ResponsiveSplitter, the Storage utility of UI5 and a few JSON model shenanigans.
You can just clone this repository, run npm install and use the UI5 tooling to locally serve the application in order to debug/learn from it.
Hint: it already uses the livereload-middleware for the UI5 tooling, so changes while serving will trigger an immediate update in the browser.
- Clone the repository
git clone <repository-url>
- Navigate into the cloned repository
cd <repository>
- Install all dependencies
npm install
- Start the application
npm start
- This project has been generated with 💙 and easy-ui5
- Repository Picture