Vertical list and Slide Touch Handler

Question

At my project, the screen vertical length is small, but we have a long vertical list (have more list  item).

The Slide Touch Handler link with the vertical list. We want the vertical list move(scroll) 3cm when i slide 1cm on the Slide Touch Handler. How to achieve this function？

Answer 1

Hello ke007,

your application case is not clear to me.

In practice, arrange the Vertical List to fill the screen vertically (or make the list smaller). In any case avoid that the Vertical List is larger than the screen itself. Then using the Slide Touch Handler the user can intuitively scroll the list contents. See also Connect Vertical List with a Slide Touch Handler.

Best regards

Paul Banach

Comments

I have read the document of the link, include before and after section on the document. So, exclude the Friction property,  when i slide 1cm on the Slide Touch Handler, the vertical list must be move 1cm?

Because the Screen UI is define by customer. We use a small vertical length screen,  but customer need show a height list on vertical, they want the slider move 1cm  and the link vertical list move 3cm, how can we achieve this fucntion?

---

So, exclude the Friction property,  when i slide 1cm on the Slide Touch Handler, the vertical list must be move 1cm?

Yes, the list follows the finger movements 1:1. 

want the slider move 1cm  and the link vertical list move 3cm, how can we achieve this fucntion?

If  the list should not follow 1:1 the finger movements then you can't use the Slide Touch Handler connected directly to the list. Instead you will need to take care of the initialization of the Slide Touch Handler and communication between the Slide Touch Handler and Vertical List:

Step 1. First ensure you have a Vertical List existing in your component.

Step 2: Add a Slide Touch Handler to the component.

Step 3: Arrange the Slide Touch Handler so it overlaps the area of the Vertical List.

Step 4: Add a slot method to the component. Name it e.g. onStartSlide.

Step 5: Implement the slot method onStartSlide with following code. This implementation initialises the Slide Touch Handler to slide over an area which is 1/3 of the area occupied by real items:

// Get the area occupied by visible views
var rect  area   = VerticalList.GetItemsArea( 0, VerticalList.NoOfItems - 1 );
var point origin = VerticalList.Bounds.origin;

if ( area.x1 > origin.x ) area.x1 = origin.x;
if ( area.y1 > origin.y ) area.y1 = origin.y;

// The resulting offset and the slide range
var int32 offset    = area.y1 - VerticalList.Bounds.y1;
var int32 minOffset = VerticalList.Bounds.h - area.h;

// If the content is smaller than the list itself - nothing to slide
if ( minOffset > 0 ) minOffset = 0;

SlideTouchHandler.Offset    = point( 0, VerticalList.ScrollOffset / 3 );
SlideTouchHandler.MinOffset = point( 0, ( VerticalList.ScrollOffset + minOffset - offset ) / 3 );
SlideTouchHandler.MaxOffset = point( 0, ( VerticalList.ScrollOffset - offset ) / 3 );

Step 6: Add further slot method and name it e.g. onSlide.

Step 7: Implement the method onSlide with following code. This implementation applies a factor 3 to the scroll offsets resulting from the slide interaction:

VerticalList.ScrollOffset = SlideTouchHandler.Offset.y * 3;

Step 8: Assign the slot method onStartSlide to the Slide Touch Handler's property OnStart.

Step 9: Assign the slot method onSlide to the Slide Touch Handler's property OnSlide.

I hope it addresses your application case.

Best regards

Paul Banach

---

Hi Paul,

In our project we have a list view with 5000 data items. Contents for each item are updated through native via OnLoadItem slot. Here is the slot method.

var int32     logNum  = VerticalList.Item;
var log::DataItem itemView = (log::DataItem)VerticalList.View;
var int32 ItemNo = logNum; //Application::Device.GetNoOfLogs() - (logNum );
 
if ( itemView == null )
  return;

UpdateView(ItemNo);// to read the contents from device

itemView.DataCount = log::Auto_ObjlogParameters.TotalLogs  - (logNum );
//log::Auto_ObjlogParameters.IndexNo[ItemNo] = log::Auto_ObjlogParameters.TotalLogs  - (logNum );
itemView.OnTouch   =  onTouch;
itemView.LogDate = log::Auto_ObjlogParameters.Date[ItemNo];
itemView.LogTime =   log::Auto_ObjlogParameters.Time[ItemNo];
itemView.Measurement = log::Auto_ObjlogParameters.MainMeas[ItemNo]; 

itemView.Bounds.size = VerticalList.ViewSize;

At a time we can only see 12 items within the visible area of the list. We are using a slide touch handler which is assigned to vertical list to scroll and view the items. But we encountered so much delay while scrolling and updating the view when we have more data( for example 1000). To overcome this issue, the above solution is advisable? or else is there any other optimized solution for this?

Regards,

Sazna.

---

Hello Sazna,

Generally, to achieve good performance, it is important to optimize all slot methods called by the vertical list as much as possible. The slot methods should limit to access already prepared and available data and initialize the item views with this data only. Performing data processing within the slot method will slow down the list. Therefore any data processing should be done separately when the data has changed and not when the list updates its items. I would verify what impact has UpdateView() invocation in your implementation. For test purpose try to comment out the invocations and test the performance.

A further optimization potential can be found in the usage of global autoobject log::Auto_ObjlogParameters. Actually the slot method accesses the object 4 times. To be more efficient, access the object once and use a local variable as shown below:

var yourUnit::classOfTheAutooObject data = log::Auto_ObjlogParameters;

