Item Renderer and Label Function

Hi,
I have a grid with the datacolumns that use the
labelfunction. So the label function displays a value in the
column(like Y or N).
Now I want to use a button for that column and toggle the
button to change the values between Y and N
How do I accomplish this
This is the code I am having now
<mx:DataGridColumn dataField="test"
labelFunction="LabelFuncAction"/>
I am trying to use change it to
<mx:DataGridColumn dataField="test"
labelFunction="LabelFuncAction">
<mx:itemRenderer>
<mx:Component>
<mx:Button />
</mx:Component>
</mx:itemRenderer>
but the button shows blank text. I am new to flex and I am
not sure if I am completely wrong.
Thanks,
Josh

Hi,
I tried using a label for the button. But the content in the
column disappears and the button shows blank.
The second option that I tried is
<mx:DataGridColumn dataField="4"
labelFunction="LabelFuncAction"
itemRenderer="mx.controls.Button"/>
The label is this case also shows nothing.
Could someone please help me with this?

Similar Messages

When to use Drop In Item renderer and InLine Item Renderers ??

Hi ,
I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
What i read from tutorilas that we cant use Drop In because they say , The only drawback to using drop in is that them is that you cannot configure them
Please help me .

Hi Kiran,
Here is the detailed explanation you needed:
You can also refer the link below:
http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
Drop-In Item Renderers
Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.

<mx:DataGridColumn dataField="photo"
                   headerText="Employee Photo"
                   itemRenderer="mx.controls.Image"/>
Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
Inline Item Renderers
Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
<mx:DataGrid id="myGrid" dataProvider="{gridData}">
   <mx:columns>
      <mx:DataGridColumn headerText="Show Relevance">
         <mx:itemRenderer>
            <mx:Component>
               <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                         toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                         click="outerDocument.toggle()" />
            </mx:Component>
         </mx:itemRenderer>
      </mx:DataGridColumn>
   </mx:columns>
</mx:DataGrid>
Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
public function toggle():void
Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.

<mx:Component id="ImageRenderer">
   <mx:VBox width="100%" height="140"
            horizontalAlign="center" verticalAlign="middle">
      <mx:Image source="{'assets/'+data.image}"/>
      <mx:Label text="{data.image}" />
   </mx:VBox>
</mx:Component>

<mx:DataGridColumn headerText="Image"
                   dataField="image" width="150"
                   itemRenderer="{ImageRenderer}"/>
In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari
Message was edited by: BhaskerChari

Changing List's item renderer and layout causes exception

I have buttons in my UI to switch a list between a tile view (thumbnails) and a list view (details).
This code works:
     var layout:TileLayout = new TileLayout();
     resultsList.layout = layout;
     resultsList.itemRenderer = new ClassFactory(MediaTileRenderer);
This code doesn't:
     var layout:VerticalLayout = new VerticalLayout();
     resultsList.layout = layout;
     resultsList.itemRenderer = new ClassFactory(MediaItemRenderer);
It's not the item renderer's fault, I can use the tile renderer again in the second block of code and it will still explode. If I swap the VerticalLayout for a TileLayout, it works fine. HorizontalLayout explodes.
The exception is occurring in LinearLayoutVector/remove (541):
Error: invalidIndex
at spark.layouts.supportClasses::LinearLayoutVector/remove()[E:\dev\4.x\frameworks\projects\ spark\src\spark\layouts\supportClasses\LinearLayoutVector.as:541]
at spark.layouts::VerticalLayout/elementRemoved()[E:\dev\4.x\frameworks\projects\spark\src\s park\layouts\VerticalLayout.as:1311]
at spark.components::DataGroup/http://www.adobe.com/2006/flex/mx/internal::itemRemoved()[E:\dev\4.x\frameworks\projects\s park\src\spark\components\DataGroup.as:1580]
at spark.components::DataGroup/removeRendererAt()[E:\dev\4.x\frameworks\projects\spark\src\s park\components\DataGroup.as:625]
at spark.components::DataGroup/removeAllItemRenderers()[E:\dev\4.x\frameworks\projects\spark \src\spark\components\DataGroup.as:642]
at spark.components::DataGroup/set itemRenderer()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\DataGroup.as:446 ]
at spark.components::SkinnableDataContainer/set itemRenderer()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\SkinnableDataCon tainer.as:420]
Does anyone know why this doesn't work? It seems like a fairly common idea- using a single list and toggling between different view modes.

