Justinmind

SUPPORT

Learn how to prototype web and mobile apps

UI Container Elements for wireframing

In this tutorial, explore Justinmind’s “Special Components” Widget library that can be found in the Basic widget library of the user interface.

The “special components” help you to bridge the gap between your prototypes and other design tools, such as Adobe, Microsoft Word and YouTube. These widgets are container UI elements that can hold other components such as eDocs, links to sites or flash files. Let’s take a more detailed look at each widget.

The Table widget

interactive-prototypes-special-components-UI-elements-table

The Table widget is used to organize content in rows and columns. It forms a grid or table and can hold other elements such as text boxes, paragraphs and images. When dragged to the canvas, the Table widget has two rows and two columns by default, though these can be modified in the Properties tab. Drag the Table widget to the canvas to create a table containing other widgets.

 Selecting rows and columns

down-pointing-arrow

To select a row, click on the left edge of the row when the cursor displays a right pointing arrow. You can also right-click on a cell in the desired row and select the option Select Row in the menu, or select a cell in the desired row and select the option Select Row in the Table menu.

To select a column, you can click on the top edge of the column when the cursor displays a down pointing arrow. You can right-click on a cell in the desired column and select the option Select Column in the menu, or select a cell in the desired column and select the option Select Column in the Table menu.

Inserting rows and columns

Rows or columns can be added to existing ones. New rows will be added beneath the last row and new columns on the right of the last column. To add a row or a column, select the table widget and click on New Row or New Column in the Table menu, or right-click on the table and select New Row or New Column in the menu. You can also select the table widget and change its rows/columns number in the Properties panel.

To insert new rows or columns between other rows or columns, select a table row and click on Insert Row Below or Insert Row Above in the Table menu, or right-click on a table row or a table cell and select Insert Row Below or Insert Row Above in the menu.

To insert a new column between two other columns, select a table column and click on Insert Column Right or Insert Column Left in the Table menu, or right-click on a table column or a table cell and select Insert Column Right or Insert Column Left in the menu.

Removing rows and columns

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

Resizing rows and columns

Column width and row height can be changed by dragging their borders.

change-column-width

To resize a row, drag its lower border when the cursor displays a double-headed arrow. To resize a column, drag its right border when the cursor displays the double-headed arrow.

Resizing cells

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

To resize a cell, select the table cell, and drag its sizing handles. These are located at the bottom right-hand corner, right edge or bottom edge. You can also select the table cell and specify its size in the Properties panel.

Splitting and merging cells

Any table cell can be split into two parts of equal size, both horizontally and vertically. If a cell is split vertically the cell is divided in to different cells with half the width but same height. If a cell is split horizontally the cell is divided in two different cells with half the height but same width.

To split a cell, right-click on one table cell and select Split Horizontally or Split Vertically in the sizing handles menu. You can also select a table cell and select Split Horizontally or Split Vertically in the Table menu.

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 with each other. Then, right-click on any of the selected cells and click on Merge Cells in the sizing handles menu, or select Merge Cells in the Table menu.

Copying cells content

You can copy the content of a row, column or individual cell 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 (for multiple cells) and select copy from the sizing handles menu or Edit menu. Then select the target row, column or cell and select Paste. You can, alternatively, paste the cells outside of a table widget, and a new table will be created using the copied cells content and size.

The HTML widget

interactive-prototypes-special-components-UI-elements-html

The HTML widget displays HTML code by embedding a webpage within it. When dragged to the canvas, the HTML widget displays the following text by default: “The content of the body element is displayed in your browser”. To add HTML code to your wireframe, follow the below steps:

  1. Copy the HTML code from the source.
  2. Drag an HTML widget to the canvas.
  3. Go to the Properties tab and paste the HTML code into the HTML field.
  4. Click outside the Properties tab to apply the changes.

The URL widget

interactive-prototypes-special-components-UI-elements-url

The URL widget displays a web page by embedding the webpage’s URL. When dragged to the canvas, the URL widget displays Justinmind’s homepage by default. To change the web page displayed, follow the below steps:

  1. Copy the URL from the source.
  2. Drag a URL widget to the canvas.
  3. Go to the Properties tab and paste the URL into the URL field.
  4. Click outside the Properties tab to apply the changes.

The Document widget

interactive-prototypes-special-components-UI-elements-pdf

The Document widget displays external text documents. The widget supports PDF, TXT and XML files. When dragged to the canvas, the Document widget displays a PDF file as an example by default. To change the document displayed, follow the below steps:

  1. Drag a Document widget to the canvas.
  2. Click on the Browse button in the ‘File’ field of the Properties panel and select the desired document.

Note that in order to display PDF files correctly, you will need to have Adobe Acrobat Reader installed on your computer.

The Flash widget

interactive-prototypes-special-components-UI-elements-flash

This Flash widget displays Flash files. When dragged to the canvas, the Flash widget displays a flash file as an example by default. To change the flash file displayed, follow the below steps:

  1. Drag the Flash widget to the canvas. 
  2. Click on the Browse button in the ‘File’ field of the Properties panel and select the desired flash file.
  3. Change the input parameters, the quality, scale and wmode, using the Parameters table under the ‘File’ field.

The HTML Website widget

interactive-prototypes-special-components-UI-elements-html-web

The HTML Website widget displays an entire HTML website sorted locally on your computer by embedding a web page embedded within it. To add an entire HTML website to your wireframes, follow the below steps:

  1. Click on the HTML Website widget in the Widgets library. A dialog will appear.
  2. In the first field ‘Select a directory’, select the website folder (the folder where all the site files -HTML, images, CSS, etc.- are contained). Use the Browse button to navigate through your local folders.
  3. In the second field ‘Choose an entry file’, select an initial html file, usually the index.html. It is recommended that this file be located inside the folder selected in the previous step.
  4. Click OK when done and close the dialog.
  5. Click in the canvas to create the widget. Press Cancel in the dialog to cancel this operation.

 

Next tutorial > How to add UI libraries to your prototyping tool