How to Add Items

Once you have created a new prototype, you can add items to it. Some items get added to the Structure tree while some others are added in the Composer.

Items added to the structure tree	Items added to the composer
Add a form	Add a control or an addon
Add a menu bar and menus	Add a card to a card panel
Add a toolbar and buttons	Add a tab to a tabbed pane
Add a border
Add an event listener

Added to the structure tree

Items from the Forms, Menus, Toolbar, Borders and Events palettes are added to the structure tree.

To add an item to the tree

select a parent item in the tree (for example, to add a form select the parent item Forms)
select the desired palette item
it gets added as a child of the selected item

Add a form

Select the item Forms in the tree

The Forms elevator tab displays in Palette

Let's add a Dialog box. Select the form in the palette.

Follow steps and above to add a frame, an option pane, a file chooser or a color chooser.

It gets added to the tree as a child item of Forms.

Add a menu bar and menus

	Select a frame or dialog box in the tree (Note: Menu bar cannot be added to an Option Pane, a File Chooser or a Color Chooser)
	The Controls elevator tab displays in Palette Select the control Menu Bar
	It gets added to the tree as a child item of Frame (Prototype Title).
	When menu bar is selected in the tree, the Menus elevator tab displays in Palette. Select the palette item Menu (Note: All items except Menu are dimmed because only a Menu can be added to a Menu bar)
	It gets added to the tree as a child item of Menu Bar.
	When menu is selected in the tree, the Menus elevator tab displays in Palette Select the palette item Menu Item (Note: Radio Button Menu Item is dimmed because it can only be added to a Button Group)
	It gets added to the tree as a child item of Menu. Follow steps and above to add a menu as a sub-menu, a separator, a check box menu item and a button group.
	To add a radio button menu item, you need to first add a button group. When button group is selected in the tree, the Menus elevator tab displays in Palette Select the palette item Radio Button Menu Item (Note: Only Radio Button Menu Item and Separator can be added to a Button Group)
	It gets added to the tree as a child item of Button Group.

Add a toolbar and buttons

There are 2 types of toolbars that can be added: horizontal toolbar and vertical toolbar. They are both added the same way. What is special about toolbars is that you first add the toolbar itself to the composer, allowing you to position it where you want but the toolbar items are added and managed in the tree structure (similar to the way you add menus)

	Select a frame or dialog box in the tree or a panel. (Note: Toolbars cannot be added to an Option Pane, a File Chooser or a Color Chooser) The Controls elevator tab displays in Palette Select the control Horizontal Toolbar Drag and drop to the composer
	It gets added to the tree as a child item of Panel. When toolbar is selected in the tree, the Toolbar elevator tab displays in Palette Select the palette item Button (Note: Toggle Button is dimmed because it can only be added to a Button Group)
	It gets added to the tree as a child item of Toolbar and also in the composer.
	To add a toggle button, you need to first add a button group to the toolbar. When button group is selected in the tree, the Toolbar elevator tab displays in Palette Select the palette item Toggle Button (Note: Only Toggle Button and Separator can be added to a Button Group) It gets added to the tree as a child item of Button Group and also in the composer.

Add a border

Most tree items can have a border. An item can only have one border. However, when you need more borders (let's say an empty border and a titled border), you need to first add a compound border and add the two borders as child of this compound border. You can have an unlimited number of borders because you can add a compound border to a compound border.

	In our example, we will first add a border to the toolbar. (How to add a toolbar) Select Toolbar in the tree. Select the Borders elevator tab in Palette Select the palette item Line Border
	It gets added to the tree as a child item of Toolbar. When toolbar is selected again in the tree, the Borders elevator tab doesn't display anymore because Toolbar already has its border.
	Now we will add an empty border and titled border to the panel. Select Panel in the tree. Select the Borders elevator tab in Palette Select the palette item Compound Border
	It gets added to the tree as a child item of Panel. When panel is selected again in the tree, the Borders elevator tab doesn't display anymore because Toolbar already has its border. But if you select the item Compound Border in the tree, the Borders elevator tab displays again.
	Select the palette item Empty Border. It gets added to the tree as a child item of Compound Border. Select the item Compound Border again in the tree. The Borders elevator tab displays again. Select the palette item Titled Border. It gets added to the tree as a child item of Compound Border. When compound border is selected again in the tree, the Borders elevator tab doesn't display anymore because Compound Border already has its limit of two borders.

Add an event listener

Most tree items can have an event listener. An item can have more than one event listener.

In our example, we add an event listener to the Frame.

Select the item Frame in the tree (Prototype Title)

Select the Events elevator tab in Palette

Select the palette item On Component

It gets added to the tree as a child item of Frame.

When frame is selected again in the tree, you can add other events.

Select the newly add event listener

The property panel shows the properties that can be set on this event listener.

Added to the composer

Items from the Controls and Addons palettes are added to the composer.

To add a control or addon to the composer

select a parent item (usually a panel)
select the control or addon in the Palette by clicking its icon. Without releasing the mouse button, drag the control or addon to the desired location in the form
release the mouse button to drop the control or addon

To add multiple controls from the Palette:

select the control you want to add in the Palette by clicking its icon
while holding down the Ctrl key, click the location in the form where you want to place the first control or addon
click each additional location in the form that you want to place an instance of the control or addon you selected in the Palette

To add within nested containers

When working with nested containers, it is sometimes difficult to select the container to which you want to add the control or the addon. You must first select the desired container before selecting the control or addon you want to add.

Add a control or an addon

Select a

frame or

dialog box in the tree or a

panel. (Note: Controls and addons cannot be added to an Option Pane, a File Chooser or a Color Chooser)

The Controls elevator tab displays in Palette

In our example, we will add a Button

Select the palette item Button

Drag and drop to the composer

It gets added to the tree as a child item of Panel.

Add a card to a card panel

	Add a card panel to the composer (see How to add a control to the composer)
	Select card panel in the tree
	You see the contour of the card panel with a yellow arrow on the top right corner. When you click the arrow, a popup menu displays. Select 'Add a Card'.
	It gets added to the tree as a child item of Card Panel.

Add a tab to a tabbed pane

	Add a tabbed pane to the composer (see How to add a control to the composer)
	Select tabbed pane in the tree
	You see the contour of the tabbed pane a yellow arrow on the top right corner. When you click the arrow, a popup menu displays. Select 'Add a Tab panel'.
	It gets added to the tree as a child item of Tabbed Pane.