Treinamento de Qt básico apresentado na semanada de tecnologia do Barão de Mauá (Ribeirão Preto/SP) usando um material provido pela Nokia com modificações.

1. . Widgets and Layouts Qt in Education Semana de tecnologia do Barão de Mauá Instrutor: Marcelo Barros de Almeida [email_address]

2. © 2010 Nokia Corporation and its Subsidiary(-ies). The enclosed Qt Educational Training Materials are provided under the Creative Commons Attribution-Non-Commercial-Share Alike 2.5 License Agreement. The full license text is available here: http://creativecommons.org/licenses/by-nc-sa/2.5/legalcode . Nokia, Qt and the Nokia and Qt logos are the registered trademarks of Nokia Corporation in Finland and other countries worldwide.

4. 46 widgets in Designer

5. 59+ direct descendants from QWidget QLabel QPushButton QLineEdit QDoubleSpinBox QScrollBar

7. Container classes provide visual structure...

8. ...but also functional (e.g. QRadioButton ) QGroupBox QTabWidget

10. Receives events from input devices

11. Emits signals for “notable” changes

12. Are structured in a hierarchy

13. Can contain other widgets

16. Lets widgets adapt to translations

17. Lets widgets adapt to user settings

19. Layouts and widgets “negotiate” for sizes and positions

20. Spacer springs can be used to fill voids QGridLayout QVBoxLayout QHBoxLayout

22. An Example Dialog QVBoxLayout *outerLayout = new QVBoxLayout(this); QHBoxLayout *topLayout = new QHBoxLayout(); topLayout->addWidget(new QLabel("Printer:")); topLayout->addWidget(c=new QComboBox()); outerLayout->addLayout(topLayout); QHBoxLayout *groupLayout = new QHBoxLayout(); ... outerLayout->addLayout(groupLayout); outerLayout->addSpacerItem( new QSpacerItem(...) ); QHBoxLayout *buttonLayout = new QHBoxLayout(); buttonLayout->addSpacerItem(new QSpacerItem(...)); buttonLayout->addWidget(new QPushButton("Print")); buttonLayout->addWidget(new QPushButton("Cancel")); outerLayout->addLayout(buttonLayout);

23. An Example Dialog QVBoxLayout *outerLayout = new QVBoxLayout(this); QHBoxLayout *topLayout = new QHBoxLayout(); topLayout->addWidget(new QLabel("Printer:")); topLayout->addWidget(c=new QComboBox()); outerLayout->addLayout(topLayout); QHBoxLayout *groupLayout = new QHBoxLayout(); ... outerLayout->addLayout(groupLayout); outerLayout->addSpacerItem( new QSpacerItem(...) ); QHBoxLayout *buttonLayout = new QHBoxLayout(); buttonLayout->addSpacerItem(new QSpacerItem(...)); buttonLayout->addWidget(new QPushButton("Print")); buttonLayout->addWidget(new QPushButton("Cancel")); outerLayout->addLayout(buttonLayout);

24. An Example Dialog QVBoxLayout *outerLayout = new QVBoxLayout(this); QHBoxLayout *topLayout = new QHBoxLayout(); topLayout->addWidget(new QLabel("Printer:")); topLayout->addWidget(c=new QComboBox()); outerLayout->addLayout(topLayout); QHBoxLayout *groupLayout = new QHBoxLayout(); ... outerLayout->addLayout(groupLayout); outerLayout->addSpacerItem( new QSpacerItem(...) ); QHBoxLayout *buttonLayout = new QHBoxLayout(); buttonLayout->addSpacerItem(new QSpacerItem(...)); buttonLayout->addWidget(new QPushButton("Print")); buttonLayout->addWidget(new QPushButton("Cancel")); outerLayout->addLayout(buttonLayout);

25. An Example Dialog QVBoxLayout *outerLayout = new QVBoxLayout(this); QHBoxLayout *topLayout = new QHBoxLayout(); topLayout->addWidget(new QLabel("Printer:")); topLayout->addWidget(c=new QComboBox()); outerLayout->addLayout(topLayout); QHBoxLayout *groupLayout = new QHBoxLayout(); ... outerLayout->addLayout(groupLayout); outerLayout->addSpacerIte m(new QSpacerItem(...)); QHBoxLayout *buttonLayout = new QHBoxLayout(); buttonLayout->addSpacerItem(new QSpacerItem(...)); buttonLayout->addWidget(new QPushButton("Print")); buttonLayout->addWidget(new QPushButton("Cancel")); outerLayout->addLayout(buttonLayout);

