Añadir soporte del Management Center para un widget de Commerce Composer

Actualizar la infraestructura del Management Center para dar soporte a la visualización del widget personalizado en la herramienta Commerce Composer. Al añadir soporte para el widget, los usuarios del Management Center pueden acceder y utilizar el widget personalizado en la herramienta Commerce Composer. Los usuarios podrán especificar propiedades para el widget, asociar contenido al widget y utilizar el widget en diseños de páginas.

Cree la definición de objeto y la definición de vista de propiedades para el widget para añadir soporte para el widget en la infraestructura del Management Center.

Antes de empezar

Registre el widget de Commerce Composer.

Procedimiento

Copie los archivos de código fuente generados para añadir el soporte del Management Center en la estructura de archivos predeterminada de HCL Commerce.
1. Vaya al proyecto donde la Transformación JET ha generado los archivos de código fuente. Copie la siguiente estructura de archivos y los archivos que están dentro de la carpeta de destino:
  - target_folder\LOBTools\WebContent\WEB-INF\src\xml\vendor\pagelayout\widgetDefinitions\UIObjectName\WidgetObjectDefinition.xml
  - target_folder\LOBTools\WebContent\WEB-INF\src\xml\vendor\pagelayout\widgetDefinitions\UIObjectName\WidgetPropertiesView.xml
  - target_folder\LOBTools\WebContent\WEB-INF\src\xml\vendor\pagelayout\widgetDefinitions\WidgetGroupIdentifier\WidgetGroup.xml
  - target_folder\LOBTools\src\com\vendor\commerce\pagelayout\client\lobtools\properties\PageLayoutLOB_en_US.properties
  - target_folder\LOBTools\src\com\vendor\commerce\pagelayout\client\lobtools\properties\PageLayoutLOB.properties
  Donde
  
  vendor
  
  El valor del parámetro vendor dentro del archivo XML de entrada de patrón.
  
  UIObjectName
  
  El valor del parámetro UIObjectName dentro del archivo XML de entrada de patrón.
  
  target_folder
  
  La carpeta o el proyecto especificado como valor para el parámetro targetFolder en el archivo XML de entrada de patrón. Si no ha especificado un valor para el parámetro targetFolder, la target_folder es la carpeta o el proyecto donde se encuentra el archivo XML de entrada de patrón.
  
  WidgetGroupIdentifier
  
  El valor del elemento identifier dentro elemento widgetGroup del archivo XML de entrada de patrón.
