RBD provides support for widgets, reducing programmers’ effort in coding. Programmers can drag and drop the required widgets from the palette, automatically producing its related code in the source tab. We can change the property of any widget programmatically in the source tab, and the corresponding change will be reflected on the User Interface Preview Tab.
This blog describes the procedure to select bootstrap widgets programmatically.
Bootstrap Widgets:
- Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing a responsive and mobile-friendly website.
- It is a front-end framework used for easier and faster web development.
- It includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, layouts, etc.
Steps to Create Rich-UI Project with Bootstrap Widgets
Step 1: Creating a Rich-UI Project
Follow the below steps to create a Rich-UI Project:
1. Navigate to File->New->EGL project.
2. EGL Project window will appear.
3. Enter the Project name.
4. Select the RICH UI Project option and click Next.
5. EGL Rich UI Project window will appear.
6. Select the Bootstrap widgets v1.0.0 (Bootstrap v4.3) checkbox.
7. Click Next and then Finish.
The Rich-UI Project and all the necessary widgets have been successfully created, as shown below.
Step 2: Creating a Rich-UI handler
Follow the below steps to create a Rich-UI handler:
1. Go to Project Explorer.
2. Under the Project Explorer, navigate to simpleRui->EGLSource.
3. Right-click the EGLSource.
4. Go to New->Rich UI Handler.
5. New EGL Rich UI Handler window will appear
6. Enter the Package name and EGL source file name.
7. Click Finish.
Rich-Ui handler has been successfully created as shown below.
Step 3: Drag and drop Bootstrap widgets into the Rich-UI handler
Open the handler and then drag and drop the bootstrap Widgets (switch, checkbox, radio group) from the Palette to the handler file.
Follow the below steps to drag and drop a Rich-UI handler:
1. Under the Project Explorer, navigate to simpleRui->EGLSource.
2. Expand EGLSource.
3. Go to pack->handler1->Design tab.
Note: Refresh the Palette and Design tabs if they are not loaded.
4. Right-click the required widget (e.g., switch) in the Outline.
5. Go to Properties.
In the properties tab, the selected checkbox is selected by default, and the corresponding UI widget (e.g., switch) widget (Switch) should be enabled as shown below.
Step-4: Modifying Widget Properties Programmatically
To modify the property of a widget programmatically, follow the below steps:
1. Go to the Source tab.
2. Change attribute “selected=false” and save.
3. Go to the preview tab.
In the preview tab, Programmatic changes will be reflected in the UI as shown below(e.g., switch mode selection got cleared).
Here, we can observe that the selected check box was cleared when we changed the switch status (selected =false) in a programmatic way.
Properties of the Rich-UI handler are successfully changed in a programmatic way. In RBD, with these bootstrap widget libraries, users can easily design complex webpages, reducing human errors in writing complex logic to design the webpage.
Lenka Suresh
QA Engineer – RBD