Basic widgets

The widgets located in the Basic group of the widgets panel are those who are common to all devices.
Depending on the device chosen to simulate other widgets will appear (i.e.: if you choose iPad, iOS7 widgets will appear under the basic widgets)

Text

The Text is a single line text widget. It is typically used as a caption holding a text with a single style.

Editing text

Paragraph

This widget provides a multi line text box whose content can be fully customized. It can define different font styles for different parts of its contained text.

Editing text

Editing style

  1. Double-click a Paragraph to start text edition.

  2. Select the text range you want to edit using the cursor.

  3. Make your style changes using the Text section of the Properties panel or use the top main toolbar.

  4. Apply the changes clicking outside the Paragraph or cancel them pressing Escape.

Image

The image widget is a rectangle shaped widget which represents and displays an image. When creating this widget on the canvas it displays no image by default showing a cross inside.

Changing image

Edit the image displayed by this widget in one of the following ways:

Shapes

Hotspot

This widget shaped as a rectangle is usually used to create a transparent area to define events. Hotspots are displayed as a slightly transparent green rectangle during the edition of the user interface but become transparent and cannot be seen during the prototype's simulation.

Tip: Put hotspots over images to create event zones – For example, over the main logo of your application in the upper banner.

Dynamic Panel

The Dynamic Panel widget is an advanced widget that can be described as a group of panels that act as containers. From all the containers only one is displayed at a time while all the others remain hidden. When a Dynamic Panel is created it only has one single container.

Creating panels

To create a new panel:

  1. Select a Dynamic Panel and a floating toolbar will appear at the top edge. The toolbar can also appear at the bottom edge of the dynamic panel if there is no space to display it on the top.

  2. Click on the green icon at the top-left corner of the widget.

Selecting panels

When you select a panel it will automatically show and the current one will hide letting you edit the content of the selected panel. To select a panel:

  1. Select a Dynamic Panel and a floating toolbar with a dropdown control will appear. The dropdown contains the list of panels of the dynamic panel.

  2. Click on the dropdown to open it.

  3. Select the panel you want to show.

Removing panels

To remove a panel:

Editing panel's name

The panels are automatically labeled when you create them but you can change their names in order to organize your Dynamic Panel. Change the active panel name in the Properties panel once the Dynamic Panel is selected on the page.

The Default Panel

Every Dynamic Panel has a default panel which is the one that will be displayed when starting the simulation of the prototype. Change the default panel in the Properties panel once the Dynamic Panel is selected on the page.

Tables

Table

The Table widget is used to organize content in rows and columns. It is made of cells and each cell is a individual container with container properties like layout and alignment. When a table is created, it has 4 cells by default (two rows and two columns).

Selecting rows and columns

You can select a row:

You can select a column:

Inserting rows and columns

Rows and columns can be added to the existing ones. New rows will be added under the last row and new columns at the right side of the last column:

New rows and columns can also be inserted between other rows or columns.

Insert a new row between two other rows:

Insert a new column between two other columns

Removing rows and columns

Delete a column or row by selecting it and pressing Delete key. You can also remove them if you select the option Delete in the contextual menu.

Resizing rows and columns

Columns width and rows height can be easily changed dragging their borders.

To resize a row drag its lower border when the cursor appears. To resize a column drag its right border when the cursor changes to .

Resizing cells

Individual cells can also be resized. Changing the size of a cell will automatically modify the size of its column and row to fit the new cell size.

To resize a cell:

Splitting and merging cells

Any table cell can be splitted into two parts of equal size. They can be splitted horizontally or vertically. If a cell is splitted vertically the cell is divided in to different cells with half the width but same height. If a cell is splitted horizontally the cell is divided in two different cells with half the height but same width. To split a cell:

A set of contiguous cells can be merged so they become only one cell. When a group of cells is merged their content is also merged into the new cell. To merge cells first select them and make sure they all share at least one edge one to each other, then:

Copying cells content

You can copy the content of a row, column or individual cells to another part of the table using the common copy and paste actions. To copy a set of cells first select them using the Control key if necessary and select copy from the contextual menu or Edit menu. Then select the target row, column or cell and select Paste.
You can, alternatively, paste the cells outside a table widget. Then a new table will be created using the copied cells content and size.

Text Table

The Text Table widget is used to organize text in rows and columns. It is made of cells and each cell behaves as a Paragraph widget as they have exactly the same properties. When a Text Table is created, it has 9 cells by default (three rows and three columns).

Selecting rows and columns

You can select a row:

You can select a column:

Editing cell text

Editing cell text's style

  1. Double-click a cell to start text edition.

  2. Select the text range you want to edit using the cursor.

  3. Make your style changes using the Text section of the Properties panel or use the top main toolbar.

  4. Apply the changes clicking outside the cell or cancel them pressing Escape.

Inserting rows and columns

Rows and columns can be added to the existing ones. New rows will be added under the last row and new columns at the right side of the last column:

New rows and columns can also be inserted between other rows or columns.

Insert a new row between two other rows:

Insert a new column between two other columns

Removing cell content

Delete the text of a cell or group of cell by selecting them and pressing Delete key.

Removing rows and columns

Delete a column or row by selecting it and then clicking on the option Delete in the contextual menu.

Resizing rows and columns

Columns width and rows height can be easily changed dragging their borders.