Here's a zip of a sample project: http://dl.dropbox.com/u/15760/LayoutTest.zip.
A workaround that I've found:
Switch to a BasicLayout while changing the itemRenderer, then apply the VerticalLayout afterwards.

TileLayout spark Item Renderer and Zoom in and zoom out

I implemented a spark ItemRenderer, which serves a DataGroup with TileLayout:
    <s:Border id="scrollView"
              styleName="scrollView"
              width="100%"
              height="100%">
        <s:filters>
            <s:DropShadowFilter inner="true"
                                alpha=".35"/>
        </s:filters>
        <s:Scroller id="continuousViewScroller"
                    height="100%"
                    width="100%">
            <s:DataGroup id="continuousView"
                         height="100%"
                         width="100%"
                         itemRenderer="PageRenderer"
                         dataProvider="{pages}">
                <s:layout>
                         <s:TileLayout columnAlign.OneUpView="justifyUsingWidth"
                         columnAlign.TwoUpView="left"
                         verticalGap="10"
                         horizontalGap.TwoUpView="10"
                         horizontalAlign="center"
                         verticalAlign="top"
                         useVirtualLayout="true"
                         clipAndEnableScrolling="false"
                         requestedColumnCount.OneUpView="1"
                         requestedColumnCount.TwoUpView="2"/>
                    
                </s:layout>
            </s:DataGroup>
        </s:Scroller>
    </s:Border>
I execute a zoom effect everytime some one pushes zoom in or zoom out buttons. The trouble is that zoom in and zoom out works fine. However, the gap between two item renderers increase, when I zoom out.
Is there a way that the gap remains fixed?

