CSCI 102

CSCI 102 

Graphical User Interface Applications in Qt 

Mark Redekopp 

Michael Crowley

GUI Applications 

‣ Are quite different from command-line applications 

– Users have far more control over what happens next 

– Our code must be “ready” to handle what the user wants 

to do next 

• Execute a menu 

• Button gets clicked 

• Text typed into a text field 

• And so on 

‣ This makes GUI applications Event Based 

– An event is started by something with the hardware: keyboard, 

mouse, etc. 

‣ And complex in how things are “laid out”. We have 

menus, buttons, text fields, lists, combo boxes, etc. 

© Copyright 2013 Brent Nash & Mark Redekopp, All Rights Reserved 

2

GUI and Qt 

‣ To ease the pain of laying out a nice looking GUI, 

Qt has a very handy class called QMainWindow. It 

contains: 

– A place for menus 

– A tool bar 

– A status bar 

– 5 locations for more complex widgets 


3

QMainWindow Layout 


4

MenuBar in QMainWindow 

‣ A QMenuBar already exists in QMainWindow. You 

don’t make one. 

‣ To get a reference to it (from a class that inherits 

QMainWindow, just call the menuBar() method. 

– QMenuBar *mb = menuBar(); 

‣ You add QMenu objects to the menu bar. They 

are laid out from left to right. 

‣ You add QAction objects to menus. They are laid 

out from top to bottom. 

‣ You use the connect() method to connect a 

QAction to a method to handle the action for when 

the menu item is clicked on with the mouse. 


5

Setting Up Menus 

‣ The code below gets the QMenuBar object from a class 

that inherits from QMainWindow 

‣ It creates one menu – a ‘file’ menu 

‣ It adds one action to that menu – an ‘exit’ action 

‣ It connect the exit action to the slot function exitFunction(). 

We must implement this function. 

‣ For each action in a menu, you repeat the last 3 lines. 

QMenuBar *mb = menuBar(); 

fileMenu = new QMenu("File“, this); 

mb->addMenu(fileMenu); 

QAction *exitAction = new QAction( "Exit", this ); 

fileMenu->addAction( exitAction ); 

connect(exitAction, SIGNAL(triggered()), this, SLOT(exitFunction())); 


6

Toolbars with QMainWindow 

‣ Unlike the menu bar section of a QMainWindow, Qt 

does not automatically make a QToolBar object. 

‣ Tool bars are essentially a place for a set of buttons 

‣ They are laid out horizontally. 

‣ Because tool bars are meant to be a place for 

buttons, you don’t have to create button objects. 

You create QAction objects directly and add them to 

the toolbar. 

‣ It’s like the menu bar, but you don’t have to make 

QMenu objects. 


7

Good GUI Program Organization 

‣ Up to 80% of code in a GUI program is just for 

creation of GUI objects, laying them out, and 

getting them displayed so they look nice. 

‣ For each UI component, you must create it, add it 

to a layout, possibly add an action, and connect 

the action to a method. 

‣ That’s up to 4 lines of code for a single UI 

component – like a button. 

‣ In addition, different parts of our application screen 

need to be laid out differently – some horizontally, 

some vertically, etc. 


8

Good GUI Program Organization 

‣ The best way to build any GUI application, is to 

have each different part of the UI window be a 

separate class. 

‣ Each class has its own layout, it also handles any 

signals/slots that it contains. 

‣ It has a pointer to the class that created it so it can 

pass responsibility for some tasks to the “boss” 

class. 


9

Proper Toolbar with Qt 

‣ Create a new class that inherits from QToolBar 

‣ Put your actions in this class 

‣ Put the connect statements for each action in this 

class 

‣ Put the methods for each connect statement in 

this class 

‣ For PA4, you need 3 buttons – start game, quit 

game, run A*. That can be 3 QAction objects with 

3 connect statements, and 3 methods for handling 

the actions. 


10

QToolBar with QMainWindow 

‣ In the class that inherits from QToolBar 

– Create one QAction object for each “button” 

– Add each QAction to this class with addAction 

– Have one connect statement for each QAction 

QAction *startGameAction = new QAction( "Start Game", this ); 

addAction( startGameAction ); 

connect( startGameAction, SIGNAL( triggered() ), 

this, SLOT( startGame() ))); 


11

Getting Started on PA4 

‣ If you haven’t started. Start with the code we gave 

you for lab 9. 

– Change MainWindow class to another class name. 

Have it inherit from QGraphicsView, not QWidget 

‣ Create a new MainWindow class that inherits from 

QMainWindow 

‣ Create an instance of your QGraphicsView class 

in the MainWindow constructor and put it into the 

Central Widget with the setCentralWidget method 

‣ Compile and run your code. You should see the 

bouncing rectangle in the middle of the window. 

You may have to resize the window to see it. 


12

PA4 Step 3 

‣ Create a new class that inherits from QToolBar 

‣ Create the 3 actions that you need and connect each of 

them to a method to handle the action 


13

QMainWindow Central Widget 

‣ This is to be the main screen in a Qt GUI application 

‣ For PA4, this is going to be your ‘graphics’ window, 

where your puzzle game will be displayed and users 

will ‘play’ it. 


14

QDockWidgets 

‣ In the QMainWindow layout scheme, there are 4 

areas that immediately surround the Central 

Widget area. These are QDockWidgets. 

‣ QDockWidgets must be assigned to one of the 

four locations 

– Qt::TopDockWidgetArea, Qt::BottomDockWidgetArea, 

Qt::LeftDockWidgetArea, Qt::RightDockWidgetArea 

‣ QDockWidgets have their own layout, that you 

cannot change. You must create a separate class 

that inherits from QWidget that you add to a 

QDockWidget object to be able to lay out your UI 

components in the way you want. 


15

PA4 Example - QLineEdits 

‣ In PA4, you must have three text fields to replace 

the three command line arguments from PA3. The 

QLineEdit class is handy for single-line user input. 

‣ QLineEdit text fields need a prompt to tell the user 

what the text field is for. You cannot assume the 

user knows what a given text field is for 

‣ Qt provides a very nice layout for QLineEdit 

objects - QFormLayout 


16

Using QFormLayout 

‣ Like any other “screen” you will want to create a 

new class that inherits from QWidget 

‣ In the constructor, create a QFormLayout object (it 

needs to be an instance variable of the class) 

‣ Create each of the QLineEdit objects 

‣ For each “row” you use the addRow method of the 

layout 


17

Show me the Code! 

layout = new QFormLayout(); 

setLayout( layout ); 

sizeEdit = new QLineEdit(); 

startMovesEdit = new QLineEdit(); 

randomSeedEdit = new QLineEdit(); 

layout->addRow( “Board Size:", sizeEdit ); 

layout->addRow( “Starting Moves:"), startMovesEdit ); 

layout->addRow( “Random Seed Value:"), randomSeedEdit ); 


18

Adding my QWidget to the Dock 

‣ The last step is to create an instance of our new 

class and add it to the QDockWidget that we want. 

‣ In the example below, this variable is uiWindow. 

‣ We do this in our class that inherits from 

QMainWindow 

‣ The setFeatures method turns off the user’s ability 

to close our dock widget, or make it a separate 

window. 

QDockWidget *qdw = new QDockWidget(); 

qdw->setWidget( uiWindow ); 

addDockWidget(Qt::LeftDockWidgetArea, qdw ); 

qdw->setFeatures(QDockWidget::NoDockWidgetFeatures); 


19

PA4 Step 1 – From Lab 9 

‣ Rename MainWindow from Lab 9 to a new class 

that inherits from QGraphicsView – instead of 

QWidget. Do not create a QGraphicsView in this 

class – since it is one. 

‣ Create an instance of this class in your new 

MainWindow class that inherits from 

QMainWindow 

‣ Add this graphic window object to the Central 

Widget area in your new MainWindow class with 

the setCentralWidget method 


20

PA4 Step 2 

‣ Replace the bouncing rectangle code in your graphic 

window class with code to create a solved puzzle 

– Don’t worry about a 9-tile, or a 16-tile puzzle, yet. Just ensure you 

can create a puzzle and have it displayed in the central widget 

‣ Integrate the code to scramble the puzzle from PA3. This 

requires moving the tiles to the proper locations 

– Compile and run the code. Make sure you graphically moved the 

tiles correctly. 

‣ Now you are ready to add the mousePressEvent method to 

your GUITile class so that the user can play the game 

using the mouse 


21

PA4 Step 2 Continued 

‣ The mousePressEvent method is in your GUITile 

class. 

‣ The GUITile class knows only about a single 

GUITile 

‣ It doesn’t know if a tile can be moved, or not 

‣ The responsibility for “knowing” if a move is valid 

is in your graphic window class 

‣ This means the GUITile class must pass the 

responsibility for handling a mouse click, on a 

GUITile, to the graphic window class 


22

PA4 Step 2 Continued 

‣ For the mousePressEvent method in the GUITile 

class to call a method of the graphic window class, 

it must have a reference to that class 

‣ Pass the reference to graphic window to the 

constructor of GUITile 

‣ Create an instance variable pointer in GUITile to 

the graphic window object. Set the variable in the 

GUITile constructor 


23

Show me the Code! 

‣ Let’s say my graphic window class is called 

GraphicWindow. My variable in GUITile is called 

gWindow 

‣ In this class, I have a method moveTile that knows 

how/when to move a tile. This must be called from 

the mousePressEvent method in GUITile to get a 

tile moved, or not. 

void GUITile::mousePressEvent ( QGraphicsSceneMouseEvent* event ) { 

} 

gWindow->moveTile( this ); 


24

PA4 – And Beyond 

‣ Create one class at a time for some of the UI 

components. Compile and test each class as you 

create them. 

‣ Consider the following class organization: 

– One class for the 3 QLineEdit objects – use 

QFormLayout 

– One class for the QToolBar – the 3 “buttons” you need 

– One class for the 2 QRadioButton objects – use 

QHBoxLayout, or QVBoxLayout, depending on which 

dock widget you use 

– One class for the QListWidget (holds A* results) 


25

OTHER NOTES 


26

Layouts 

‣ We've seen different layouts 

– QVBoxLayout 

– QHBoxLayout 

– QFormLayout 

‣ Each widget (or derived class) can have only one Layout 

– Set by calling: widget->setLayout(pointer to the layout) method 

‣ But a layout may contain either widgets or OTHER 

LAYOUTS in each of its entries 

– Set by calling: layout->addLayout(pointer to child layout) 

– Set by calling: layout->addWidget(pointer to the child widget) 

‣ So for each widget think about whether you want to add 

items vertically or horizontally and pick a Vbox or Hbox 

Layout and then add child layouts within that context 


27

More Notes 

‣ Widgets have a virtual function sizeHint() 

– Qsize sizeHint() const; 

– If you want your widget to start at a particular size, add this to your 

class and simply have it return a Qsize object which is just pixel 

rows x columns 

– Qsize MYCLASS::sizeHint() const { return QSize(400, 400); } 

‣ Defining your own signals 

– Signals go in the "signals:" section of your class 

– They are just prototypes (you don't write an implementation) 

– Use the 'emit' keyword followed by a "call" to this signal function 

– Whatever slot has been connected to this signal will in turn be 

called 

‣ Events are not slots (think of them as "slots" that are preconnected 

to certain actions/signals) 

– Just override them and usually call the BaseClass version 


28

CSCI 102

You also want an ePaper? Increase the reach of your titles

Delete template?

Save as template?