Building Basic UIs with Qt Widgets

1. Your Core UI Widget Toolkit

Let's start by visually identifying these components in the Qt Creator environment. When you are in the Design view, these widgets are available in the "Widget Box" on the left-hand side.

2. Building a UI in Qt Creator

The most intuitive way to build an interface is to see it as you go. We'll watch parts of a video that demonstrates how to create a simple calculator UI. This will guide you through adding widgets, arranging them, and—most importantly—giving them unique names so we can reference them in our code.

While the video uses absolute positioning for simplicity, I encourage you to apply what you learned in the last lesson: use layout managers (QHBoxLayout, QVBoxLayout) to arrange your widgets for a responsive design.

A common practice is to give widgets a prefix indicating their type, such as nameLineEdit or okButton. This makes your code much more readable.

3. Interacting with Widgets in C++

Placing widgets is just the first step. To make an application useful, you need to get data from them (like user input in a QLineEdit) and send data to them (like displaying a result in a QLabel).

This is done through member functions. The two most important are:

• text(): Returns the content of the widget as a QString.
• setText(const QString &text): Sets or updates the widget's content.

Let's watch a short, focused video that demonstrates exactly how to use these functions with a QLineEdit.

A Note on Password Fields

A common requirement for QLineEdit is to hide user input for passwords. This is easily achieved by setting a property called echoMode. The same video briefly covers this, showing how to change the echo mode to Password in the Property Editor. This will display asterisks or dots instead of the actual characters typed.

4. Your Turn: Build a "Greeter" Application

Now it's time to put everything together: layouts from the last lesson and the widgets from this one. Your task is to build a simple "Greeter" application.

Here is the goal:

1. The UI should have a label prompting the user, "Enter your name:".
2. Next to it, there should be a QLineEdit for the user to type their name.
3. Below that, a QPushButton with the text "Greet".
4. Finally, a QLabel at the bottom to display the greeting message. Initially, it can be empty.
5. When the user clicks the "Greet" button, the bottom label should update to say "Hello, [Name]!", using the name entered in the QLineEdit.

Steps to Follow:

1. Design the UI:

   • In Qt Creator, open your project's .ui file.
   • Drag one QLabel, one QLineEdit, one QPushButton, and a final QLabel onto the form.
   • Arrange them using QHBoxLayout and QVBoxLayout. A good approach is to put the prompt label and the line edit in a horizontal layout, and then place that horizontal layout, the button, and the result label into a main vertical layout.
   • In the Object Inspector, name your widgets meaningfully:
     • QLineEdit: nameLineEdit
     • QPushButton: greetButton
     • Result QLabel: greetingLabel

2. Connect the Action (A Preview):

   • To make the button do something, we need to connect its clicked() signal. Qt Creator provides a handy shortcut for this.
   • Right-click on your greetButton in the designer and select "Go to slot...".
   • A dialog will appear. Choose the clicked() signal and press OK.
   • Qt Creator will automatically switch to mainwindow.cpp and create an empty function for you, named something like on_greetButton_clicked().

3. Write the Logic:

   • Inside this newly created on_greetButton_clicked() function, add the C++ code to implement the logic. You'll need to include <QString> if it's not already there.

   
   
   
   #include <QString>
   
   // ... inside your MainWindow class implementation ...
   
   void MainWindow::on_greetButton_clicked()
   {
       // 1. Get the text from the QLineEdit
       QString name = ui->nameLineEdit->text();
   
       // 2. Build the greeting string
       QString greeting = "Hello, " + name + "!";
   
       // 3. Set the text on the result QLabel
       ui->greetingLabel->setText(greeting);
   }
   

   The ui-> prefix is how you access the widgets you created in the Qt Designer.

Compile and run your project. You should now have a fully functional, albeit simple, interactive desktop application!

Conclusion

In this lesson, you've added the three most fundamental interactive widgets to your Qt toolkit. You now know how to build a simple form that can take user input and display results.

Key Takeaways:

• The core widgets for simple UIs are QLabel (static text), QLineEdit (user input), and QPushButton (actions).
• It is crucial to give your widgets unique, descriptive names in the Object Inspector (e.g., nameLineEdit) to access them from your C++ code via the ui object.
• You can get and set the text content of these widgets using the text() and setText() methods.
• The "Go to slot..." feature in Qt Creator is a quick way to create a function that responds to a widget's signal, like a button click.

Next Up

The "Go to slot..." feature is convenient, but it's just the tip of the iceberg of Qt's communication system. In our next lesson, we will dive deep into this system by learning to connect a button's 'clicked' signal to a slot that performs an action using the connect() function directly in code. This will give you a full understanding of Signals and Slots, one of the most powerful and defining features of the Qt framework.