I am using mx:Tree (in Flex 4), and assigned a customised MXTreeItemRenderer for every items. As the TreeItemRenderer contains a list with tileLayout, which means the height of every row is variable. So I have to set the tree's "variableRowHeight to true. When I was testing the tree, everything went well. But when I was using the vertical scroller, I met some problems:
The scroll bar did not move to the position I want. When I was scrolling the content, the scroll bar sometimes scrolled to a unwanted position (e.g. the head of the tree). When there are more rows, the problem is more obvious.
When I was scrolling the tree, the images were flicking all the time. That means, the images are reloading I guess. any help?
Is there anyone who can help me solve the problems? many thx :)
One way that I found helpful was to just wrap the tree in a canvas. I was having the same problem with the tree's scrolling because it would do all sorts of funky things, but when you allow the canvas to handle the scrolling instead of the tree everything works out. I chose this over replacing it with the spark tree just because it was a nice quick fix.
<mx:Canvas height="100%" width="100%" verticalScrollPolicy="on">
<mx:Tree width="100%" height="100%"
click="click_handler(event);"
verticalScrollPolicy="off"
itemRenderer="com.fti.view.itemRenderers.defaultRenderer"
itemClose="{treeSample.height = treeSample.measureHeightOfItems();}"
itemOpen="{treeSample.height = treeSample.measureHeightOfItems();}"
id="treeSample"
variableRowHeight="true"/>
</mx:Canvas>
Be sure and include those itemClose and itemOpen properties so the canvas is able to accurately set the height and scroll properly. One warning is that if you're working with larger trees, this can be a bit heavy and impact performance.
use SparkTree
http://kachurovskiy.com/2010/spark-tree/
there is too much bugs with the current tree.
( whating for Flex 5 to clean out thoose things finally ) :)
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.
In general, I haven't yet found a definitive way to get Flex and Spark containers to size themselves relative to their children. I have searched for good documentation for this concept many times but have yet to find anything that sufficiently explains the concepts.
A simple example of something I often want to do is to draw a border uniformly around a set of controls.
The goal here would be to have all UI elements to size themselves automatically.
<s:BorderContainer>
<s:HGroup>
<s:Label text="l1" />
<s:Label text="very long label 2" />
</s:HGroup>
</s:BorderContainer>
I would want the Labels to size themselves based on the text property, and the HGroup should be as big as needed to contain labels and BorderContainer should only just contain that HGroup.
Now this simple example may or may not work as desired, I haven't yet figured out how to determine what the output will look like without trying the code. Does anyone know of a good way to understand this process so I can know deterministically how things will look?
Now the more complicated example that I am working on now.
I have a class that extends the BorderContainer. Within the class I create an HGroup with 5 Labels as children of the HGroup. Then the HGroup is added as a child of the ExtendedBorderContainer (using addElement() method).
Then the new class is used in the application as:
<mx:ViewStack>
<s:NavigatorContent>
<my:ExtendedBorderContainer />
</s:NavigatorContent>
<!-- more NavigatorContents here -->
</mx:ViewStack>
I have tried various [max|min]height/width combinations and I can not get the desired layout, which is very tight borders around elements without extraneous space starting from the deepest Label children all the way up to the NavigatorContent.
Look here:
http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_3.html
It is not clear what your problem is.
Regarding first part of your question: what do you mean saying "may or may not work as desired". This example should work and have layout that you described. Label sizes itself based on text property and so on. What behaviour do you get?
Second part:
If you are hinting that your layout is ok in general but have extra spacing between items then look at the padding and gap properties of containers. Some containers have non zero default padding and gap and you have to override them manualy.
First off here is the portion of .mxml that I am working with.
<s:Scroller id="scroller">
<s:VGroup id="vGrp" >
<mx:Form id="form"/>
</s:VGroup>
</s:Scroller>
I need the form to auto scroll based on the focused FormItem child that has focus. I have looked at this and tried this method. The issue that I am having is that my form is dynamically populated with FormItems. The example that I liked looks to only take into account that focusing will only happen to children of the VGroup. For me this is not the case and implementing the functions laid out in the linked website did not work for me (even after I did try to modify it to my particular case I was unable to get the scrolling to work properly). Any help would be much appreciated.
I'm implementing an image gallery which presents assets as equally sized boxes that are forming a grid. I thought that I could easily achieve that by using the spark.layouts.TileLayout but unfortunately I have some additional requirements that I'm unable to implement with it.
The general principal should to be to present as many boxes as possible within given space. The entire layout of the application is liquid and depends on the user's screen resolution.
I've started from a basic DataGroup with a TileLayout:
<s:DataGroup id="dgpImages" width="100%" height="100%" top="12" dataProvider="{ list }"
minHeight="0" minWidth="0" clipAndEnableScrolling="true" itemRenderer="LibraryImageRenderer">
<s:layout>
<s:TileLayout orientation="rows" clipAndEnableScrolling="true"
requestedColumnCount="-1" requestedRowCount="-1"
verticalGap="12" horizontalGap="12" useVirtualLayout="true" />
</s:layout>
</s:DataGroup>
I don't know the RequestedColumnCount or RequestedRowCount in advance as they depend on the available space, so the above code layouts all elements from left-to-right and then from top-to-bottom - which is as close as you can get from what I really want to achieve.
The problem
This list of boxes should be cable of rendering fake paging. In reality it means that if the last visible row does not entirely fit the available space it should be moved to the next page.
To give you an example let's imagine that we have a list of 10 images. Each one is 10x10 px but my screen resolution only allows me to fit a grid 35x35 px. This means that one page is only capable of presenting 9 images in form of a 3x3 grid (as 5 px is not enough to present a full image). The 10th image should be then transferred to the second page.
The question
This is obviously not happening automatically with the code that I've pasted above as the TileLayout allows for displaying partially visible rows (in a form of a vertically scrolled list). I was wondering how I could achieve the behavior described above.
If the above description does not sound logical please let me know so that I can adapt it (or include more details).
Any help on this will be highly appreciated!
You need to create a custom layout for this kind of functionality. Good news is I found a tutorial doing almost the exact thing you want to do for ya here:
http://www.adobe.com/devnet/flex/articles/spark_layouts.html
So implement that first. in the updateDisplayList() method, look for this line :
if (x + elementWidth > containerWidth)
when checking for bumping it to the next line, youll check the total height versus the current row height and stop adding elements if it exceeds the boundries. (just break out of the for loop)
Then, all you have to do is page the dataProvider for the group based on the current page.
Say I have this AdvancedDataGrid:
<mx:AdvancedDataGrid id="grid"
height="384"
width="100%"
styleName="aStyleName"
displayItemsExpanded="false"
groupItemRenderer="SomeRenderer"
draggableColumns="false"
defaultLeafIcon="{null}"
folderClosedIcon="{null}"
folderOpenIcon="{null}">
<mx:columns>
<!-- a bunch of AdvancedDatagridColumns -->
</mx:columns>
</mx:AdvancedDataGrid>
which works like a tree, i.e., certain nodes are "collections" that can be collapsed and expanded.
The style for this grid has an alternating-item-color array specified. The array length is 2, meaning rows alternate between light and dark.
The problem is, even with a custom groupItemRenderer, the alternating rows very obnoxiously alternate :) no matter whether the row is an expandable node or a data row. The row immediately beneath any expandable row right now could be either color, and the expandable row gets the color too. My preference is for the light-dark alternation to skip the expandable rows and restart light-dark sequence after each row, but skip the expandable row entirely.
I made the groupItemRenderer take up however many columns are displayed and gave it a gray background, but the row color still displays behind the item renderer, even though the height of the render is set to 100%.
If I haven't lost everybody at this point, does anyone have any ideas about how to do this? Do I have to extend AdvancedDataGrid and override the drawRowBackgrounds method, or is there a simpler solution?
My solution, unsatisfactory as it may be, is to use no alternating rows colors. I would like to have kept this open, because it still doesn't accomplish what I want to do, but someone responded to this question with a question of his own, not an answer to my question, thereby dragging down my accept rate. If someone comes along with a good answer, I will uncheck this response and check that one. Sorry, but I'm not sure what else to do here.