Stage

Using the stage

The stage is a big what you see is what you get area in the center of the project window, and is the place where you layout the objects and define the interactivity of the page that is currently selected.

It works very similarly to other tools, you can place objects on the page by dragging them from the objects panel to the stage. Files can also be added by dragging them over the stage: this will import the file as an asset in the assets library and place an object containing the asset on the stage.

Another way to create an object on stage is by selecting it the objects panel then drag a rectangle on the stage to position the object.

You can select objects on the stage by clicking them (press shift while clicking to select multiple objects) or by dragging a selection rectangle on the stage to select all enclosing objects.

Once selected, object properties can be edited from the object inspector and its interactivity can be defined in the interactivity panel. Also an object can be moved on the stage by dragging it or resized by dragging the resizer squares that surround it while selected. Each resizer square allows to resize the object in a different direction

To rotate an object, select it and move the cursor near a resizing square, slightly outside the object, when a rotate cursor appear, you can drag to rotate.

Right-click on an object on stage to show a contextual menu with shortcuts to many useful operations you can perform on that object.

Double-click an object on stage to edit its contents, e.g. import an image in an image object, edit the text inside a text box or open an editor for a widget and so on. Other generic properties of the selected object(s) are editable from the Selection inspector

Objects can also be placed outside the page frame, for example to move them in subsequently via actions; the space around the page will grow automatically as needed. Also, you can enable page Content Scrolling in the Page Inspector to let your user scroll vertically through the contents of your page, displaying what is below the initial page frame.

Stage Toolbar

On top of the stage you can find its own toolbar, which generally show alignment and arrangement options for the selected objects.

From left to right, the buttons allow to:

• Align selected object(s) horizontally to left
• Align selected object(s) horizontally to center
• Align selected object(s) horizontally to right
• Align selected object(s) vertically to top
• Align selected object(s) vertically to middle
• Align selected object(s) vertically to bottom
• Distribute selected object(s) objects horizontally
• Distribute selected object(s) vertically
• Send selected object(s) to back
• Send selected object(s) backward
• Bring selected object(s) forward
• Bring selected object(s) to front

These commands can also be found in the application menus and by right-clicking selected objects.

The last control, at the right of the stage toolbar, allows the user to set the point of origin for objects coordinates. Usually this is top-left but can be changed at convenience.

When editing some specific objects, the stage toolbar will eventually display contextual functionalities. For example, when editing a text box, the stage toolbar will display appropriate text-editing buttons:

Magnetic Guides

PubCoder fully supports magnetic guides, so objects will snap to guides while moving, creating or resizing them on stage.

PubCoder defines some dynamic guides automatically, allowing your objects to snap to the page edges or to the bounds of other objects, but you can always right-click on the stage to have access to the Guides menu (you can find it also in the View menu in the main menubar) that to manually add static horizontal or vertical guides. Once added to the stage, you can drag them to the desired position, you will find the current coordinates in the coordinates field just below the stage surface.