Defining views for a Management Center object

As part of creating a custom tool for the Management Center, define an OpenLaszlo library class for each object's properties view and list view.

Feature Pack 2Feature Pack 3You must create a definition for each object's properties view and list view, instead of defining an OpenLaszlo library class.

About this task

An object can have only one properties view, but it can have multiple list views. You can use navigation list views to display objects that are related to the currently selected object. For example, when you select a category in the Catalogs tool you can display the list of child catalog entries or the list of child categories.

A list view lists objects in the form of a table, providing selected information about the object, within table cells. For example, a list of catalog entry, showing the sequence, part number, catalog entry name, and other attributes. You can select a specific row to see more details. You can reorder, hide, or show columns in the list view. If the information is editable, while in edit mode, you can make changes directly from the list view. In addition, the Management Center displays search results in a list view. When you create a list view, create one that is used to display a list of objects and one to display search results for that object.

A properties view shows all details about an object. You can use the properties view to edit an existing object or create a new instance of one, for example, a detailed view of all the criteria for a promotion. The properties view can contain entry fields, check boxes, radio buttons, lists, tables, pull-down sections, and tabs. Access the properties view by either selecting to create a new instance of an object or selecting an existing object from a list view.

Procedure

  1. Complete one of the following steps:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > mycompany > recipe.
    • Feature Pack 2Feature Pack 3In the Enterprise Explorer view, expand LOBTools > WebContent > config > mycompany > recipe.
  2. Create a directory named listViewDefinitions, if it does not exist.
  3. Right-click the listViewDefinitions folder and select Import. Expand General and select File system.
  4. Click Next, then click Browse and navigate to the following directory:
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1TutorialSource\LOBTools\WebContent\WEB-INF\src\lzx\mycompany\recipe\listViewDefinition, where TutorialSource is the location where you extracted the Tutorial sample source code WebSphere Commerce Version 7.0.0.0Feature Pack 1
    1. Select all files.
    2. Click Finish to import all of the files.
    Feature Pack 2Feature Pack 3TutorialSource\LOBTools\WebContent\config\mycompany\recipe\listViewDefinition, where TutorialSource is the location where you extracted the Tutorial sample source code Feature Pack 2Feature Pack 3
    1. Select all files.
    2. Click Finish to import all of the files.
  5. Open one of the following files and examine the contents:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1RecipeGrid.lzx
    • Feature Pack 2Feature Pack 3RecipeGrid.def
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1RecipeGrid.lzx WebSphere Commerce Version 7.0.0.0Feature Pack 1The following code sample shows the list view that is defined within the RecipeGrid.lzx class file.
    
<library>
        1 <class name="recRecipeNavigationList" extends="wcfNavigationListDefinition" 
                listClass="recRecipeChildList" 
                listTitle="${extRecipeResources.recipe_DisplayName.string}" 
                displayName="${extRecipeResources.recipe_DisplayName.string}" 
                isDefault="true" 
                toolbarIcon="listToolbarIcon" />
        <class name="recRecipeChildList" extends="wcfChildListEditor"
		             listClass="recRecipeGrid"
	               2 objectTypes="ChildRecipe,InheritedChildRecipe"/>
        3 <class name="recRecipeGrid" extends="wcfObjectGrid">
                <wcfGridText name="recipeId" propertyName="recipeId" objectPath="Recipe" visible="false"/>
                <wcfGridText name="recipeName" propertyName="name" objectPath="Recipe" editable="true"
                        text="${extRecipeResources.recipeName_DisplayName.string}"  width="160" />
                <wcfGridText name="time" propertyName="time" editable="true" objectPath="Recipe"
                        text="${extRecipeResources.recipeTime_DisplayName.string}" width="120" />
                <wcfGridComboBox name="difficulty" objectPath="Recipe" propertyName="difficulty"
                        text="${extRecipeResources.difficultyLevel_DisplayName.string}" width="120" />
                <wcfGridText name="description" objectPath="Recipe/RecipeDescription" propertyName="sDesc" 
                        text="${extRecipeResources.recipeShortDescription_DisplayName.string}" editable="false" width="260" />
        </class>                  
        ...
        ...
