Re: [flexcoders] Re: How to make FormItem labels left aligned?

[EECOLOR]

Nice, I did not know they added that style with Flex 3 :)


Greetz Erik


On 5/29/08, Pun Sophany <[EMAIL PROTECTED]> wrote:
>
> Did you try this:
>
> 
>
> In your css file, put this declaration:
> .myLabelStyle {
> text-align: left;
> }
>
> It works for me.
>
> Sophany
>
>

[flexcoders] Re: How to make FormItem labels left aligned?

[Pun Sophany]

Did you try this:



In your css file, put this declaration:
.myLabelStyle {
  text-align: left;
}

It works for me.

Sophany 

--- In flexcoders@yahoogroups.com, EECOLOR <[EMAIL PROTECTED]> wrote:
>
> If you would use the following class it is ;)
> 
> 
> Greetz Erik
> 
> 
> package fly.flex.containers
> {
>  import mx.containers.FormItem;
>  import mx.core.EdgeMetrics;
>  import mx.core.UIComponent;
>  import mx.core.mx_internal;
>  import mx.styles.CSSStyleDeclaration;
>  import mx.styles.StyleManager;
> 
> 
[Style(name="labelAlign",type="String",enumeration="left,right",inherit="no")]
> 
>  public class ExtendedFormItem extends FormItem
>  {
>   private static var _CLASS_CONTRUCTED_BOOL:Boolean = _CLASS_CONTRUCT();
> 
>   private static function _CLASS_CONTRUCT():Boolean
>   {
>if (!StyleManager.getStyleDeclaration("ExtendedFormItem"))
>{
> var newStyleDeclaration:CSSStyleDeclaration = new
CSSStyleDeclaration();
> newStyleDeclaration.setStyle("labelAlign", "left");
> StyleManager.setStyleDeclaration("ExtendedFormItem",
> newStyleDeclaration, true);
> 
>};
>return true;
>   };
> 
>   override protected function updateDisplayList(unscaledWidth:Number,
> unscaledHeight:Number):void
>   {
>super.updateDisplayList(unscaledWidth, unscaledHeight);
> 
>var labelAlign_str:String = getStyle("labelAlign");
> 
>if (labelAlign_str == "left")
>{
> var vm:EdgeMetrics = viewMetricsAndPadding;
> var labelObject:UIComponent = mx_internal::labelObject as
UIComponent;
> labelObject.move(vm.left, labelObject.y);
>};
> 
>   };
>  };
> };
>

Re: [flexcoders] Re: How to make FormItem labels left aligned?

[EECOLOR]

If you would use the following class it is ;)


Greetz Erik


package fly.flex.containers
{
import mx.containers.FormItem;
import mx.core.EdgeMetrics;
import mx.core.UIComponent;
import mx.core.mx_internal;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;

[Style(name="labelAlign",type="String",enumeration="left,right",inherit="no")]

public class ExtendedFormItem extends FormItem
{
 private static var _CLASS_CONTRUCTED_BOOL:Boolean = _CLASS_CONTRUCT();

 private static function _CLASS_CONTRUCT():Boolean
 {
  if (!StyleManager.getStyleDeclaration("ExtendedFormItem"))
  {
   var newStyleDeclaration:CSSStyleDeclaration = new CSSStyleDeclaration();
   newStyleDeclaration.setStyle("labelAlign", "left");
   StyleManager.setStyleDeclaration("ExtendedFormItem",
newStyleDeclaration, true);

  };
  return true;
 };

 override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
 {
  super.updateDisplayList(unscaledWidth, unscaledHeight);

  var labelAlign_str:String = getStyle("labelAlign");

  if (labelAlign_str == "left")
  {
   var vm:EdgeMetrics = viewMetricsAndPadding;
   var labelObject:UIComponent = mx_internal::labelObject as UIComponent;
   labelObject.move(vm.left, labelObject.y);
  };

 };
};
};

RE: [flexcoders] Re: How to make FormItem labels left aligned?

[jason.proulx]

Too bad that's not simply a CSS style.

 

Jay Proulx

[EMAIL PROTECTED]



