Tip:
Highlight text to annotate it
X
Adding content to your pages in Simulation
View is one of the most common tasks you will
perform in iRise.
In this video, we'll show you how to lay out your
pages quickly and efficiently, and provide some
tips and best practices along the way.
A page is the essential building block of most
iRise simulations.
As you saw when you learned about Scenarios,
pages are created in your project when you add
them to a scenario.
You can also create a page by clicking the
button just above the Directory panel.
Pages should always be given a descriptive
name, such as "Create Profile Screen."
The name you give to a page is also displayed
in the Status Toolbar and the page's Properties
panel.
The page's other attributes, such as its
dimensions, alignment and scroll settings, are
also defined in the Properties panel.
The Type attribute allows you to choose
between a traditional page
and one of the mobile page types that we began
introducing in iRise 8.9.
When you choose a mobile page type, such as
iPhone 4, two new fields appear.
You can choose a portrait or landscape
orientation for your page ... as well as a color for
your Time/Status bar.
There are no scroll settings for the mobile page
types, since a mobile page will never have scroll
bars.
We'll stick with a traditional page type for this
project.
Our goal on this page is to simulate a basic
form for capturing a new user's profile
information.
This will allow us to demonstrate some different
methods of adding Page Layout ... and User
Input widgets to a page.
First we'll add a Form a widget, a necessary
component for capturing data.
To do this, we'll use the "click and draw" method
-- just left click the Form widget icon, and then
click and drag diagonally to draw the Form
boundaries.
You'll notice that when you deselect the Form
widget, you can no longer see it on the page
unless you hover your mouse over it.
We can change that behavior by choosing Show
Widget Boundaries from the View menu.
Now let's add the text labels for our form fields.
To add text to your page, simply double-click
where you want the text to appear and start
typing.
The resulting Text widget will expand as you
type.
To add new labels immediately below the first
one, we'll use the Ctrl-Enter shortcut.
Now we'll use the drag-and-drop method to add
our form fields to the page.
We'll use Text Input widgets for the name and
email address fields, a Calendar widget for the
date of birth, and a Select widget for gender.
Before we modify the widget properties, let's do
a little cleanup.
We can align our form widgets by using the
Align command under the Edit menu.
Let's also align our text labels along their right
edge. This time we'll use the right-click menu.
After we align the top and bottom rows
horizontally, we can also use the Distribute
command for some fine tuning.
Finally we'll add a Checkbox widget and some
text for an email opt-in, and a Button widget to
submit the form.
Now let's modify our widget properties.
The first thing we'll do is click through and
provide a descriptive name for each of our User
Input widgets.
We'll enclose the names in square brackets as
a clear indication that they'll be used to capture
data.
For our name fields, we'll use the validation
attributes to make them required.
For the email field, we'll also require a valid
address, and we'll make this field a little wider
than the name fields.
In our Calendar widget, let's add some
placeholder text to indicate the correct date
format
in case the reviewer wants to type a date
instead of using the graphic chooser.
In our Select widget, we'll add the options for
gender in the Selection Items table.
The width of the Select widget will be
determined by the length of the Selection Items.
For our Button, we could change the label in the
Properties panel, but this time we'll double-click
to edit the Button Label in place.
Two more quick updates will wrap up our Create
Profile page.
First, our form needs a heading, to which we'll
apply the Heading 1 style.
Finally, we'll apply a background color to the
Form widget.
0:03:56.066,0:04:00.066
And there we have it ... a simple form laid out in
under five minutes!