XuvTools is developed in a cooperative effort from:
  • Chair of Pattern Recognition and Image Processing [www]
  • Friedrich Miescher Institute for Biomedical Research [www]
  • Center for Biological Systems Analysis [www]
 

Qt Designer

When designing a user interface element with Qt designer, several ways to include this new element into the GUI are possible. In order to have a defined coding style for XuvTools, please stick to the following instructions when using the designer. The detailed explanation of this approach can be found in Qt's Designer manual, in the section “Multiple Inheritance” (for Qt-4.6.0 here: http://doc.qt.nokia.com/4.6/uitools-multipleinheritance.html).

Special Settings and Attributes

Layout Margins and Sizes

The default layout sizes are good for many elements, so only change them if the value looks bad or waists too much space. One example, where default values fail, is when a frame is added around a text label. Default layout margin would be 9,9,9,9,6, which is by far too wide. When decreasing margins, use the following values:

LayoutLeftMargin 4
LayoutTopMargin 4
LayoutRightMargin 4
LayoutBottomMargin 4
LayoutSpacing 2

Copy-Paste Sample Code: QuickStart with GuiElement example

We use an example gui element, class name “GuiElement”. As you can see below, there are no explicit signal connections necessary in GuiElementQt. Instead, naming functions in the pattern

void on_<element-name>_<signal-name>();

enables automatic signal connection within Qt. As an example, the function on_mDoSomethingPushButton_released() is invoked when the QPushButton mDoSomethingPushButton, member of GuiElementQt.ui, is released.

(1) Design the UI element in Qt designer

Qt Designer Widgets

GuiElementQt.ui:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>GuiElementQtClass</class>
 <widget class="QWidget" name="GuiElementQtClass">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>261</width>
    <height>94</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>GuiElementQt</string>
  </property>
  <layout class="QGridLayout">
   <item row="1" column="0">
    <widget class="QPushButton" name="mDoSomethingPushButton">
     <property name="text">
      <string>Push Me</string>
     </property>
    </widget>
   </item>
  </layout>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

(2) Create a corresponding C++ class header, inherits from UI class

The header of your new class file should have the following layout:

GuiElementQt.hh:

#ifndef GUI_ELEMENT_QT_HH
#define GUI_ELEMENT_QT_HH GUI_ELEMENT_QT_HH
 
// base class: QWidget
#include <QWidget>
// our Qt designer widget
#include "ui_GuiElementQt.h"
 
using namespace Ui;
 
class GuiElementQt : public QWidget, public GuiElementQtClass
{
  Q_OBJECT
 
public:
  GuiElementQt(QWidget *parent = 0);
  virtual ~GuiElementQt();
 
private slots:
  void on_mDoSomethingPushButton_pushed();
  void on_mDoSomethingPushButton_released();
 
};
 
#endif // GUI_ELEMENT_QT_HH

(3) Create a corresponding C++ class implementation (as few Qt as possible)

The source of your new class file should have the following layout:

GuiElementQt.cxx:

#include "GuiElementQt.hh"
 
GuiElementQt::GuiElementQt(QWidget *aParent)
 : QWidget(aParent)
{
  // This will call the Qt designer widget constructor
  setupUi(this);
 
  // here we could add our own GUI initialization:
}
 
GuiElementQt::~GuiElementQt()
{
}
 
void GuiElementQt::on_mDoSomethingPushButton_pushed()
{
  std::cerr << __FILE__ << ":" << __LINE__ << " button was pushed." << std::endl;
}
 
void GuiElementQt::on_mDoSomethingPushButton_released()
{
  std::cerr << __FILE__ << ":" << __LINE__ << " button was released." << std::endl;
}
devel/qt_designer.txt · Last modified: 2009/12/17 21:04 by mario
Contact: admin(a)xuvtools.org