Hello World Qt GUI Application

It's time to create a Qt GUI Application, that displays Hello World.

If you want a less cool yet more bare-bones version, see the Hello World Qt Console app.

A little 'warning', this is too trivial.

1. In Qt Creator, create a Qt project by clicking File -> New File or Project, or press Ctrl+N.
   
   
2. Choose Qt4 Gui Application.
   

From Kev's Qt Mobility Development

3. Introduction and project location. Pick a name and location for your new project.
   

From Kev's Qt Mobility Development

4. Select required modules. Choose the Qt modules you want (QtCore and QtGui is always required).
   

From Kev's Qt Mobility Development

5. Class Information. Edit the class information if necessary. Choose if you want the Qt4 UI Designer feature ( Generate form).

From Kev's Qt Mobility Development

6. Project Management. Review the options, there is support for adding to version control if you're using it for the project.

From Kev's Qt Mobility Development

At this point, you'll have a new GUI project with sensible default widgets.

Running this starter project gives you:

From Kev's Qt Mobility Development

Not very functional, but quite impressive. You already got a dockable toolbar that you can drag around! ;-)

In Qt Creator, double-click mainwindow.ui to reveal Form Editor, which is an Qt Creator-integrated version of Qt Designer (a standalone app).

From Kev's Qt Mobility Development

Reminds me of Borland Delphi very much! Oh, the good old days...
To get a Hello World message:

1. Drag a Label from the left widget box under Display Widgets.
   
2. Set its text property to “Hello World”. You can also right click the Label, and click “ Change plain text...”
   
3. Set alignment.Horizontal to AlignHCenter.
   
4. Click the main window, and click the Lay Out Vertically toolbar button (Ctrl+L). This applies the QVBoxLayout and expand the Label to fill the window.
   

This is how the form looks like in Qt's Form Editor:

From Kev's Qt Mobility Development

Preview your form by clicking Tools -> Form editor -> Preview (Ctrl+Alt+R).

From Kev's Qt Mobility Development

Actually my job to demonstrate Hello World is already finished, but... it's too easy, right?

Behind the scenes, Form Editor produces the following XML.

To see the UI code, close the current Form Editor. Then right-click mainwindow.ui, and click Open With -> Plain Text Editor.

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>309</width>
    <height>189</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <layout class="QGridLayout" name="gridLayout">
    <item row="0" column="0">
     <widget class="QLabel" name="label">
      <property name="text">
       <string>Hello World!</string>
      </property>
      <property name="alignment">
       <set>Qt::AlignCenter</set>
      </property>
     </widget>
    </item>
   </layout>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>309</width>
     <height>22</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>true</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

As you see, Form Editor / Qt Designer is very easy to use, and should be enough for most purposes. It also has its quirks, see a post about Fighting Qt Designer grid layout for more complex (and practical) examples.