Creación de una pestaña de la vista de propiedades para obtener información personalizada

En esta lección, personalizará la vista de propiedades de productos, para añadir una pestaña en la que visualizar información de garantía.

Por qué y cuándo se efectúa esta tarea

Una vez finalizada la lección, se añadirá una nueva pestaña para la información de garantía en la que visualizar información de garantía detallada, tal como se muestra en la imagen siguiente.
Pestaña de garantía de la vista Propiedades del producto, en la que aparece información del plazo y el tipo de garantía.

Procedimiento

  1. En la vista Enterprise Explorer, expanda LOBTools > WebContent > WEB-INF > src > xml > commerce > catalog > propertiesViews.
  2. Abra el archivo ProductPropertiesView.xml para editarlo.
  3. Determine la ubicación donde desee colocar la nueva pestaña, en relación con las demás pestañas.
    Por ejemplo, si desea definir la pestaña para que se aparezca después de la pestaña Gestionar producto, localice el fragmento de código siguiente en el archivo. 
    
<!-- Tab: Manage Product. This tab contains general information about the selected product such as name and description. -->
<PropertyTabPane name="manageProductTab" text="${catalogResources.manageProductTab}">  
  <!-- Property Pane: Manage Product. This is an instantiation of the property pane which contains general product details. -->
  <PropertyPane baseDefinition="cmc/catalog/ManageProduct"/>
</PropertyTabPane>
  4. Añada la definición de pestaña, relativa la pestaña personalizada, después de la definición <PropertyTabPane> de la pestaña Gestionar producto.
    Por ejemplo, el fragmento de código siguiente define una nueva pestaña para la información de garantía.
    
<Definitions>
  <ObjectProperties definitionName="cmc/catalog/ProductProperties">
    ...
    <!-- This is the set of tabs to display on the Product properties view -->
    <PropertyTabs name="tabs">
      <!-- Tab: Manage Product. This tab contains general information about the selected product such as name and description. -->
      <PropertyTabPane name="manageProductTab" text="${catalogResources.manageProductTab}">
        <!-- Property Pane: Manage Product. This is an instantiation of the property pane which contains general product details. -->
        <PropertyPane baseDefinition="cmc/catalog/ManageProduct"/>
      </PropertyTabPane>
      <!-- Tab: Warranty. This tab contains warranty information for a product. -->
      <PropertyTabPane name="productwarrantyTab" text="${ExtCatalogResources.productWarranty_TabHeader}">
        <!-- Property Pane: warranty. This is an instantiation of the property pane class which contains product warranty details. -->
        <PropertyPane baseDefinition="cmc/catalog/WarrantyPane"/>
      </PropertyTabPane>
      ...
    </PropertyTabs>
  </ObjectProperties>
</Definitions>
  5. Añada la dependencia del paquete de recursos ExtCatalogResources personalizado. Al añadir esta dependencia, la vista de propiedades del producto puede recuperar y visualizar el texto que se haya definido en los archivos de propiedades personalizados.
    Defina la dependencia con el formato <dependency localName="" moduleName=""/>
    Por ejemplo, el fragmento de código siguiente muestra la adición de una dependencia para el paquete de recursos ExtCatalogResources.
    
<Definitions>
  <ObjectProperties definitionName="cmc/catalog/ProductProperties">
    <dependency localName="foundationResources" moduleName="cmc/foundation/FoundationResources"/>
    <dependency localName="catalogResources" moduleName="cmc/catalog/CatalogResources"/>
    <dependency localName="ExtCatalogResources" moduleName="cmc/catalog/ExtCatalogResources"/>
    <!-- This is the set of tabs to display on the Product properties view -->
    <PropertyTabs name="tabs">
    ...
    </PropertyTabs>
  </ObjectProperties>
</Definitions>
  6. Guarde y cierre el archivo.
Defina el contenido del panel de propiedades que vaya a visualizarse en la pestaña de garantía, añadiendo la información de garantía detallada. Cuando defina la vista de panel de propiedades para la información de garantía, definirá los campos de garantía como UserData, añadiendo un prefijo a los campos. En esta guía de aprendizaje, se utiliza el prefijo "x_". Este prefijo es el prefijo definido para UserData del catálogo general, en el archivo de configuración de componente de catálogo, wc-catalog-clientobjects.xml. En esta configuración se define cómo un elemento UserData se correlaciona con el nombre de objeto.
Por ejemplo, en la siguiente configuración del nombre de entrada de catálogo se define que los elementos que tienen el prefijo "x_" como, por ejemplo, x_warterm, son UserData, y correlacionan el nombre de entrada de catálogo con el /UserData/UserDataField de XPath. 
<_config:URLParameter name="x_" nounElement="/UserData/UserDataField" type="UserData"/>
Cualquier prefijo que se utilice para identificar un campo como UserData, deberá coincidir con el prefijo de UserData que se haya definido en el archivo de configuración de un objeto.
  1. Expanda LOBTools > WebContent > WEB-INF > src > xml > commerce > catalog > propertiesViews.
  2. Abra el archivo CatalogPropertyPane.xml para editarlo.
    Este archivo define los paneles de propiedades que se utilizan en la Catalogs tool.
  3. Añada el código siguiente al final del archivo como un elemento hijo dentro del elemento <Definitions>. 
    
<PropertyPane definitionName="cmc/catalog/WarrantyPane">
  <dependency localName="ExtCatalogResources" moduleName="cmc/catalog/ExtCatalogResources"/>
  <PropertyGroup groupTitle="${ExtCatalogResources.productWarranty_GroupTitleForWarranty}" open="true">
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTermPrompt}" propertyName="x_warterm" width="200"/>
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTypePrompt}" propertyName="x_wartype" width="200"/>
  </PropertyGroup>
</PropertyPane>
    Por ejemplo, el fragmento de código siguiente muestra la colocación del código para definir el contenido del panel de la pestaña de garantía.
    
<Definitions>
<PropertyGroup definitionName="cmc/catalog/ManageGeneralProductInformation" 
 groupTitle="${catalogResources.generalProductInformationSection}" open="true">
...
</PropertyGroup>	
...

<PropertyPane definitionName="cmc/catalog/WarrantyPane">
  <dependency localName="ExtCatalogResources" moduleName="cmc/catalog/ExtCatalogResources"/>
  <PropertyGroup groupTitle="${ExtCatalogResources.productWarranty_GroupTitleForWarranty}" open="true">
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTermPrompt}" propertyName="x_warterm" width="200"/>
    <PropertyCombobox promptText="${ExtCatalogResources.productWarranty_WarrantyTypePrompt}" propertyName="x_wartype" width="200"/>
  </PropertyGroup>
</PropertyPane>
</Definitions>
  4. Guarde y cierre el archivo.