Zoom in means, within the PageRenderer, I use a Scale effect, which zooms in and out based on an event. The following code is for doing zoom in and zoom out for the PageRenderer. It works fine. However, the vertical/horizontal gaps increases once have a zoomed in and then try to zoom out incrementally. I want to keep the gap between elements same all the time.
If I run this same code, with VerticalLayout, It works great. However, this does not work with TileLayout.
The following link:
http://opensource.adobe.com/wiki/display/flexsdk/Spark+TileLayout
says:
"Note that justify only grows the columnWidth/rowHeight, so to handle cases where the size of the columns/rows has to shrink, the default column width/row height should set explicitly to zero."
Does anyone has any idea how to implement this?
Source Code for zoom in and zoom out:
<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/halo"
                creationComplete="init()">
    <fx:Declarations>
        <s:Scale target="{this}" id="zoomPlayer" duration="150" />
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.core.FlexGlobals;
            import mx.events.EffectEvent;
            private var _zoom:Number=1.0;
            [Bindable]
            public function set zoom(value:Number):void
                _zoom=value;
            public function get zoom():Number
                return _zoom;
            private function init():void
                var proj:TestProject=FlexGlobals.topLevelApplication as   TestProject;
                proj.systemManager.addEventListener(ZoomEvent.ZoomChange, updateZoom);
            private function updateZoom(event:ZoomEvent):void
                if(zoom != event.zoom){
                    if(zoomPlayer.isPlaying){
                        zoomPlayer.stop();
                    zoomPlayer.addEventListener(EffectEvent.EFFECT_END, zoomEnd);
                    zoomPlayer.scaleXFrom=zoom;
                    zoomPlayer.scaleXTo=event.zoom;
                    zoomPlayer.scaleYFrom=zoom;
                    zoomPlayer.scaleYTo=event.zoom;
                    zoomPlayer.play();
                    zoom=event.zoom;
            private function zoomEnd(event:EffectEvent):void{
                zoomPlayer.removeEventListener(EffectEvent.EFFECT_END,zoomEnd);

I need my label to remember the value of the previous number in item renderer

I have a label used as an item renderer and the dataprovider frequently changes. I need my label to remember the value of the previous number it was assigned to {data.ask} but am having trouble doing this.
Any ideas how to do this?

You could override the data setter on the item renderer or listen for dataChange and store the value somewhere at that time. This post demonstrates how to override the data setter or listen for dataChange:
http://flexponential.com/2009/11/11/binding-warnings-when-using-object-in-a-list-dataprovi der/

Flex SDK 3.4 Tree Item Renderer Root Folder displays Tooltip for Child

I have a Flex Tree that uses a custom item renderer. The item renderer extends Tree Item Renderer and I add my button in commit properties (since the data is dynamic) and I use update displaylist to move it to the right position. I set the button to be visible on rollover and make the icon invisible. On rollout I reverse that logic.
When I have my item renderer add the button, it causes only one problem and it seems to be under certain conditions:
- Single root folder for the tree
- Upon opening the tree, the root folder displays the tool tip for the last child in the tree
Any idea why the tooltip comes up?
public function AssetTreeItemRenderer ()
            super();
            addEventListener(MouseEvent.ROLL_OVER, onItemRollover);
            addEventListener(MouseEvent.ROLL_OUT, onItemRollout);
            addEventListener(ToolTipEvent.TOOL_TIP_SHOWN, toolTipShown);
            addEventListener(ToolTipEvent.TOOL_TIP_CREATE, onCreateToolTip);
        // OVERRIDEN FUNCTIONS
         * override createChildren
        override protected function commitProperties():void {
            super.commitProperties();
            if(data is IAsset) {
                if(playBtn === null) {
                    playBtn = new Button();
                    playBtn.styleName = "previewPlayButton";
                    playBtn.toolTip = "Play";
                    playBtn.width = icon.width + 2;
                    playBtn.height = icon.height + 2;
                    playBtn.visible = false;
                    playBtn.addEventListener(MouseEvent.CLICK, onPlayBtnClick);
                    addChild(playBtn);
            } else {
                if(playBtn !== null) {
                    removeChild(playBtn);
                    playBtn = null;
         * override updateDisplayList
         * @param Number unscaledWidth
         * @param Number unscaledHeight
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            //Move our play button to the correct place
            if(super.data && playBtn !== null)
                playBtn.x = icon.x;
                playBtn.y = icon.y;

You are not clearing tooltip if data is not IAsset

Click event on a item renderer stops data being passed

Hi
I'm trying to create a item renderer based on a Canvas, this renderer is then used in a List component. I'm trying to get a click event fired when the user clicks on one of the items in the List. I'm also formatting the data being passed into the item renderer to do this I'm overriding the set data property like this:
override public function set data(value:Object):void
title.text = value.marketName;
sellPrice.text = value.sellPrice;
buyPrice.text = value.buyPrice;
change.text = value.percentageChangeOnDay;
var i:String = "-";
if(String(value.percentageChangeOnDay).indexOf(i))
change.styleName = "PositiveChange";
else
change.styleName = "NegativeChange";
When I add a click event to my item renderer like this,
<view:DisplayItem click="itemClickedEvent( event )" />
I get a null reference error in my set data function. If I remove the click event the data is passed correctly, I've also found that if I use a rollOut event like this,
<view:DisplayItem rollOut="rolledOverEvent( event )"/>
the data is passed fine and the event works too, it seems that click events cause the data not to be passed.
Why does having a click event cause this problem? How can I have a click event on the item renderer and still format my data?
Cheers
Stephen

Found out that I can use the itemClick event of the List component I'm using my item renderer in, so really my item renderer does not need a click event.

How do you measure performance of an item renderer?

I'm creating an ItemRenderer in Flex 4.6 and I want to know how to measure total time to create, view and render an item renderer and how long it takes to view and render that item renderer when it's being reused.
I just watched the video, Performance Tips and Tricks for Flex and Flash Development and it describes the creation time, validation time and render time and also the reset time. This is described at 36:43 and 40:25.
I'm looking for a way to get numbers in milliseconds for total item renderer render time and reset time (what is being done in the video).

To answer your first question, in this video Ryan Frishberg recommends measuring and tuning your code. I'm trying to follow his example for my own item renderers.
I've taken some key slides out to show you.

Flex 3 Item renderer in List dissapear and shifted place

I successfully added ItemRenderer in my List but whenever I scroll down to the bottom and scroll up again. The ItemRenderer in the List would be either gone or shifted places.
I have search up on possible solution but they doesn't seen like working. I tried to put dataChange=”validateNow()” in the ItemRenderer but it doesn't work. I read something about useVirtualLayout="false" but it seen like my List doesn't have useVirtualLayout ?
<mx:List
        id="rowsList2" width="{VBoxCall.width}" height="{ scheduleViewerHeight }"
        rowHeight="{ scheduleViewer.rowHeight }"
        verticalScrollPolicy="off" verticalAlign="middle"
         horizontalScrollPolicy="off"
        alternatingItemColors="[0xEEEEEE, 0xDFDFDF]" itemRenderer="RendererState">
        
        <mx:dataProvider>
            <mx:Object label="Mr Swabby"
                       data="Juneau"
                       webPage="http://www.state.ak.us/"/>
            <mx:Object label="Mrs Harrington"
                       data="Montgomery"
                       webPage="http://www.alabama.gov/" />
        </mx:dataProvider>
    </mx:List>
Before (picture) http://i.stack.imgur.com/VxoeP.gif
After (picture) http://i.stack.imgur.com/3qHO9.gif
Any Ideas ?
Regards, Mike

Hi Alex,
I've read your blog but I still could find the solution.
I tried to override the set data but it is not working. Whenever I scroll to the bottom and move up again, all the buttons are gone.
Please advise me on this.
Regards,
Mike
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Script>
                    <![CDATA[
                              // Import Event and URLRequest classes.
                              import flash.events.Event;
                              import flash.net.URLRequest;
                              override public function set data(value:Object):void{
                                        if(value != null)
                                        super.data = value;
                                        if(data.label == null)
                                                  Button.label="";
                                        else
                                                  if(data.label == null || data.label=="")
                                                            Button.label = "";
                                                  else
                                                            Button.label = data.label;
                                        else
                                                  myVBox.removeChild(Button);
                    ]]>
          </mx:Script>
          <mx:VBox id="myVBox">
                    <mx:Button id="Button" width="90">
                    </mx:Button>
          </mx:VBox>
</mx:VBox>

How to create "moveUp" and "moveDown" functionality for items in a TileList

I want to create "Move Up" and "Move Down" buttons for items in a TileList. They should have the same functionality as if they were dragged and dropped, except only moving one position up or down (and thus switch places with the item above/below). I have tried this using this code for the moveUp button:
private function moveItemUp(){
     var moveFromPos:Number = myTileList.selectedIndex;
     if(myTileList.selectedIndex > 0){
          var moveToPos:Number = myTileList.selectedIndex-1;
          var tempItem:Item = myTileListDataProvider.removeItemAt(moveFromPos);
          myTileListDataProvider.addItemAt(tempItem, moveToPos);
                trace("New selected Index: "+ moveFromPos - 1);
                myTileList.selectedIndex = moveFromPos - 1;
                trace("New selected Index: "+ myTileList.selectedIndex);
But my problem is that the selectedIndex of myTileList isn't correctly set. For instance; if I have a list of three items and I move the last item up this is what happens:
1. Item three (selectedindex is 2) switches places with Item two (So far, so good)
2. Item two is shown in GUI as selected (has Halo around it - so far, so good)
3. If i click "MoveUp" again, the same two (item three and two) switces places, instead of the intended item two and one.
The traces tell me that myTileList.selectedIndex variable isn't set correctly as the trace shows this:
New selected Index: 1
New selected Index: 2
Any idea on how to solve this problem?

I found a partial solution at http://www.ultrashock.com/forums/flex/tilelist-selected-element-removed-124313.html and modified it a bit. The answer was using the callLater() method as in this example:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()" layout="vertical">
<mx:Script>
<![CDATA[
      import mx.events.FlexEvent;
      import mx.collections.ArrayCollection;
      var arr:ArrayCollection = new ArrayCollection();
      var temp:Number;
      var temp2:String;
      private function initApp():void{
          arr.addItem("A");
          arr.addItem("B");
          arr.addItem("C");
          arr.addItem("D");
          arr.addItem("E");
          arr.addItem("F");
      public function traceEvent(event:FlexEvent):void{
          trace(event);
          trace(mtl.selectedIndex);
          if(mtl.selectedIndex==-1){
              callLater(setInd);
      private function setInd():void{
          trace("Changing selected index..");
          mtl.selectedIndex = temp;
      public function removeItem():void{
            temp = mtl.selectedIndex - 1;
            temp2 = arr.removeItemAt(mtl.selectedIndex) as String;
            arr.addItemAt(temp2,temp);
      public function notifyChange(e:Event):void{
          trace("CH mtl.selectedIndex:" + mtl.selectedIndex);
]]>
</mx:Script>
<mx:TileList id="mtl" width="100" height="200" dataProvider="{arr}" columnCount="1" change="notifyChange(event)" updateComplete="traceEvent(event)"/>
<mx:Button id="mbt" label="delete" click="removeItem()"/>
</mx:WindowedApplication>

Need for a Datagrid with variableRowHeight="true" and custom Item Renderer to display exact rows

Hi again, developers:
I'm in a search of a datagrid with certain characteristics:
     - variableRowHeight = "true"
     - only one column
     - each row must have a custom item renderer with possibly different heights, and a fixed width
     - the datagrid must show always every item in the data provider with no vertical scroll bars, what means that the datagrid height must have always the exact height sum of all the item renderers it is displaying.
     - and no extra empty rows must appear in the last positions of the datagrid
The last two requirements are something difficult to achieve... for some reason, empty rows appear at the last positions of the datagrid. I post what i've managed to get:
<mx:Script>
     <![CDATA[
     private function resize():void
                if (dg.dataProvider)
                    var h:Number = dg.measureHeightOfItems( -1, dg.dataProvider.length);
                    dg.height = h;
     ]]>
</mx:Script>
<mx:DataGrid id="dg" width="530" horizontalCenter="0" verticalScrollPolicy="off"
        dataProvider="{dp}"
        wordWrap="true" variableRowHeight="true" showHeaders="false" dataChange="resize()" height="{dg.measureHeightOfItems(-1,dg.dataProvider.length)}" click="Alert.show(dg.rowCount.toString());">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" width="50">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:TextArea height="{Math.random()*100}" wordWrap="true" backgroundColor="{Math.random() * 16777216}" paddingTop="0" paddingBottom="0"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

Thanks Harui, but it doesn't help. If the border is set it will help, but the very big problem is the empty rows that appear at the end of the datagrid... I can't find a way of measuring correctly the height of the itemRenderers!
I'll update this thread if I manage to do it.

Datagrid and Inline Item renderer problem

I have a datgrid with two inline item renderers. The dataprovider for my DG is a nested object (objects within objects within objects i.e 3-layered).
Main Object - 1st Level
                          |
              2nd Level Object 1
                                |
                            3rd level object '1' => ('name'=>somename,'id'=>someid)
                            3rd level object '2'
                            3rd level object 'n'
             2nd Level Object 2
                                |
                            3rd level object '1' => ('name'=>somename,'id'=>someid)
                            3rd level object '2'
                            3rd level object 'n'
I use 2 item renderers (one for each datagrid column) which loops thro the 2nd level object1 and 2 respectively (the 2nd level object is a dynamic array of objects, in that the number of objects within keep changing).
Within the item renderer I loop thro the 2nd level object using a foreach and then display the data. The data is a linkbutton, which when clicked , calls a remote object function to delete the data from the database
now on the result event of the remote object function call, i call the function to repopulate the DG, so that the updated data is displayed.
When i click on the linkbutton in the first row, the backend works perfectly fine (the data gets deleted from the database and the refreshed data is sent back), but for some reason, the deleted data suddenly appears in the 2nd row.
When i delete it from the second row, it appears on the 3rd row (nothing happens in the backend since the data is already deleted).. and so on, till it appears on the last row and then the DG looks exactly the way it shld have looked after the first delete.
This is just the beginning. The second item renderer also displays a linkbutton, which when clicked, displays that data in the previous column (the one where this data can be deleted). When i click on 1st row, the data gets added in the previous column of the second row .. and so on..
Basically, my DG is acting really weird. I overrided the set data function in the item renderer to refrsh the data and called its invalidateDisplayList. I also call the Datagrid's invalidateDisplayList function after each refresh. The behavior remains the same.
Please help me on this ...

Hi, Post a test code.... It will be a lot easier to help you Mich

Datgrid and Item Renderer scrollling problem

Hello,
I have a Datgrid containign item rendrer as follows :
<mx:DataGrid width="800" id="gridSecondaire" styleName="dataGridStyle" verticalScrollPolicy="off" headerHeight="30" >
          <mx:columns>
               <mx:DataGridColumn rendererIsEditor="true"
                                          editorDataField="result"
                                          itemRenderer="com.cdf.intra_cmmi.view.advancedTree.BodyDetailDocumentRenderer" />
          </mx:columns>
     </mx:DataGrid>
The problem is I when i scroll the datagrid the rows do not stay in the same position how to solve this please ?

Here the item Renderer
===================ITEM RENDRER==========================
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" height="28" width="388" creationComplete="init(event)" click="clickTexte(event);">
    <mx:Script>
    <![CDATA[
        [Embed(source="images/icon/tree_defaultLeafIcon.png")]
        public static const tree_defaultLeafIcon:Class;
        [Embed(source="images/icon/tree_pptLeafIcon.png")]
        public static const tree_pptLeafIcon:Class;
        [Embed(source="images/icon/tree_xlsLeafIcon.png")]
        public static const tree_xlsLeafIcon:Class;
        [Embed(source="images/icon/anglais.png")]
        private var anglaisIcon:Class;
        import com.sqli.intra_cmmi.constants.ConstantAssets;
        private function clickTexte(event:MouseEvent):void {
                var fileReference:FileReference = new FileReference();
                fileReference.download(new URLRequest(data.chemin_document));
        private function init(event:Event):void {
            import com.sqli.intra_cmmi.vo.DocumentVO;
            import mx.controls.Alert;
            import mx.collections.ArrayCollection;
                var nom_document:String =data.nom_document as String;
                var description_document:String = data.description_document as String;
                var language_document:String =data.language_document as String;
                var ext:String = data.ext as String;
                var type:String = data.type_document as String;
                var chemin_document:String = data.chemin_document as String;
                switch (type)
                        case "Modèle":
                            imageTypeDoc.source = ConstantAssets.modele;
                            break;
                        case "Guide":
                            imageTypeDoc.source = ConstantAssets.guide;
                            break;
                        case "Document":
                            imageTypeDoc.source = ConstantAssets.document;
                            break;
                        case "Outils":
                            imageTypeDoc.source = ConstantAssets.outils;
                            break;
                        case "Check-liste":
                            imageTypeDoc.source = ConstantAssets.checklist;
                            break;
                        default:
                            imageTypeDoc.source = ConstantAssets.document;
                nom.text=nom_document+' ('+ext+')';
                if(language_document!='1036'){
                    imageAnglais.source=anglaisIcon;
                if(description_document!=""){
                    imageDescription.source=anglaisIcon;
    ]]>
</mx:Script>
    <mx:Image id="imageTypeDoc" x="5" y="5" height="15" width="15"   />
    <mx:Text x="23" y="3" width="326" id="nom"/>
    <mx:Image x="351" y="5" height="15" width="15" id="imageAnglais"/>
    <mx:Image x="370" y="5" height="15" width="15" id="imageDescription"/>
</mx:Canvas>
======================Main.MXLM (Blue Code part) ===============================
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    width="830" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import com.sqli.intra_cmmi.services.MainService;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import com.sqli.intra_cmmi.controller.ProduitController;
            import com.sqli.intra_cmmi.services.VerticalMenuService;
            //import com.sqli.intra_cmmi.services.MainService;
            import com.sqli.intra_cmmi.vo.ProduitVO;
            import mx.controls.Alert;
            public var objectList : Array = new Array();
            public function init():void
                myProc.listeDomaineProcessus();
                if(VerticalMenuService.getInstance().produitVerticalMenu.getChildren().length > 0)
                    // On positionne l'accordion des produits sous l'accordion commun
                    VerticalMenuService.getInstance().produitVerticalMenu.y = VerticalMenuService.getInstance().verticalMenu.height - 49;
                    MainService.getInstance().lefter.addChild(VerticalMenuService.getInstance().produitVertic alMenu);
                var id:String;
                id=ProduitController.getInstance().currentProduitId;
                if(id!=null)
                    myProd.getProduitDescription(id);
                    myProd.getDocumentPrincipauxByProduit(id,1);
                    myProd.getDocumentSecondaireByProduit(id,0);
                    myProd.getRolesProduit(id);
                    myProd.getAjustementProduitByID(id);
            private function getDataListener_listeDomaineProcessus(event:ResultEvent):void
                //refPhase= new ArrayCollection();
                this.objectList = event.result as Array;
                // Peupler l'accordion
                ProduitController.getInstance().populateVerticalMenu(this.objectList);
            private function getDataListener_getDocumentSecondaireByProduit(event:ResultEvent):void
                var obje:Array = event.result as Array;
                if(obje.length>0)
                    gridSecondaire.dataProvider = event.result as Array;
                    gridSecondaire.rowHeight = 33;
                    gridSecondaire.height = obje.length*33+30;
                    var maximumHeight : int = 228;
                    if ( gridSecondaire.height > maximumHeight){
                      gridSecondaire.verticalScrollPolicy = "on";
                      gridSecondaire.height = maximumHeight;
                else
                    gridSecondaire.visible=false;
                    gridSecondaire.includeInLayout=false;
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                super.updateDisplayList(unscaledWidth, unscaledHeight);
                // Peupler l'accordion (rafraichissement lors du passage d'une rubrique à une autre)
                ProduitController.getInstance().populateVerticalMenu(this.objectList);
            private function getDataListener_getProduitDescription(event:ResultEvent):void{
                    description.title=ProduitVO(event.result).nom_produit;
                    idPanelDescription.htmlText=ProduitVO(event.result).description_produit;
            private function faultListener(event:FaultEvent):void {
                    Alert.show(event.fault.message, "Error");
        ]]>
    </mx:Script>
    <mx:VBox verticalGap="20" horizontalCenter="0" top="10" bottom="10">
    <mx:Panel width="800" height="121" id="description" styleName="stylePanel" >
        <mx:Label paddingLeft="5" paddingRight="5" paddingTop="40" width="100%" id="idPanelDescription"/>
    </mx:Panel>
   <mx:DataGrid width="800" id="gridSecondaire" styleName="dataGridStyle" verticalScrollPolicy="off" headerHeight="30" >
        <mx:columns>
            <mx:DataGridColumn rendererIsEditor="true" editorDataField="result"
             itemRenderer="com.sqli.intra_cmmi.view.advancedTree.BodyDetailDocumentRenderer"
              headerText="Documents secondaires"/>
            <mx:DataGridColumn rendererIsEditor="true" editorDataField="result" dataField="livrable_document" headerText="Livrables" width="100"/>
        </mx:columns>
    </mx:DataGrid>
    </mx:VBox>
    <mx:RemoteObject id="myProc" destination="zend" source="ProcessusService" showBusyCursor="true" fault="faultListener(event)">
        <mx:method name="listeDomaineProcessus" result="getDataListener_listeDomaineProcessus(event);" />
    </mx:RemoteObject>
    <mx:RemoteObject id="myProd" destination="zend" source="ProduitsService" showBusyCursor="true" fault="faultListener(event)">
        <mx:method name="getRolesProduit" result="getDataListener_getRolesProduit(event);" />
        <mx:method name="getDocumentPrincipauxByProduit" result="getDataListener_getDocumentPrincipauxByProduit(event);" />
        <mx:method name="getDocumentSecondaireByProduit" result="getDataListener_getDocumentSecondaireByProduit(event);" />
        <mx:method name="getAjustementProduitByID" result="getDataListener_getAjustementProduit(event);" />
        <mx:method name="getProduitDescription" result="getDataListener_getProduitDescription(event);" />
    </mx:RemoteObject>
</mx:Canvas>

Drag and Drop in Item Renderer

I created an item renderer for use in a TileList. This item
renderer shows a thumbnail, name, and a few buttons. I want to
enable drag but only for the image. I know it is easy to enable
drag for Tile List items as a whole, but how do I do that for just
part of an item, which was rendered using my custom item renderer?
Thanks for any help!

Have you tried to turn off drag for TileList and enable it
only for the thumbnail? It should work.
ATTA

Using FCE 4 to edit mov file, inserted 8 chapter markers by double tap M, enter title, click add chapter marker. Rendered and half of the chapter markers unrecognized or not functional. Delete FCE prefs and redo project did not help. How to fix?

Using FCE 4 to edit mov file. Added 8 chapter markers by double tap M, enter title, click add chapter marker. Rendered and 4 of the chapter markers are skipped or not functioning. Deleting FCE prefs and rebuild project did not solve. Solution anyone?

Thanks for taking a look, I am pretty new on a Mac, is this the data you need?

Item Renderer and Label Function

Similar Messages

Maybe you are looking for