Spark Layouts with Flex 4 Beta
Just a quick post to link to my layouts article on the Adobe dev connection. It uses the same FlowLayout as an example, so no surprises in that department. Check it out, comments and feedback greatly appreciated.
Home
> Uncategorized > Spark Layouts with Flex 4 Beta
Recent Posts
- Extending HorizontalLayout to Support Baseline (Align to Text)
- VerticalAlign for VGroup and HorizontalAlign for HGroup
- Drag and Drop Skinning in Spark
- Calculating the Projected Bounds using Utils3D.projectVector()
- Spark Layouts with Flex 4 Beta
- WheelLayout Source and Quick Mashup
- Check Out Hans’s Article on Spark Viewports and Scrolling
- FlowLayout Part 2 - Gap, VerticalAlign and Scrolling
- FlowLayout - a Spark Custom Layout Example
Blogroll
Meta
My name is Evtim Georgiev and I'm a Computer Scientist on the Flex SDK team at Adobe.
Everything on this site is my opinion alone, and not that of Adobe or any other company or organization.
Hello Evtim, I generally don’t do this but I’m getting crazy with a Flash Builder 4 problem about layouts, I really don’t know why I am getting a ” BasicLayout doesn’t support virtualization.” error. I would really appreciate your help in this, the only thing I know is that the error is being fired from a dataGroup which is inside a skin from a List component.
Thanx for your work in the SDK…
Hi Andres,
The BasicLayout does not support virtualization. You should set a DataGroup’s layout to one that supports virtualization (like VerticalLayout, HorizontalLayout or TileLayout) or turn off virtualization by setting useVirtualLayout=”false”.
Of course, this could be a SDK bug. If you’re still seeing problems, please go ahead an log a bug here https://bugs.adobe.com/flex/, or report it on the forums here http://forums.adobe.com/community/labs/gumbo/
-Evtim
Hello Evtim, thanx for the tip about the virtual layout, I was testing with the scrollbar I put inside of the component, but I think I will take you tip in this…
Thanx
Hi Evtim, I’ve jumped into custom layouts, which has led me to the following situation and question. The custom layout has the ability to see and set some properties of the items in the dataprovider for the container I apply the custom layout to. What I’m struggling with is that I need to access data in the dataprovider (ArrayCollection), to help me in the layout. For example, I store x-position, and width, as a part of the data in the ArrayCollection and I also need to sort the ArrayCollection source at various times, while I am calculating the y-position and the height. How do I get access the the data in the dataprovider for the container? I’m using a DataGroup container.
Hi Jason,
I’d be curious to learn a little bit more about your use case. Usually the layouts I’ve seen cache layout specific data in local (to the layout) structure instead of in the dataProvider, but probably your situation is different. It’s easy to get access to the dataProvider and also to the data item that corresponds to a particular renderer from within the layout:
The layout target property is typed as GroupBase, so you’d need to cast it to DataGroup like this: “var dataProvider:IList = DataGroup(target).dataProvider”.
Alternatively to get the data item for a particular item renderer you can either go through the dataProvider or do something like this: “var item:Object = IItemRenderer(target.getVirtualElementAt(i)).data”. Note that when getVirutalElementAt() is called during layout it will force creation for an item renderer if the renderer didn’t exist already, so you should be careful with that. Here’s link to one very nice article about virtualization http://flexponential.com/2010/03/06/learn-how-to-create-a-simple-virtual-layout-in-flex-4/
@Evtim
Evtim, thank you for the response! I can’t get into details publically, but if you’d e-mail me directly, I’d be would really like to get into more detail. I have other questions as well, such as, which of the two options you listed above would be appropriate/better for drag & drop support in the DataGroup container? Virtual layouts are something I came across a couple days ago and, if I can figure out how to implement it correctly, would really be beneficial. Depending on the view state, there could be hundreds of elements that wouldn’t need to be rendered.
Hey Jason,
The whole point of the virtualization is to create only the renderers for the items that are displayed on the screen at a given point in time. The link that I posted in my previous comment points to a nice virtual layout article.
In a virtual layout case, every time you call getVirtualElementAt(i), the DataGroup will ensure there’s an item renderer at index “i”. So if you need to access data items that you aren’t necessarily going to display (items that fall outside of the scroll rect), you better get the data through the dataProvider.
If you’re using a List component with your layout, then there’s built-in drag & drop support in there that communicates with the layout through a standard set of APIs. If that’s your case, then you can simply override these protected methods in your layout class calculateDropIndex() - the layout returns index of insertion, calculateDropIndicatorBounds() - the layout calculates the size and position of the drop indicator, and optionally - calculateDragScrollDelta() - this is called by the List to determine if it should be drag-scrolling (the default implementation in the base class is functional though).
@Evtim
In my custom layout package, I sort and then loop through the dataprovider a couple times. What I’ve encountered is that the sort gets the element index out of sync with the dataprovider index, so while the size and positioning of the elements are correct, the actual display pieces in my item render, such as label text, are assocated with the incorrect element.
@Jason
I can do a nested loop to compare a uniqueID from the DataProvider to the itemRenderer.data.uniqueID, and everything is positioned and displays correctly. I’m not particularly fond of nested looping, but sometimes it’s necessary. Any better ideas?