topic Re: Attribute Inspector Limitations in ArcGIS API for Flex Questions

Attribute Inspector Limitations

HessCorporation — Tue, 22 Mar 2011 11:33:24 GMT

Hi All,

I've been playing around with the new editing components and are finding the attribute inspector very limited in it's format and appearance. It seems to use TextInput and RichEditableText spark components and resize them according to the data column width.

What i'd like to know is whether it's possible to resize them manually, the FieldInspector component doesn't have a width property. Ideally the AttributeInspector would display the inputs in the Design tab in Flash Builder and enable you to change the allignment properties but at the moment it just shows a blank container. I'd also like to move the Delete/Next/Forward buttons and the '1/2' indicator, but again they're in a fixed location.

It's an excellent component for functionality but at the moment i'm having to manually code all the editing features into a custom input form just to cater for the fact that i'd like all my input boxes to align nicely, which is a bit wasteful.

Thanks

Re: Attribute Inspector Limitations

DasaPaddock — Wed, 23 Mar 2011 01:54:02 GMT

Can you post a screenshot showing what's happening and what you'd like to change? The fields seem to be lined up in this sample:
http://help.arcgis.com/en/webapi/flex/samples/index.html?sample=AttributeInspectorOutsideMap

You can change the buttons and make other changes by creating a custom skin. The default skin is in the skins folder in the API zip.

Reference:
http://help.arcgis.com/en/webapi/flex/help/index.html#inside_api/styling_and_skinning_overview.htm

Re: Attribute Inspector Limitations

HessCorporation — Wed, 23 Mar 2011 09:07:05 GMT

Thanks Dasa.

Example attached (AttributeInspector.png), in this the Panel is set to 250x350 and the AttributeInspector is 100%, yet the FieldInspector is shooting out the side of the parent conatiner. Ideally i'd like to control the width of the TextInput via the container.

At the moment they seem to always be a fixed size depending on the data type, in this example the Name attribute is a 50 char text field while the ID is a double, which results in them being different widths. I'd also like the ability to change the height of the Name TextInput as it's bigger than necessary, but again that seems to be a fixed property.

I've also attached another example (AttributeInspector2.png), where both the Panel and AttributeInspector are set to 100%, the problem here is that the Delete/Next/Back buttons sit a third of the way up from the bottom, despite the parent AttributeInspector container filling the entire panel. I would ideally like to be able to move these so they sit right at the bottom.

Thanks, Richard

Re: Attribute Inspector Limitations

mei09 — Sat, 02 Apr 2011 04:18:49 GMT

I was wondering if it's possible to show all the selected features' attributes in a datagrid instead of the paged GUI in the sample?

Where should we make this GUI change if it's possible, because I don't understand where the GUI formatting in the sample is being defined.

any advice would be appreciated. thanks

Re: Attribute Inspector Limitations

RobertScheitlin__GISP — Sat, 02 Apr 2011 11:55:26 GMT

mei 09,

You are not going to get very far in this new Flex 4 world unless you learn about skinning.
The GUI for the inspector is defined in the AttributeInspectorSkin.mxml in the ArcGIS_Flex\skins\src\com\esri\ags\skins folder.

Re: Attribute Inspector Limitations

MarkHorsell — Wed, 27 Jul 2011 13:12:03 GMT

Hi,
Did you have any luck skinning the Attribute Inspector? I can only see the API in the swc in the referenced library. (I'm thinking it has something to do with AttachmentInspectorSkin.abc) But the Skin property on AttibuteInspector is read only anyway! Which when i do read it says "null". So i'm wondering where the skin is attached. I'm sure i'm missing something simple.
Thanks

Re: Attribute Inspector Limitations

MarkHorsell — Wed, 27 Jul 2011 13:19:07 GMT

*that was a typo i did mean AttributeInspector NOT attachmentInspector

there is some css

esri|AttributeInspector
{

color:#00ff00;
}

perhaps this is the expected approach? Now i just need to work out which properties are available? But this is not going to be as flexible as skining.

Re: Attribute Inspector Limitations

philippschnetzer — Thu, 08 Sep 2011 12:37:52 GMT

Is there a way to standardize the text input block size for the attribute inspector? I notice that it is dependent on the size of the field but I cannot find anywhere in the skin where the code decides how big to make the input text box. I have a lot of fields and think it would be more friendly if all input text boxes were of the same size. Thanks for any help!

Re: Attribute Inspector Limitations

JeffBurgess — Sun, 12 Dec 2021 07:06:31 GMT

Is there a way to standardize the text input block size for the attribute inspector? I notice that it is dependent on the size of the field but I cannot find anywhere in the skin where the code decides how big to make the input text box. I have a lot of fields and think it would be more friendly if all input text boxes were of the same size. Thanks for any help!

I realize this is an ancient post but I came up against a similar problem and figured it wouldn't hurt to post my solution here.

If you run out of options trying to skin the attribute inspector, you can always go with the nuclear option and extend that class itself. If you override the createFormItemComponent method you get a lot of control over the UIComponent instances that the AttributeInspector makes. In my case, I needed to change the max height and width of the TextArea controls. Here's what I ended up doing, roughly:

public class CustomAttributeInspector extends AttributeInspector
{
     public function CustomAttributeInspector(featureLayers:Array=null)
     {
          super(featureLayers);
     }

     override protected function createFormItemComponent(featureLayer:FeatureLayer, field:Field, fieldInspector:FieldInspector, fieldValue:Object):UIComponent
     {
               var uiComponent:UIComponent = super.createFormItemComponent(featureLayer, field, fieldInspector, fieldValue);
               if (uiComponent is TextArea)
               {
                    // Darn those TextAreas. Make 'em narrower!
                    uiComponent.maxHeight = 80;
               }
               // We want all components to be 100% of the parent's width
               uiComponent.percentWidth = 100;
               return uiComponent;
     }
}