2 проблемы с PopUpButton и TileList

afarber · 25.07.2010, 21:41

Привет, пытаюсь изобразить PopUpButton и
TileList с красными или черными данными и в
основном работает (см. код внизу), но есть 2 проблемки:

1) scrolling "tl2" не работает, данные смазываются
2) в debug-режиме получаю много предупреждений

Цитата:

warning: unable to bind to property 'label' on class 'Object' (class
is not an 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="&lt;&lt;"/>
               <mx:PopUpButton id="pub" width="90"/>
               <mx:Button id="right" label="&gt;&gt;"/>
       </mx:ApplicationControlBar>
</mx:Application>

Хемуль · 25.07.2010, 23:55

Проблема известная.
http://blog.152.org/2009/11/flex-til...g-problem.html
http://groups.google.com/group/flex_...a4ff800cb78537
http://old.nabble.com/-flex_india%3A...html#a24766255

У меня так и не получилось заставить это дело работать правильно, используя один из предложенных методов.

afarber · 26.07.2010, 00:47

Да, я тоже много обсуждений уже видел.

Но например здесь TileList с картинками и галочками -
http://forums.adobe.com/message/2939121
и работает.

Я думаю у меня какой-то мелочи не хватает,
пробовал и др. варианты: цвет в bids добавлять
или [Bindable] var color в моем рендере,
но настоящего решения пока не нашел.

afarber · 26.07.2010, 14:29

Подправил MyRenderer.mxl и избавился от warning (наверное нельзя было пользоваться {data.label} в рендерере), а вот проблема со скролингом "tl2" (см. приложенный .swf файл) к сожалению все еще не решена -

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>

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="&lt;&lt;"/>
		<mx:PopUpButton id="pub" width="90"/>
		<mx:Button id="right" label="&gt;&gt;"/>
	</mx:ApplicationControlBar>
</mx:Application>