Questions about Spark DataGrid (Header Font Styles, Header Gradient)

Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.
1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.
2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios.  Not sure where to set them now.
I think that is it for now.  From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.
Thanks in advance!
Bill

You can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:skins="spark.skins.spark.*">
    <fx:Declarations>
        <!-- See DataGridSkin for other possible parts -->    
        <fx:Component id="headerRenderer">
            <s:CustomGridHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
-Kevin

Similar Messages

  • Spark DataGrid Embedded Font Quandary

    01.  In everything that follows, I am talking about the latest [21328] version of the SDK, not that I believe that my problems have anything to do with that release, just so anyone interested and willing to help will know the version.
    02.  My application happens to be rooted in AIR's WindowedApplication, but again, I do not think that has any impact on my problems; I believe the same results would obtain for a Flex Application.
    03.  I have a custom renderer for the Spark DataGrid which extends DefaultGridItemRenderer.  It works fine. Its primary job is to change the font characteristics of each row in the list as a visual clue to the user as to the specific nature of the content that is accessible.  Some entries are just in the Regular font, some in Bold, some in Italic, and some in Bold-Italic.
    04.  I have, for most of the project, embedded the necessary fonts like this:
        [Embed (source="C:/Windows/Fonts/ArnoPro-Caption.otf", fontName="ArnoPro_BI_4",
            fontStyle="italic",
            fontWeight="bold",
            mimeType="application/x-font",
            embedAsCFF="true",
            unicodeRange="U+0021-U+00ff, U+20ac-U+20ac")]
        private const ArnoPro_BI_4:Class;
    As I said, that all works just as advertized.  But, that method of embedding carries the somewhat painful burden of slower compilations, so for the last 24 hours I have unseccessfully been trying to replace that with:
    [Embed (source = "../resources/assets/ArnoPro_BI_4.swf", symbol="ArnoPro_BI_4")]
    private const ArnoPro_BI_4:Class;
    where the swf file was produced via fontswf, using this incantation:
    fontswf -4 -u U+0021-U+00ff,U+20ac-U+20ac -b -i -a ArnoPro_BI_4 -o ArnoPro_BI_4.swf C:/Windows/Fonts/ArnoPro-Caption.otf
    06.  By all that is holy, the two different means of embedding the font ought to yield the same result, but they do not.  I have debugging code inserted to print out the list of fonts upon initiation of the application, and they are identical.  Both means of embedding do succeed in getting the embedded fonts into the .swf, but the attempt to use the fonts fails using the second approach.
    There is, of course, no change being made to the code in the item renderer which merely uses setStyle() to effect the row-by-row result.  The result in the second case is that the only style of the embedded font that renders is 'regular'.
    07.  I have used the 'keep-generated' facility to look at the code being generated by the mxmlc compiler and can see that different code is emitted, but it does not help me find a fix to the problem.  Both forms of the meta-tag do something; both methods of embedding seem to correctly register themselves with the FontManager, but only the method of embedding which actually performs the transcoding during compilation seems to result in a set of registered fronts which can be found and correctly used to render output based on the runtime setting of the font style.

    Thank for the reply
    I hoped that my posting indicated how the fonts in the the .swf file were constructed.  The "-4", argument to the command-line tool, fontswf, as far as I can tell, is the precise analog to the "embedAsCFF" argument in the [Embed] syntax.  That is what makes it so perplexing.  Given all the external documentation that is available for each tool/methodology, I would have thought that the resultant bytecodes, classes, flags, whatever, would have been identical.  The only difference would be the timing of when the transcoding took place.
    Since it is clearly more efficient to only transcode whatever set of fonts an application needs once, not once per build/test turn-around, I would really like to make the fontswf workflow work.  For those of us outside the beneficial environment of your licensed tools, the kindly-provided alternative to the facilities built into Flash Professional and/or Flash Builder give us the greatest degree of productivity.
    Whoever has access to the source code for Font [I can only see the uninteresting FontAsset in the SDK] can probably determine what difference might result from mxmlc working with this intermediate output, when inline transcoding is 'tagged':
    package
    import mx.core.FontAsset;
    [ExcludeClass]
    [Embed(fontName="ArnoPro_IT_4", _resolvedSource="C:/WINDOWS/Fonts/ArnoPro-ItalicCaption.otf", fontStyle="italic", _line="1189", _pathsep="true", embedAsCFF="true", fontWeight="normal", unicodeRange="U+0021-U+00ff, U+20ac-U+20ac", source="C:/Windows/Fonts/ArnoPro-ItalicCaption.otf", _column="2", exportSymbol="AIRZoom_ArnoPro_IT_4", _file="G:/FP/AIRZoom/src/AIRZoom_AS.as", mimeType="application/x-font")]
    public class AIRZoom_ArnoPro_IT_4 extends mx.core.FontAsset
        public function AIRZoom_ArnoPro_IT_4()
            super();
    versus this, when swf extraction is 'tagged':
    package
    import mx.core.FontAsset;
    [ExcludeClass]
    [Embed(fontName="ArnoPro_IT_4", _resolvedSource="C:/WINDOWS/Fonts/ArnoPro-ItalicCaption.otf", fontStyle="italic", _line="1191", _pathsep="true", embedAsCFF="true", fontWeight="normal", unicodeRange="U+0021-U+00ff, U+20ac-U+20ac", source="C:/Windows/Fonts/ArnoPro-ItalicCaption.otf", _column="2", exportSymbol="AIRZoom_ArnoPro_IT_4", _file="G:/FP/AIRZoom/src/AIRZoom_AS.as", mimeType="application/x-font")]
    public class AIRZoom_ArnoPro_IT_4 extends mx.core.FontAsset
        public function AIRZoom_ArnoPro_IT_4()
            super();
    The only difference is that value for '_line' which probably only indicates that one of the two processes has a comment or empty line somewhere.

  • Flex Spark Datagrid - Scalable (font size) with No scroll Bars

    I was wondering what would be the most optimized way to scale (increase/decrease) the fonts size in a Spark DataGrid with NO Scroller, so as to make it when the User Resizes the DataGrid, the Fonts inside the Grid would increase/decrease. 
    Is there a way to listen for the size change of the DataGrid? 
    I would probably need to change the font size to increase/decrease as the event gets fired on Datagrid Resize. 
    Any suggestions?

    I've pasted as much code as I can legally can.  What i would like to achieve is that when the the window resizes, the Content & the DataGrid Scales. I am also aware of scalemode on the VBox, though it scale oddly with width more than height (this is internal).
    Else, I tried:
    protected function vgroup1_addedToStageHandler(event:Event):void
                //stage.scaleMode = StageScaleMode.EXACT_FIT;
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                stage.align = StageAlign.TOP_LEFT;
                scaleX = .5;
                scaleY = .5; 
                /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                    var scaling:Number = 1;
                    if(width>height)
                        scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                    else
                        scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                    scaleX = scaleY = scaling;
    == THIS IS All I can Post ==
    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:components="components.*"
         viewSourceURL="srcview/index.html">
        <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.events.ResizeEvent;
            import mx.rpc.events.ResultEvent;
            import mx.rpc.xml.SimpleXMLDecoder;
            import mx.utils.ArrayUtil;
            import mx.utils.ObjectUtil;
            import spark.components.ResizeMode;
            import spark.effects.Resize;
            // Skin Colors
            private const ALTERNATING_GRID_COLOR:Array = [ 0xF5F5F0 , 0xE7E4E9 ];
            private const ROLL_OVER_COLOR:int = 0x6D9960;
            private const SELECTION_COLOR:int = 0x668F59;
            private const TEXT_FONT_SIZE:int = 11;
            private const TEXT_COLOR:int = 0x080808;
            private const SUMMARY_TEXT_COLOR:int = 0xFAAFFF;
            // First column width
            private var collectiveFirstColumnWidth:int = 160;
            private var collectiveValuesColumnWidth:int = 50;
            // XML data
            [Bindable] private var portfolioSummary1:XMLList;
            [Bindable] private var reconstructedAC:ArrayCollection;
            private function convertXmlToArrayCollection(file:String):ArrayCollection {
                var xml:XMLDocument = new XMLDocument(file);
                var decoder:SimpleXMLDecoder = new SimpleXMLDecoder();
                var data:Object = decoder.decodeXML(xml);
                var array:Array = ArrayUtil.toArray(data);
                return new ArrayCollection(array);
            private function convertToAC():void {
                var ac1:ArrayCollection = convertXmlToArrayCollection(psr1)
                trace(ObjectUtil.toString(ac1));
                //reStructureAC(ac1);
            private function restructureXMLIntoHierarchicalAC():void {
            private function addProperty(obj:Object, attribute:String, value:String):Object {
                var o:Object = obj;
                o[attribute] = value;
                return o;
            protected function httpservice1_resultHandler(event:ResultEvent):void
                portfolioSummary1 = event.result.Analytics.Side.Analytic as XMLList;
                trace('-----\nSide: Sell' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Sell')));
                trace('-----\nSide: Buy: Analytic Values : \n' + ObjectUtil.toString(event.result.Analytics.Side.(@name=='Buy')[email protected]));
                //dg.dataProvider = new XMLListCollection(portfolioSummary1);
                //dg.requestedRowCount = dg.dataProviderLength;
            protected function vgroup1_addedToStageHandler(event:Event):void
                //stage.scaleMode = StageScaleMode.EXACT_FIT;
                stage.scaleMode = StageScaleMode.SHOW_ALL;
                stage.align = StageAlign.TOP_LEFT;
                scaleX = .5;
                scaleY = .5; 
                /* if(stage.stageWidth != (event.currentTarget as VGroup).width || stage.stageHeight != (event.currentTarget as VGroup).height)
                    var scaling:Number = 1;
                    if(width>height)
                        scaling = stage.stageWidth / (event.currentTarget as VGroup).width;
                    else
                        scaling = stage.stageHeight / (event.currentTarget as VGroup).height;
                    scaleX = scaleY = scaling;
            protected function vgroup1_resizeHandler(event:ResizeEvent):void
                (event.currentTarget as VGroup).resizeMode = ResizeMode.SCALE;
        ]]>
        </fx:Script>
        <fx:Declarations>
            <fx:XML id="psr1" source="data/PortfolioSummaryResponse1.xml" />
            <fx:XML id="psr2" source="data/PortfolioSummaryResponse2.xml" />
            <fx:XML id="psr3" source="data/PortfolioSummaryResponse3.xml" />
            <s:XMLListCollection id="headXMLListCol"
                source="{psr1.children()}" />
            <s:HTTPService id="portfolio_HS" result="httpservice1_resultHandler(event)"
                resultFormat="e4x" url="data/PortfolioSummaryResponse1.xml" />
        </fx:Declarations>
        <s:VGroup id="vbox" width="100%" height="100%" top="0" left="0" bottom="0" gap="0" addedToStage="vgroup1_addedToStageHandler(event)">
            <!-- First DataGrid -->
            <components:ExpandableDataGrid5 id="dg"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                skinClass="skins.ResizableDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn id="field1" dataField="dataField1" headerText="Portfolio Summary"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                            headerRenderer="itemRenderers.HeaderGridItemRenderer"
                            />
                        <s:GridColumn id="field2" dataField="dataField2" headerText="Buy"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                            />
                        <s:GridColumn id="field3" dataField="dataField3" headerText="Sell"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                            />
                        <s:GridColumn id="field4" dataField="dataField4" headerText="Total"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            headerRenderer="itemRenderers.RightAlignHeaderGridItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <components:dataProvider>
                    <s:ArrayCollection>
                        <fx:Object dataField1="data1" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data2" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data3" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data4" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data5" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data6" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data7" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data8" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data9" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data10" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data11" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                        <fx:Object dataField1="data12" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data13" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data14" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                        <fx:Object dataField1="data15" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                    </s:ArrayCollection>
                </components:dataProvider>
            </components:ExpandableDataGrid5>
            <!-- Summary Totals -->
            <components:SummaryRow >
                <s:Label text="Summary Totals" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
                <s:Spacer width="100%" />
                <s:ButtonBar click="convertToAC()"> 
                    <mx:ArrayCollection>
                        <fx:String>Convert to AC</fx:String>
                        <fx:String>CPS</fx:String>
                    </mx:ArrayCollection>
                </s:ButtonBar>
                <s:ButtonBar click="restructureXMLIntoHierarchicalAC()"> 
                    <mx:ArrayCollection>
                        <fx:String>Parse XML</fx:String>
                        <fx:String>15% POV</fx:String>
                    </mx:ArrayCollection>
                </s:ButtonBar>
            </components:SummaryRow>
            <!-- Second Datagrid -->
            <components:ExpandableDataGrid5 id="dg2"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                skinClass="skins.HeadlessDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="dataField1"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField2"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField3"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField4"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <s:ArrayList>
                    <fx:Object dataField1="data16" dataField2="data2" dataField3="data2"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data17" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayList>
            </components:ExpandableDataGrid5>
            <!-- Summary Totals - values -->
            <components:SummaryRow>
                <s:Label text="Summary Totals - Values" width="100%" fontWeight="bold" color="{SUMMARY_TEXT_COLOR}"/>
            </components:SummaryRow>
            <!-- Third Datagrid -->
            <components:ExpandableDataGrid5 id="dg3"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                skinClass="skins.HeadlessDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="dataField1"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField2"
                            itemRenderer="itemRenderers.ToolTipItemRenderer"
                            />
                        <s:GridColumn dataField="dataField3"
                            itemRenderer="itemRenderers.ToolTipItemRenderer"
                            />
                        <s:GridColumn dataField="dataField4"
                            itemRenderer="itemRenderers.ToolTipItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <s:ArrayList>
                    <fx:Object dataField1="data18" dataField2="data2" dataField3="data3"  dataField4="data16"></fx:Object>
                    <fx:Object dataField1="data19" dataField2="data3" dataField3="data3" dataField4="data17"></fx:Object>
                </s:ArrayList>
            </components:ExpandableDataGrid5>
            <!-- Percent of Tops -->
            <components:SummaryRow>
                <s:Label text="Percent of Tops" color="{SUMMARY_TEXT_COLOR}" width="100%" fontWeight="bold"/>
            </components:SummaryRow>
            <!-- Fourth DataGrid -->
            <components:ExpandableDataGrid5 id="dg4"
                color="{TEXT_COLOR}"
                rollOverColor="{ROLL_OVER_COLOR}"
                selectionColor="{SELECTION_COLOR}"
                alternatingRowColors="{ALTERNATING_GRID_COLOR}"
                skinClass="skins.HeadlessDataGridSkin"
                >
                <components:columns>
                    <s:ArrayList>
                        <s:GridColumn dataField="dataField1"
                            itemRenderer="itemRenderers.LeftAlignGridItemRenderer"  />
                        <s:GridColumn dataField="dataField2"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField3"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                        <s:GridColumn dataField="dataField4"
                            itemRenderer="itemRenderers.RightAlignGridItemRenderer"
                            />
                    </s:ArrayList>
                </components:columns>
                <s:ArrayList>
                    <fx:Object dataField1="data20" dataField2="data1" dataField3="data1" dataField4="data20"></fx:Object>
                    <fx:Object dataField1="data21" dataField2="data2" dataField3="data2" dataField4="data21"></fx:Object>
                    <fx:Object dataField1="data22" dataField2="data3" dataField3="data3" dataField4="data22"></fx:Object>
                </s:ArrayList>
            </components:ExpandableDataGrid5>
        </s:VGroup>
    </s:Application>
    ExpandableDataGrid5.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                horizontalScrollPolicy="off"
                verticalScrollPolicy="off"
                selectionMode="singleCell"
                variableRowHeight="true"
                requestedColumnCount="4"
                width="100%"
                resizableColumns="false"
                creationComplete="thisDatagrid_creationCompleteHandler(event)"
                >
        <fx:Script>
            <![CDATA[
                 import mx.events.FlexEvent;
                /*import mx.events.ResizeEvent;
                [Bindable] private var oldWidth:int;
                [Bindable] private var oldHeight:int;
                protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                    oldWidth = event.oldWidth;
                    oldHeight = event.oldHeight;
                    this.invalidateDisplayList();
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                    if (oldWidth < width) {
                        setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                        //this.scaleX += .1;
                    } else if (oldWidth > width) {
                        setStyle('fontSize', getStyle('fontSize') - 0.5);
                        //this.scaleX -= .1;
                    trace('unscaledWidth: ' + unscaledWidth);
                    trace('unscaledHeight: ' + unscaledHeight);
                    trace('explicitMinHeight: ' + explicitMinHeight);
                    trace('explicitMinWidth: ' + explicitMinWidth);
                    minHeight = measuredMinHeight;
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                    requestedRowCount = dataProviderLength;
                    requestedMaxRowCount = dataProviderLength;
                    requestedMinRowCount = dataProviderLength;
                    minHeight = measuredHeight;
                /* protected function datagrid1_addedToStageHandler(event:Event):void
                    stage.scaleMode = StageScaleMode.SHOW_ALL;
                    /*                stage.align = StageAlign.TOP;
                     this.width = stage.stageWidth;
                    this.height = stage.stageHeight;
            ]]>
        </fx:Script>
    </s:DataGrid>
    You can Check other ExpandableDataGrids:
    <?xml version="1.0" encoding="utf-8"?>
    <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                resize="thisDatagrid_resizeHandler(event)"
                creationComplete="thisDatagrid_creationCompleteHandler(event)"
                horizontalScrollPolicy="off" verticalScrollPolicy="off"
                selectionMode="singleCell"
                variableRowHeight="true"
                requestedColumnCount="4"
                editable="false"
                width="100%"
                >
        <fx:Script>
            <![CDATA[
                import mx.events.FlexEvent;
                import mx.events.ResizeEvent;
                protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                    //event.stopImmediatePropagation();
                    if (event.oldWidth < width) {
                        setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                        //this.scaleX += .1;
                    } else if (event.oldWidth > width) {
                        setStyle('fontSize', getStyle('fontSize') - 0.5);
                        //this.scaleX -= .1;
                    minWidth = measuredMinWidth;
                protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                    requestedRowCount = dataProviderLength;
                    requestedMaxRowCount = dataProviderLength;
                    requestedMinRowCount = dataProviderLength;
                    minHeight = measuredMinHeight;
            ]]>
        </fx:Script>
    </s:DataGrid>
    OR
    <?xml version="1.0" encoding="utf-8"?>
    <s:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                horizontalScrollPolicy="off"
                verticalScrollPolicy="off"
                selectionMode="singleCell"
                variableRowHeight="true"
                requestedColumnCount="4"
                width="100%"
                resize="thisDatagrid_resizeHandler(event)"
                creationComplete="thisDatagrid_creationCompleteHandler(event)"
                >
        <fx:Script>
            <![CDATA[
                 import mx.events.FlexEvent;
                 import mx.events.ResizeEvent;
                [Bindable] private var oldWidth:int;
                [Bindable] private var oldHeight:int;
                protected function thisDatagrid_resizeHandler(event:ResizeEvent):void
                    oldWidth = event.oldWidth;
                    oldHeight = event.oldHeight;
                    this.invalidateDisplayList();
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                    if (oldWidth < width) {
                        setStyle('fontSize', getStyle('fontSize') + 0.5); // might wanna~ width % height to increase by a certain pt
                        //this.scaleX += .1;
                    } else if (oldWidth > width) {
                        setStyle('fontSize', getStyle('fontSize') - 0.5);
                        //this.scaleX -= .1;
                    trace('unscaledWidth: ' + unscaledWidth);
                    trace('unscaledHeight: ' + unscaledHeight);
                    trace('explicitMinHeight: ' + explicitMinHeight);
                    trace('explicitMinWidth: ' + explicitMinWidth);
                    minHeight = measuredMinHeight;
                    super.updateDisplayList(unscaledWidth, unscaledHeight);
                protected function thisDatagrid_creationCompleteHandler(event:FlexEvent):void
                    requestedRowCount = dataProviderLength;
                    requestedMaxRowCount = dataProviderLength;
                    requestedMinRowCount = dataProviderLength;
                    minHeight = measuredHeight;
            ]]>
        </fx:Script>
    </s:DataGrid>

  • How to include a custom bkgd in the spark datagrid header

    I have a CustomDatagridSkin.mxml, which is based upon the default DataGrid.
    I'm looking at the code, and I'm a noob, trying to make heads or tails out of it. If I could just figure out how to change the header color I would be happy. But what I'd really like to know is how to apply a graphic to the background of the header.
    Is there some example on the net that I can follow, because I'm having a hell of a time finding something useful.
    The demo that Deepa had was awsome (corkboard and postit notes looking thing).
    How was that done?
    Thanks
    Kristin

    Hi,
    Do you want a custom background for the entire header bar? or for each individual header renderer? I would take a look at the DefaultGridHeaderRenderer class to see how we do headers. These header renderers are used by the GridColumnHeaderGroup to create the column headers. You can modify it to have your own custom background graphic. If you just want to tweak the color, you can apply the chromeColor style to the DataGrid.
    I can try to cook up an example for you when I have a bit of time, but not at the moment. Hope this points you in the right direction.
    -Kevin

  • Question about creating a head shot with text

    A local actor wants me to create a head shot...The only photo application I have is iphoto. He wants his name to appear at the bottom of the 8 1/2 X 11 print. Can I add text to a regular photo and have it appear in the print? Or is there another way? Thanks to anyone who can help.

    hi patrick,
    there is no way within iPhoto. You would have to open the image up in a graphic editor to do that. You don't have any other editor so that's a no go.
    There are some free programs out there that you can use. I don't know how well the results would be when printed though. It's not really for professional use.
    Here is one I use.
    You can try a free third party application called ImageWell
    Download Imagewell and double click to open it.
    http://www.xtralean.com/IW.html
    Drag the photo from an open iPhoto library window right into the well of Imagewell
    Click on the "edit" button
    Click on the "add text button" which is the "Aa"
    click on the photo where you want to add the text
    click on the little box on the right to set the color
    click on the "f" button to choose the font and the size making sure your text is highlighted so it is affected when you change the font and size.
    Click "done"
    when you are happy with it, drag it out of Imagewell's window to the desktop
    That's it, you can even change the name of the photo and the size there too, before you drag it out of the window. Actually there is a lot of other fun stuff you can do with it like add balloon text and masks.
    Drag the photo back into iPhoto to import it again
    For your situation, you would use the "add text in a box" option. It's the Aa in a box on the panel.
    Put that box at the bottom of your image and make it big to fit the entire bottom of the image. Type your text in there and make it the size you need.
    it will take some fiddling around, but it can be done.

  • 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.

  • How to change header font style in Spark DataGrid?

    I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.
    Thanks,
    - Artur

    Hi,
    Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.
    First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):
    <?xml version="1.0" encoding="utf-8"?>
    <skins:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                     xmlns:s="library://ns.adobe.com/flex/spark"
                                     xmlns:mx="library://ns.adobe.com/flex/mx"
                                     xmlns:skins="spark.skins.spark.*"
                                     xmlns:comps="comps.*">
        <fx:Declarations>
            <!-- Remove fontweight="bold" and other styles as you wish
                 Must be a component and not a factory. -->
            <s:Label id="labelDisplay"
                     verticalCenter="1" left="0" right="0" top="0" bottom="0"
                     textAlign="start"
                     verticalAlign="middle"
                     maxDisplayedLines="1"
                     showTruncationTip="true" />
        </fx:Declarations>
    </skins:DefaultGridHeaderRenderer>
    Next, create a simple DataGrid skin by creating a subclass of the  spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer  component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):
    <?xml version="1.0" encoding="utf-8"?>
    <skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx"
                    xmlns:skins="spark.skins.spark.*"
                    xmlns:comps="comps.*">
        <fx:Declarations>
            <!-- Must be a factory with the right id for the skin part -->
            <fx:Component id="headerRenderer">
                <comps:CustomHeaderRenderer />
            </fx:Component>
        </fx:Declarations>
    </skins:DataGridSkin>
    Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):
    <s:DataGrid skinClass="comps.CustomDataGridSkin">
    I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.
    -Kevin

  • How to change the header text fontFamily of spark DataGrid?

    I use an embed font (Nunito-Light.ttf),  and i can set the font of GridColumn to Nunito-Light in DataGrid , but it seems that it has no effect to the header of DataGrid.
    and then I create a  headerRenderer for spark DataGrid, and try to set the fontFamily of "labelDisplay" to Nunito-Light  , but It seems still no effect .
    If I set the fontFamily of "labelDisplay" to "Verdana" or "Arial" , it has effect , so strange! Is that a bug?
    Anybody  has the same problem? Please tell me how to solve it ,thank you very much!

    Hi,
    Please go through following link :
    http://forums.adobe.com/thread/870081#870081
    Thanks and Regards,
    Vibhuti Gosavi | [email protected] | www.infocepts.com

  • Setting font style on hover for spark datagrid

    I'm trying to skin a Spark datagrid. I have most things sorted by creating a custom skin, but one thing I can't find is how to set the colour of the row's font on hover. I can set the background colour fine, but how would I go about changing the font colour when a user hovers over the row?
    Thanks

    Hi
    You don’t actually deal with the text that’s displayed in the a datagrid inside of the skin
    Look at item renderers for the grid columns. You can style your text or whatever else you would like to display in the grid, in the renderer
    Hope that helps a little
    If you are still stuck just let me know and I’ll send you some code
    Cheers
    g
    heres some code
    NOTE: I am making this up as I sit here so I may be forgetting something. Don’t be surprised if this doesn’t work, but the basic idea is right I think
    So in the spark datagrid when you set your column (if you use mxml) this will replace a glob renderer so you can have a different one for each column if you wish.
    <s:GridColumn dataField="Status"
    headerText="name"
    width="37"                                                    
    itemRenderer="fooRenderer"
    />
    Or set a gloabel renderer in the grid def itself
    <s:DataGrid itemRenderer=”fooRenderer” />
    Then write a custom renderer: fooRenderer.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:mx="library://ns.adobe.com/flex/mx"
                         clipAndEnableScrolling="true"
                         >
           <fx:Script>
                  <![CDATA[
                         override public function discard(willBeRecycled:Boolean):void
                               labelData.text="";
                               super.discard(willBeRecycled);
                         override public function prepare(hasBeenRecycled:Boolean):void
                               if(data)
                                       // set the colour of the text label to black
                                      labelData.setStyle("color",0x000000)
                                      // put some logic here to dynamic style the label
                               //check for the 'format' function on the column  (THIS MAY BE WRONG)
                               if( column.labelFunction != null )
                                      labelData.text = column.labelFunction( data, column );
                               else
                                      labelData.text = data[column.dataField];
                         super.prepare(hasBeenRecycled);
                  ]]>
           </fx:Script>
           <s:Label id="labelData" />
    </s:GridItemRenderer

  • Header Width for a Spark DataGrid

    I recently replaced an mx:DataGrid in one of my components with the new spark DataGrid and I noticed that the columns were so narrow that most of the header labels were unreadable. I eventually figured out that the spark datagrid was basing the column width on the length of the longest displayed item in the contents. So for example, if the column is showing state abreviations, the header would only show the first two or three letters of the header text and the rest would be truncated. What I need to know is whether there is some way to reverse this behavior. I want the width of each column to be based on the length of the header text, not the content data.
    I know the 'recommended' way of setting column width is with a typical item, but in this case that's not an option. I also tried creating a custom DataGridSkin that sets the minWidth property of the headerRenderer but it had no effect. I'm pulling my hair out trying to get this to work, any help would be much appreciated.

    Actually, when I took a closer look at the stack trace I was able to figure out the problem. It turns out that the problem with the typicalItem was being caused by a labelFunction on one of my columns. The label function was expecting to see the DTO object as it's first parameter. In the process of setting up the typicalItemRenderer, the grid column was calling itemToLabel with the typicalItem causing a class cast expection.
    I was able to resolve that issue but now I'm seeing another one. The typicalItem I creat isn't having any effect of the width of my datagrid columns. The problem is, GridColumn doesn't have an itemRendererFunction set by default. The itemToRenderer function of GridColumn only uses the typicalItem if there is an itemRendererFunction defined. Is that the intended behavior? If so, the documentation really needs to mention that fact somewhere.
    It looks like the typicalItem is actually getting applied somewhere, I just didn't have long enough string to see the effect. I'm still curious though, if not in the itemRendererFunction, what Class/function is actually responsible for taking the widths from the typicalItem and applying them to the columns?

  • Spark datagrid style by row

    I'm trying to change the style of spark datagrid rows based on data, I've found examples about itemrenderer and columns, but they doesn't fit in this case.
    I'm looking for a method to change font (weight, size, color) and background based on data value: if the data in column X is equal to Y, change all the row style to...

    So, are you saying you want to change the font of a particular row when its data object is a certain value?
    I would have a custom renderer with an overridden prepare method. In the prepare method, you can check the data and adjust the labelDisplay accordingly.

  • Questions about using Styles Window for formatting a book in Apple Works.

    Help says "You can create your own styles in any document type." Not clear on how to do that.
    I wish to have one Style or group of Styles associated with one document of say 500 pages for a book. Each chapter Heading. as a single column layout, is separated by Section Breaks from previous and following text in 2 column layout.
    Question 1. How do I make Styles window settings (Edit/Done) specific for this entire document? Can I edit settings in Styles window and have them remain specific and locked to this particular document? Or are the Styles window settings constant across all documents?
    Question 2. (If Styles window settings are not specific and locked to this document) Do I need to make a NEW Style for each purpose within the document, as in Book Heading, Book Subheading, Book Body, Book special paragraph style, and etc.
    Question 3. When importing multiple sections of the work (by copy and paste) from other AW documents how can I have the imported text follow the book’s Style settings (and vice versa how to keep tab settings that are specific in some areas). Sometimes the imported work refuses to conform to the Book document’s style say line spacing for instance.
    Thank you
    Hilary Fish
    iBook G4 Mac OS X (10.4.8) AppleWorks 6.2.9

    Hi Hilary,
    I haven't used styles enough to give definitive answers to your questions, but I'm sure others will join in and correct any errors in what follows.
    A "Style" is essentially a set of paragraph level format settings that can be collectively applied to a paragraph or contiguous set of paragraphs as a set, rather than having to apply each attribute individually. Once a style is applied to various parts of a document, changes made to the style specification will apply to every part of the document to which that style has been applied.
    AppleWorks also includes two other types of Styles—Outline styles (Diamond, Harvard and Legal), used to identify hierarchical levels of paragraphs, and Table styles, used to format tables.
    Question 1: From the Help article "Using Styles":
    You can copy the collection of all the styles available in a document and make them available in another document. This is called exporting and importing a stylesheet.
    I read this as saying that styles you create are specific to the document in which they are created, but may be exported to other documents. "Other documents" would includes documents saved as templates, which could be used to create the various sections of a book.
    Question 2:
    As the set of styles is specific to the document it is created in (or into which it is imported), you can probably leave "Book " off the names of the styles (but may decide that leaving it on makes it easier to know what the styles are for). You will need to use an existing style or create a new one for each purpose within the document.
    Question 3:
    Copy copies the text AND formatting of the selected material.
    Paste pastes the text AND formatting of the selected material.
    Paste also inserts the pasted material into the target document at the insertion point. All of the pasted material goes into the same Section. If the pasted material includes a section break, then a new section will be created in the target document.
    If you export the set of styles from the master document and apply them to the parts of the source document before transferring the material to the master document, I suspect the formatting will be carried over.
    Another possibility is to leave the source document with no formatting at all beyond paragraph breaks, and to apply the formatting (styles) after transferring the text.
    Regards,
    Barry

  • Remove Flex DataGrid Heading Rollover Color

    Hi,
    How can i stop rollover color change in Flex 3 DataGrid heading ?
    Can i override the following mehtod if yes how can i do this ?
     drawHeaderIndicator(s, r.x, 0, visibleColumns[i].width, cachedHeaderHeight - 0.5, getStyle("rollOverColor"), r);
    Thanks,
    -Shrban

    To do what you want to do requires a fair amount of work as the rollover color is set as a style, you can change the color but it seems the rollover can't be disabled(not without a custom datagrid).
    A quick fix is to try and at least reduce the difference in the rollover color, this could be done as per below, which basically makes the rollover color the same as the lighter shade of the header gradient.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="appHandler(event)">
    <mx:Script>
    <![CDATA[
    import mx.controls.Label;
    import mx.events.FlexEvent;
    protected function appHandler(event:FlexEvent):void
    var colors:Array = dg.getStyle("headerColors");
    dg.setStyle("rollOverColor",colors[0]);
    ]]>
    </mx:Script>
    <mx:DataGrid id="dg" x="234" y="198" width="619" height="360">
    <mx:columns>
    <mx:DataGridColumn headerText="Column 1" dataField="col1" />
    </mx:columns>
    </mx:DataGrid>
    </mx:Application>

  • Add categories to DataGrid header

    Is there a simple way to add categories to the DataGrid header? Basically, instead of just a single row with headers, I want an additional row that sits above that row and describes sections of the grid (rather than individual columns). E.g., in html, I could do something like this:
      <table>
        <tr><th colspan="2">Name</th><th colspan="2">Data</th></tr>
        <tr><th>first</th><th>last</th><th>age</th><th>gender</th></tr>
        <tr><td>john</td><td>doe</td><td>26</td><td>male</td></tr>
      </table>
    Is there a reasonable way to do something like that in Flex? I've looked at Alex Harui's DataGrid footer, but after playing around with it a bit, it doesn't seem that it would be easily adapated.

    So I'm trying to generalize this to more than two subcolumns. I got the item renderer working fine, but when I include the modified SplitDataGridHeader as a custom header renderer, it fubars the whole grid (even the other columns). I assume something I'm doing is making the Player very unhappy, but I don't see any errors when debugging in FlexBuilder: the entire Grid just shows up as plain white, with no styles applied and no data at all (even for the columns using standard renderers). Any idea what could be causing issues like this?

  • How to turn off DataGrid header rollover?

    Does anybody know how to turn off the background rollover
    color in a DataGrid header? I have seen how to set
    useRollOver=false to turn it off in the body of the DataGrid but so
    far I can't see how to turn this off in the header. Thanks.

    I found a way to fix this but it seems like a kludge. In the
    table's style:
    headerColors: #D4DBE1,#D4DBE1;
    useRollOver: false;
    rollOverColor: #D4DBE1;
    useRollOver:false works for the data rows, not the header.
    Then setting rollOverColor will be ignored by the data rows, but
    will turn off the rollover for the headers, as long as the color is
    the same as the header colors.

Maybe you are looking for