Просмотр полной версии : Отдельные боксы
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
Да не в напрягании дело, а в последовательности.
Работает на vBulletin ® версия 3.7.3. Copyright ©2000-2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Copyright © 1999-2008 Flasher.ru. All rights reserved.