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"
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've read a lot of articles saying that in order to use the old "Layout='Absolute'" in Flex 4, I simply have to use
<s:layout>
<s:BasicLayout/>
</s:layout>
But it just doesn't work the same way. On Flex 3, when you set your application layout as absolute, the X and Y properties automatically lose their utility since every component of your layout will be determined automatically by default in the top left of your screen. It works similarly as the mobile layouts: You either use Canvas to set X and Y (most used by mobile game developers) or you let the device to place everything so it will avoid screen size problems and such.
Is it still possible on Flex 4? How harder/complex is it?
Thanks for your attention.
Edit -------
So it seem a little bit confuse what I want. Back to Flex e, I used to do this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onInit()" width="100%" height="100%"
I started my application with this tag and down there I would have a box container with 100% width and 100% height.
So, inside this box container I would have HBox and VBox to align my components (now VGroup and HGroup). The thing is that in Flex 3 I could place 1 VBox, for instance, and 3 HBox inside it that each HBox would assume a position automatically one under the other, that is with X and Y properties blank. With Flex 4, when I place 1 VGroup and 3 HGroup inside without setting any X and Y propert, they'll just fill up one above the other, like if I had set X,Y = 0 to all of them. They don't assume position one under the other like it used to.
Please see the Flex 3 to Flex 4 equivalent layouts in Spark Layouts with Flex 4:
Working with the Spark Layouts
Because layouts and containers are separated in Spark, there are a few
notable changes that you need to take into account when working with
the layouts. Take a moment to examine the following table of MX layout
container classes and their corresponding combination of Spark layout
and container:
MX Containers Corresponding combination of Spark Layout and Container
Canvas Group with BasicLayout (no advanced constraints)
HBox Group with HorizontalLayout (or the HGroup class)
VBox Group with VerticalLayout (or the VGroup class)
Tile Group with TileLayout
List List with VerticalLayout
TileList List with TileLayout
In your case, it sounds like you want a dynamic layout rather than an absolute one because you say you do not want to supply X and Y coordinates for your controls.
You then have two options:
Use the BasicLayout and specify the top, left, right, bottom properties for your controls
Use HorizontalLayout, VerticalLayout, or one of the other dynamic layouts.
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...
I'm using a custom itemrenderer to display a list of photos and need to know how to control the width. At the moment it does this:
(source: tdwright.co.uk)
Which, as I'm sure you'll agree, is eye-bleedingly ugly.
The list is created like this:
<mx:Panel width="100%" height="100%" layout="absolute" title="Photos">
<mx:List x="0" y="0" width="100%" height="100%" id="photoList" dataProvider="{photos}" itemRenderer="thumbnails" rowHeight="100"/>
</mx:Panel>
And the itemrenderer component looks like this:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="{data.src}" id="image" scaleContent="true" toolTip="{data.caption}" height="100%" horizontalAlign="center"/>
</mx:VBox>
I've tried placing width="100%" in a whole bunch of places, but without success. If anyone knows how I can control this I'd be very grateful.
If you set these properties inside the itemrenderer verticalScrollPolicy="off" horizontalScrollPolicy="off" the bars are disappeared
I don't know why they choose for the terrible "off" instead of False
A couple of observations here, based on a miasma of similar painful experiences. (Caveat: I have not built a test app to confirm everything here for this specific case)
Assuming that what you want is for the list to size its width based on the size of the itemRenderer elements it contains, those itemRenderer elements need to provide width information. Using a VBox in this fashion with scroll bars permitted means the VBox will attempt to "arbitrate" between the size of the content (Image) and the size of the parent. So yes, first thing to do is turn off the scrollbars on the VBox, assuming you can't just get rid of the VBox altogether. (I'm guessing you want the VBox so that you can put a title or something under the image as a next step)
The List as you have it specified is sized to 100% of its parent, the Panel, which is itself sized to 100% of its parent. Rather than size these elements "top down", consider letting their width be unspecified so that Flex will compute their required width bottom-up. Use maxWidth on the List or the Panel constrain their size if you need to for laying them out relative to their peers.
Another important thing to know about is the "minHeight=0" trick. Turns out, the sizing algorithm used by Flex behaves quite differently when minHeight or minWidth is set to something other than the default NaN. Setting it to 0 is extremely useful in many of these cases. Try minWidth=0 on the VBox and/or the List.
In addition to turning off the scrolling policy, set left and right to 0. That should anchor the width to the width of the parent.
One of my components looks like this:
<mx:Canvas id="grid" width="100%" height="100%"></mx:Canvas>
On creationComplete, I load some spirte that I want to scale and position based on the dimensions of the canvas to create a custom grid layout, but when I access the dimensions of 'grid' I get 0 and 0. Is there any way to get the dimensions without assigning absolute values?
I can't check this at the moment but can you access the measuredHeight and measuredWidth?
My understanding is that unless the Canvas contains one or more DisplayObject children, it will always report its width and height properties as 0, regardless of the percentage sizings you may have applied to it.
You could always add an empty dummy DisplayObject to the Canvas, but that wouldn't be very elegant. Depending on how you've planned to implement your custom grid, it's possible you'll have to rethink the design...
Is it possibly created but not yet displayed (e.g. visible)? Since final size and shape is derived, it doesn't happen until the thing actually needs to be drawn. Width and height are documented to be the values actually in use - there are even events for when they change.
Worst case, try trapping it out in the canvas Resize event.
have you tried binding the width and height of the Canvas to its parent? If it is 100%, than it will have the same size as its parent and you could either bind or size your Sprite (UIComponent) based on the parent container of the Canvas.