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 then automatically launched by eric6.
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, since there are just three widgets, this is going to be simple.
We can set a horizontal layout for the two widgets we have in the form so far. To do this, just select both widgets (using the control 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 now in a layout).



We need to add another widget, an instance of QWebEngineView. Just drag and drop from the widget box. Since version 5.7 (or thereabouts) the formerly used QWebView widget has been deprecated in favor of QWebEngineView, which is the one we are going to use here.
Next, right-click anywhere on the main window (taking care of not right-clicking on another widget) and select 'Layout/lay out vertically' ('lay out in a grid' is also good).
A nice layout can be achieved in different ways, just try yourself.



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 eric6.