Adding the main window

We need a main window to be the user interface for the browser. To get such a resource in the project, we have to add a new form (as a .ui file).
But first, we will create a new package to get hold of the user interface stuff.
One way to get this done is to right-click anywhere in the 'sources' tab in the project viewer and select 'New package...'.
We choose 'ui' as the name for the package.



Now we are going to create the .ui file. We move to the 'Forms' tag in the project viewer and right-click on it.
We select 'New form' in the context menu that pops up, select type 'main window' in the dialog that appears and save it in the newly created folder ui. We will name it mainwindow.ui.




Qt designer, the standard Qt tool for designing forms, is launched by eric4.
It is always possible to launch it at will by double-clicking any .ui existing item in the project viewer.
Qt designer shows a empty main window; let's add the three widgets we will need.

First, we add a QLineEdit widget (dragging it from the widget box and dropping it onto the main window). We will change the default name to something meaningful like 'txtUrl'.
Second, we add a QPushButton, dropping it at right side of the txtUrl widget. We change its name to 'btnNavigate'.

Adding widgets to a Qt form is pretty straightforward. The only thing I've found somehow difficult to understand is how to organize the widgets in layouts.
I think that the best thing to do to get the hang on layouts is to invest some time doing some practice.
For this tutorial, though, for there are just three widgets, this is going to be simple.
At this point, we will set a horizontal layout for the two widgets we have in the form so far. To do this, just select both widgets (using the shift key and clicking one after another) and then right click on one of them. Then, select 'Lay out/Lay out horizontally'.
The two widgets will then be surrounded by a red line (meaning that they are in a layout).



We need to add another widget, a QWebView. Just drag and drop from the widget box.
Next, right-click anywhere on the main window (taking care of not right-clicking on another widget) and select 'Layout/lay out in a grid'.



We should see by now all the widgets nicely located in the main window, filling it with no left space and with the ability of resizing themselves as the main window is resized.
This is the nice thing with the layouts. You don't have to worry about the distribution of the items when the size of the main window changes.

Finally, we save changes, exit Qt designer and go back to eric4.