QtDesigner

The Middle Earth between developers and ui artists

Daniele Maccioni (aka Gendo)

The "Problem"

In order to create user interfaces artists and developers have to work together.

Two different worlds.

Two different mindsets.

Two different jobs.

Two very different perspectives about what a "good" tool has to be.

Working together means...

• We want to try and test different things
• We both need feedback
• Race condition in specs, milestone, deploy, etc...
• Being productive as much as possible in team

Solution 1:

Keep them separated

• Doing the same job twice
• Coordination nightmares
• Artists need to wait for developers
• Developers need to wait for the artists
• Artists have difficulties testing ideas
• The whole process is not much agile
• Waste of fucking time money

Solution 2

Thou shall learn to code

Solution 3

Let's just put a tool in the middle

?

Coders

Artists

Features Wishlist

• Awesome user interface
• User friendly for artists and non coders
• Mouse based interactions
• Avoid duplication of work: mockup directly integrated in the application
• No coding jargon...
• ... but still deep and useful for developers
• All qml features visually accessible
• Access to scripting too!
• Stable, bug free
• (No fancy toys please)

And this tool is...

... still nonexistent

Questions?

Thank you for your attention

Joking Aside...

We have a tool that can be a free and reasonable compromise, right inside QtCreator (last version >= 3.6)

The
Amazing
QtDesigner

What is QtDesigner

• Tiny layer upon qml files that visually exposes qml features
• Well suited for static mockups, styling components, prototyping pages 
• Reasonable compromise to keep artists closer to the app development
• Updated quite regularly

What QtDesigner is not

• The Savior, the Chosen One, Mr. Wolf
• A complete implementation of every qml feature
• An editor for animations and transitions
• Well suited for dynamic pages and complicated components
• A complete substitute for real coding

What it looks like

• The scene
• The components library
• The preview
• The property editor
• The state editor

The Scene

• It's a direct representation of the qml file
• The tree of components in qml it's the same tree in the QtDesigner
• No black magic

The Library

• Drag&drop components on the scene
• The custom components in the scope are shown here
• Layouts, positioners, views...
• No animations!
• No transitions!
• No loaders!

Properties

• Live property editing
• Bindings
• Connections
• Anchors
• Saves everything in the qml file (no black magic)

States

• Create states for the scene
• Live preview

QtDesigner

QtCreator

...Form.ui.qml

.qml

Ui Files

QtDesigner

Coders

Artists

MyComp

MyComp.qml

MyCompForm.ui.qml

NameForm.ui.qml

• created by QtDesigner
• edited by QtDesigner
• compatible with the subset of QtDesigner features
• it's just an ordinary qml with an ordinary component
• static
• style data

Name.qml

• extends the .ui.qml file
• contains qml scripts
• javascripts
• loaders
• animations
• transitions
• stuff...

MyComp

MyComp.qml

MyCompForm.ui.qml

Two Major Cases

Artist/Designer

Developer

QtDesigner

QtCreator

...Form.ui.qml

.qml

App

n. One

...Form.ui.qml

Mockup

1

2

3

• The designers create a static mockup with QtDesigner
• The developers wrap the component defined in the .ui.qml and implement behaviors, animations, transitions...
• The component is integrated in the application
• The designers can edit the .ui.qml changing style, position...

Artist/Designer

Developer

QtDesigner

QtCreator

...Form.ui.qml

.qml

App

n. Two

flash, png...

Mockup

1

2

3

Magic

Tools

• The designers create a mockup with their tools (photoshop, flash, etc...)
• The coders create the component (ui.qml and .qml) based on the mockup
• The component is integrated in the application
• The designers can edit the component style with QtDesigner, changing the .ui.qml file

Which one?

• Artists expertise with QtDesigner
• Workflow of the project
• Style complexity of the component
• Balancing workload

The result it's the same

QtDesigner used to iterate over ui.qml files

n. One

• Bad ui files. Poor structure, poor component...
• Refactoring
• Too few components
• Delays

n. Two

• Easy in Flash, hard in qml
• Almost empty ui files
• Time consuming

Pitfalls

Example

Loader

Step 1

Divide et Impera

• One component per file (ui.qml + qml)
• Using a lot of components is better than using too few of them
• It's surprisingly easy to accidentally put something wrong in a ui file
• In this case:

1. Buttons
2. Menu with a layout
3. Loader

Loader

Step 2

Smaller components first

The Button

• A background
• Two different states
• A mouse area

Dynamic Properties

• What needs to be animated or used by qml file needs to be exported with an alias
• We want to export any custom property

Step 3

Behavior

import QtQuick 2.4

Item {
    id: root
    property string caption: "none.none"
    property alias mouseArea: mouseArea

    Rectangle {
        id: background
        ...
    }

    Text {
        id: caption
        text: root.caption
        ...
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
    }
    states: [
        State {
            name: "pressed"

            PropertyChanges {
                target: background
                color: "#dd99bb"
            }
        }
    ]
}

import QtQuick 2.4

ButtonForm {
    mouseArea.onPressed: {
        state = "pressed"
    }
    mouseArea.onReleased: {
        state = ""
    }
}

Step 4

Composition

The Menu

• Compose complex components using the simpler ones
• Reuse component created with the QtDesigner
• Drag&Drop
• Combine custom components with basic component and layouts

import QtQuick 2.4
import QtQuick.Layouts 1.2

Item {
    id: root
    property alias fancyWidget: fancyWidget

    ColumnLayout {
        id: layout
        ...

        Button {
            id: button1
            caption: "New Game"
            Layout.fillWidth: true
            Layout.fillHeight: true
        }
        ...

        Item {
            id: fancyWidget
            Layout.minimumHeight: 200
            Layout.fillWidth: true
        }
    }
}

• Remember: no loaders inside ui.qml
• Prepared the place for the loader with a placeholder
• Export with aliases
• Designers will be able to change style properties

Step 5

Dynamic stuff

• Loaders, complex behavior, animations, transitions...
• Javascript code, complex logic
• QtDesigner should remain completely separated

import QtQuick 2.4

MenuForm {
    Loader {
        id: loader
        anchors.fill: fancyWidget
    }

    function loadWidget() {
        ...
        loader.sourceComponent = ...
        ...
    }
}

• Split pages into components
• Split bigger components into smaller components
• Implement smaller components first
• Combine components
• Add behavior
• Add animations, transitions, complex logic

What can the designer do now?

Not everything, but quite a lot...

• Changing every simple detail of the style (colors, sizes, borders...)
• Changing anchors
• Change layouts, spacing...
• Move components around
• Add and remove components
• ...

Questions?

Thank you for your attention

For real this time...