2. Fusione los archivos y la estructura de archivos copiada en el estructura de archivos de espacio de trabajo de HCL Commerce Developer. No sobrescriba archivos ni carpetas.
Actualice la definición de objeto para el widget personalizado.
La definición de objeto añade soporte para el objeto de widget personalizado dentro de la infraestructura del Management Center.
1. Ir a fusionado LOBTools\WebContent\config\vendor\pagelayout\widgetDefinitions\UIObjectName directory.
2. Abra el archivo WidgetObjectDefinition.xml generado para editarlo. De forma predeterminada el archivo generado contiene el código siguiente para definir la definición de objeto para el widget.
```
<?xml version="1.0" encoding="UTF-8"?>



<Definitions>
  <WidgetObjectDefinition package="CMC/pagelayout"
1  
  definitionName="cmc/pagelayout/LayoutWidget_UIObjectName" 
2
  parentDefinition="cmc/pagelayout/BasePageLayoutPrimaryObjectDefinition"
  baseDefinition="cmc/pagelayout/BaseLayoutWidget"
3
  objectType="UIObjectName"
  gridPropertiesDefinition="plmWidgetProperties_UIObjectName"
4
    widgetDisplayGroups="Search"
5
  iconPath="/images/pagelayouts/widgetIcons/identifier.png"
6
    <CreateService baseDefinition="plmBaseCreateLayoutWidget" />
    <UpdateService baseDefinition="plmBaseUpdateLayoutWidget" />
    <Xml name="template">
      <sequence>0</sequence>
    </Xml>		
  </WidgetObjectDefinition>
</Definitions>
```
  Donde
  
  UIObjectName
  
  El valor del parámetro UIObjectName dentro del archivo XML de entrada de patrón.
  
  identifier
  
  El valor del parámetro identifier dentro del archivo XML de entrada de patrón.
  - 1 El nombre de la definición para la definición de objeto de widget personalizado. El nombre predeterminado es cmc/pagelayout/LayoutWidget_UIObjectName.
  - 2 Los nombres de las definiciones de objeto base y padre. Los nombres de definición deben incluirse para que el Management Center pueda recuperar la definición de objeto para el widget personalizado. La Transformación JET incluye la definición cmc/pagelayout/BasePageLayoutPrimaryObjectDefinition predeterminada como valor para el campo parentDefinition e incluye el nombre de definición cmc/pagelayout/BaseLayoutWidget como el valor predeterminado para el campo baseDefinition.
  - 3 El nombre y el tipo de objeto de widget de la definición de propiedades para el widget personalizado. De forma predeterminada, el tipo de objeto de widget es el valor que se establece para el parámetro UIObjectName en el archivo XML de entrada de patrón. De forma predeterminada, gridPropertiesDefinition es cmc/pagelayout/LayoutWidget_UIObjectName.
  - 4 El grupo o grupos de visualización de widgets en que se incluye el widget.
  - 5 La vía de acceso de archivo al icono que se va a visualizar para el widget personalizado en la ventana Añadir widgets a ranuras. De forma predeterminada, la Transformación JER define el icono para el widget de modo que sea /images/pagelayouts/widgetIcons/identifier.png. No se crea ningún archivo de imagen real. Debe cambiar el valor para iconPath de modo que apunte a un archivo de imagen real o cambiar el nombre de un archivo de imagen de modo que sea identifier.png.
  - 6 Los servicios de creación y actualización que necesitan los usuarios del Centro de gestión para poder utilizar el widget en la herramienta Commerce Composer.
3. Actualice el archivo de definición de objeto para cambiar cualquiera de los valores generados de forma predeterminada o para definir más propiedades.
  Cuando incluya una nueva propiedad para el widget, deberá colocar el prefijo xWidgetProp_ delante de la propiedad de widget. Por ejemplo, <xWidgetProp_titleText>. Debe incluir este prefijo de modo que se pueda pasar la propiedad utilizando los servicios web userData.
  Por ejemplo, puede actualizar el archivo generado para que incluya el widget en grupos de visualización de widgets adicionales con el código siguiente:
```
widgetDisplayGroups=" "
```
  Donde
  widgetDisplayGroups
  
  Los grupos de visualización se utilizan para organizar widgets en grupos que los usuarios del Management Center pueden utilizar para filtrar la lista de widgets en la ventana Añadir widgets a ranuras. Estos grupos son conjuntos de widgets que están restringidos únicamente a solo las ranuras que incluyan el grupo en el valor para la propiedad de ranura allowedWidgetGroups. De forma predeterminada, están disponibles los siguientes grupos de visualización de widgets:
  
  AnyPage
  
  CategoryPage
  
  CatalogEntryPage
  
  SearchPage
  
  Puede incluir el widget en varios grupos. Para obtener más información sobre grupos de widgets, consulte Grupos de widgets.
  Si incluye el widget dentro de un grupo de visualización que no esté disponible de forma predeterminada, deberá definir la definición de objeto para el nuevo grupo.
4. Establezca los valores predeterminados de las propiedades del widget dentro de la definición de objeto.
  Puede establecer las predeterminadas en el caso de que un usuario de empresa no establezca valores para las propiedades del widget cuando se incluya el widget en un diseño. Para establecer un diseño predeterminado para una propiedad, deberá establecer un valor dentro de la definición de la propiedad. Por ejemplo, el fragmento de código siguiente define valores predeterminados para la orientación del widget, el tamaño de página, y las propiedades de secuencia.
```
<Xml name="template">
<xWidgetProp_widgetOrientation>horizontal</xWidgetProp_widgetOrientation>
<xWidgetProp_pageSize>4</xWidgetProp_pageSize>
<sequence>0</sequence>
</Xml> 
```
5. Guarde el archivo.
  Como ejemplo, el siguiente código es la definición de objeto para el widget de cabecera. Esta definición incluye propiedades para incluir el widget dentro de dos grupos de visualización de widgets y dos grupos de restricción de widgets:
