How to use the Designer

This tutorial will show you how to use the Designer, the powerful visual tool of Ultimate++. It is different in many aspects from the designers of other GUI. I address you to the official documentation for further details while here you will see it in action. We begin from scratch creating a new package, say TestDesigner:

and then selecting "Basic CtrlLib application".

When you click ‘Create’ will be automatically created the file main.cpp and an *.upp file containing useful information for the compiler. The main.cpp is shown below:

#include <CtrlLib/CtrlLib.h>

GUI_APP_MAIN
{
}

Because we are going to use the Designer we need to modify it in order to accommodate the next code. The new main.cpp should look like the following code (please type or copy and past from below and save it, CTRL+S):

#include <CtrlLib/CtrlLib.h>

// the next two lines are mandatory when you import a layout made by Designer
#define LAYOUTFILE <TestDesigner/mywidget.lay>
#include <CtrlCore/lay.h>

// here we'll insert the code coming from the Designer
// ............................
// ............................

GUI_APP_MAIN
{
}

In the above code the #define will import the widget we are going to create with the Designer. Please note the <…> and the package directory followed by the name of the file where the layout resides. Let’s go to create this last one. Right click on the left-bottom panel of TheIDE and select "Insert package directory file(s)".

Then enter the filename mywidget.lay (the same filename appearing in the previous #define!)

When you press Open TheIDE will become the Designer. Please note that if you want to use the Designer you must create a file with extension .lay otherwise the Designer will not appear! Now let’s create our first layout. Right Click where indicate by the arrow mouse below  and select "Add new layout".

When a new prompt window will appear enter a name for the new layout. I have typed "MyFirstWidget".

The Designer now shows on the right side a rectangular area, the layout, that you can resize. This area can be filled with objects (widgets) like label, edit field, button and so on. For example to add a LabelBox right click inside the layout and from the popup menu choose LabelBox. Then resize it as you want.

When the LabelBox or any other widget is selected you can tune its properties by using the panel on the left side. For example I’ve set  the string showed on the top-left side (see under SetLabel property)

Now on the layout please drop an EditString field (from InputFields menu), a Button (from Push menu), and a Label (from Static menu). For the moment do not change their properties. The layout at the end should look like this:

For the moment it is enough, it’s time to see how looks the layout in the real application. Please enter the key combination ALT+C (or from menu Edit/Generate Code) and the following window will appear:

The previous code is sent automatically to the clipboard. Now paste it with CTRL+V in the main.cpp file at the place of the three commented lines. The code now look like this.

#include <CtrlLib/CtrlLib.h>

#define LAYOUTFILE <TestDesigner/mywidget.lay>
#include <CtrlCore/lay.h>

class MyFirstWidget : public WithMyFirstWidget<TopWindow> {
public:
     typedef MyFirstWidget CLASSNAME;
     MyFirstWidget();
};

MyFirstWidget::MyFirstWidget() //constructor of the class
{  CtrlLayout(*this, "");
}

GUI_APP_MAIN
{ MyFirstWidget app; // create an instance of the class
  app.Run();         // execute its constructor
}

where I’ve added even two more lines in GUI_APP_MAIN to create and then run an instance of our new widget. You can save main.cpp and execute it (CTRL+F5). You should see a window like this

Close the previous window and let’s add some interaction among the previous objects. In particular we want enter a string on the EditString and move it on the Label when the button is pressed. For this purpose we need a way to refer to these objects and add a little code. The Designer itself has already named these objects for us. When the Designer is active

press CTRL+T and you can see its text mode:

In fact it has a double face, graphical and textual, and you can work on that you like. You can see from the code above, for example, that the name of the layout is MyFirstWidget, while the Button is called dv___2, the EditString is called dv___3, and the Label is dv___1. Let’s change these last three names respectively in btn, edit and lbl by typing at the place of their ugly names:

If you press CTRL+T again you can see this modification in the graphical side

Of course you may want to add a label to the button, say “move string =>”, modifying its label property. To add a little interaction we need to add a callback to the button btn when it is pressed. After the new modification main.cpp read:

#include <CtrlLib/CtrlLib.h>

#define LAYOUTFILE <TestDesigner/mywidget.lay>
#include <CtrlCore/lay.h>

class MyFirstWidget : public WithMyFirstWidget<TopWindow> {
public:
    void BtnPush()
    { String s= ~edit; // get the string in edit 
      lbl.SetLabel(s); // set the string in the label
      edit <<= Null;   // clear edit
    }

     typedef MyFirstWidget CLASSNAME;
     MyFirstWidget();
};

MyFirstWidget::MyFirstWidget()
{    CtrlLayout(*this, ""); 
     btn.WhenAction = THISBACK(BtnPush); // callback
}

GUI_APP_MAIN
{ MyFirstWidget app;   
  app.Run();
}