11 Replies Latest reply on Feb 24, 2010 6:16 AM by Dallas Kuhn

    How can I create a comb field in flex?

    Dallas Kuhn Level 3

      I need to develop a flex app based on an existing form. The form was built in LiveCycle Designer and is made up of comb fields. I have been asked to match the look and feel of the flex app to that of the form and therefore I am unable to use standard text input fields in flex.

       

      Is anyone able to explain how to go about creating comb fields in flex?

        • 1. Re: How can I create a comb field in flex?
          archemedia Level 4

          You should create a custom class with properties like:

           

          numChars (number of characters)

          numLines (number of line)

           

           

          When these properties are set, the class draws vertical lines

           

          Then, above this background, you generate textInput fields of which the font is set to "Courier New" which is monospaced.

           

          If you really don't know how to tackle this, I will have a go but it might be some work.

           

          Dany

          • 2. Re: How can I create a comb field in flex?
            Dallas Kuhn Level 3

            Hi Dany,

            Im afraid I need a little more help than this. Im actually a forms developer who has started using flex for a couple months now. I was hoping someone could either provide me with some sort of working example, or point me to where i could find some info related to this.

            • 3. Re: How can I create a comb field in flex?
              JeffryHouser Level 4

              I've never used LiveCycle.  Can you elaborate on what a comb field is?  Maybe with some screen shots or a short screencast.

              • 5. Re: How can I create a comb field in flex?
                Dallas Kuhn Level 3

                Hi Jeffry,

                As Dany says, its a line separated form field. I have attached an image.

                • 6. Re: How can I create a comb field in flex?
                  JeffryHouser Level 4

                  Does it work as a single text field?  Or is each 'box' treated as separate interface elements?

                   

                  My first thought is to wrap up a bunch of textInputs into a HBox and add some code to jump between boxes when keys are pressed.

                   

                  However, Dany's suggestion of drawing vertical lines is probably a more effecient approach if you the monospaced fonts are acceptable to your app.

                   

                  If you have a formal budget for this, contact me privately: http://www.flextras.com/?event=ContactForm and we can work something out.  Components are my thing.

                  • 7. Re: How can I create a comb field in flex?
                    Dallas Kuhn Level 3

                    @Jeffry - Yes, it works as a single text field so I agree that Dany's idea is probably the way to go. We won't be able to hire you privately but thanks for the offer.

                     

                    @Dany if you have the time and capacity to do some sort of demo for me, that would be awesome, but if it's a big job then dont stress about it.

                     

                    Otherwise if there is anyone else that might be able to help with this, it will be greatly appreciated.

                    • 8. Re: How can I create a comb field in flex?
                      Gregory Lafrance Level 6

                      I just created this cookbook post:

                      http://cookbooks.adobe.com/post_Creating_a__comb_field__text_component_in_Flex_-16881.html

                       

                      This class does what you want:

                       

                      package
                      {
                        import flash.text.TextField;
                        import flash.text.TextFormat;
                        import flash.text.TextFormatAlign;
                        import flash.text.TextLineMetrics;
                        
                        import mx.core.UIComponent;
                        public class CombFieldComp extends UIComponent{
                          private var _tf:TextField;
                          private var _format:TextFormat;
                          private var _spacing:uint = 0;
                              
                          [Bindable] private var _text:String = "";
                          public function CombFieldComp(){
                            super();
                            _tf = new TextField();
                            _tf.border = true;
                            _format = new TextFormat();
                            setCustFormat();
                            addChild(_tf);
                          }
                          public function get text():String{
                            return _text;
                          }    
                          
                          public function set text(value:String):void{
                            _text = value;
                            _tf.text = _text; 
                            setCustFormat();
                          }
                          public function get spacing():uint{
                            return _spacing;
                          }
                          
                          public function set spacing(value:uint):void{
                            _spacing = value;
                            setCustFormat();
                          }
                          
                          private function setCustFormat():void{
                            _format.font = "Courier New";
                            _format.letterSpacing = _spacing;
                            _format.align = TextFormatAlign.CENTER;
                            _format.blockIndent = _spacing / 2;
                            _tf.setTextFormat(_format);      
                            var tlm:TextLineMetrics = _tf.getLineMetrics(0);
                            _tf.width = tlm.width + 5;
                            _tf.height = tlm.height + 5;
                            this.graphics.lineStyle(1,0x000000);
                            for(var a:uint=1;a<_tf.getLineLength(0);a++){
                              var Xpos:int = (_tf.width / _tf.getLineLength(0)) * a;
                              this.graphics.moveTo(Xpos, _tf.height);
                              this.graphics.lineTo(Xpos, 0);
                            }
                          }
                        }
                      }
                      

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">
                        <local:CombFieldComp text="This is really long text." spacing="10"/>
                      </mx:Application>
                      

                       

                      If this post answers your question or helps, please mark it as such.


                      Greg Lafrance - Flex 2 and 3 ACE certified

                      www.ChikaraDev.com

                      Flex / AIR Development, Training, and Support Services

                      • 9. Re: How can I create a comb field in flex?
                        Gregory Lafrance Level 6

                        Actually, I just realized that the previous class does not allow text to be input.

                         

                        This class allows input of text, but for some reason the font is not acting as a monospaced font:

                         

                        package
                        {
                          import flash.display.Sprite;
                          
                          import mx.controls.TextInput;
                          import mx.events.FlexEvent;
                          public class CombFieldCompTI extends TextInput{
                            private var _spacing:Number = 0;
                                
                            [Bindable] private var _text:String = "";
                            public function CombFieldCompTI(){
                              super();
                              setStyle("fontFamily", "_typewriter");
                              setCustFormat();
                              this.addEventListener(FlexEvent.CREATION_COMPLETE, init);
                            }
                            
                            private function init(evt:FlexEvent):void{
                              setCustFormat();
                            }
                            override public function set text(value:String):void{
                              super.text = value;
                              setCustFormat();
                            }
                            public function get spacing():Number{
                              return _spacing;
                            }
                            
                            public function set spacing(value:Number):void{
                              _spacing = value;
                              setCustFormat();
                            }
                            
                            private function setCustFormat():void{
                              setStyle("letterSpacing", _spacing);
                              var lines:Sprite = new Sprite();
                              lines.graphics.lineStyle(1,0x000000);
                              for(var a:Number=1;a<length;a++){
                                var Xpos:Number = (width / length) * a;
                                lines.graphics.moveTo(Xpos, height);
                                lines.graphics.lineTo(Xpos, 0);
                              }
                              addChild(lines);      
                            }
                          }
                        }
                        
                        • 10. Re: How can I create a comb field in flex?
                          Dallas Kuhn Level 3

                          Brilliant - thanks very much Greg. This is more or less what I needed.

                           

                          At runtime we won't have text available for the field, but we will have a limit for the field (e.g. a comb of 8 for a date field). For consistancy across fields, we need all the spacing to look the same, so i will try setting a default spacing property in the class so that all comb fields have the same spacing. Also I'm gonna try adding a 'limit' property to your code where we can specify a value (e.g. '8' for a comb of 8 fields).Then the field will only accept 8 characters.

                           

                          Anyway, you gave me a great starting point and I really appreciate it. Thanks again

                           

                          Dallas

                          • 11. Re: How can I create a comb field in flex?
                            Dallas Kuhn Level 3

                            Hi Greg,

                            Im not having any luck getting the characters to line up nicely in the middle of the combs. Do you think you can have another look at this. Ideally we would like to be able to specify the number of combs per field (all equally spaced) with the text fitting neatly in the middle of each comb.

                            Thanks for all your help with this,

                            Dallas