Modification de la présentation de la bannière du Centre de gestion

La bannière du Centre de gestion affiche le menu Management CenterOutils du , le texte de bienvenue, le lien de déconnexion et le logo de la marque. Vous pouvez personnaliser la zone de bannière pour modifier la séquence d'affichage de ces composants.

Procédure

  1. Ouvrez HCL Commerce Developer et basculez vers la vue Explorateur d'entreprise.
  2. Développez LOBTools > WebContent > WEB-INF > src > xml > commerce > shell.
  3. Ouvrez le fichier ToolBannerArea.xml pour l'éditer. Ce fichier définit la zone de bannière dans Management Center. La séquence des éléments dans ce fichier détermine l'emplacement où chaque composant bannière doit s'afficher.
  4. Réorganisez les éléments dans ce fichier en fonction de votre préférence de présentation pour la bannière.
    Par exemple, le logo de la marque est placé par défaut à droite du lien de déconnexion du Management Center. Si vous préférez afficher le logo dans un autre emplacement, déplacez-le en modifiant le positionnement de la ligne de code suivante.
    <Component imageSet="/images/commerce/shell/resources/ibm-logo.png" name="headerLogo" y="12.5"/>
    Le positionnement de ce code dans le fragment de code suivant modifie la présentation de la bannière pour afficher le logo de la marque à gauche du menu Management CenterOutils du . Le composant "blank4" est également déplacé pour ajouter un espace entre le logo transféré et le menu Management CenterOutils du .
    	
<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>
    Le positionnement de la ligne de code du logo dans le fragment de code suivant modifie la présentation de la bannière pour afficher le logo à gauche du texte de bienvenue.
    	
<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. Sauvegardez et publiez vos modifications.