Part 4: Adding a display area

[<< Contents] [<< Prev] [Next >>]

Using a Graphics View

To allow the user to manage and interact with our application data in a graphical manner we will use a "Graphics View" central widget on our main application window. The Qt Graphics View framework provides many useful facilities for displaying and interacting with custom-made 2D graphical items.

To implement the graphics view we create a scene that will contain our application data and a view widget to display this scene in the central area of our main application window. To give us flexibility for the future and to encapsulate the data within the scene we will create a new class to implement the scene. In later parts of this tutorial we will enhance this scene to allow the user to place and interact with our simulated radio stations.

Adding the new class

Our new class will be called "Scene" and needs to be added to our project in the same manner as we added MainWindow earlier. Use the KDevelop "New Class..." wizard, enter the class name and press "OK". As usual if KDevelop pops up any dialog boxes saying a file has changed, simply press "Reload".

To make the code easier to follow and to better fit our purposes, we will again replace the template code provided by KDevelop with our own code shown below.

scene.h

#ifndef SCENE_H
#define SCENE_H

#include <QGraphicsScene>

/*************************************************************************************/
/******************** Scene representing the simulated landscape *********************/
/*************************************************************************************/

class Scene : public QGraphicsScene
{
public:
  Scene();                                      // constructor
};

#endif  // SCENE_H

Our class is derived from QGraphicsScene and currently only has an empty constructor.

scene.cpp

#include "scene.h"

/*************************************************************************************/
/******************** Scene representing the simulated landscape *********************/
/*************************************************************************************/

/************************************ constuctor *************************************/

Scene::Scene() : QGraphicsScene()
{
}

Creating the scene and view

The scene and view will be created in the main window constructor.

mainwindow.h

Because we do not need the full definition of the Scene class in this header, we instead add just a forward declaration here and include the Scene header file in the .cpp file. This makes the compilation of projects much faster, because the compiler usually spends most of its time parsing header files, not the actual source code. This trick alone can often speed up compilations by a factor of two or more.

class Scene;

Create a private variable to store a pointer to the scene.

private:
  Scene*       m_scene;               // scene representing the simulated landscape

mainwindow.cpp

Include the Scene class header file.

#include "scene.h"

Include the QGraphicsView header file.

#include <QGraphicsView>

And inside the constructor add the code to create the scene and view. We also set the view alignment to display the scene in the top left so Qt does not inappropriately reposition our graphical items as the scene changes size, and we remove the frame to make it look better. Set the view as the central widget.

  // create scene and central widget view of scene
  m_scene               = new Scene();
  QGraphicsView*   view = new QGraphicsView( m_scene );
  view->setAlignment( Qt::AlignLeft | Qt::AlignTop );
  view->setFrameStyle( 0 );
  setCentralWidget( view );

Compile and run

The new code will now successfully compile when you attempt to run the application.

[<< Contents] [<< Prev] [Next >>]