</library>
    1 recRecipeNavigationList
    extends wcfNavigationListDefinition and is used to list recipes when using the navigation tree by selecting Recipe collections. It uses recRecipeChildList as the listClass. It also uses ChildRecipe as objectTypes, which builds the relation between the user interface and object data.
    2 ChildRecipe
    Defined in class recRecipeReferencesCollection as a wcfParentReferenceObjectDefinition to build the parent-child relationship between the recipe and recipe collection. It has already been created in the lesson Defining child objects and reference objects for a primary object.
    3 recRecipeGrid
    Extends wcfObjectGrid and is used to display the recipes in grid view. It has several column definitions to represent the grid columns, which are implemented by wcfGridText, wcfGridComboBox and other classes according to the column display type.
    Feature Pack 2Feature Pack 3RecipeGrid.def Feature Pack 2Feature Pack 3The following code sample shows the list view that is defined within the RecipeGrid.def definition file.
    <Definitions>
	1 <NavigationListDefinition definitionName="recRecipeNavigationList"
		listDefinitionName="recRecipeChildList"
		listTitle="${extRecipeResources.recipe_DisplayName}"
		displayName="${extRecipeResources.recipe_DisplayName}"
		isDefault="true"
		toolbarIcon="listToolbarIcon"/>
	<ChildListEditor definitionName="recRecipeChildList"
		listDefinitionName="recRecipeGrid"
		2 objectTypes="ChildRecipe,InheritedChildRecipe"/>
	3 <ObjectGrid definitionName="recRecipeGrid">
		<GridText name="recipeId" propertyName="recipeId" objectPath="Recipe"
			visible="false"/>
		<GridText name="name" propertyName="name" objectPath="Recipe"
			editable="true"
			text="${extRecipeResources.recipeName_DisplayName}"
			width="160"/>
		<GridText name="time" propertyName="time" editable="true"
			objectPath="Recipe"
			text="${extRecipeResources.recipeTime_DisplayName}"
			width="120"/>
		<GridComboBox name="difficulty" objectPath="Recipe"
			propertyName="difficulty"
			text="${extRecipeResources.difficultyLevel_DisplayName}"
			width="120"/>
		<GridText name="description" objectPath="Recipe/RecipeDescription"
			propertyName="sDesc"
			text="${extRecipeResources.recipeShortDescription_DisplayName}"
			editable="false" width="260"/>
	</ObjectGrid>
        ...
        ...
