This example shows how to create a Coach that contains
three tabbed pages.
In this example, you have a Customer business
object that contains many properties. To capture or display all of
these properties within a single Coach, the tab control is a good
choice. Normally, you would relabel the text fields to something more
appropriate for end users, but this example will retain the default
labels to concentrate on laying out tabbed pages and mapping data
to text fields.
The first tabbed page of the Coach contains three text fields that
have some general information about a customer. In this example, you
add the fields directly to the Coach using sections to set the page
layout.
The second page contains a set of phone numbers. You use a Coach
View to add the fields to the page.
The third page contains a table of addresses. In this case, the
Coach View you add to the page is a list, which results in a table.
- Create the Customer business object. Customer has id(String), firstName(String),
and lastName(String) parameters. It also has two
complex parameters: phoneNumbers(PhoneNumber) and addresses(Address).
- PhoneNumber is a business object that has home(String), work(String),
and cell(String) parameters.
- Address is a business object that has number(String), street(String),
and city(String) parameters.
With the Customer business object, addresses is
an array of the Address type, so ensure that you
select Is List for it.
For information about creating business
objects, see Creating business objects.
- Create the Coach View for the PhoneNumber business
object:
- Create the PhoneNumberView Coach View.
- In its Variables page, add the PhoneNumber business
object as the business data variable named phoneNumber.
- In the Layout page, drag the home, work,
and cell parameter variables onto the layout. A text
control is added to the layout for each variable because it is the
Coach View associated with the String type.
- Create a human service named Customer Human Service.
- Open its diagram and drag a Coach onto the diagram. In the Step properties,
rename the Coach to Customer Coach.
- In the Variables page, add the Customer
business object as a private variable.
- In the Coaches page, drag a tabs stock
control onto the Customer Coach layout. The tabs control is in the
Section category of the palette.
- Create the General page:
- Drag a vertical section onto the tab control. A tabbed page can
contain only one element directly. By adding the section, you can
then add as many elements as you want into that section.
- Rename the section to General. The name
that you see on the tab comes from the label of the section.
- Drag the id variable onto the vertical section.
- Drag a horizontal section onto the vertical section below the
id text control.
- Drag the firstName and lastName variables
onto the horizontal section.
The id, firstName,
and lastName variables are parameters of the Customer variable.
- Create the Phone Numbers page:
- Drag the PhoneNumberView Coach View onto the
tab control. If you did not add a tag to the Coach View, you can find
it in the NoTags category on the palette. You
can see a PhoneNumberView 1 tab in the tab
control.
- Bind the PhoneNumberView Coach View to the customer.phoneNumber variable.
This action means that any data users enter into the fields gets set
in the variable for the human service.
- Select the tab.
- In the General properties, change the label
of the PhoneNumberView instance to Phone
Numbers.
- Create the Addresses page:
- Drag the addresses variable onto the tab control.
You can see an addresses 1 tab in the tab control.
- Select the tab. You can now see a table with a column for each
property defined in the Address business object.
- Select the table and in the General properties,
change the label of the table to Addresses.
- In the Configuration properties, select Show Add Button and Show
Delete Button. By doing this step, you can add and subtract
address rows when you run the human service later in this example.
- Add a button control below the tab section and relabel it to OK,
The button broadcasts a boundary event and you can use it to wire
the Coach in the human service flow.
- In the diagram, connect the start node to the Customer Coach and
then connect the Customer Coach to the end node.
- Save your changes.
- Test the human service by clicking the button.