Tutorials > Management Center > Add a Recipes tool to the Management Center
Define views for a Management Center object
As part of creating a custom tool for the Management Center, define an OpenLaszlo library class or create a definition for each object's properties view and list view.
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, partnumber, 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
- Complete one of the following steps:
In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > mycompany > recipe.
In the Enterprise Explorer view, expand LOBTools > WebContent > config > mycompany > recipe.
- Create a new directory named listViewDefinitions, if it does not exist.
- Right-click the listViewDefinitions folder and select Import. Expand General and select File system.
- Click Next, then click Browse and navigate to:
Option Description TutorialSource\LOBTools\WebContent\WEB-INF\src\lzx\mycompany\recipe\listViewDefinition, where TutorialSource is the location where you
unzipped the Tutorial sample source code
- Select all files.
- Click Finish to import all of the files.
TutorialSource\LOBTools\WebContent\config\mycompany\recipe\listViewDefinition, where TutorialSource is the location where you
unzipped the Tutorial sample source code
- Select all files.
- Click Finish to import all of the files.
- Select all files.
- Open one of the following files and examine the contents:
- RecipeGrid.lzx
- RecipeGrid.def
Option Description RecipeGrid.lzx
The following code sample shows the list view 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 Define 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.
RecipeGrid.def
The following code sample shows the list view 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 Define 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.
- Complete one of the following steps:
- In the Enterprise Explorer view, expand LOBTools > WebContent > WEB-INF > src > lzx > mycompany > recipe.
- In the Enterprise Explorer view, expand LOBTools > WebContent > config > mycompany > recipe.
- Create a new directory named propertiesViews, if it does not exist.
- Right-click the propertiesViews folder
and select Import. Expand General and select File system.
- Click Next, then click Browse and navigate to:
Option Description TutorialSource\LOBTools\WebContent\WEB-INF\src\lzx\mycompany\recipe\propertiesViews, where TutorialSource is the location where you
unzipped the Tutorial sample source code
- Select all files.
- Click Finish to import all of files.
TutorialSource\LOBTools\WebContent\config\mycompany\recipe\propertiesViews, where TutorialSource is the location where you
unzipped the Tutorial sample source code
- Select all files.
- Click Finish to import all of the files.
- Select all files.
- Open one of the following files and examine the contents:
- RecipePropertiesView.lzx
- RecipePropertiesView.def
Option Description RecipePropertiesView.lzx
The following code sample shows the properties view 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 is 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.
- The first holds main information for recipes, such as recipe name, recipe difficulty, recipe time
- 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.
RecipePropertiesView.def
The following code sample shows the properties view 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 is 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.
- The first holds main information for recipes, such as recipe name, recipe difficulty, recipe time
- 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.
- Right-click the LOBTools project and select Build OpenLaszlo Project.