EDAG0005

Practices for Lesson 5:
Modeling Concepts:
Structure, Rules, and User
Interfaces
Overview
Copyright © 2016, Oracle and/or its affiliates. All rights reserved.
Practices for Lesson 5: Modeling Concepts: Structure, Rules, and User Interfaces EDAG000
Effective mm/dd/yy Page 1 of 80 Rev 1
Practices for Lesson 5
Distribution
Job Title*
Ownership
The Job Title [list@YourCompany.com?Subject=Practices for Lesson 5: Modeling Concepts:
Structure, Rules, and User Interfaces: EDAG0005.docx] is responsible for ensuring this
document is necessary, reflects actual practice, and supports corporate policy.
Demonstration 5-1: Create Supplemental Structure
Overview
This demonstration shows the fundamentals of:
 Adding supplemental structure to a configurator model
Prerequisites
 You have created a workspace and added a configurator model to it, as described in
the demonstration for the previous lesson.
User Login: scm00.Instructor
Summary of Tasks
 Sign In and Navigate to the Configurator Models work area
 Search for Your Workspace
 Add Supplemental Structure to the Model
Steps
Sign In and Navigate to the Configurator Models work area

1. In the Navigator, find Configurator Models.
2. Click on the Configurator Models icon
3. You are now on the Configurator Modeling Overview page, where you see a table with a list
of workspaces.
4. If you completed the demonstration in the previous lesson, then you should see the
workspace that you created in the table. You can skip to step 11, below.
5. If the user ID that you logged in as has not created any workspaces yet, then you will see
that the table is empty. You can then change the View filter to All Workspaces instead of the
default, My Workspaces, to see workspaces that were created by other users.
6. On the Configurator Models Overview page, click the Tasks panel tab.
Search for Your Workspace
7. In the Tasks panel, click the Manage Workspaces task.
8. This action should open a new dynamic tab, with the ability to search for workspaces.
9. Search for the workspace that you created with the Name like TRG_WS_INSTRUCTOR_1.
10. The workspace you created is displayed in the table of workspaces.
11. Click the link with the workspace name.

12. A new dynamic tab opens, for the workspace, which contains the workspace attributes and
the any participants in the workspace.
13. You see the models that you added to your workspace earlier.
You will work on these models to add supplemental structure, create rules, and create and
edit a user interface.
Add Supplemental Structure to the Model

14. Click the Name of the 4 Door Sedan model to open it. The model will open in a new dynamic
tab.
15. Click the Structure sub-tab.(This tab is open by default)
16. Browse the structure and familiarize yourself with the contents of the Structure sub-tab, such
as the attributes presented in the Overview sub-tab for the selected node in the structure
tree.
17. When ready, select the model's root node, CAR4DRSDN, click Create, then select Create
Option Feature from the menu.
18. A Create Option Feature dialog box as seen below will open and you can enter the details
as shown below:
Name: Base Option Packages INST

Description: Base Option Packages
Minimum Selections: 0
Maximum Selections: 1
Leave Enable Option Quantities unchecked
19. Click OK in the Create Option Feature dialog box to complete the creation of the option
feature.
Suggestion: Select View by Description from the View menu to display the item descriptions
in the model tree, instead of the item names.
20. By default, in the Structure view, the option feature will be highlighted to indicate that it is the
currently selected structure node. Click Create again and you will see the contextual menu
with only the Create Option command being enabled. Select Create Option.
21. The Create Option dialog box opens, as shown below
22. Enter the first of the following Options, which represent several different choices of option
packages:
 L- Base Trim
 LX - Luxury Package
 GLX - Super Luxury Package
 SX - Sports Package
You don’t have to specify Descriptions, but you can do so, to make the definition more
complete.
23. After entering the name of each option, click Apply and Create Another. After you have
created the last option, click OK on the Create Option Dialog box. This adds all your options
to the model structure. Your model structure now looks something like the image below,
which shows the option feature and the options that you created.
24. Click the Test Model button at the top right of the page.
25. The Test Model dialog box opens.
26. Click OK in the dialog box without making any changes. If the model has unsaved changes,
you will see a dialog box warning you about saving them. Click Yes to save your changes to
the model, and continue.
27. On continuation, the default run time UI appears in a new tab.
28. You will see the supplemental structure that you created in the previous steps, represented
in the default UI as a set of options.
29. Click Cancel. You return to the Edit Configurator Model page.
Demonstration Complete
You have created supplemental structure, and tested the model to verify that the supplemental
structure appears as expected in the run time user interface.
Demonstration 5-2: Create Rules
Overview
 Adding rules to a configurator model
Prerequisites
 You have created supplemental structure for the configurator model, as described in
the previous demonstration for this lesson.
Steps
Add Rules to the Model

1. In the Navigator, under Product Management, find Configurator Models.
2. Open the model and navigate to the Rules sub-tab.
3. If you did not log after creating the supplemental structure, and if you have any unsaved
changes, you will see a warning message about saving your changes. Click Yes in that
dialog box to continue.
4. You will create a set of statement rules so that each of your option packages, when
selected, will select various combinations of items within the model. The behavior for an
example of the rules you will create is:
 If the end user selects the LX-Luxury Package, then the 8-way Power Driver Seat, 8-
