Présentation de l’implémentation

Pour créer un habillage, procédez comme suit :

  1. Accédez au projet de gestion des actifs et naviguez jusqu’au package com.adobe.solutions.cmg.manage.skins (CorrespondenceManagementSolutionTemplate\ManageAssets\src\com\adobe\solutions\cmg\manage\skins).

  2. Créez un fichier d’habillage MXML (comme CustomTextEditorSkin.mxml, par exemple) pour le composant hôte com.adobe.solutions.acm.authoring.presentation.TextEditor en copiant l’habillage existant, par exemple, com.adobe.solutions.acm.authoring.skins.TextEditorSkin.

  3. Effectuez les modifications souhaitées dans le fichier d’habillage MXML. Vous pouvez par exemple augmenter la hauteur de l’entrée de description pour qu’elle soit sur plusieurs lignes. Définissez descriptionDisplay sur TextArea et remplacez la taille suivante :
    <s:TextInput id="descriptionDisplay"  enabled="true" enabled.View="false" width="205" height="24" />
    Par :
    <s:TextArea id="descriptionDisplay"  enabled="true" enabled.View="false" width="205" height="54" />
    De même, pour modifier la couleur du pied de page de dialogue, remplacez le code suivant :
    <!-- footer background --> 
    <s:Rect bottom="1" left="1" right="1" height="{footerBar.height}" > 
         <s:fill > 
             <s:LinearGradient rotation="90" > 
                 <s:GradientEntry color="0xe6e6e6"  /> 
                 <s:GradientEntry color="0xe0e0e0"  /> 
             </s:LinearGradient> 
         </s:fill> 
    </s:Rect> 
    <s:Rect bottom="{footerBar.height-1}" left="1" right="1" height="1" > 
         <s:fill> 
             <s:SolidColor color="0xd1d1d1"  /> 
         </s:fill> 
</s:Rect>
    Par :
    <!-- footer background --> 
    <s:Rect bottom="1" left="1" right="1" height="{footerBar.height}" > 
        <s:fill > 
            <s:LinearGradient rotation="90" > 
                <s:GradientEntry color="0x3BB9FF"  /> 
                <s:GradientEntry color="0xe0e0e0"  /> 
            </s:LinearGradient> 
        </s:fill> 
    </s:Rect> 
    <s:Rect bottom="{footerBar.height-1}" left="1" right="1" height="1" > 
        <s:fill> 
            <s:SolidColor color="0x3BB9FF"  /> 
        </s:fill> 
</s:Rect>

  4. Créez un fichier CSS pour utiliser la classe d’habillage ci-dessus et ajoutez-le au fichier de projet principal index.mxml. Par exemple :

    /* CSS file */ 
@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx"; 
@namespace presentation "com.adobe.solutions.acm.authoring.presentation.*"; 
@namespace custom "com.adobe.customizations"; 
@namespace customizations "com.adobe.customizations.*"; 
@namespace presentation1 "com.adobe.solutions.cmg.manage.presentation.*"; 
 
presentation1|AssetEditorsStack 
{ 
    backgroundGradientStartColor: #FFFFFF; 
    backgroundGradientEndColor: #FFFFFF; 
    outerBorderColor: #000000; 
    outerBorderAlpha: .33; 
    skinClass: ClassReference("com.adobe.solutions.cmg.manage.skins.CustomTextEditorSkin"); 
    cornerRadius: 2; 
}
  5. Mettez à jour le fichier index.mxml pour qu’il inclue ce fichier CSS personnalisé après y avoir déjà inclus tous les autres fichiers CSS :
    <fx:Style source="/CSS/custom_styles.css"/>

  6. Procédez ensuite à la régénération et au redéploiement. Pour plus d’informations sur la régénération et le redéploiement, voir Génération et déploiement du modèle de solution.