1

I thought this was the default behaviour (all the Adobe docs seem to indicate that this is the case). Say you have a form: Name: [______] Password: [________]

generally you want Name and Password to line up on their right-hand side (right justification). The length should be the length of the longest label.

When I add the following code to my MXML (authoring in Flex 4) it does not do that at all! But rather tjust crams everything left-justified, similar to the Name/Password example above.

What's the solution?

<s:Form id="directoryForm_A" width="100%">                      
    <s:layout>
        <s:VerticalLayout horizontalAlign="justify"/>
    </s:layout>
    <s:FormItem label="Click">
        <s:Button label="Button"/>
    </s:FormItem>
    <s:FormItem label="Root Directory">
        <s:TextInput x="0" width="100%" enter="handleUserSetRootDirectory(event)"/>
    </s:FormItem>
</s:Form>
Tom Auger
  • 19,421
  • 22
  • 81
  • 104

2 Answers2

2

Which Adobe docs were you reading? You realize that the Spark Form are going to be very different than the Halo / MX Form. I would also suspect that the Spark form is not working yet.

Here are the docs on the Spark Form.

I think you'll benefit from reading the layout rules section of the FormItemLayout details. I cannot find the documentation that claims that all labels will be right aligned.

JeffryHouser
  • 39,401
  • 4
  • 38
  • 59
  • Man, where did you find these docs? Brilliant. So, somebody help me out here - are you saying that Spark is still beta and is not yet implemented? I was at a Flex user group meeting six months ago where Adobe demoed FlashBuilder and Spark. Is it still not completed? Should I be avoiding all Spark components? I'm using FB (Burrito) and of course it's pushing the Spark namespace first... – Tom Auger Nov 03 '10 at 14:21
  • I was reading these docs: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7e53.html, which were directly linked from the latest Adobe Flex 4 language Reference -> FormItem entry. Creating a FormItem container A FormItem container specifies a form element consisting of the following parts: A single label One or more child controls or containers, such as input controls The label is vertically aligned with the first child in the FormItem container and is right-aligned in the region to the left of the container. --> course, now that I look, it's for mx:FormItem. BAH! – Tom Auger Nov 03 '10 at 15:04
  • Don't avoid all spark elements, just the ones that are lined up for Flex 4.5, Spark Form and Spark Datagrid are the highlights. – Gregor Kiddie Nov 03 '10 at 15:24
  • Spark is not beta, it's just that not all halo/mx components were implemented as Spark components in Flex 4, Form being one of the components without a Spark equivalent. The next release of Flex will add more of them, including Form. – Wade Mueller Nov 03 '10 at 15:28
  • 1
    @Tom Auger I hope that @Gregor Kiddie and @Wade Mueller cleared thing up. But, if clarification is needed. Spark was a new component architecture introduced in Flex 4. I consider the architecture "complete" but not all MX components have been implemented as Spark components yet. The Spark Form tag is slated for Flex Hero expected early next year and is only available in pre-release builds. Plenty of Spark components are available in Flex 4. If you switch from using Spark Form to using MX Form, I suspect you'll find more consistent results. – JeffryHouser Nov 03 '10 at 20:26
  • Thanks everyone for your valuable input. It's tough, when you're not part of the Flex community (yet) to jump into the stream of what is an evolving standard and figure out where everything stands. It's certainly possible I missed a key point of documentation that outlines what you have so helpfully brought to my attention here. I hope that if any Adobe Docs staff see this thread, it will inspire them to even greater clarity on these matters to mop up the dregs like myself that may be approaching from oblique angles. – Tom Auger Nov 04 '10 at 16:20
  • @Tom Auger Adobe's documentation is often considered lacking. Finding documentation has become worse lately. They combined a lot of stuff into one ActionScript 3 Language reference; instead having product specific references. Much of the cross linking in said docs is invalid for reasons I can't explain. They also changed the uniquely named/easily search-able "livedocs.adobe.com" to the rather generic "help.adobe.com" making Google searches for ASDoc references effectively useless. A "beta" copy of the AS3 reference routinely comes up in searches, which is frustrating... – JeffryHouser Nov 04 '10 at 17:06
  • b/c I never know if I'm looking at docs for the released component I'm using or something that is new. – JeffryHouser Nov 04 '10 at 17:07
0

For anyone looking to a beta solution, Peter deHaan posts about this exact topic here: http://blog.flexexamples.com/2010/08/28/setting-the-text-alignment-on-a-spark-formitem-label-in-flex-hero/

Do note, since his example doesn't translate directly over to my issue:

  • adding to the for some reason disables the ability for the renderer to calculate the maxLabelWidth

Hope this helps others in the future.

Tom Auger
  • 19,421
  • 22
  • 81
  • 104