Different vertical gaps between siblings in the same mx:Tree control - apache-flex

Does anyone know of a way to specify different vertical gaps between siblings in a Tree? I want to child nodes spaced tighter together (maybe 10px) while the top level parents remain spaced further apart (20px). Essentially, I need to change the gap dynamically based upon the depth of the node, but I'm not sure if the Tree class (or the List class, which Tree extends) offers this type of functionality. Any ideas? Thanks in advance.

Can you use an itemRenderer and add spacing to the itemRenderer based on the data sent in?

I would try setting the padding to the minimum you want, then add <mx:Spacer ... /> with whatever additional height/ width you want to add between the children where desired.

Related

The usage of block grid and reason of its existence in Foundation5

I recently found Foundation5 has Block Grid which has rarely found use case online anywhere to demostrate the importance of using it... or is it even a great function to have? Because I am currently using Bootstrap3 and found it does not have Block Grid. So I wonder if its really a big feature one should watch out for.
Maybe some critical user case that will be so much better to use Block Grid other than Column based Grid.
Thanks!
There are several differences between the block grid and regular column grid..
The block grid is always evenly spaced and distributed
The block grid requires less markup
The block grid doesn't have inner padding
Take a look at this demo: http://codeply.com/go/XiyFxtMcXT, and you'll see the differences. Notice how the block-grid evenly wraps the items when the items exceed one row.
Block grids give you a way to evenly split contents of a list within the grid. If you wanted to create a row of five images or paragraphs that need to stay evenly spaced no matter the screen size, the block grid is for you.
You could just as easily use a percentage based grid system to achieve the same result.
I think the benefit of the 'block grid' is:
Items are displayed in a 'ul' which will group them together (good, for accessibility).
It's quicker to add one style to a 'ul' that will automatically make each 'li' a 'column' than it is to add "col-x" to each 'li' manually
They've already built it so you don't need to.

drawForeground on QGraphicsRectItem

I need a way for a QGraphicsRectItem to draw on top of its children. I have a item that contains several children items. At a specific height I need to draw a line over the child items.
Is there a way to implement a drawForeground in a QGraphicsItems similar to the drawForeground in QGraphicsScene?
If at all possible I would prefer to not have to draw the line for each child item.
I'm not entirely sure what you are trying to do but I suspect you will encounter a great deal of grief trying to fight the framework by trying to make a part of the parent draw over its child items. Perhaps you can add a top level child that is over the other child items covering a limited area, and renders the same content as the parent and includes the special overlay lines you want?
It might also suit your purpose to draw right over the scene from the graphics view.

Difference between visible and includeInLayout properties of a component in Flex

Can anybody please tell me what about visible and includeInLayout properties of a component and what is the state of the component when they are in combination of {false,false},{false,true},{true,false}. Thank you in advance.
Ok, visible is only about visibility of component and includeInLayout is only about taking part in process of component's laying out. Talking about laying out we're talking about such layouts as vertical layout, horizontal layout or tile layout where positions of the children determines by positions of other children.
Well, according to this explanation false,false is about target display object will not visible and will not affect on the position of other objects in layout. It is the same as target display object isn't exist at all.
The case false,true describes the situation where target display object isn't visible but takes part in layout. For end user it is an empty space between other objects in layout. This space has the same dimensions as our target display object.
The case true,false makes target display object visible but with not predictable position (depends on the particular layout implementation). Anyway it is not affect other elements position which laying out the way as target display object doesn't exist. It is very likely some of the other element overlap our target display obje

Displaying one component on the top of other

How can I display one component on the top of another one in flex without explicitly mentioning x-axis & y-axis?
Use canvas and inside canvas you can add controls that will be displayed one above another, the last one added will be the top most one and first added will stay in behind.
Something else to consider, depending on your UI:
This is still a bit 'hacky' (any solution for doing this will be), but given a container (VBox etc) with two or more components, set the includeInLayout property in the first component to false. When the container renders the second component will ignore the first and draw on top.
This also would allow you to add additional components in that same container, but obviously it depends on your UI a great deal.

Centering item renderers in a HorizontalList

I am trying to center itemRenderers in a horizontal list if the number of items in the list is less than the maximum visible number. Has anyone found a good way to do this?
See an illustration of what I mean if it is hard to picture.
Thanks!
Override the measure() method - I've writen a blog entry here: http://flexmonkey.blogspot.com/2010/05/centre-aligned-horizontallist-in-flex.html
simon
One solution that comes to mind would be to add invisible renderers to achieve the same centering.
You might want to consider using a horizontal box or "Hbox" instead of a horizontal list component. This will allow you to use the horizontal align property to set center. If not, simply extend the horizontal list component to accept a center align property, and copy it from the hbox to your new extended component.
Would paddingRight or paddingLeft accomplish what you're looking for? If you combine it with setting the columnWidth and the columnCount, that would allow you to adjust where the items first appear.

Resources