way Power Passenger Seat, the Cloth option for the seat trim, the 2.0L turbo DOHC
Engine and the 16” Steel wheels will be selected in the end user's configuration, by
default.
 To impart this behavior to the configurator model, you will define the following
statement rule, which contains multiple statements:
‘LX - Luxury Package’ IMPLIES ‘8-way Power Driver Seat’;
‘LX - Luxury Package’ IMPLIES ‘8-way Power Passenger Seat’;
‘LX - Luxury Package’ IMPLIES ‘Cloth’;
‘LX - Luxury Package’ IMPLIES ‘2.0L turbo DOHC’;
‘LX - Luxury Package’ IMPLIES ‘16” Steel Wheels’;
5. In order to create this rule, on the Rules sub-tab, click Create, which will open a menu of
the types of rule entities you can add. Select Create Statement Rule.
6. The Create Statement Rule dialog box opens.
7. Enter the following values in the Create Statement Rule dialog box
Name: Luxury Option Default Selections TRN 01
Description: (not required) Default selections when the Luxury Option is selected.
Rule Class: Default
(A rule assigned to the Default class allows the end user to change the default
selection made by the rule. For example if the user wants to pick heated seats instead
of the defaulted power seats when configuring the item, he would be able to because
of the use of Default.)
8. Click OK on the Create Statement Rule dialog box.
9. Once you click OK, the Rule Details section ap
10. Now you will add the text that defines the behavior of the rule, into the Rule Text field. You
can type in the entire text of the rule. You can also insert many of the items participating in
the rule from the Structure view on the left hand side.
11. Click the heading Structure in the left pane. This action collapses the Rules list and
provides a view of the structure of the current configurator model.
12. You can choose to work with either item names or item descriptions in the structure view by
making the appropriate selection in the View menu.
13. Now you can start defining the Rule Text for the rule specified in step 4. Expand the Base
Option Packages option feature. The option you want to use in the rule is LX-Luxury
Package. Select that node in the structure and click the Insert into Rule Text button to add
a syntactically correct reference to the item into the rule text.
After this action, your Rule Details->Rule Text will look as follows
Even though you are interacting with the selected item's Description in the structure view,
the Name of the item with its entire path is inserted into the rule text.
14. From the drop-down list of logic operators, select IMPLIES.
The operator IMPLIES is then inserted into the rule text, at the location of your cursor.
15. Go back to the Structure view again and expand Interior Options to show the Seats node.
Then expand Seats to show the 8-way Power Driver Seat option.
16. Select the 8-way Power Driver Seat option and click the Insert into Rule Text action
again.
17. Since there is a need to have multiple rule statements in this one rule, type in a semi-colon
( ; ) to terminate the first statement. After this step, your rule text will look as shown below:
18. The rule editor enables you to validate the rule text as being syntactically correct. Click the
Validate button.
19. You will see that there were no errors detected. The rule status is set to Valid.
20. Delete the single quotation mark ( ' ) that is the first character in the rule text, then click
Validate again.
21. You will see an error message, as shown below. Click OK after reading the message.
This message indicates that there is an error with the rule definition. Single quotation marks
are required to delimit node names that contain spaces, and to delimit node names in a
node path, which are separated with by the dot character ( . ). Removing a delimiting
quotation mark makes the node reference invalid.
22. Restore the single quotation mark and click Validate. Now the rule text is valid again. Click
Save, to save the model with this new rule.
23. Continue to add the rest of the statements listed in step 4, going through the same process
of finding the node in the structure and adding it to the rule text. Make sure each statement
ends with a semicolon. Validate after each statement so that you can fix any errors right
away.
24. Once the rule is complete you can test the model. Click the Test Model button.
25. If you had any unsaved work in the Rules subtab, you will see the following dialog box
Click Yes to continue.

27. Click OK in the dialog box without making any changes.

28. The default run time UI appears in a new tab.
29. The Base Option Packages appear in the default UI, as a list of options.
30. Select the LX-Luxury Package.
31. Verify that all the items you have specified on the right hand side of the IMPLIES operator in
the rule statements are selected in the UI, with check marks, or by the selection of a radio
button. The option selections are 8-way Power Driver Seat, 8-way Power Passenger Seat,
the Cloth option for the seat trim, the 2.0L turbo DOHC Engine and the 16” Steel wheels.
.
32. Another way of ensuring the selection of options is by clicking on the Finish and Review
button, so that a valid configuration is finished for you.
33. The Review page opens, and displays all the current selections from the item structure.
34. Click OK to complete the test.
You have written rules and tested the model to verify that the rules are functioning as expected
in the run time user interface.
Demonstration 5-3: Create and Customize User Interfaces
Overview
 Creating a basic user interface
 Customizing the user interface by adding display conditions, images, styled text, and
changing control templates
Prerequisites
 You have created supplemental structure and rules for the configurator model, as
described in the previous demonstrations for this lesson.
Summary of Tasks
 Create a User Interface for the Model
 Customize the User Interface
 Add Display Conditions
 Add an Image to the UI
 Add a Text Element to the UI
 Add Spacers to the UI
 Change Control Templates
Steps
Create a User Interface for the Model

2. Open the model and navigate to the User Interfaces sub-tab.
3. Create a new user interface by selecting Create on the Actions menu or clicking the Create
button on the User Interfaces table.
4. A Create User Interface dialog box opens. Enter the following details:
Name: Step By Step UI TRN INST
Template Map: Step by Step Navigation
Note: You can also try creating user interfaces with the other two Template Maps:
Dynamic Tree Navigation and Single Page Navigation.
5. Click Save and Close in the Create User Interface dialog box. A user interface is generated
automatically, following the selected template map that associates the structure of your
configurator model with UI elements.
6. Once the UI is created, two tabs appear below the list of user interfaces: Overview and
Design, with the default focus on Overview.
7. On the Overview tab, you can edit the name and description of your UI. You can also
choose the applications and languages for which your user interface is applicable. By
default, a UI is applicable for (that is, available to at run time) all calling applications and all
languages. When you select the Selected option, the Select button becomes enabled,
allowing you to select specific applications or languages for which your user interface is
applicable.
8. To gain more room to view the details of the UI, you can collapse the User Interfaces table.
9. (Optional) Test the automatically generated UI before you begin to customize it, by using the
Test Model button, as you did in previous exercises. Make sure that you select the user
interface that you would like to test, when the Test Model dialog box appears.
10. Close the Test Model tab after you are done seeing the uncustomized UI that was
generated.
Customize the User Interface

11. Navigate to the Design tab.
12. The pages of the UI appear by default in the Pages panel. There are four pages for the Car
model. If you created a Step By Step UI, there are four corresponding steps.
13. By default, the Engine Reference Model is part of the Mechanical Options Page, whose UI is
shown on the UI Page CARMECHOPT. In the Pages panel, select the page
CARMECHOPT. The WYSIWYG editing area shows the UI page items that appear on that
page at run time.
In the automatically generated UI, the end user has to click the Configure button to navigate
to the Engine Reference Model UI. Instead of this indirect navigation, assume that you'd
prefer that the user simply navigate to a page in the UI for the Car model itself. To
accomplish this goal, you will create that new page, having all the options of the Engine
model.
14. In the Pages panel, select the page Page: CARMECHOPT and click the Create button.
15. The Create Page dialog box appears.
Enter the pertinent information as shown below, and click OK to create the page.
Name : Engine Page
Associated Model Node : Leave it as Mechanical Options or select the Root Model Node.
Page Caption : Engine
Template : Leave the template as the Default (Stack Layout for Page from UI Template
Map).
16. The new page is added to the Pages list, with focus. The WYSIWYG editing area is blank.
17. Navigate to the Structure tab of the Resources Panel (below the Pages panel).
18. Drill down to the Engine Reference Model in the structure. Tip: You can also view the
structure by Description, if it's easier to find nodes that way.
19. Add the option classes Engine Type and Options to the Engine page that you created, by
right-clicking on the items and using the Add as Page Item action from the context menu.
20. You can also use the Add to Page button, to add these option classes as page items to the
new page.
21. This is how the Engine page should look after adding the option classes:
22. Notice that the page items that are stacked can be moved to the center of the page, like the
items in the generated UI, by changing the Layout template on the page. In step 14 above,
the page template was left as the default (Stack Layout). The layout for this page can be
changed to Form Layout, by using the edit control for the Page, made visible by expanding
Select Page control, accessed by clicking the the topmost chevron icon on the page, then
clicking the Edit Page control, indicated by a pencil icon.
23. This action opens an Edit Page dialog box, in which you can change the Template from
Stack Layout to Form Layout for Page. Then click OK in the Edit Page dialog box.
24. After this change, the contents of your new page should shift to the right, and the page
should look like the following image:
25. You can reorder UI items on any page using the Move controls in the Edit tool bar of the
Pages panel.
26. Move the Engine Page above the first page, by using the Move to Top control in the toolbar
27. The UI item that was generated to facilitate the navigation to configure the Engine can now
be deleted from the Mechanical Options page, using the delete control in the edit toolbar of
that item. Select the CARMECHOPT page in the Pages panel, then select the Engine UI
page item, then click the Delete Page Item control. Click Yes to the warning about the
deletion.
28. Save your model changes, with the Save control, then test the UI by using the Test Model
button. Be sure that your custom user interface is selected for the test.
29. You should see the train in your UI with Engine as the first stop.
30. Close the Test Model window and move the Engine page to before or after the Mechanical
Options page, using the Move controls in the Pages panel.
31. You can save and test again to see how the train stops change.
32. (Optional) You can try to add other pages or other UI content to existing UI pages to
familiarize yourself with the WYSIWYG editing area capabilities.
Add Display Conditions
You will set the display conditions to hide the Seats and Trim option classes, if an option is
already selected in the Base Option Packages option feature.
33. Navigate to the Interior Color option class in the WYSIWYG editing area. You can explore
through the five UI pages to find it, or navigate to “Page: CARINTOPT” in the Pages panel.
34. Click the chevron-icon selection control, to select the Seats UI Item for editing.
35. Click the Edit Page Item control.
36. In the Edit Page Item dialog box, under Run Time Conditions, set the Displayed attribute
value to Conditionally.
37. Additional parameters for the display condition are presented when Displayed is set to
Conditionally.
38. Set the Object value to Other Model Node, because we want to use the selection state of
the Base Option Packages node to control the display of the Seats option class.
39. Click the Search and Select: Node action control.
40. From the Search And Select: Model Node dialog box, select the Base Option Packages
option feature, as we want to base our display of Seats on the state of this option feature.
Click OK.
41. You can use the attribute SelectedCount to control the display of the Seats option class.
The condition that you are attempting to define is that the Seats option class should be
displayed only when the value of the SelectedCount attribute for the Base Option Packages
option feature is zero. That value occurs when no option has been selected for this option
feature. The purpose of this display condition is to support the effect of one of the rules you
defined. That rule selects a Seat option if the user selects the Base Option Package, making
it unnecessary for the user to explicitly select a Seat option. Hence the Seat can be omitted
from the UI. If the user does not want to select the Base Option Package and wants to
explicitly select a Seat option, then the Seats option class remains displayed in the UI to
enable that selection. So you are designing the UI to modify itself based on user actions,
which can simplify and enhance the user's shopping experience.
42. Set the Value of the attribute equal to 0, to complete the condition.
43. Click OK on the Edit Page Item dialog box to save the run time display condition.
44. Save and test the model UI. Make sure that you select the UI you are customizing in the
Test Model dialog box.
45. Once the UI launches, and without selecting the Base Option Package, navigate to the
Interior Options page (or step).
You will see the Seats option class being displayed for selection.
46. Go back to the 4 Door Sedan page (or step) and select a Base Option Package.
47. Navigate back to Interior Options to see that the Seats option class no longer appears.
48. You have now verified that your display condition is working. Close the Test Model page.
49. (Optional) Repeat these steps for the Trim option class and test the model to verify that the
display condition works, using similar steps.
Add an Image to the UI

50. Move the Engine page above the Exterior Options page in the pages panel
51. Since you are setting up a UI to configure a car, you might want to add the image of a car to
the first page.
52. Go to the first page in the Pages panel
53. In the WYSIWYG editing area, select the layout region.
54. In the Resources panel, click the UI Elements tab.
55. Select Image and select Add to Page.
56. This action opens an Add Image dialog box.
57. Click Browse, to browse for an image to add.

58. A file selection window opens and you can browse through the folders on your computer to
select an image. You should be able to select L4d3-car-image.gif on your desktop.
Note: If you don’t have the image file of a car, pick any image file. This exercise is to
understand the concept of adding an image.
59. Set the value of Inline Style to the following CSS style declaration:
position:relative;top:10px;left:-100px
60. Click OK to close the Add Image dialog box.
61. Move the image to the top of the page using the Move Up action control.
62. Save and test the UI to make sure that the image is appearing at the desired location in the
UI.
63. If the image position or size needs to be modified, adjust the inline style to make the
adjustments.
Add a Text Element to the UI
Add Text with an inline style to inform the user about choosing a Base Option Package to
preselect some options.
64. Navigate to Base Option Packages INST Option Feature in the WYSIWYG editing area.
Hint: it's on the CAR4DRSDN page.
65. Select that UI item using the chevron icon.
66. This selection determines that the next UI item to be added will be placed below the
selected item.
67. Navigate to the Resources panel and click the UI Elements tab.
68. Select Text and click the Add to Page control.

69. The Add Text dialog box appears.
70. In the Text field, enter:

Select a Base Package to have some options selected for you!
71. In the Inline Style field, enter:
font-size:16px;font-weight:bold;color:blue;border:1px solid;border-
color:Gray;position:relative;left:-120px;
72. Click OK to save the Text item. It will appear in the WYSIWYG area below the Base Option
Packages INST UI item
73. You can use the Move control to move the text above the Base Option Packages UI Item.
74. Save your changes and test the model to verify that the added Text item is appearing in the
UI as expected.
Add Spacers to the UI

Add Spacers within the UI to enhance the look of your UI or to add space between controls.
75. Navigate to the Mechanical Options page (CARMECHOPT) in the Pages panel. The
automatically generated UI looks like the image below, in the WYSIWYG editing area.
76. Select the Mechanical Options UI item.

78. Select Spacer and click Add to Page control.
79. To get the desired appearance: in the Width field enter: 500, in the Height field enter: 2,
and in the Inline Style field enter:
position:relative;left:-150px;background-color:gray;
Instructor Note: Do not add "px;" to the Width or Height values in the Add Spacer dialog
box. Doing so may cause the dialog box to freeze.
80. Move this Spacer above the Mechanical Options UI item, using the Move control.
81. Add two other Spacers: one below the Mechanical Options UI item, and another below the
Drive Type UI item.
82. Save and test the changes.

At run time, the Mechanical Options page should look like the following image.
Change Control Templates

Change the control template for the wheel selection from Radio Button group to a Checkbox
group.
83. Navigate to the Exterior Options Page in the Pages panel.
84. Click the chevron icon for the Wheels option class page item, to expand the edit toolbar and
then click the Edit control.
85. The Edit Page Item dialog box opens.
86. Change the Template from the default (Enhanced Radio Button Group) to: Enhanced
Check Box Group.
87. The change to the template should now be visible in the WYSIWYG editing area. The radio
buttons for the Wheels option class are now check boxes.
88. Save and test the changes to the UI, using the Test Model button.
You have created a customized user interface, and tested the model to verify that the
customizations appear as expected at run time.
Practice 5-1: Create Supplemental Structure
Overview
This practice shows the fundamentals of:
 Adding supplemental structure to a configurator model
Prerequisites
the practice for the previous lesson.
User Login: scmXX.student (XX is the student number assigned to you)
Summary of Tasks
 Sign In and Navigate to the Configurator Models work area
 Search for Your Workspace
 Add Supplemental Structure to the Model
Steps
Sign In and Navigate to the Configurator Models work area

2. Click on the Configurator Models icon
3. You are now on the Configurator Modeling Overview page, where you see a table with a list
of workspaces.
4. If you completed the practice in the previous lesson, then you should see the workspace
that you created in the table. You can skip to step 11, below.
5. If the user ID that you logged in as has not created any workspaces yet, then you will see
that the table is empty. You can then change the View filter to All Workspaces instead of the
default, My Workspaces, to see workspaces that were created by other users.
6. On the Configurator Models Overview page, click the Tasks panel tab.
Search for Your Workspace
7. In the Tasks panel, click the Manage Workspaces task.
8. This action should open a new dynamic tab, with the ability to search for workspaces.
9. Search for the workspace that you created with the Name like TRG_WS_XX_n, where XX is
your student number, and n is a unique number for this workspace.
10. The workspace you created is displayed in the table of workspaces.
11. Click the link with the workspace name.

12. A new dynamic tab opens, for the workspace, which contains the workspace attributes and
the any participants in the workspace.
13. You see the models that you added to your workspace in the previous practice.
You will work on these models to add supplemental structure, create rules, and create and
edit a user interface.
Add Supplemental Structure to the Model

14. Click the Name of the 4 Door Sedan model to open it. The model will open in a new
dynamic tab.
15. Click the Structure sub-tab, if it is not selected by default.
16. Browse the structure, by opening and closing the nodes of the Structure Hierarchy tree.
Familiarize yourself with the contents of the Structure sub-tab, such as the attributes
presented in the Overview sub-tab for the selected node in the structure tree.
Tip: You can select View by Description from the View menu to see the item descriptions in
the model tree, instead of the item names.
17. When ready, select the model's root node, CAR4DRSDN, click Create, then select Create
Option Feature from the menu.
18. A Create Option Feature dialog box as seen below will open and you can enter the details
as shown below:
Name: Base Option Packages XX

Description: Base Option Packages
Minimum Selections: 0
Maximum Selections: 1
Leave Enable Option Quantities unchecked
19. Click OK in the Create Option Feature dialog box to complete the creation of the option
feature.
Suggestion: Select View by Description from the View menu to display the item
descriptions in the model tree, instead of the item names.
20. By default, in the Structure view, the option feature will be highlighted to indicate that it is the
currently selected structure node. Click Create again and you will see the contextual menu
with only the Create Option command being enabled. Select Create Option.
21. The Create Option dialog box opens, as shown below
22. Enter the first of the following Options, which represent several different choices of option
packages:
 L- Base Trim
 LX - Luxury Package
 GLX - Super Luxury Package
 SX - Sports Package
You don’t have to specify Descriptions, but you can do so, to make the definition more
complete.
23. After entering the name of each option, click Apply and Create Another. After you have
created the last option, click OK on the Create Option Dialog box. This adds all your options
to the model structure. Your model structure now looks something like the image below,
which shows the option feature and the options that you created.
24. Click the Test Model button at the top right of the page.
26. Click OK in the dialog box without making any changes. If the model has unsaved changes,
you will see a dialog box warning you about saving them. Click Yes to save your changes to
the model ,and continue.
27. On continuation, the default run time UI appears in a new tab.
28. You will see the supplemental structure that you created in the previous steps, represented
in the default UI as a set of options.
29. Click Cancel. You return to the Edit Configurator Model page.
Practice Complete
You have created supplemental structure, and tested the model to verify that the supplemental
structure appears as expected in the run time user interface.
Practice 5-2: Create Rules
Overview
 Adding rules to a configurator model
Prerequisites
 You have created supplemental structure for the configurator model, as described in
the previous practice for this lesson.
Steps
Add Rules to the Model

2. Open the model and navigate to the Rules sub-tab.
3. If you did not log out after creating the supplemental structure, and if you have any unsaved
changes, you will see a warning message about saving your changes. Click Yes in that
dialog box to continue.
4. You will create a set of statement rules so that each of your option packages, when
selected, will select various combinations of items within the model. The behavior for an
example of the rules you will create is:
 If the end user selects the LX-Luxury Package, then the 8-way Power Driver Seat, 8-
way Power Passenger Seat, the Cloth option for the seat trim, the 2.0L turbo DOHC
Engine and the 16” Steel wheels will be selected in the end user's configuration, by
default.
 To impart this behavior to the configurator model, you will define the following
statement rule, which contains multiple statements:
‘LX - Luxury Package’ IMPLIES ‘8-way Power Driver Seat’;
‘LX - Luxury Package’ IMPLIES ‘8-way Power Passenger Seat’;
‘LX - Luxury Package’ IMPLIES ‘Cloth’;
‘LX - Luxury Package’ IMPLIES ‘2.0L turbo DOHC’;
‘LX - Luxury Package’ IMPLIES ‘16” Steel Wheels’;
5. In order to create this rule, on the Rules sub-tab, click Create, which will open a menu of
the types of rule entities you can add. Select Create Statement Rule.
6. The Create Statement Rule dialog box opens.
7. Enter the following values in the Create Statement Rule dialog box:
Name: Luxury Option Default Selections XX
Description: (not required) Default selections when the Luxury Option is selected.
Rule Class: Default
(A rule assigned to the Default class allows the end user to change the default selection
made by the rule. For example if the user wants to pick heated seats instead of the
defaulted power seats when configuring the item, he would be able to because of the use of
Default.)
8. Click OK on the Create Statement Rule dialog box.
9. Once you click OK, the Rule Details section appears.
10. Now you will add the text that defines the behavior of the rule, into the Rule Text field. You
can type in the entire text of the rule. You can also insert many of the items participating in
the rule from the Structure view on the left hand side.
11. Click the heading Structure in the left pane. This action collapses the Rules list and
provides a view of the structure of the current configurator model.
12. You can choose to work with either item names or item descriptions in the structure view by
making the appropriate selection in the View menu.
13. Now you can start defining the Rule Text for the rule specified in step 4. Expand the Base
Option Packages option feature. The option you want to use in the rule is LX-Luxury
Package. Select that node in the structure and click the Insert into Rule Text button to add
a syntactically correct reference to the item into the rule text.
After this action, your Rule Details->Rule Text will look as follows
Even though you are interacting with the selected item's Description in the structure view,
the Name of the item with its entire path is inserted into the rule text.
14. From the drop-down list of logic operators, select IMPLIES.
The operator IMPLIES is then inserted into the rule text, at the location of your cursor.
15. Go back to the Structure view again and expand Interior Options to show the Seats node.
Then expand Seats to show the 8-way Power Driver Seat option.
16. Select the 8-way Power Driver Seat option and click the Insert into Rule Text action
again.
17. Since there is a need to have multiple rule statements in this one rule, type in a semi-colon (
; ) to terminate the first statement. After this step, your rule text will look as shown below:
18. The rule editor enables you to validate the rule text as being syntactically correct. Click the
Validate button.
19. You will see that there were no errors detected. The rule status is set to Valid.
20. Delete the single quotation mark ( ' ) that is the first character in the rule text, then click
Validate again.
21. You will see an error message, as shown below. Click OK after reading the message.
This message indicates that there is an error with the rule definition. Single quotation marks
are required to delimit node names that contain spaces, and to delimit node names in a
node path, which are separated with by the dot character ( . ). Removing a delimiting
quotation mark makes the node reference invalid.
22. Restore the single quotation mark and click Validate. Now the rule text is valid again. Click
Save, to save the model with this new rule.
23. Continue to add the rest of the statements listed in step 4, going through the same process
of finding the node in the structure and adding it to the rule text. Make sure each statement
ends with a semicolon. Validate after each statement so that you can fix any errors right
away.
24. Once the rule is complete you can test the model. Click the Test Model button.
26. Click OK in the dialog box without making any changes.

27. If you had any unsaved work in the Rules subtab, you will see the following dialog box. Click
Yes to continue.
28. The default run time UI appears in a new tab.

29. The Base Option Packages appear in the default UI, as a list of options.
30. Select the LX-Luxury Package.
31. Verify that all the items you have specified on the right hand side of the IMPLIES operator in
the rule statements are selected in the UI, with check marks, or by the selection of a radio
button. The option selections are 8-way Power Driver Seat, 8-way Power Passenger Seat,
the Cloth option for the seat trim, the 2.0L turbo DOHC Engine and the 16” Steel wheels.
.
32. Another way of ensuring the selection of options is by clicking on the Finish and Review
button, so that a valid configuration is finished for you.
33. The Review page opens, and displays all the current selections from the item structure.
34. Click OK to complete the test.
Practice Complete
You have written rules and tested the model to verify that the rules are functioning as expected
in the run time user interface.
Practice 5-3: Create and Customize User Interfaces
Overview
 Creating a basic user interface
 Customizing the user interface by adding display conditions, images, styled text, and
changing control templates
Prerequisites
 You have created supplemental structure and rules for the configurator model, as
described in the previous practices for this lesson.
Summary of Tasks
 Create a User Interface for the Model
 Customize the User Interface
 Add Display Conditions
 Add an Image to the UI
 Add a Text Element to the UI
 Add Spacers to the UI
 Change Control Templates
Steps
Create a User Interface for the Model

2. Open the model and navigate to the User Interfaces sub-tab.
3. Create a new user interface by selecting Create on the Actions menu or clicking the Create
button on the User Interfaces table.
4. A Create User Interface dialog box opens. Enter the following details:
Name: Step By Step UI XX

Template Map: Step by Step Navigation
Note: You can also try creating user interfaces with the other two Template Maps: Dynamic
Tree Navigation and Single Page Navigation.
5. Click Save and Close in the Create User Interface dialog box. A user interface is generated
automatically, following the selected template map that associates the structure of your
configurator model with UI elements.
6. Once the UI is created, two tabs appear below the list of user interfaces: Overview and
Design, with the default focus on Overview.
7. On the Overview tab, you can edit the name and description of your UI. You can also
choose the applications and languages for which your user interface is applicable. By
default, a UI is applicable for (that is, available to at run time) all calling applications and all
languages. When you select the Selected option, the Select button becomes enabled,
allowing you to select specific applications or languages for which your user interface is
applicable.
8. To gain more room to view the details of the UI, you can collapse the User Interfaces table.
9. (Optional) Test the automatically generated UI before you begin to customize it, by using the
Test Model button, as you did in previous exercises. Make sure that you select the user
interface that you would like to test, when the Test Model dialog box appears.
10. Close the Test Model tab after you are done seeing the uncustomized UI that was
generated.
Customize the User Interface

11. Navigate to the Design tab.
12. The pages of UI appear by default in the Pages panel. There are four pages for the Car
model. If you created a Step By Step UI, there are four corresponding steps.
13. By default, the Engine Reference Model is part of the Mechanical Options Page, whose UI is
shown on the UI Page CARMECHOPT. In the Pages panel, select the page
CARMECHOPT. The WYSIWYG editing area shows the UI page items that appear on that
page at run time.
In the automatically generated UI, the end user has to click the Configure button to navigate
to the Engine Reference Model UI. Instead of this indirect navigation, assume that you'd
prefer that the user simply navigate to a page in the UI for the Car model itself. To
accomplish this goal, you will create that new page, having all the options of the Engine
model.
14. In the Pages panel, select the page Page: CARMECHOPT and click the Create button.
15. The Create Page dialog box appears.
Enter the pertinent information as shown below, and click OK to create the page.
Name: Engine Page
Associated Model Node: Leave it as Mechanical Options or select the Root Model Node.
Page Caption: Engine
Template: Leave the template as the Default (Stack Layout for Page from UI Template
Map).
16. The new page is added to the Pages list, with focus. The WYSIWYG editing area is blank.
17. Navigate to the Structure tab of the Resources Panel (below the Pages panel).
18. Drill down to the Engine Reference Model in the structure. Tip: You can also view the
structure by Description, if it's easier to find nodes that way.
19. Add the option classes Engine Type and Options to the Engine page that you created, by
right-clicking on the items and using the Add as Page Item action from the context menu.
20. You can also use the Add to Page button, to add these option classes as page items to the
new page.
21. This is how the Engine page should look after adding the option classes:
22. Notice that the page items that are stacked can be moved to the center of the page, like the
items in the generated UI, by changing the Layout template on the page. In step 14 above,
the page template was left as the default (Stack Layout). The layout for this page can be
changed to Form Layout, by using the edit control for the Page, made visible by expanding
the Select Page control, accessed by clicking the topmost chevron icon on the page, then
clicking the Edit Page control, indicated by a pencil icon.
23. This action opens an Edit Page dialog box, in which you can change the Template from
Stack Layout to Form Layout for Page. Then click OK in the Edit Page dialog box.
24. After this change, the contents of your new page should shift to the right, and the page
should look like the following image:
25. You can reorder UI items on any page using the Move controls in the Edit tool bar of the
Pages panel.
26. Move the Engine Page above the first page, by using the Move to Top control in the toolbar
27. The UI item that was generated to facilitate the navigation to configure the Engine can now
be deleted from the Mechanical Options page, using the delete control in the edit toolbar of
that item. Select the CARMECHOPT page in the Pages panel, then select the Engine UI
page item, then click the Delete Page Item control. Click Yes to the warning about the
deletion.
28. Save your model changes, with the Save control, then test the UI by using the Test Model
button. Be sure that your custom user interface is selected for the test.
29. You should see the train in your UI with Engine as the first stop.
30. Close the Test Model window and move the Engine page to before or after the Mechanical
Options page, using the Move controls in the Pages panel.
31. You can save and test again to see how the train stops change.
32. (Optional) You can try to add other pages or other UI content to existing UI pages to
familiarize yourself with the WYSIWYG editing area capabilities.
Add Display Conditions
You will set the display conditions to hide the Seats and Trim option classes, if an option is
already selected in the Base Option Packages option feature.
33. Navigate to the Interior Color option class in the WYSIWYG editing area. You can explore
through the five UI pages to find it, or navigate to “Page: CARINTOPT” in the Pages panel.
34. Click the chevron-icon selection control, to select the Seats UI Item for editing.
35. Click the Edit Page Item control.
36. In the Edit Page Item dialog box, under Run Time Conditions, set the Displayed attribute
value to Conditionally.
37. Additional parameters for the display condition are presented when Displayed is set to
Conditionally.
38. Set the Object value to Other Model Node, because we want to use the selection state of
the Base Option Packages node to control the display of the Seats option class.
39. Click the Search and Select: Node action control.
40. From the Search And Select: Model Node dialog box, select the Base Option Packages
option feature, as we want to base our display of Seats on the state of this option feature.
Click OK.
41. You can use the attribute SelectedCount to control the display of the Seats option class.
The condition that you are attempting to define is that the Seats option class should be
displayed only when the value of the SelectedCount attribute for the Base Option Packages
option feature is zero. That value occurs when no option has been selected for this option
feature. The purpose of this display condition is to support the effect of one of the rules you
defined. That rule selects a Seat option if the user selects the Base Option Package,
making it unnecessary for the user to explicitly select a Seat option. Hence the Seat can be
omitted from the UI. If the user does not want to select the Base Option Package and
wants to explicitly select a Seat option, then the Seats option class remains displayed in the
UI to enable that selection. So you are designing the UI to modify itself based on user
actions, which can simplify and enhance the user's shopping experience.
42. Set the Value of the attribute equal to 0, to complete the condition.
43. Click OK on the Edit Page Item dialog box to save the run time display condition.
44. Save and test the model UI. Make sure that you select the UI you are customizing in the
Test Model dialog box.
45. Once the UI launches, and without selecting the Base Option Package, navigate to the
Interior Options page (or step).
You will see the Seats option class being displayed for selection.
46. Go back to the 4 Door Sedan page (or step) and select a Base Option Package.
47. Navigate back to Interior Options to see that the Seats option class no longer appears.
48. You have now verified that your display condition is working. Close the Test Model page.
49. (Optional) Repeat these steps for the Trim option class and test the model to verify that the
display condition works, using similar steps.
50. (Optional) You can try other model node/attributes/value combinations to achieve the same
functional result, to hide the option class
Add an Image to the UI
51. Move the Engine Page in the pages Panel to be before the CAREXTOPT page.
52. Since you are setting up a UI to configure a car, you might want to add the image of a car to
the first page.
53. Go to the first page in the Pages panel
54. In the WYSIWYG editing area, select the layout region.
55. In the Resources panel, click the UI Elements tab.
56. Select Image and select Add to Page.
57. This action opens an Add Image dialog box.
58. Click Browse, to browse for an image to add.

59. A file selection window opens and you can browse through the folders on your computer to
select an image. You should be able to select L4d3-car-image.gif on your desktop.
Note: If you don’t have the image file of a car, pick any image file. This exercise is to
understand the concept of adding an image.
60. Set the value of Inline Style to the following CSS style declaration:
position:relative;top:10px;left:-100px
61. Click OK to close the Add Image dialog box.
62. Move the image to the top of the page using the Move Up action control.
63. Save and test the UI to make sure that the image is appearing at the desired location in the
UI.
64. If the image position or size needs to be modified, adjust the inline style to make the
adjustments.
Add a Text Element to the UI
Add Text with an inline style to inform the user about choosing a Base Option Package to
preselect some options.
65. Navigate to Base Option Packages XX Option Feature in the WYSIWYG editing area. Hint:
it's on the CAR4DRSDN page.
66. Select that UI item using the chevron icon.
67. This selection determines that the next UI item to be added will be placed below the
selected item.
69. Select Text and click the Add to Page control.

70. The Add Text dialog box appears.
71. In the Text field, enter:

Select a Base Package to have some options selected for you!
72. In the Inline Style field, enter:
font-size:16px;font-weight:bold;color:blue;border:1px solid;border-
color:Gray;position:relative;left:-120px
73. Click OK to save the Text item. It will appear in the WYSIWYG area below the Base Option
Packages XX UI item
74. You can use the Move control to move the text above the Base Option Packages UI Item.
75. Save your changes and test the model to verify that the added Text item is appearing in the
UI as expected.
Add Spacers to the UI

Add Spacers within the UI to enhance the look of your UI or to add space between controls.
76. Navigate to the Mechanical Options page (CARMECHOPT) in the Pages panel. The
automatically generated UI looks like the image below, in the WYSIWYG editing area.
77. Select the Mechanical Options UI item.

79. Select Spacer and click Add to Page control.
80. To get the desired appearance: in the Width field enter: 500, in the Height field enter: 2,
and in the Inline Style field enter:
position:relative;left:-150px;background-color:gray;
Click OK to close the dialog box.
81. Move this Spacer above the Mechanical Options UI item, using the Move control.
82. Add two other Spacers: one below the Mechanical Options UI item, and another below the
Drive Type UI item.
83. Save and test the changes.
At run time, the Mechanical Options page should look like the following image.
Change Control Templates

Change the control template for the wheel selection from Radio Button group to a Checkbox
group.
84. Navigate to the Exterior Options Page in the Pages panel.
85. Click the chevron icon for the Wheels option class page item, to expand the edit toolbar and
then click the Edit control.
86. The Edit Page Item dialog box opens.
87. Change the Template from the default (Enhanced Radio Button Group) to: Enhanced
Check Box Group.
88. The change to the template should now be visible in the WYSIWYG editing area. The radio
buttons for the Wheels option class are now check boxes.
89. Save and test the changes to the UI, using the Test Model button.
90. (Optional) You can try changing the control template on the Base Option Packages XX from
a drop down template (by default) to a Radio Button Group.
Practice Complete
You have created a customized user interface, and tested the model to verify that the
customizations appear as expected at run time.

EDAG0005

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

EDAG0005

Enviado por

Direitos autorais:

Formatos disponíveis

Practices for Lesson 5:

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

User Login: scm00.Instructor

Sign In and Navigate to the Configurator Models work area

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

11. Click the link with the workspace name.

Add Supplemental Structure to the Model

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Name: Base Option Packages INST

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

21. The Create Option dialog box opens, as shown below

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

User Login: scm00.Instructor

Add Rules to the Model

6. The Create Statement Rule dialog box opens.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Click Yes to continue.

27. Click OK in the dialog box without making any changes.

30. Select the LX-Luxury Package.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

34. Click OK to complete the test.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

User Login: scm00.Instructor

Create a User Interface for the Model

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Customize the User Interface

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

35. Click the Edit Page Item control.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Add an Image to the UI

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

54. In the Resources panel, click the UI Elements tab.

55. Select Image and select Add to Page.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

57. Click Browse, to browse for an image to add.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

68. Select Text and click the Add to Page control.

70. In the Text field, enter:

Add Spacers to the UI

76. Select the Mechanical Options UI item.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

Copyright © 2016, Oracle and/or its affiliates. All rights reserved.

82. Save and test the changes.

Change Control Templates