From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of EECOLOR
Sent: January 31, 2007 10:30 AM
To: flexcoders@yahoogroups.com
Subject: Re: [flexcoders] Re: How to make FormItem labels left aligned?

 

This is the correct code for aligning labels to the left:

 

 public class FormItem extends mx.containers.FormItem
 {

  override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
  {
   super.updateDisplayList(unscaledWidth, unscaledHeight);
   
   var vm:EdgeMetrics = viewMetricsAndPadding; 
   var left:Number = vm.left;
   
   var labelObject:UIComponent = mx_internal::labelObject as
UIComponent;
   
   labelObject.move(left, labelObject.y);
  };

 };

 

 

Greetz Erik

 

Re: [flexcoders] Re: How to make FormItem labels left aligned?

[EECOLOR]

This is the correct code for aligning labels to the left:

public class FormItem extends mx.containers.FormItem
{
 override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
 {
  super.updateDisplayList(unscaledWidth, unscaledHeight);

  var vm:EdgeMetrics = viewMetricsAndPadding;
  var left:Number = vm.left;

  var labelObject:UIComponent = mx_internal::labelObject as UIComponent;

  labelObject.move(left, labelObject.y);
 };
};


Greetz Erik

Re: SOLVED: Re: [flexcoders] Re: How to make FormItem labels left aligned?

[Sergey Kovalyov]

The final solution is here:
http://skovalyov.blogspot.com/2007/01/left-aligned-label-in-formitem.html

On 12/14/06, Sergey Kovalyov <[EMAIL PROTECTED]> wrote:


A bit "buggy" solution, Stas. rawChildren.getChildAt(
rawChildren.numChildren - 1) should be used instead, you know. ;)

On 12/14/06, Stanislav Zayarsky <[EMAIL PROTECTED]> wrote:
>
>Guys,
>
> Just use this "ExtendedFormItem" class instead of default "FormItem".
>
> Here is the code:
>
> *public* *class* ExtendedFormItem *extends* FormItem {
>
> *  override* *protected* 
*function*updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) :
> *void* {
>
> *super*.updateDisplayList(unscaledWidth, unscaledHeight);
>
> *var* labelObject : Object = rawChildren.getChildAt(1);
>
> labelObject.x = 0;
>
>   }
>
> }
>
> Best regards
> Stanislav
>
>
> On 11/10/06, Tim Hoff <[EMAIL PROTECTED]> wrote:
> >
> >Hi Andriy,
> >
> > While I like your example, how do you propose aligning the children of
> > the FormItems?  It seems, with this method, that the entire form item
> > (including the children - TextInput...),  gets moved to the left with
> > the label; at least in my test of this code.  If the label text has
> > different lengths, for each form item, the various children get moved
> > to the left as well; and don't align.  Preferably, this is something
> > that should be handled with a stock CSS property.  but I was wondering if
> > you had experienced the same behavior.  Instead of nesting HBox's, for days,
> > this would be a very useful technique, for FormItems.
> >
> > -TH
> > __
> >
> > *Tim Hoff
> > *Cynergy Systems, Inc.
> > http://www.cynergysystems.com 
> > Office: 866-CYNERGY
> >
> >
>  
>

[flexcoders] Re: How to make FormItem labels left aligned?

[Bruce Denham]

On a similar note, I'm interested in overriding the FormItem component
to place the label and requirement indicator ABOVE the contained input
field(s). Reason: http://www.uxmatters.com/MT/archives/000107.php

Moving labels left seems straightforward. Hopefully moving it above is
equally easy, but I been able seem to get anything to work...

Ideas?

--- In flexcoders@yahoogroups.com, "Tim Hoff" <[EMAIL PROTECTED]> wrote:
>
> 
> Hi Andriy,
> 
> While I like your example, how do you propose aligning the children of
> the FormItems?  It seems, with this method, that the entire form item
> (including the children - TextInput...),  gets moved to the left with
> the label; at least in my test of this code.  If the label text has
> different lengths, for each form item, the various children get moved to
> the left as well; and don't align.  Preferably, this is something that
> should be handled with a stock CSS property.  but I was wondering if you
> had experienced the same behavior.  Instead of nesting HBox's, for days,
> this would be a very useful technique, for FormItems.
> 
> -TH
> __
> 
> Tim Hoff
> Cynergy Systems, Inc.
> http://www.cynergysystems.com
> Office  : 866-CYNERGY
>

