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 <[email protected]>
Enviado el: martes, 6 de octubre de 2020 1:48
Para: Apache Royale Development <[email protected]>
Asunto: Re: Jewel List - selectionChange
It seems to make good sense.
On Mon., Oct. 5, 2020, 8:46 p.m. Carlos Rovira,
<[email protected]<mailto:[email protected]>>
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
> (<[email protected]<mailto:[email protected]>>)
> 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
>
