QmlDesigner: Add a wizard for a ui.qml .qml file pair

Task-number: QDS-5963
Change-Id: I16ee8361779f11ca2f24f35877869f3e83279d10
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

5 files changed, 170 insertions, 0 deletions

diff --git a/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file.qml.tpl b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file.qml.tpl
new file mode 100644
index 0000000000..7bd94416c4
--- /dev/null
+++ b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file.qml.tpl
@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+%{FormClass} {
+    button.onClicked: console.log("Button Pressed")
+}
diff --git a/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/fileForm.ui.qml.tpl b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/fileForm.ui.qml.tpl
new file mode 100644
index 0000000000..1fcbbe9756
--- /dev/null
+++ b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/fileForm.ui.qml.tpl
@@ -0,0 +1,33 @@
+/*
+This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
+It is supposed to be strictly declarative and only uses a subset of QML. If you edit
+this file manually, you might introduce QML code that is not supported by Qt Design Studio.
+Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
+*/
+
+import QtQuick 2.15
+@if %{UseQtQuickControls2}
+import QtQuick.Controls 2.15
+@endif
+@if %{UseImport}
+import %{ApplicationImport}
+@endif
+
+%{RootItem} {
+@if %{UseImport}
+    width: Constants.width
+    height: Constants.height
+@else
+    width: 1024
+    height: 768
+@endif
+
+    property alias button: button
+
+    Button {
+        id: button
+        x: 64
+        y: 64
+        text: qsTr("Button")
+    }
+}
diff --git a/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file_ui.png b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file_ui.png
new file mode 100644
index 0000000000..473a8430fe
--- /dev/null
+++ b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file_ui.png
diff --git a/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file_ui@2.png b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file_ui@2.png
new file mode 100644
index 0000000000..9cf67e875b
--- /dev/null
+++ b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/file_ui@2.png
diff --git a/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/wizard.json b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/wizard.json
new file mode 100644
index 0000000000..26c628f4b3
--- /dev/null
+++ b/share/qtcreator/qmldesigner/studio_templates/files/qtuiquickform/wizard.json
@@ -0,0 +1,132 @@
+{
+    "version": 1,
+    "supportedProjectTypes": [ ],
+    "id": "Q.QtStudio.QmlUIForm.2",
+    "category": "B.StudioQtQuickFiles",
+    "trDescription": "Creates a UI file (.ui.qml) along with a matching QML file for implementation purposes.",
+    "trDisplayName": "QtQuick UI Form",
+    "trDisplayCategory": "Qt Quick Files",
+    "icon": "file_ui.png",
+    "platformIndependent": true,
+
+    "enabled": "%{JS: value('Plugins').indexOf('QmlJSEditor') >= 0}",
+    "options" : [
+        { "key": "QmlFile", "value": "%{Class}.%{JS: Util.preferredSuffix('text/x-qml')}" },
+        { "key": "UiFile", "value": "%{FormClass}.%{JS: Util.preferredSuffix('application/x-qt.ui+qml')}" },
+        { "key": "ApplicationImport", "value": "%{QmlProjectName} 1.0" },
+        { "key": "RootItem", "value": "%{JS: %{RootItemCB}.RootItem}" },
+        { "key": "UseImportDefault", "value": "%{JS: false}" },
+        { "key": "UseQtQuickControls2Default", "value": "%{JS: true}" }
+    ],
+    "pages" :
+    [
+        {
+            "trDisplayName": "Define Class",
+            "trShortTitle": "Details",
+            "typeId": "Fields",
+            "data" :
+            [
+                {
+                    "name": "Class",
+                    "trDisplayName": "Component name:",
+                    "mandatory": true,
+                    "type": "LineEdit",
+                    "data": {
+                        "validator": "(?:[A-Z_][a-zA-Z_0-9]*|)",
+                        "fixup": "%{JS: '%{INPUT}'.charAt(0).toUpperCase() + '%{INPUT}'.slice(1) }"
+                    }
+                },
+                {
+                    "name": "Sp1",
+                    "type": "Spacer",
+                    "data": { "factor": 2 }
+                },
+                {
+                    "name": "FormClass",
+                    "trDisplayName": "Component form name:",
+                    "mandatory": true,
+                    "type": "LineEdit",
+                    "data": {
+                        "validator": "(?:[A-Z_][a-zA-Z_0-9]*|)",
+                        "fixup": "%{JS: '%{INPUT}'.charAt(0).toUpperCase() + '%{INPUT}'.slice(1) }",
+                        "trText": "%{Class}Form"
+                    }
+                },
+                {
+                    "name": "TargetPath",
+                    "type": "PathChooser",
+                    "trDisplayName": "Path:",
+                    "mandatory": true,
+                    "data":
+                    {
+                        "kind": "directory",
+                        "basePath": "%{InitialPath}",
+                        "path": "%{InitialPath}"
+                    }
+                },
+                {
+                    "name": "RootItemCB",
+                    "trDisplayName": "Root Item:",
+                    "type": "ComboBox",
+                    "data":
+                    {
+                        "index": 0,
+                        "items":
+                            [
+                            {
+                                "trKey": "Item",
+                                "value":
+                                "({
+                                    'RootItem': 'Item'
+                                })"
+                            },
+                            {
+                                "trKey": "Rectangle",
+                                "value":
+                                "({
+                                    'RootItem': 'Rectangle'
+                                })"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "name": "UseImport",
+                    "trDisplayName": "Use Application Import",
+                    "type": "CheckBox",
+                    "data":
+                    {
+                        "checked": "%{UseImportDefault}"
+                    }
+                },
+                {
+                    "name": "UseQtQuickControls2",
+                    "trDisplayName": "Use QtQuick Controls 2",
+                    "type": "CheckBox",
+                    "data":
+                    {
+                        "checked": "%{UseQtQuickControls2Default}"
+                    }
+                }
+            ]
+        }
+    ],
+    "generators" :
+    [
+        {
+            "typeId": "File",
+            "data": [
+                {
+                    "source": "file.qml.tpl",
+                    "target": "%{TargetPath}/%{QmlFile}",
+                    "openInEditor": true
+                },
+                {
+                    "source": "fileForm.ui.qml.tpl",
+                    "target": "%{TargetPath}/%{UiFile}",
+                    "openInEditor": true
+                }
+            ]
+        }
+    ]
+}