Отдельные боксы

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.

Код AS3:

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

И файл myItemRenderer.mxml

Код AS3:

<?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

Цитата:

Сообщение от Astraport

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

Код AS3:

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

И файл myItemRenderer.mxml

Код AS3:

<?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 примерно такого формата:

Код AS3:

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

sstotenkopf · 14.10.2011, 00:57

Цитата:

Сообщение от Astraport

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

Код AS3:

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

Цитата:

Сообщение от Astraport

Ну так ищите ошибку - это работает.
Можно и без этого "средство визуализации элементов" обойтись просто создав 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

Код AS3:

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

Цитата:

Сообщение от Astraport

Я же писал, что нужно использовать ArrayCollection

Код AS3:

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="ваше_расстояние", какие проблемы? Вы ранее не писали про проблемы с расстояниями.
Ранее у вас были другие болезни.