I have a s:TileGroup as follows:
<s:TileGroup id="myTileGroup"
clipAndEnableScrolling="true" focusEnabled="true"
horizontalGap="4"
paddingBottom="12" paddingLeft="12" paddingRight="2" paddingTop="12"
requestedColumnCount="3" requestedRowCount="3" verticalGap="4"
horizontalScrollPosition="12"
/>
...resulting in a 3x3 grid TileGroup.
As items are added to the TileGroup it "overflows" its' bounds, items are displayed below, and when scrolled above, the 3x3 grid.
Is there a way to "mask" or otherwise hide these items?
I looking at the properties of TileGroup, I've tried to emplement the "verticalScrollPosition" and "bottom" properties - these don't do it.
Setting the "height" property effectively creates a bottom limit for the group, but when scrolled items are still displayed above the "padding" area.
Ideas anyone?
thanks,
Mark
If you want to clip your content, you need to set explicit width/height (or use absolutes; left, right, top, bottom), or wrap it around a Scroller component.
... well, I ended up resizing my surrounding borderContainer and it now effectively limits the TileGroup's items...
Related
Flex scroll bars are giving me a really hard time. I want to control exactly which boxes they appear for but after hours of trying random things, my best solution (see below) seems a bit kludgy and unreliable. If I force a scroll bar to appear, (*ScrollPolicy="on") the scroll bar appears disabled, because it spans the entire size of the box, even though that is out of bounds of the viewable area.
I have this one box at the top of the page that runs off the side of that screen, and that's fine--let it run off the side and don't give it a scroll bar. But I have this other box which runs off the side, which is also acceptable, but I want scroll bars to serve that region and only that region and I want those scroll bars to appear in the viewable area. That is, I don't want to have to move the horizontal scroll bar so that it will allow me to see the vertical scroll bar.
Now the best I could do is as follows: I found the parent of the main box you see in my diagram (which is actually the great-great-grandparent) that never gets bigger than the viewable area, which is an mx:Canvas. Then I force the size of the parent of the box containing my stuff down to the size of the parent mx:Canvas, which then causes the scroll bars to appear where I want. So, it's something like:
<mx:Canvas id="main_canvas" width="100%" height="100%">
a lot of other tags that are parents
<mx:Box width="100%" height="100%" maxHeight="{main_canvas.height}" maxWidth="{main_canvas.width}"> <!--box containing the box that should show scroll bars-->
<mx:Box width="100%" height="100%"> <!--box that should show scroll bars-->
the rest of the tags
The above tags are an abstraction, btw. Due to the enormous number of experiments I've conducted trying to get the scroll bars where I want them, there's a very tall hierarchy of mx:*Boxes, mx:Canvases and even an mx:VDividedBox.
It seems to work, but it's probably needlessly complicated, and I have a feeling that customers will find a way to make it fail.
I'm using the 3.5 SDK.
In the end, the best I could do was wrap whatever I wanted to have scrollbars in an mx:Canvas and then set its maxWidth to a parent component's width that is limited to the width I want, and finally put an mx:Box inside the mx:Canvas. At least, that seemed to work in most cases when controls are vertically stacked and I want a horizontal scrollbar to span the whole width of that mx:Canvas. Usually this was enough and somehow the vertical scrollbar issue sorted itself out, but on a couple of occassions, I had to resort to Flex: getting the height of a collection of controls to calculate the maxHeight of some of the child aggregate controls, which I find a bit kludgy.
I have a TextInput in a container. I need the horizontal scrolling capabilities of the container so that when the textInput is to big it allows me to scroll to see the text on the left and right. The scrollbar track and thumb were set to null so I can see the text.
trackSkin: ClassReference(null);
thumbUpSkin: ClassReference(null);
thumbOverSkin: ClassReference(null);
thumbDownSkin: ClassReference(null);
thumbSkin: ClassReference(null);
Now I want to listen to an event or watch a property that changes when the horizontal scrollbar activates. Then I would like to set a padding on the container or left and right property on the text input so that the left and right arrows do not get in the way of the user to see the first and last characters.
Thanks
Before adding listeners and accessing the HScrollBar of the Scroller, you may find this setting/variable of some use: measuredSizeIncludesScrollBars
From the API: (Please forgive the terrible formatting)
If true, the Scroller's measured size includes the space required for the visible scroll bars, otherwise the Scroller's measured size depends only on its viewport.
Components like TextArea, which "reflow" their contents to fit the available width or height may use this property to stabilize their measured size. By default a TextArea's is defined by its widthInChars and heightInChars properties and in many applications it's preferable for the measured size to remain constant, event when scroll bars are displayed by the TextArea skin's Scroller.
In components where the content does not reflow, like a typical List's items, the default behavior is preferable because it makes it less likely that the component's content will be obscured by a scroll bar.
In the event this doesn't work, I would probably add an event listener attached to the lifecycle of the Scroller. During that event handling, I would check to see if the Scrollbar was null or not. If it wasn't, I would store it off to the side, but not before adding a listener to its "show" and "hide" event. That way, you can kick off whatever you need to whenever the scrollbar changes its state.
I'm using as container for my LinkButtons.
I would like to know
1) how can I remove the space between the items in my Tile container.
2) how can I set dynamic width for my items (at the moment they all have the same width regardless the width of the included component)
3) how can I avoid to display scrollbars if the items are not included in the container
Thanks
1) Space between items is set by horizontalGap and verticalGap, so to remove them completely use
horizontalGap="0" verticalGap="0"
Keep in mind that you need the size of all objects to be the same for it to work properly.
2) What do you mean exactly?
If you only need to change the width of the objects, what's wrong with doing btnId1.width = 200;?
3) To cancel the scroll bars use
horizontalScrollPolicy="off" verticalScrollPolicy="off"
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.