itemView.DataCount = data.TotalLogs  - (logNum );
//log::Auto_ObjlogParameters.IndexNo[ItemNo] = log::Auto_ObjlogParameters.TotalLogs  - (logNum );
itemView.OnTouch   =  onTouch;
itemView.LogDate = data.Date[ItemNo];
itemView.LogTime =   data.Time[ItemNo];
itemView.Measurement = data.MainMeas[ItemNo]; 

Is the list intended to display items with different height, then it is inevitable that with growing list the performance will slow down. In such case to estimate the position of an item, the list has to query the height of all preceding items till the recent cache position. Please check if your list is configured to display items with different height and if this is the case optimize the OnQueryItemHeight slot method as much as possible.

In turn, if your list is configured to display items with the same height, the performance of the list will not depend on the number of items. Even with thousands of items the list will scroll with the same performance - as long as the OnLoadSlot method is well optimized.

Best regards

Paul Banach

---

Hi Paul,

Thank you for your explanation. I have optimized the onloadItem slot not to process the data within that and make use of local variable to access the parameters. And the list is intended to display items with same height. It is working better. If I want to have scaled finger movements instead of 1:1 finger movements I can follow the above mentioned steps. Here I have a question that is what is the maximum scale I can go for?

Regards,

Sazna.

---

Hello Sazna,

If I want to have scaled finger movements instead of 1:1 finger movements I can follow the above mentioned steps. Here I have a question that is what is the maximum scale I can go for?

I'm sorry, but I don't understand what you mean with 'scaled finger movement'. If this question is not related to the original thread, please start a new thread.

Best regards

Paul Banach 

---

Hi Paul,

As per you explanation I did all the optimization and all the items are in same height. Slide handler is separated from vertical list, and it is having a 1:5 finger movements. If the list is having 200 logs the scrolling works as expected. but if the logs increased beyond that, the scrolling started to slow down. Further, for 10000 logs the scrolling becomes very slow. Why is the behavior changes when items increase? Please clarify. Please suggest how this can be further improved .

Is there any way to load the items on demand? i.e. always vertical list is configured to show fix no of items, for example 100, but when scrolling it needs to clear the old data and replace them to show the corresponding data at that specific scroll position? Please clarify.

Regrds,

Sazna N.A.F.

---

Hello Sazna,

The Core::VerticalList implements on-demand item loading - this is a core feature, not something you need to add. The list only creates and caches items that are currently visible on screen plus a small buffer above and below. Whether you have 200 or 10,000 items, the list only keeps the same number item instances in memory at any time. As you scroll, invisible items are automatically recycled and reused to display new data.

The performance bottleneck is probably in your `OnLoadItem` slot method, not the list itself. When you have 10,000 items, if your data access becomes slower (e.g., searching through arrays, complex filtering, or calculations), the OnLoadItem execution slows down, causing laggy scrolling. Since OnLoadItem is triggered for every new exposed item during scrolling, even small inefficiencies are multiplied and become very noticeable.

Please review the implementation of the OnLoadItem slot method. If the method accesses other code, comment out these operations and successively try to narrow down which data access causes the performance issue.

I hope it helps you further.

Best regards

Paul Banach

---

Hi Paul,

var int32     DatalogNum  = VerticalList.Item;
var Application_New::LoggedDataItem itemView = (Application_New::LoggedDataItem)VerticalList.View;
var int32 ItemNo = DatalogNum; //Application::Device.GetNoOfLogs() - (DatalogNum );
var Datalog_GUI::DatalogParameters data = Datalog_GUI::Auto_ObjDatalogParameters;

if ( itemView == null )
  return;

//UpdateView(ItemNo);

itemView.DataCount = data.TotalLogs  - (DatalogNum );
//Datalog_GUI::Auto_ObjDatalogParameters.IndexNo[ItemNo] = Datalog_GUI::Auto_ObjDatalogParameters.TotalLogs  - (DatalogNum );
itemView.OnTouch   =  onTouch;
itemView.LogDate = data.Date[ItemNo];
itemView.LogTime =   data.Time[ItemNo];
itemView.Measurement = data.MainMeas[ItemNo]; 

itemView.Bounds.size = VerticalList.ViewSize;

this is the onLoadItem of the list. It is also optimized as much as possible. Still the issue remains. Please let me know your suggestion for this.

Regards,

Sazna.

---

Hello Sazna,

to narrow down the issue:

1. In the Vertical List, please verify whether the properties OnQueryItemHeight and OnQueryItemClass are null. If the values are not null, the performance of the list may very well depend on the amount of items. If the values are null, the list should scroll with equal performance regardless of the number of items.

2. Assuming the Vertical List is controlled by a Slide Touch handler, is there any other functionality attached to the Slide Touch Handler? Is the property OnSlide of the Slide Touch Handler null? If not, review and optimize the code associated to this property.

3. Is the property OnUpdate of the Vertical List null? If not, review and optimize the code associated to this property.

4. Perform a test with OnLoadItem method limited to following code and again test the performance:

var Application_New::LoggedDataItem itemView = (Application_New::LoggedDataItem)VerticalList.View;

if ( itemView == null )
  return;

itemView.Bounds.size = VerticalList.ViewSize;

5. If the modification (step 4) of OnLoadItem results in equal performance for short and long lists, please restore the original implementation of the method line by line and repeat each time the performance tests. This should help us to detect which part of the implementation slows down the system.

I hope it helps us to understand the cause of the issue.

Best regards

Paul Banach