Create a skin: Access the ManageAssets project
and navigate to the package com.adobe.solutions.cmg.manage.skins
(CorrespondenceManagementSolutionTemplate\ManageAssets\src\com\adobe\solutions\cmg\manage\skins).
Create an MXML Skin (such as CustomTextEditorSkin.mxml) for
the host component com.adobe.solutions.acm.authoring.presentation.TextEditor by
copying an existing skin such as com.adobe.solutions.acm.authoring.skins.TextEditorSkin.
Make the desired changes in the MXML skin. For example, you
can increase the height of the description input making it multiline.
Change the descrptionDesplay to TextArea and increase its height
from: <s:TextInput id="descriptionDisplay" enabled="true" enabled.View="false" width="205" height="24" />
To: <s:TextArea id="descriptionDisplay" enabled="true" enabled.View="false" width="205" height="54" />
Similarly,
to change the dialog footer color, update the following code from: <!-- 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>
To: <!-- 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>
Create a CSS file to use the above skin class, and add the
CSS to the main project file index.mxml. For example:
/* 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;
}
Update index.mxml file to include this custom CSS file (include
after including all other CSS files). <fx:Style source="/CSS/custom_styles.css"/>
Rebuild and Redeploy. For information on rebuilding and redeploying,
see Building and deploying the Solution Template.
|
|
|