Scénario : Personnalisation de l’interface utilisateur de création de correspondance

Mettez à jour la valeur de la variable CM_APPLICATION_CONTEXT dans les fichiers suivants :

• CorrespondenceManagementSolutionTemplate/CreateCorrespondence/src/com/adobe/solutions/cmg/ccr/presentation/CCRApplication.as

• CorrespondenceManagementSolutionTemplate/ManageAssets/src/com/adobe/solutions/cmg/manage\presentation/AMApplication.as

Modifiez le nouveau fichier toolbarSkin.mxml et définissez les propriétés includeInLayout et visible des boutons de retrait sur false pour que ceux-ci ne soient plus affichés.

<s:HGroup gap="-1" > 
    <s:Button  id="rightIndentBtn" styleName="increaseIndentButton" toolTip="{resourceManager.getString('Iccuser interfaceStrings','increaseIndentBtnToolTip')}" height="23" width="29" visible="false" includeInLayout="false"/> 
    <s:Button  id="leftIndentBtn" styleName="decreaseIndentButton" toolTip="{resourceManager.getString('Iccuser interfaceStrings','decreaseIndentBtnToolTip')}"  height="23" width="29" visible="false" includeInLayout="false"/> 
</s:HGroup>

Pour utiliser le fichier d’habillage personnalisé, créez une feuille de style du modèle de solution (custom_styles.css par exemple) dans CreateCorrespondence > src > CSS. Pour que la classe de barre d’outils utilise l’habillage personnalisé, ajoutez l’entrée suivante dans CreateCorrespondence > src > CSS > custom_styles.css :

@namespace ccrpresentation "com.adobe.solutions.acm.ccr.presentation.*"; 
 
ccrpresentation|toolbar 
{ 
    backgroundGradientStartColor : #656565; 
    backgroundGradientEndColor    : #353535;     
    borderContainerBgColor : #525252; 
    borderColor : #222222; 
    skinClass: ClassReference("com.adobe.solutions.cmg.ccr.skins.toolbarSkin"); 
}

Ajoutez le nouveau fichier CSS dans CreateCorrespondence > src > (package par défaut) > index.mxml :

<fx:Style source="/css/custom_styles.css"/>

Créez une classe ActionScript nommée CustomModuleItemRenderer.as permettant d’étendre la classe com.adobe.solutions.acm.ccr.presentation.contentcapture.ModuleItemRenderer. Remplacez la fonction commitProperties de ce fichier afin de désactiver le bouton de modification du groupe d’utilisateurs. Le code source ci-dessous suppose qu’un groupe d’utilisateurs est défini, tel que EditText. Le bouton de modification est activé uniquement pour les utilisateurs faisant partie de ce groupe.

package com.adobe.solutions.cmg.ccr.presentation 
{ 
    import com.adobe.icc.services.ServiceProvider; 
    import com.adobe.icc.services.user.ISSOManager; 
    import com.adobe.solutions.acm.ccr.presentation.contentcapture.ModuleItemRenderer; 
     
    import mx.collections.IList; 
     
    import spark.components.Button; 
     
    public class CustomModuleItemRenderer extends ModuleItemRenderer 
    { 
        public var userManager:ISSOManager = ServiceProvider.getUserService(); 
        public function enableTextEditBtnBasedOnUserGroup():void 
        { 
            if(userManager && userManager.currentUser) 
            {     
                var listGroups:IList = userManager.currentUser.groups; 
                //If the EditText group is not assigned to the user disable the Edit button. 
                if(listGroups.getItemIndex("EditText") == -1) 
                    textEditBtn.enabled = false;     
            }     
        } 
         
        override protected function commitProperties():void 
        { 
            super.commitProperties() 
            if(textEditBtn && textEditBtn.visible) 
            { 
                enableTextEditBtnBasedOnUserGroup(); 
            } 
            invalidateDisplayList(); 
        } 
    } 
}

