|  | Home · Examples

# Simple UI Example

Code:

- SimpleUIExample.java

The Simple UI Example shows how user interface (`.jui`) files created with Qt Designer can be used to implement user interfaces for applications.
The example's main window shows a text browser and an Open Dialog button that can be used to access a dialog with input fields. When these fields have been completed, or the dialog canceled, the resulting input is placed in the text browser.

## SimpleUIExample Class Implementation

The `SimpleUIExample` class is derived from QMainWindow, and provides a user interface that is implemented by an instance of the `Ui_SimpleUIExampleMainWindow` class:

    public class SimpleUIExample extends QMainWindow {

        public static void main(String[] args) {
            QApplication.initialize(args);
            SimpleUIExample mainw = new SimpleUIExample();
            mainw.show();
            QApplication.exec();
        }

        Ui_SimpleUIExampleMainWindow mainWindowUi = new Ui_SimpleUIExampleMainWindow();

The instance of the user interface class is implemented as a member of the `SimpleUIExample` class.

This user interface class is generated from a user interface file when the example is built, and provides a `setupUi()` method that we use in the `SimpleUIExample` constructor to set up the user interface:

        public SimpleUIExample() {
            // Place what you made in Designer onto the main window.
            mainWindowUi.setupUi(this);
            setWindowIcon(new QIcon("classpath:com/trolltech/images/qt-logo.png"));

            // Connect the OpenDialog button to the showDialog method.
            mainWindowUi.pushButton_OpenDialog.clicked.connect(this, "showDialog()");
        }

We also set the window's icon, and connect a push button defined in the user interface to the `showDialog()` slot in this class:

        private void showDialog() {
            // Make the dialog.
            Ui_SimpleUIExample dialogUi = new Ui_SimpleUIExample();
            QDialog dialog = new QDialog(this);
            dialogUi.setupUi(dialog);

The dialog itself uses a user interface class generated from a `.jui` file, which we set up in a similar way to before. Here, we call the `Ui_SimpleUIExample` instance's `setupUi()` method on the newly-constructed QDialog instance.

Once set up, the dialog is executed in the normal way:

            String result = "";
            if (dialog.exec() == QDialog.DialogCode.Accepted.value()) {
                result += "Name: " + dialogUi.lineEdit_Name.text() + "\n";
                result += "E-Mail: " + dialogUi.lineEdit_Email.text() + "\n";
                // Get rest of dialog information here

            } else {
                result = "Cancelled by user.";
            }

            mainWindowUi.textBrowser.setText(result);

        }

    }

If the user accepts the dialog, we read the contents of the input widgets it contains, and write the result to the main window's text browser widget. If the user cancels the dialog, the text "Cancelled by user." is written to the text browser.

## The main() Function

The `main()` method is defined as part of the `SimpleUIExample` class. It constructs the necessary QApplication instance, constructs and shows an instance of the `SimpleUIExample` class, and executes the application's event loop:

        public static void main(String[] args) {
            QApplication.initialize(args);
            SimpleUIExample mainw = new SimpleUIExample();
            mainw.show();
            QApplication.exec();
        }

The example exits when the event loop has finished running, typically when the user closes the main window.