How to skin the Relationship Inspector

[ionarawilson1]

I need to skin the relationship inspector. Can you guys tell me how I start working on that? Does anybody have a file I can use to start making changes to the skin? I want to put the "add a new record" in a better place and I also would like to add pagination, like a double arrow to the page count (1 of 7, 2 of 7, 3 of 7)so users can go to the last record since I am going to have a lot of records and I don't want to make them to have to go one by one. Thank you!

[ionarawilson1]

I found the api here


http://www.esri.com/apps/products/download/index.cfm?fuseaction=download.all#ArcGIS_API_for_Flex

and got the skin. However in the skin file called RelationsInpsectorAttibuteInspectorSkin. I don't know how to add a pagination button. How hard would it be to implement this button here. It seems ESRI has a previous and next button but not a last button.

Can  you guys help me with this? Thanks!

<?xml version="1.0" encoding="utf-8"?>
<!--
    Copyright (c) 2012 ESRI

    All rights reserved under the copyright laws of the United States
    and applicable international laws, treaties, and conventions.

    You may freely redistribute and use this sample code, with or
    without modification, provided you include the original copyright
    notice and use restrictions.

    See use restrictions in use_restrictions.txt.
-->
<!---
     The custom skin class for the AttributeInspector component used in the RelationshipInspector.
    <p><b>Since:</b> ArcGIS API 3.1 for Flex</p>
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fieldClasses="com.esri.ags.samples.skins.fieldClasses.*">

    <!-- host component -->
    <fx:Metadata>
        /**
         * A strongly typed property that references the component to which this skin is applied.
         */
        [HostComponent("com.esri.ags.components.AttributeInspector")]
    </fx:Metadata>

    <fx:Declarations>
        <fx:Component id="codedValueDomainField">
            <fieldClasses:CodedValueDomainField/>
        </fx:Component>
        <fx:Component id="dateField">
            <fieldClasses:CalendarField/>
        </fx:Component>
        <fx:Component id="doubleField">
            <fieldClasses:DoubleField/>
        </fx:Component>
        <fx:Component id="integerField">
            <fieldClasses:IntegerField/>
        </fx:Component>
        <fx:Component id="labelField">
            <fieldClasses:LabelField/>
        </fx:Component>
        <fx:Component id="memoField">
            <fieldClasses:MemoField/>
        </fx:Component>
        <fx:Component id="rangeDomainField">
            <fieldClasses:RangeDomainField/>
        </fx:Component>
        <fx:Component id="singleField">
            <fieldClasses:DoubleField/>
        </fx:Component>
        <fx:Component id="smallIntegerField">
            <fieldClasses:IntegerField/>
        </fx:Component>
        <fx:Component id="stringField">
            <fieldClasses:StringField/>
        </fx:Component>
        <fx:Component id="textField">
            <fieldClasses:TextField/>
        </fx:Component>
        <fx:Component id="typeField">
            <fieldClasses:TypeField/>
        </fx:Component>
    </fx:Declarations>

    <!-- states -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="disabled"/>
        <s:State name="invalid"/>
    </s:states>

    <s:layout>
        <s:VerticalLayout horizontalAlign="center"/>
    </s:layout>

    <s:HGroup gap="8"
              includeInLayout="{hostComponent.numFeatures &gt; 1}"
              verticalAlign="middle"
              visible="{hostComponent.numFeatures &gt; 1}">
        <!--- Button to go to the previous feature in the selection set. -->
        <s:Button id="previousButton"
                  enabled.disabled="false"
                  skinClass="com.esri.ags.samples.skins.ContentNavigatorPreviousButtonSkin"/>
        <!--- Form to display the attributes of the active feature. -->
        <s:Label width="100%"
                 fontWeight="bold"
                 text="{hostComponent.activeFeatureIndex+1} {resourceManager.getString('ESRIMessages','attributeInspectorOf')} {hostComponent.numFeatures}"
                 textAlign="center"/>
        <!--- Button to go to the next feature in the selection set. -->
        <s:Button id="nextButton"
                  enabled.disabled="false"
                  skinClass="com.esri.ags.samples.skins.ContentNavigatorNextButtonSkin"/>
    </s:HGroup>
    <!--- @private -->
    <s:List id="list"
            width="100%" height="100%"
            borderVisible="false"
            enabled.disabled="false"
            hasFocusableChildren="true"
            horizontalScrollPolicy="auto"
            itemRenderer="com.esri.ags.samples.skins.supportClasses.AttributeInspectorRenderer"
            maxHeight="{hostComponent.getStyle('formMaxHeight')}"
            useVirtualLayout="false"
            verticalScrollPolicy="auto">
        <s:layout>
            <s:FormLayout gap="0"
                          paddingBottom="5"
                          paddingLeft="5"
                          paddingRight="5"
                          paddingTop="5"/>
        </s:layout>
    </s:List>
    <s:HGroup width="100%"
              horizontalAlign="center"
              verticalAlign="middle">
        <!--- Button to delete the active feature. -->
        <s:Button id="deleteButton"
                  buttonMode="true"
                  enabled.disabled="false"
                  label="{hostComponent.deleteButtonLabel}"
                  skinClass="com.esri.ags.samples.skins.AttributeInspectorDeleteButtonSkin"/>
        <!--- Button to indicate completion of editing/viewing attributes -->
        <s:Button id="okButton"
                  enabled.disabled="false"
                  label="{hostComponent.okButtonLabel}"/>
    </s:HGroup>

</s:Skin>