Important: Please read the Qt Code of Conduct -

Using Designer Ui file in application

  • I tried to read the document here "" but could not understand any part. Could somebody give me an example on how to use this??

  • Thanks in advance!

  • Moderators

    That document only talks about (i) C++ widgets and (ii) QML. It doesn't talk about (iii) Designer .ui files at all.

    Above, (i) - (iii) are 3 ways to make a GUI in Qt. Which one(s) would you like to learn about?

  • Hey JKSH,

    I would like to know how to integrate Qt ui in Qml application. I would like to run an example so that I can understand the concept better,.. THanks

  • Moderators

    Before that, please let us know: do you have experience using any of: (i) C++ QWidgets, (ii) QML, (iii) Designer .ui?

    EDIT: I forgot one: (iv) C++ QGraphicsView

    If we know what experience you have, it's easier to give an example

  • I have experience with QML, C++ WIDGETS no idea abt designer.ui or c++QgraphicsView. I see that i can place items like VB in mainwindow.ui but I dont know how and where to write the code for the particular functionality. I hope you understand the problem I want a sample code containing the components in .ui window and the code in cpp format so that i can learn. THanks for your help. I greatly appreciate it.

  • Just take a look at Qt Creator's built in examples. It's a good starting point ;)

  • Moderators

    You're welcome. I hope I've understood correctly: You have used QML before, and you have written QWidgets in C++ before. Now, you now want to learn how to create GUI elements with Designer, and combine them with your existing QML application. Is that right?

    If so, then it's quite complicated. May I ask why you want to integrate Designer with QML?

    Anyway, here are the steps you need to take:

    First, learn how to integrate QML with your existing C++ QWidgets. The example is in the link you posted, under "Integrating with a QWidget-based UI" -- Just create a QDeclarativeView (it's a C++ widget) and pass it your QML file.

    Second, learn how to use Designer by itself. I'll explain this more below.

    Third, learn how to integrate Designer widgets and your custom C++ widgets. You need to learn how to "promote widgets":

    Finally, you take the QDeclarativeView that uses your QML file, and promote it in Designer.

    [quote author="Julie1986" date="1345803346"]I see that i can place items like VB in mainwindow.ui but I dont know how and where to write the code for the particular functionality[/quote]
    This is for Step #2. If you use Qt Creator to create a new "Qt GUI application", it will automatically create 3 files for you: mainwindow.ui, mainwindow.cpp, mainwindow.h. Your functionality code goes into mainwindow.cpp, just like a normal C++ QWidget

    When you place items in "VB-mode", you can also set their objectName (which is a C++ variable) in the bottom-right corner of your screen. For example, if I insert a Push Button item and set its objectName to "pushButton_quit", I can write this in mainwindow.cpp:

    MainWindow::MainWindow(QWidget *parent) :
    ui(new Ui::MainWindow)

    connect(ui->pushButton_quit, SIGNAL(clicked()), this, SLOT(close())); // I only added this line. The others were automatically-generated

  • Oh cool.. I understood the logic now.. Thanks a lot.. if I have to integrate this file in qml i need to use that Quiloader right??

    My Boss wants me to have a research on the integration part of qml with Qt ui.:(

  • Moderators

    [quote author="Julie1986" date="1345811357"]if I have to integrate this file in qml i need to use that Quiloader right??[/quote]
    As far as I know, you can't integrate mainwindow.ui into QML. :( You can:

    • Integrate mainwindow.ui into mainwindow.cpp automatically
    • Integrate mainwindow.ui into your_other_cpp_gui.cpp, using QUiLoader
    • Integrate your_other_qml_gui.qml into [anything].cpp, using QDeclarativeView

    To combine both QML and Designer, you need to write your code in C++ using

    • QDeclarativeView + QUiLoader, or
    • QDeclarativeView + (promoting widgets in Designer)

    [quote author="Julie1986" date="1345811357"]My Boss wants me to have a research on the integration part of qml with Qt ui.:([/quote]
    Ah... sometimes bosses ask for difficult things. Good luck.

  • :) lol thanks for your time JKSH. You were really kind enough to offer your help. Appreciate it.

  • Moderators

    No problem :) I wish you all the best

  • Hey I found this

    will this solve my problem?? my boss basically wants qml file running back ground with qtwidgets in front

  • Moderators

    That's the article in your original post, right? I've read it already, and incorporated it into my 2nd-last post (above this one).

    I've never heard of placing a C++ QWidget inside a QML program, sorry... it might be possible, but I've never seen it done. The closest thing I can think of is using C++ QGraphicsWidget in front, as described in the article. Note that QGraphicsWidget is very different from QWidget, and it is not supported by Designer. QGraphicsWidget belongs in the Graphics View Framework, which is separate from the QWidget framework.

    QML is very graphics-oriented. Some people would even say that QML is meant to replace Designer and C++ QWidgets. To get rid of QML graphics and replace them with older QWidgets seems a little backwards, and isn't well-supported, IMHO.

  • thanks JKSH for the info.:)

  • Hey JKSH do you have any idea on this??

    its my new query:)

  • the post is [Solved] not the previous comment.:)

Log in to reply