Working on the canvas

The canvas area itself is the visual representation of our project. Visual components are added by selecting a widget from the Palette and, dragging and dropping the widget onto the canvas.

Once placed on the canvas, widgets can be moved around using drag-and-drop and can also be edited using copy, cut, and paste. Widgets can also be rearranged directly in the model tree. For example, selecting the button we placed on layer1 enables us to drag-and-drop it into layer3. In both cases, Studio provides two indicators while the widget is droppable. First, a green or red bar indicates if the selected widget can be dropped there. Visual components can be deleted but they cannot be dropped off the canvas. Attempting to do so will show the red bar and the drop will be ignored. The orientation of the bar also indicates the orientation of the target panel.

The other assistant is a pop-up box that indicates what is being put where. This confirms which widget is being moved and where it is being moved to. The target is expressed as into or after. These should be read as "placing widget X into container Y" or "placing widget X after widget Y (in Y's parent)."

So far we've been using a left mouse button click-and-hold technique to manage widgets on the canvas. Widgets on the canvas also have a right-click pop-up menu. The best known use of the right-click menu is to Edit Columns of a Dojo grid. All of the choices in this menu are also available via the properties of the widget. However, the right-click menu can be a convenient shortcut to use. The Wrap in Panel operation, for example, can be most helpful when building out forms.