WebEngine Quick Nano Browser#
A web browser implemented using the WebEngineView QML type.
Quick Nano Browser demonstrates how to use the Qt WebEngine QML types to develop a small web browser application that consists of a browser window with a title bar, toolbar, tab view, and status bar. The web content is loaded in a web engine view within the tab view. If certificate errors occur, users are prompted for action in a message dialog. The status bar pops up to display the URL of a hovered link.
Running the Example#
To run the example from Qt Creator , open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.
Creating the Main Browser Window#
When the browser main window is loaded, it creates an empty tab using the default profile. Each tab is a web engine view that fills the main window.
We create the main window in the BrowserWindow.qml file using the ApplicationWindow type:
We use the TabBar Qt Quick control to create a tab bar anchored to the top of the window, and create a new, empty tab:
The tab contains a web engine view that loads web content:
We use the Action type to create new tabs:
Handling Certificate Errors#
If the certificate of the site being loaded triggers a certificate error, we call the
defer() QML method to pause the URL request and wait for user input:
We use the Dialog type to prompt users to continue or cancel the loading of the web page. If users select Yes, we call the
acceptCertificate() method to continue loading content from the URL. If users select No, we call the
rejectCertificate() method to reject the request and stop loading content from the URL:
Entering and Leaving Fullscreen Mode#
We create a menu item for allowing fullscreen mode in a settings menu that we place on the tool bar. Also, we create an action for leaving fullscreen mode by using a keyboard shortcut. We call the
accept() method to accept the fullscreen request. The methdod sets the isFullScreen property to be equal to the toggleOn property.
When entering fullscreen mode, we display a notification using the FullScreenNotification custom type that we create in FullScreenNotification.qml.
We use the Action type in the settings menu to create a shortcut for leaving fullscreen mode by pressing the escape key:
Files and Attributions#
The example uses icons from the Tango Icon Library:
Tango Icon Library