Working with Widgets

Home » Common Tasks » Working with Widgets
November 25, 2014 Common Tasks No Comments

Adding Widgets *

To add a widget:

  1. Find its icon on a left toolbar.
  2. Drag it onto the screen:

Drag a widget from the left toolbar onto the canvas

 

Display a Widget as Disabled *

Most of the widgets can be displayed as “disabled”, exact look depending on the skin:

  1. Select a widget.
  2. Tick the “Disabled” checkbox on the property panel:

Widgets can be displayed as disabled

 

Note:

  • You can also right-click a widget and choose “Enable/Disable” command from a menu (it switches the current state into its opposite).

Selecting Multiple Widgets *

To select multiple widgets, you can:

  • Shift+click a widget to add it to selection.
  • Drag mouse to select the widgets within a selection rectangle:

Select multiple widgets by dragging a box around them with a mouse

 

Copy-Pasting Widgets *

You can copy-paste a widget by selecting it and:

  • Using cut / copy / paste commands from the “Edit” main menu.
  • Using standard keyboard shortcuts.
  • Right-clicking and using the appropriate command:

Copy a widget via right-click menu

 

In the same way, you can:

  • Copy-paste grouped widgets.
  • Copy-paste multiple selected widgets.
  • Copy-paste widgets between projects.

Grouping / Ungrouping Widgets *

Grouped widgets behave as a single widget. It’s handy for groups of widgets that are often used in exactly the same way (e.g., widgets that make a header for a web-page).

To make a group of widgets:

  1. Select multiple widgets.
  2. Right-click on them and choose “Group Widgets” option:

Group selected widgets from the right-click menu

 

 Changing Z-order: Send to Back / Bring to Front *

Order the way widgets overlap:

  1. Right-click on a widget.
  2. Choose either “Send to back” or “Bring to front”:

Reorder widgets from the right-click menu

 

Distribute Widgets Evenly *

You can distribute multiple widgets both horizontally or vertically, i.e. space them evenly, from the Align command menu:

  1. Select multiple widgets.
  2. From top toolbar, open Align dropdown menu.
  3. Choose whether to distribute widgets horizontally or vertically.

Distribute Widgets Evenly

 

Aligning Widgets to Each Other *

You can select multiple widgets and make them aligned respective to each other via right-click “Align” submenu:

  • Horizontally: left, right, centered.
  • Vertically: top, middle, bottom.

Align selected widgets from the right-click menu

 

Resizing Widgets to Same Width or Hight *

To make the widgets be of the same width or height:

  1. Select the widgets.
  2. Right-click on them and choose the command you need from the “Resize” submenu:

Resize selected widgets from the right-click menu

 

Fit Widget Size to the Text it Contains *

Select the widget, and choose “Fit to Text” option from the “Geometry” tab on the property panel:

Fit to text

 

Checking and Setting Widget Geometry *

When you need to position a widget precisely and explicitly set its size:

  1. Select the widget.
  2. Set its position and size on “Geometry” tab on property panel.
  3. Confirm the changes by clicking the “Change Geometry” button.

Setting widgets geometry

 

Locking Widget Geometry *

With dozens of widgets on a screen, it becomes troublesome to handle them with the mouse. Locking some of them in place helps to make it easier:

Lock widget's position

 

Transforming a Widget to Another Type *

Sometimes, you change your mind when deciding on widget types (for example decide that something is a dropdown, rather than a simple text-field).

You can change widget types without losing the data you entered:

  1. Right-click on a widget.
  2. Choose a transformation from the “Transform” submenu:

Transform a widget to another type