Vertical List Properties.

Question

Good Day to All.

It is me again :)

i have 3 questions regarding vertical list.

First

for example i have 3 items in a list and i need one of them to blink. is it possible to make it visible invisible with timer only on 1 item.

 

Second

i have 3 items in a list i need individual coloring for specific conditions can i assign colors per item.

 

Third

i need to add new item to my list at first item not on last position.

 

on a side note can i do all of these operations outside of onLoadItem.

Thank you All.
You are all great people.

Answer 1

Hello,

for example i have 3 items in a list and i need one of them to blink. is it possible to make it visible invisible with timer only on 1 item.

Yes, you can implement the blink operation within the item.

i have 3 items in a list i need individual coloring for specific conditions can i assign colors per item.

Yes, this is also possible.

i need to add new item to my list at first item not on last position.

In such case, you have to:

1. increase the number of items existing in the list (e.g. VerticalList.NoOfItems = VerticalList.NoOfItems + 1).

2. Force the list to reload all items (e.g. VerticalList.InvalidateItems( 0, VerticalList.NoOfItems - 1 ))

3. In the Implementation of onLoadItem select the correct data for the requested item. Concrete, the index #0 refers the just added item now.

Please note, the list components are just "views". They don't store any data nor have an idea what the items do. Its up to you to implement the desired behaviour of an item (e.g. blinking) and to track the number and the order of items (within onLoadItem method). The configuration of an item (its colors, contents, etc.) is determined just in the moment when the item is loaded. You have to take care of it within the onLoadItem method.

Does it help you further?

Best regards

Paul Banach

Comments

Hello Sazna,

if you are working with Embedded Wizard 12 (or newer), then yes. Please see the section Specify the height of an item within the list. This section explains the possibility to implement an OnQueryItemHeight slot method. With this implementation the items can have different dimensions. This can be used for items which are expanded/collapsed dynamically at the runtime. For this purpose:

Step 1: At first track which items are actually expanded. If the user can expand only one item at the same time, then you can use a variable to store in it the number of the actually expanded item. If no item is expanded, store in the variable a not existing item number (e.g. -1). If you want multiple items to be expanded simultaneously, then you will need to store the 'expanded' state for all the items. For example in an array.

Step 2: In the implementation of OnQueryItemHeight slot method, verify the number of the queried item. If the item is actually expanded return the expanded size of the item. Otherwise return the regular size of the item.

Step 3: When the expanded state of an item changes (when its size changes), invalidate the item.

So far the theory. To test this approach I have created a simple project you can download here. Note, the project is created for EW 12 (or newer). In this project, when the user clicks on the + icon, the corresponding item is expanded. The project tracks only one expanded item at the same time. So expanding another item causes the previously expanded item to be collapsed again:

In case, you are working with an older versions (<= 11) the lists are restricted to have all items with equal size. The above approach will not work with older versions. In such case you have only two possibilities:

Option 1: Update to the newer version 12.

Option 2: If the size of an expanded item is a multiple of a collapsed item, you can split the expanded item in multiple items and arrange them one below the other. This approach, however, is more difficult so I hope, you decide for option 1.

I hope it helps you further.

Best regards

Paul Banach

---

Hi Paul,

Yes, I am using Embedded Wizard Studio Pro version 12. I implemented this functionality in my design which has three lists. I am unable to get the desired output. And I want to expand the item with different heights. Could You please check my design and assist me?.

Regards,

Sazna.

---

Hello Sazna,

your application case is very advanced. You have implemented the trick with three lists to fade-out the upper/lower list area. It is a good approach. Now, you added the function to expand/collapse the items. Such modification has to affect all three lists otherwise the contents at the edges of the lists will not correspond. Also, the component containing the expand/collapse button is not the item itself. It is embedded within the item. This also needs to be taken in account.

The first problem is how the OnExpandCollapse signal is sent. Please see the implementation of Application::ToExpandScreen component:

The component ToExpandScreen, however, is not the list item. It is embedded within an item. Therefore, when it sends a signal and the signal arrives at the slot method onExpandCollapse in Application component, the sender parameter identifies an instance of the ToExpandScreen component. Trying to cast the sender to an item class results in null and an exception, displayed in the Log window: 

To fix the issue, you can append to the postsignal operation an optional sender expression identifying the item. The item is the owner of the ToExpandScreen. Following modification would fix this issue:

Alternative approach: modify the onExpandCollapse slot method to correctly access the owner component of the sender:

The second problem is found in the OnLoadItem slot method. It is missing the initialization of the item's ItemNo property. Add following row to the method:

The OnLoadItem slot method also contains another problem. At the end of the method, the item receives its size. Your version, uses here the ItemHeight property, which is equal for all items:

As long as all items have equal height, the approach is fully correct. However, when items have dynamic height, you have to follow the instructions found in the section Implement the OnLoadItem slot method to load the items. Here use the variable ViewSize to initialize the size of the item. Following is the necessary modification of the OnLoadItem slot method:

A further problem is that the top and bottom vertical lists don't use the OnQueryItemHeight slot method. When you expand an item, the effect is only seen in the middle list. Therefore, you have to connect also the top and the bottom lists to the OnQueryItemHeight slot method.  In the top and bottom lists, assign the slot method to the property OnQueryItemHeight:

Doing this, however, will have the side effect of the slot method being invoked in context of any of the three lists. Thus, you need to access the list via sender parameter and not directly via its name. Modify the OnQueryItemHeight slot method as shown below:

Also, when an item is expanded/collapsed, you will need to invalidate all three lists, otherwise the effect of the expand/collapse operation is not seen in the top/bottom list. Add following rows to the onExpandCollapse slot method:

The modified project is found here.

I hope it helps you further.

One hint: In the list you plan to use items of different types. In your implementation you have created a common item component. It embeds then all item types and shows/hides them depending on the provided item content. This was the recommended approach in EW <= 11 since lists were able to deal with one item class only. With EW 12, you can implement a list with different item classes so the trick with embedded item contents is not needed anymore. See also Specify the class of the items within the list.

Best regards

Paul Banach

---

Hi Paul,

I tried your example and it is working fine. But I am also doing a R & D to create similar screen by using menu, menu item & open menu item without using vertical list in order to get advantage of ready to use templates.  Similar to above design I have created separate items using menu item template and open menu item. There are three functionalities need to be implemented. One is, if a menu item with combo box is touched , a drop down option need to be shown. second one is if a menu item to expand is touched then the screen should be expanded below the corresponding item. And the final one is an open menu item to go another screen. How this functionalities can be implemented similar to the above example you have created? and how the data providers can be connected. Please assist me to design this screen with required functionalities.

Regards,

Sazna.

---

Hello Sazna,

this question has no relation to the original thread with Vertical List. Would you please put this question as a new thread? Thanks!

Best regards

Paul Banach