Как вы комбинируете рендереры в flex?

Question

Я пытаюсь создать общий элемент управления списком, в котором есть кнопки x, чтобы пользователи могли удалять элементы из списка, нажимая кнопку x. Однако этот элемент управления списком должен поддерживать средства визуализации элементов, в то же время стандартизируя макет элементов, размещаемых рядом с кнопками x.

Поэтому я считаю, что лучшим подходом было бы расширить элемент управления списком и использовать средство рендеринга, которое рисует кнопку x и объединяет его с тем, что когда-либо предоставлял пользователь. К сожалению, я не могу понять, как это сделать.

Я попытался переопределить метод newInstance из интерфейса IFactory и использовал его для создания HBox, который содержит мою кнопку и вставляет результат newInstance из предоставленного пользователем средства визуализации, однако он не был завершен. Он отображался, как я и ожидал, но эффект наведения мыши работал только на предоставленной пользователем части рендерера, а не на всем HBox, который сделал мой пользовательский рендерер.

В документации Flex по этому вопросу, по-видимому, отсутствует много деталей.

Я делаю все это в Action Script 3.

Answer 1

Я не думаю, что способ сделать это - расширить элемент управления List.Вместо этого я бы попытался создать свой собственный itemRenderer, а затем расширить его по мере необходимости.Один из подходов к достижению этой цели может быть следующим:

• Создайте свой собственный SkinnableComponent, который реализует IItemRenderer или IDataRenderer.
• Добавьте компоненту требуемую деталь (кнопка Удалить) и необходимое вам поведение (например, обработчик щелчка deleteButton)
• Расширьте созданный вами компонент для создания конкретных средств визуализации.

РЕДАКТИРОВАТЬ: добавлен пример

Это простой пример того, как вы можете создать itemRenderer, расширяющий SkinnableComponent и реализующий IDataRenderer.Поддерживает 2 состояния, нормальное и зависание.Обратите внимание, что ItemRenderers очень дороги в создании во Flex, поэтому всегда старайтесь сделать их максимально легкими.

package 
{
    import flash.events.MouseEvent; 
    import mx.core.IDataRenderer;   
    import spark.components.supportClasses.ButtonBase;
    import spark.components.supportClasses.SkinnableComponent;

    [SkinState("normal")]
    [SkinState("hovered")]
    public class LearningRenderer extends SkinnableComponent implements IDataRenderer
    {

        /** Define the skin parts. */
        [SkinPart(required="true")]
        public var deleteButton:ButtonBase;

        public function LearningRenderer()
        {
            super();
            // Set the skin class.
            setStyle("skinClass", LearningRendererSkin);
            // Add event listeners to support HOVERED.
            addEventListener(MouseEvent.ROLL_OVER, rollOverHandler);
            addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);
        }       

        /** Implement the partAdded() method. */
        override protected function partAdded(partName:String, instance:Object):void 
        {
            super.partAdded(partName, instance);
            if(instance == deleteButton){
                instance.addEventListener(MouseEvent.CLICK, button_clickHandler);
            }
        }

        /** Implement the partRemoved() method. */
        override protected function partRemoved(partName:String, instance:Object):void
        {
            if(instance == deleteButton){
                instance.removeEventListener(MouseEvent.CLICK, button_clickHandler);
            }
        }

        /** Implement the getCurrentSkinState() method. */
        override protected function getCurrentSkinState():String 
        {   
            var returnState:String = "normal";
            if (bRollOver)
                returnState = "hovered";
            return returnState;
        }

        public function get data():Object
        {
            return _data;
        }

        public function set data(value:Object):void
        {
            _data = value;
        }

        /** Add methods, properties, and metadata. */
        private var _data:Object;
        private var bRollOver:Boolean = false;

        /**
         * Handlers
         */         
        protected function button_clickHandler(eventObj:MouseEvent):void {
            //Handle click
        }

        protected function rollOverHandler(eventObj:MouseEvent):void{
            bRollOver = true;
            invalidateSkinState();
        }

        protected function rollOutHandler(eventObj:MouseEvent):void{
            bRollOver = false;
            invalidateSkinState();
        }       

    }
}

А это скин с необходимой кнопкой удаления:

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("LearningRenderer")]
    </fx:Metadata>
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
    </s:states>
    <s:Button id="deleteButton" label="Delete"/>        
</s:Skin>

Answer 2

Я обнаружил, что самым простым решением было просто использовать сетку данных и средство визуализации элементов для последнего столбца. Я расширил расширенную сетку данных, создав класс EditabledList, и изменил метод «столбцы набора открытых функций», чтобы автоматически добавить свой столбец удаления кнопки в конец. Затем я сделал рендер для удаления кнопки для этого столбца. Привязка действия щелчка была немного хитрой, поскольку у меня была только ссылка на данные для этой строки, а не ссылка на список. Я обошел это путем переопределения метода «public set dataProvider» для замены каждого элемента в списке моим собственным пользовательским объектом, который имеет ссылку на список, уникальный идентификатор и метод «removeMe». Я назвал этот объект EditableListItem. К сожалению, побочным эффектом является то, что привязке данных должен предшествовать дополнительный «.data», поскольку объекты пользователя хранятся в свойстве «data» моего EditableListItem.

Вот так выглядит мой рендерер.

<fx:Component className="buttonRenderer">
    <s:MXAdvancedDataGridItemRenderer height="100%" width="100%">
        <s:Button left="5" top="5" skinClass="{buttonSkin}" click="EditableList.clickButton(data)"
            useHandCursor="true" buttonMode="true" toolTip="Remove item"/>
    </s:MXAdvancedDataGridItemRenderer>
</fx:Component>

ButtonSkin только что визуализировал пользовательское изображение с эффектами прокрутки.

Answer 3

Прежде всего - убедитесь, что вы используете элементы управления списком Spark, а не элементы управления MX.Известно, что с рендерами MX-предметов было сложно иметь дело.В отличие от этого, рендеры с искрой довольно просты и просты в обращении.

Теперь ... начните здесь Быстрый запуск Flex - Использование средств визуализации Spark Item .

Наконец - вот более подробное обсуждение того, как Определить пользовательский рендер Spark Item .

---

Я знаю, что вы сказали: "Я делаю все это в ActionScript.3 "(я предполагаю, что это означает, что вы по какой-то причине избегаете mxml).... но если вы используете элементы управления списком и средства визуализации элементов, то вы используете среду Flex, даже если вы не программируете в MXML.

Итак, вышеуказанные ресурсы применимы, будь то MXML или чистый AS3.Просто помните, что каждый документ MXML соответствует классу AS3, который генерируется компилятором mxml.Корневой тег xml документа mxml сообщает, какой класс будет расширяться сгенерированным классом.

, поэтому, когда вы видите файл mxml с именем «MyRenderer.mxml», и его содержимое выглядит следующим образом:

<s:ItemRenderer>
   ...
</s:ItemRenderer>

вы знаете, что это соответствует определению класса чистой AS3, например так:

class MyRenderer extends ItemRenderer {
    ...
}

По моему мнению, когда вы начинаете заниматься ItemRenderers и используете компоненты Spark (или даже MX), MXML намного легче работать, чем чистый AS3.В конце концов, компоненты каркаса были разработаны для использования из mxml.

Удачи!