Laying Out a Basic Page
As one of the core activities in defining functional requirements, laying out pages in Simulation View is one of the most common tasks you will perform in iRise Studio.
This tutorial covers many of the basic tasks you will perform in laying out a user interface in iRise, whether that layout is for a simple wireframe mockup or a more polished design. You will learn how to add widgets to your pages, change their attributes in the Properties panel, and align and distribute them.
Watch a Video
Watch this video for a brief demonstration of many of the tasks we’ll cover:
Basic page properties
Pages are the essential building block of an iRise simulation. Pages are where the user interface takes shape. There are three ways to add a new page to your project:
- Click the New Page button immediately above the Directory panel.
- While defining a scenario, drag the Page icon from the Widget Toolbar to the Scenario Whiteboard.
- While defining a scenario, drag a page template from the Directory panel to the Scenario Whiteboard.
After creating a page using any of these approaches, the next thing you will do is give your new page a descriptive name, such as “Login Screen” or “Profile Update Page.” When the page is displayed in your workspace, you will see this name in three places: the Directory panel, the Properties panel, and the Status Toolbar.
The Properties panel also gives you the ability to define specific attributes for your page, including dimensions (in pixels), alignment options, scrolling behaviors, and page type.
Page Type is an important field if you will be creating mobile simulations in iRise 8.9 or above. This field allows you to choose between the traditional page type, typically used for Web or desktop applications, and one of the mobile page types. If you select one of the mobile types (iPhone 4 in 8.9 or 8.10, and Android or iPad 2 in 8.10), two new fields will appear in the Properties panel, one for choosing a color for the Time/Status bar and one for choosing either portrait or landscape orientation.
You can speed up the process of creating new pages in a project by defining default page attributes in the Studio Preferences panel, and also by creating page templates that provide a baseline layout for your pages.
Adding content to your pages
The first step in laying out a page is to add content. The process is the same whether you are working in a page, master, template or cloud. Depending on the widget type and your personal preferences, you will use one of the following methods:
- Drag and drop - For both standard widgets and iBlocs, the most common insertion method is to drag them from the Widget Toolbar (or Widget Panel for iBlocs) and release them on the page. For Image, Table and Menu widgets, this will launch a dialog box for providing the additional information needed to create the widget.
- Select and draw - For Section, Table and Form widgets (and to a lesser degree, Text and Horizontal Rule widgets), a common insertion method is to select the widget by left-clicking its icon on the Widget Toolbar, and then clicking, dragging and releasing to “draw” it on the page. A variation of this method will work for other widget types, but rather than drawing the widget on the page, simply left-click to drop it into position.
- Right-click > Insert - You can insert any standard widget by right-clicking the page and choosing the desired widget from the Insert submenu. Note that this is the only way to add an Embedded Object widget to a page.
- The fastest way to insert a Text widget is to double-click the page and start typing. The Text widget will expand to accommodate the text as you type.
- When using the “select and draw” approach, you can add multiple widgets of the same type by double-clicking its icon in the Widget Toolbar, which will remain selected until you left-click it once more.
- You can duplicate any page widget by pressing Ctrl-Enter while the widget is selected on the page (Command-Enter on a Mac), or by using the Ctrl-drag shortcut (Option-drag on a Mac).
Page widget types
The two sections of widgets shown in the image above are collectively called Page widgets (the widgets on the right side of the toolbar which are not shown are called Canvas widgets, and will be covered in another tutorial). Page widgets are further divided into two types: Page Layout and User Input widgets. While both types can be used for various types of interactions, Page Layout widgets are generally used for display purposes, and User Input widgets are used to capture user input in whatever form that input might take (e.g., text in a Text Input widget or a list item in a Select widget).
Modifying widget properties
As you will quickly find as you add content to your pages, each widget has a unique set of attributes that you can modify in the Properties panel. Complete documentation for these attributes is available in the iRise Help System, but here are a few things to keep in mind:
- The first attribute listed in the Properties panel is also the most important. Always give each widget a descriptive name so you can easily identify it when mapping data flow or configuring page actions. When naming User Input widgets, enclose the name in square brackets so it can easily be distinguished from static layout widgets.
- The position (X/Y coordinates) of a widget is relative to its parent container. For example, if a Text widget is contained within a Section widget, the Text widget’s coordinates indicate its position relative to the Section widget, not to the page. Note that the X/Y coordinates of a widget (0,0) start in the upper left corner of the parent container, or the upper left corner of the page and increase as you move right or down the screen.
- The dimensions of some widgets (e.g., Text, Image, Select and Button widgets) are determined dynamically by the widget’s contents. In most cases they can be modified manually, but this is rarely necessary.
- A Tool Tip can be assigned to any Page widget. Tool Tips are the text bubbles that appear when you hover your mouse pointer over a UI element in an application.
- None of the User Input widgets, as well as Menu and Horizontal Rule widgets, can be made draggable. For the remaining widgets, choosing any option other than the default “No” in this field will reveal additional fields for configuring the widget’s drag and drop attributes.
- We discuss formatting in another tutorial. For now, we’ll just point out that you can easily access basic formatting controls using the Formatting Toolbar in the upper right of the Studio workspace. Pre-defined styles, basic font attributes and background colors can all be applied using this toolbar. Note that a style applied to a widget’s parent container (e.g., a page or a Section) will be inherited by the widget.
- Since iBlocs are not WYSIWYG in Studio, you will need to run your simulation in iRise Reader to see the results of any changes you make to the iBloc’s properties. Also, to compensate for the fact that documentation for individual iBlocs is not available in the iRise Help System, very descriptive tool tips will usually appear when you hover your mouse over any field in an iBloc’s Properties panel.
Aligning and distributing widgets
Although pixel-perfect alignment and positioning might not be a concern as you initially lay out your pages, clutter and disorganization can make it difficult for both you and your stakeholders to visualize the desired end state of a page layout. Maintaining a clutter-free workspace is made easier by the grid and auto-alignment features in Studio, as well as the Align and Distribute commands.
Snap to Grid
To enable the grid in Simulation View, choose View > Grid > Snap to Grid from the main menu. When the grid is on, both horizontal and vertical rules appear as a grid on the page background. Widgets automatically align to the nearest intersection of the grid when released. This snap-to-grid feature is on even when the grid is not visible (Hide Gridlines is selected). Gridlines do not appear in the simulated project.
To enable the Auto-alignment feature, choose View > Grid > Auto-alignment from the main menu. You can use Auto-alignment to assist with positioning and alignment relative to other widgets. When Auto-alignment is on, horizontal and vertical guide lines appear while dragging a widget to indicate when it is aligned with other widgets on the page. Auto-alignment and Snap to Grid cannot be used simultaneously.
Show widget boundaries
By default, widget boundaries are hidden in the Studio workspace unless you select or hover your mouse pointer over the widget, which can make page layout tasks a little tricky, especially when they involve Section or Form widgets. To take the guesswork out of these tasks, choose View > Show Widget Boundaries from the main menu.
Aligning and distributing widgets
After you’ve added widgets to a page, you can simply and easily arrange them relative to each other by using the Align and Distribute commands.
To align widgets, follow these steps:
- Select the widgets you want to align.
- Choose Edit > Align and select from the available options.
When you align widgets relative to each other, one of the widgets remains stationary. For example, choosing Align Left aligns the selected widgets to the widget that is farthest to the left.
To distribute widgets an equal distance from each other horizontally or vertically, follow these steps:
- Select at least three widgets.
- Choose Edit > Distribute and select from the available options.
Miscellaneous tips and tricks
- Group widgets - Grouping widgets prevents them from being moved independently of each other. To group a set of widgets, select them and choose Edit > Group > Group Selected.
- Lock widgets - If you want to make sure that a widget cannot be moved from its current position, select the widget and choose Edit > Lock > Lock Widgets.
- Use keyboard shortcuts - Several keyboard shortcuts are extremely useful when laying out pages, including Ctrl-Enter to duplicate a widget and Shift-drag to move a widget along its X or Y-axis.
- Use specialized selection tools – The Move Container tool makes it easier to move Sections, Forms and Tables. The Select Behind tool allows you to select a widget that is behind another widget on a page. Both can be selected from the Status Toolbar, or you can use the associated keyboard shortcuts to activate the tools (Z for Select Behind, and Shift-Alt for Move Container).