Popupbutton с тилелем и настраиваемым рендерером
-
29-09-2020 - |
Вопрос
Я подготовил простой тестовый чехол для всплывающего окна, открывающего тильист с черными и красными записями, и в основном работает, но имеет 2 раздражения.
Я много искал, попробовал несколько вариантов (добавил [Bindable] элементы в моем рендерере; добавлен цветной элемент к массиву ставок; создал My Public Complide Set Data () . ,) и получал некоторые ответы тоже, но они слишком общие.
Я был бы признателен, если кто-то может предложить код, чтобы исправить 2 номера в моем коде:
1) Прокрутка «TL2» справа левая не работает хорошо: записи отображаются в смеси красного и черного цвета. Я знаю, что тильист повторно использует позицию, но как я могу решить проблему?
2) в режиме отладки я получаю многочисленные предупреждения: ПРЕДУПРЕЖДЕНИЕ: Невозможно привязать к свойству «метку» на классе «Объект» (класс не является IEVENTDISPatcher)
Спасибо, Алекс
myrenderer.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
width="100%" height="100%">
<mx:Script>
<![CDATA[
public static function findColor(str:String):uint {
return (str.indexOf('♥') != -1 ||
str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000;
}
]]>
</mx:Script>
<mx:Label truncateToFit="true" width="60"
text="{data.label}" color="{findColor(data.label)}"/>
</mx:Canvas>
.
mytest.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationPolicy="all" applicationComplete="init(event);">
<mx:Style>
@font-face {
src:url("C:\\WINDOWS\\Fonts\\arial.ttf");
fontFamily: myFont;
unicodeRange:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E, /* Punctuation and Symbols */
U+0410-U+0451, /* cyrillic */
U+2660-U+266B; /* card suits */
}
List, CheckBox, Label, Button, PopUpButton, TileList {
fontFamily: myFont;
fontSize: 24;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.controls.*;
import mx.events.*;
[Bindable]
private var bids:Array;
private var tl:TileList;
private function init(event:FlexEvent):void {
bids = createBids();
pub.popUp = createList(bids);
}
private function createBids():Array {
var arr:Array = [{label: 'Pass'}];
for (var i:uint = 6; i <= 10; i++)
for (var j:uint = 0; j < 5; j++)
arr.unshift({label: i+'♠♣♦♥ '.charAt(j%5)});
return arr;
}
private function createList(arr:Array):TileList {
tl = new TileList();
tl.maxColumns = 5;
tl.width = 350;
tl.height = 250;
tl.dataProvider = arr;
tl.itemRenderer = new ClassFactory(MyRenderer);
tl.addEventListener('itemClick', itemClickHandler);
if (arr.length > 0) {
tl.selectedIndex = arr.length - 1;
pub.label = arr[tl.selectedIndex].label;
}
return tl;
}
private function itemClickHandler(event:ListEvent):void {
var index:uint = tl.columnCount * event.rowIndex + event.columnIndex;
var label:String = bids[index].label;
pub.label = label;
pub.setStyle('color', MyRenderer.findColor(label));
pub.close();
tl.selectedIndex = index;
}
]]>
</mx:Script>
<mx:Panel title="TileList scrolling problem" height="100%" width="100%"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:Label width="100%" color="blue" text="Select your bid:"/>
<mx:TileList id="tl2" height="200" width="200"
maxColumns="5" rowHeight="30" columnWidth="60"
dataProvider="{bids}" itemRenderer="MyRenderer"/>
</mx:Panel>
<mx:ApplicationControlBar width="100%">
<mx:Spacer width="100%"/>
<mx:CheckBox id="auto" label="Auto:"/>
<mx:Button id="left" label="<<"/>
<mx:PopUpButton id="pub" width="90"/>
<mx:Button id="right" label=">>"/>
</mx:ApplicationControlBar>
</mx:Application>
.
<Сильное> Обновление:
Спасибо Уэйд, предупреждение исчезнет сейчас (я думаю, не был в порядке, чтобы использовать {data.label} на моей метке), но «TL2» все еще имеет проблемы с прокруткой. .
Новый myrenderer.mxml (все еще имеет проблемы с прокруткой):
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
width="100%" height="100%">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
var str:String = String(value.label);
myLabel.text = str;
myLabel.setStyle('color', findColor(str));
}
public static function findColor(str:String):uint {
return (str.indexOf('♥') != -1 ||
str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000;
}
]]>
</mx:Script>
<mx:Label id="myLabel" truncateToFit="true" width="60"/>
</mx:Canvas>
. Решение
Вы можете позаботиться об обоих ваших проблемах, переопределяя установленные метод данных на ваш reender:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
verticalScrollPolicy="off" horizontalScrollPolicy="off"
width="100%" height="100%">
<mx:Script>
<![CDATA[
override public function set data(value:Object):void {
super.data = value;
var str:String = value.label;
this.myLabel.text = str;
this.myLabel.setStyle("color", (str.indexOf('♥') != -1 ||
str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000);
}
]]>
</mx:Script>
<mx:Label id="myLabel" truncateToFit="true" width="60"/>
</mx:Canvas>
.
Поскольку рендереры повторно используются, лучший способ убедиться, что они правильно обновлены, состоит в том, чтобы использовать метод заданного данных, поскольку он всегда вызывается при повторном использовании рендеры.Это также избавляется от вашего связывания предупреждения, так как вы больше не связываетесь с Data.label.Примечание. Я не проверил этот код, это может понадобиться подстройка :) Надеюсь, что помогает.
Редактировать: Ваш вопрос «TL2» выглядит так, как будто это вызвано горизонтально прокруткой списка плитка, тогда как тильист, кажется, оптимизирован для вертикальной прокрутки.Поскольку ваш набор данных конечно и относительно маленький, я бы сделал список плитки полным размером, чтобы показать все элементы (устранение рендерера повторного использования элементов) и оберните его в холсте, установленном на нужные размеры, и пусть холст обрабатывает прокруткуОтказВероятно, не ответ, который вы ищете, извините.