Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change project .ui file (form) to .qml and .ui.qml file

Tags:

qt

qml

I have a project in qt with .ui forms.

But now I have to get a better visual result (more modern and userfriendly) so I found that qml is somewhat the thing I need.

So the problem is the whole project is based on .ui forms (frontend) and cpp code (backend). I need to find a way to change my forms with qml files.

I searched a little but I don't know how to really use ui component in qml as easily as in ui forms.

Some help would be gladly welcomed

like image 534
MarcAntony Gosslin Avatar asked Jul 01 '19 16:07

MarcAntony Gosslin


People also ask

What is UI QML file?

If you switch between Qt Creator and Qt Design Studio or cooperate with designers on a project, you might encounter UI files (. ui. qml). They are intended to be edited in Qt Design Studio only.

How do I create a QML file?

Creating and Running QML Projects For simple UI files such as this one, select File > New File or Project > Application (Qt Quick) > Qt Quick Application - Empty from within Qt Creator. Pressing the green Run button runs the application. You should see the text Hello, World! in the center of a red rectangle.

How do I import another QML file?

A directory of QML files can also be imported from a remote location if the directory contains a directory listing qmldir file. Then, the directory could be imported using the URL to the remote mycomponents directory: import "http://www.my-example-server.com/myapp/mycomponents" DialogBox { CheckBox { // ... }


1 Answers

As a foreword, don't underestimate the amount of work needed to re-implement the UI of an app.

Then, I would proceed like this, and have a working software all the time during the transition:

  1. Learn QML. Pay special attention to how to share data between C++ and QML (using Qt meta object system and Qt's model view framework, mostly). Don't write any permanent changes to the current app yet (either do learning/PoC programs from scratch, or make a throw-away branch of current code).

  2. Modify current C++-only code to decouple GUI and business logic more (if needed, but I assume it is), using what you learned above about C++-QML interoperatiblity. Concentrate on making the business logic separate, with minimal GUI code changes (because those are going be thrown away eventually).

  3. Convert some parts of the current GUI to QML in QQuickView widgets. Keep the overall widget based GUI structure for now, but aim for these pieces of QML UI to be as final as you can easily make them. Go as far as you practically can with this conversion, keeping the program fully functional. Also, this step is continuation of step 2 in separating the business logic from UI, but now you got actual QML to work against so you will discover new things you must change.

  4. If it is feasible to make it all be QML, then do a final push and get rid of the widgets entirely. If there are some parts of UI which just won't be feasible to re-write in QML, then just complete step 3 by converting everything you want to convert.

like image 116
hyde Avatar answered Sep 27 '22 19:09

hyde