topic Re: Edit Widget - Attribute Inspector Text Input box WIDTH in ArcGIS Viewer for Flex Questions

Edit Widget - Attribute Inspector Text Input box WIDTH

philippschnetzer — Tue, 05 Jun 2012 16:45:08 GMT

I see how to adjust the LABEL width from here http://forums.arcgis.com/threads/57836-Flex-AttributeInspector-field-width...

And I also see how to adjust the MultiLineThreshold (allows you to control when the form text input box grows from a single line to about a 4 line text input box), from here http://forums.arcgis.com/threads/39310-Editor-Widget-Size-of-attribute-textbox

Now, I have one thing left - how to change the width of the text input boxes? I would like to make them a bit wider but not having any luck...any help is much appreciated, thanks!

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

MehulChoksey — Wed, 06 Jun 2012 17:13:02 GMT

Could you try adding custom field inspector?
For code snippet, see: http://forums.arcgis.com/threads/19995-Easiest-way-to-customize-AttributeInspector-associated-with-an-active-Editor

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

philippschnetzer — Wed, 06 Jun 2012 17:57:41 GMT

I looked at the above thread....but not being a programmer at heart I really don't even know where to begin inserting a custom field inspector into the current Edit Widget...

Question: this method would remove the dynamic nature of this widget, correct? Because I have 4 apps using the EditWidget in different ways which are configured through the xml, so for this method to work I would need to create a new EditWidget.mxml for each app so the field could be hard coded, no?

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

MehulChoksey — Wed, 06 Jun 2012 19:30:40 GMT

Ok Try this:
1.Download and unzip attached skin.its a copy of the default s:TextInput skin that comes with Flex SDK

2. In Flash Builder, copy this skin under com.esri.viewer.skins package.

3. Open the skin added above and set widthInChars property to the width that you want.
The default is 10. I changed it to 50.
s:RichEditableText id="textDisplay"
              verticalAlign="middle"
              widthInChars="50"
              left="1" right="1" top="1" bottom="1" />

4. In defaults.css, add following :

esri|StringField
{
    skinClass:ClassReference("com.esri.viewer.skins.myTextInput")
}

Compile the app and you should be all set.

Mehul

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

philippschnetzer — Thu, 07 Jun 2012 10:39:08 GMT

Mehul,

Well, you made it very easy for me, thanks very much. Worked like a charm. Just one last question - the change widthInChars="50" changes the single line text input boxes but does not affect the width when the multilinethreshhold has been exceeded - meaning the larger text boxes that are square in shape are still only 15 characters wide.

Thanks again!!

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

MehulChoksey — Thu, 07 Jun 2012 15:25:52 GMT

Could you try setting width instead of widthInChars?

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

philippschnetzer — Thu, 07 Jun 2012 15:46:23 GMT

Mehul,

The "width" setting still only affects the single line text input boxes. This is not such a huge issue, I can live with it, I do appreciate your time, thanks!

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

MehulChoksey — Thu, 07 Jun 2012 17:59:52 GMT

Steps would be similar as before
add the attached skin under com.esri.viewer.skins package

Change the width and height of the following:

<s:RichEditableText id="textDisplay" heightInLines="10" widthInChars="15" />

and add following to defaults.css

esri|TextField
{
skinClass:ClassReference("com.esri.viewer.skins.myTextAreaSkin")
}

Mehul

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

philippschnetzer — Fri, 08 Jun 2012 10:23:01 GMT

Mehul,

Thanks for your help. That worked beautifully. I never would have found out how to accomplish this..especially not having access to these files....maybe consider putting those files into the flex api download??

Re: Edit Widget - Attribute Inspector Text Input box WIDTH

MehulChoksey — Fri, 08 Jun 2012 15:55:24 GMT

Glad to hear that it worked for you.
Flex SDK is open source. So you do have access to the entire soure.
Easiest way to create copy of the skin is:

1. Right click on say com.esri.viewer.skins package and click New > MXML skins
2. Give a name and specify host component for which you need to base your skin on.
3. Click finish to create copy of the skin.
See attached.

Mehul