Редактирование: Back in Form with QFormLayout

__NOTOC__

by Jasmin Blanchette

Qt 4.4 introduces a new layout manager class, QFormLayout, that can be used to create two-column forms with labels on the left and editors on the right. For such forms, QFormLayout provides several advantages over QGridLayout, including platform-awareness and a more relevant API. In this article, we will see how it works.

*[[#gettingstarted | Getting Started]]
*[[#exampleabugreportform | Example: A Bug Report Form]]
*[[#inqtdesigner | In Qt Designer]]
*[[#conclusion | Conclusion]]


<div id="gettingstarted"></div>
===Getting Started===
[http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] started its life as a Qtopia class, where its ''raison d'&ecirc;tre'' was to support row wrapping to accommodate the small displays of most mobile devices. Nonetheless, the need for a two-column form layout was felt on the desktop as well, where different platforms specify a somewhat different look and feel---compare the typical Windows dialog with the equally typical Mac OS X dialog alongside it:

[[Image:qq25-windialog.jpg|center]]

[[Image:qq25-macdialog.png|center]]

To us developers, [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] is good news for another reason. Have you ever found yourself writing code like the following?
<source lang="cpp-qt">
    nameLabel = new QLabel(tr("&amp;Name:"));
    nameLabel->setBuddy(nameLineEdit);
    
    emailLabel = new QLabel(tr("&amp;Name:"));
    emailLabel->setBuddy(emailLineEdit);
    
    ageLabel = new QLabel(tr("&amp;Name:"));
    ageLabel->setBuddy(ageSpinBox);
    
    QGridLayout *gridLayout = new QGridLayout;
    gridLayout->addWidget(nameLabel, 0, 0);
    gridLayout->addWidget(nameLineEdit, 0, 1);
    gridLayout->addWidget(emailLabel, 1, 0);
    gridLayout->addWidget(emailLineEdit, 1, 1);
    gridLayout->addWidget(ageLabel, 2, 0);
    gridLayout->addWidget(ageSpinBox, 2, 1);
    setLayout(gridLayout);

</source> 
Instead of the 14 code lines above (plus 3 blank lines), you can now write the 5 lines below:
<source lang="cpp-qt">
    QFormLayout *formLayout = new QFormLayout;
    formLayout->addRow(tr("&amp;Name:"), nameLineEdit);
    formLayout->addRow(tr("&amp;Email:"), emailLineEdit);
    formLayout->addRow(tr("&amp;Age:"), ageSpinBox);
    setLayout(formLayout);
</source> 
In the [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] version, each call to <tt>addRow()</tt> creates a [http://www.crossplatform.ru/documentation/qt/4.4.0/qlabel.php QLabel] behind the scenes and sets its buddy.

Conceptually, a [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] consists of ''rows''. Rows are created using <tt>addRow()</tt> or <tt>insertRow()</tt>. A row consists of a ''label'' and a ''field'', both of which can be arbitrary [http://www.crossplatform.ru/documentation/qt/4.4.0/qwidget.php QWidget]s. If a [http://www.crossplatform.ru/documentation/qt/4.4.0/qstring.php QString] is passed for the label, a [http://www.crossplatform.ru/documentation/qt/4.4.0/qlabel.php QLabel] is created, as we saw in the preceding example. It is also possible to add items that span both columns by calling addRow([http://www.crossplatform.ru/documentation/qt/4.4.0/qwidget.php QWidget]~<tt>*)</tt>.

[http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] provides the following properties that can be used to customize its look and feel:
* '''Label alignment''': Whether the labels in the left column are left or right aligned. Windows and GNOME specify left alignment for labels, whereas Mac OS X and KDE specify right alignment.
* '''Row wrap policy''': [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] supports three row-wrapping policies:~wrap long rows, wrap all rows, and don't wrap rows. The "don't wrap rows" policy is the default on all desktop platforms, where screen space is abundant. 
* '''Field growth policy''': On Windows, the field widgets typically expand to take all the space available, whereas on Mac OS X, they tend to stay at a fixed size. 
* '''Form alignment''': On Mac OS X, the form should be horizontally centered in the window if there is extra space available.
For all of these, [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] queries the [http://www.crossplatform.ru/documentation/qt/4.4.0/qstyle.php QStyle] to obtain default values but lets you override them if you need to.


<div id="exampleabugreportform"></div>
===Example: A Bug Report Form===
We will now look at a complete example that uses [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php  QFormLayout] to lay out its widgets. The dialog is a bug report form shown below on four different platforms:

[[Image:qq25-winxpform.png|center]]

[[Image:qq25-macform.png|center]]

[[Image:qq25-kdeform.png|center]]

[[Image:qq25-gnomeform.png|center]]

Here is the class definition:
<source lang="cpp-qt">
    class BugForm : public QDialog
    {
        Q_OBJECT
    
    public:
        BugForm(QWidget *parent = 0);
    
    private slots:
        void reset();
    
    private:
        QLineEdit *nameEdit;
        QLineEdit *companyEdit;
        QLineEdit *phoneEdit;
        QLineEdit *emailEdit;
        QLineEdit *problemEdit;
        QTextEdit *summaryEdit;
        QComboBox *reproducibilityCombo;
        QDialogButtonBox *buttonBox;
    };

</source> 
So far, nothing special. Here's the first half of the constructor:
<source lang="cpp-qt">
    BugForm::BugForm(QWidget *parent)
        : QDialog(parent)
    {
        nameEdit = new QLineEdit;
        companyEdit = new QLineEdit;
        phoneEdit = new QLineEdit;
        emailEdit = new QLineEdit;
        problemEdit = new QLineEdit;
        summaryEdit = new QTextEdit;
    
        reproducibilityCombo = new QComboBox;
        reproducibilityCombo->addItem(tr("Always"));
        reproducibilityCombo->addItem(tr("Sometimes"));
        reproducibilityCombo->addItem(tr("Rarely"));
    
        buttonBox = new QDialogButtonBox;
        buttonBox->addButton(tr("Submit Bug Report"),
                             QDialogButtonBox::AcceptRole);
        buttonBox->addButton(tr("Don't Submit"),
                             QDialogButtonBox::RejectRole);
        buttonBox->addButton(QDialogButtonBox::Reset);
    
        connect(buttonBox, SIGNAL(accepted()),
                this, SLOT(accept()));
        connect(buttonBox, SIGNAL(rejected()),
                this, SLOT(reject()));
        connect(buttonBox->button(QDialogButtonBox::Reset),
                SIGNAL(clicked()), this, SLOT(reset()));

</source> 
We create some editor widgets for the form, as well as a
[http://www.crossplatform.ru/documentation/qt/4.4.0/qdialogbuttonbox.php QDialogButtonBox] with three buttons.
<source lang="cpp-qt">
      QFormLayout *layout = new QFormLayout;
        layout->addRow(tr("&amp;Name:"), nameEdit);
        layout->addRow(tr("&amp;Company:"), companyEdit);
        layout->addRow(tr("&amp;Phone:"), phoneEdit);
        layout->addRow(tr("&amp;Email:"), emailEdit);
        layout->addRow(tr("Problem &amp;Title:"), problemEdit);
        layout->addRow(tr("&amp;Summary Information:"),
                       summaryEdit);
        layout->addRow(tr("&amp;Reproducibility:"),
                       reproducibilityCombo);
    
        QVBoxLayout *mainLayout = new QVBoxLayout;
        mainLayout->addLayout(layout);
        mainLayout->addWidget(buttonBox);
        setLayout(mainLayout);
    
        setWindowTitle(tr("Report Bug"));
    }

</source> 
We create a [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] and populate it with rows, one row per editor widget. Then we insert the [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] in a [http://www.crossplatform.ru/documentation/qt/4.4.0/qvboxlayout.php  QVBoxLayout] that also contains the [http://www.crossplatform.ru/documentation/qt/4.4.0/qdialogbuttonbox.php QDialogButtonBox].

Finally, the '''Reset''' button is connected to the <tt>reset()</tt> slot, which resets all the editors.

The bug report form presented above can also be developed in ''Qt Designer'', by dragging a [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] onto the form and then the child widgets into it, much like we would do for a [http://www.crossplatform.ru/documentation/qt/4.4.0/qgridlayout.php QGridLayout].

[[Image:qq25-designerform.png|center]]

If you want to port existing <tt>.ui</tt> files to [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout], you can simply edit the <tt>.ui</tt> file and replace [http://www.crossplatform.ru/documentation/qt/4.4.0/qgridlayout.php QGridLayout] with [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php  QFormLayout], since both have the same serialization format.


<div id="conclusion"></div>
===Conclusion===
Qt is good at providing the fundamental mechanisms necessary to develop powerful cross-platform applications. What we see now is that it is also gradually expanding to provide higher-level APIs that encapsulate platform -specific idioms. An example of this is [http://www.crossplatform.ru/documentation/qt/4.4.0/qdialogbuttonbox.php  QDialogButtonBox], which was introduced in Qt 4.2 as a higher-level abstraction for a [http://www.crossplatform.ru/documentation/qt/4.4.0/qhboxlayout.php QHBoxLayout] containing buttons, taking care of ordering them according to the platform's guidelines. [http://www.crossplatform.ru/documentation/qt/4.4.0/qformlayout.php QFormLayout] follows in this tradition, and you can expect more classes like it in future Qt releases.


[http://www.forum.crossplatform.ru/index.php?showtopic=1193 Обсудить на форуме...]

[[Категория:Qt_Издания]]