I am new to flex development.
In my proj, I have created a panel using this
<s:Panel x="46" y="193" width="75%" height="75%" dropShadowVisible="false">
what happens here is that, the part of the panel goes out of the browser view and I need to include scrollbars so that I can scroll to the right end and bottom end of the panel itself.
I would like to know how I can add scrollbars to the s:panel.
wrap it with a scroller! ;)
<s:Scroller>
...your content to scroll...
</s:Scroller>
In order to use your own scrollbars you need three things:
1. Your main (parent) container should implement IViewport (any subclasses of s:Group would do)
2. Set container's property 'clipAndEnableScrolling' to 'true'.
3. You assign this main container as 'viewport' property of your scrollbar.
HTH,
FTQuest
Related
I have a spark group with layout set to horizontal. The group contains a bunch of buttons and custom controls (it's kind of like a toolbar).
Every now and then I need to conditionally hide a couple of the elements in the toolbar.
I can set the visibile attribute to false and it hides it, but the layout doesn't change, it leave a big blank gap.
I would like the horizontal layout group to re-arrange the items so that it doesn't leave a gap where the invisible items are.
Is it possible?
Is there an attribute I can use on my element to tell the layout to ignore them and redraw itself?
You will want to set includeInLayout to false or bind it to the visible property. This will make sure that when it is invisible it is not accounted for in the layout.
<s:Label text="Test"
id="myLabel"
includeInLayout="{myLabel.visible}"
visible="false" />
I have a DataGrid with an drop-in Button itemRenderer:
<mx:DataGridColumn headerText="" width="135"
itemRenderer="ActionButtonItemRenderer" />
However, the button extends all the way both the right and left edge of the DataGridColumn. I've tried messing with the width properties and paddingLeft and paddingRight styles of both the DataGridColumn and the itemRenderer, but nothing seems to work.
NOTE: I do not want to use a Container or UIComponent with the Button as a child as the itemRenderer - too much code.
Is there a simple way to add left and right padding?
The button should only be as wide as you specified when you created it as a component, unless you created the component with 100% as the width. So, try a different percent width, a fixed pixel value, or (as you said you don't want to do) using a canvas based item renderer component with a button positioned inside of it.
Well, I don't know about 'simple'... but it doesn't require a new class.
public var itemRenderer:ClassFactory ;
[...]
itemRenderer = new ClassFactory(ActionButtonItemRenderer);
itemRenderer.properties = "{width:135}";
[...]
I see that Flex3 has a class called ApplicationControlBar dedicated to "holding components that provide global navigation and application commands." (quoted from the langref). The question is: is there an advantage of using this class instead of just adding a plain HBox with a greyish background, or is it just a matter of taste?
In my current code, I use the following box:
<mx:HBox verticalAlign="middle" horizontalGap="5" backgroundColor="0xCCCCCC"
width="100%" paddingTop="5" paddingRight="5" paddingBottom="5"
paddingLeft="5">
Granted, this requires explicitly specifying a few attributes, but other than that?
ApplicationControlBar is essentially an HBox with both scroll policies set to false and a transparent background. The only other feature it offers is the ability to be docked. From the Livedocs:
Docked mode: The bar is always at the top of the application's drawing area and becomes part of the application chrome. Any application-level scroll bars don't apply to the component, so that it always remains at the top of the visible area, and the bar expands to fill the width of the application. To create a docked bar, set the value of the dock property to true.
If you look at the source for ApplicationControlBar and Application.dockControlBar you'll see that when docked=true the bar is added to rawChildren instead of children which is what allows it to "ignore" scollbars and such.
In addition to the previous answer I can add, that it's possible to set the gradient background to the ApplicationControlBar, which is not allowed to the HBox, if you're not using the special border type, of course :)
But even with HBox you can still draw your own gradient background without setting the border style.
Here's my problem - I have some code like this:
<mx:Canvas width="300" height="300">
<mx:Button x="800" />
</mx:Canvas>
So the problem is that the Button inside the canvas has an x property way in excess of the Canvas's width - since it's a child of the Canvas, the Canvas masks it and creates some scrollbars for me to scroll over to the button.
What I'd like is to display the button - 800 pixels to the left of the Canvas without the scrollbars while still leaving the button as a child of the Canvas. How do I do that?
I figured it out - apparently the Container has a property called clipContent - here's the description from Adobe:
Whether to apply a clip mask if the positions and/or sizes of this container's children extend outside the borders of this container. If false, the children of this container remain visible when they are moved or sized outside the borders of this container. If true, the children of this container are clipped.
If clipContent is false, then scrolling is disabled for this container and scrollbars will not appear. If clipContent is true, then scrollbars will usually appear when the container's children extend outside the border of the container. For additional control over the appearance of scrollbars, see horizontalScrollPolicy and verticalScrollPolicy.
The default value is true.
So basically - to show the button outside of the bounds of the container I need to do the following:
<mx:Canvas width="300" height="300" clipContent="false" >
<mx:Button x="800" />
</mx:Canvas>
That was easier than I thought it was going to be. :)
Here's the official doc...
You should be able to use the includeInLayout property also, which would allow you to apply it to each child component independently.
I have a canvas in Flex that shall be able only to be scrolled in vertical direction, so I set the attributes of the canvas as follows:
verticalScrollPolicy="auto" horizontalScrollPolicy="off"
The problem here is that the vertical scrollbar covers the content when it appears - altough there is enough horizontal room left. I would have expected that the content size would have been automatically adjusted.
When setting the vertical scroll policy to "on", no content is covered also.
In case I set both scroll policies to 'auto' I also get a horizontal scroll bar just for scrolling to the area that is covered by the vertical scroll bar.
Is there a workaround how I can relayout the content of the canvas when the vertical scroll bar is shown so that it does not cover any content?
It's a bug. See Flex verticalScrollPolicy bug for a workaround.
Just a side note regarding this issue: it's actually not a bug, but known (and intended?) behaviour:
"Flex considers scroll bars in its sizing calculations only if you
explicitly set the scroll policy to
ScrollPolicy.ON. So, if you use an
auto scroll policy (the default), the
scroll bar overlaps the buttons. To
prevent this behavior, you can set the
height property for the HBox container
or allow the HBox container to resize
by setting a percentage-based width.
Remember that changing the height of
the HBox container causes other
components in your application to move
and resize according to their own
sizing rules."
-- From Sizing Components in the Flex 3 help, under "Using Scroll bars"
I had to find this workaround Flex ScrollPolicy.AUTO Not Good Enough which solved this issue, because Flex verticalScrollPolicy bug workaround did not work for me.
on vbox or another component based on Container, i solved that problem like that.
Wrong:
<mx:VBox width="100%" height="100%"
verticalScrollPolicy="auto" horizontalScrollPolicy="off">
<mx:Repeater dataProvider="{hede}">
<custom:RenderItem ........../>
</mx:Repeater>
</mx:VBox>
there is no scroll bar
Working version:
<mx:VBox width="100%" height="100%"
**minHeight="1"** horizontalScrollPolicy="off">
<mx:Repeater dataProvider="{hede}">
<custom:RenderItem ........../>
</mx:Repeater>
</mx:VBox>
I'm, too. I usually have some problems with the verticalScrollBar in Flex, so I prefer to use the browser's scrollbar for scrolling the complete application. You can found a workaround here: How to Resize the Flex Stage and Use the Browser Scrollbar.
The code I use:
In Flex:
ExternalInterface.call("setInitialFlashHeight", this.height);
In my HTML (JavaScript):
function setInitialFlashHeight(newHeight) {
document.getElementById('my_flash').style.height = newHeight + 'px';
}
And if you want to add (or remove) some height:
function addFlashHeight(height) {
var divHeight;
var obj = document.getElementById('my_flash');
if (obj.offsetHeight) {
divHeight = obj.offsetHeight;
} else if (obj.style.pixelHeight){
divHeight = obj.style.pixelHeight;
}
var newHeight = divHeight + height;
document.getElementById('my_flash').style.height = newHeight + 'px';
}
To remove, you use "-" instead of "+".