I have a list that is mediated by a view mediator, so the data provider is managed by the said mediator (meaning it just calls viewComponent.list.dataProvider.addItemAt([object], 0) when new items are added to the list.
The list has a custom item renderer which has an addedEffect property (a basic fade in effect), which of course is supposed to play every time a new item is added to the list.
The issue is that the first time I add an item it works, but for any subsequent added items, it does not. Does anyone know the cause of this issue, or more preferably a fix?
Thank you in advance.
I'm not 100% sure, but my guess is that when useVirtualLayout is true, only a single item renderer is ever created. Multiple rows are accomplished by changing the itemRenderer's data, validating the component then taking a bitmap snapshot of it. Thus the item renderer is only ever added to the display list once, and the added event in turn is only ever fired once. Turning off useVirtualLayout forces the list to create new instances for each row in the list, so separate added events are dispatched.
Related
following scenario:
I have a Firebase database containing a list that is used to create a set of "paper-cards" with dom-repeat:
<template is="dom-repeat" items="{{items}}">
<my-element card="{{item}}">
<paper-card id="{{card.id}}">
...
</paper-card>
</my-element>
</template>
In the UI, the user can add or delete paper-cards, so items also get deleted in Firebase.
Now I realized if I change the CSS of an element (e.g. fadeIn, fadeOut animation) and afterwards delete a card and later add one card, the card still has the CSS state as it was before (e.g. for fadeIn/fadeOut animations).
My questions:
How does DOM repeat deal with elements added or removed? Is not all information of this element "deleted"?
If I delete item #5 (out of 10), what happens to elements 6-10, are they deleted and re-created as "5-9" or "moved/altered"?
Besides CSS, are there any other implications that should be considered inside the template tag? Do I need to manually reset anything?
You can read about the dom-repeat on https://www.polymer-project.org/1.0/docs/api/dom-repeat but what it basically tells you that it tries to be too smart without asking the developer if it wants that behavior. The dom-repeat is heavily flawed because of this.
Polymer is saving performance to doing a dirty check, basically looping through everything and only changing the DOM if the checked values (id, in this case) changes. This means that it will inherit other values.
Basically, it wont update sub-properties. This means that dom-repeat isn't really made for any kind of update.
You can possibly go around this issue by using Polymer's this.splice(). It works like the splice in javascript but sends out an event to dom-repeat to update and where to update. Remember however, that arrays in Javascript are references, so if you take this.items and try to modify it, it will automatically update values the dom-repeat (without updating DOM) and then it will dirty check the update with the new values and not change anything at all. If you want to modify the array in the dom-repeat, then use JSON.parse(JSON.stringify(array) first to get rid of the reference.
Another thing you can do is to use the unique id. If the id changes for that specific card, then hard reset all values and initialize that specific card once again with all it's normal properties (including CSS). That's the workaround I use all the time.
The desperate thing to do, when nothing else works, is to nullify the array that keeps track of the cardset, with this.set('items', []) and then set the property with the new array.
The repeater evaluates the number of items in your array on initialization and stamps that many template instances into the DOM. If you delete an item from your array the repeater is presented with a new array that is one element less, removes the last one and propagates data change to elements' instances.
So if you start with 10 elements and order to delete #5 then element's #6 data is inserted via data-binding into the same DOM node that previously contained #5 data, and so on down the list. The last DOM node for which the updated array contains no data will be removed from the DOM tree.
I am having a problem in QTP with selection of a web list box and I have exhausted what I know to do to resolve it. I am hoping someone can help.
There are 5 controls in a container, 2 webedit controls and 3 weblist controls. Together, they allow entry of accounts associated with a customer, and there can be 16 accounts for any customer. There are only ever five controls active at any time, whether editing or entering information for an account. When the information for an account is entered and accepted, it changes to a read-only table row and a new set of controls appears below it for entry of the next account.
The information entered in these controls is the account number, type, description, designation, and status. The status value is contingent on the designation, and the items in the list change dynamically depending on what the user specifies for the designation. The status list is not enabled until the designation is specified.
After some experimenting with timing, I was able to get past an issue where the status list for the first account was seen by QTP as disabled even though it was clearly enabled. I was then able to advance to entry of the second account.
I change the designation on the second account and try to select an appropriate item (specified in a data table) in the status list. My specification from the data table is never found. I figured it was a problem with verbiage differences and also that I should probably anticipate that and address it now, so I wrote a function to accept three parameters, the list and up to two search items. My function searches the listbox passed to it and looks for a match (full or partial) on the search items it receives. Here is where I encountered a significant problem.
The list of the control my function received was from the previous iteration of the test, corresponding to the designation of that account. This is why my function was not finding the selection item. The list on the screen shows the appropriate items, which suggests that I am looking at the wrong object. I also get the ‘object is disabled’ message when I put my data table value directly into the list with the select statement.
The active controls are displayed below the readonly presentation of the previously entered accounts. I am very new to QTP, but I also read documentation. My only theory at this point is that ATP is not passing the right list to my function… that perhaps that how it was learned included the position, which will change each time. However, the spy identifies the screen control as the same item I processed for the preceding account, which makes my theory suspect. In addition, the other four controls, which are not dynamically changing, do not present the same problem. I can put the information in them consistently.
I apologize for the length of this question, but I wanted to be as thorough and clear as possible. Can anyone help me get past this obstacle.
There are many possiblities why it is exposing this behaviour, so let's start with something simple:
Did you try a myWebList.Refresh call before you do something with the listbox? Refresh re-identifies the object.
Have you put a break point (red dot) inside the custom function. Just see what is happening there. With the debug viewer you can enter a realtime command in the scope of that function like msgbox myWebList.exist(0) or myWebList.Highlight
Can you see how the disabled property is propagated to the webpage? If you can 'Object Spy' it as TO property, you can add it in the GUI Map description.
A more sophisticated aproach is to create a Description with the weblist properties. If you can read the disabled property as an RO property from the 'Object Spy', you can use it as an identifier like "attribute/customDisabledProperty:=false".
If you cannot correctly read the disabled property, you can create a description object and do a count on the amount of items that match that description on that page with numberOfLists = Browser("my browser").Page("my page").ChildObjects(myDescription).Count and get the last list with Set lastList = Browser("my browser").Page("my page").ChildObjects(myDescription)(numberOfLists-1)
Keep us informed. Depending on how this works out, we can work into a direction for a solution.
I figured this out early this morning. There are 4 different list boxes used, each made visible or enabled dependent on the selection of the previous list. This is why the spy found the one listed when I was using it and also why the items in the list were not appropriate to what I had selected and also why it appeared disabled to QTP but enabled to me.
I was selecting the same designation when trying to spy it. It was intuitive that the controls were all the same. I am also a windows programmer and I would have populated the same list each time with the appropriate list items, and I presumed that was what the web developer was doing. It was not and it took some time to figure that out. Now that I figured it out, everything is working fine, and I came back to report that. This was a significant, time-intensive lesson.
Thank you very much for your input. It is still useful because I am very new to QTP and every thing I learn is of value.
I've got a spark list that gets dynamically filled.
So far the new items appear at the bottom of the list. What I'd like to do is to add them at the top.
The items in the list have a unique ID so some kind of sorting mechanism would probably do the trick as the new items have a greater ID than the old ones.
What I'd like to avoid is some complex method behind this as I'm working on a mobile platform and the list can get quite big so I need this to be as efficient as possible.
The list's data provider is an ArrayList that gets updated using binding.
How can that be done?
Thanks in advance!
u can Add the items at the starting index of the datagrid. Flex datagrid automatically renew all the indexes and add 1 to all existing element indexes. So
YourDataGridId.dataprovider.addItemAt(item,0) will do.
I have created my own class that derives from QTableView, the associated model is is derived from QAbstractTableModel. The data in the model is performance data(process name, mem usage etc.) which continuously gets updated with a short interval.
Updating the model is done by first removing all data (enclosed with a beginRemoveRows/endRemoveRows) and then "readding" the slightly changed data as a batch operation (enclosed with beginInsertRows/endInsertRows).
How do I disable the vertical autoscrolling to the top whenever I clear/readd?
Working solution
The scrollbar movement was due to signalling removing of all data using beginRemoveRows/endRemoveRows. In order to avoid this I instead emitted a dataChanged(...) signal with the start/stop indexes of the updated list of items if it was smaller than the existing model, and with indexes from the existing model if the updated list was bigger. I also used a begin/endRemoveRows if the updated list was smaller and a begin/endInsertRows if the updated list was bigger.
I have two different Spark Lists, with two different ItemRenderers, one of them with dragEnabled="true" and the other with dropEnabled="true", in such a way that whenever I drag from one and drop in the other, a copy of the object dropped is created and inserted in the second List's dataProvider.
<s:List id="source"
itemRenderer="componentsRenderers.SourceItemRenderer"
dragEnabled="true"
dataProvider="{elements}"/>
<s:List id="destination"
itemRenderer="componentsRenderers.DestinationItemRenderer"
dragEnabled="false"
dropEnabled="true"
change="destinationChanged(event)"/>
The event handler destinationChanged() is a method that parses the recently added object, removes it, and creates a new one that, among other stuff, has an UIComponent that has to be rendered.
The hole thing works well, except by one thing: as soon as the I load the application, the UIComponent of the first item to be dropped in destination never gets renderer. The full object is there and all the other functionalities related to it work, but the component doesn't get rendered. If I delete the object, making the List empty again, and insert it again, it gets rendered!
Also, after inserting the 'invisible' one, all the following inserts works.
Ideas?
Thanks!
Update: I just found out that the itemRenderer DestinationItemRenderer gets rendered twice for the first element to be dropped.