Defining views for a Management Center object

In this lesson, you define the properties view and list view definition for the each object that is managed by your custom tool.

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 change object properties 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

In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > xml > mycompany > recipe.
Within this directory, create a subdirectory that is named listViewDefinitions.
Right-click the listViewDefinitions folder and select Import. Expand General and select File system.
Click Next, then click Browse to the following directory:

TutorialSource\LOBTools\WebContent\WEB-INF\src\xml\mycompany\recipe\listViewDefinitions, where TutorialSource is the location where you extracted the Tutorial sample source code
Select all of the list view definition files within this directory. Click Finish to import the files.

Within your workspace, open the RecipeGrid.xml file to examine the file contents.

The following code sample shows the list view that is defined within the RecipeGrid.xml definition file.

<Definitions>
1<NavigationListDefinition definitionName="cmc/recipe/RecipeNavigationList" 
   displayName="${ExtRecipeResources.recipe_DisplayName}" isDefault="true" listDefinition="cmc/recipe/RecipeChildList" 
   listTitle="${ExtRecipeResources.recipe_DisplayName}" toolbarIcon="listToolbarIcon">
    <dependency localName="ExtRecipeResources" moduleName="cmc/recipe/ExtRecipeResources"/>
  </NavigationListDefinition>
  
  <NavigationListDefinition definitionName="cmc/recipe/UnassignedRecipeNavigationList" 
   displayName="${ExtRecipeResources.recipe_DisplayName}" isDefault="true" listDefinition="cmc/recipe/RecipeList" 
   listTitle="${ExtRecipeResources.recipe_DisplayName}" toolbarIcon="listToolbarIcon">
    <dependency localName="ExtRecipeResources" moduleName="cmc/recipe/ExtRecipeResources"/>
  </NavigationListDefinition>
  
  <ChildListEditor definitionName="cmc/recipe/RecipeChildList" listDefinition="cmc/recipe/RecipeGrid" 
2 objectTypes="ChildRecipe">
  </ChildListEditor>
  
  <ChildListEditor definitionName="cmc/recipe/RecipeList" listDefinition="cmc/recipe/RecipeSearchGrid" 
   objectTypes="Recipe"> 
  </ChildListEditor>	
  
3<ObjectGrid definitionName="cmc/recipe/RecipeGrid">
    <dependency localName="ExtRecipeResources" moduleName="cmc/recipe/ExtRecipeResources"/>
    <GridText name="recipeId" objectPath="Recipe" propertyName="recipeId" visible="false"/>
    <GridText editable="true" name="recipeName" objectPath="Recipe" propertyName="name"  
     text="${ExtRecipeResources.recipeName_DisplayName}" width="160"/>
    <GridText editable="true" name="time" objectPath="Recipe" propertyName="time" 
     text="${ExtRecipeResources.recipeTime_DisplayName}" width="120"/>
    <GridComboBox name="difficulty" objectPath="Recipe" propertyName="difficulty" 
     text="${ExtRecipeResources.difficultyLevel_DisplayName}" width="120"/>
    <GridText editable="false" name="description" objectPath="Recipe/RecipeDescription" propertyName="sDesc" 
     text="${ExtRecipeResources.recipeShortDescription_DisplayName}" width="260"/>
    <GridText editable="false" name="longDescription" objectPath="Recipe/RecipeDescription" propertyName="lDesc" visible="false"/>
  </ObjectGrid> 
  
  <ObjectGrid definitionName="cmc/recipe/RecipeSearchGrid">
    <dependency localName="ExtRecipeResources" moduleName="cmc/recipe/ExtRecipeResources"/>
    <GridText name="recipeId" propertyName="recipeId" visible="false" width="100"/>
    <GridText editable="true" name="recipeName" propertyName="name" 
     text="${ExtRecipeResources.recipeName_DisplayName}" width="160"/>
    <GridText editable="true" name="time" propertyName="time" text="${ExtRecipeResources.recipeTime_DisplayName}" width="120"/>
    <GridComboBox editable="true" name="difficulty" propertyName="difficulty" 
     text="${ExtRecipeResources.difficultyLevel_DisplayName}" width="120"/>			
    <GridText editable="true" name="description" objectPath="RecipeDescription" propertyName="sDesc" 
     text="${ExtRecipeResources.recipeShortDescription_DisplayName}" width="260"/>
    <GridText name="longDescription" objectPath="RecipeDescription" propertyName="lDesc" visible="false"/>
  </ObjectGrid> 	
  
</Definitions>