Accédez au fichier d’habillage TargetAreaRendererSkin.mxml, sous CreateCorrespondence > src > com.adobe.solutions.cmg.ccr > skins, qui est une copie du fichier com.adobe.solutions.acm.ccr.skins.contentcapture.TargetAreaRendererSkin.mxml. Modifiez moduleViewList dans le nouveau fichier TargetAreaRendererSkin.mxml afin d’utiliser CustomModuleItemRenderer, comme suit :

<s:List id="moduleViewList" contentBackgroundAlpha="1.0" 
    alternatingItemColors="[0xffffff, 0xf8f8f8]" contentBackgroundColor="0xf8f8f8" 
    itemRenderer="com.adobe.solutions.cmg.ccr.presentation.CustomModuleItemRenderer" 
    width="100%" minHeight="0" > 
    <s:layout > 
         <s:VerticalLayout horizontalAlign="contentJustify" variableRowHeight="true" gap="0" paddingTop="0" paddingBottom="0"/> 
    </s:layout> 
</s:List>

Créez une feuille de style (telle que custom_styles.css) afin d’utiliser les fichiers personnalisés. Ajoutez les entrées suivantes dans le fichier CreateCorrespondence > src > CSS > custom_styles.css :

/* CSS file */ 
@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx"; 
@namespace contentcapture "com.adobe.solutions.acm.ccr.presentation.contentcapture.*"; 
@namespace presentation "com.adobe.solutions.cmg.ccr.presentation.*"; 
 
contentcapture|TargetAreaRenderer 
{ 
    backgroundGradientStartColor : #656565; 
    backgroundGradientEndColor    : #353535;     
    borderContainerBgColor : #454545; 
    borderColor : #222222; 
    skinClass: ClassReference("com.adobe.solutions.cmg.ccr.skins.TargetAreaRendererSkin"); 
} 
 
presentation|CustomModuleItemRenderer 
{ 
    backgroundGradientStartColor : #656565; 
    backgroundGradientEndColor    : #353535;     
    borderContainerBgColor : #454545; 
    borderColor : #222222; 
    skinClass: ClassReference("com.adobe.solutions.acm.ccr.skins.contentcapture.ModuleItemRendererSkin"); 
}

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"/>

Accédez à CreateCorrespondence > src > com.adobe.solutions.cmg.ccr > presentation et ajoutez une fonction de filtrage de zones ciblées personnalisé dans le fichier CCRApplication.as :

import com.adobe.icc.dc.domain.IModuleInstance; 
            import com.adobe.icc.dc.domain.TargetInstance; 
            import com.adobe.icc.dc.domain.VariableInstance; 
                import com.adobe.icc.dc.domain.TextModuleInstance; 
 
        /** 
         * Returns true if the target area needs to displayed, 
         * false if it is not to be displayed 
         */ 
        private function customTargetInstanceFilterFunction(item:Object):Boolean 
        { 
            if(! (item is TargetInstance)) 
                return false; 
            var targetInstance:TargetInstance = item as TargetInstance; 
            //Show the target area if it allows free text 
            if(targetInstance.allowFreeText) 
                return true; 
            if(!targetInstance.contents || targetInstance.contents.length < 1) 
                return false; 
            //If the order is not fixed show the target area 
            if(!targetInstance.ordered) 
                return true; 
            //Check if there is any optional content in the target area 
            for(var i:int=0; i<targetInstance.contents.length; i++) 
            { 
                var moduleInst:IModuleInstance = targetInstance.contents[i] as IModuleInstance; 
                if(moduleInst.optional) 
                    return true; 
                //If there is a TextModule which is editable show the target area 
                if(moduleInst is TextModuleInstance && moduleInst.editable) 
                    return true; 
            } 
             
            //Check if there are any editable content variables in the target area 
            if(targetInstance.contentVariables && targetInstance.contentVariables.length > 0) 
            {     
                for(var i:int=0; i<targetInstance.contentVariables.length; i++) 
                { 
                    var varInst:VariableInstance = targetInstance.contentVariables[i] as VariableInstance; 
                    if(varInst.editable) 
                        return true; 
                } 
            }     
            return false; 
        };

