Place an 'addChild' button into grid space of TabNavigator - actionscript-3

This question is similar to the post:
"Move Button into grid space of a TabNavigator’s tabs in Flex Builder."
Move Button into grid space of a TabNavigator's tabs in Flex Builder
but with a slight difference. I wish to have a button that adds a child (tab) to the TabNavigator in the grid space (simpler with TabBar, but see below), but will not block tabs as they extend towards the button. This functionality can be seen in every web browser that uses tabs.
In addition I would like to have a scroll button appear if too many tabs are opened, and the ability to close tabs. I have tried using Doug McCune's SuperTabNavigator, which offers most of these features, but it does not offer the addChild button that I am looking for.
Is there a way to add this 'addChild' button to the grid space, or to add the features from SuperTabNavigator to TabBar?

This class will do the trick except for scrolling when there are too many tabs.
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500" height="400">
<mx:HBox width="100%">
<mx:TabBar dataProvider="{viewstack}"/>
<mx:Button label="+" width="35" click="addTab()"/>
</mx:HBox>
<mx:ViewStack height="100%" width="100%" id="viewstack"/>
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.containers.Panel;
//add a new container
private function addTab():void
{
var l:Label = new Label();
l.text = "Panel " + (viewstack.numChildren + 1);
var p:Panel = new Panel();
p.label = l.text;
p.addChild(l);
viewstack.addChild(p);
viewstack.selectedChild = p;
}
]]>
</mx:Script>
</mx:VBox>

Related

add vertical scrollbar to flex tooltip

I want to add scrollbar to the flex tootip. So i created custom tool tip. Below is the code snippet. Problem i am facing is that as soon as i move the mouse on the custom component tooltip, the custom component tooltip disppear. i have alse set the ToolTipManager.hideDelay = Infinity. I want to use the scrollbar of the cutom tool tip.
I do not want the custom tool top to hide till i move the mouse outside the custom tool tip component.Currently it hide itself once i move the mouse outside the label. How to control the destroy of tool tip.
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%"
height="100%"
implements="mx.core.IToolTip">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private var _bodyText:String = "";
[Bindable]
public function get bodyText():String
{
return _bodyText;
}
public function set bodyText(value:String):void
{
_bodyText = value;
text = value;
}
private var _text:String;
public function get text():String
{
return _text;
}
public function set text(value:String):void
{
_text = value;
}
]]>
</fx:Script>
<s:Scroller width="100%" height="200">
<s:RichEditableText text="{bodyText}" width="100%" height="100%" color="red"/>
</s:Scroller>
</s:Group>
and i add this cutom tooltip on mx:label component on toolTipCreate event.
protected function label1_toolTipCreateHandler(event:ToolTipEvent):void
{
ScrollableToolTip ptt = new ScrollableToolTip();
ptt.bodyText = data.notes;
ptt.height = 300;
ptt.width = 100;
event.toolTip = ptt;
}
Any pointers..
Thanks
Raj
Instead of relying on the flex tooltip, you may want to add a popup on mouse roll over and deal with it that way, ofcoz you have to deal with the positioning of the popup later on, but I think this will give you a lot of flexibility later on.

Effects for TextArea letters (Flex)

How do I add effects (shadow, glow) to all letters in the component TextArea (Spark 4)?
I see it is an old question, but since i fell in the same problem today i'm posting my solution.
You can access to the RichEditableText component of the TextArea using textDisplay as stated here:
The RichEditableText can be accessed as textDisplay and the Scroller
as scroller
RichEditableText is extended from UIComponent, so filters, which can be applied to UIComponents ("You can apply filters to any visual component that is derived from UIComponent"), can be applied to it.
In order to apply, for example, a DropShadowFilter to all letters in the component myTextArea:TextArea i have used the following lines of code:
var richTextComponent:UIComponent = myTextArea.textDisplay as UIComponent;
var shadow:spark.filters.DropShadowFilter = new spark.filters.DropShadowFilter;
richTextComponent.filters = [shadow];
Hope this helps someone :-)
I don't think you can do it using Flex (or at least I never have). You would need to do it using AS3
<s:Label id="label1" text="Shadow Me" />
<fx:Script>
<![CDATA[
import flash.filters.*;
private function creationComplete():void{
var dropshadow:DropShadowFilter = new DropShadowFilter( 3,90,0x000000,.5,4,4,3,3 );
this.label1.filters = [ dropshadow ];
}
]]>
</fx:Script>
contentBackgroundAlpha="0" borderVisible="false"
By using Filter class we can apply shadow glow effect for a s:TextArea component. The sample code is:
<s:TextArea contentBackgroundAlpha="0" borderAlpha="0">
<s:filters>
<s:DropShadowFilter distance="5" angle="45" color="#666666"/>
</s:filters>
<s:content>
Testing text area content
</s:content>
</s:TextArea>
Refer the link http://www.roseindia.net/tutorial/flex/flex4/components/filters.html for applying more filters (DropShadowFilter, GlowFilter, BlurFilter and BevelFilter).
Just add a skin to your TextArea component then add a shadow to the RichEditableText inside the skin.
<fx:Declarations>
<s:DropShadowFilter id="shadow2"/>
</fx:Declarations>
<s:RichEditableText id="textDisplay" heightInLines="10" widthInChars="15" filters="{[shadow2]}"/>
It worked for me, you have just to adjust the shadow to have a nice look.