1 RecipeNavigationList: Extends NavigationListDefinition and is used to list recipes when using the navigation tree by selecting Recipe collections. It uses RecipeChildList 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 RecipeReferencesCollection as a ParentReferenceObjectDefinition to build the parent-child relationship between the recipe and recipe collection. You created this definition in a previous lesson.
3 RecipeGrid: Extends ObjectGrid 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 GridText, GridComboBox and other classes according to the column display type.

In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > xml > mycompany > recipe.
Within this directory, create a subdirectory that is named propertiesViewDefinitions.
Right-click the propertiesViewDefinitions folder and select Import. Expand General and select File system.
Click Next, then click Browse to the following directory:

TutorialSource\LOBTools\WebContent\WEB-INF\src\xml\mycompany\recipe\propertiesViewDefinitions, where TutorialSource is the location where you extracted the Tutorial sample source code
Select all of the properties view definition files within this directory. Click Finish to import the files.

Within your workspace, open the RecipePropertiesView.xml file to examine the file contents.

The following code sample shows the list view that is defined within the RecipePropertiesView.xml definition file.


<Definitions>

1<PropertyPane definitionName="cmc/recipe/ManageRecipeInformation">
  <dependency localName="ExtRecipeResources" moduleName="cmc/recipe/ExtRecipeResources"/>
     
    <!-- Property Group: General Attachment Information. This properties group contains general attachment information such as name, description etc -->
    <PropertyTabs name="recipetabs">
  		
      <PropertyTabPane name="recipeInfo" text="${ExtRecipeResources.recipe_GeneralInformationTab}">		 
        <PropertyGroup groupTitle="${ExtRecipeResources.recipe_GeneralInformationSection}" open="true">		
  			
        <!-- Property: Name. An input box for the name property. -->		
        <PropertyInputText promptText="${ExtRecipeResources.recipeName_DisplayName}" 
2     propertyName="name" required="true"/>
  					
        <PropertyInputText promptText="${ExtRecipeResources.recipeTime_DisplayName}" 
2     propertyName="time"/>
  
        <!-- Property: Difficulty Level. A combo box for the difficulty level property. -->    
        <PropertyCombobox promptText="${ExtRecipeResources.difficultyLevel_DisplayName}" 
2     propertyName="difficulty"/> 
  	            				
        <!-- Property: Short Description. A long input box for the short description property. -->    
        <PropertyInputLongText objectPath="RecipeDescription" promptText="${ExtRecipeResources.recipeShortDescription_DisplayName}"
2      propertyName="sDesc" required="true"/>
  		            
         <!-- Property: Long Description. A rich text editor for the long description property. -->    
         <PropertyInputMultiLineText objectPath="RecipeDescription" promptText="${ExtRecipeResources.recipeLongDescription_DisplayName}" 
2     propertyName="lDesc"/>	
					    
         <ReferenceEditor allowCreate="true" headerText="${ExtRecipeResources.recipe_AssignedCollection}" name="parentCollectionRefEditor" 
          parentObjectTypes="RecipeCollection" promptText="${ExtRecipeResources.recipe_AssignedCollection}" 
          referenceObjectTypes="ChildRecipe" required="true"/>	 		    
       </PropertyGroup>      
     </PropertyTabPane>
			 
     <PropertyTabPane name="recipeMaterial" text="${ExtRecipeResources.ingredientsTab}">
       <PropertyChildListEditor baseDefinition="cmc/recipe/RecipeIngredientsChildListEditor"/>		
     </PropertyTabPane>
			 		
     <PropertyTabPane name="recipeSteps" text="${ExtRecipeResources.instructionTab}">
        <PropertyChildListEditor baseDefinition="cmc/recipe/RecipeStepsChildListEditor"/>
      </PropertyTabPane>
      			 
      <PropertyTabPane name="recipeAssociation" text="${ExtRecipeResources.associationTab}">	     
        <PropertyChildListEditor baseDefinition="cmc/recipe/RecipeAssociationList"/>		 	   		 
      </PropertyTabPane> 	 	 	 
			  
    </PropertyTabs>
            
  </PropertyPane> 
	 
  <ObjectProperties definitionName="cmc/recipe/RecipeProperties" title="${ExtRecipeResources.recipe_PropertiesTitle}">
    <dependency localName="ExtRecipeResources" moduleName="cmc/recipe/ExtRecipeResources"/>

    <!-- This is the set of tabs to display on the Recipe properties notebook -->
    <PropertyPane baseDefinition="cmc/recipe/ManageRecipeInformation"/>
 		
  </ObjectProperties>
</Definitions>

1 ManageRecipeInformation

Extends PropertyPane and is used to hold all the recipe properties in different tab pages, which are implemented by using PropertyTabPane. 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 promptText="${ExtRecipeResources.recipeName_DisplayName}" propertyName="name" required="true"/>

It does not set the objectPath; the value comes from current object, Recipe.