TileList 및 사용자 지정 렌더러가있는 PopupButton

StackOverflow https://stackoverflow.com/questions/3331154

문제

Black and Red Entries가있는 TileList를 열고있는 PopupButton이 간단한 테스트 케이스를 준비했지만 주로 작동하지만 2 개의 성가가 있습니다.

나는 많은 것을 검색하고, 여러 변형을 시도했다 (내 렌더러에 [바인딩 가능한] 멤버가 추가되었다. 입찰가 배열에 색상 구성원이 추가되었습니다. 내 공개 재정의 SET 데이터 () 메서드를 생성했습니다. .) 그리고 몇 가지 답을 얻고 있었지만 너무 일반적인 방법입니다.

누군가가 코드에서 2 가지 문제를 수정하는 코드를 제안 할 수있는 경우 :

1) "TL2"스크롤 오른쪽 왼쪽이 잘 작동하지 않습니다. 항목이 빨간색과 검정색으로 표시됩니다. 나는 TileList가 itemRenderer를 재사용하는 것을 안다. 그러나 어떻게 문제를 해결할 수 있습니까?

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

도움이 되었습니까?

해결책

항목 렌더러에서 설정된 데이터 메소드를 무시하여 문제를 해결할 수 있습니다. 

<?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"문제는 타일 목록을 수평으로 스크롤하는 것으로 인해 발생하는 반면, TileList는 수직 스크롤에 맞게 최적화 된 것으로 보입니다.귀하의 데이터 세트가 유한하고 상대적으로 작기 때문에 타일 목록은 모든 요소를 표시하도록 전체 크기 (항목 렌더러 재사용 제거)를 표시하고 캔버스를 원하는 차원으로 설정하고 캔버스가 스크롤을 처리하도록합니다....에아마 당신이 찾고있는 대답이 아닐 것입니다. 죄송합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top