Create a program for responsive screen
It is very simple to create a responsive screen using Javra IDE. While creating a new program you may select a fluid container, and check the Responsive property. Here is how it is done.
- Open a new Program
- Select the check box Responsive
- Set the container type to Fluid. When a container type is set to fluid, it means the container may be resizable. The widgets will thereby re align or resize itself based on the size of the container
A program of type Fluid will be generated. In the Tab Program check the checkbox for Responsive, if it is not checked already. Refer the Image below
Next, on the Screen Editor, in the Widgets bar, click the arrow on the top right, to access the widgets for Responsive screen. Refer the image below
- In the widgets bar of the Responsive screen, you will be able to access a list of widgets like Container, coloumn etc. here is a list of those widgets with a short descriptiopn on each.
| Icon | Description | Contains | ||
|---|---|---|---|---|
 |
 |
 |
 |
 |
These widgets can be brought to the screen editor using drag and drop methods.
- Now on the Program Drag and Drop a Container Widget. A form can have only one main container
- Next in this container, drag and drop a Row, you will see a pop up for Grid View
- In the Grid-View pop up, it is possible to fill in the name or number for the Row as required.
- Within the Row, you may now drag and drop the Coloumn widget. A Row can be dragged in empty container, but a column cannot. A column has to go within the Row as a rule of Javra IDE
- While draging n dropping the coloumn widget you will come across the pop-up titled Grid-Col
- In the Grid –col it is possible to assign a name and size to the coloumn as seen in the image above here it should be observed that a maximum of 12 coloumns can be accomodated in a row, if there are 12 different coloums with size 1. Like wise if the size of a coloumn is 6 each, then only 2 coloumns can be acomodated by a row and so on.
- Alternatively to adjust the size of columns, one can do it from the right panel tab widgets>section Boot strap Class
- Toggle Grid lines available in the Navigation bar and represented with icon will help to view dotted Grid line for designing purposes
- Now we can drag and Drop a level-Wrapper in the Coloumn widget, as shown below.
- Here you may be prompted by WIDLAB- WRAPPER to fill in a widget name.
- Next from the General widget bar, we drag and drop a Text Box inside the Level – Wrapper
- We then fill in the Widget Name in the above Text Box pop-up and select OK, here we have named it as txt1 for demonstration purposes.
- Now in the right panel>tab language we may save the Description that must appear next to the Text box . Refer the Image below
- We save the change made by clicking on the Save botton .
- Now you may execute the program by clicking on the run button.
- Here is our output for the first Responsive program.
- By adding a few more widgets we have created an elaborate program.
- Now if we try to resize the browser window of the executed program, we may observe that all the widgets and buttons in the toolbar will get re-aligned to the new window size. Refer the image Below.
