CopperSpice API  1.7.4
UI Form Edit Mode

Objects can be dragged from the Widget Box pane to any open form. Once a control is dropped on the form you can edit any of its properties, resize it, drag it around and even drag it to another open form. Object properties can be modified interactively and these changes will be seen immediately.

  • To create a new form open the File menu and select New Form... or press Ctrl+N
  • Existing forms can be edited by selecting Open Form... from the File menu or pressing Ctrl+O
  • New forms are saved by selecting Save Form As... from the File menu
  • Existing forms are saved by selecting Save from the File menu or pressing Ctrl+S

The following is an image of a simple form.

Editing a UI Form

Objects are added to a form by dragging them from the Widget Box pane and dropping them in the desired location on the form. Once a control is on the form it can be moved around by dragging or using the cursor keys. Pressing the Ctrl key at the same time moves the selected widget pixel by pixel, while using the cursor keys makes the selected widget snap to the grid when it is moved. Objects can be selected by clicking on them with the left mouse button. You can also use the Tab key to change the selection.

The Widget Box contains objects in various categories, all of which can be placed on any form. The objects located in the Container section can have child widgets dropped inside of them. For more information refer to the documentation on Using Containers in Designer.

Selecting Objects

Objects on the form are selected by clicking on them with the left mouse button. When an object is selected, resize handles are shown at each corner and the midpoint of each side, indicating that it can be resized. To select additional objects, press the Shift key and click on another control. If more than one object is selected, the current object will be displayed with resize handles with a slightly different color.

Controls can also be selected using the Object Inspector.

When a widget is selected normal clipboard operations such as cut, copy, and paste can be performed on it. All of these operations can be done and undone, as necessary.

Shortcuts

The following table show the actions (apart from cloning) which can be accessed from both the Edit menu and the form's context menu. These menus also provide functions for laying out objects as well as a Select All function to select all the objects on the form.

ActionShortcutDescription
CutCtrl+X Cuts the selected objects to the clipboard.
CopyCtrl+C Copies the selected objects to the clipboard.
PasteCtrl+V Pastes the objects in the clipboard onto the form.
DeleteDelete Deletes the selected objects.
Clone objectCtrl+drag (left mouse button) Makes a copy of the selected object or group of objects.
PreviewCtrl+R Shows a preview of the form.

Adding Widgets

Widgets are not unique objects. You can make as many copies of them as you need. To quickly duplicate a widget, you can clone it by holding down the Ctrl key and dragging it. This allows widgets to be copied and placed on the form more quickly than with clipboard operations.

Widgets can be dragged from the Widget Box and dropped onto the form. Widgets can also be cloned by holding down Ctrl and dragging the widget. This creates a copy of the widget which can then be dragged to a new position. You can also drop Widgets on the Object Inspector.

The Designer program allows controls to be copied, pasted, and dragged between forms. You can use this feature to create more than one copy of the same form and experiment with different layouts.

Property Editor

The Property Editor always displays properties of the currently selected object on the form. The available properties depend on the object being edited, but all of the widgets provided have common properties such as objectName, the object's internal name, and enabled, the property that determines whether an object can be interacted with or not.

The property editor uses standard input widgets to manage the properties of objects on the form. Textual properties are shown in line edits, integer properties are displayed in spinboxes, boolean properties are displayed in check boxes, and compound properties such as colors and sizes are presented in drop-down lists of input widgets.

Modified properties are indicated with bold labels. To reset a property click the arrow button on the right. Changes in properties are applied to all selected objects which have the same property.

Many of the properties have additional editing capabilities.

Compound properties
Properties which have more than one value are shown with an arrow to the left of the name. Clicking on the arrow will show additional rows where more information can be specified. For example, the font property has additional fields for the font name and font size.
Flag properties
Properties that contain a selection of flags are configures with checkable items. For example, the property renderHints in a QGraphicsView
Rich Text Edit properties
The QLabel control has a property called text. This is the information which is displayed on the form for the user. If you double click on the control you can edit the label directly. However, if you want to enter formatted text use the property editor and select the "..." button for the text property.

Object Inspector

The Object Inspector displays a hierarchical list of all the objects on the form that is currently being edited. To show the child objects of a container widget or a layout, click the handle next to the object label. Each object on a form can be selected by clicking on the corresponding item in the Object Inspector. Right-clicking opens the form's context menu. These features can be useful if you have overlapping objects. To locate an object in the Object Inspector, use Ctrl+F.

Double clicking on the name of the object allows you to change the name with the in-place editor. The Object Inspector displays the layout state of the containers. The broken layout icon is displayed if there is something wrong with a layout. As an example, this can occur if the layout is missing from the container.