PDA

Просмотр полной версии : Отдельные боксы


sstotenkopf
13.10.2011, 23:36
Как, используя tilelist сделать компоненты dataprovider отдельными боксами, я так полагаю стоит использовать itemrenderer но в каком ключе не знаю. Заранее спасибо!


<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init();">

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.List;
[Bindable]
public var arr:Array = ['sam', 'george', 'harris']
//{label:"David", id:"11/19/1995"}, {label:"Collen", id:"4/20/1993"}, {label:"Sharon", id:"9/06/1997"}, {label:"Ronnie", id:"7/6/1993"}, {label:"James", id:"2/15/1994"},


protected function init():void {

//for(i=0; i < arr.length; i++) {




}
]]>
</fx:Script>
<mx:TileList x="145" y="28" width="505" height="294" id="dg" dataProvider="{arr}">
<mx:itemRenderer>
<fx:Component>
<mx:HBox width="150" height="50">
<mx:Image height="47" width="50" source="http://cs10864.vkontakte.ru/g22570536/c_157848f1.jpg" ></mx:Image>
<mx:Label text="{data}"/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:TileList>


</s:Application>

Astraport
14.10.2011, 00:16
Ничего не понятно.
По простому DataProvider это массив данных, а ItemRenderer - это визуализация этих данных.
Удобнее делать ItemRenderer в виде отдельного класса. Да и List использовать вместо TileList.

<s:List x="145" y="28" width="505" height="294" id="dg" dataProvider="{arr}" itemRenderer="components.myItemRenderer"/>

И файл myItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:HBox width="150" height="50">
<mx:Image height="47" width="50" source="{data.source}" ></mx:Image>
<mx:Label text="{data.label}"/>
</mx:HBox>
</s:ItemRenderer>

sstotenkopf
14.10.2011, 00:30
Ничего не понятно.
По простому DataProvider это массив данных, а ItemRenderer - это визуализация этих данных.
Удобнее делать ItemRenderer в виде отдельного класса. Да и List использовать вместо TileList.

<s:List x="145" y="28" width="505" height="294" id="dg" dataProvider="{arr}" itemRenderer="components.myItemRenderer"/>

И файл myItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:HBox width="150" height="50">
<mx:Image height="47" width="50" source="{data.source}" ></mx:Image>
<mx:Label text="{data.label}"/>
</mx:HBox>
</s:ItemRenderer>

Попробую объяснить... Мне нужно реализовать окно в котором будут объекты - фотографии, имена и фамилии пользователей, источник данных - массив, до этого делал путем цикличного добавления объектов hbox с image и label в контейнер, но когда дело дошло до создания поиска по первому символу, мне посоветовали делать через dataprovider. В первом случае, мои объекты были отделены друг от друга имели эффекты, сейчас ломаю голову, как это можно реализовать таким методом. Что датапровайдер этот массив данных я прекрасно понимаю, проблема в том, как реализовать, описанную мною выше, визуализацию через itemrenderer, может быть подойдет что то другое, но я об этом просто не знаю

Добавлено через 10 минут
Попробовал вашим способом... появляющаяся полоса загрузки, заполняется на 3/4 и тишина...

Astraport
14.10.2011, 00:51
Попробую объяснить... Мне нужно реализовать окно в котором будут объекты - фотографии, имена и фамилии пользователей, источник данных - массив, до этого делал путем цикличного добавления объектов hbox с image и label в контейнер
Я привел пример, который это реализует.
Только некрасиво будет видимо. Если выводить картинку, а под ней Label, то лучше использовать VBox.
Вместо массива лучше использовать ArrayCollection примерно такого формата:

public var arr:ArrayCollection = ([{label:"David", source:"87874.jpg"}, {label:"xcvxcv", source:"67567.jpg"}]);

sstotenkopf
14.10.2011, 00:57
Я привел пример, который это реализует.
Только некрасиво будет видимо. Если выводить картинку, а под ней Label, то лучше использовать VBox.
Вместо массива лучше использовать ArrayCollection примерно такого формата:

public var arr:ArrayCollection = ([{label:"David", source:"87874.jpg"}, {label:"xcvxcv", source:"67567.jpg"}]);

Проблема в том, что при добавлении mxml файла как "средство визуализации элементов", как я писал выше, просто не грузит приложение, без всяких ошибок, у меня fb4...

Astraport
14.10.2011, 01:12
Ну так ищите ошибку - это работает.
Можно и без этого "средство визуализации элементов" обойтись просто создав MXML компонент VGroup например и назначив его итемрендером.

sstotenkopf
14.10.2011, 01:25
Ну так ищите ошибку - это работает.
Можно и без этого "средство визуализации элементов" обойтись просто создав MXML компонент VGroup например и назначив его итемрендером.

Ошибки в пустом проекте (специально создал для теста)?

Вот оба файла, может fb глючит... хотя больше склоняюсь к своим кривым рукам)
test.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
[Bindable]

public var arr:Array = [
{label:"David", sn:"harisson"},
{label:"Collen", sn:"johnson"},
{label:"Sharon", sn:"marshal"},
{label:"Ronnie", sn:"cartman"}]

]]>
</fx:Script>
<fx:Declarations>
<!-- Разместить невизуальные элементы (например, службы или объекты значений) -->
</fx:Declarations>
<s:List x="145" y="28" width="505" height="294" id="dg" dataProvider="{arr}" itemRenderer="components.itr"/>

</s:Application>


components/itr.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<mx:HBox width="150" height="50">
<mx:Image height="47" width="50" source="http://cs10864.vkontakte.ru/g22570536/c_157848f1.jpg" ></mx:Image>
<mx:Label text="{data.label}"/>
</mx:HBox>
</s:ItemRenderer>

Astraport
14.10.2011, 10:34
Я же писал, что нужно использовать ArrayCollection
public var arr:ArrayCollection = new ArrayCollection([{label:"David", sn:"harisson"}, {label:"Collen", sn:"johnson"}, {label:"Sharon", sn:"marshal"}, {label:"Ronnie", sn:"cartman"}]);

И вообще, как можно тестировать приложение без debug плеера?

sstotenkopf
14.10.2011, 15:42
Я же писал, что нужно использовать ArrayCollection
public var arr:ArrayCollection = new ArrayCollection([{label:"David", sn:"harisson"}, {label:"Collen", sn:"johnson"}, {label:"Sharon", sn:"marshal"}, {label:"Ronnie", sn:"cartman"}]);

И вообще, как можно тестировать приложение без debug плеера?

Запустил ваш пример, тоже самое, что и мой только в list, а мне нужно, чтобы было расстояние между боксами

Astraport
14.10.2011, 16:08
ну так пишите gap="ваше_расстояние", какие проблемы? Вы ранее не писали про проблемы с расстояниями.
Ранее у вас были другие болезни.

sstotenkopf
14.10.2011, 16:46
ну так пишите gap="ваше_расстояние", какие проблемы? Вы ранее не писали про проблемы с расстояниями.
Ранее у вас были другие болезни.

Большое спасибо за советы... не буду больше напрягать, попробую дальше разобраться сам...

Astraport
14.10.2011, 16:57
Да не в напрягании дело, а в последовательности.