Constraining number of children in a ViewStack issue

I have the following code to create a ViewStack which is used as a dataprovider for a TabBar:
<s:TabBar id="objectTab" dataProvider="{vs_objects}"/>
<mx:ViewStack id="vs_objects" width="100%" />
I want to constrain the number of children the ViewStack to avvoid the tabs going out of the screen when the user opens many tabs without closing any. I attempt to do this by removing the oldest element in the ViewStack when the user opens a new tab and the size of the ViewStack is above 9.
private function openTab(object:Object): void {
//Create a new NavigatorContent(form) and add it to the ViewStack
........
vs_objects.addChild(form);
if(vs_objects.numChildren > 9) {
vs_objects.removeChildAt(0);
}
//vs_objects.selectedChild = form;
vs_objects.selectedIndex = (vs_Tiltaksbanken.numChildren -1);
}
The image below illustrates my problem, where the dark grey color illustrates the selected Tab. There should only be one selected tab, which works perfectly fine with both the child selection approaches above, when i don't remove a child before selecting a new. When i remove a child and then open a new Tab, the new Tab does not get selected properly, it only gets "painted" in the selected color. In This case Tab 40 is still shown when i open Tab 41 (exceeding 9 tabs). The result of this issue is that Tab 41 is not rendered completely.
Does anyone know how i can fix this problem, or have a different approach for constraining the number of Tab's/ViewStack-children?
UPDATE:
The problem was my AS3 code inside the childrens NavigatorContent's that caused the application to behave this way. The solution was using the callLater method:
The solution to my problem was using the callLater method as shown below with Adnan Doric's code example:
protected function openTab():void
{
var form:Container = new Container();
form.name = "Tab " + counter++;
vs_objects.addChild(form);
vs_objects.selectedChild = form;
callLater(removeTab);
}
private function removeTab(): void {
if (vs_objects.numElements > 10)
vs_objects.removeElementAt(0);
}
Try this, even though I'm not sure it is the correct solution, maybe it's better to implement some kind of scrolling.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.core.Container;
private var counter:int = 1;
protected function openTab():void
{
var form:Container = new Container();
form.name = "Tab " + counter++;
vs_objects.addChild(form);
if (vs_objects.numElements > 10)
vs_objects.removeElementAt(0);
vs_objects.selectedChild = form;
}
]]>
</fx:Script>
<s:TabBar id="objectTab" top="32" labelField="name" dataProvider="{vs_objects}"/>
<mx:ViewStack id="vs_objects" width="100%" />
<s:Button label="addTab" click="openTab()" />
</s:Application>
Hope that helps :)

Flex Element wrongly keeps properties from previous parent - how do I reset it?

I want to put an element into another component (in this case a print template), print it, and then return it to its place. The problem is that when I return it, it has the properties of the print template! Here is a simplified example. When you click print, the label is removed and then returned but when returned it is affected by the padding of the print template! Why? How can I somehow refresh it to its proper properties? I tried all the invalidate... methods and parentChanged() but nothing worked.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="200">
<fx:Script>
<![CDATA[
import spark.components.VGroup;
protected function button1_clickHandler(event:MouseEvent):void {
var printTemplate:VGroup = new VGroup();
printTemplate.paddingTop = 50;
printTemplate.paddingLeft = 30;
printTemplate.addElement(label);
addElement(printTemplate);
validateNow();
// print
removeElement(printTemplate);
addElement(label);
}
]]>
</fx:Script>
<s:Button label="Print" right="0" click="button1_clickHandler(event)"/>
<s:Label id="label" text="This is the label text, it should appear at the top-left."/>
</s:Application>
I would recommend you to have a separate print view-component which has a separate label which you only need to pass the right data.
OK I hacked up a solution. Put this in before adding the label back to its proper place:
var vg:VGroup = new VGroup();
vg.addElement(label);
addElement(vg);
validateNow();
removeElement(vg);
Then it gets the padding from "vg", which has no padding set. Yay. Another little hack to circumnavigate a Flex bug.

Flex 4 spark Panel has an ugly gray top part

I have a Flex 4 spark Panel I'm popping up through the PopUpManager, but it has a gray portion at the top I can't get rid of. What is that and how can I remove it?
UPDATE: An example Panel is below. I simply call PopUpManager.addPopUp(new TestPanel(), background, true); on it and receive that solid gray bar above the button.
<s:Panel xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
dropShadowVisible="false"
backgroundAlpha="0"
controlBarVisible="false"
borderVisible="false">
<s:VGroup>
<s:Button label="A button" width="150" height="55"/>
</s:VGroup>
</s:Panel>
So, this is how I did it. I made a custom skin: HeaderlessPanelSkin.as
public class HeaderlessPanelSkin extends PanelSkin {
public function HeaderlessPanelSkin() {
super();
topGroup.includeInLayout = false;
}
}
Then, in the panel, I just reference the new skin: skinClass="HeaderlessPanelSkin"
That should do it :)
Create new skin, and in the panel declaration use it... like so
File->New MXML Skin, Host Component is panel.
Edit the Skin properties to change it how you like, in this case the gradient colors on the header.
Sounds like the Panel TitleBar
Create a custom skin and style the title bar how you want it to appear.