Question

Qt Designer stores forms in .ui files. These files use an XML format to represent form elements and their characteristics. This document provides an overview of the XML format used, and should provide enough information for developers to write their own .ui parsers so that they can read and modify .ui files programatically.

One way to parse a .ui file is to use Qt and the QDomDocument class; this is how Qt Designer does it: see the uilib/qwidgetfactory.h and uilib/qwidgetfactory.cpp source files. For information on dynamically loading and running .ui files see Loading and Executing a Dynamic Dialog.

The doctype of a .ui file is simply "UI", so the doctype tag is:

<!DOCTYPE UI>

The root element is a "UI", which encloses the entire contents:

<UI version="3.0" stdsetdef="1">
...
</UI>

Within the UI entity, there may one or zero of the following element types:

• actions - actions, for QMainWindow forms

• author - the form's author

• class - the form's class name

• comment - comments, e.g. copyright notices

• connections - signal/slot connections

• customwidgets - custom widgets (old-style)

• exportmacro - Windows-specific

• forwards - forward declarations

• images - embedded images: only for .ui files than include embedded images; images are normally stored in a separate images directory

• includes - include files

• layoutdefaults - default values for layout attributes

• menubar - menu bar, for QMainWindow forms

• pixmapfunction - the name of the function to use for retrieving pixmaps if neither embedded nor external pixmaps are being used

• pixmapinproject - an element whose presence ndicates that the pixmaps are handled by the .pro file

• signals - signal declarations

• slots - slot declarations

• tabstops - the form's tab order

• toolbars - toolbars, for QMainWindow forms

• variables - class variables

• widget - the form itself; this element may contain other elements, including other widget elements

• forward - Qt 3.x beta backwards compatibility

• include - Qt 2.x backwards compatibility

• variable - Qt 3.x beta backwards compatibility

The ordering of elements is arbitrary, although it is common for the class element to be first.

UI Elements

actions

This element is used to store the form's actions. It only occurs in QMainWindow forms.

The actions element contains one or more action elements. Each action element contains one or more properties. Each property has a name attribute, and a single value which is contained within a datatype element.

<actions>
    <action>
        <property name="name">
            <cstring>fileNewAction</cstring>
        </property>
        <property name="iconSet">
            <iconset>filenew</iconset>
        </property>
        <property name="text">
            <string>New</string>
        </property>
        <property name="menuText">
            <string>&amp;New</string>
        </property>
        <property name="accel">
            <number>4194382</number>
        </property>
    </action>
    ...
</actions>

author

This element is used to store the author's name as a simple string.

<author>Barney Rubble</author>

class

This element is used to store the form's class name as a simple string.

<class>InsuranceForm</class>

comment

This element is used to store comments, for example, copyright notices, as a simple string.

<comment>*********************************************************************
** Copyright (C) 2002 Trolltech AS.  All rights reserved.
**
** This file is part of Qt Designer.
**
** This file may be distributed and/or modified under the terms of the
** GNU General Public License version 2 as published by the Free Software
** Foundation and appearing in the file LICENSE.GPL included in the
** packaging of this file.
**
** This file is provided AS IS with NO WARRANTY OF ANY KIND, INCLUDING THE
** WARRANTY OF DESIGN, MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
**
** See http://www.trolltech.com/gpl/ for GPL licensing information.
**
** Contact info@trolltech.com if any conditions of this licensing are
** not clear to you.
**
*********************************************************************</comment>
</comment>

connections

This element is used to record the signals and slots connections in the form.

The connections element contains one or more connection elements and one or more slot elements. Each connection element identifies the signaling object and its signal, and the receiving object and its slot. Each slot element provides a slot's prototype.

<connections>
    ...
    <connection language="C++">
        <sender>alignActionGroup</sender>
        <signal>selected(QAction*)</signal>
        <receiver>EditorForm</receiver>
        <slot>changeAlignment(QAction*)</slot>
    </connection>
    ...
    <slot access="public" specifier="virtual" language="C++" 
	returnType="void">changeAlignment(QAction* align)</slot>
    ...
</connections>

customwidgets

Qt Designer can operate with custom widgets. A custom widget is represented in a .ui file using the <customwidget> element.

Note that these are the 'old-style' custom widgets that show up on the form as grey rectangles. Use plugins to seamlessly integrate your custom widgets into Qt Designer -- see Creating Custom Widgets with Plugins.

