Help box similar to Adobe Live Docs

Question

Is there any visual component in flex as used in Adobe Live Docs ( Yellow box that can be expanded or collapsed) at the bottom.

I have uploaded the screenshot of that box too: http://tinypic.com/view.php?pic=2mxfvyd&s=3

I am looking for the same type of visual element/component in horizontal.

Answer 1

The ASDocs are just HTML and there is not an explicit component like that in Flex. I assume the 'window' on the ASDocs is some form of AJAX but haven't reviewed code.

But, it should be easy to create one.

<mx:VBox>
 <mx:TextInput id="input" visible="true" />
 <mx:Button id="expandCollapseButton" visible="true" label=">" click="onClick()" />
</mx:VBox>

In your onClick method do something like this:

public function onClick():void{
 if(this.expandCollapseButton.label == '>'){
  this.input.visible=false;
  this.input.includeInLayout=false;
  this.expandCollapseButton.label = "<";
 } else {
  this.input.visible=true;
  this.input.includeInLayout=true;
  this.expandCollapseButton.label = ">";
 }
}

States, as mentioned in a comment to your question may be another way to implement this. I'm sure there are others.

I would think hard about what you're trying to accomplish. I find the yellow box non-intuitive and very annoying. I hav to click a "play" button to hide it. "Play" usually means goto and for the longest time I would not click it because I didn't want to leave the page.

Disclaimer: Code written in browser