Tutorial for using ROSE Qt-Widgets in your project

This small tutorial shows how easy it is to create a small GUI using the Rose-QtWidgets. This is a step-by-step tutorial which creates two widgets, a AstBrowserWidget an a NodeInfoWidget, connects them such that the user can browse through the abstract syntax tree of rose an view the properties of each node. Of course the same can be done using the RoseQt GUI.

This example is part of the ROSE-svn, you can find it at projects/RoseQt/AstViewer

Create .ui file in Qt-Designer

Make sure that you have installed the QtDesigner integration library as described at Qt-Designer Integration

• Create a new empty widget, drag an "AstBrowserWidget" and "NodeInfoWidget" into it (you can find them in the Widget Box, under "Rose Specific Widgets" )
• you can layout them in any way you want and connect them with other Qt-Widgets, in this example they a horizontal layout was used. You can create a layout by right clicking on the top-widget
• optionally you can create links via signals/slots in QtDesigner (can also be done in the code) in this example the setNode() signal of the AstBrowser was connected to the
  setNode() of the NodeInfoWidget. Every time the user clicks on a node in the AstBrowser it's properties are shown.
• Set the name of the widget, by clicking on it, and then change the objectName in the Property Editor (this name is needed to access the form in the code)

You can find the example ui-file which creation is described here, in the AstViewer directory (MyWidget.ui)

Code

This is all the code to get the example running:

    #include "rose.h"
    #include "ui_MyWidget.h"

    #include <QApplication>

    int main(int argc, char**argv)
    {
            SgProject * proj = frontend(argc,argv);
            QApplication app (argc,argv);

            QWidget * wdg = new QWidget();

            Ui::MyWidget ui;
            ui.setupUi(wdg);

            wdg->show();
            ui.astBrowserWidget->setNode(proj);

            app.exec();

            return 0;
    };

First the .h file which was created from the .ui has to be included. If you use the provided makefile-rules its name is ui_NameOfUiFile.h . Then a new QApplication and QWidget is created, the configuration object, which was created by QtDesigner is used to setup the main-widget. Finally the exec() function of the QApplication is called, which starts the GUI.

BuildSystem

Here is the Makefile.am which you need in order to build this example project. For a more detailed description of how to use Qt and autotools see Setup of BuildSystem

    include $(top_srcdir)/src/roseExtensions/qtWidgets/Make.inc

    if ROSE_WITH_ROSEQT

    INCLUDES += . $(ROSE_INCLUDES)
    bin_PROGRAMS = AstProperties
    AstProperties_SOURCES = main.cpp
    nodist_AstProperties_SOURCES =  ui_MyWidget.h
    BUILT_SOURCES = ui_MyWidget.h
    AstProperties_LDADD = $(ROSE_LIBS)

    endif

---