26. An Example Dialog QVBoxLayout *outerLayout = new QVBoxLayout(this); QHBoxLayout *topLayout = new QHBoxLayout(); topLayout->addWidget(new QLabel("Printer:")); topLayout->addWidget(c=new QComboBox()); outerLayout->addLayout(topLayout); QHBoxLayout *groupLayout = new QHBoxLayout(); ... outerLayout->addLayout(groupLayout); outerLayout->addSpacerItem(new QSpacerItem(...)); QHBoxLayout *buttonLayout = new QHBoxLayout(); buttonLayout->addSpacerItem(new QSpacerItem(...)); buttonLayout->addWidget(new QPushButton("Print")); buttonLayout->addWidget(new QPushButton("Cancel")); outerLayout->addLayout(buttonLayout);

31. Dialog button ordering

32. Standard dialogs

34. Dialog button ordering

35. Standard dialogs Plastique ClearLooks Windows MacOS X

37. Dialog button ordering

38. Standard dialogs

40. Dialog button ordering

41. Standard dialogs

43. Designer has a good overview of the widget groups

47. checked – true when the button is checked.

48. text – the text of the button.

49. icon – an icon on the button (can be displayed together with text). QPushButton QCheckBox QRadioButton

54. They can be considered passive (not entirely true)

55. A plain QWidget can be used as a container

56. Designer: Place widgets in the container and apply a layout to the container

57. Code: Create a layout for the container and add widgets to the layout QGroupBox *box = new QGroupBox(); QVBoxLayout *layout = new QVBoxLayout(box); layout->addWidget(...); ... QGroupBox QTabWidget QFrame

60. editingFinished() - emitted when the widget is left

62. maxLength – limits the length of the input

63. readOnly – can be set to true to prevent editing (still allows copying) QLineEdit

66. html – HTML formatted text

70. There are more for doubles, time and dates

72. maximum – the maximum value

73. minimum – the minimum value QSlider QScrollBar QDial QSpinBox

79. enabled – enable or disable user interaction

80. visible – shown or not (alter with show and hide)

81. These properties affect child widgets as well. For instance, enable or disable a container widget.

85. minimum and maximum sizes

88. Minimum – the hint specifies the smallest possible size

89. Maximum – the hint specifies the largest possible size

90. Preferred – the hint specifies preferred, but not required

91. Expanding – as preferred, but wants to grow

92. MinimumExpanding – as minimum, but wants to grow

93. Ignored – the size hint is ignored, widget gets as much space as possible

95. Minimum – can grow

96. Maximum – can shrink

97. Preferred – can grow , can shrink

98. Expanding – can grow , can shrink , wants to grow

99. MinimumExpanding – can grow , wants to grow

100. Ignored – the size hint is ignored, can grow , can shrink

102. One preferred, one expanding

103. Two expanding next to each other

104. Not enough widget to fill the space (fixed)

106. maximumSize – largest possible size

107. minimumSize – smallest possible size ui->pushButton->setMinimumSize(100, 150); ui->pushButton->setMaximumHeight(250);

109. A visual editor for forms

110. Drag-and-drop widgets

111. Arrange layouts

112. Make connections

113. Introducing Designer includes compiles links compiles mocs

114. Introducing Designer uic includes compiles links compiles mocs

115. Using the Code #ifndef WIDGET_H #define WIDGET_H #include <QWidget> namespace Ui { class Widget; } class Widget : public QWidget { Q_OBJECT public: Widget(QWidget *parent = 0); ~Widget(); private: Ui::Widget *ui; }; #endif // WIDGET_H Forward declaration of the Ui::Widget class A Ui::Widget pointer, ui , refers to all widgets Basically a standard QWidget derived class