</Definitions>
    1 recRecipeNavigationList
    Extends wcfNavigationListDefinition and is used to list recipes when using the navigation tree by selecting Recipe collections. It uses recRecipeChildList as the listDefinitionName. It also uses ChildRecipe as objectTypes, which builds the relation between the user interface and object data.
    2 ChildRecipe
    Defined in the definition recRecipeReferencesCollection as a wcfParentReferenceObjectDefinition to build the parent-child relationship between the recipe and recipe collection. It has already been created in the lesson Defining child objects and reference objects for a primary object.
    3 recRecipeGrid
    Extends wcfObjectGrid and is used to display the recipes in a grid view. It has several column definitions to represent the grid columns, which are implemented by wcfGridText, wcfGridComboBox and other classes according to the column display type.
  6. Complete one of the following steps:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > mycompany > recipe.
    • Feature Pack 2Feature Pack 3In the Enterprise Explorer view, expand LOBTools > WebContent > config > mycompany > recipe.
  7. Create a directory named propertiesViews, if it does not exist.
  8. Right-click the propertiesViews folder and select Import. Expand General and select File system.
  9. Click Next, then click Browse and navigate to the following directory:
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1TutorialSource\LOBTools\WebContent\WEB-INF\src\lzx\mycompany\recipe\propertiesViews, where TutorialSource is the location where you extracted the Tutorial sample source code WebSphere Commerce Version 7.0.0.0Feature Pack 1
    1. Select all files.
    2. Click Finish to import all of files.
    Feature Pack 2Feature Pack 3TutorialSource\LOBTools\WebContent\config\mycompany\recipe\propertiesViews, where TutorialSource is the location where you extracted the Tutorial sample source code Feature Pack 2Feature Pack 3
    1. Select all files.
    2. Click Finish to import all of the files.
  10. Open one of the following files and examine the contents:
    • WebSphere Commerce Version 7.0.0.0Feature Pack 1RecipePropertiesView.lzx
    • Feature Pack 2Feature Pack 3RecipePropertiesView.def
    OptionDescription
    WebSphere Commerce Version 7.0.0.0Feature Pack 1RecipePropertiesView.lzx WebSphere Commerce Version 7.0.0.0Feature Pack 1The following code sample shows the properties view that is defined within the RecipePropertiesView.lzx class file.
    
 1 <class name="recManageRecipeInformation" extends="wcfPropertyPane"> 
        <wcfPropertyTabs name="recipetabs">
                <!-- Property Group: General Information. This properties group contains general information such as name, description etc -->
                <wcfPropertyTabPane name="recipeInfo" text="${extRecipeResources.recipe_GeneralInformationTab.string}">                
                        <wcfPropertyGroup open="true" groupTitle="${extRecipeResources.recipe_GeneralInformationSection.string}">                                             
                                <!-- Property: Name. An input box for the name property. -->              
                                <wcfPropertyInputText 2 propertyName="name" required="true"
                                        promptText="${extRecipeResources.recipeName_DisplayName.string}" />                                
                                <wcfPropertyInputText 2 propertyName="time" 
                                        promptText="${extRecipeResources.recipeTime_DisplayName.string}" />
                                <!-- Property: Difficulty Level. A combo box for the difficulty level property. -->    
                                <wcfPropertyCombobox 2 propertyName="difficulty" 
                                        promptText="${extRecipeResources.difficultyLevel_DisplayName.string}" />                                           
                                <!-- Property: Short Description. A long input box for the short description property. -->    
                                <wcfPropertyInputLongText objectPath="RecipeDescription" propertyName="sDesc" required="true"
                                        promptText="${extRecipeResources.recipeShortDescription_DisplayName.string}" />                
                                <!-- Property: Long Description. A rich text editor for the long description property. -->    
                                <wcfPropertyInputMultiLineText objectPath="RecipeDescription" propertyName="lDesc"
                                    promptText="${extRecipeResources.recipeLongDescription_DisplayName.string}" />                             
                                <recCollectionReferenceList />                
                        </wcfPropertyGroup>      
                </wcfPropertyTabPane>
                
                <!-- Property Group: Recipe Material. --> 
                <wcfPropertyTabPane name="recipeMaterial" text="${extRecipeResources.ingredientsTab.string}">
                        <recRecipeIngredientsList/>                       
                </wcfPropertyTabPane>
                
                <!-- Property Group: Recipe Instruction. -->              
                <wcfPropertyTabPane name="recipeInstruction" text="${extRecipeResources.instructionTab.string}">
                        <recRecipeStepsList/>
                </wcfPropertyTabPane>
                
                <!-- Property Group: Recipe Association. -->               
                <wcfPropertyTabPane name="recipeAssociation" text="${extRecipeResources.associationTab.string}">           
                        <recRecipeAssociationList/>                                        
                </wcfPropertyTabPane>      
        </wcfPropertyTabs>          