```
<?xml version="1.0" encoding="UTF-8"?>


<Definitions>

	<WidgetObjectDefinition package="CMC/pagelayout"
		definitionName="cmc/pagelayout/LayoutWidget_PageHeadingWidget" 
		baseDefinition="cmc/pagelayout/BaseLayoutWidget"
		parentDefinition="cmc/pagelayout/BasePageLayoutPrimaryObjectDefinition"
		objectType="PageHeadingWidget"
		gridPropertiesDefinition="cmc/pagelayout/{{WidgetProperties_PageHeadingWidget}}}}{{"
		iconPath="/images/pagelayouts/widgetIcons/header.png"
		widgetDisplayGroups="CategoryPage,CatalogEntryPage"
		helpLink="concepts/cpzwidheading.htm">

		<CreateService baseDefinition="cmc/pagelayout/BaseCreateLayoutWidget" />
		<UpdateService baseDefinition="cmc/pagelayout/BaseUpdateLayoutWidget" />	
		
		<Xml name="template">
			<sequence>0</sequence>
			<xWidgetProp_titleText></xWidgetProp_titleText>
		</Xml>		
	</WidgetObjectDefinition>

</Definitions>
```
  Para obtener un ejemplo de una definición de objeto para un widget que da soporte a actividades web, consulte la definición del widget de Recomendación de contenido: LOBTools\WebContent\config\commerce\pagelayout\widgetDefinitions\ContentRecommendationWidget\WidgetObjectDefinition.xml
Para obtener más información sobre los archivos de definición de objeto, consulte Definiciones de objeto.
Actualice la definición de la vista de propiedades para el widget personalizado.
Este archivo de definición especifica cómo representar la vista de propiedades del Management Center para el widget. La vista de propiedades contiene las propiedades configurables que los usuarios de empresa pueden establecer para el widget. Estas propiedades se utilizan para proporcionar la información necesaria para determinar el proveedor de interfaz de usuario del widget y los datos que se utilizan en el widget.
1. Ir a fusionado LOBTools\WebContent\config\vendor\pagelayout\widgetDefinitions\UIObjectName directory.
2. Abra el archivo WidgetPropertiesView.xml generado para editarlo.
  De forma predeterminada, el archivo generado contiene el siguiente código para definir la vista de propiedades para el widget.
```
<?xml version="1.0" encoding="UTF-8"?>

<Definitions>
1
  <GridObjectProperties definitionName="cmc/pagelayout/WidgetProperties_UIObjectName">
    <dependency localName="pageLayoutResources" moduleName="cmc/pagelayout/PageLayoutResources"/>
    <dependency localName="customPageLayoutResources" moduleName="cmc/pagelayout/CustomPageLayoutResources"/>
    <PropertyPane>
2
      <PropertyGroup name="widgetProperties" collapsable="false" 
             groupTitle="${PageLayoutResources.widgetPropertiesPrompt}">
        <PropertyInputText name="${PageLayoutResources.widgetNamePrompt}" propertyName="widgetName"
        promptText="${PageLayoutResources.widgetNamePrompt}" />
        <PropertyInputText propertyName="xWidgetProp_widgetOrientation" 
          promptText="${customPageLayoutResources.widgetOrientationPrompt}" />
        <PropertyInputText propertyName="xWidgetProp_numberOfContentToDisplay" 
          promptText="${customPageLayoutResources.numberOfContentToDisplayPrompt}" />
      </PropertyGroup>
3
      <PropertyGroup name="contentProperties" collapsable="false" 
            groupTitle="${PageLayoutResources.widgetContentPrompt}">
        <PropertyStaticText text="${customPageLayoutResources.UIObjectNameContent}" />
      </PropertyGroup>
    </PropertyPane>
  </GridObjectProperties>
</Definitions>
```
  - 1 El elemento GridObjectProperties define la vista de propiedades para incluir el widget dentro de la tabla Ranuras y widgets de diseño en la pestaña Disposición del diseño dentro del Management Center. Esta vista de propiedades se define de forma que pueda contraerse dentro de la tabla. La vista puede abrirse y cerrarse pulsando el icono de triángulo que hay en cada fila de la tabla.
  - 2 widgetPropeties PropertyGroup define la sección Propiedades del widget dentro de la vista de propiedades definida por el elemento GridObjectProperties. Las propiedades de esta sección se utilizan para determinar cómo se visualiza el widget en la tienda. Los usuarios del centro de gestión utilizan estas propiedades para determinar el proveedor de interfaz de usuario para el widget cuando los usuarios pueden determinar el estilo de representación.
    Para ver ejemplos de propiedades configurables que puede establecer para el widget, revise las propiedades configurables para los widgets que se proporcionan de forma predeterminada con HCL Commerce. Para obtener más información, consulte Propiedades de widget de Commerce Composer.
    Puede definir estas propiedades para que los usuarios puedan verlas en el Management Center de diferentes formas. Por ejemplo, puede utilizar botones de selección, recuadros de selección, recuadros combinados, etc.
  - 3 contentProperties PropertyGroup define la sección Contenido del widget en la vista GridObjectProperties. Los usuarios del Management Center utilizan estas propiedades para determinar el contenido real del widget que se va a visualizar en la página de la tienda.
