You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Harbs <ha...@gmail.com> on 2023/05/01 16:14:18 UTC
Re: Performance issue with Datagrid / last build download issue
I added InfiniteScroller.
You can use it like this:
<js:List id=“myList”>
<js:beads>
<js:InfiniteScroller scrollEnd=“getMoreData()”/>
</js:beads>
</js:List>
If the scroll container is not the actual list, you should use it like this:
<js:Group id=“scrollContainer”>
<js:List id=“myList”>
<js:beads>
<js:InfiniteScroller scrollEnd=“getMoreData()” scrollContainer=“{scrollContainer}”/>
</js:beads>
</js:List>
</js:Group>
I’ll try to add the other bead tomorrow…
Harbs
> On Apr 26, 2023, at 12:46 PM, Hugo Ferreira <hf...@gmail.com> wrote:
>
> I'm sold :)
>
> When you push that to github, please make a comment here.
> I will test it right a way ;)
>
> Harbs <ha...@gmail.com> escreveu no dia quarta, 26/04/2023 à(s) 10:43:
>
>> If you use IntersectionObservers, the callback is only invoked when the
>> observed element comes into view. The beauty of the IntersectionObservers
>> is that it doesn’t matter how the element comes into view. It can be by any
>> kind of scrolling, window resize, or even by changing the visibility of it.
>> It’s very elegant and much more performant than listening to scroll events.
>>
>>> On Apr 26, 2023, at 12:32 PM, Hugo Ferreira <hf...@gmail.com>
>> wrote:
>>>
>>> But, don't forget that the user can grab the scroll bar and drop
>> somewhere.
>>
>>
Re: Performance issue with Datagrid / last build download issue
Posted by Hugo Ferreira <hf...@gmail.com>.
OK, I understand.
If I would start my development now, I would probably investigate deeper
this 2 beads to try to bulld something generic.
For now VirtualDataGrid is working almost good.
Probably in a more relax time, I will investigate this beads or for a new
project.
Gabe Harbs <ha...@gmail.com> escreveu no dia sábado, 6/05/2023 à(s)
18:40:
> The job of InfiniteScroller is to tell you when the user scrolled down to
> the end of the list.
>
> What to do when you get to the end of the list is up to you. `the most
> common use case is to load paged data. You would need to keep track of
> whether you have more paged data to get.
>
> You’d probably have getMoreData() make an API call to get paged data if
> there’s more data pending.
>
> SmoothDataLoader is complementary in that it’s useful for loading large
> amounts of data in a way that doesn’t freeze the UI.
>
> HTH,
> Harbs
>
> > On May 6, 2023, at 11:27 AM, Hugo Ferreira <hf...@gmail.com>
> wrote:
> >
> > I didn't quiet understand what this new head SmoothDataLoader does but I
> > see that was created to work together with InfiniteScroller
> >
> > Harbs <ha...@gmail.com> escreveu no dia quarta, 3/05/2023 à(s)
> 10:55:
> >
> >> I added js:SmoothDataLoader as well.
> >>
> >> The bead is expecting data as an array. It should be added using either
> >> setData() (to replace the data) or appendData() to add more data to the
> >> queue of data being added.
> >>
> >> The strand does not need a dataProvider set, but it does need to be able
> >> to handle collections and collection change events.
> >>
> >> FYI, the SmoothDataLoader might trigger scrollEnd on the
> InfiniteScroller
> >> while adding data, so if you use the two together, make sure you check
> >> whether there’s pending data in the SmoothDataLoader before requesting
> more
> >> data on the scrollEnd event.
> >>
> >> The InfiniteScroller also does not handle adding a progress indicator to
> >> the end of the list. If desired, that would need to be handled
> separately.
> >>
> >> HTH,
> >> Harbs
> >>
> >>> On May 1, 2023, at 7:14 PM, Harbs <ha...@gmail.com> wrote:
> >>>
> >>> I added InfiniteScroller.
> >>>
> >>> You can use it like this:
> >>>
> >>> <js:List id=“myList”>
> >>> <js:beads>
> >>> <js:InfiniteScroller scrollEnd=“getMoreData()”/>
> >>> </js:beads>
> >>> </js:List>
> >>>
> >>> If the scroll container is not the actual list, you should use it like
> >> this:
> >>> <js:Group id=“scrollContainer”>
> >>> <js:List id=“myList”>
> >>> <js:beads>
> >>> <js:InfiniteScroller scrollEnd=“getMoreData()”
> >> scrollContainer=“{scrollContainer}”/>
> >>> </js:beads>
> >>> </js:List>
> >>> </js:Group>
> >>>
> >>> I’ll try to add the other bead tomorrow…
> >>>
> >>> Harbs
> >>>
> >>>> On Apr 26, 2023, at 12:46 PM, Hugo Ferreira <hf...@gmail.com>
> >> wrote:
> >>>>
> >>>> I'm sold :)
> >>>>
> >>>> When you push that to github, please make a comment here.
> >>>> I will test it right a way ;)
> >>>>
> >>>> Harbs <ha...@gmail.com> escreveu no dia quarta, 26/04/2023 à(s)
> >> 10:43:
> >>>>
> >>>>> If you use IntersectionObservers, the callback is only invoked when
> the
> >>>>> observed element comes into view. The beauty of the
> >> IntersectionObservers
> >>>>> is that it doesn’t matter how the element comes into view. It can be
> >> by any
> >>>>> kind of scrolling, window resize, or even by changing the visibility
> >> of it.
> >>>>> It’s very elegant and much more performant than listening to scroll
> >> events.
> >>>>>
> >>>>>> On Apr 26, 2023, at 12:32 PM, Hugo Ferreira <hferreira.80@gmail.com
> >
> >>>>> wrote:
> >>>>>>
> >>>>>> But, don't forget that the user can grab the scroll bar and drop
> >>>>> somewhere.
> >>>>>
> >>>>>
> >>>
> >>
> >>
> >>
>
>
Re: Performance issue with Datagrid / last build download issue
Posted by Gabe Harbs <ha...@gmail.com>.
The job of InfiniteScroller is to tell you when the user scrolled down to the end of the list.
What to do when you get to the end of the list is up to you. `the most common use case is to load paged data. You would need to keep track of whether you have more paged data to get.
You’d probably have getMoreData() make an API call to get paged data if there’s more data pending.
SmoothDataLoader is complementary in that it’s useful for loading large amounts of data in a way that doesn’t freeze the UI.
HTH,
Harbs
> On May 6, 2023, at 11:27 AM, Hugo Ferreira <hf...@gmail.com> wrote:
>
> I didn't quiet understand what this new head SmoothDataLoader does but I
> see that was created to work together with InfiniteScroller
>
> Harbs <ha...@gmail.com> escreveu no dia quarta, 3/05/2023 à(s) 10:55:
>
>> I added js:SmoothDataLoader as well.
>>
>> The bead is expecting data as an array. It should be added using either
>> setData() (to replace the data) or appendData() to add more data to the
>> queue of data being added.
>>
>> The strand does not need a dataProvider set, but it does need to be able
>> to handle collections and collection change events.
>>
>> FYI, the SmoothDataLoader might trigger scrollEnd on the InfiniteScroller
>> while adding data, so if you use the two together, make sure you check
>> whether there’s pending data in the SmoothDataLoader before requesting more
>> data on the scrollEnd event.
>>
>> The InfiniteScroller also does not handle adding a progress indicator to
>> the end of the list. If desired, that would need to be handled separately.
>>
>> HTH,
>> Harbs
>>
>>> On May 1, 2023, at 7:14 PM, Harbs <ha...@gmail.com> wrote:
>>>
>>> I added InfiniteScroller.
>>>
>>> You can use it like this:
>>>
>>> <js:List id=“myList”>
>>> <js:beads>
>>> <js:InfiniteScroller scrollEnd=“getMoreData()”/>
>>> </js:beads>
>>> </js:List>
>>>
>>> If the scroll container is not the actual list, you should use it like
>> this:
>>> <js:Group id=“scrollContainer”>
>>> <js:List id=“myList”>
>>> <js:beads>
>>> <js:InfiniteScroller scrollEnd=“getMoreData()”
>> scrollContainer=“{scrollContainer}”/>
>>> </js:beads>
>>> </js:List>
>>> </js:Group>
>>>
>>> I’ll try to add the other bead tomorrow…
>>>
>>> Harbs
>>>
>>>> On Apr 26, 2023, at 12:46 PM, Hugo Ferreira <hf...@gmail.com>
>> wrote:
>>>>
>>>> I'm sold :)
>>>>
>>>> When you push that to github, please make a comment here.
>>>> I will test it right a way ;)
>>>>
>>>> Harbs <ha...@gmail.com> escreveu no dia quarta, 26/04/2023 à(s)
>> 10:43:
>>>>
>>>>> If you use IntersectionObservers, the callback is only invoked when the
>>>>> observed element comes into view. The beauty of the
>> IntersectionObservers
>>>>> is that it doesn’t matter how the element comes into view. It can be
>> by any
>>>>> kind of scrolling, window resize, or even by changing the visibility
>> of it.
>>>>> It’s very elegant and much more performant than listening to scroll
>> events.
>>>>>
>>>>>> On Apr 26, 2023, at 12:32 PM, Hugo Ferreira <hf...@gmail.com>
>>>>> wrote:
>>>>>>
>>>>>> But, don't forget that the user can grab the scroll bar and drop
>>>>> somewhere.
>>>>>
>>>>>
>>>
>>
>>
>>
Re: Performance issue with Datagrid / last build download issue
Posted by Hugo Ferreira <hf...@gmail.com>.
I didn't quiet understand what this new head SmoothDataLoader does but I
see that was created to work together with InfiniteScroller
Harbs <ha...@gmail.com> escreveu no dia quarta, 3/05/2023 à(s) 10:55:
> I added js:SmoothDataLoader as well.
>
> The bead is expecting data as an array. It should be added using either
> setData() (to replace the data) or appendData() to add more data to the
> queue of data being added.
>
> The strand does not need a dataProvider set, but it does need to be able
> to handle collections and collection change events.
>
> FYI, the SmoothDataLoader might trigger scrollEnd on the InfiniteScroller
> while adding data, so if you use the two together, make sure you check
> whether there’s pending data in the SmoothDataLoader before requesting more
> data on the scrollEnd event.
>
> The InfiniteScroller also does not handle adding a progress indicator to
> the end of the list. If desired, that would need to be handled separately.
>
> HTH,
> Harbs
>
> > On May 1, 2023, at 7:14 PM, Harbs <ha...@gmail.com> wrote:
> >
> > I added InfiniteScroller.
> >
> > You can use it like this:
> >
> > <js:List id=“myList”>
> > <js:beads>
> > <js:InfiniteScroller scrollEnd=“getMoreData()”/>
> > </js:beads>
> > </js:List>
> >
> > If the scroll container is not the actual list, you should use it like
> this:
> > <js:Group id=“scrollContainer”>
> > <js:List id=“myList”>
> > <js:beads>
> > <js:InfiniteScroller scrollEnd=“getMoreData()”
> scrollContainer=“{scrollContainer}”/>
> > </js:beads>
> > </js:List>
> > </js:Group>
> >
> > I’ll try to add the other bead tomorrow…
> >
> > Harbs
> >
> >> On Apr 26, 2023, at 12:46 PM, Hugo Ferreira <hf...@gmail.com>
> wrote:
> >>
> >> I'm sold :)
> >>
> >> When you push that to github, please make a comment here.
> >> I will test it right a way ;)
> >>
> >> Harbs <ha...@gmail.com> escreveu no dia quarta, 26/04/2023 à(s)
> 10:43:
> >>
> >>> If you use IntersectionObservers, the callback is only invoked when the
> >>> observed element comes into view. The beauty of the
> IntersectionObservers
> >>> is that it doesn’t matter how the element comes into view. It can be
> by any
> >>> kind of scrolling, window resize, or even by changing the visibility
> of it.
> >>> It’s very elegant and much more performant than listening to scroll
> events.
> >>>
> >>>> On Apr 26, 2023, at 12:32 PM, Hugo Ferreira <hf...@gmail.com>
> >>> wrote:
> >>>>
> >>>> But, don't forget that the user can grab the scroll bar and drop
> >>> somewhere.
> >>>
> >>>
> >
>
>
>
Re: Performance issue with Datagrid / last build download issue
Posted by Harbs <ha...@gmail.com>.
I added js:SmoothDataLoader as well.
The bead is expecting data as an array. It should be added using either setData() (to replace the data) or appendData() to add more data to the queue of data being added.
The strand does not need a dataProvider set, but it does need to be able to handle collections and collection change events.
FYI, the SmoothDataLoader might trigger scrollEnd on the InfiniteScroller while adding data, so if you use the two together, make sure you check whether there’s pending data in the SmoothDataLoader before requesting more data on the scrollEnd event.
The InfiniteScroller also does not handle adding a progress indicator to the end of the list. If desired, that would need to be handled separately.
HTH,
Harbs
> On May 1, 2023, at 7:14 PM, Harbs <ha...@gmail.com> wrote:
>
> I added InfiniteScroller.
>
> You can use it like this:
>
> <js:List id=“myList”>
> <js:beads>
> <js:InfiniteScroller scrollEnd=“getMoreData()”/>
> </js:beads>
> </js:List>
>
> If the scroll container is not the actual list, you should use it like this:
> <js:Group id=“scrollContainer”>
> <js:List id=“myList”>
> <js:beads>
> <js:InfiniteScroller scrollEnd=“getMoreData()” scrollContainer=“{scrollContainer}”/>
> </js:beads>
> </js:List>
> </js:Group>
>
> I’ll try to add the other bead tomorrow…
>
> Harbs
>
>> On Apr 26, 2023, at 12:46 PM, Hugo Ferreira <hf...@gmail.com> wrote:
>>
>> I'm sold :)
>>
>> When you push that to github, please make a comment here.
>> I will test it right a way ;)
>>
>> Harbs <ha...@gmail.com> escreveu no dia quarta, 26/04/2023 à(s) 10:43:
>>
>>> If you use IntersectionObservers, the callback is only invoked when the
>>> observed element comes into view. The beauty of the IntersectionObservers
>>> is that it doesn’t matter how the element comes into view. It can be by any
>>> kind of scrolling, window resize, or even by changing the visibility of it.
>>> It’s very elegant and much more performant than listening to scroll events.
>>>
>>>> On Apr 26, 2023, at 12:32 PM, Hugo Ferreira <hf...@gmail.com>
>>> wrote:
>>>>
>>>> But, don't forget that the user can grab the scroll bar and drop
>>> somewhere.
>>>
>>>
>
Re: Performance issue with Datagrid / last build download issue
Posted by Hugo Ferreira <hf...@gmail.com>.
Hi,
I thought that the new bead would be "magically" full automatic.
Can you give an example (a very basic one) of the getMoreData method
implementation ?
Harbs <ha...@gmail.com> escreveu no dia segunda, 1/05/2023 à(s) 17:14:
> I added InfiniteScroller.
>
> You can use it like this:
>
> <js:List id=“myList”>
> <js:beads>
> <js:InfiniteScroller scrollEnd=“getMoreData()”/>
> </js:beads>
> </js:List>
>
> If the scroll container is not the actual list, you should use it like
> this:
> <js:Group id=“scrollContainer”>
> <js:List id=“myList”>
> <js:beads>
> <js:InfiniteScroller scrollEnd=“getMoreData()”
> scrollContainer=“{scrollContainer}”/>
> </js:beads>
> </js:List>
> </js:Group>
>
> I’ll try to add the other bead tomorrow…
>
> Harbs
>
> > On Apr 26, 2023, at 12:46 PM, Hugo Ferreira <hf...@gmail.com>
> wrote:
> >
> > I'm sold :)
> >
> > When you push that to github, please make a comment here.
> > I will test it right a way ;)
> >
> > Harbs <ha...@gmail.com> escreveu no dia quarta, 26/04/2023 à(s)
> 10:43:
> >
> >> If you use IntersectionObservers, the callback is only invoked when the
> >> observed element comes into view. The beauty of the
> IntersectionObservers
> >> is that it doesn’t matter how the element comes into view. It can be by
> any
> >> kind of scrolling, window resize, or even by changing the visibility of
> it.
> >> It’s very elegant and much more performant than listening to scroll
> events.
> >>
> >>> On Apr 26, 2023, at 12:32 PM, Hugo Ferreira <hf...@gmail.com>
> >> wrote:
> >>>
> >>> But, don't forget that the user can grab the scroll bar and drop
> >> somewhere.
> >>
> >>
>
>