You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Maria Jose Esteve <mj...@iest.com> on 2020/10/05 23:31:19 UTC
Jewel List - selectionChange
Hello, I wanted to ask a question ... I'm sure there is an explanation that I can't see ...
Why is it that when we select a row in a List control, a scrollToIndex is not performed to make it visible?
Is there a situation where I insert a List control and don't want to see the item I have selected? What am I missing?
Thx.
Hiedra
RE: Jewel List - selectionChange
Posted by Maria Jose Esteve <mj...@iest.com>.
I have been "commented" with quite good criterio 😝 to separate the improvements, the errors and my solution proposals, so this afternoon I will try to send everything in different emails.
Sorry
Hiedra.
-----Mensaje original-----
De: Maria Jose Esteve <mj...@iest.com>
Enviado el: viernes, 30 de octubre de 2020 2:09
Para: dev@royale.apache.org
Asunto: RE: Jewel List - selectionChange
Hello guys,
I have spent a few difficult days and I had not been able to share with you the solution that I have implemented in my application.
I have extended the BeadView ListView [1] and assigned it to the Jewel Lists in the application css [2]
I've made several changes ...
On the one hand, I have implemented what we were commenting on: the automatic scroller to the selected item whenever it changes, rewriting selectionChangeHandler and adding scrollToIndex to it. (With some comment that I show you in the code). [3]
After this small change, I verified that the positioning through valuecommit worked perfectly with fixed height itemrenderers but that, with the variable height ones, the scroll calculation was not correct and I also show you my proposal to solve it. [4]
Finally, implementing the example of the COVID map from the ECharts project, together with my colleague Jose 😝, I realized that whenever the country was changed, from the map, the scrolltoIndex would ALWAYS move the display area, even though the new country selected was visible before the change, placing it in first position, which I found very confusing, I imagine others will not see it the same ... 😝 but hey ... I have made a small change: Only change the indexscroll when the new item does not really is visible [5]
[1] ListViewWP.as
package com.xxx.yyy.jewel.beads.views
{
COMPILE::SWF
{
import org.apache.royale.core.IStrand;
}
COMPILE::JS
{
import org.apache.royale.core.IStyledUIBase;
}
import org.apache.royale.core.IItemRenderer;
import org.apache.royale.core.ISelectableItemRenderer;
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.models.ListPresentationModel;
import org.apache.royale.jewel.supportClasses.list.IListPresentationModel;
import org.apache.royale.utils.getSelectionRenderBead;
import org.apache.royale.jewel.beads.views.ListView;
COMPILE::JS
public class ListViewWP extends ListView
{
public function ListViewWP(){}
/**
* @royaleignorecoercion org.apache.royale.core.IItemRenderer
* @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
*/
override protected function selectionChangeHandler(event:Event):void
{
super.selectionChangeHandler(event);
//[3]
//TODO - It would only force the scrollToIndex if the selectionChange has NOT been dispatched by a MouseEvent.CLICK.
//Currently, changing the SelectedItem and the Click launch the selectionChange.
scrollToIndex(lastSelectedIndex);
}
//[4]
override public function scrollToIndex(index:int):Boolean
{
var scrollArea:HTMLElement = (_strand as IStyledUIBase).element;
var oldScroll:Number = scrollArea.scrollTop;
var pm:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
var totalHeight:Number = 0;
var rowHeight:Number;
var scrollToProposed:Number = 0;
if(pm.variableRowHeight)
{
//each item render can have its own height
totalHeight = scrollArea.scrollHeight - scrollArea.offsetHeight;
for (var i:int = 0; i <= index; i++)
{
var ir:IItemRenderer = dataGroup.getItemRendererForIndex(i) as IItemRenderer;
rowHeight = ir.element.offsetHeight
if( i < index )
scrollToProposed += rowHeight;
}
} else
{
// all items renderers with same height
rowHeight = isNaN(pm.rowHeight) ? ListPresentationModel.DEFAULT_ROW_HEIGHT : pm.rowHeight;
totalHeight = listModel.dataProvider.length * rowHeight - scrollArea.clientHeight;
scrollToProposed = index * rowHeight;
}
var scrollMaxVisible:Number = scrollArea.scrollTop + scrollArea.offsetHeight;
//When a row starts within the visible area but ends outside:
if(scrollToProposed <= scrollMaxVisible && scrollToProposed+rowHeight > scrollMaxVisible)
{
//If we want to respect the default behavior (position the selected row as the first visible), the next two lines should be canceled
//We adjust the scroll so that the row is fully visible, leaving it as the last visible...
var offset:Number = scrollMaxVisible - scrollToProposed;
scrollToProposed = oldScroll + rowHeight - offset;
scrollArea.scrollTop = Math.min(scrollToProposed, totalHeight);
}
//[5]
//The verticalScrollPosition will only be changed if the element is not currently visible.
else if(scrollToProposed >= scrollMaxVisible || scrollToProposed < oldScroll)
{
scrollArea.scrollTop = Math.min(scrollToProposed, totalHeight);
}
return oldScroll != scrollArea.scrollTop;
}
}
COMPILE::SWF
public class ListViewWP extends ListView
{
public function ListViewWP()
{
super();
}
}
}
[2] default.css
j|List {
IBeadView: ClassReference("com.xxx.yyy.jewel.beads.views.ListViewWP");
}
As you see?
I wanted to share some gifs of the COVID map but I can't compile any project with today's compilation of the sdk (?) Does it happen to you too?
I am going to catch up with the messages from the lists that I see that you have been very active !!!! 😝
Thx.
Hiedra.
-----Mensaje original-----
De: Andrew Wetmore <an...@apache.org>>
Enviado el: martes, 6 de octubre de 2020 1:48
Para: Apache Royale Development <de...@royale.apache.org>>
Asunto: Re: Jewel List - selectionChange
It seems to make good sense.
On Mon., Oct. 5, 2020, 8:46 p.m. Carlos Rovira, <ca...@apache.org>>>
wrote:
> I guess you mean a programmatic selection? not a user click or touch right?
> (since for the later I guess we already have it visible to make the
> selection, isn't it?).
>
> Don't see any problem with doing that, if nobody states something
> against it we can implement it.
>
> Thanks
>
> El mar., 6 oct. 2020 a las 1:31, Maria Jose Esteve
> (<mj...@iest.com>>>)
> escribió:
>
> > Hello, I wanted to ask a question ... I'm sure there is an
> > explanation that I can't see ...
> > Why is it that when we select a row in a List control, a
> > scrollToIndex is not performed to make it visible?
> > Is there a situation where I insert a List control and don't want to
> > see the item I have selected? What am I missing?
> >
> > Thx.
> > Hiedra
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
RE: Jewel List - selectionChange
Posted by Maria Jose Esteve <mj...@iest.com>.
Hello guys,
I have spent a few difficult days and I had not been able to share with you the solution that I have implemented in my application.
I have extended the BeadView ListView [1] and assigned it to the Jewel Lists in the application css [2]
I've made several changes ...
On the one hand, I have implemented what we were commenting on: the automatic scroller to the selected item whenever it changes, rewriting selectionChangeHandler and adding scrollToIndex to it. (With some comment that I show you in the code). [3]
After this small change, I verified that the positioning through valuecommit worked perfectly with fixed height itemrenderers but that, with the variable height ones, the scroll calculation was not correct and I also show you my proposal to solve it. [4]
Finally, implementing the example of the COVID map from the ECharts project, together with my colleague Jose 😝, I realized that whenever the country was changed, from the map, the scrolltoIndex would ALWAYS move the display area, even though the new country selected was visible before the change, placing it in first position, which I found very confusing, I imagine others will not see it the same ... 😝 but hey ... I have made a small change: Only change the indexscroll when the new item does not really is visible [5]
[1] ListViewWP.as
package com.xxx.yyy.jewel.beads.views
{
COMPILE::SWF
{
import org.apache.royale.core.IStrand;
}
COMPILE::JS
{
import org.apache.royale.core.IStyledUIBase;
}
import org.apache.royale.core.IItemRenderer;
import org.apache.royale.core.ISelectableItemRenderer;
import org.apache.royale.events.Event;
import org.apache.royale.jewel.beads.models.ListPresentationModel;
import org.apache.royale.jewel.supportClasses.list.IListPresentationModel;
import org.apache.royale.utils.getSelectionRenderBead;
import org.apache.royale.jewel.beads.views.ListView;
COMPILE::JS
public class ListViewWP extends ListView
{
public function ListViewWP(){}
/**
* @royaleignorecoercion org.apache.royale.core.IItemRenderer
* @royaleignorecoercion org.apache.royale.core.ISelectableItemRenderer
*/
override protected function selectionChangeHandler(event:Event):void
{
super.selectionChangeHandler(event);
//[3]
//TODO - It would only force the scrollToIndex if the selectionChange has NOT been dispatched by a MouseEvent.CLICK.
//Currently, changing the SelectedItem and the Click launch the selectionChange.
scrollToIndex(lastSelectedIndex);
}
//[4]
override public function scrollToIndex(index:int):Boolean
{
var scrollArea:HTMLElement = (_strand as IStyledUIBase).element;
var oldScroll:Number = scrollArea.scrollTop;
var pm:IListPresentationModel = _strand.getBeadByType(IListPresentationModel) as IListPresentationModel;
var totalHeight:Number = 0;
var rowHeight:Number;
var scrollToProposed:Number = 0;
if(pm.variableRowHeight)
{
//each item render can have its own height
totalHeight = scrollArea.scrollHeight - scrollArea.offsetHeight;
for (var i:int = 0; i <= index; i++)
{
var ir:IItemRenderer = dataGroup.getItemRendererForIndex(i) as IItemRenderer;
rowHeight = ir.element.offsetHeight
if( i < index )
scrollToProposed += rowHeight;
}
} else
{
// all items renderers with same height
rowHeight = isNaN(pm.rowHeight) ? ListPresentationModel.DEFAULT_ROW_HEIGHT : pm.rowHeight;
totalHeight = listModel.dataProvider.length * rowHeight - scrollArea.clientHeight;
scrollToProposed = index * rowHeight;
}
var scrollMaxVisible:Number = scrollArea.scrollTop + scrollArea.offsetHeight;
//When a row starts within the visible area but ends outside:
if(scrollToProposed <= scrollMaxVisible && scrollToProposed+rowHeight > scrollMaxVisible)
{
//If we want to respect the default behavior (position the selected row as the first visible), the next two lines should be canceled
//We adjust the scroll so that the row is fully visible, leaving it as the last visible...
var offset:Number = scrollMaxVisible - scrollToProposed;
scrollToProposed = oldScroll + rowHeight - offset;
scrollArea.scrollTop = Math.min(scrollToProposed, totalHeight);
}
//[5]
//The verticalScrollPosition will only be changed if the element is not currently visible.
else if(scrollToProposed >= scrollMaxVisible || scrollToProposed < oldScroll)
{
scrollArea.scrollTop = Math.min(scrollToProposed, totalHeight);
}
return oldScroll != scrollArea.scrollTop;
}
}
COMPILE::SWF
public class ListViewWP extends ListView
{
public function ListViewWP()
{
super();
}
}
}
[2] default.css
j|List {
IBeadView: ClassReference("com.xxx.yyy.jewel.beads.views.ListViewWP");
}
As you see?
I wanted to share some gifs of the COVID map but I can't compile any project with today's compilation of the sdk (?) Does it happen to you too?
I am going to catch up with the messages from the lists that I see that you have been very active !!!! 😝
Thx.
Hiedra.
-----Mensaje original-----
De: Andrew Wetmore <an...@apache.org>
Enviado el: martes, 6 de octubre de 2020 1:48
Para: Apache Royale Development <de...@royale.apache.org>
Asunto: Re: Jewel List - selectionChange
It seems to make good sense.
On Mon., Oct. 5, 2020, 8:46 p.m. Carlos Rovira, <ca...@apache.org>>
wrote:
> I guess you mean a programmatic selection? not a user click or touch right?
> (since for the later I guess we already have it visible to make the
> selection, isn't it?).
>
> Don't see any problem with doing that, if nobody states something
> against it we can implement it.
>
> Thanks
>
> El mar., 6 oct. 2020 a las 1:31, Maria Jose Esteve
> (<mj...@iest.com>>)
> escribió:
>
> > Hello, I wanted to ask a question ... I'm sure there is an
> > explanation that I can't see ...
> > Why is it that when we select a row in a List control, a
> > scrollToIndex is not performed to make it visible?
> > Is there a situation where I insert a List control and don't want to
> > see the item I have selected? What am I missing?
> >
> > Thx.
> > Hiedra
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
Re: Jewel List - selectionChange
Posted by Andrew Wetmore <an...@apache.org>.
It seems to make good sense.
On Mon., Oct. 5, 2020, 8:46 p.m. Carlos Rovira, <ca...@apache.org>
wrote:
> I guess you mean a programmatic selection? not a user click or touch right?
> (since for the later I guess we already have it visible to make the
> selection, isn't it?).
>
> Don't see any problem with doing that, if nobody states something
> against it we can implement it.
>
> Thanks
>
> El mar., 6 oct. 2020 a las 1:31, Maria Jose Esteve (<mj...@iest.com>)
> escribió:
>
> > Hello, I wanted to ask a question ... I'm sure there is an explanation
> > that I can't see ...
> > Why is it that when we select a row in a List control, a scrollToIndex is
> > not performed to make it visible?
> > Is there a situation where I insert a List control and don't want to see
> > the item I have selected? What am I missing?
> >
> > Thx.
> > Hiedra
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
Re: Jewel List - selectionChange
Posted by Carlos Rovira <ca...@apache.org>.
I guess you mean a programmatic selection? not a user click or touch right?
(since for the later I guess we already have it visible to make the
selection, isn't it?).
Don't see any problem with doing that, if nobody states something
against it we can implement it.
Thanks
El mar., 6 oct. 2020 a las 1:31, Maria Jose Esteve (<mj...@iest.com>)
escribió:
> Hello, I wanted to ask a question ... I'm sure there is an explanation
> that I can't see ...
> Why is it that when we select a row in a List control, a scrollToIndex is
> not performed to make it visible?
> Is there a situation where I insert a List control and don't want to see
> the item I have selected? What am I missing?
>
> Thx.
> Hiedra
>
--
Carlos Rovira
http://about.me/carlosrovira