Вы находитесь на странице: 1из 80

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.

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 2 of 80 Rev 1
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.

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 3 of 80 Rev 1
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.

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 4 of 80 Rev 1
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.

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 5 of 80 Rev 1
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.

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 6 of 80 Rev 1
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.

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 7 of 80 Rev 1
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.

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 8 of 80 Rev 1
Demonstration 5-2: Create Rules
Overview
This demonstration shows the fundamentals of:
 Adding rules 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.
 You have created supplemental structure for the configurator model, as described in
the previous demonstration for this lesson.

User Login: scm00.Instructor

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’;
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 9 of 80 Rev 1
‘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.

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 10 of 80 Rev 1
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.

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 11 of 80 Rev 1
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.

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 12 of 80 Rev 1
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.

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 13 of 80 Rev 1
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:

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 14 of 80 Rev 1
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.

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 15 of 80 Rev 1
25. If you had any unsaved work in the Rules subtab, you will see the following dialog box

Click Yes to continue.


26. The Test Model dialog box opens.

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.

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 16 of 80 Rev 1
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.

Demonstration Complete
You have written rules and tested the model to verify that the rules are functioning as expected
in the run time user interface.

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 17 of 80 Rev 1
Demonstration 5-3: Create and Customize User Interfaces
Overview
This demonstration shows the fundamentals of:
 Creating a basic user interface
 Customizing the user interface by adding display conditions, images, styled text, and
changing control templates

Prerequisites
 You have created a workspace and added a configurator model to it, as described in
the demonstration for the previous lesson.
 You have created supplemental structure and rules for the configurator model, as
described in the previous demonstrations for this lesson.

User Login: scm00.Instructor

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


1. In the Navigator, under Product Management, find Configurator Models.
2. Open the model and navigate to the User Interfaces sub-tab.

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 18 of 80 Rev 1
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:

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 19 of 80 Rev 1
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.

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 20 of 80 Rev 1
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.

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 21 of 80 Rev 1
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.

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 22 of 80 Rev 1
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.

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 23 of 80 Rev 1
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.

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 24 of 80 Rev 1
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.

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 25 of 80 Rev 1
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.

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 26 of 80 Rev 1
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

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 27 of 80 Rev 1
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.

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 28 of 80 Rev 1
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.

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 29 of 80 Rev 1
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.

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 30 of 80 Rev 1
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.

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 31 of 80 Rev 1
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.

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 32 of 80 Rev 1
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

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 33 of 80 Rev 1
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.

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 34 of 80 Rev 1
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.

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 35 of 80 Rev 1
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!
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 36 of 80 Rev 1
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.


77. Navigate to the Resources panel and click the UI Elements tab.

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 37 of 80 Rev 1
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.

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 38 of 80 Rev 1
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.

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 39 of 80 Rev 1
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.

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 40 of 80 Rev 1
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.

Demonstration Complete
You have created a customized user interface, and tested the model to verify that the
customizations appear as expected at run time.

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 41 of 80 Rev 1
Practice 5-1: Create Supplemental Structure
Overview
This practice 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 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


1. In the Navigator, under Product Management, 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 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.

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 42 of 80 Rev 1
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.

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 43 of 80 Rev 1
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.

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 44 of 80 Rev 1
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.

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 45 of 80 Rev 1
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.

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 46 of 80 Rev 1
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.

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 47 of 80 Rev 1
Practice 5-2: Create Rules
Overview
This practice shows the fundamentals of:
 Adding rules to a configurator model

Prerequisites
 You have created a workspace and added a configurator model to it, as described in
the practice for the previous lesson.
 You have created supplemental structure for the configurator model, as described in
the previous practice for this lesson.

User Login: scmXX.student (XX is the student number assigned to you)

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 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’;
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 48 of 80 Rev 1
‘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.

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 49 of 80 Rev 1
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.

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 50 of 80 Rev 1
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.

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 51 of 80 Rev 1
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.

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 52 of 80 Rev 1
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:

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 53 of 80 Rev 1
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.

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 54 of 80 Rev 1
25. The Test Model dialog box opens.

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.

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 55 of 80 Rev 1
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.

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 56 of 80 Rev 1
Practice 5-3: Create and Customize User Interfaces
Overview
This practice shows the fundamentals of:
 Creating a basic user interface
 Customizing the user interface by adding display conditions, images, styled text, and
changing control templates

Prerequisites
 You have created a workspace and added a configurator model to it, as described in
the practice for the previous lesson.
 You have created supplemental structure and rules for the configurator model, as
described in the previous practices for this lesson.

User Login: scmXX.student (XX is the student number assigned to you)

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

1. In the Navigator, under Product Management, find Configurator Models.


2. Open the model and navigate to the User Interfaces sub-tab.

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 57 of 80 Rev 1
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
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 58 of 80 Rev 1
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.

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 59 of 80 Rev 1
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.

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 60 of 80 Rev 1
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.

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 61 of 80 Rev 1
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.

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 62 of 80 Rev 1
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.

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 63 of 80 Rev 1
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.

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 64 of 80 Rev 1
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.

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 65 of 80 Rev 1
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

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 66 of 80 Rev 1
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.

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 67 of 80 Rev 1
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.

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 68 of 80 Rev 1
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.

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 69 of 80 Rev 1
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.

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 70 of 80 Rev 1
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.

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 71 of 80 Rev 1
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

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 72 of 80 Rev 1
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.

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 73 of 80 Rev 1
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.

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 74 of 80 Rev 1
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.
68. Navigate to the Resources panel and click the UI Elements tab.

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!
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 75 of 80 Rev 1
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.


78. Navigate to the Resources panel and click the UI Elements tab.

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 76 of 80 Rev 1
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.

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 77 of 80 Rev 1
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.

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 78 of 80 Rev 1
86. The Edit Page Item dialog box opens.

87. Change the Template from the default (Enhanced Radio Button Group) to: Enhanced
Check Box Group.

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 79 of 80 Rev 1
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.

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 80 of 80 Rev 1