I would like my spark ItemRenderer to be able to render a varying number of graphical objects that depends on the user input. As an example, let's say that I want to render a set of ellipses on a line.
I've been using MXML for my most recent batch of ItemRenderers and have loved every minute of it, but I'm not sure how to accomplish the above goal with an MXML IR. In Actionscript I can acquire the list of ellipses locations and draw them programmatically in the updateDisplayList method. Is there an equivalent in MXML?
thank you for your help!
Of course you can place a DataGroup inside your item renderer and place there some graphical primitives like Ellipse driven by data provider. But from the performance point of view this implementation will be very problematic. I suggest you to override updateDisplayList() in your MXML item renderer and perform all the drawings there.
Related
A fairly broad question I know, apologies for that!
So I have a data set that I need to represent in a flex application. It needs to be represented in 2 ways, firstly as a list of components which is done using a List component and a custom ItemRenderer as normal. Secondly, it also must be represented as 'annotations' on a diagram in 2D. Since this doesn't really fit with a List, DataGrid, Chart etc. I think I need to create a new Component to render the data. I'd like to set it up so that you can specify 'itemRenderer' and 'dataProvider' properties on the component, exactly in the same way you would for a datagrid or list. The difference here is that each item of data will have mandatory X and Y coordinates which place it within the containing component.
My initial attempts subclassed UIComponent and implemented IDataRenderer but I'm unsure what other interfaces I need to implement to make the component properly data-driven?
I've already written a simple ItemRenderer / ItemEditor which will render each item of data correctly, I just need the component that will contain these....
thanks for any help
Why not just use the spark DataGroup, which lets you put things wherever you want?
I need a List component that will display custom data. I want to extend a spark List or any List component and add my code to paint each item.
I done this in other frameworks but for Flex i found only simple examples that change the font and background color, i need access to a Graphics object to paint my items as i need,is there a method that i can override or some example /class i should look at?
All UIComponents has a 'graphics' property that you can draw to, however, I'm not too sure why you'd want to extend the list component just to paint each item. Each item renderer is responsible for painting itself. If anything, just use the normal List and specify the itemRenderer property to point to a custom item renderer of your own (that extends ItemRenderer) that can take in data and paint things accordingly.
I'm refactoring some Flex code written by another developer and I'm implementing a PresentationModel approach, as I like to separate out the ActionScript from the MXML. One of the problems I've found is that the original ActionScript code adds/removes elements from the MXML.
What happens is the handler function checks the model and if the values are correct will either create or remove a element from the view. What is the best way to get the presentation model to ad elements to the view and still keep this loose coupling that I'm aiming for.
I was thinking of using simple events which the presentation model dispatches and a view can list for passing the details of the element to add. Is there another solution?
Thanks
Stephen
If you're using the presentation model, I'd assume that you have some kind of data of what needs to happen. When items of any sort are being dynamically added/removed, I make sure to make it data-driven for easier manipulation. If you want another item added, add another data model to your dataProvider of choice (List, ComboBox, DataGroup, etc).
By doing this approach, you're abstracting the logic from the presenter to the view. Events should only be used as a way for your view to know when your presenter has accomplished something. Data can be received this way (and it's good practice to do so) OR you can just bind the data within the presenter to your dataProvider. Both are good, I just find binding to be cleaner and simpler.
Every part of code that do some graphical stuff (drawing border, setting style, drag & drop management, animations, ...), should be included in the view, not the presentation model.
For this kind of graphical that stuff should be executed after a property has been changed in the PM, we use the Cairngorm 3 Observer lib. Basically, it listens to some changes in the presentation model and allows you to execute a function in the View.
<cg:ObserveValue
source="{ model.firstName }" value="{ Name.SARA }"
handler="runEffectFunction"/>
See the documentation
I'm trying to animate a list as I delete the top row. All the examples I can find use itemsChangeEffect to bind to the effect, but this property exists only in MX lists, not spark lists.
Any idea how I can get the same effect done in Spark Lists?
I'm trying to remove the top most item in the list with a slight fade out effect before the rest of the items move up to replace the gap.
It is actually an effect, not a property. The internal implementation is very different, although the difference is masked when using them via MXML.
That said, this doesn't appear to be a feature of the Flex 4 List class. You can vote to have this feature added at ideas.adobe.com :
They intentionally remove itemsChangeEffect from Spark because one of the new features in Spark is that layout logic is separated from component so you can implement your own custom list layout with add/remove effects on itemRenderer. When a Spark container measure() or updateDisplayList() method is called, the task of measurement and child arrangement is promptly delegated to a Spark layout instance.
Indeed they both (skins and itemRenderers) seem to do drawing using the flash.graphics.* package. I have copy pasted code between skins and itemRenderers before, so I really don't understand the difference. I have had more experience implementing itemRenderers than skins, so that might be part of the problem. Thanks, let me know.
A skin is a graphical element that can be applied to various UIComponents. Containers can have borderSkins and Buttons can have various up/over/down skins. They can be implemented in several ways, including the use of the drawing API ("Programmatic skins") or through embedding assets ("Graphical skins"). Skins are usually pretty lightweight and may only be a Flash DisplayObject rather than a Flex UIComponent, which is more heavyweight but contains much more functionality.
An itemRenderer is typically a UIComponent that a List-based control uses to display an item. You also usually use itemRenderers when using a DataGrid/DataGridColumn. Most components that use itemRenderers recycle them, meaning that they create about as many as are needed to display on the screen, and as the user scrolls through the data the same itemRenderers are repositioned and get new data plugged into them. This is one of the reason why Lists and DataGrid can support large quantities of data and why trying to accomplish similar things with a Repeater leads to apps with terrible performance.