Each custom widget has a class name and a header file. They also have a size hint and size policy. A pixmap can be specified; this is displayed on a Qt Designer toolbar button which the user can use to create an instance of the custom widget. Custom widgets usually emit signals, and these are listed. The name and type of any properties that the widget has are also included.

<customwidgets>
    <customwidget>
        <class>StyledButton</class>
        <header location="local">styledbutton.h</header>
        <sizehint>
            <width>40</width>
            <height>25</height>
        </sizehint>
        <container>0</container>
        <sizepolicy>
            <hordata>5</hordata>
            <verdata>5</verdata>
        </sizepolicy>
        <pixmap>image0</pixmap>
        <signal>clicked()</signal>
        <signal>changed()</signal>
        <property type="Color">color</property>
        <property type="Pixmap">pixmap</property>
        <property type="Bool">scale</property>
    </customwidget>
</customwidgets>

exportmacro

This tag is only relevant to Windows users.

If you have a class that requires some Windows-specific export macro, e.g. for classes in a DLL that need to be declared like this: class win_specific_declaration_goes_here Class, you can use the <exportmacro> tag. (In standard Qt we use the Q_EXPORT macro, e.g. class Q_EXPORT QWidget.) If you use this tag you must also:

1. include the file which contains the macro definition;

2. add the export macro to the form -- this is achieved by entering the macro's name in the 'export macro' sub-property of the form's name property.

Following these steps will ensure that uic will create the correct class YOUR_MACRO Form declarations.

<exportmacro>EDITOR_EXPORT</exportmacro>

forwards

It is sometimes necessary to forward declare classes, particularly if code is being written in .ui.h files within Qt Designer. Each forward declaration is listed as it should appear in the generated C++ code.

<forwards>
    <forward>class QStringList;</forward>
</forwards>

images

Images are normally stored in their own files and associated with forms using project files. This has the advantage that images can be shared across any number of forms in a project, and between projects.

In some cases it may be desireable to store image data directly in a form, and the <image> tag allows for this.

It is possible to store images in both PNG and XPM formats, although in practice only XPM is recommended because of bugs in some PNG libraries. See the saveImageData function in resource.cpp to see how the image data is encoded.

<images>
    <image name="image0">
        <data format="XPM.GZ" length="409">789cd3d7528808f055d0d2e72a2e492cc94c5648ce482c52d04a29cdcdad8c8eb5ade6523234530022630543251d2e253d856405bffcbc54105b19c856360003103711c6b53006ab440370316528264b4c198450c5808a94d1ed00aac214832b43124b544ec414d34b4c4c441103f11341120831309758313d0cf3b0840b7258d55a73010092c14eca</data>
    </image>
</images>

includes

It is sometimes necessary to #include header files in a .ui file. Header files may be 'local', i.e. relative to the project's directory, or 'global', i.e. part of Qt or the compilers standard libraries. Header files are declared in the implementation wherever possible, although sometimes it is necessary to declare them in the declaration (header) file.

Qt Designer automatically adds <include> tags for a .ui's .ui.h file.

<includes>
    <include location="local" impldecl="in implementation">pixmapcollection.h</include>
    <include location="local" impldecl="in implementation">pixmapchooser.h</include>
    <include location="local" impldecl="in implementation">project.h</include>
    <include location="global" impldecl="in implementation">qfileinfo.h</include>
    <include location="global" impldecl="in implementation">qimage.h</include>
    <include location="global" impldecl="in declaration">qpixmap.h</include>
    <include location="local" impldecl="in implementation">pixmapcollectioneditor.ui.h</include>
</includes>

layoutdefaults

Every form has a default spacing and margin size. These can be overridden on a case-by-case basis.

<layoutdefaults spacing="6" margin="11"/>

menubar

Applications that use QMainWindow often have a menubar. The menubar has a name property and one or more popup menu items. Each menu item has one or more actions and optionally separators.

<menubar>
    <property name="name">
        <cstring>menubar</cstring>
    </property>
    <item text="&amp;File" name="PopupMenu">
        <action name="fileSaveAction"/>
        <separator/>
        <action name="fileExitAction"/>
    </item>
    <item text="&amp;Help" name="PopupMenu_2">
        <action name="helpAboutAction"/>
        <action name="helpAboutQtAction"/>
    </item>
