DataGrid Styling

Hi All,
I know that I can modify the skins for the Flash DataGrid Component inside an FLA and then export as a SWC to use if in my projects but I need to be able to modify the style of the component at runtime. Can anyone point me in the right direction or let me know if it is even possible.
Any help is appreciated,

http://kirill-poletaev.blogspot.com/2011/01/as3-datagrid-component-part-1.html

Similar Messages

Datagrid styling in Flashbuilder

Hey everyone,
I have some issues styling a Datagrid with Flashbuilder.
My problem is skinning the Datagrid. I wan't to have the Datagrid transparent, which I used to achieve by setting backgroundAlpha="0" and alternatingItemColors="{[]}" in Flexbuilder. This doesn't work when the compiler uses the Spark Theme. The thing is I don't want to use the Halo Theme on all my Components like Peter explains here: http://blog.flexexamples.com/2009/07/14/using-the-halo-theme-in-flex-4/ Is there a way of getting the Datagrid transparent without using the halo theme?
The second issue I have is regarding fonts in the Datagrid. I managed to embed system fonts like Arial or Verdana, but when it comes to the .ttf the designer wants me to use, no text is displayed. I found out, that the Datagrid uses bold fonts for default. I've set the font-weight to normal on the columns but they still stay empty.
Here's my css code:
@font-face
    src:                        url("assets/fonts/FuturaCom-Medium.ttf");
    fontWeight:                 normal;
    fontFamily:                 myFuturaMedium;
    advancedAntiAliasing:       true;
    cff:                        true;
    unicode-range:              U+0020-U+007E, /* englishRange & basic latin */
                                U+00A0-U+00FF, /* basic latin with umlaut äöü*/
                                U+20AC-U+20AC;
.myDatagrid{
    fontFamily: myFuturaMedium;
    font-weight:normal;
    color: #FFFFFF;
Thanks in advance. Help is highly appreciated!

Or the other approach (a custom skin) would be something like this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="red">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingTop="20" />
    </s:layout>
    <mx:DataGrid id="dataGrid"
            alternatingItemColors="[]"
            borderSkin="skins.CustomBorderSkin">
        <mx:dataProvider>
            <s:ArrayList>
                <fx:Object c1="0.One" c2="0.Two" />
                <fx:Object c1="1.One" c2="1.Two" />
                <fx:Object c1="2.One" c2="2.Two" />
                <fx:Object c1="3.One" c2="3.Two" />
                <fx:Object c1="4.One" c2="4.Two" />
                <fx:Object c1="5.One" c2="5.Two" />
                <fx:Object c1="6.One" c2="6.Two" />
                <fx:Object c1="7.One" c2="7.Two" />
                <fx:Object c1="8.One" c2="8.Two" />
                <fx:Object c1="9.One" c2="9.Two" />
            </s:ArrayList>
        </mx:dataProvider>
    </mx:DataGrid>
</s:Application>
And the custom border skin, skins/CustomBorderSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?>
<local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*" implements="mx.core.IRectangularBorder">
    <fx:Script>
        <![CDATA[
        import mx.core.EdgeMetrics;
        import mx.core.IUIComponent;
        import mx.graphics.RectangularDropShadow;
        /* Define the skin elements that should not be colorized. */
        static private const exclusions:Array = ["background"];
        override public function get colorizeExclusions():Array {return exclusions;}
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];
        override public function get contentItems():Array {return contentFill};
        /* Define the border item. */
        static private const borderItem:Array = ["borderStroke"];
        override protected function get borderItems():Array {return borderItem;}
        override protected function get defaultBorderItemColor():uint {return 0x696969;}
        static private const metrics:EdgeMetrics = new EdgeMetrics(1, 1, 1, 1);
        private var dropShadow:RectangularDropShadow;
        public function get borderMetrics():EdgeMetrics
            return metrics;
        public function get backgroundImageBounds():Rectangle
            return null;
        public function set backgroundImageBounds(value:Rectangle):void
        public function get hasBackgroundImage():Boolean
            return false;
        public function layoutBackgroundImage():void
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            graphics.clear();
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if (parent && parent is IUIComponent && !IUIComponent(parent).enabled)
                alpha = 0.5;
            else
                alpha = 1;
            // Draw drop shadow, if needed
            if (getStyle("dropShadowEnabled") == false ||
                getStyle("dropShadowEnabled") == "false" ||
                width == 0 ||
                height == 0)
                return;
            // Create a RectangularDropShadow object, set its properties,
            // and draw the shadow
            if (!dropShadow)
                dropShadow = new RectangularDropShadow();
            dropShadow.distance = 5;
            dropShadow.angle = 90;
            dropShadow.color = 0;
            dropShadow.alpha = 0.8;
            dropShadow.blurX = 20;
            dropShadow.blurY = 20;
            dropShadow.drawShadow(graphics, x, y, width, height);
        private function getDropShadowAngle(distance:Number,
                                            direction:String):Number
            if (direction == "left")
                return distance >= 0 ? 135 : 225;
            else if (direction == "right")
                return distance >= 0 ? 45 : 315;
            else // direction == "center"
                return distance >= 0 ? 90 : 270;
        ]]>
    </fx:Script>
    <s:Group left="0" right="0" top="0" bottom="0">
        
        <s:Rect left="0" right="0" top="0" bottom="0">
            <s:stroke>
                <s:SolidColorStroke id="borderStroke" />
            </s:stroke>
        </s:Rect>
        
        <s:Rect id="background" left="1" right="1" top="1" bottom="1" alpha="0">
            <s:fill>
                <s:SolidColor id="bgFill" color="0xFFFFFF" />
            </s:fill>
        </s:Rect>
    </s:Group>
