Custom spark list control

I have a spark list control that displays a dynamically imported Images tilelayout.  Basically, a bunch of thumbnail Images that appear in a tile layout.  I slipped active so that I can reorganize these thumbnails and everything works great except for one thing, the who.  In my itemrenderer I included Image in the State "dragging", but the image does not appear in the who.  I'm basically just has a square semi transparent like my, but I want to be able to actually drag my sticker.  Any ideas how to do this?

Here is my list:

< s:List id = "ImageList1" x = "77" y = "95" width = "858" height = "412" dataProvider = "{imageAC}".

itemRenderer = "converters. ImageACSmallItemRenderer"contentBackgroundColor ="0x000000 ".

borderVisible = 'false' dragEnabled = "true" dropEnabled = "true" dragMoveEnabled = "true".

allowMultipleSelection = "true" skinClass = 'skins. General.ListSkin' focusAlpha = '0' mouseMove = "getImageProxy (event)" >

< s:layout >

< s:TileLayout columnWidth = rowHeight = "76" "76" horizontalAlign = "center" verticalAlign = "middle".

horizontalGap = "8" verticalGap = "8" / >

< / s:layout >

< / s:List >

Here's my Itemrenderer:

< fx:Script >

     <! [CDATA]

import mx.utils.ObjectProxy;

[Bindable]

public var dataProxy:ObjectProxy;

private function init (): void {}

dataProxy = new ObjectProxy (data);

          }

     ]]>

< / fx:Script >

< s: states >

< s: State name = "normal" / >

< s: State name = "flat" / >

< s: State name = "selected" / >

< s: State name = 'slide' / >

< / s: states >

< mx:Image source = "{dataProxy.pathSmall}" horizontalCenter = red "0" = "0" includeIn = "normal, hovered, selected, dragging" / > "

< / s:ItemRenderer >

Thanks for any idea!

Hi Bill,

Looks like you create a new object for each ItemRenderer ContentCache, to create a single instance shared, add "static" like this:

static public var contentCache:ContentCache = new ContentCache();

This will ensure that the contentCache variable is shared between all of the ItemRenderers.

In addition, in my view, there is no need to explicitly call the contentCache like this:

contentCache.load(dataProxy.pathSmall);

Fixing the contentCache just the contentLoader on the Image property, the way you have done should be sufficient.

I just do a quick experiment and here is an example with an ItemRenderer that exposes the problem:



    


And here's workaround with contentCache (works well for me in the AIR):



                

    

See you soon,.

Evtim

Tags: Flex

