Flex 4. Передача данных из основного приложения в пользовательский компонент - PullRequest
Новая
       20

Flex 4. Передача данных из основного приложения в пользовательский компонент

3 голосов
/ 15 октября 2010

В другом месте я не нашел того, чего хочу, или, по крайней мере, не достиг достаточного уровня, чтобы приспособиться

Я пытаюсь создать проект, который показывает радиостанции с логотипом, кнопкой прослушивания и т. Д.

Источником данных является XML-файл с дочерними тегами, такими как 'name', 'image' и 'listen' для каждого родителя, 'station'. Я получаю доступ к этим данным через основное приложение с creationComplete = "radioService.send ()" Затем я могу использовать его в основном приложении через dataProvider = "{radioService.lastResult.stations.station}

Однако я хочу использовать результаты для заполнения переменных в пользовательском компоненте в обоих компонентах

жестко закодированные примеры

mx: Image source = "Images / BBC5.gif" id = "bbc5Logo" "/>

mx: LinkButton id = "bbc5Listen" click = "bbc5Listen_clickHandler (event)" />

и в обработчике кликов

защищенная функция bbc5Listen_clickHandler (событие: MouseEvent): пусто {

var url: String = "http://www.bbc.co.uk/iplayer/console/bbc_radio_five_live"; var request: URLRequest = новый URLRequest (url);

} Любая помощь, высоко ценится

Ответы [ 5 ]

0 голосов
/ 09 мая 2011

Я думаю, что это может быть полезно, чтобы передать значение из mainApp в пользовательский компонент, вы можете следовать этому методу. Поскольку у вас есть значение в mainApp, в пользовательском компоненте вы можете получить доступ к значению с помощью объекта parentDocument. parentDocument.rootAppVar

0 голосов
/ 11 апреля 2011

Есть два способа сделать это:

  • Вы должны обернуть свою структуру данных из источника XML в [Bindable] actionScript объект (не обязательно, но вы можете справиться с этим проще), и связатьмассив этих экземпляров данных (скажем, RadioChannel.class) как dataProvider вашей сетки.Внутри вашей реализации itemRenderer вы можете получить доступ к экземпляру RadioChannel текущей строки через data getter / setter:

RadioChannel.as: 

[Bindable]
public class RadioChannel {

    private var _name: String;
    private var _imageUrl: String;
    private var _listenUrl: String; 

    public function RadioChannel()
    {
    }

    public function get name():String {return _name;}
    public function set name(value:String):void {_name = value;}

    public function get imageUrl():String {return _imageUrl;}
    public function set imageUrl(value:String):void {_imageUrl = value;}

    public function get listenUrl():String {return _listenUrl;}
    public function set listenUrl(value:String):void {_listenUrl = value;}

    public function toString():String
    {
        return 'RadioChannel ' + name + ' - image: ' + imageUrl + 
            ' | listen at ' + listenUrl;

    }
}

RadioList.mxml: 

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" dataProvider="{radioChannels}">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private var _radioChannels:ArrayCollection = new ArrayCollection();
            [Bindable]
            private function get radioChannels():ArrayCollection {return _radioChannels;}
            private function set radioChannels(value:ArrayCollection):void {_radioChannels = value;}

        ]]>
    </fx:Script>
    <mx:columns>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <fx:Component>
                    <mx:Image source="{data.imageUrl}">
                        <fx:Script>
                            <![CDATA[

                                public override function set data(value:Object):void
                                {
                                    super.data = value;
                                    trace('current instance: ' + RadioChannel(data).toString());
                                }

                            ]]>
                        </fx:Script>
                    </mx:Image>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
        <mx:DataGridColumn dataField="name" />
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <fx:Component>
                    <mx:HBox>
                        <fx:Script>
                            <![CDATA[
                                protected function onLinkClicked(event:MouseEvent):void
                                {
                                    var currentChannel:RadioChannel = RadioChannel(data);
                                    if (data)
                                    {
                                        var request:URLRequest = new URLRequest(currentChannel.listenUrl);
                                        [...]
                                    }
                                }

                            ]]>
                        </fx:Script>
                        <mx:Button click="onLinkClicked(event)" label="Listen" />
                    </mx:HBox>
                </fx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>
  • Другой способ - создать пользовательские события, имеющие дело с дополнительным параметром: URL-адресом канала.Эти пользовательские события должны каскадно вернуться к компоненту списка, где они должны быть обработаны.

Поскольку для второго решения вам по-прежнему потребуется также связывание первого, я бы выбрал первое и обработал событие click локально.

надеюсь, что это помогло.

0 голосов
/ 16 октября 2010

Другим подходом может быть создание объектов Value из вашего XML и привязка ваших компонентов к этим объектам, таким образом вы бы отделили свои компоненты от XML, что может быть удобно, если в какой-то момент в будущем вы не хотите использовать XML, но JSON, например.

Каждый объект значения будет иметь свойства, определенные в вашем вопросе, т.е. imageSource, id, url и т. Д., И каждый компонент будет привязан к одному объекту значения

Редактировать Ознакомьтесь с этим обучающим видео, оно охватывает извлечение данных из XML, ArrayCollections из ValueObjets и т. Д ...
http://www.adobe.com/devnet/flex/videotraining.html

0 голосов
/ 17 октября 2010

Вы можете использовать пользовательские события, где вы можете передавать значения из основного приложения в пользовательский компонент.

http://www.anujgakhar.com/2009/03/04/flex-passing-data-with-custom-events/

0 голосов
/ 15 октября 2010

Я делал нечто подобное раньше, хотя я не уверен, какой внешний вид вы хотите, чтобы ваше приложение имело, но можно было бы создать сетку данных и привязать источник данных к этой сетке. Затем вы можете добавить поля к источнику данных, например (поле img и использовать ссылку в XML, установив xpath к этому полю), также можно создать кнопку и поместить ее в строку таблицы данных для прослушивания.

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

Надеюсь, это поможет

...