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