Similar Questions

  • How to dynamically add data in a Spark list control

    Hi, I have a spark list in one of my custom components() control(id="Cclist") and a text input control. When a value is entered in the entry of the texts, I want to dynamically add the same in the list control. I tried to do the following:

    protected function Cc_selectHandler(event:CustomEvent):void

    {

     var cctext:DisplayObject = event.data as DisplayObject
    CcList.enabled = true;
    CcListButton.enabled = true;

    CcList.addChild(cctext);

    }

    But I get an error saying "addChild() is not available in this category.  "Instead, use addElement(), or change the skin. So I tried to use addElement, but apparently it is not available at all. No idea what im doing wrong?

    Add the text entered in the textinput to the dataProvider of the list in the appropriate format.

    A simple example:

    
    
        
            
        
    
        
            
        
    
        
            
        
        
        
        
    
    
  • List control with selection/converter custom element highlight problem

    Hello

    I created a sample project to illustrate my problem, my data provider actually use the same valuables as there might be same objects with the same data in a table collection.

    When I bring the mouse over the list control, I get no blue sky selection / highlight, and I cannot even click on them and I don't get any change either event.


    Here is the code, you can also download the attached project and experience it locally.

    List problem

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application creationComplete="compApp();" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
         <mx:Script>
              <![CDATA[
                   import mx.collections.ArrayCollection;
                   
                   [Bindable] private var dp:ArrayCollection = new ArrayCollection();
                   
                   private function compApp():void{
                        for(var i:Number =0; i < 10; i++){                         
                             var person:Person = new Person("Raza", "raza.jpg");
                             dp.addItem(person);                         
                        }
                   }     
                   
              ]]>
         </mx:Script>
         
         <mx:List variableRowHeight="true" width="200" height="300" id="listControl" dataProvider="{dp}" itemRenderer="ListRenderer"/>     
    </mx:Application>
    

    Element converter

    <?xml version="1.0" encoding="utf-8"?>
    <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle">
         <mx:Script>
              <![CDATA[
                   
                   override public function set data(value:Object):void{
                        if(!value){
                             return;
                        }
                        fullName.text = Person(value).name;
                        photo.source = Person(value).photo;
                   }
                   
                   
              ]]>
         </mx:Script>
         <mx:Image id="photo"/>
         <mx:Label id="fullName"/>
    </mx:HBox>
    
    

    Thank you

    It's actually quite simple, but quite obscure.

    Add a property in your object of the person and make sure that it is unique (or

    Wrap your Person objects in a custom for the grid object and ensure that

    which has the property uid on it).

    Take a look at the UIDUtil class (on line 325 in the 3.2 SDK) to learn more

    Details.

  • How to refresh a Spark list manually?

    Hello

    I'll build a News Module, which consists of a DataGrid and a spark with a customItemRenderer list.

    When I click on the item in the DataGrid control, I get the 'newsID' of the item clicked and receive the newsDetails associate my data in an ArrayCollection collection.

    This table Collection is the dataprovider for my spark list.

    Okay, well, when I click on the first point, nothing works like it supposed to be.


    But when I click the second entry, for example, the list of the spark is not following and display the changed data but the ArrayCollections are updating of data.

    I checked in the binder to an another DataGrid that owns the ArrayCollection as a DataProvider collection.

    So my question now is to know how to manually refresh a list of Spark.

    On google I found that someone suggested to set the ItemRenderer of the spark to null list and re - declare.

    http://www.mail-archive.com/[email protected]/msg132923.html

    How would I do this programmatically?

    = null myList.itemRenderer and that?

    My custom item converter is called HListRenderer.mxml

    Any help is very appreciated

    Marc

    Try:

    myList.itemRenderer = null;

    Group1.itemRenderer = new ClassFactory (HListRenderer);

    See the latest example of code here:

    http://flexponential.com/2009/11/02/different-ways-of-assigning-an-item-renderer-in-Flex-4 /.

  • Spark list ItemRenderer 'data' is null.

    I use the same code in one place that I use in another, and still the event creationComplete that they prepare in the itemRenderer, the first line of code, trace("data") returns "null".

    This code has been fine for months of work and suddenly stopped working with no explanation.  I lost two days within period of fixation which should not be broken and I'm no closer to a solution.  Very frustrated. Any help appreciated - greatly.

    Puddleglum.

    = Component relevant code containing spark list = Output from the console displayed in the form of comments

    [Bindable]

    public var itemArray:ArrayCollection = new ArrayCollection();

    [Bindable]

    private var gap: uint = 6;

    private var file:File;

    private var fileStream:FileStream;

    private var toolXML:XML;

    protected function creationCompleteHandler (): void

    {

    trace ("FUNCTION MyLibraryToolsPanel creationCompleteHandler()");

    file = parentApplication.getFileOperations () .getToolFilepath ();

    trace ("file:" + file.url);

    }

    private void loadTool(xmlFilepath:File,_xmlFilename:String):void

    {

    trace ("MyLibraryToolsPanel FUNCTION loadTool ("+ xmlFilepath.url +"," + xmlFilename + ")"); / / MyLibraryToolsPanel FUNCTION loadTool (app-storage: / Tools/User000000, 000000Tool1371827886983.xml)

    var xmlFile:File = xmlFilepath.resolvePath (xmlFilename);

    If (xmlFile.Exists)

    {

    fileStream = new FileStream();

    fileStream.open (xmlFile, FileMode.READ);

    toolXML = XML (fileStream.readUTFBytes (fileStream.bytesAvailable));

    fileStream.close ();

    var obj:Object = new Object();

    obj.xmlFilepath = xmlFilepath;

    obj.xmlFilename = xmlFilename;

    obj.XML = toolXML;

    trace ("obj:" + obj); / / obj: [object Object]

    trace ("FUNCTION MyLibraryToolsPanel loadTool\n"+obj.xml.toXMLString ());   / / returns the XML when uncommented

    itemArray.addItemAt (obj, itemArray.length);

    }

    on the other

    {

    trace ("MyLibraryToolsPanel FUNCTION loadTool XMLFILE does NOT EXIST");  / / This will trigger never

    }

    < s:List id = "itemList".

    useVirtualLayout = "false".

    Changing = "listChangingHandler (Event)" "

    Click = "Event.stopPropagation (); »

    touchTap = "event.stopPropagation (); »

    scrollSnappingMode = "tip".

    Height = "height of {}.

    interactionMode = 'touch '.

    explicitHeight = "{height}".

    dropEnabled = "false".

    dragEnabled = "false".

    dragMoveEnabled = "false".

    allowMultipleSelection = "false".

    alternatingItemColors = "[0xe6e6fa, 0xF0F8ff].

    dataProvider = "{itemArray}.

    itemRenderer = "converters. MyLibraryToolsPanelListItemRenderer ".

    horizontalScrollPolicy = "off".

    verticalScrollPolicy = "on".

    borderVisible = "false".

    visible = "{ItemArray.Length > 0} '"

    includeInLayout = "{itemList.visible}" "

    Width = "100%" >

    < s:layout >

    < s:VerticalLayout id = "itemListVerticalLayout" variableRowHeight = "false" gap = "0" / >

    < / s:layout >

    < / s:List >

    < s:Label id = "noToolsMsg" text = "no tool saved available." horizontalCenter = "0" verticalAlign = "middle" red = "0" visible = "{itemArray.length == 0} ' includeInLayout ="{noToolsMsg.visible}"/ >"

    < / s:Group >

    = Renderer code that contains relevant sections =.

    protected function creationCompleteHandler (): void

    {

    trace ("FUNCTION MyLibraryToolsPanelListItemRenderer creationCompleteHandler"); / / MyLibraryToolsPanelListItemRenderer FUNCTION creationCompleteHandler

    trace ("data:" + data);  / / data: null

    dataProxy = new ObjectProxy (data);

    ...

    Looks like I'll change to use instead of the creationComplete dataChange in all my custom converters.  I can't believe I lost 2 days and more hair because of something so trivial as multithreading.

    Really... You cannot MAKE something before that data is passed and the rendering engine is INSTANTIATED ONLY when an element is added to the dataProvider... Then... the procedure.   Data added to dataProvider-online Insantiate WITH object relevant-Online Layout/rendering/upgrade to day-online THEN creationComplete();   Duh.  creationComplete is a misnomer if you don't even have the relevant data that you use to CREATE the instance.

    No doubt this would be avoided if the BUG that places the dummy rendering engine IN the dataProvider have been set, but as it is - not, been resolved, I have no choice but to disable put in virtual.   Sage, grumble, winge winge winge-grouse.

  • Problem with the mobile Flex list control

    Hello world.

    I have a problem with the list control in Flex mobile.  I need create list in "Flex mobile" and I need that list items must have following structure. a single image, text and then another picture. How do I do this?

    Concerning

    Include a component with a custom converter.

    See the documentation for Flex: http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-23c04461124bbeca597-8000.html for more details.

  • Spark list component Icon property?

    in Flex 3.x the VBox property was property of the icon that you can use to set the images in the elements of the list as well as the label property. How can I get the same thing in a Flex 4 spark list component?

    I would like something like 'iconField' property set to the list item, so that my itemrenderer can be generic and not worry for a specific type of object is passed in.

    Thank you!

    ~ Mike

    I have the subclass would list, add an iconField property and change the default

    renderer a converter custom will check data [iconField] for a

    icon and display it.

  • This allows identical entries in a List control

    Hi all

    I'm putting data in a list control, but I can't make my list accept duplicate entries.

    He actually accepts the duplicates, but then I can't select them more.

    Here is an example:

    " < = xmlns:mx mx:Application ' http://www.Adobe.com/2006/MXML "applicationComplete ="init ()">

    < mx:Script >

    <! [CDATA]

    Import mx.collections.ArrayCollection;


    private var ac:ArrayCollection = new collection ArrayCollection (["a", "b", "a"]);

    private function init (): void {}

    l1.dataProvider = ac;

    }

    []] >


    < / mx:Script >

    < mx:List id = "l1" width = "100" / >

    < / mx:Application >

    This creates a nice list with the entries: 'a', 'b' and 'a'-> the problem is that I can't choose the first 'a' in the list - the selection goes to the last 'a '!

    But I need the also selectable premiera!

    Does anyone have an idea how to make it work?

    Thank you very much in advance!

    Daniel

    Which is because the flex compoenents use == to recognize the elements. Since him 'a' == '' a' the problem will remain the same.

    What you can do, thought, is to encapsulate your strings into objects.

    For example:

    myAC = new ArraCollection( [ {label:"a"} , {label:"a"} ] );
    

    This way, you have two separate object with the property of good label ('a').

    The above code is quite ugly, but you can do the same thing with a custom class to wrap the strings.

    It would give something like:

    myAC = new ArrayCollection( [ new MyCustomWrapper( "a" ) , new MyCustomWrapper( "a" ) ] );
    

    And I think that you need to implement a function to label as long as you have a custom label on the wrapper class property.

  • I neeed an example of a device custom for brushless control throught Canopen communication

    Hello

    I want to do a custom for brushless control throught communication Canopen device, I don't know if I could find an example to start

    I have the following equipment:

    -Maxon Brushless Motors

    -By car Epos2 24/5

    -OR PXI 8531

    -NI PXI 8135 RT controller

    I have labview 2012 and 2012 veristand

    Thanks for any help

    Hi Mohamed,

    It's Vincent of National Instruments. We will discuss that off-line.

    What we provide, it is unlikely that we could provide something that is exactly directly to your EPOS readers.

    CANOpen is a standard and we can provide Custom-device for CANOpen. Based in this Custom device, you configure it for your needs.

    Concerning

    Vincent

  • record data in the list control

    Hi all

    I changed a program a list item in a list control of "51" "77" by using the function NOR "ReplaceListItem (...)"

    When I left the program and looked at the list control, I have observed the list item has still "51" (instead of the expected '77').

    The question is: ' how can I permanently replace a list item in a list control.

    Thank you.

    Bob

    If I understand correctly, you have defined some items in the list control in IUR Editor, then you want to change one of them by program and have this change in the file of the IUR.

    Well, if that's what you are trying to accomplish, there is no easy way to get it: operated by program changes cancel their scope when you exit the program and not reflected in the physical files. Use the ICB ActiveX interface, save the IUR in TUI form with function (CVI_AppConvertUIRToTUI), modify programmatically the TUI file, save it and then convert it to the IUR by CVI_AppConvertTUIToUIR () format. Not a trivial task, I'm afraid, and, possibly, this task is not worth.

    An easier way is to have an external options file or a configuration file where to store items to load in the list control when you need it: this file can be edited by yourself, either programmatically or manually when you need to change some items.

  • A custom numbered list only gives me 1, 1, 1... and 1.

    Hello

    I made a custom numbered list, but somehow it doesn't give me that number 1 after no. 1 over and over again.

    Can anyone see what I did wrong? (Sorry, the program is in Swedish...)

    Louise

    Number one.PNG

    Select the item in the list that you want to restart, then restart the numbering in the paragraph Panel

  • How to create a multi column list control?

    Currently is a single-column listbox using StdListBoxWidgetN.

    How to create a multi columns as an image list control?

    What I see a sample? or add any source?

    Thanks for help.

    You must use the TreeView Widget.

    See the example persistentlistui or wlistboxcomposite in the sdk.

  • How to disable the search in drop-down list control

    Hi all

    I'm designing a dashboard with a command prompt. In this message, I use a drop-down list control which I hope to turn off the option "search...". ».
    Does anyone know a way to disable the option 'search' in a drop-down list control, so that users can not find values on the database.

    Any kind of help appreciated.

    Thank you!

    Laurent

    Published by: 988334 on 26 Feb. 2013 10:27

    Hi Laurent,.

    You can try the below workaround to hide the option "search...". "on the drop-down list.

    -Click on the dashboard to change where the dashboard prompt is present.
    -Add a text object to the page and paste the code below into it.

    -Check that you check the option 'Contains HTML markup'.
    -Save the page and run the dashboard. This should hide the option "search...". ».

    I tried this on IE and obiee version 11.1.1.6.6.

    Thank you
    Hyder

  • spark list removeChildAt error

    I am trying to remove an item from the spark list books as follows:

    books.removeChildAt (books.selectedIndex);

    but I get an error when I run the method:

    Error: removeChildAt() is not available in this category. Instead, use removeElementAt() or change the skin, if you have a.

    they do not compile if I use removeElementAt() as the s:List does not have this method. I do not have a skin to change either.

    How can I delete the item in the list? Thanks - brandon

    remove the item from the dataprovider of the list.

    list.dataProvider.removeItemAt(list.selectedIndex);
    
  • need help with change in spark list itemRenderer

    Hey guys... so I have a spark list, where I've made available to tileLayout and I use the converter component to display an image and two buttons in each tile... what im trying to do is when you hover over each tile I want buttons fade in and out... and by default... I need to no visible buttons...

    I had pimples fade in and out when you hover over the point... but the problem is that I have when I initialize the application buttons are all visible... If there is no sence...

    any help is greatly appretiated!

    Here is the code I have... can you tell me what changes I need to make...

    <s:List id="searchResultImages" borderVisible="false" dataProvider="{searchImages}" width="100%" height="100%">
         <s:layout>
              <s:TileLayout requestedColumnCount="6" horizontalGap="30" columnWidth="100" rowHeight="85" />
         </s:layout>
         <s:itemRenderer>
              <fx:Component>
                   <s:ItemRenderer>
                        <s:states>
                             <s:State name="hovered" />
                             <s:State name="normal" />
                        </s:states>
                        <s:transitions>
                             <s:Transition fromState="normal" toState="hovered">
                                  <s:Fade id="hoveredFade" targets="{[delBtn, editBtn]}" alphaFrom="0.0" alphaTo="1.0" duration="1000" />
                             </s:Transition>
                             <s:Transition fromState="hovered" toState="normal">
                                  <s:Fade id="normalFade" targets="{[delBtn, editBtn]}" alphaFrom="1.0" alphaTo="0.0" duration="1000" />
                             </s:Transition>
                        </s:transitions>
                        <s:VGroup>
                             <mx:Image source="{data.fileLoc}" width="100" height="50" useHandCursor="true" buttonMode="true" verticalCenter="0" />
                             <s:HGroup>
                                  <mx:LinkButton id="delBtn" label="DEL" skin="{null}" color="#0184C7" rollOverColor="#333333" useHandCursor="true" 
                                                    buttonMode="true" />
                                  <mx:LinkButton id="editBtn" label="EDIT" skin="{null}" color="#0184C7" rollOverColor="#333333" useHandCursor="true" 
                                                    buttonMode="true" />
                             </s:HGroup>
                        </s:VGroup>
                   </s:ItemRenderer>
              </fx:Component>
         </s:itemRenderer>
    </s:List>
    

    Hello

    With a lot of intelligence are already integrated into state transitions, when for example the transition fading knows when to fade in or fade out, get your components placed in the States you want is all that is necessary.

    This is a simple example, but as you can see there is almost no code involved...

    http://gumbo.flashhub.NET/Cyber/ source included

    David.

Maybe you are looking for