Szenario: Benutzeroberfläche „Korrespondenz erstellen“ anpassen

Aktualisieren Sie den Wert der Variablen CM_APPLICATION_CONTEXT in den folgenden Dateien:

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

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

Legen Sie in dieser neuen Datei „toolbarSkin.mxml“ für die Eigenschaften „includeInLayout“ und „visible“ der Einzugsschaltflächen den Wert „false“ fest, damit diese Schaltflächen nicht angezeigt werden.

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

Erstellen Sie unter „CreateCorrespondence > src > CSS“ (z. B. custom_styles.css) ein Stylesheet für die Lösungvorlage, um die bearbeitete Designdatei zu verwenden. Fügen Sie den folgenden Eintrag in die Datei CreateCorrespondence > src > CSS > custom_styles.css ein, damit die Symbolleistenklasse die bearbeitete Skin verwendet.

@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"); 
}

Fügen Sie die neue CSS-Datei der Datei „CreateCorrespondence > src > (Standardpaket) > index.mxml“ hinzu:

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

Erstellen Sie hier eine ActionScript-Klasse (z. B. CustomModuleItemRenderer.as), die die Klasse „com.adobe.solutions.acm.ccr.presentation.contentcapture.ModuleItemRenderer“ erweitert. Setzen Sie in dieser die Funktion „commitProperties“ außer Kraft, um die Schaltfläche „Bearbeiten“ basierend auf der Benutzergruppe zu deaktivieren. Im folgenden Quellcode wird davon ausgegangen, dass eine Benutzergruppe „EditText“ definiert ist. Außerdem wird die Schaltfläche „Bearbeiten“ nur für Benutzer aktiviert, die dieser Gruppe angehören.

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(); 
        } 
    } 
}

Navigieren Sie zu „CreateCorrespondence > src > com.adobe.solutions.cmg.ccr > skins“ .Erstellen Sie die Designdatei „TargetAreaRendererSkin.mxml“ als Kopie der Designdatei „com.adobe.solutions.acm.ccr.skins.contentcapture.TargetAreaRendererSkin.mxml“. Ändern Sie in der Datei „TargetAreaRendererSkin.mxml“ das Element „moduleViewList“ so, dass der CustomModuleItemRenderer verwendet wird:

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

Erstellen Sie ein Stylesheet für die Verwendung der bearbeiteten Dateien (z. B. custom_styles.css). Fügen Sie in die Datei „CreateCorrespondence > src > CSS > custom_styles.css“ die folgenden Einträge ein:

/* 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"); 
}

Fügen Sie diese bearbeitete CSS-Datei in die Datei „index.mxml“ ein und zwar nach allen anderen CSS-Dateien:

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

Navigieren Sie zu „CreateCorrespondence > src > com.adobe.solutions.cmg.ccr > presentation“ und fügen Sie eine benutzerdefinierte Funktion zum Filtern von Zielbereichen in die Datei „CCRApplication.as“ ein:

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; 
        };

Legen Sie in der Datei „partAdded function in the CCRApplication.as“ die Funktion zum Filtern von Zielbereichen für den contentCapturePod fest.

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); 
}

Öffnen Sie die Datei CCRApplication.as und fügen Sie den folgenden Quellcode hinzu.

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); 
                } 
            )     
        }

Fügen Sie der Funktion „partAdded“ den Klick-Handler für die Schaltfläche „Senden“ wie folgt hinzu:

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

Navigieren Sie zu CreateCorrespondence > src > com.adobe.solutions.cmg.Create Correspondence > skins. Öffnen Sie die Datei CCRApplicationSkin.mxml. Ersetzen Sie den gesamten Inhalt dieser Datei durch den folgenden Quellcode, um ein Formular mit den Datenelementen und eine Schaltfläche Senden zu erstellen. Alternativ können Sie auch eine Designdatei erstellen. Stellen Sie einen Verweis auf die neu erstellte Designdatei im CreateCorrespondence > src > CSS > CSS_styles.css bereit.

<?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>