×
Namespaces

Variants
Actions

Archived:Simple Hello World Application Using Graphics View Framework in Qt

From Nokia Developer Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: gaba88 (21 Aug 2010)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

This article demonstrate how to use Qt's Graphics View Framework to create custom controls. Qt has a very flexible and easy to use GUI components in form of Widgets like QPushButton, QLabel, QCheckBox, QListWidget etc

Using these Qt Components one can easily design good GUI based application and give a good User Experience to the application user. But when we need to write some custom widgets of our own, these inbuilt components have lots of limitation. So for this Qt has a Graphics View Framework which helps the developer to render their custom controls on the screen. Graphics View provides a surface for managing and interacting with a large number of custom-made 2D graphical items, and a view widget for visualizing the items, with support for zooming and rotation.

Basic Elements of Graphics-View Framework

The Graphics View Framework comprises of three basic elements or classes which helps the developer to use and understand the Graphics View Framework.

  • QGraphicsView
    Displays the widgets of a screen, it basically visualizes content of a scene. The view widget is a scroll area, and provides scroll bars for navigating through large scenes. The view receives input events from keys and touches, and translates these to scene events (converting the coordinates used to scene coordinates where appropriate), before sending the events to the visualized scene.
  • QGraphicsScene
    Class for storing the widgets, handling event propagation(input from keyboard and touches) and managing item states. It represents a scene with items in it. QGraphicsScene also manages the state of item like selection and focus and acts as a container to different items placed on the scene.
  • QGraphicsItem
    A basic class for the graphical items on the scene. It can also represent a group of items.

Graphics View provides several standard items for typical shapes, such as rectangles (QGraphicsRectItem), ellipses (QGraphicsEllipseItem) and text items (QGraphicsTextItem), but the most powerful QGraphicsItem features are available when one writes a custom item. QGraphicsItem is responsible for keyboard input, focus, drag and drop.

Simple Graphics View Framework Composition

A QGraphicsScene object is flexible enough to include any number of QGraphicsItem objects and still maintain the efficiency in retrieving them. On the other hand, a QGraphicsView object size is limited by the device’s display size. Putting these 3 elements together we have something like this:


Qt graphics view framework.JPG

The basic idea here is to manage the events of each item you create and redraw them as needed. This way, you can make your own custom widgets with more visually appealing features.

Simple Hello World Example

#include <QtGui/QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsItem>
 
 
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
 
// making a scene on the application
QGraphicsScene scene;
 
//adding some text to the scene
scene.addText("Hello, world!", QFont("Times", 20, QFont::Bold));
 
//assigning that scene to the view
QGraphicsView view(&scene);
view.show();
 
return a.exec();
}

Screenshot of the application is shown below:

Helloworld screenshot.JPG

Lets add some more lines to the code:

#include <QtGui/QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsItem>
 
 
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
 
QGraphicsScene scene;
 
QPainterPath path;
path.moveTo(30,120);
path.cubicTo(80, 0, 50, 50, 80, 80);
 
scene.addPath(path, QPen(Qt::black), QBrush(Qt::green));
 
scene.addText("Hello, world!", QFont("Times", 15, QFont::Bold));
 
QGraphicsView view(&scene);
view.show();
 
 
return a.exec();
}


and this will look like : HelloWorld ScreenShot2.JPG

Conclusion

So we can see how powerful is Qt Graphics View Framework, in the time ahead I will write some articles in which we will use some different Graphics Item to design some simple custom screens.

Reference

  1. Frederico Duarte Qt Blog
  2. QGraphicsView
This page was last modified on 11 October 2012, at 04:15.
198 page views in the last 30 days.