116. Using the Code #include &quot;widget.h&quot; #include &quot;ui_widget.h&quot; Widget::Widget(QWidget *parent) : QWidget(parent), ui(new Ui::Widget) { ui->setupUi(this); } Widget::~Widget() { delete ui; } Instanciates the Ui::Widget class as ui Deletes the ui object Calls setupUi , creating all the widgets as children to the given parent ( this ).

118. Apply layouts from the inside out, add spacers as needed

119. Make connections

121. Using Designer drag-and-drop Place widgets roughly

122. Using Designer Apply layouts from the inside out, add spacers as needed 1 . Select each group box, 2 . apply a vertical box layout

123. Using Designer Apply layouts from the inside out, add spacers as needed 1 . Select the label (click), 2 . Select the combobox (Ctrl+click)

124. Using Designer Apply layouts from the inside out, add spacers as needed 1 . Apply a horizontal box layout

125. Using Designer Apply layouts from the inside out, add spacers as needed 1 . Select both group boxes and lay them out, 2 . add a horizontal spacer, 3 . place the buttons and spacer in a layout

126. Using Designer Apply layouts from the inside out, add spacers as needed 1 . Add a vertical spacer, 2 . select the form itself, 3 . apply a vertical box layout

127. Using Designer Make connections (between widgets) 1 . Switch to signals and slot editing mode, 2 . drag from one widget to another, 3 . pick the signal and slot, 4 . see the result in the connections' dock

128. Using Designer Make connections (to your code) 1 . Use the widget editing mode, 2 . right click on a widget and pick Go to slot... 3 . pick the signal to connect to your code

131. QDialog – a dialog, usually expecting a result such as Ok, Cancel, etc

134. Widgets without parent are automatically windows

135. Widgets with parent have to pass the Qt::Window flag to the QWidget constructor

137. WindowModal – the parent window is blocked

138. ApplicationModal – all other windows are blocked

142. Qt::WindowMaximizeButtonHint

143. Qt::WindowCloseButtonHint

144. etc

146. Inherited from QDialog

148. Buttons for accepting or rejecting

149. The Programming Interface class SearchDialog : public QDialog { Q_OBJECT public: explicit SearchDialog(const QString &initialText, bool isBackward, QWidget *parent = 0); bool isBackward() const; const QString &searchText() const; private: Ui::SearchDialog *ui; };

150. The Implementation SearchDialog::SearchDialog(const QString &initialText, bool isBackward, QWidget *parent) : QDialog(parent), ui(new Ui::SearchDialog) { ui->setupUi(this); ui->searchText->setText(initialText); if(isBackward) ui->directionBackward->setChecked(true); else ui->directionForward->setChecked(true); } bool SearchDialog::isBackward() const { return ui->directionBackward->isChecked(); } const QString &SearchDialog::searchText() const { return ui->searchText->text(); }

153. Toolbar

154. Statusbar

155. Docks

156. Central widget

158. A QAction object can represent all these access ways – and hold tool tips, statusbar hints, etc too Ctrl+S Action

161. icon – icon to be used everywhere

162. shortcut – shortcut

163. checkable / checked – if the action is checkable and the current check status

164. toolTip / statusTip – tips text for tool tips (hover and wait) and status bar tips (hover, no wait)

167. In Designer, simply drag and drop each action into place on a tool bar or menu myMenu->addAction(action); myToolBar->addAction(action);

169. QMainWindow::addDockWidget adds the docks to the window

170. Dock widgets void MainWindow::createDock() { QDockWidget *dock = new QDockWidget (&quot;Dock&quot;, this); dock-> setFeatures (QDockWidget::DockWidgetMovable | QDockWidget::DockWidgetFloatable); dock-> setAllowedAreas (Qt::LeftDockWidgetArea | Qt::RightDockWidgetArea); dock-> setWidget (actualWidget); ... addDockWidget (Qt::RightDockWidgetArea, dock); }

172. No need to try to determine the path for the icons for each specific install type

173. All fits neatly into the build system

174. ...

175. You can add anything into resources, not only icons

177. Prefix path and filenames with : to use a resource

178. Or simply pick an icon from the list in Designer QPixmap pm(&quot; : / images/logo.png&quot;);

180. Style sheets are inspired from CSS

181. They can be used for highlighting and for various small alternations

182. As well as a total overhaul of the entire user interface