Modifying the Popup skin

anjelinaponkerat

Hi

I need to change Popup skin:

1- change it to RTL

2- add border between records and fields.

MattiasEkström

Have you been able to download and use your own custom PopUpRendererSkin.mxml?
Otherwise you can take a look at one of the following threads:

How can I increase the size of a popup window in the Flex viewer 3.6

PopUp 3.0

1. Switch the right och left properties of fieldLabel och fieldValue in this part of the code (in PopUpRendererSkin.mxml):

for each (var fieldInfo:PopUpFieldInfo in popUpInfo.popUpFieldInfos)                         {                             if (fieldInfo.visible)                             {                                 var fieldLabel:Label = new Label();                                 fieldLabel.text = fieldInfo.label || fieldInfo.fieldName;                                 fieldLabel.left = 0;                                 fieldLabel.right = "col1:0";                                 fieldLabel.top = "row" + rowID + ":" + (rowID == 1 ? 5 : 15);                                 keyValueGroup.addElement(fieldLabel);                                 var fieldValue:RichEditableText;                                 htmlText = formattedAttributes[fieldInfo.fieldName];                                 if (htmlText)                                 {                                     fieldValue = new RichEditableText();                                     fieldValue.textFlow = LinkUtil.createLinkTextFlow(htmlText, textLayoutConfiguration);                                     fieldValue.editable = false;                                     fieldValue.left = "col2:5";                                     fieldValue.right = 0;                                     fieldValue.top = fieldLabel.top;                                     keyValueGroup.addElement(fieldValue);                                 }                                 rowID++;                             }                         }

Then you might want to edit the width and maxwidth values here:

<!--- @private -->         <s:Group id="keyValueGroup" width="100%">             <s:layout>                 <!--- @private -->                 <s:ConstraintLayout id="keyValueGroupLayout">                     <s:constraintColumns>                         <!--- @private -->                         <s:ConstraintColumn id="col1" maxWidth="100"/>                         <!--- @private -->                         <s:ConstraintColumn id="col2" width="100%"/>                     </s:constraintColumns>                 </s:ConstraintLayout>             </s:layout>         </s:Group>

2. Haven't look in to this but it's somewhere in the keyValueGroup you need to add your borders somehow...