Modifiez la fonction partAdded dans le fichier CCRApplication.as, puis configurez la fonction de filtrage de zones ciblées personnalisé pour contentCapturePod.

else if(instance == contentCapturePod) 
{ 
    //Set the custom filter function here 
    contentCapturePod.targetInstanceFilterFunction = customTargetInstanceFilterFunction; 
 
    BindingUtils.bindSetter(updateContentCaptureProvider, this, ["letterInstance", "targetInstances"]); 
    BindingUtils.bindSetter(updateContentCaptureVariableList, this, ["letterInstance", "variableInstances"]); 
    contentCapturePod.addEventListener("libraryInsertEvent", handleLibraryInsertEvent); 
    contentCapturePod.addEventListener("textEditEvent", handleTextEditEvent); 
    contentCapturePod.addEventListener("activeContentChange", contentCapturePod.handleActiveContentEvent); 
    addEventListener("ItemMoveUpClickEvent", handleItemMoveUpClick); 
    addEventListener("ItemMoveDownClickEvent", handleItemMoveDownClick); 
    addEventListener("ItemDeleteClickEvent", handleItemDeleteClick); 
    addEventListener("LeftIndentClickEvent", handleLeftIndentClick); 
    addEventListener("RightIndentClickEvent", handleRightIndentClick); 
}

Ouvrez le fichier CCRApplication.as et ajoutez le code source ci-dessous.

