What is a standard (Qt) way to create single ui.qml file? - qt

Question

In Qt app example, they use single *.ui.qml form files. I understand everything but I was used to creating 2 files, for example, Contact.qml and ContactForm.ui.qml, instead of one ContactForm.ui.qml. Now if I want to create such a single form file, I have/see two options:
While creating standard QML file (Qt Quick 2), I give name and whole .ui.qml extension.
I create QtQuick Ui File (which creates 2 files) and delete one (business logic) file.
For me, both options seem to be workarounds, not the Qt way. Could you show me the Qt way?

Answer 1

(Casually, you can open not only .ui.qml but any qml file in design mode if you follow the roles see this post).
The list of wizards seen when adding new in Creator, are the standard wizards that Qt probably thinks are sufficient and suitable with a general perspective.
Qt offers a solution though ... you can add your own custom wizard to the list of standard wizards in Qt Creator, following Qt documentation Adding New Custom Wizards creation procedure, so you can add more to existing wizards.
Specifically for .ui.qml only (without the qml file) creation, the section Adding JSON-Based Wizards in the above documentation works just fine, for example:
Start Creator from command line with verbose option:
Qt_base\Tools\QtCreator\bin>qtcreator.exe -customwizard-verbose
In Tools, Options, Keyboard ... filter by Factory.Reset and fill up a new short cut, if one does not exist, for example Ctrl+Alt+F10
In folder C:\Qt\Tools\QtCreator\share\qtcreator\templates\wizards\classes ... copy the wizard folder used to create .ui.qml qtquickui and rename it to any name.
Now and most important, inside the new folder, edit the wizard json file to customize your new wizard ..
(1) Give new id following roles described in the link
(2) under options remove the option for adding qml file along with the form.
(3) under pages, remove the field that prompts for qml file name.
(4) in section "name": "FormClass", modify "trText": "%{Class}Form" to "trText": "Form"
(5) under generators , remove the qml file generator and keep the .ui.qml file generator.
After editing is completed, you can now activate the new wizard, to do that press the short cut created above (Ctrl+Alt+F10) and that's all! you should now see your new wizard when you go Add new under Qt section ...
Here is modified version of wizard.json
{
"version": 1,
"supportedProjectTypes": [ ],
"id": "S.QtQuickUi",
"category": "R.Qt",
"trDescription": "Creates a Qt Quick Designer UI form along with a matching QML file for implementation purposes. You can add the form and file to an existing Qt Quick Project.",
"trDisplayName": "QtQuick UI File Only",
"trDisplayCategory": "Qt",
"iconText": "ui.qml",
"featuresRequired": [ "QtSupport.Wizards.FeatureQtQuick.UiFiles" ],
"enabled": "%{JS: [ %{Plugins} ].indexOf('QmlJSEditor') >= 0}",
"options" : [
{ "key": "UiFile", "value": "%{FormClass}.%{JS: Util.preferredSuffix('application/x-qt.ui+qml')}" }
],
"pages" :
[
{
"trDisplayName": "Define Class",
"trShortTitle": "Details",
"typeId": "Fields",
"data" :
[
{
"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": "Form"
}
},
{
"name": "TargetPath",
"type": "PathChooser",
"trDisplayName": "Path:",
"mandatory": true,
"data":
{
"kind": "existingDirectory",
"basePath": "%{InitialPath}",
"path": "%{InitialPath}"
}
}
]
},
{
"trDisplayName": "Project Management",
"trShortTitle": "Summary",
"typeId": "Summary"
}
],
"generators" :
[
{
"typeId": "File",
"data": [
{
"source": "fileForm.ui.qml.tpl",
"target": "%{TargetPath}/%{UiFile}",
"openInEditor": true
}
]
}
]
}

Answer 2

This just seems like a missing feature in Creator. Go with option #1 since it's less work, and report a suggestion/bug that there should be a way to create standalone .ui.qml files.