The Designer Windows

• Toolbox : To select controls to be added to the window.
• Properties : To set the properties of the active window or controls.
• Design Region : To select, move and resize the window and the controls.

The Toolbox

We have many buttons.

• Lock : We can use it to draw many controls of the same type quickly.
• Select : We can use it to select a control in the Design Region
• Controls Buttons : Select a control to be added to the window.

The Properties

• When we select the window or one control, We will have the selected object properties.
• Also In the properties window we have a combobox to select the active control.
• Some properties provide a button next to the property value. We can click on the button to get more options.
• When we select more than one control, We will have options for multi-selection

Running Forms

When we save the form file (*.rform), The Form Designer will create two Ring files

• The Controller Class
• The View Class

For example, if the form file is helloworld.rform

The form designer will generate two files

• helloworldcontroller.ring
• helloworldview.ring

To run the program, Open the controller class file then click the Run button (CTRL+F5)

Events Code

1. Just type the method name in the event property.

(2) Then write the method code in the controller class.

In this example we write

func CloseWindow
        oView.win.close()

Where inside the controller class, We uses the oView object to access the form.

Another Example :

The Event Code

func SayHello
        oView {
                LineEdit2.setText("Hello "+ LineEdit1.text() )
        }

Keyboard Shortcuts

After selecting one or group of controls

• Use the Arrows (Up, Down, Left and Right) to move them around.
• Shift + the Arrows (Up, Down, Left and Right) to Resize the controls.
• Del button to delete the controls.
• CTRL+SHIFT+V to Duplicate the controls.

Menubar Designer

From the Window properties we can open the Menubar Designer

Window Flags

From the Window properties we can open the Window Flags window.

Entering Items

For some controls like the List Widget we can enter items separated by comma ‘,’

Using Layouts

1. To use layouts, At first add the layout control to the window.
2. Use the window “Set Layout” property to determine the main layout.
3. From the layout properties determine the controls and the layout type.

More Samples and Tests

Check the folder : ring/applications/formdesigner/tests

Online : https://github.com/ring-lang/ring/tree/master/applications/formdesigner/tests