import com.adobe.dct.event.DCTServiceEvent; 
import com.adobe.dct.model.DataDictionaryInstanceModel; 
import com.adobe.dct.service.DataDictionaryUtilService; 
import com.adobe.dct.transfer.DataDictionaryElement; 
import com.adobe.icc.services.render.ILetterRenderService; 
import com.adobe.icc.util.Map; 
import com.adobe.icc.vo.Field; 
import com.adobe.icc.vo.Variable; 
import flash.events.MouseEvent; 
import mx.collections.ArrayCollection;     
import mx.rpc.remoting.RemoteObject; 
import mx.rpc.IResponder; 
import spark.components.FormItem; 
import spark.components.TextInput; 
 
        [SkinPart(required="false")] 
        /** 
         * The data capture form. 
         */ 
        public var dataCaptureForm:spark.components.Form; 
         
        [SkinPart(required="false")] 
        /** 
         * Submit button which the agent will press to submit the form. 
         */ 
        public var submitBtn:Button; 
         
        private var _dataDictionaryInstance:DataDictionaryInstanceModel = null; 
        private var fieldList:IList = null; 
        private var phList:IList = null; 
        private var ddeList:IList = null; 
         
        private var textInputFieldList:ArrayCollection = new ArrayCollection(); 
        private var textInputDDEList:ArrayCollection = new ArrayCollection(); 
        private var textInputVariableList:ArrayCollection = new ArrayCollection(); 
         
        /** 
         * Wrapper function which invokes the getLetterDataElements of the LetterService 
         * running on the server 
         */ 
        public function letterServiceGetLetterDataElements(letterId:String):AsyncToken 
        { 
            var _service:RemoteObject; 
            _service = com.adobe.icc.services.ServiceLocator.getInstance().getRemoteObject("lc.icc.dbservices.letterService"); 
            var operationToken:AsyncToken = _service.getLetterDataElements(letterId); 
            return operationToken;     
        } 
         
        protected function getLetterDataElements(invokeParams:InvokeParams):void 
        { 
            var operationToken:AsyncToken = letterServiceGetLetterDataElements(invokeParams.letterId); 
            var responder:IResponder = new Responder( 
                function(event:ResultEvent):void 
                { 
                    Debug.info("getLetterDataElements success"); 
                    var dataElem:Map = Map.fromObject(event.result as Object); 
                     
                    if(dataElem.hasKey("Field")) 
                    { 
                        fieldList = dataElem.value("Field"); 
                        if(fieldList != null && fieldList.length > 0) 
                        { 
                            for(var i:int = 0; i<fieldList.length; i++) 
                            { 
                                var fd:Field = fieldList[i]; 
                                var dataCaptureFormItem:FormItem = new FormItem(); 
                                dataCaptureFormItem.label = fd.displayName + " Field " + fd.type; 
                                var ti:TextInput = new TextInput(); 
                                textInputFieldList.addItemAt(ti, i); 
                                dataCaptureFormItem.addElement(ti); 
                                dataCaptureForm.addElementAt(dataCaptureFormItem, i); 
                            }     
                        }     
                    } 
                    if(dataElem.hasKey("DDE")) 
                    { 
                        ddeList = dataElem.value("DDE"); 
                        if(ddeList != null && ddeList.length > 0) 
                        { 
                            for(var j:int = 0; j<ddeList.length; j++) 
                            { 
                                var dde:DataDictionaryElement = ddeList[j]; 
                                var dataCaptureFormItem:FormItem = new FormItem(); 
                                dataCaptureFormItem.label = dde.displayName + " DDE " + dde.elementType; 
                                var ti:TextInput = new TextInput(); 
                                 
                                textInputDDEList.addItemAt(ti, j); 
                                dataCaptureFormItem.addElement(ti); 
                                dataCaptureForm.addElementAt(dataCaptureFormItem, i+j); 
                            }     
                        }     
                    } 
                    if(dataElem.hasKey("PH")) 
                    { 
                        phList = dataElem.value("PH"); 
                        if(phList != null && phList.length > 0) 
                        { 
                            for(var k:int = 0; j<phList.length; k++) 
                            { 
                                var ph:Variable = phList[k]; 
                                var dataCaptureFormItem:FormItem = new FormItem(); 
                                dataCaptureFormItem.label = ph.name + " PH " + ph.dataType; 
                                var ti:TextInput = new TextInput(); 
                                textInputVariableList.addItemAt(ti, k); 
                                dataCaptureFormItem.addElement(ti); 
                                dataCaptureForm.addElementAt(dataCaptureFormItem, i+j+k); 
                            }     
                        }     
                    } 
                }, 
                function(faultEvent:FaultEvent):void 
                { 
                    Debug.error("Error in getLetterDataElements", faultEvent); 
                } 
            ); 
            operationToken.addResponder(responder);     
        } 
         
        /** 
         * Wrapper function which invokes the serializeDataElementsToXML of the LetterRenderService 
         * running on the server 
         */ 
        public function letterRenderServiceSerializeDataElementsToXML(ddiDataAsXml:String, phValues:Object,fieldValues:Object):AsyncToken 
        { 
            var _service:RemoteObject; 
            _service = com.adobe.icc.services.ServiceLocator.getInstance().getRemoteObject("lc.icc.renderlib.letterRenderService"); 
            var operationToken:AsyncToken = _service.serializeDataElementsToXML(ddiDataAsXml, phValues, fieldValues); 
            return operationToken;     
        } 
         
        private function serializeDataElementsToXML(ddi:String, mapVar:Map, mapField:Map) 
        { 
            var operationToken:AsyncToken = letterRenderServiceSerializeDataElementsToXML(ddi, mapVar.toObject(), mapField.toObject()); 
            var responder:IResponder = new Responder( 
                function(event:ResultEvent):void 
                { 
                    Debug.info("serializeDataElementsToXML success"); 
                    var serializedXML:String = event.result as String; 
                    trace(serializedXML); 
                    var letterRenderService:ILetterRenderService = ServiceProvider.getLetterRenderService(); 
                    letterRenderService.renderLetterToFile(invocationParams.letterId, true, serializedXML, false, false).addHandlers( 
                        function(event:ResultEvent):void 
                        { 
                            Debug.info("renderLetter success"); 
                        }, 
                        function(faultEvent:FaultEvent):void 
                        { 
                            Debug.error("Error in renderLetter", faultEvent); 
                        } 
                    )     
                }, 
                function(faultEvent:FaultEvent):void 
                { 
                    Debug.error("Error in serializeDataElementsToXML", faultEvent); 
                } 
            ); 
            operationToken.addResponder(responder); 
        }         
         
        private function onSubmitBtnClick(e:Event) 
        { 
            var mapField:Map = new Map(); 
            var mapVar:Map = new Map(); 
            for(var i:int=0;i<textInputFieldList.length; i++) 
            { 
                var textInput:TextInput = textInputFieldList.getItemAt(i) as TextInput; 
                if(textInput) 
                    trace(textInput.text); 
                mapField.assign((fieldList[i] as Field).path, textInput.text); 
            } 
            for(var i:int=0;i<textInputVariableList.length; i++) 
            { 
                var textInput:TextInput = textInputVariableList.getItemAt(i) as TextInput; 
                if(textInput) 
                    trace(textInput.text); 
                mapVar.assign((phList[i] as Variable).name, textInput.text); 
            } 
            for(var i:int=0;i<textInputDDEList.length; i++) 
            { 
                var textInput:TextInput = textInputDDEList.getItemAt(i) as TextInput; 
                if(textInput) 
                    trace(textInput.text); 
                if(textInput.text  && textInput.text != "") 
                    _dataDictionaryInstance.setValue((ddeList[i] as DataDictionaryElement).referenceName, textInput.text); 
            } 
             
             
            var dDEUtilservice:DataDictionaryUtilService = DCTServiceProvider.getUtilService(); 
            dDEUtilservice.serializeDDItoXML(_dataDictionaryInstance.vo, 
                function(event:DCTServiceEvent):void 
                { 
                    Debug.info("serializeDDItoXML success"); 
                    trace(event.data as String) 
                    serializeDataElementsToXML(event.data as String, mapVar, mapField); 
                }, 
                function(faultEvent:FaultEvent):void 
                { 
                    Debug.error("Error in serializeDDItoXML", faultEvent); 
                } 
            )     
        }

