View source for Development/Tutorials/Graphics/Migrate Qt Quick Controls 1

== Import ==

<SyntaxHighlight lang="js">
import QtQuick.Controls 1.4
</SyntaxHighlight>

to
<SyntaxHighlight lang="js">
import QtQuick.Controls 2.8
</SyntaxHighlight>

== Icon ==

<SyntaxHighlight lang="js">
Button {
    iconName: "file-new"
    iconSource: "my-file-new.svg"
}
</SyntaxHighlight>

to

<SyntaxHighlight lang="js">
Button {
    icon.name: "file-new"
    icon.source: "my-file-new.svg"
}
</SyntaxHighlight>

== ToolTip ==

<SyntaxHighlight lang="js">
Button {
    tooltip: "Create new file"
}
</SyntaxHighlight>

to

<SyntaxHighlight lang="js">
Button {
    ToolTip.visible: hovered
    ToolTip.text: "Create new file"
}
</SyntaxHighlight>

== ExclusiveGroup ==

<SyntaxHighlight lang="js">
ExclusiveGroup { id: filterGroup}

Button {
    exclusiveGroup: filterGroup
}
Button {
    exclusiveGroup: filterGroup
}
</SyntaxHighlight>

to

<SyntaxHighlight lang="js">
ButtonGroup { id: filterGroup}

Button {
    ButtonGroup.group: filterGroup
}
Button {
    ButtonGroup.group: filterGroup
}
</SyntaxHighlight>

== SplitView ==

You need at least Qt 5.13 and QtQuick.Controls 2.13. For older system, this might not be supported. You can use RowLayout/ColumnLayout instead if you want to lower system requirements.

== SpinBox ==

The interface in Qt Quick Controls 2 is totally different, especially how decimals are supported. You have to rewrite the whole part following the new documentation.

== TableView ==

You need at least Qt 5.12 and QtQuick 2.12. Note:

# It is from Qt Quick 2, not Qt Quick Controls 2.
# It doesn't support column header.
# It by default only support one column. To support more columns, you have to change your table model in C++.
# The interface is totally different.

Even though we have a TableView, but it is far from useful. In most cases, it is not even better than a ListView. If possible, use ListView instead.

== Examples ==

* [https://invent.kde.org/kde/kdenlive/merge_requests/59/diffs Kdenlive assetList]