Skip to content

User Interface Editor

When you select a component in the "Components Used" list, sometimes you can click "Edit XXX" to edit all Windows visual controls that define the UI component. The UI Editor is then displayed:

UI Editor

UI Editor

The UI editor is similar to Embarcadero Delphi and C++ Builder Form Designer. On the right side, you have different controls that you can place on the UI form. On the left side, you can edit properties of the selected control(s) with the Properties Editor. On the top left side, you can choose a control in the list and associate actions to it (if any).

Each control has its own unique name. You can't change the name directly in the Properties Editor (see below). You are prompted for the name when you add a new control to the form.

Add a new control

Choose the type of control you want and place it onto the form (or double-click). You can resize the control with the grips. Note that some controls are containers and can own other controls called children: containers available are TscPanel, TFlowPanel, TscToolbar, and TscToolPager.

The best way to create new controls is to copy and paste existing ones. To quickly modify an existing UI model, use the Copy/Cut/Paste buttons:

Copy and paste controls

Several topics are dedicated to specific controls: please take a look at - menu bar - tool bar - ribbon - image logo - timer (cron jobs)

Edit Properties

The Properties Editor shows all properties of a control. It works the same way as the Properties editor described here. You don't have to modify all properties. Only some of them are useful such as Caption, Align, Name, Enabled, Visible...

Some controls such as TImageList have specific property editors: you can double-click on them to open the specific editor.

Align controls for resizing

To create UI controls that resize properly, use the following control properties. Watch a tutorial at https://www.youtube.com/watch?v=puO2XLR0azI:

  • Align
  • AlignWithMargins
  • Anchors
  • Margins
  • Padding

Rename a control

You can't rename a control once it has been created. The Name property is read-only!

Remove a control

Select the control(s) you want to delete and click the Delete button (or press the DEL key).

Import/Export a model

Several ready-to-use (and ready to modify) models are shipped with ExeOutput for PHP. You'll find them in the UIModels subfolder of your ExeOutput for PHP location. Model files are given the .exouim extension. You can export your own models too.

Control Actions

When you place menu items or buttons on the UI form, you must associate an action that will be performed when the user clicks the button/menu item.

See all available control actions

Modify control at runtime

It's possible to change the control's properties at runtime.

Refer to the dedicated topic "How To Modify Controls At Runtime".