Ajoutez le gestionnaire de clics pour le bouton d’envoi dans la fonction partAdded, comme suit :

 else if(instance == submitBtn) 
    submitBtn.addEventListener(MouseEvent.CLICK, onSubmitBtnClick); 

Accédez à CreateCorrespondence > src > com.adobe.solutions.cmg.Create Correspondence > skins. Ouvrez le fichier CCRApplicationSkin.mxml. Remplacez l’intégralité du contenu de ce fichier par le code source ci-dessous pour créer un formulaire avec les éléments de données et un bouton Envoyer. Vous pouvez également créer un fichier d’habillage. Fournissez la référence du fichier d’habillage nouvellement créés dans CreateCorrespondence > src > CSS > CSS_styles.css.

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx" 
             width="100%" height="100%" > 
     
    <fx:Metadata> 
        [HostComponent("com.adobe.solutions.cmg.ccr.presentation.CCRApplication")] 
    </fx:Metadata> 
     
     
     
    <fx:Script> 
        <![CDATA[ 
            import mx.collections.ArrayCollection; 
            import mx.core.user interfaceComponent; 
             
        ]]> 
    </fx:Script> 
     
    <s:states> 
        <s:State name="initializing" /> 
        <s:State name="normal" /> 
        <s:State name="review" /> 
        <s:State name="disabled"/>         
    </s:states> 
     
    <s:Rect left="0" right="0" top="0" bottom="0"  > 
        <s:fill> 
            <s:SolidColor id="bgColor" color="0xeeeeee" alpha="1.0" /> 
        </s:fill> 
    </s:Rect> 
     
    <s:Group width="100%" height="100%" > 
        <s:layout> 
            <s:VerticalLayout gap="0" /> 
        </s:layout> 
        <s:Scroller width="100%" height="100%" > 
            <s:VGroup gap="0" width="100%" > 
                <s:Form id="dataCaptureForm" width="100%" height="100%" > 
                    <!-- dataCaptureItems here dynamically --> 
                </s:Form> 
            </s:VGroup> 
        </s:Scroller> 
        <s:Button id="submitBtn" width="50" height="20" label="Submit"/> 
    </s:Group> 
     
</s:SparkSkin>