Adding QtQuick Base Windows to an Existing QWidgets Application-dark

8/19/2019 Adding QtQuick Base Windows to an Existing QWidgets Application-dark

1/40

Adding QtQuick based windowsto an existing QWidgetapplication

Michael EadsSenior Tools EngineerTelltale Games


2/40

Outline● Introduction

● Application Structure Overview

● Desktop User Interface Elements

– Actions, Menus, Menubars, Toolbars

– Quirks

●

Application Q!id"et Inte"ration● #onclusion

● Questions


3/40

Introduction


4/40

Who We Are● $ounded in %&&' b( former )ucasarts Emplo(ees

● *ideo +ame Developer and self ublis-er, releasin" on multiple platforms.

/bo0 12&One, S1', #, Android, and iOS

●

rimaril( Develop )icensed, Episodic, Stor( driven Adventure +ames● $or E0ample333


5/40


6/40

What I do● Make Tools for Makin" Telltale +ames

– roprietar( 4no pictures, sorr(56

–

!indows onl( 4for now6 – Desktop onl(

– Multiple !indow Interface

● Multiple QM) and Q!id"et !indows open simultaneousl(

● Several "enerali7ed tools 4i3e3 "ame data Inspector6

● QM) Quick

– +rap-ical displa( and interaction

● Standard Desktop interface

– Menus, Toolbars, S-ortcuts, etc3

● Toolin" runnin" alon"side +ame En"ine


7/40

Application Structure Overview


8/40

Game Development Tools nvironment● +ame En"ine Operation 8 Tool Over-ead

● +eneral strict performance re9uirements

– 1& $S8 wit- tools runnin"

– #an result in stran"e trades

● Model updates at :&$S for user interaction

● #ertain QM) Inte"ration met-ods unfeasible

Game Update / Render Qt Tool / Model Updates

30+ Times Per Second (Not to Scale


9/40

General Application Setup

Game !ataModel("++

Game Engine("++# non$Qt

Slot %an&("++

QM' nter)ace

Modi)ies

Modi)ies

Polls

User nteraction

Updates

Mo*se nteraction

orce Updates or UndoQ*er, State(Selection# Undo


10/40

!"" Structure● +ame Data

– Mostl( non Qt QOb;ect based 4internal "ame en"ine data6

– #ontinuousl( updatin", often wit-out callbacks or

notification

– Data esponds


11/40

Qt Structure● ollin" Model

– olls "ame data multiple times a second

– Sets model roles for "ame data c-an"es

– Mana"es settin"s as properties

● Slot ?ank

–

@andles most "ame en"ine interaction – #-an"es "ame data directl(

– Model responds on ne0t update loop

– #an also force immediate update for responsiveness safet(

● Undo>edo, Delete


12/40

Q#$ Setup● ature of QM) Data

– *iew based

● QM) does visuali7ation of #88 data t-rou"- model

● Most interaction t-rou"- Menu Toolbar

● ?asicall( no data entr(

– Mouse interaction primaril(

– Si"nal out or invoke to #88


13/40

Q#$ Setup % cont&

● Data provided t-rou"- custom Model roles

– #reates QQM)#onte0t for eac- QM) #omponent

– Sets model roles as #onte0t roperties

– #reates QM) #omponent into t-is conte0t

–

Updates #onte0t roperties as part of pollin"● Mouse interaction

– Sets top level properties for #88 4mouse point, etc36

–

#omponents Application!indow si"nal out for interaction


14/40

Desktop 'ser Inter(acelements


15/40

'ser Inter(ace lements● QtQuick #ontrols

– QM) Items for desktop interface elements

–

Most Q!id"et interaction elements -ave correspondin"#ontrols

● QAction Action, QMenu Menu, QTool?ar Tool?ar, etc3

● Q#ombo?o0, Q)ineEdit, more limited

●

All be-ave sli"-tl( different, or -ave missin" elements● QtQuick Dialo"s

– $ile, #olor, Messa"e

– o QInputDialo" e9uivalentB


16/40

QAction and QtQuick Action● Action -as most QAction properties

– Te0t, #-ecked#-eckable, Enabled, S-ortcut, Icon, Tooltip

– #an be added to QM) Items for s-ortcuts

● otable missin" items

– *isible. #anCt -ide ever(t-in" t-at references an action b(

controllin" visible

– S-ortcut conte0tB


17/40

xtending Action● Add in *isible propert(

// MyAction.qml

Action{ property bool visible: true}

// MyMenuItem.qmlMenuItem

{ visible: action.visible}


18/40

Q#enu and QtQuick #enu● )ike QActionAction, mostl( similar

– Add MenuItems, Actions, etc3

– Supports enabled, icon, visible, etc3

● Some missin" elements

– aboutTo@ide, aboutToS-ow si"nals

– @inders d(namic menu updates w-en visibilit( c-an"es


19/40

xtending #enu● Addin" menuAboutToS-ow Si"nal// MyMenu.qmlMenu{

signal menuAboutToShow

property bool showingopup: !alse"

onopup#isible$hange%: { showingopup & 'showingopup" i!(showingopup) { menuAboutToShow() } }}


20/40

xtending #enu % cont&● !orks for si"nalin" open

● Allows for d(namic updatin"

● 333@owever, onopup*isible#-an"ed is privateB

– onpopup*isible#-an"ed in some versions

– popup*isible propert( private

– Ma(be s-ouldnCt be usedB


21/40

xtending #enu % cont&

● !it- menuAboutToS-ow si"nal, we can

d(namicall( update Menus – #an be done t-rou"- QMetaOb;ect..invokeMet-od4menu,

+4QStrin", te0t66

– Or, create avascript function in menu


22/40

D)namicall) Adding Items to #enu// In MyMenu.qml!unction a%%ToMenu(string*ames+ action) {

menu.clear() var item" i!(string*ames.length , -) { menu.visible & true"

!or(var i & -" i string*ames.length" i){item & menu.a%%Item(string*ames0i1)"

item.action & action"}

} else menu.visible & !alse}

// In $

2Meta3b4ect::invo5eMetho%(menuointer+ 6a%%ToMenu6+ 2t::7irect$onnection+28A9(2#ariant+ 2#ariant::!rom#alue(itemsToA%%))+ 28A9(2#ariant+2#ariant(actionointer)))"

// I! you nee% to re!er or iterate over elements22ml;ist9e!erence menuItems(menuointer+ 6items6)"!or(int i & -" i menuItems.count()" i){

23b4ect< item & menuItems.at(i)"}


23/40

Tool*ars vs QTool*ar + Quirks● #ontrols Tool?ar s-ares almost not-in" wit- QTool?ar

–

Uses


24/40

!ontrols #enu , Quirks● Slow to open

– $ew tent-s of a second

on some computers

● $las- or blink on

S-ow

● #lickin" a Submenu

closes all open menus


25/40

Quick #enus , Quirks● @ei"-t not correct on

first s-ow w-en F%&

Menu Items are used

– #an be too lar"e,

e0tendin" drop s-adow

– #an be too small,truncatin" menu options


26/40

!ontrols #enus , Quirks● !idt- not correct for MenuItems wit- lon" te0t

– Truncates te0t

– Overlaps s-ortcut listin"

● #an be compensated for b( addin" paddin" w-itespace


27/40

!ontrols #enu , Quirks● Menus truncate on

multiple monitors

–

Makes some menu optionsimpossible to c-oose based on

position

– Affects all menus, but especiall(

bad for conte0t menus

– Onl( seems to -appen wit-monitors of different resolution,

includin" rotated monitors


28/40

Application + QWidget Integration● Inte"ratin" wit- Q!id"et !indows

– Q!indow QQuick!indow QQuick*iew

– QQuick!id"et

– Q!id"et..create!indow#ontainer

● Minimi7in" #ontrols Usa"e

● Mana"in" $ocus Issues


29/40

QWindow + QQuickWindow +QQuick-iew● Simplest

●

Direct QM) wit- no wid"et mi0in"● ?est erformin"

● ?asicall( no knowled"e of Q!id"ets

– o parent c-ild setup

– )aunc-in" an( !id"et window will cause


30/40

QQuickWidget● Actual Q!id"et wit- QM) inside of it

● Allows for Q!id"et parent c-ild and modal windows

● Allows for Q!id"et mi0in" wit- QM)

● ?e-aves properl( wit- Q!id"et -ierarc-(

– !id"et stacks, transparenc(, etc3

–

Sacrifices some performance for correctness● erformance #onsiderations

–


31/40

QWidget..createWindow!ontainer ● )ike QQuick!id"et, allows embeddin" QM) and !id"et mi0in"

● Sacrifices !id"et stackin" accurac( for performance

– !orks "reat for entirel( QM) application w-ere stackin" doesnCt matter

– Muc- better performance relative to Q9uick!id"et for multiple windows

● $or our case. $rame renderin" 8 Model ollin" 8 !id"et Over-ead

● >esults in near Q!indow performance

●

Several $S over Q9uick!id"et,● Oddit( of our setupB

● Set Q!indow container wid"et as $ocus ro0( for top level Q!id"et

● Our preferred met-od for usin" QM)


32/40

!reateWidget!ontainer xample// =ithin 2=i%get %erive% class

22ml$omponent win%ow;oa%er(qml>ngine+ this)"=in%ow;oa%er?,loa%@rl(2@rlqrc://My2ml=in%ow.qmlB)"

22uic5=in%ow< quic5=in%ow & qob4ect8cast22uic5=in%ow


33/40

#inimi/ing !ontrols 'sage● On !indows, controls are roblematic

●

Man( Small problems – ?e-avior is 9uite different from platform standard and

Q!id"ets

– Man( minor anno(ances

● Some )ar"e roblems

– Menu Truncation on multiple monitors


34/40

#inimi/ing !ontrols 'sage %cont&● !it- QQuick!id"et or create!indow#ontainer

standard Q!id"ets can be mi0ed in● !orks especiall( well for QMenu, QAction, QTool?ar, etc3

● Avoids current problems wit- #ontrols

●

?etter focus -andlin"

● #auses some ot-er uni9ue c-allen"es


35/40


36/40

0andling 1ocus Issues cont&● Avoidin" activation infinite loop

– Set container Q!id"etCs focus polic( to o$ocus

– Set focus onto it later manuall( or w-en needed

– QM) $ocus will still operate its own wa(


37/40

0andling 1ocus Issues, cont&● QMenu $ocus roblems

●

i3e3, QMenu..popup for conte0t menus over QM) area● #an be fi0ed b( settin" focus back on QMenu..aboutTo@ide.

// In .cpp+ along with 2Menu creation23b4ect::connect(

m8myMenu+ F2Menu::aboutToGi%e+0&1() { m8container?,setDocus()" })"


38/40

!onclusion● #-oose between eit-er QQuick!id"et or

create!indow#ontainer

● Embed QM) and use it for w-at its needed for

● Use Q!id"ets for desktop interface components

●

$or !indows Desktop at least● One last t-in"333


39/40

We2re 0iring3● Tools En"ineer G Qt 4#ore Tec-nolo"(6

– 18 Hears of #88 E0perience

–

:8 Hear of Qt E0perience – rimaril( Q!id"et development focused

● #ome pick up a ;ob fl(er

● ob website. -ttp.www3telltale"ames3comcompan(;obs

● Meet our >ecruiters at t-e bar after t-e conference on t-e

t-


40/40

Questions4

Date post:	07-Jul-2018
Category:	Documents
Upload:	eliaezekiel
View:	226 times
Download:	0 times

Adding QtQuick Base Windows to an Existing QWidgets Application-dark

Documents