</class>
    1 recManageRecipeInformation
    Extends wcfPropertyPane and is used to hold all the recipe properties in different tab pages, which are implemented by using wcfPropertyTabPane. Four tabs are defined:
    • The first holds main information for recipes, such as recipe name, recipe difficulty, recipe time
    • The second holds the ingredients information
    • The third holds the instructions information
    • The fourth holds usage association information
    The property tab pane consists of one or more property groups, while the property group consists of one or more properties. For each property, objectPath and propertyName are used to bind to certain model properties of the object.
    2 propertyName
    Specifies the name of the property of the current object that this property editor must bind to. If no value is provided for objectPath, this property editor binds to the property identified by this attribute on the current object. If there is a value for objectPath, this property editor resolves the objectPath to find the child object. Next, this property editor binds to the property identified by this attribute on that object. For example, the view for the property name is defined as:
    <wcfPropertyInputText propertyName="name" required="true" promptText="${extRecipeResources.recipeName_DisplayName.string}" />
    It does not set the objectPath; the value comes from current object, Recipe, and can be found within the <name></name> element.
    Feature Pack 2Feature Pack 3RecipePropertiesView.def Feature Pack 2Feature Pack 3The following code sample shows the properties view that is defined within the RecipePropertiesView.def definition file.
    1 <PropertyPane definitionName="recManageRecipeInformation">
    <PropertyTabs name="recipetabs">
        <!--
            Property Group: General Information. This properties group contains
            general information such as name, description etc
        -->
        <PropertyTabPane name="recipeInfo"
            text="${extRecipeResources.recipe_GeneralInformationTab}">
            <PropertyGroup open="true"
                groupTitle=
                    "${extRecipeResources.recipe_GeneralInformationSection.string}">
                <!-- Property: Name. An input box for the name property. -->              
                <PropertyInputText 2 propertyName="name" required="true"
                    promptText="${extRecipeResources.recipeName_DisplayName}"/>
                <PropertyInputText 2 propertyName="time"
                    promptText="${extRecipeResources.recipeTime_DisplayName}"/>
                <!--
                    Property: Difficulty Level. A combo box for the difficulty level
                    property.
                -->    
                <PropertyCombobox 2 propertyName="difficulty"
                    promptText="${extRecipeResources.difficultyLevel_DisplayName}"/>
                <!--
                    Property: Short Description. A long input box for the short
                    description property.
                -->    
                <PropertyInputLongText objectPath="RecipeDescription"
                    2 propertyName="sDesc" required="true"
                    promptText=
                        "${extRecipeResources.recipeShortDescription_DisplayName}"/>
                <!--
                    Property: Long Description. A rich text editor for the long
                    description property.
                -->
                <PropertyInputMultiLineText objectPath="RecipeDescription"
                    2 propertyName="lDesc"
                    promptText=
                        "${extRecipeResources.recipeLongDescription_DisplayName}"/>

                <ReferenceEditor name="parentCollectionRefEditor"
                    promptText="${extRecipeResources.recipe_AssignedCollection}"
                    headerText="${extRecipeResources.recipe_AssignedCollection}"
                    parentObjectTypes="RecipeCollection"
                    allowCreate="true"
                    required="true"
                    referenceObjectTypes="ChildRecipe"/>
            </PropertyGroup>
        </PropertyTabPane>

        <!-- Property Group: Recipe Material. -->
        <PropertyTabPane name="recipeMaterial"
            text="${extRecipeResources.ingredientsTab}">
            <PropertyChildListEditor
                baseDefinitionName="recRecipeIngredientsChildListEditor"/>
        </PropertyTabPane>

        <!-- Property Group: Recipe Instruction. -->
        <PropertyTabPane name="recipeSteps"
            text="${extRecipeResources.instructionTab}">
            <PropertyChildListEditor baseDefinitionName="recRecipeStepsChildListEditor"/>
        </PropertyTabPane>

        <!-- Property Group: Recipe Association. -->
        <PropertyTabPane name="recipeAssociation"
            text="${extRecipeResources.associationTab}">
            <PropertyChildListEditor baseDefinitionName="recRecipeAssociationList"/>
        </PropertyTabPane>
    </PropertyTabs>
</PropertyPane>
    1 recManageRecipeInformation
    Extends wcfPropertyPane and is used to hold all the recipe properties in different tab pages, which are implemented by using wcfPropertyTabPane. Four tabs are defined:
    • The first holds main information for recipes, such as recipe name, recipe difficulty, recipe time
    • The second holds the ingredients information
    • The third holds the instructions information
    • The fourth holds usage association information
    The property tab pane consists of one or more property groups, while the property group consists of one or more properties. For each property, objectPath and propertyName are used to bind to certain model properties of the object.
    2 propertyName
    Specifies the name of the property of the current object that this property editor must bind to. If no value is provided for objectPath, this property editor binds to the property identified by this attribute on the current object. If there is a value for objectPath, this property editor resolves the objectPath to find the child object. Next, this property editor binds to the property identified by this attribute on that object. For example, the view for the property name is defined as:
    <PropertyInputText propertyName="name" required="true" promptText="${extRecipeResources.recipeName_DisplayName}"/>
    It does not set the objectPath; the value comes from current object, Recipe, and can be found within the <name></name> element.
  11. WebSphere Commerce Version 7.0.0.0Feature Pack 1Right-click the LOBTools project and select Build OpenLaszlo Project.