Reordenar el diseño del banner del Centro de gestión

El banner del Centro de gestión muestra el menú del Management Center Herramientas, el texto de bienvenida, el enlace de conexión y el logotipo de la marca. Puede personalizar esta área de banner para cambiar la secuencia de visualización de estos componentes.

Procedimiento

  1. Abra HCL Commerce Developer y cambie a la vista Explorador de empresa.
  2. Expanda LOBTools > WebContent > WEB-INF > src > xml > commerce > shell.
  3. Abra el archivo ToolBannerArea.xml para editarlo. Este archivo define el área de banner en el Management Center. La secuencia de elementos en este archivo determina dónde se muestra cada componente de cabecera.
  4. Reorganice los elementos dentro de este archivo para que coincidan con su diseño de banner preferido.
    Por ejemplo, el logotipo de la marca está a la derecha del enlace para finalizar la sesión del Management Center de forma predeterminada. Si prefiere visualizar el logotipo en una ubicación diferente, mueva el logotipo cambiando la ubicación de la siguiente línea de código.
    <Component imageSet="/images/commerce/shell/resources/ibm-logo.png" name="headerLogo" y="12.5"/>
    La colocación de este código en el siguiente fragmento de código cambia el diseño del banner para mostrar el logotipo de la marca a la izquierda del menú de Management CenterHerramientas. El componente "blank4" también se mueve para añadir espacio entre el logotipo reubicado y el menú de Management Center Herramientas.
    	
<FocusableComponent classDefinition="true" definitionName="cmc/shell/BannerArea" focusable="false" width="${this.immediateParent.width}">
  <dependency localName="SingletonRegistry" moduleName="cmc/foundation/SingletonRegistry"/>
  <Component imageSet="/images/commerce/shell/resources/ibm_logo.png" name="headerLogo" y="12.5"/>
   <Component name="blank4" width="20"/>
  <Component height="${this.parent.height}" name="applicationSelectionView" width="${SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="backgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <ApplicationMenu id="applicationMenu" package="cmc/shell" valign="top" x="17"/>
  </Component>
  <Component height="${this.parent.height}" name="bannerHeaderView" width="${this.parent.width - SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="headerBackgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <Component align="right" height="${this.parent.height}" name="bannerRightView">
      <WorkspaceIndicator id="workspaceIndicator" package="cmc/shell" y="10"/>
      <Component width="5"/>
      <WelcomeText fgcolor="${this.classroot.style.titletextcolor}" fontsize="13" name="welcomeText" package="cmc/shell" y="10"/>
      <Component name="blank1" width="10"/>
      <Component imageSet="/images/commerce/shell/restricted/resources/header_divider.png" name="headerDivider"/>
      <Component name="blank2" width="10"/>
      <LogoutLink name="logoutLink" package="cmc/shell" y="10"/>
      <Component name="blank3" width="50"/>
      <AxisLayout axis="x"/>
    </Component>
  </Component>  
  <AxisLayout axis="x" spacing="0"/>
</FocusableComponent>
    La ubicación de la línea de código para el logotipo en el fragmento de código siguiente cambia el diseño de banner para mostrar el logotipo a la izquierda del texto de bienvenida.
    	
<FocusableComponent classDefinition="true" definitionName="cmc/shell/BannerArea" focusable="false" width="${this.immediateParent.width}">
  <dependency localName="SingletonRegistry" moduleName="cmc/foundation/SingletonRegistry"/>
  <Component height="${this.parent.height}" name="applicationSelectionView" width="${SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="backgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <ApplicationMenu id="applicationMenu" package="cmc/shell" valign="top" x="17"/>
  </Component>
  <Component height="${this.parent.height}" name="bannerHeaderView" width="${this.parent.width - SingletonRegistry.applicationMenu.width}">
    <Component ignoreLayout="true" bgcolor="#323232" name="headerBackgroundView" width="${this.parent.width}" height="${this.parent.height}"/>
    <Component align="right" height="${this.parent.height}" name="bannerRightView">
      <WorkspaceIndicator id="workspaceIndicator" package="cmc/shell" y="10"/>
      <Component width="5"/>
      <Component imageSet="/images/commerce/shell/resources/ibm_logo.png" name="headerLogo" y="12.5"/>
      <WelcomeText fgcolor="${this.classroot.style.titletextcolor}" fontsize="13" name="welcomeText" package="cmc/shell" y="10"/>
      <Component name="blank1" width="10"/>
      <Component imageSet="/images/commerce/shell/restricted/resources/header_divider.png" name="headerDivider"/>
      <Component name="blank2" width="10"/>
      <LogoutLink name="logoutLink" package="cmc/shell" y="10"/>
      <Component name="blank3" width="50"/>    
      <Component name="blank4" width="20"/>   
      <AxisLayout axis="x"/>
    </Component>
  </Component>  
  <AxisLayout axis="x" spacing="0"/>
</FocusableComponent>
  5. Guarde y publique los cambios.