To resize a row drag its lower border when the cursor appears. To resize a column drag its right border when the cursor changes to .

Resizing cells

Individual cells can also be resized. Changing the size of a cell will automatically modify the size of its column and row to fit the new cell size.

To resize a cell:

Splitting and merging cells

Any table cell can be splitted into two parts of equal size. They can be splitted horizontally or vertically. If a cell is splitted vertically the cell is divided in to different cells with half the width but same height. If a cell is splitted horizontally the cell is divided in two different cells with half the height but same width. To split a cell:

A set of contiguous cells can be merged so they become only one cell. When a group of cells is merged their content is also merged into the new cell. To merge cells first select them and make sure they all share at least one edge one to each other, then:

Copying cells content

You can copy the content of a row, column or individual cells to another part of the table using the common copy and paste actions. To copy a set of cells first select them using the Control key if necessary and select copy from the contextual menu or Edit menu. Then select the target row, column or cell and select Paste.
You can, alternatively, paste the cells outside a table widget. Then a new table will be created using the copied cells content and size.

Data Visualization

Data Visualization

The widgets located in the data visualization group are those related to Data Masters' visual representation. These widgets will help you visualize the contents of your Data Masters as well as some information related to them.

Data Grid

This widgets displays the records of a Data Master as a grid. The data source is always a single Data Master which is selected when the grid is created. Data grids are displayed as cells that contain all the data of a data master row. The number of rows or columns can be decided by selecting vertical or horizontal orientation on the properties panel. The first cell will be displayed with the field names and the other cells will be displayed just as a grey cell: when simulating, cells will be filled with the Data Master's record instances.

In order to create a Data Grid for a particular Data Master:

  1. Click on the Data Grid widget on the Widgets' palette.

  2. A dialog will appear asking for information regarding the data source the Data Grid will use. (If you have no Data Masters you will be first asked to create a new one).

  3. Fill in all the requiered fields and press Ok.

  4. Once the dialog is closed, just click on the desired place on the canvas to finally create the item.

Once a Data Grid is created you can change some of its properties including its identifier in the Properties panel but you cannot change its Data Master association.

Selecting cells

To select a single cell, click on the upper-left sample cell

Select number of rows

You can choose the number of rows on vertical orientation. To choose the number of rows, set vertical orientation on the properties tab, and then choose the number of rows.

Select number of columns

You can choose the number of rows on vertical orientation, and the number of columns on horizontal orientation new columns at the end of a Data Grid widget. To insert a new column, right-click on the Data Grid widget and select 'New Column' in the contextual menu.

Select number of cells per page

You can choose the number of cells that will be displayed on each data grid page. Using the 'Paginate data grid' event, you will be able to navigate between the grid's pages.

Removing fields or texts

Delete a field or text by selecting it and pressing Delete key.

Ordering fields

The order of the Data Grid's fields can be modified once created. To move a field or text to a different position within the Data Grid, drag and drop it to the desired position.

Resizing cells

Select a Data Grid's cell and drag its sizing handles to resize them.

Data List

This widgets displays the records of a Data Master as a list. The data source is always a single Data Master which is selected when the list is created. This widget is displayed as a header row with the Data master field names, a row with the field names, the other rows are displayed as grey rows: when simulating, rows will be filled with the the Data Master's record instances.

In order to create a Data List for a particular Data Master:

  1. Click on the Data List widget on the Widgets' palette.

  2. A dialog will appear asking for information regarding the data source the Data List will use. (If you have no Data Masters you will be first asked to create a new one).

  3. Fill in all the requiered fields and press Ok.

  4. Once the dialog is closed, just click on the desired place on the canvas to finally create the item.

Once a Data List is created you can change some of its properties including its identifier in the Properties panel but you cannot change its Data Master association.

Selecting rows and columns

To select a row, click on the left edge of the row when the cursor changes to

To select a column, click on the top edge of the column when the cursor changes to

Inserting columns

You can insert new columns at the end of a Data List widget. To insert a new column, right-click on the Data List widget and select 'New Column' in the contextual menu.

Removing columns

Delete a column by selecting it and pressing Delete key. You can also remove it if you select the option Delete in the contextual menu of a column.

Ordering columns

The order of the Data List's columns can be modified once created. To move a column to a different position within the Data List, drag and drop it to the desired position. An orange feedback will guide you when placing the column between other columns.

Resizing rows and columns

Select a Data List's cell or an entire row or column and drag its sizing handles to resize them.

Changing Data List's properties

When a Data List widget is selected on a screen you can change some of its properties in the Properties panel:

Find more information about Data Lists in the Data Simulation section.

Summary

The Summary widget is a special text label which shows information about a Data Grid or Data List. This widget cannot be directly edited like a normal Text as its content is automatically generated using its associated Data Grid information. The information displayed by this widget is the total number of rows and the currently displayed ones.

To change its associated Data Grid, select the Summary widget and select the desired Data Grid in the Properties panel.

Index

The Index widget is a special text label which shows information about the Data Grid or Data List's pages. This widget cannot be directly edited like a normal Text as its content is automatically generated using its associated Data Grid information. The information displayed by this widget is the index of pages of the Data Grid. The current page index will be highlighted using a bold font style. Notice that the number of pages of a Data Grid will depend on the field 'Rows per page' in the Data Grid widget's properties.

To change its associated Data Grid, select the Index widget and select the desired widget in the Properties panel.