3. Opcional: Cambie los valores generados predeterminados para las propiedades o incluya más propiedades de definición.
4. Opcional: Incluya código para validar los valores de propiedades del widget que establece un usuario.
5. Guarde el archivo.
  Como ejemplo, el siguiente código es la definición de vista de propiedades para el widget de cabecera:
```
<?xml version="1.0" encoding="UTF-8"?>

<Definitions>

	<GridObjectProperties definitionName="cmc/pagelayout/WidgetProperties_PageHeadingWidget">
             <dependency localName="pageLayoutResources" moduleName="cmc/pagelayout/PageLayoutResources"/>
		<PropertyPane>
			<PropertyGroup name="widgetProperties" collapsable="false" 
                                    groupTitle="${PageLayoutResources.widgetPropertiesPrompt}">
				<PropertyInputText name="${PageLayoutResources.widgetNamePrompt}" propertyName="widgetName"
					extendedHelpText="${PageLayoutResources.extendedHelpText_pageHeadingWidgetWidgetName}" 
					promptText="${PageLayoutResources.widgetNamePrompt}" />
			</PropertyGroup>
			
			<PropertyGroup name="widgetContent" collapsable="false" 
                                    groupTitle="${PageLayoutResources.widgetContentPrompt}">
				<PropertyStaticText text="${PageLayoutResources.pageHeadingWidgetContentHeading_SameName}"/>
			</PropertyGroup>
		</PropertyPane>
	</GridObjectProperties>

</Definitions>
```
  Para obtener un ejemplo de la definición de objeto para un widget que utiliza actividades de marketing, consulte la definición del widget de Recomendación de contenido.
  - LOBTools\WebContent\WEB-INF\src\xml\commerce\pagelayout\widgetDefinitions\ContentRecommendationWidget\WidgetPropertiesDefinition.xml
Opcional: Si incluye el widget dentro de un grupo de visualización que no esté disponible de forma predeterminada, deberá definir la definición de objeto para el nuevo grupo. También deberá actualizar el archivo de propiedades para que incluya el texto del nuevo grupo o grupos de visualización de widgets. Puede actualizar este archivo para que incluya esta información mientras completa el siguiente paso.
1. Vaya al directorio LOBTools\WebContent\config\vendor\pagelayout\widgetDefinitions.
2. Abra el archivo WidgetGroupIdentifierWidgetGroup.xml para editarlo, donde WidgetGroupIdentifier es el valor del elemento identifier dentro del elemento widgetGroup dentro del archivo XML de entrada de patrón.
  Este archivo sólo se genera cuando se incluye el elemento widgetGroup en el archivo XML de entrada de patrón. El archivo generado puede parecerse al siguiente código:
```
<?xml version="1.0" encoding="UTF-8"?>
<Definitions>
  <LayoutWidgetGroup package="CMC/pagelayout"
    definitionName="cmc/pagelayout/WidgetGroupIdentifierWidgetGroup"
    parentDefinition="cmc/pagelayout/NewPageLayoutWidgetDialog"
    identfider="WidgetGroupIdentifier" 
    displayName="${customPageLayoutResources.widgetGroupDisplayName_WidgetGroupIdentifier}">
  <dependency localName="customPageLayoutResources" moduleName="cmc/pagelayout/CustomPageLayoutResources"/>
  </LayoutWidgetGroup>
</Definitions>
```
  Si no ha especificado el elemento widgetGroup dentro del archivo XML de entrada de patrón, deberá crear este archivo.
3. Verifique que los valores adecuados para el nuevo grupo de visualización de widgets se hayan definido correctamente en el archivo WidgetGroupIdentifierWidgetGroup.xml.
4. Si desea incluir el widget en un grupo de visualización nuevo adicional, realice una copia de WidgetGroupIdentifierWidgetGroup.xml dentro del directorio widgetDefinitions. Cambie el nombre de la parte WidgetGroupIdentifier del nombre de archivo para que sea el valor del identifier para el grupo de visualización que está definiendo. Abra el archivo copiado para editarlo. Sustituya los valores que hay dentro del archivo por los valores del nuevo grupo de visualización de widgets adicional. Repita este paso para cada nuevo grupo de visualización de widgets adicional que deba definir.
Actualice el archivo de propiedades de modo que incluya el texto para el widget. Un archivo de propiedades es un paquete de recursos que contiene texto traducible para los objetos que se visualizan en el Management Center.
1. Vaya al directorio LOBTools\Java Resources\src\vendor.commerce.pagelayout.client.lobtools.properties.
2. Abra el archivo PageLayoutLOB.properties generado para editarlo.
  De forma predeterminada, la Transformación JET incluye en el archivo el siguiente texto traducible:
```
# Widget properties view
UIObjectNameContent=description
namePrompt=displayName
widgetGroupDisplayName_WidgetGroupIdentifier=widgetGroupDisplayName
```
  Donde
  
  UIObjectName
  
  El valor del parámetro UIObjectName dentro del archivo XML de entrada de patrón.
  
  description
  
  El valor que se especifica para el parámetro description en el archivo XML de entrada de patrón.
  
  name
  
  El nombre de una propiedad para el widget personalizado. Este nombre coincide con el nombre de la propiedad que se genera en el archivo de definición de vista de propiedades. Por ejemplo, numberOfContentToDisplay.
  
  displayName
  
  El nombre de visualización de una propiedad para el widget personalizado. El nombre de visualización es el nombre de la propiedad que se visualiza en el Management Center. Por ejemplo, Maximum number of content to display.
  
  WidgetGroupIdentifier
  
  El valor del elemento identifier del grupo de visualización de widgets dentro del elemento widgetGroup dentro del archivo XML de entrada de patrón. La propiedad y el valor de widgetGroupDisplayName_WidgetGroupIdentifier solo se genera cuando se incluye el elemento widgetGroup en el archivo XML de entrada de patrón.
  
  widgetGroupDisplayName
  
  El valor del elemento displayName del grupo de visualización de widgets dentro del elemento widgetGroup dentro del archivo XML de entrada de patrón.
  
  Por ejemplo,
```
# Widget properties view
myNewContentRecommendationWidgetObjectContent=This widget displays marketing content, such as ads, on a store page. 
widgetOrientationPrompt=Widget Orientation
numberOfContentToDisplayPrompt=Maximum Number of content to display
widgetGroupDisplayName_MyCompanyWidgets=My company widgets
```
3. Actualice el archivo de modo que incluya todo el texto traducible para el widget que no se haya incluido dentro del archivo generado.
  Asegúrese de incluir texto para toda la propiedad que está definida para el widget. Este texto se visualiza para el widget en el escaparate y en el diálogo Información de widget en la vista previa de la tienda. Para establecer el texto para las propiedades del widget, utilice el formato