</menubar>

pixmapfunction

Images are normally included by listing their filenames in project files. Images can also be included inline using the images tag. Another way of dealing with images is to specify a function name. This function will be called, with the name (or 'key') of the relevant image, and is responsible for loading the appropriate image. To specify such a function the <pixmapfunction> tag is used.

<pixmapfunction>splashScreen</pixmapfunction>

pixmapinproject

Most applications store their images as separate files listed in the application's project file. This can be signified by including the <pixmapinproject> tag.

<pixmapinproject/>

signals

See connections.

slots

See connections.

tabstops

Tabstops indicate the widgets that get the focus as the user tabs through the form. The <tabstops> tag contains a list of tabstops, in order, each of which holds the name of a widget.

<tabstops>
    <tabstop>templateView</tabstop>
    <tabstop>helpButton</tabstop>
    <tabstop>buttonOk</tabstop>
    <tabstop>buttonCancel</tabstop>
</tabstops>

toolbars

Forms that have toolbars (dock windows) use the <toolbars> tag to hold the details. These forms are normally QMainWindows (or subclasses). Each toolbar has a dock attribute which identifies which dock window the toolbar initially belongs to. They also have both name and label properties. Each toolbar button is represented by an action. Toolbars can also hold other widgets, in which case the <toolbar> tag includes appropriate <widget> tags which give the class, name and any non-default property values for the relevant widget.

<toolbars>
    <toolbar dock="2">
        <property name="name">
            <cstring>toolBar</cstring>
        </property>
        <property name="label">
            <string>Tools</string>
        </property>
        <action name="fileNewAction"/>
        <action name="fileOpenAction"/>
        <action name="fileSaveAction"/>
        <separator/>
        <action name="editUndoAction"/>
        <action name="editRedoAction"/>
        <action name="editCutAction"/>
        <action name="editCopyAction"/>
        <action name="editPasteAction"/>
    </toolbar>
    <toolbar dock="2">
        <property name="name">
            <cstring>Toolbar</cstring>
        </property>
        <property name="label">
            <string>Toolbar</string>
        </property>
        <action name="leftAlignAction"/>
        <action name="centerAlignAction"/>
        <action name="rightAlignAction"/>
        <separator/>
        <action name="boldAction"/>
        <action name="italicAction"/>
        <action name="underlineAction"/>
        <separator/>
        <widget class="QComboBox">
            <property name="name">
                <cstring>fontComboBox</cstring>
            </property>
        </widget>
        <widget class="QSpinBox">
            <property name="name">
                <cstring>SpinBox2</cstring>
            </property>
            <property name="minValue">
                <number>6</number>
            </property>
            <property name="value">
                <number>10</number>
            </property>
        </widget>
    </toolbar>
</toolbars>

variables

Module variables are held in the <variables> tag. Variable type names often include < and >, which must be stored as entities.

<variables>
    <variable>SettingsDialog * settings;</variable>
    <variable>QMap&lt;int, QString&gt; bookmarks;</variable>
    <variable>HelpWindow *browser;</variable>
    <variable>HelpDialog *helpDock;</variable>
    <variable>QGuardedPtr&lt;FindDialog&gt; findDialog;</variable>
    <variable>static QPtrList&lt;MainWindow&gt; *windows;</variable>
</variables>

widget

Widgets are used at multiple levels within a .ui file. The whole form itself is a widget, and it contains other widgets, usually within the context of layouts such as hboxes, vboxes and grids.

Below is an example of a complete .ui file. The form itself is a QWidget with various non-default properties set. This widget contains a single hbox, which also has some non-default properties, and which contains a single QTextBrowser widget.

<!DOCTYPE UI><UI version="3.0" stdsetdef="1">
<class>WinIntroPage</class>
<widget class="QWidget">
    <property name="name">
        <cstring>WinIntroPage</cstring>
    </property>
    <property name="geometry">
        <rect>
            <x>0</x>
            <y>0</y>
            <width>387</width>
            <height>228</height>
        </rect>
    </property>
    <property name="caption">
        <string>Form1</string>
    </property>
    <hbox>
        <property name="name">
            <cstring>unnamed</cstring>
        </property>
        <property name="margin">
            <number>11</number>
        </property>
        <property name="spacing">
            <number>6</number>
        </property>
        <widget class="QTextBrowser">
            <property name="name">
                <cstring>TextBrowser1</cstring>
            </property>
            <property name="text">
                <string>This program installs Qt.</string>
            </property>
        </widget>
    </hbox>
