I have multiple MXML custom components that I add on the fly (using a repeater) that is binded to an ArrayCollection. So everytime I add/remove item from the ArrayColleciton new items show/disappear from the screen.
Is there a straightforward way to make item fade in when they get created and fade out when they are removed? I thought of using states and state transition effects but that will make things a bit complicated at different part of my application for those components to manage the states.
You need "Data effects" not "State Transitions". Creating the effect is the same, but the way you set it up is slightly different. Take a look at this list:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html?filter_flex=4.1&filter_flashplayer=10.1&filter_air=2#top
Specifically, you'll probably want to use addedEffect when something is added and removedEffect when something is removed. You may also want to investigate hideEffect and showEffect .
So, instead of creating a transitions array, you'll set the effect like it were a style in ActionScript. In MXML, set it like it were a property on the component.
And I strongly recommend not using repeaters if there is any chance your data will scroll off the screen. A repeater will renderer every element in your dataProvider. A list, will only render those elements that display on screen. Lists are much more effecient in this regards.
Related
What would be the preferred (recommended) way to rearrange the components of a QML UI on an event such as a button click?
I do have designed a UI consisting of a bunch of custom components, each of them is bound to a (C++) model. I use anchors to position the components in the ApplicationWindow.
On a button click, I want to add an additional component which, due to its size, makes it necessary to rearrange the existing components. Actually, the button could be understood as switching into a different mode such as the Debug view in an IDE (think of Eclipse).
My goal is to keep the components in a consistent state between views and make the switch as fluent as possible.
I could think of these options:
Design two different views, and use a Loader or State to switch between them. As initializing the models takes some time, they should remain not be deleted during switching. I think, setting them as ContextProperty of the QMLApplicationEngine should take care of that.
Do a lot of rearranging in the onClicked()-Handler of the button. Probably the worst solution but does not require to reinitialize the components and models.
I think the most elegant solution would be to initialize the components in a some kind of container (or model) and then assign different layouts to this container on button click. But I have no idea, if this is possible and how to achieve that.
Edit: I followed approach 1. by using the StackLayout. It works basically, but it seems as if the invisible UI is still running in the background and consuming resources (e.g. requesting Images from my QQuickImageProvider).
Using a Loader eliminates this problem as it destroys the previous UI on every change of the source property. What I do like about the StackLayout however is that it preloads all UIs on app startup. So the transitions are smoother compared to the Loader. Is there a way to disable the invisible UIs?
Your option (1) is the one giving your the most flexibility, since you have two entirely separate UIs depending on state.
As you already discovered yourself this requires keeping all relevant state data in a way that is accessible by both UIs, e.g. in C++ or in globally accessible QML/Script objects.
I would go for that if you envision any more changes or tweaks than just rearranging elements.
If you are sure that rearranging elements will be sufficient, have a look at QML states
It is a bit like a combination of your options (2) and (3).
The state setup allows you very locally to define anchors and other properties for each element depending on a named state.
The button's signal handler then only needs to change which of the states is active, by assigning one of the names to the respective state property.
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 have a generic function to build rows of controls (each row comprising of sliders, radio buttons, reset buttons, text display) etc, and some functionality to change underlying data based on these
As I didn't want to write specific code for each row, I had code written by which I can detect the row on which there has been a mouseevent, and though the row access each individual control
The hierarchy used is titleWindow (part of popup)->skinnable container->HGroup->control
When I trace for a radiobutton, I get the path as follows Electric_Modify.TitleWindowSkin2620._TitleWindowSkin_Group1.contents.contentGroup.0.RadioButton2645
The '0' before the radioButton stands for the first Hgroup id->named as 0
I tried accessing the radio button as follows- 5th element in the HGroup
((this.contentGroup.getChildAt(row)as Group).getChildAt(4) as RadioButton).enabled=false;
and get a message "Cannot access a property or method of a null object reference" on this line. How should I navigate the hierarchy to reach the element?
You should be using getElementAt(...) and not getChildAt(...).
The get element functions represent a "higher level" element hierarchy which is needed to make skinning easier.
((this.getElementAt(row) as IVisualElementContainer).getElementAt(4) as RadioButton).enabled = false;
It should look something like that, but the exact hierarchy depends on what's in your app.
#drkstr
Thanks for your input... I thought of an alternate approach that worked for me...I mapped out the parent of the HGroup via
parent1=hgrp.parent; and then referenced these buttons as follows
((parent1.getChildAt(row)as Group).getChildAt(4) as RadioButton)
This works like a dream...I presume your suggestion would let me jump across the intermediate layers
#J_A_X/ #Constantiner: Thanks for the suggestion. I have no idea why we didn't think through and go down the DataGroup path. Prima facie seems simpler... we got to creating the UI controls in MXML laying out controls serially,and when it came to making it generic, we literally replicated the MXML approach in AS. Started off easy, till it caused problems like above. We will fix this to a better approach, when we upgrade versions. It works for now
I have created a custom item renderer for the tree, i have added some children in create children function, my problem is that sometimes i need to show these children and sometimes i don't, depending on clicking on a button which also i have added at create children, the problem is that i had to create the item even if i don't want it to be visible, and removed it by making visible false, and this costs a lot of memory, i have tried to create it at buttons click listener but when scrolling the child disappears, and it may appear again if i keep scrolling up and down..
i am trying to add the child just when i need it to be visible, is this possible or i have to create it on child creation method?
Typically you do something like this with states. This way the components within the container (in this case your item renderer) are only created when the container enters the given state. The nice thing about taking this approach is that you can remain oblivious to when components need to be created/removed and let the states model handle that for you. Hope that helps.
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.