Re: SOLVED: Re: [flexcoders] Re: How to make FormItem labels left aligned?

[Sergey Kovalyov]

A bit "buggy" solution, Stas.
rawChildren.getChildAt(rawChildren.numChildren- 1) should be used
instead, you know. ;)

On 12/14/06, Stanislav Zayarsky <[EMAIL PROTECTED]> wrote:


   Guys,

Just use this "ExtendedFormItem" class instead of default "FormItem".

Here is the code:

*public* *class* ExtendedFormItem *extends* FormItem {

*  override* *protected* *function*updateDisplayList(unscaledWidth:Number, 
unscaledHeight:Number) :
*void* {

*super*.updateDisplayList(unscaledWidth, unscaledHeight);

*var* labelObject : Object = rawChildren.getChildAt(1);

labelObject.x = 0;

  }

}

Best regards
Stanislav


On 11/10/06, Tim Hoff <[EMAIL PROTECTED]> wrote:
>
>Hi Andriy,
>
> While I like your example, how do you propose aligning the children of
> the FormItems?  It seems, with this method, that the entire form item
> (including the children - TextInput...),  gets moved to the left with
> the label; at least in my test of this code.  If the label text has
> different lengths, for each form item, the various children get moved to
> the left as well; and don't align.  Preferably, this is something that
> should be handled with a stock CSS property.  but I was wondering if you had
> experienced the same behavior.  Instead of nesting HBox's, for days, this
> would be a very useful technique, for FormItems.
>
> -TH
> __
>
> *Tim Hoff
> *Cynergy Systems, Inc.
> http://www.cynergysystems.com 
> Office: 866-CYNERGY
>
>

SOLVED: Re: [flexcoders] Re: How to make FormItem labels left aligned?

[Stanislav Zayarsky]

Guys,

Just use this "ExtendedFormItem" class instead of default "FormItem".

Here is the code:

*public* *class* ExtendedFormItem *extends* FormItem {

*  override* *protected*
*function*updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number) :
*void* {

*super*.updateDisplayList(unscaledWidth, unscaledHeight);

*var* labelObject : Object = rawChildren.getChildAt(1);

   labelObject.x = 0;

 }

}

Best regards
Stanislav


On 11/10/06, Tim Hoff <[EMAIL PROTECTED]> wrote:


   Hi Andriy,

While I like your example, how do you propose aligning the children of the
FormItems?  It seems, with this method, that the entire form item
(including the children - TextInput...),  gets moved to the left with the
label; at least in my test of this code.  If the label text has different
lengths, for each form item, the various children get moved to the left as
well; and don't align.  Preferably, this is something that should be
handled with a stock CSS property.  but I was wondering if you had
experienced the same behavior.  Instead of nesting HBox's, for days, this
would be a very useful technique, for FormItems.

-TH
__

*Tim Hoff
*Cynergy Systems, Inc.
http://www.cynergysystems.com 
Office: 866-CYNERGY

[flexcoders] Re: How to make FormItem labels left aligned?

[camlinaeizerous]

While you could go an set textAlign="left" on each form item that
would simply be a headache. I would suggest since you want it done on
every form item to simply change the CSS settings for the form items.

--- In flexcoders@yahoogroups.com, "Sergey Kovalyov"
<[EMAIL PROTECTED]> wrote:
>
> Hi All!
> 
> I want FormItem labels to be left aligned in all the Form instances.
> What is the best practice to do that?
> 
> Sergey.
>





--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com 
Yahoo! Groups Links

<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/flexcoders/

<*> Your email settings:
Individual Email | Traditional

<*> To change settings online go to:
http://groups.yahoo.com/group/flexcoders/join
(Yahoo! ID required)

<*> To change settings via email:
mailto:[EMAIL PROTECTED] 
mailto:[EMAIL PROTECTED]

<*> To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]

<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/