When you select a component in the Components Used list, you can sometimes click “Edit…” to modify the Windows visual controls that define that UI component. The UI Editor will then be displayed:
The UI Editor #
The UI editor is similar to the form designers in Embarcadero Delphi and C++ Builder. On the right side is a palette of different controls that you can place on the UI form. On the left, you can edit the properties of selected controls with the Properties Editor. In the top left, you can choose a control from the list and associate actions with it, if applicable.
Each control has its own unique name. You cannot change the name directly in the Properties Editor (see below). You are prompted for a name when you add a new control to the form.
Adding a New Control #
Choose the type of control you want and place it on the form (or double-click it). You can resize the control using its grips.
Note that some controls are containers that can own other controls (called children). Available containers include TscPanel, TFlowPanel, TscToolbar, and TscToolPager.
The easiest way to create new controls is to copy and paste existing ones. To quickly modify an existing UI model, use the Copy, Cut, and Paste buttons:
See the dedicated topics for these specific controls:
Editing Properties #
The Properties Editor displays all properties for the selected control. It works the same way as the main Properties editor.
You do not have to modify all properties. Only some are typically used, such as Caption, Align, Name, Enabled, Visible, etc.
Some controls, such as TImageList, have specific property editors that you can open by double-clicking them.
Aligning Controls for Resizing #
To create UI controls that resize properly, use the following properties. You can also watch a tutorial at https://www.youtube.com/watch?v=puO2XLR0azI:
- Align
- AlignWithMargins
- Anchors
- Margins
- Padding
Renaming a Control #
You cannot rename a control after it has been created. The Name property is read-only.
Removing a Control #
Select the control or controls you want to delete and click the Delete button (or press the DEL key).
Importing/Exporting a Model #
ExeOutput for PHP ships with several ready-to-use and modifiable models. You can find them in the UIModels subfolder of your ExeOutput for PHP installation directory. Model files have the .exouim extension.
You can also export your own models.
Control Actions #
When you place a menu item or button on the UI form, you must associate an action with it that will be performed when the user clicks it.
See all available control actions
Modifying Controls at Runtime #
It is possible to change a control’s properties at runtime.
Refer to the dedicated topic “How To Modify Controls At Runtime“.