```
name=displayName
```
  Donde name coincide con el nombre de propiedad definida dentro del archivo de definición de vista de propiedades. El valor del displayName es el texto que se visualiza en el Management Center del objeto. Por ejemplo,
```
# Widget properties view
UIObjectNameContent=description
widgetOrientationPrompt=Widget Orientation
widgetOrientation_horizontal=Horizontal
widgetOrientation_vertical=Vertical
numberOfContentToDisplayPrompt=Maximum Number of content to display
```
  Un usuario del Management Center puede seleccionar la orientación del widget Horizontal y establecer el Número máximo de contenido a visualizar en 5. En la vista previa de la tienda, si el usuario del Management Center abre la ventana Información de Widget para el widget, la ventana muestra los siguientes valores y nombres de visualización:
```
 Orientación del widget: Horizontal Número máximo de contenidos a visualizar 5 
```
4. Opcional: Actualice el archivo de modo que incluya el texto traducible para cualquier grupo de visualización de widgets nuevo que no se haya incluido dentro del archivo generado.
  Para establecer el texto para las propiedades del grupo de visualización de widgets, utilice el formato
```
widgetGroupDisplayName_identifier=displayName
```
  Donde identifier coincide con el nombre de propiedad definida dentro del archivo de definición de vista de propiedades. El valor del displayName es el texto que se visualiza en el Management Center del objeto.
5. Guarde el archivo.
6. Opcional: Repita los pasos anteriores para editar el archivo PageLayoutLOB_en_US.properties de modo que incluya todo el texto traducible para el idioma inglés de Estados Unidos.
7. Opcional: Cree archivos de propiedades para definir el texto traducible del widget en los otros idiomas a los que debe dar soporte el Management Center. Cree los archivos en el directorio LOBTools\Java Resources\src\com.vendor.commerce.pagelayout.client.lobtools.properties.
Cree una extensión del paquete de recursos y registre los archivos de propiedades dentro del paquete de recursos.
Los paquetes de recursos contienen objetos específicos del entorno nacional. Al utilizar los archivos de paquetes de recursos, el texto se puede traducir fácilmente a diferentes idiomas.

Registre el paquete de recursos de Commerce Composer donde se utilice.

Por ejemplo, añadiendo un dependencia en el archivo de definición de widget:


<dependency localName="customPageLayoutResources" moduleName="cmc/pagelayout/customPageLayoutResources"/>

A continuación, defina un archivo de XML de paquete de recursos y correlacione el archivo de propiedades:


<Definitions>
   <ResourceBundle baseName="com.yourcompany.commerce.pagelayout.client.lobtools.properties.CustomPageLayoutLOB" 
      definitionName="cmc/pagelayout/customPageLayoutResources" singletonDefinition="true"/>
</Definitions>

Pruebe y obtenga una vista previa del widget para asegurarse de que el widget está disponible para utilizarlo en diseños de páginas de la tienda en el Management Center.
1. Cree un diseño que incluye el widget personalizado. El widget personalizado debe estar disponible en la ventana Añadir widgets a ranuras.
  
  Si ha incluido el widget dentro de los grupos de visualización de widgets, asegúrese de que el widget se visualice en la lista de widgets de los grupos de visualización adecuados.
  
  Si ha incluido el widget dentro de los grupos de restricción de widgets, asegúrese de que el widget pueda incluirse en una plantilla de diseño que esté restringida a utilizar widgets sólo dentro de dicho grupo de restricción de widgets. Para obtener más información sobre cómo crear una plantilla de diseño que esté restringida a un grupo de restricción de widgets, consulte Creación de plantillas de diseño de Commerce Composer.
2. Obtenga una vista previa de la página utilizando la vista previa de la tienda. Verifique que el widget se visualiza correctamente.

Qué hacer a continuación

Puesto que todos los widgets y las plantillas de diseño que están disponibles de forma predeterminada en la herramienta Commerce Composer son sensibles, puede actualizar el widget personalizado nuevo para que también sea sensible.

Para desplegar el widget de un entorno de desarrollo a un entorno de producción, debe utilizar la herramienta de compilación y despliegue de HCL Commerce. Para obtener más información, consulte Desarrollar elementos de Commerce Composer.