2 Replies Latest reply on Mar 23, 2011 6:55 AM by flashharry!

    How to determine if a component is visible or not (hidden by accordion)

    flashharry! Level 1

      At the request of our users I wrote a "sticky validator class". Please a button and it show all validation errors on a form at once.

       

      I use the toolTipManger to manually create and destroy the tooltips.

       

      This works great with simple forms. But I'm trying to extend this to work with more complexed forms.

       

      The issue is that the tooltips are created on layer on top of the stage, not on the display object.

       

      One of our forms is in an accordion and broken up into sections.  The issue is that ALL the error tooltips show not just the ones that are visible in the curremt accordion.

       

      Is there a way to determine is an object is visible or not, when a display object is in a closed accordion its visible property is still true.

       

      As I loop through my validation error array I get the stage bounds of the display object

       

      var pt:Rectangle = _stage.getBounds(err.currentTarget.source);

       

      I would like to call a check to se if its currently visible to the user

       

      if ( !err.currentTarget.source.visible) continue;

       

      But this is always true even if the display object is not currently on screen ie in one of the closed accordion panels

       

      TIA

      harry

        • 1. Re: How to determine if a component is visible or not (hidden by accordion)
          rtalton Level 4

          IF your accordion uses a Canvas as each child container, and the Accordion's ID=accForms, you could do something like this:

           

                  private function containsObject(obj:DisplayObject):Boolean{
                      var ary:Array = accForms.getChildren();//will contain all Canvas children of Accordion
                      var rtnVal:Boolean;           
                      var accSelectedChild:Container = accForms.selectedChild;//get the Selected (visible) Child of the Accordion
                      for each(var cvs:Canvas in ary){
                          if (accSelectedChild == cvs && cvs.contains(obj)){ //loop through each Canvas in the array; if it's the selected child, check for the Display Object.
                              rtnVal = true;
                              break;
                          }               
                      }
                      return rtnVal;
                  }

           

          It checks if the passed-in DisplayObject is on the Canvas.

          In your validation routines, simply call this function on each object being validated to decide whether or not to show the tooltips for it.

           

          Watch out for null objects if you have not accessed each accordion tab before calling this; in this case it will throw an error because the children haven't been created yet. You could put in a check for this, though.

           

          HTH

          1 person found this helpful
          • 2. Re: How to determine if a component is visible or not (hidden by accordion)
            flashharry! Level 1

            Our dashboard forms can be quite complex (they set up servers), so we break them down into smaller areas, so we have accordions with tab navigators inside some of the accordions.

            Iterating through children could be quite time consuming for each element, I wanted a simple quick look up.
            So I extending form element classes to include a simple getter and setter for a new boolean example below is just text input but you get the idea
            package example {
            import mx.controls.TextInput;

            public class TextInputActive extends TextInput {
            //is this text input visible to the user?
            private var _activeOnScreen:Boolean = true;


            public function TextInputActive() {
            super();
            }


            //setter for user visibality
            public function set activeOnScreen(value:Boolean) : void {
            _activeOnScreen = value;
            }
            //getter for user visibality
            public function get activeOnScreen() : Boolean {
            return _activeOnScreen;
            }


            }
            }
            My accordion id="site_form_data"
            Each of my canvas as an id, my first accordion canvas  id="mainInfoPanel"
            In my new text input I simple set a boolean is that is selected or not, accordion.selectedChild returns the select canvas, there for Canvas(accordion.selectedChild).id will return the current selected canvas id
            <ioi:TextInputActive id="siteURL" width="{defaultFeildWidth}" activeOnScreen="{(Canvas(site_form_data.selectedChild).id == 'mainInfoPanel')}" change="chkForm(event);" focusOut="fixSiteURL()" text="{_siteInfo.siteURL}"/>

            Now in my validator class I can simple look at the activeOnScreen as I iterate through the validator error array. I simply did a poor mans try to wrap the new property that way I can re-use my class with standard form elements that don't have the property.
            try {
            if (!err.currentTarget.source.activeOnScreen) continue;
            } catch (e:Error) {}