In the new RBD 9.6 release, we have introduced EGL Bootstrap widgets. It will fill the emptiness of responsive design support in EGL RUI together with EGL ionic widgets. EGL Bootstrap widgets are targeted for desktop browser while EGL ionic widgets focus on the mobile app.

Bootstrap is an open source toolkit for developing responsive, mobile-first web application. EGL Bootstrap widgets is based on Bootstrap to bring in responsive design support and modern theme for EGL RUI. It introduces more than 40 new widgets for various usage like data display, layout and navigation. These widgets are all integrated with visual editor for palette, drag and drop and property/event editing. Technical samples are provided for each widget and a gallery sample that puts them all together. We also provide a practical example for accessing database from RUI that is built with EGL Bootstrap widgets. We hope these samples can help the users to easily get started.

Unified usage pattern with EGL RUI widgets

The most important principle of the EGL Bootstrap widgets design is to keep the unified usage pattern with existing EGL RUI widgets. We provide many bootstrap widgets as an alternative of existing RUI widgets like TextField, Gridlayout and DataGrid etc. The alternative widgets will share the similar API as most as possible so that the RUI users will be handy to use them. The bootstrap alternatives usually provide the additional responsive support and better look and feel. It is possible to have RUI widgets working together with Bootstrap widgets. So we enable progressively convert RUI app to responsive app. The first step may be to replace layout widget like GridLayout to BSGridLayout. And then migrate the content widgets to its bootstrap alternatives. These conversion could be as easy as rename the used widget type.

We also provide additional visual editor support for Bootstrap widgets. For example, the cell manipulation action such as add row, delete row etc. in visual editor are provided for BSGridLayout. And for the EGL Data view, drag and drop a record or array now supports to use Bootstrap widgets as the layout and content widgets.

For more detail, please refer to the white paper  and a video to introduce access database with EGL bootstrap widgets.