1. No category

QtWidgetsandQtQuick.Controls-AComparison
QtDeveloperDaysEurope2014
PresentedbyKevinKrammer
kevin.krammer@kdab.com
p
TheQuestion
TheQues on
Side-by-SideComparison
Conclusions
TheQuestion
p
CommonQuestion
WhatshouldIuseforanewproject:
QtWidgetsorQtQuick.Controls?
TheQuestion
p
GoodAnswer?
Itdepends!
TheQuestion
p
Side-by-SideComparison
TheQuestion
Side-by-SideComparison
Conclusions
Side-by-SideComparison
p
BaseLine
Setofstandardinterfaceelements
e.g.Button,CheckBox,Slider
Layouting
Styling
PlatformLook&Feel
Custom
ApplicationWindow
MenuBar,ToolBar,StatusBar,etc
Dialogs
StandardDialogs
BaseforCustomDialogs
Side-by-SideComparison
p
Requirements
QtWidgets
QtQuick.Controls
System
GraphicsBuffers
System
OpenGL
QtVersion
basicallyany
QtVersion
>5.1
ProgrammingLanguages
ForUse
C++
(QML+JavaScriptwithQML
registeredwidgets)
ForExtending
C++
ProgrammingLanguages
ForUse
QML+JavaScript
ForExtending
QML+JavaScript(composition)
C++(customrendering)
Side-by-SideComparison
p
Layouting
QtWidgets
Horizontal/VerticalBoxLayout,Grid
Layout,FormLayout
Layouts"fill"parentwidget
Widgetsprovide:
SizeHints
SizePolicies
Developercanoverridesizehint,set
policy
QtQuick.Controls
RowLayout,ColumnLayout,
GridLayout,Anchors(relative
positioning)
Layoutsneedtobeexplicitlysized
oranchored
Controlsprovide:
ImplicitSize
Developercanattachresizehints
Side-by-SideComparison
p
Layouting-Example
QtWidgets
1
2
3
4
5
6
7
8
9
10
QVBoxLayout*layout=newQVBoxLayout(this);
QPushButton*one=newQPushButton("One");
layout->addWidget(one);
QPushButton*two=newQPushButton("Two");
layout->addWidget(two);
QPushButton*three=newQPushButton("Three");
layout->addWidget(three);
QtQuick.Controls
1
2
3
4
5
6
7
ColumnLayout{
anchors.fill:parent
Button{text:"One"}
Button{text:"Two"}
Button{text:"Three"}
}
Side-by-SideComparison
p
Styling
QtWidgets
QtQuick.Controls
PlatformNativeStyling
PlatformNativeStyling
QtStyleSheets(QSS)
StyleComponent
Replacepartsofthecontrol
QStylePlugins
Side-by-SideComparison
p.
Styling-Example
QtWidgets
QPushButton*button=newQPushButton("ClickMe!",window);
button->setStyleSheet("QPushButton{background-color:white}");
QtQuick.Controls
1
2
3
4
5
6
7
8
9
10
11
Button{
x:50;y:50
text:"ClickMe!"
style:ButtonStyle{
background:Rectangle{
color:"white"
border.color:"#ABABAB"
}
}
}
Side-by-SideComparison
p.
ApplicationWindow
QtWidgets
QMainWindow
MenuBar
StatusBar
AnynumberofToolBars
AddingactionsresultsinTool
Buttons
DockWidgets
CentralWidgetresizedwith
window
QtQuick.Controls
ApplicationWindow
MenuBar
StatusBar
OneToolBar
CreateToolButtons,then
associateaction
Contentitemneedsexplicitresize
handling
Side-by-SideComparison
p.
Dialogs
QtWidgets
StandardDialogs
Color,File,Font,MessagBox,Print,
Progress,Wizard
CustomDialogs
BasetypeQDialog
ModalandNon-modal
QDialogButtonBoxforplatform
correctbuttonhandling
accesstoindividualbuttons
possible
accept/rejectcanbe
intercepted
QtQuick.Controls
StandardDialogs
Color,File,Font,Message
CustomDialogs
BasetypeDialog
ModalandNon-modal
standardButtonsforplatform
correctbuttonhandling
currentlynotaccesstobuttons
Allactionsclosethedialog
Side-by-SideComparison
p.
Tooling
QtWidgets
QtDesignerinQtCreatorandstandalone
CodegeneratedbyUIC
Usedbydelegationincustom
classes
Testing
QtTestforunittesting
SquishforUItesting
Gammarayforruntimeinspection
QtQuick.Controls
QtQuickDesignerinQtCreator
ManipulatesQMLcodedirectly
Usebymanualeditingofthesame
files
Testing
QtTestforunittesting
SquishforUItesting
Gammarayforruntimeinspection
QtCreatorJSdebugger/profiler
C++toolsfordebugging/analysisof
customcode
Side-by-SideComparison
p.
Conclusions
TheQuestion
Side-by-SideComparison
Conclusions
Conclusions
p.
Conclusions
Bothtechnologiesviableforwiderangeofprojects
QtQuick.Controlsnotascompleteyetbutrapidlyevolving
Knowledgeoftypeseasilytransferable
Knowledgeofbehaviornotalwaysapplicable
Conclusions
p.