Building the image-filter application

We can proceed to build the UI of the application. The idea is to open a picture from the filesystem and apply to it the various filters we developed in the filter-designer-plugin project. If you want to keep the result, you can save the resulting image.

We will start by designing the UI. Modify MainWindow.ui to look like this:

Here is the Object Inspector content to help you build this layout:

There are three elements of this UI:

• The menuFile element, which contains three possible actions: actionOpenPicture, actionExit, and actionSaveAs. You can see the details of these actions in the Action Editor window.

• The pictureLabel element, which will display the loaded picture in the empty top part.

• The filtersLayout element, which contains the three instances of our FilterWidget class in the bottom part.

As you add a FilterWidget class in filtersLayout, you can see that you can customize the title and the filterType in the Property Editor window. The preview will...