</local:SparkSkinForHalo>
(The border skin was taken from %FLEX SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\BorderSkin.mxml and I basically only added that alpha="0" bit on the background Rect fill.
This is one of the areas we are still trying to improve in Spark (backgroundImage, backgroundAlpha). If you have any list of styles that worked in Halo but aren't working any more in the default Halo control/container Spark skins, let us know.
Peter

Spark Datagrid: Styling the Header?

Hi,
Question for all the Spark and Datagrid gurus out there:
How can I change the text style of the spark datagrid header? For example, I want to make it blue with underlines. More importantly I need to change the color on rollover and/or selection.
Second, how can I change the sort indicator/icon? I'd like to substitute the up/down triangle with a graphic image or other mxml object.
I've searched the net high and low, but haven't yet found answers to the above questions. Is there documentation for such things, or is a bunch of custom code required?
Within the DefaultGridHeaderRender (which I've duplicated), I did find the "labelDisplayGroup" and the "sortIndicatorGroup". But how can these be customized?
Thank you very much for any advice or help. Regards,
dana.

Thank you Kevin for the reply.
Ideally we'd like to be able to clearly indicate to the user which column is selected. With the default skin, the background color for the header renderer is used to indicate currently selected column. However in the current design I'm working with, the background needs to be transparent. So the goal is to indicated which header is selected by changing the header text color. My hope was that whatever controls when the sort indicator and the background color change was also easily accessible. But I can't find a way to leverage the existing controls to know when a column is selected.
It sounds like instead I should write and append my own column selection control mechanism and/or events, which I can then use to change the text color.
In the future it might be nice to have a "selected" state for header renderers, like the rest of the datagrid items, to make it easily to program for and separate out the 'view' a bit more. (Unless of course this already exists, and I'm just missing it.)
Thanks for your replies,
dana.

Datagrid styling. All even rows blue - odd rows white

Hi.
I have seen a lot of tables where the second row is white and the first is blue. This makes it easier to read the data for a particular students results.
How could that be done - would you have to code it in ie: colour the even rows by targeting the even numbers or is there a built in way.
Cheers

Information:
http://blogs.adobe.com/pdehaan/2007/06/setting_a_flash_data_grids_bac_1.html
http://blogs.adobe.com/pdehaan/2007/06/alternating_background_colors.html
Source Files:
http://blogs.adobe.com/pdehaan/code/section13.example1.zip
http://blogs.adobe.com/pdehaan/code/section12.example1.zip

Need some help styling datagrid...

Hi,
I have added a datagrid to my flex application and I need to give it a specific style but I can't get it to work.
I need to remove the rollover color of the datagrid column headers. I've trawled through the flex forumns and website but so far I've been unable to find anything to help. Also, I want to give the datagrid an inset border, so that it looks sunken into the application background. I've tried setting the border style to inset but it doesn't look as though it has had any effect.
Finally, I want to make the corners of the datagrid and datagrid columns rounded. I've added the corner radius setting to the datagrid and the datagrid columns but only the datagrid corners are rounded. The column corners are still square and stick past the rounded datagrid corners. If anyone can help me it would be much appreciated.
Thanks in advance,
Xander.

OK, I have already created and applied a character style with a no-break attribute to all of my equations and propositions (or at least all of the ones I've found so far). This was not done with GREP, because I couldn't figure out how to do it with GREP.
I have now also created a character style with a 50% scale.
But I stil don't understand how to use GREP to apply them both. "...if you can establish a pattern to your symbols and spaces that is different from other text" -- if the pattern I've established that's different from other text is the first character style, how do I create a GREP that applies the second character style only to the space character in text where the first character style is applied?
~Valerie

Want to add some grid styling in my datagrid

Hi All ,
In my datagrid i have a requirement in which when ever i do mouse hovering onto a particular read only data grid a link button should gets appended before that row and also the color of the row should also changed to yellow . till this point i am able to achieve the functionality . After that if i move mouse to that link button which comes as a pop up on hovering of the current row , i want to change the color of the row to blue . i tried with giving selction-color and roll-over-color in the style sheet as per required . but i am facing a problem whenever i am inside the grid the change of color from hovering to selection is happening fine , but as soon as i move my mouse to that link button ,all the color style removed . And i am not able to control the style of the row from the event handler of the link button .
then i tried to give all the style to my grid through the renderer . Have any one of you ever come to achieve such requirement . Kindly help me out.

I'm not sure what you are trying to do here is possible. As soon as you move the mouse to the pop-up, the row is no longer 'hovered' so it makes sense that any style changes based on being in the 'hovered' state would revert. My suggestion would be to trigger the changes when the row is selected instead. So have an event listener for row selection that sets the row color to yellow, displays the pop-up, and saves a reference to the target row somewhere. Then in the event listener for the link button use the saved reference to the row to change the color to blue.

Styling an advanced datagrid

Hi,
I need to be able to apply background images to both columns
and rows in a datagrid. Has anyone managed to do such thing, and if
so, can you please tell me how you did it?
Many thanks in advance,
Gareth

to remove watermark i have added license key in WEB-INF\flex\license.properties file as key = value

Spec posted: Styling Gumbo Components

An older specification on styling has been posted to the flex open source site:
http://opensource.adobe.com/wiki/display/flexsdk/Styling+Gumbo+Components

I believe all scrolling is smooth scrolling now, it’s up to the scrollbar what increment it will be moving. I think we discuss this more in the specs.
On 4/2/09 2:11 AM, "Iwo Banas" <
[email protected]> wrote:
A new message was posted by Iwo Banas in
Developers --
Spark Virtualization spec posted
The idea of generic layout virtualization is great!
I am not sure if it is a correct place but it would be nice if scrolling management could be implemented in a similarly generic way.
I mean choice between smooth scrolling and jumping the whole items height (or width) like in halo List or DataGrid.
Do you think it is possible to add such functionality?
Cheers,
Iwo Bana¶
View/reply at Spark Virtualization spec posted <
http://www.adobeforums.com/webx?13@@.59b8747c/1>
Replies by email are OK.
Use the unsubscribe <
http://www.adobeforums.com/webx?280@@.59b8747c!folder=.3c060fa3> form to cancel your email subscription.

DataGrid Text Selection Color

In styling my application, I've used CSS to set the text
color for selected rows in a datagrid using the following:
DataGrid {
textSelectedColor: #ffffff;
When I compile and run the application, clicking on a data
row sets the color of the text to white, but if I click on another
row, the previously selected row stays white, and the newly
selected rows remains black. Is this a bug in the system, or am I
missing something?

Hmmm. I may have marked this as the answer too soon. I added
a creation complete item to my dataGrid so it looks like this:
<mx:DataGrid
creationComplete="setStyle('textSelectedColor',0xffffff)" >
and it compiles just fine, but seems to have no effect on the
behaviour. :-\

[svn:fx-trunk] 11208: More styling bug fixes:

Revision: 11208
Author:   [email protected]
Date:     2009-10-27 16:30:03 -0700 (Tue, 27 Oct 2009)
Log Message:
More styling bug fixes:
- Add borderAlpha, borderColor, and borderVisible to NumericStepper
- Make LinkButtonSkin respond to cornerRadius, rollOverColor, and selectionColor
- Draw opaque white background behind data grid header so contentBackgroundColor doesn't bleed through
- ItemRenderer/DefaultItemRenderer no longer draw contentBackgroundColor. In the "normal" states, the background of the renderer is transparent so the skin background color shows through.
QE Notes: 5 DataGrid bitmaps need to be regenerated.
Doc Notes: None
Bugs: SDK-23437, SDK-23367, SDK-23351, SDK-23345, SDK-23339
Reviewer: Kevin, Ryan
API Change: no
Is noteworthy for integration: No
tests: checkintests gumbo/components/NumericStepper components/DataGrid
Ticket Links:
    http://bugs.adobe.com/jira/browse/SDK-23437
    http://bugs.adobe.com/jira/browse/SDK-23367
    http://bugs.adobe.com/jira/browse/SDK-23351
    http://bugs.adobe.com/jira/browse/SDK-23345
    http://bugs.adobe.com/jira/browse/SDK-23339
Modified Paths:
    flex/sdk/trunk/frameworks/projects/spark/src/spark/components/NumericStepper.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/components/supportClasses/ItemRenderer .as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/skins/spark/DefaultItemRenderer.as
    flex/sdk/trunk/frameworks/projects/spark/src/spark/skins/spark/NumericStepperSkin.mxml
    flex/sdk/trunk/frameworks/projects/sparkskins/src/mx/skins/spark/DataGridHeaderBackground Skin.mxml
    flex/sdk/trunk/frameworks/projects/sparkskins/src/mx/skins/spark/LinkButtonSkin.mxml

This bug figures out also when creating a custom spark ComboBox, then trying to programatically update the userProposedSelectedIndex property. The proposed selected index is selected, but does not apply the same skin as when mouse is on rollover or item is selected due to up and down keys.
The issue seems like updating the status of the item renderer to rollover or selected to get the same skin applied.
Please could you attach DropDow nList.as that you edited ?
Thank you so much.

Spark DataGrid scrolling performance problems with debugger

So, i have a DataGrid using the latest SDK (4.5.1) with 500 rows of data and 14 columns. I'm not using any custom ItemRenderers at all; the data is just string and number properties of each data object in an ArrayCollection. When I try to scroll vertically, either by clicking on the scrollbar handle and dragging or by using the arrow buttons, the performance degrades so badly that the application appears to freeze up completely for a few seconds. (I'm on OS X, and I see the spinning beachball icon.) The app then remains so unresponsive as to be pretty much unusable.
The exception to this is when, rather than launching the app as a debug configuration, I just refresh the page so the swf can run without the debugger attached. Detached from the debugger, the performance is great, every time. This is, BTW, using the very latest build of Flash Builder 4.5 Pro; I just installed it last week.
I've tried eliminating various possible causes, and haven't had any luck. I made the data non-bindable, removed all the custom skins and css styling, and even removed event listeners from the DataGrid; none if it seems to make a difference.
Has anyone else noticed this issue? Is there a workaround? If the debugger is to blame (which seems likely), is there some setting that I can turn on or off that will help?
Thanks!
Michael

Hi Michael!
Few days ago I've had the same issue.
My configuration:
Windows 2008 server (i'm working on remote desktop)
Flex SDK 4.5.1
Firefox 8.0 (on Explorer was ok).
Flashplayer version 10.2.153.1
It happened to me only that day (run without debugger, restart application didn't work), but it seems that when I log out from Windows and log in again the problem disappeared.
Best regards
Tom

Cellspacing in datagrid using flex3

i want to know how to create a cell spacning between cells in a datagrid using flex3....

I guess you should be able to do it using verticalseparatorskin and horizontalseparatorskin styles.Just see this link
http://blog.flexexamples.com/2007/08/28/styling-the-flex-datagrid-control-using-a-custom-s eparator-skins/#more-141
By giving suitable colors you can give the feeling that the cells are not bounded to each other.Is this the way you want it??

Panel styling missing in TileList itemRenderer

I have created tile list with an inline ItemRendered component with a Panel component inside to display results.   The panel styling disappears for some reason in a TileList, but not in a DataGrid. How do I force the panel styling to stick, or remove whatever parent style that's forcing the Panel component to lose its borders, drop shadows etc. I looked at the styling, but can't figure out where the conflict is... Code below if you want to test (both DataGrid and TileList, XML just beneath):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:net="flash.net.*" creationComplete="getPortData.send()">
<mx:HTTPService id="getPortData" url="port.xml" />
     <mx:DataGrid dataProvider="{getPortData.lastResult.portfolio.project}" width="100%" height="250" variableRowHeight="true" >
          <mx:columns>
               <mx:DataGridColumn>
                    <mx:itemRenderer>
                         <mx:Component>
                              <mx:Panel title="{data.title}">
                                   <mx:VBox>
                                        <mx:Image source="images/port_thumbnails/{data.thumbimage}" height="100"/>
                                        <mx:Label text="{data.title}" />
                                   </mx:VBox>
                              </mx:Panel>
                         </mx:Component>
                    </mx:itemRenderer>
               </mx:DataGridColumn>
               <mx:DataGridColumn dataField="thumbimage" />
               <mx:DataGridColumn headerText="Column 1" dataField="title"/>
          </mx:columns>
     </mx:DataGrid>
     <mx:TileList dataProvider="{getPortData.lastResult.portfolio.project}" width="100%" variableRowHeight="true" columnWidth="300" >
          <mx:itemRenderer>
                         <mx:Component>
                              <mx:Panel title="{data.title}">
                                   <mx:VBox>
                                        <mx:Image source="images/port_thumbnails/{data.thumbimage}" height="100"/>
                                        <mx:Label text="{data.title}" />
                                   </mx:VBox>
                              </mx:Panel>
                         </mx:Component>
          </mx:itemRenderer>
     </mx:TileList>
</mx:Application>
XML:
<?xml version="1.0" ?>
- <portfolio>
- <project>
<thumbimage>bigsky_thumb.jpg</thumbimage>
<bigimage>big_sky.jpg</bigimage>
<title>Project 1 title</title>
</project>
- <project>
<thumbimage>conrad_thumb.jpg</thumbimage>
<bigimage>conrad_klein.jpg</bigimage>
<title>Project 2 title</title>
</project>
- <project>
<thumbimage>fire_thumb.jpg</thumbimage>
<bigimage>fire_central.jpg</bigimage>
<title>Project 3 title</title>
</project>
- <project>
<thumbimage>learncen_thumb.jpg</thumbimage>
<bigimage>learn_central.jpg</bigimage>
<title>Project 4 title</title>
</project>
- <project>
<thumbimage>molton_thumb.jpg</thumbimage>
<bigimage>molton_flooring.jpg</bigimage>
<title>Project 5 title</title>
</project>
- <project>
<thumbimage>nusash_thumb.jpg</thumbimage>
<bigimage>nusash.jpg</bigimage>
<title>Project 6 title</title>
</project>
- <project>
<thumbimage>pleasure_thumb.jpg</thumbimage>
<bigimage>pleasure_dishes.jpg</bigimage>
<title>Project 7 title</title>
</project>
- <project>
<thumbimage>tarheel_thumb.jpg</thumbimage>
<bigimage>tarheel_form.jpg</bigimage>
<title>Project 8 title</title>
</project>
- <project>
<thumbimage>ward_thumb.jpg</thumbimage>
<bigimage>ward_andrews.jpg</bigimage>
<title>Project 9 title</title>
</project>
</portfolio>

Try using a Canvas around the Panel

Datagrid Image Renderer Broken in CS SDK but not Flex project

Within a Photoshop Extension, I have a DataGrid which has an inline custom image renderer whose dataprovider is an ArrayCollection called "photos" representing a list of photos and some metadata properties. One of the properties "fileName" is concatenated with a path to a thumbnail image such as source="{'LR_AUTO/imported/thumbs/' + data.fileName}".
The dataprovider is bound to a LCDS DataService. When the extension is first launched, the dataservice initializes the dataprovider with the existing values for the "photos" arraycollection. The thumbnail images are correctly shown.
However, when the DataService receives a new row and updates the photos dataprovider, the datagrid's new row shows a broken image for the thumbnail even though the path is correct. I have dumped the photos dataprovider and verified that all information is correct. When I close Photoshop and relaunch it from Flash Builder, once again LCDS initializes the photos ArrayCollection and THEN the thumbnail that previously showed as broken show up correctly.
I have a ColdFusion Directory Watcher Gateway that watches a directory where Lightroom auto-imports images from a tethered capture session. When the camera sends Lightroom a new image, the new image is processed by Lightroom and moved to a target directory, and since ColdFusion's Directory Watcher is watching that targeted directory, ColdFusion will create a thumbnail image in a subfolder and notifiy LCDS that of the new image and related metadata.
*** This is the interesting part *** When Lightroom places new images in the target directory, this is propogated to the Photoshop Extension's datagrid, and the new row shows up as described earlier, showing a broken image for the thumbnail. BUT, instead of Lightroom, if I manually copy images to the folder where ColdFusion is watching, then exact same code path is exectuted and in the Photoshop Datagrid the new row appears and THE THUMBNAIL IMAGE shows up correctly.
The difference seems to be only in how the images are put in the original target location. The problem is when Lightroom puts them there, but it works when I put them there as a user.
*** More Interesting Info *** I have the Flex code for the Photoshop Extension duplicated in a standalone, non-CSSDK project using Flex 3.4 which I launch in a browser. I have mirrored the code in the Photoshop extension, but in this manner, the problem does not exist. With plain Flex 3.4 in a browser, whenever LCDS notifies the datagrid of a new photo record, the datagrid's new row ALWAYS shows the thumbnail correctly.
A primary difference in how the thumbnail image is rendered is that in a browser, the Flex 3.4 project accesses the image assets over the network, however, in the Photoshop Extension, the image asset WITH THE SAME RELATIVE PATH is accessed over the local file system.
source="{'LR_AUTO/imported/thumbs/' + data.fileName}"
So in the case of the browser, this path is a relative URL and the image is retrieved over HTTP, however, in the PS Extension, the same path represents a file system path relative to the project folder.
Unfortunately, because the Flash Player (including APE) cannot access BOTH the network and the local filesystem, so I cannot change the Extension to use network access.
** The important part to remember is that when I stop the Flash Builder debug session and close Photoshop, then relaunch the debug with Photoshop, then all the images show up correctly in the Extension.
Your advice is appreciated.
Thank you!
Steve
====================================================
Environment
====================================================
Photoshop CS5 Extended 12.01 x32
Flash Builder 4
CS SDK 1.02
Extension Builder SDK 3.4
MacBook Pro / OS X 10.5 / Intel Core 2 Duo 2.66 GHz / Procs: 1 / Cores: 2 / Memory: 8 GB
App configured for Photoshop CS5 and Photoshop CS5 Extended
====================================================
NewsAgencyPhotoshop.mxml
====================================================
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="com.stevenerat.news.*"
                horizontalScrollPolicy="off" verticalScrollPolicy="off" verticalGap="0"
                layout="vertical" horizontalAlign="left" backgroundColor="#353535"
                historyManagementEnabled="false"
                creationComplete="init();">
    <mx:Script>
            public function handlePhotoClick(data:Object):void {
                this.PreviewImageWindow = PreviewImage(PopUpManager.createPopUp(this,PreviewImage,true));
                var filePath:String = data.dirPath + data.fileName;
                PreviewImageWindow.addEventListener("imageOpenEvent",imageOpenListener);
                PreviewImageWindow.addEventListener("imageCloseEvent",imageCloseListener);
                PreviewImageWindow.addEventListener("imageSavedEvent",imageSaveListener);
                PreviewImageWindow.setFileName(data.fileName);
                PreviewImageWindow.setFilePath(filePath);
                PreviewImageWindow.y = 0;
                PreviewImageWindow.x = 0;
        ]]>
    </mx:Script>
    <mx:ArrayCollection id="photos"/>
    <NewsPhoto/>
    <mx:DataService id="ds" destination="NewsAgencyPhotos" autoSyncEnabled="true" autoCommit="true" conflict="conflictHandler(event)"/>
    <mx:Label text="News Agency Photos" fontSize="20" paddingBottom="30"/>
    <mx:Label text="Available Images" fontSize="15"/>
    <mx:DataGrid id="photoIPTC" dataProvider="{photos}" editable="true" width="220" rowCount="5" rowHeight="75" wordWrap="true">
        <mx:columns>
            <mx:DataGridColumn headerText="id" dataField="fileName" width="40" editable="false" sortDescending="true"/>
            <mx:DataGridColumn dataField="psLock" width="65" headerText="Status" editable="false" editorDataField="value">
                <mx:itemEditor>
                    <mx:Component>
                        <mx:ComboBox editable="false">
                            <mx:dataProvider>
                                <mx:String>New</mx:String>
                                <mx:String>Open</mx:String>
                                <mx:String>Edited</mx:String>
                            </mx:dataProvider>
                        </mx:ComboBox>
                    </mx:Component>
                </mx:itemEditor>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                            <mx:Image click="outerDocument.handlePhotoClick(data);" source="{'LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
                        </mx:HBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
</mx:Application>
====================================================
A DUMP OF THE DATAPROVIDER
in this case, one array item existed when launched, then a second was added
while running. The first has its thumbnail show, the second item has broken image
====================================================
------------------DUMP----------------------------
(mx.collections::ArrayCollection)#0
filterFunction = (null)
length = 2
list = (mx.data::DataList)#1
    fillParameters = (Array)#2
    length = 2
    localItems = (Array)#3
      [0] (com.stevenerat.news::NewsPhoto)#4
        aperture = "F10"
        cameraLens = "EF24-70mm f/2.8L USM"
        cameraModel = "Canon EOS 7D"
        city = ""
        copyrightNotice = "¬© Steven Erat 2011"
        country = ""
        creator = "Steven Erat"
        description = ""
        dirPath = "/Users/stevenerat/LR_AUTO/imported/"
        fileName = "ERAT_STEVEN_20110122_162.jpg"
        focalLen = "42.0 mm"
        headline = ""
        id = 1
        iso = "100"
        keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
        psLock = "New"
        shutterSpeed = "1/128 sec"
        state = ""
      [1] (com.stevenerat.news::NewsPhoto)#5
        aperture = "F10"
        cameraLens = "EF24-70mm f/2.8L USM"
        cameraModel = "Canon EOS 7D"
        city = ""
        copyrightNotice = "¬© Steven Erat 2011"
        country = ""
        creator = "Steven Erat"
        description = ""
        dirPath = "/Users/stevenerat/LR_AUTO/imported/"
        fileName = "ERAT_STEVEN_20110122_163.jpg"
        focalLen = "42.0 mm"
        headline = ""
        id = 2
        iso = "100"
        keywords = "Alt, Dramatic, Fashion, Girl, Glamorous, Glamour, Inked, Model, Portrait, SOPHA"
        psLock = "New"
        shutterSpeed = "1/128 sec"
        state = ""
    uid = "8BAC025E-60D1-11F1-3654-44BDB0D218CE"
    view = (mx.collections::ArrayCollection)#6
      filterFunction = (null)
      length = 2
      list = (mx.data::DataList)#1
      sort = (null)
      source = (null)
sort = (null)
source = (null)
------------------END_DUMP------------------------

I expected that if my extension uses the local filesystem AND the network that I would get a Security Sandbox Exception as I recently described in this thread:
http://forums.adobe.com/thread/791918?tstart=0
However, I just tried changing my datagrid image renderer to access the thumbnail via HTTP and the thumbnail issue after Lightroom export does not happen.
            <mx:DataGridColumn headerText="Photo" dataField="fileName" width="80" editable="false">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:HBox horizontalAlign="center" horizontalScrollPolicy="off" verticalScrollPolicy="off">
                            <mx:Image click="outerDocument.handlePhotoClick(data);" source="{'http://localhost:8500/LR_AUTO/imported/thumbs/' + data.fileName}" width="75" height="75"/>
                        </mx:HBox>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
Furthermore, I can also open the image via the Photoshop DOM, and it does open correctly. It seems that I do have a solution now, although I'm not certain as to why I'm not getting a Security Sandbox Exception as I described in the other post.
Thanks for reading.

DataGrid does not display XML data

Hello, and thanks for reading this...
I am having a problem displaying XMLList data in a DataGrid.
The data is coming from a Tree control, which is receiving it
from a database using HTTPService.
The data is a list of "Job Orders" from a MySQL database,
being formatted as XML by a PHP page.
If it would be helpful to see the actual XML, a sample is
here:
http://www.anaheimwib.com/_login/get_all_orders_test2.php
All is going well until I get to the DataGrid, which doesn't
display the data, although I know it is there as I can see it in
debug mode. I've checked the dataField property of the appropriate
DataGrid column, and it appears correct.
Following is a summary of the relevant code.
...An HTTPService named "get_all_job_orders" retrieves
records from a MySQL database via PHP...
...Results are formatted as E4X:
HTTPService resultFormat="e4x"
...An XMLListCollection's source property is set to the
returned E4X XML results:
...The "order" node is what is being used as the top-level of
the XML data.
<mx:XMLListCollection id="jobOrdersReviewXMLList"
source="{get_all_job_orders.lastResult.order}"/>
...The "jobOrdersReviewXMLList" collection is assigned to be
the dataProvider property of a Tree list, using the @name syntax to
display the nodes correctly, and a change event function is defined
to add the records to a DataGrid on a separate Component for
viewing the XML records:
<mx:Tree dataProvider="{jobOrdersReviewXMLList}"
labelField="@name"
change="jobPosForm.addTreePositionsToDG(event)"/>
...Here is the relevant "jobPosForm" code (the Job Positions
Form, a separate Component based on a Form) :
...A variable is declared:
[Bindable]
public var positionsArray:XMLList;
...The variable is initialized on CreationComplete event of
the Form:
positionsArray = new XMLList;
...The Tree's change event function is defined within the
"jobPosForm" Component.
...Clicking on a Tree node fires the Change event.
...This passes an event object to the function.
...This event object contains the XML from the selected Tree
node.
...The Tree node's XML data is passed into the positionsArray
XMLList.
...This array is the dataProvider for the DataGrid, as you
will see in the following block.
public function addTreePositionsToDG(event:Event):void{
this.positionsArray = selectedNode.positions.position;
...A datagrid has its dataProvider is bound to
positionsArray.
...(I will only show one column defined here for brevity.)
...This column has its dataField property set to "POS_TITLE",
a field in the returned XML record:
<mx:DataGrid width="100%" variableRowHeight="true"
height="75%" id="dgPositions"
dataProvider="{positionsArray}" editable="false">
<mx:columns>
<mx:DataGridColumn width="25" headerText="Position Title"
dataField="POS_TITLE"/>
</mx:columns>
</mx:DataGrid>
In debug mode, I can examine the datagrid's dataProvider
property, and see that the correct XML data from the Tree control
is present. However, The datagrid does not display the data in any
of its 6 columns.
Does anyone have any advice?
Thanks for your time.

Hello again,
I came up with a method of populating the DataGrid from the
selected Item of a Tree Control which displays complex XML data and
XML attributes. After the user clicks on a Tree branch, I call this
function:
public function addTreePositionsToDG(event:Event):void{
//Retrieve all "position" nodes from tree.
//Loop thru each Position.
//Add Position data to the positionsArray Array Collection.
//The DataGrid dataprovider is bound to this array, and will
be updated.
positionsArray = new ArrayCollection();
var selectedNode:Object=event.target.selectedItem;//Contains
entire branch.
for each (var position:XML in
selectedNode.positions.position){
var posArray:Array = new Array();
posArray.PK_POSITIONID = position.@PK_POSITIONID;
posArray.FK_ORDERID = position.@FK_ORDERID;
posArray.POS_TITLE = position.@POS_TITLE;
posArray.NUM_YOUTH = position.@NUM_YOUTH;
posArray.AGE_1617 = position.@AGE_1617;
posArray.AGE_1821 = position.@AGE_1821;
posArray.HOURS_WK = position.@HOURS_WK;
posArray.WAGE_RANGE_FROM = position.@WAGE_RANGE_FROM;
posArray.WAGE_RANGE_TO = position.@WAGE_RANGE_TO;
posArray.JOB_DESCR = position.@JOB_DESCR;
posArray.DES_SKILLS = position.@DES_SKILLS;
positionsArray.addItem(posArray);
So, I just had to manually go through the selected Tree node,
copy each XML attribute into a simple Array, then ADD this Array to
an ArrayCollection being used as the DataProvider for the DataGrid.
It's not elegant, but it works and I don't have to use a Label
Function, which was getting way too complicated. I still think that
Flex should have an easier way of doing this. There probably is an
easier way, but the Flex documentation doesn't provide an easy path
to it.
I want to thank you, Tracy, for the all the help. I checked
out the examples you have at www.cflex.net and they are very
helpful. I bookmarked the site and will be using it as a resource
from now on.

DataGrid Styling

Similar Messages

Maybe you are looking for