Itemrenderer vs repeater
Folks ,
any difference in using itemrenderer OR repeater
I guess, both have the same functionality.
Not really,
because itemRenderers implements other Interfaces than
repeaters, so you may have access to other propertys like listData
in DataGrids,
thats just one difference, I know
Cheers
Similar Messages
-
Itemrenderer with images doesn't work correctly if variableRowHeight="true"?
Hi all,
I have a problem to use itemrenderer in my project:
I have to show some images in one of my DataGridColumn:
<mx:DataGridColumn id="datasetcolumn" headerText="DataSet"
dataField="dataSetList"
width="240"itemRenderer="DataSetRenderer"/>
The dataSetList is an arraycollection of images;
I use Tile as the itemrederer, My DataSetRenderer is:
<?xml version="1.0" encoding="utf-8"?>
<mx:Tile xmlns:mx="
http://www.adobe.com/2006/mxml"
horizontalScrollPolicy="off" width="90%" height="100%" >
<mx:Metadata>
[Event(name="showCaddwgNOVWebDataset",
type="flash.events.Event")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.AdvancedDataGrid;
import mx.core.IFlexDisplayObject;
import CETEvent.*;
import view.util.*;
import mx.collections.ArrayCollection;
[Bindable] public var myarr:ArrayCollection = new
ArrayCollection();
override public function set data(value:Object):void{
super.data = value;
myarr = value.datasetList;
this.myrep.dataProvider = myarr as ArrayCollection;
]]>
</mx:Script>
<mx:Repeater id="myrep" visible="true" >
<mx:Label text="{myrep.currentItem.itIconName}"/>
<mx:Image id="datasetImg"
source="{myrep.currentItem.itIconName}"
useHandCursor="true" buttonMode="true" mouseChildren="false"
toolTip="{myrep.currentItem.itName}"/>
</mx:Repeater>
</mx:Tile>
The problem is:
Whenever you change the column size or scroll down the
datagrid,
the images will be added again.
if the datasetlist is changed the old images doesn't clean up
and
all the images messed up
Any suggestion is appretiated!
Thanks in advanceI loved Ben's suggestion because it promised to be a low-effort workaround, but, alas, I get the same problem: "lvlib is already loaded from this path...".
I tried Olivia's workaround for CAR 124214. It worked great for the simple lvproj that is posted above. (Hooray!) It didn't work so well in my real project, that has about 30 lvlibs and lvclasses. About 3/4 of the way through the save, I got a compiler error and LabView crashed. (Boo!) I submitted the crash log on this, but it's hard to imagine how anyone in R&D could make any progress debugging this without the source code. (And I can't submit the source because I can't export a copy of it!)
Anyway, thank you very much Ben and Olivia for your suggestions. I have lvclasses embedded in lvlibs (primarily for organizational reasons) and since LabView tanked while saving one of those, perhaps the workaround doesn't work in this case. I may try again after removing the lvclasses from the lvlibs so that the hierarchy is flatter.
-Rob -
Datagrid itemRenderer dynamic values
While working on an application I came across the following
problem. I've got a view with a datagrid, where I have several
columns. Each column needs 2 values displayed beneath each other in
one cell. You make an itemRenderer with 2 labels inside a VBox.
Easy so far. However since this scenario repeats several times it
seems counterproductive to make an itemRenderer for each cell. How
can I make the text property for the labels change for each cell
instead of being static in their values.
Thx in advance.Your description of your requirements and your sample code do
not paint a clear enough picture.
Your dataProvider has 4 pieces of data: batchId,
bookingNumber, valueDate, immsBranch. Your current itemRenderer
references two of those pieces of data, and you say you want to
reference the other two. You can do that easily like this:
<mx:Label text="data.valueDate"/>
<mx:Label text="data.immsBranch"/>
A basic question: will your DataGrid have two rows for each
set of 4 pieces of data? If so then I understand your problem. If
not, then you must clarify exactly how and when you would like the
4 pieces of data shown in your DataGrid.
In any case, you probably need a Repeater, and then need to
figure out how to get at the right data at the right time in the
Repeater.
See this FB 3 help topic and its sub-topics:
Dynamically Repeating Controls and Containers
Also search for this in the FB3 help to see the API:
mx.core.Repeater
You can define a listener for the Repeater for the Repeat
event to specify processing for each iteration of the
repeater. -
Websubscriber component is not working with itemrenderer
Hi All
In my chat application I am creating a list of members with their video feed. For video feeds I am using web subscriber component.
Right now I am doing this via repeater component, i know repeater is not good option compared to item renderer. But when I try to achieve same result using item renderer,
Problem is subscriber component inside item renderer is not getting any video feed.
Another issue with websubscriber component by default it is taking 5px padding from left due that I am unable to align this with its parent container border .
Looking for suggestions
Thanks,
RiteshFollowing is my app code..
<!-- VideoChat.mxml -->
<mx:Script>
<![CDATA[
protected function Session_synchronizationChangeHandler(event:SessionEvent):void
this.list.itemRenderer = new ClassFactory(MembersItemrenderer);
]]>
</mx:Script>
<rtc:AdobeHSAuthenticator
id="auth" userName="guest" password="password" />
<rtc:ConnectSessionContainer synchronizationChange="cSession_synchronizationChangeHandler(event)" id="cSession" authenticator="{auth}" width="100%" height="100%" roomURL="yourroomurl" >
<mx:List width="100%" height="100%" id="list"dataProvider="{cSession.userManager.userCollection}"/>
</rtc:ConnectSessionContainer>
<!-- MembersItemrenderer.mxml -->
<?xml version = "1.0" encoding = "utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="left" horizontalGap="0" xmlns:rtc="http://ns.adobe.com/rtc"
implements = "mx.controls.listClasses.IListItemRenderer" >
<mx:Script>
<![CDATA[
import com.adobe.rtc.sharedManagers.descriptors.UserDescriptor;
]]>
</mx:Script>
<rtc:WebcamSubscriber displayUserBars="false" id="membersWebcamSubscriber" publisherIDs="{[(data as UserDescriptor).userID]}" />
<mx:Label text="{[(data as UserDescriptor).displayName]}" />
</mx:HBox> -
Datagrid itemrenderer causing weird data scrolling behaviour
I have a datagrid bound to an array for editing and viewing.
I have a listener for an ItemEditEnd event which looks at the
input, chomps any whitespace and writes back to the itemrenderer
the updated string. But... if I then reload the data into the
dataprovider the datagrid doesn't render it properly because it
retains a memory of the previously edited value and re-displays it
on the line below where it was. So repeatedly reloading the data
causes edited values to magically scroll themselves downwards in
the datagrid!
I gues this is something to do with itemrenderers being
recycled, but I have no idea how to code around it. Any help would
be gratefully received. A simplified mock up of the problem is
attached.
Many thanks in advance,
SteveNothing new in that article, maybe as the series
progresses...
I have a found a hack around this but it's not the way I want
to do it. If I add the itemeditend event listener with a very low
priority (-100) so it gets executed after flex has already updated
the datagrid I can interact directly with the data, instead of the
itemeditor/renderer before the data is updated. This means I can't
do a preventUpdate() and force the user to correct the input so is
not ideal, but it works in this limited application.
I did find this:
http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_8.html
which has exactly the same case of needing to modify data sent back
from an itemeditor. It pokes the modified data back to
TextInput(myGrid.itemEditorInstance).text which is the same object
as my (event.itemRenderer as TextInput).text. Doesn't work.
I attach my code for anyone else struggling with this. If
anyone has a better solution I'd love to see it.
Steve -
Hi,
Having a problem with using an itemRenderer in datagrid
column, the custom column appears correctly but whenever I
dynamically change the dataProvider I get a repeat of the custom
column and as I'm potentially using a dataProvider with a different
schema to the initially loaded schema I then get a mixture of the
old schema and current schema fields. It all appears to work
correctly though if I don't create the custom column.
See attached code for creating custom column which is created
when I get the data result(onResult) and also the code for the
itemRenderer (ButtonAddToPlaylist).
Thanks,
MikeHi,
Having a problem with using an itemRenderer in datagrid
column, the custom column appears correctly but whenever I
dynamically change the dataProvider I get a repeat of the custom
column and as I'm potentially using a dataProvider with a different
schema to the initially loaded schema I then get a mixture of the
old schema and current schema fields. It all appears to work
correctly though if I don't create the custom column.
See attached code for creating custom column which is created
when I get the data result(onResult) and also the code for the
itemRenderer (ButtonAddToPlaylist).
Thanks,
Mike -
Dispatch event from itemrenderer
Greetings.
i've got a main applicationxml: main.mxml
followed by a component: optionbox.mxml, being loaded in the
main.mxml.
in optionbox.mxml another component is loaded:
optionCanvas.mxml
inhere, a datagrid is being created with a custom
itemrenderer: itemsRenderer.mxml
in this itemsRenderer (wich alters the display of the cells)
is an image located.
when you click this image, an object has to be dispatched to
the main.mxml.
how can I do this? It works when I dispatch from a component,
but not from an itemrenderer.
can anyone help me out.??
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="vertical"
xmlns:c="comp.*"
backgroundAlpha="0"
backgroundColor="#FFFFFF">
<mx:«»Style>
global{
fontFamily:Arial;
Canvas{
color:#000000;
.FooterLink{
color:#0066CB;
fontWeight:Bold;
fontThickness:900;
.Footer{
backgroundColor:#E1F0F7;
DataGrid{
borderThickness:0;
selectionColor:#FFFFFF;
selectionDisabledColor:#FFFFFF;
disabledColor:#FFFFFF;
rollOverColor:#FFFFFF;
ToolTip {
fontFamily: Arial;
fontSize: 12;
color: #000000;
</mx:«»Style>
<mx:«»Script>
<![CDATA[
import events.itemEvent;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var selectedItems:ArrayCollection = new
ArrayCollection();
private function photoSelectedHandler(event:itemEvent):void{
selectedItems.addItem(event.selectedItem);
]]>
</mx:«»Script>
<mx:VBox width="980" height="100%">
<mx:HBox>
<mx:VBox>
<c:LeftPane id="leftpane" width="201" height="100%" />
<c:Checkout id="checkout" selectedItems="{selectedItems}"
styleName="checkout" fontWeight="bold"/>
</mx:VBox>
<c:«»Swfcontainer width="537"
height="405" />
<c:OptionBox width="222" height="100%" id="optionBox"
itemSelected="{photoSelectedHandler(event)}"/>
</mx:HBox>
<c:Footer width="100%"
styleName="Footer"></c:Footer>
</mx:VBox>
</mx:Application>
[/code:1]
optionbox.mxml
[code:1]<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
color="#400000" creationComplete="printerData.send()"
xmlns:c="comp.*">
<mx:Metadata>
[Event(name="itemSelected",
type="events.itemEvent"«»)]
</mx:Metadata>
<mx:«»Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var printer:ArrayCollection
private function printerDataHandler(event:ResultEvent):void{
printer = new ArrayCollection();
printer=event.result.printer.confItem;
]]>
</mx:«»Script>
<mx:HTTPService id="printerData" url="data/data.xml"
result="printerDataHandler(event)"/>
<mx:Accordion id="accOptions" width="100%" height="100%"
headerHeight="32" backgroundAlpha="0" fontSize="11" color="#0066CB"
resizeToContent="true">
<mx:Canvas label="{printer.getItemAt(0).label}"
width="100%" height="100%" backgroundAlpha="0">
<mx:VBox>
<mx:Text width="198"
htmlText="{printer.getItemAt(0).text}" />
</mx:VBox>
</mx:Canvas>
<mx:Repeater id="repAccOptions" dataProvider="{printer}"
startingIndex="1" >
<c:optionCanvas
itemData="{repAccOptions.currentItem}"/>
</mx:Repeater>
</mx:Accordion>
</mx:HBox>[/code:1]
optionCanvas.mxml
[code:1]<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="
http://www.adobe.com/2006/mxml"
label="{itemData.label}" width="100%" height="100%"
verticalScrollPolicy="off">
<mx:«»Script>
<![CDATA[
[Bindable]
public var itemData:Object;
]]>
</mx:«»Script>
<mx:VBox width="100%">
<mx:Text width="100%" htmlText="{itemData.text}" />
<mx:«»DataGrid
dataProvider="{itemData.consumables.consumable}"
headerHeight="0"
width="100%" itemRenderer="itemRenderers.OptionsRender"
alternatingItemColors="#FFFFFF">
<mx:columns>
<mx:«»DataGridColumn
dataField="consumableLabel" width="200"/>
</mx:columns>
</mx:«»DataGrid>
</mx:VBox>
</mx:Canvas>[/code:1]
optionsRenderer.mxml
[code:1]<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="
http://www.adobe.com/2006/mxml"
verticalScrollPolicy="off" horizontalScrollPolicy="off" width="165"
height="45">
<mx:Metadata>
[Event(name="itemSelected",
type="events.itemEvent"«»)]
</mx:Metadata>
<mx:«»Script>
<![CDATA[
import events.itemEvent;
[Bindable]
public var selectedItem:Object;
private function addItem(itemObj:Object):void{
selectedItem = new Object();
selectedItem = itemObj;
var eventObj:itemEvent = new
itemEvent(selectedItem,"itemSelected"«»);
dispatchEvent(eventObj);
]]>
</mx:«»Script>
<mx:Image source="assets/btnAddItem.jpg"
click="addItem(data)"/>
<mx:Text htmlText="{data.consumableLabel}"
height="45"/>
<mx:Image source="assets/btnInfoItem.jpg"
horizontalAlign="right">
<mx:toolTip>
{data.consumableLabel}
Partnumber:{data.consumablePartnr}
Price:{data.consumablePrice}
Omschrijving
{data.consumableDescr}</mx:toolTip>
</mx:Image>
</mx:HBox>[/code:1]Override clone() method inside event to make sure you take into account the bubbling property, and then inside renderer dispatch the event with bubbling property set to true.
Alternatively you can dispatch on the list e.g :
owner.dispatchEvent(newCopyProductEvent(CopyProductEvent.COPY_PRODUCT,o));
If you choose to do the latter make sure you don;t get into an infinite loop inside list if you decide to redispatch from there,
C -
Drag Event Problem in ItemRenderer
Hi Everyone,
I faced the problem in Drag Drop event occur in the Item Renderer. Here i attach the screen shot. If any one know the solution please let me know.
Thanks in Advance,
CharlesHi,
Actually the Datagrid, label and text boxes are in one Canvas. I use this Canvas in One ItemRenderer.mxml and the data are comes from XML file. I Called that ItemRenderer.mxml file into my Main Screen.mxml file. So the ItemRender is repeated based on my Input Data.
Thanks,
Charles -
Well guys, I seem stuck with a wall trying to make List
control working with programmable dataProvider and itemRenderer
defined as a component. The naive example from flex2 dev guide (p.
723 "Using an item renderer with a List control") is working fine,
but in real word we are hardly coding dataProvider inline, so I
tried to change this example and got absolutely nothing in my
browser window:
main application:
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
height="700" width="700" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import flash.events.Event;
import flash.net.URLRequest;
import mx.utils.ArrayUtil;
import mx.collections.ArrayCollection;
[Bindable]
private var u:URLRequest;
private var jobArray: Array = new Array();
private var myAC: ArrayCollection = null;
private function initApp():void {
var myObj1:Object = {label:"Alaska", data:"Juneau",
webPage:"
http://www.state.ak.us/"};
var myObj2:Object = {label:"Alabama", data:"Montgomery",
webPage:"
http://www.alabama.gov/"};
jobArray.push(myObj1);
jobArray.push(myObj2);
myAC = new ArrayCollection(jobArray);
]]>
</mx:Script>
<mx:List id="myList"
height="180" width="250" variableRowHeight="true"
itemRenderer="RendererState" backgroundColor="white"
dataProvider="myAC">
</mx:List>
</mx:Application>
itemRenderer component:
<?xml version="1.0"?>
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import flash.events.Event;
import flash.net.URLRequest;
private var u:URLRequest;
private function handleClick(eventObj:Event):void {
u = new URLRequest(data.webPage);
navigateToURL(u);
]]>
</mx:Script>
<mx:HBox >
<mx:Label id="State" text="State: {data.label}"/>
<mx:Label id="Statecapital" text="Capital: {data.data}"
/>
</mx:HBox>
<mx:LinkButton id="webPage" label="Official {data.label}
web page"
click="handleClick(event);" color="blue" />
</mx:VBox>
Anyone?Ug, why won't adobe let us use tabs in our messages? Just to
make everyone's code harder to read? Anyway...
the very first thing I notice is that your list's
dataProvider has no brackets "{}" to link it to the object. Seems
that should throw an error though... however, there is a way to
mess up your browser by installing the new Flash 9 player without
installing the new SDK so that you don't actually get to see the
errors that are thrown. So be careful there.
First see if the brackets is an issue. Even if it doesn't
throw an error, since you aren't binding the dataProvider property
it may only load the ArrayCollection once when it is still empty
and not after you have pushed the new data. You might also try
setting the dataProvider directly in AS code: list.dataProvider =
[obj1, obj2]
I recommend adjusting your code in various ways first before
finally giving up and posting here. Often that will narrow down the
problem and make it easier to address.
Finally, if you are thinking of having multiple focusable
controls in your itemRenderer/Editor (this goes for either List or
DataGrid) you should abandon the idea right away. Last I checked,
tab focus will not pass correctly between individual renderers (at
least not on IE). My solution is to simply use a Repeater. It has
more overhead and you have to fiddle with scroll bars a bit, but it
is a much more stable and robust solution.
Anyway good luck. -
Hi all,
I have this Component with a DataGroup inside
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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()" close="titlewindow1_closeHandler(event)">
<fx:Script>
<![CDATA[
import com.eworx.seven7eshop.views.presenters.CartPM;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
[Bindable]
public var model:CartPM;
[Bindable]
public var total:int;
private function init():void {
XML.ignoreWhitespace = true;
XML.prettyPrinting = false;
protected function titlewindow1_closeHandler(event:CloseEvent):void
PopUpManager.removePopUp(this);
protected function button1_clickHandler(event:MouseEvent):void
var params:Object = {};
var cartXML:XML = new XML("<order></order>");
for each (var item:Object in cartDg.dataProvider) {
var pId:String = item.pId;
var pName:String = item.pName;
var product:XML = <product pId={pId} pName={pName}></product>;
cartXML.appendChild(product);
params["orders"] = cartXML.toXMLString();
saveOrderServ.send(params);
model.emptyCart();
private function totalItems():void {
cartDg.dataProvider;
protected function httpservice1_resultHandler(event:ResultEvent):void
Alert.show("SAVED");
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:HTTPService id="saveOrderServ" url="http://localhost/Seven7-Eshop-debug/rpc/saveOrders.php" method="POST" result="httpservice1_resultHandler(event)" />
</fx:Declarations>
<s:HGroup id="ordersHeader">
<s:Label id="shoppingCartLabel" text="Shopping Cart" />
<!--<s:Button label="Hide Details" />-->
</s:HGroup>
<s:Group id="marginHolder" width="1000" height="550">
<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xD8B220" />
<s:GradientEntry color="0x986733" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
<s:fill>
<s:BitmapFill source="@Embed('garnish/denimPattern.png')" fillMode="repeat" />
</s:fill>
</s:Rect>
<s:VGroup top="25" left="25" width="100%" horizontalAlign="center">
<s:Scroller width="950" height="450">
<s:DataGroup id="cartDg" width="100%" height="100%"
dataProvider="{new ArrayCollection(model.cartProducts)}"
itemRenderer="CartListItemRenderer">
<s:layout>
<s:VerticalLayout gap="50" />
</s:layout>
</s:DataGroup>
</s:Scroller>
<s:Group>
<s:BitmapImage source="@Embed('garnish/cartCheckoutBorder.png')" />
<s:HGroup verticalAlign="middle">
<s:Label id="totalItemsPrice" text="items / € " />
<s:Button label="checkout" click="button1_clickHandler(event)" />
</s:HGroup>
</s:Group>
</s:VGroup>
</s:Group>
</s:TitleWindow>
And this itemrenderer with a datagrid inside
<?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"
autoDrawBackground="false">
<fx:Script>
<![CDATA[
import com.eworx.seven7eshop.events.CartEvent;
import mx.events.DataGridEvent;
[Bindable]
public var total:int = 0;
protected function color_sizes_itemEditBeginHandler(event:DataGridEvent):void
total = 0;
for each(var item:Object in color_sizes.dataProvider) {
for each(var cell:Object in item) {
if(cell > 0) {
total += cell;
]]>
</fx:Script>
<s:HGroup id="holder" gap="20">
<mx:Image source="{data.pImage}" />
<s:VGroup>
<s:Label id="orderTitle" text="{data.pName}" />
<s:Group width="100%">
<s:HGroup gap="20">
<s:Label id="orderProduct" text="{data.pCode}" />
<s:Label id="orderPrice" text="€ {data.pPrice}" />
</s:HGroup>
<s:Label id="previewTotal" text="Sum: {total} items / € {data.pPrice*total}" right="0" />
</s:Group>
<mx:DataGrid
id="color_sizes"
editable="true"
dataProvider="{data.rows}"
color="0x000000" columns="{data.columns}"
itemEditBegin="color_sizes_itemEditBeginHandler(event)"
/>
</s:VGroup>
</s:HGroup>
</s:ItemRenderer>
This Datagroup has a datagrid where the user can enter how many items want for each color/size. I can calculate the total items for each datagrid but I need to display the total of all datagrids in the parent component where the datagroup is.
How can I do that?I would bypass the DataGrid all together. Using the DataGrid , you have to mess with itemrenderers and indexes ... not
very fun when one can avoid it. Instead , I would do my calculations off of the dataprovider. Then it becomes an elementary exercise of a for-loop and [Bindable] values. -
ItemRenderer doesn't show color bg. [see code]
Hello,
I've been trying to get an itemRenderer within a <skinnableDataContainer> to have color in it's background. The itemRenderer is a pair of labels that repeats over a set of records (retreived remotely) in the dataContainer. I'm using a tileLayout with 7 columns so all the data (each itemRenderer) appears tiled. Everything works fine except the itemRenderer will not show background colors for the normal and hovered states (it defaults to white). Basically I want each repeating itemRenderer object within the container to have a background color.
Application:
<s:SkinnableDataContainer itemRenderer="components.tagoutInfo"
creationComplete="list_creationCompleteHandler(event)"
id="skinnableDataContainer"
dataProvider="{getAlluserTableResult.lastResult}">
<s:layout>
<s:TileLayout requestedColumnCount="7"
orientation="rows"
horizontalGap="1"/>
</s:layout>
</s:SkinnableDataContainer>
itemRenderer:
<s:ItemRenderer name="tagoutInfo"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false" fontSize="10">
<s:layout>
<s:VerticalLayout horizontalAlign="center" paddingBottom="4"/>
</s:layout>
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
</s:states>
<s:Rect id="myRect"
left="0" right="0" top="0" bottom="0"
alpha="1.0">
<s:stroke>
<s:SolidColorStroke color="black"
weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color.normal="red" color.hovered="green"/>
</s:fill>
</s:Rect>
<s:Label text="{data.firstName + ' ' + data.lastName}"/>
<s:Label text="{data.reasonOut + ' ' + data.timeBack}"/>
</s:ItemRenderer>Hi,
It looks like what's happening is that your background Rect is being laid out vertically with the labels. You'll want to put the labels into a separate Group that has the defined vertical layout. This way, the Rect will be drawn behind the group of labels. Let me know if you have any more trouble.
Thanks,
-Kevin -
Repeater, Image, and WebServices
Hello,
I have a FLEX 3 web application that is displaying images
using the following FLEX controls: Tile, Repeater, and Image (Image
inside Repeater, which is inside the Tile control). This works fine
if I create an ArrayCollection during Initialization, and bind the
ArrayCollection to my Repeater. The problem comes when I try to use
a WebService call to retrieve my data. The WebService correctly
returns my data, which I put into the ArrayCollection. The web
application then freezes up, and never displays my Images. If
instead of populating the ArrayCollection I dynamically creating
Image controls and add them to the Tile control, then it works
fine. It is only when I try to use the Repeater that everything
messes up. Any ideas on what is going on here? Here is some of my
code:"NedKost" <[email protected]> wrote in
message
news:ga67dd$ehq$[email protected]..
> Hello,
>
> I have a FLEX 3 web application that is displaying
images using the
> following
> FLEX controls: Tile, Repeater, and Image (Image inside
Repeater, which is
> inside the Tile control). This works fine if I create an
ArrayCollection
> during Initialization, and bind the ArrayCollection to
my Repeater. The
> problem comes when I try to use a WebService call to
retrieve my data.
> The
> WebService correctly returns my data, which I put into
the
> ArrayCollection.
> The web application then freezes up, and never displays
my Images. If
> instead
> of populating the ArrayCollection I dynamically creating
Image controls
> and add
> them to the Tile control, then it works fine. It is only
when I try to
> use the
> Repeater that everything messes up. Any ideas on what is
going on here?
> Here
> is some of my code:
Why not just use Image as the itemRenderer of your TileList
and use
ImagePath as the dataField? -
Hi there,
I'm pulling in XML from yahoo news, and wondering how I would loop over the results to dynamically create items in a list.
Here is my code.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="listService.send()" height="534" width="697">
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.rpc.events.ResultEvent;
namespace ink = "http://www.inktomi.com/";
use namespace ink;
[Bindable]
private var listData:XML;
[Bindable]
public var serviceURL:String = "http://boss.yahooapis.com/ysearch/news/v1/biotechnology";
private const PROXY:String = "http://localhost/employeePhoneDesktop/src/php/proxy.php?url=";
private const APIID:String = "################################################";
private const PARAMS:String = "&format=xml&orderby=date";
private function resultHandler(e:ResultEvent):void {
listData = e.result as XML;
setData();
private function setData():void {
itemTitle.text = listData..result[0].title;
itemDate.text = listData..result[0].date;
itemURL.text = listData..result[0].sourceurl;
itemDescription.text = listData..result[0].abstract;
]]>
</mx:Script>
<mx:HTTPService id="listService" url="{serviceURL + APIID + PARAMS}" result="resultHandler(event)" resultFormat="e4x"/>
<mx:TextArea text="{listData}" x="309" y="312" width="339" height="212"/>
<mx:VBox verticalGap="0">
<mx:Label id="itemTitle" fontWeight="bold" fontSize="12" paddingBottom="0"/>
<mx:Label id="itemURL" />
<mx:Label id="itemDate" />
<mx:Text id="itemDescription" width="300" />
</mx:VBox>
</mx:Canvas>If you get the data back as well formed XML, then just stuff it in an XMLListCollection and use e4x to access the data within as you desire.
Here is a somewhat generic HTTPService example that may be of help:
---------------- mainapp.mxml ---------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="dataRequest.send();filterDataGrid();">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.collections.XMLListCollection;
import mx.controls.CheckBox;
[Bindable] private var xlc:XMLListCollection;
[Bindable] private var displayedxlc:XMLListCollection;
[Bindable] private var categories:XMLListCollection;
private function processResult(evt:ResultEvent):void{
xlc = new XMLListCollection(evt.result..item as XMLList);
categories = new XMLListCollection(evt.result..cat);
private function filterDataGrid():void{
var tempxlc:XMLListCollection = new XMLListCollection();
for each(var xml:XML in xlc){
for each( var cb:CheckBox in chbx){
if(xml.category == cb.label && cb.selected){
tempxlc.addItem(xml);
displayedxlc = tempxlc;
]]>
</mx:Script>
<mx:HTTPService id="dataRequest" url="data.xml" resultFormat="e4x"
result="processResult(event)"/>
<mx:HBox>
<mx:Repeater id="rp" dataProvider="{categories}">
<mx:CheckBox id="chbx" label="{rp.currentItem}" change="filterDataGrid()"/>
</mx:Repeater>
</mx:HBox>
<mx:List dataProvider="{displayedxlc}" width="300" height="300">
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.food}"/>
</mx:Component>
</mx:itemRenderer>
</mx:List>
</mx:Application>
-------------- data.xml ----------------
<?xml version="1.0" encoding="utf-8"?>
<foods>
<categories>
<cat>vegetable</cat>
<cat>meat</cat>
<cat>beverage</cat>
<cat>dessert</cat>
</categories>
<item>
<category>vegetable</category>
<food>beans</food>
</item>
<item>
<category>vegetable</category>
<food>carrots</food>
</item>
<item>
<category>vegetable</category>
<food>pepper</food>
</item>
<item>
<category>meat</category>
<food>beef</food>
</item>
<item>
<category>meat</category>
<food>chicken</food>
</item>
<item>
<category>meat</category>
<food>pork</food>
</item>
<item>
<category>beverage</category>
<food>milk</food>
</item>
<item>
<category>beverage</category>
<food>juice</food>
</item>
<item>
<category>beverage</category>
<food>soda</food>
</item>
<item>
<category>dessert</category>
<food>cake</food>
</item>
<item>
<category>dessert</category>
<food>cookie</food>
</item>
<item>
<category>dessert</category>
<food>pie</food>
</item>
</foods> -
I'm trying to figure out why my list won't adjust it's height
when the height of the itemRenderer changes. The list looks like
this:
<mx:List id="Parts" width="349"
verticalScrollPolicy="off"
itemRenderer="PartRenderer"
variableRowHeight="true"
alternatingItemColors="[0xEEEEEE, 0xDFDFDF]"
themeColor="#FFFFFF" />
If I add another item to the list, then it grows to fit the
new item, but if the any of the items themselves grow (they each
contain expanding TextArea's etc.) then the list will not adjust
it's height to fit. I know for sure that it is the list that is not
growing because I am printing its height to the screen so I can
monitor its size.
Also, I don't explicitly set the height anywhere for the
list. I also don't want scrollbars in the list. I just want the
whole list to expand to whatever height it needs to show all of
each item.
When the list first loads the height is correct, but if I the
height of an item changes after it has been loaded into the list,
the list no longer adjusts its height to fit.
Any ideas on how to do this or what I might be doing wrong?First re-install the original SpryMenuBarHorizontal.css.
Then add the following styles to the bottom of the original CSS
ul.MenuBarHorizontal {
font: 80%/1.6em Arial, Helvetica, sans-serif;
ul.MenuBarHorizontal li {
width: auto;
ul.MenuBarHorizontal a.MenuBarItemSubmenu {
padding: 0.5em 2em 0.5em 0.75em;
ul.MenuBarHorizontal a {
background-color: #FC0;
border: 1px solid #02014D;
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus {
background:#ffff66 url(navbakyel.jpg) repeat-x center;
color: #000;
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible, ul.MenuBarHorizontal li a.MenuBarItemSubmenuHover {
background:#ffff66 url(navbakyel.jpg) repeat-x center;
color: #000;
Gramps -
Making a list a definite length with no repeated data
I have a list tag that currently accepts repeats and as many objects as I will drop into it. Is there a simple way to make this where it will only accept four objects and no repeats?
Here is the code in my item renderer:
protected function hbox1_mouseDownHandler(event:MouseEvent):void{
var target:Canvas = Canvas(event.currentTarget);
var sourceObject:Lesson = new Lesson(data.lesson, data.lessonNumber);
var dragSource:DragSource = new DragSource();
dragSource.addData( sourceObject, "listCopy" );
mx.managers.DragManager.doDrag(target, dragSource, event, null , -0, -0, 0.40, true );
Here are the two drag//drop handlers in my class:
* allows for 4 items on the list and no repeats
private function dragDropHandler(event:DragEvent):void{
if (event.dragSource.hasFormat('listCopy'))
var newObj:Lesson;
newObj = event.dragSource.dataForFormat("listCopy") as Lesson;
model.selectedLessonList.addItem(newObj as Lesson);
* allows for 4 items on the list and no repeats
private function dragEnterHandler(event:DragEvent):void
tmpObject = event.dragSource.dataForFormat("listCopy");
if(tmpObject == null){return;}//something messed up!
trace(tmpObject.lesson);
repeatFlag = false;
for (var i:int=0; i < model.selectedLessonList.length;i++){
if (model.selectedLessonList[i].lesson == tmpObject.lesson){
repeatFlag=true;
break;
if (model.selectedLessonList.length < maxLength && repeatFlag==false){
DragManager.acceptDragDrop(List(event.target));
DragManager.showFeedback(mx.managers.DragManager.COPY);
Here is the list containing the original item:
<mx:List id="lstAllCategories" width="245" height="95%" itemRenderer="com.components.renderers.CategoryListItemRenderer"
dataProvider="{ApplicationModel.instance.categoryList}" styleName="BoxBackground"
rollOver="createToolTip('Mouse_Over_AllCategories')" rollOut="createToolTip('Mouse_Over_BottomOfScreen')">
Here is the list that the item is being dropped into:
<mx:List id="lstCurrentSelectedLessons" dataProvider="{model.selectedLessonList}" width="245" height="140" dropEnabled="true" dragDrop="dragDropHandler(event);checkSelectedLessonList()" dragEnter="dragEnterHandler(event)"
doubleClickEnabled="true" doubleClick="beginLesson()" itemRenderer="com.components.renderers.ChosenListItemRenderer" styleName="BoxBackground"
rollOver="createToolTip('Mouse_Over_CurrentLessons')" rollOut="createToolTip('Mouse_Over_BottomOfScreen')">
</mx:List>
Maybe you are looking for
-
hi I configured SSL in my R12.1.3. I referred 376700.1 metalink id . First time it successful and again i did the same thing in another server but it shows error in firefox like Secure Connection Failed An error occurred during a connection to server
-
Looking for a better way to determine string variable from multiple options
Hi, I trying to figure out a better way to determine a string variable from multiple options. Say i have five pictures each with a different filename: img1 - img5...these file names could be named anything really but for this example i will keep them
-
Hi Experts, I am working on a 856 AS2 to file scenario.I have configured the scenario as following: IR External definition:1) FunctionalAcknowlegementSeeStd, A_856_V4010 and A_997_V4010 Message interface: A_856_V4010_OB, A_997_V4010_OB, SB_Functional
-
Use two Time Machine Drives with different settings?
Hello everybody, is it possible to use time machine with two drives and use different settings for each drive? For example: at home I currently have two external LaCie d2 quadra drives. My plan is to leave one at home, and take one to Uni. On the dri
-
I have trouble in hitting the breakpoints in the BPE. However, it works when ever I create a new workspace after starting BPE fresh and has to repeat it everytime to debug. I have to recreate workspace again and it hangs next time and have to repeat