</widget>
<layoutdefaults spacing="6" margin="11"/>
</UI>

forward

This tag is included for Qt 3.x beta backwards compatibility, and should not be used. Use forwards instead.

include

This tag is included for Qt 2.x beta backwards compatibility, and should not be used. Use includes instead.

variable

This tag is included for Qt 3.x beta backwards compatibility, and should not be used. Use variables instead.

Datatype Elements

• bool - a boolean value (0 or 1), e.g. <bool>1</bool>

• color - a color, e.g. <color><red>192</red><green>0</green><blue>255</blue></color>

• cstring - a C string value (8-bit), e.g. <cstring>Some text</cstring>

• cursor - an integer which indicates the cursor type, e.g. <cursor>4</cursor>. The valid integers for the cursor type are:

  • 0 - ArrowCursor

  • 1 - UpArrowCursor

  • 2 - CrossCursor

  • 3 - WaitCursor

  • 4 - IbeamCursor

  • 5 - SizeVerCursor

  • 6 - SizeHorCursor

  • 7 - SizeBDiagCursor

  • 8 - SizeFDiagCursor

  • 9 - SizeAllCursor

  • 10 - BlankCursor

  • 11 - SplitVCursor

  • 12 - SplitHCursor

  • 13 - PointingHandCursor

  • 14 - ForbiddenCursor

• enum - an enum name, e.g. <enum>StrongFocus</enum>

• font - a font description, e.g.

  <font>
      <family>Helvetica</family>
      <pointsize>16</pointsize>
      <weight>50</weight>
      <italic>1</italic>
      <underline>0</underline>
      <strikeout>0</strikeout>
  </font>
  

• iconset - an iconset (see pixmap), e.g. <iconset>filenew</iconset>

• number - an integer with an optional sign, e.g. <number>947</number>

• palette - a palette

• pixmap - a pixmap, normally the name or "key" of the pixmap; the name is used if pixmaps are stored in the project, the key is used if a user defined function is used to access the pixmap. It is also possible for pixmaps to be included inline. Example: <pixmap>chair</pixmap>

• point - a point, e.g. <point><x>15</x><y>95</y></point>

• rect - a rectangle, e.g.

  <rect>
      <x>20</x>
      <y>35</y>
      <width>225</width>
      <height>45</height>
  </rect>
  

• set - a list of names separated by |'s, e.g. <set>AlignLeft|AlignTop</set>

• size - a size, e.g. <size><width>150</width><height>105</height></size>

• sizepolicy - an integer which indicates the size type, e.g. <hsizetype>5</hsizetype><vsizetype>4</vsizetype>. The valid integers for the size type are:

  • 0 - Fixed

  • 1 - Minimum

  • 3 - MinimumExpanding

  • 4 - Maximum

  • 5 - Preferred

  • 7 - Expanding

• string - a Unicode string value (in UTF8), e.g. <string>Some text</string>

Complex Datatype Elements

palette

This element holds colors for user interface elements for each color group. For example:

<palette>
  <active>
    <color> ... Foreground    ... </color>
    <color> ... Button        ... </color>
    <color> ... Light         ... </color>
    <color> ... Midlight      ... </color>
    <color> ... Dark	      ... </color>
    <color> ... Mid	      ... </color>
    <color> ... Text          ... </color>
    <color> ... BrightText    ... </color>
    <color> ... ButtonText    ... </color>
    <color> ... Base          ... </color>
    <color> ... Background    ... </color>
    <color> ... Shadow	      ... </color>
    <color> ... Highlight     ... </color>
    <color> ... HighlightText ... </color>
  </active>
  <disabled>
    <color><red>128</red><green>128</green><blue>128</blue></color>
    ...
    <color><red>255</red><green>255</green><blue>255</blue></color>
  </disabled>
  <inactive>
    <color><red>0</red><green>0</green><blue>0</blue></color>
    ...
    <color><red>255</red><green>255</green><blue>255</blue></color>
  </inactive>
</palette>

See color for the format of the <color> element.