SNOWFLAKES DRAWING PAPER

[FLEX] DataGrid RowLine Custom 설정 본문

개발/FLEX/AS3/AIR/BlazeDS

[FLEX] DataGrid RowLine Custom 설정

눈송2 2008. 11. 6. 10:23

데이터 그리드의 horizontalGridLineColor, horizontalGridLines를 설정하면 row마다 줄이 보인다

그런데 전체 row 라인이 보여주는 기능이 되어 있어

부분 라인 보여주는 기능을 한번 건드려봤다










아래 소스(mxml)는 라이브독에 Example 소스를 약~간! 수정한 소스이다
기존 소스에서 수정한 부분은 다른 색으로 구분하였다


mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    xmlns:local="*">
    <mx:XMLList id="employees">
        <employee line="false">
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
            <email>ccoenraets@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee line="false">
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
            <email>jwall@fictitious.com</email>
            <active>true</active>
        </employee>
        <employee line="true">
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
            <email>maurice@fictitious.com</email>
            <active>false</active>
        </employee>
        <employee line="false">
            <name>Mary Jones</name>
            <phone>555-219-2000</phone>
            <email>mjones@fictitious.com</email>
            <active>true</active>
        </employee>
    </mx:XMLList>

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%"
        paddingTop="10" paddingLeft="10" paddingRight="10">

        <mx:Label width="100%" color="blue"
            text="Select a row in the DataGrid control. "/>

        <local:uDataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}"
            horizontalGridLineColor="#000000" horizontalGridLines="true">
            <local:columns>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                <mx:DataGridColumn dataField="email" headerText="Email"/>
            </local:columns>
        </local:uDataGrid>

        <mx:Form width="100%" height="100%">
            <mx:FormItem label="Name">
                <mx:Label text="{dg.selectedItem.name}"/>
            </mx:FormItem>
            <mx:FormItem label="Email">
                <mx:Label text="{dg.selectedItem.email}"/>
            </mx:FormItem>
            <mx:FormItem label="Phone">
                <mx:Label text="{dg.selectedItem.phone}"/>
            </mx:FormItem>
        </mx:Form>
        
    </mx:Panel>

</mx:Application>



다음은 기존 데이터 그리드를 상속받아서 Row Line 추가되는 부분을 설정된 값에 따라 추가여부를 설정 하였다


uDataGrid.as
package
{
    import mx.controls.DataGrid;
    import mx.controls.listClasses.ListBaseContentHolder;
   
    public class uDataGrid extends DataGrid
    {
        public function uDataGrid()
        {
            super();
        }
        //drawLinesAndColumnGraphics
        import flash.display.Sprite;
        import mx.core.UIComponent;
        import mx.controls.dataGridClasses.DataGridColumn;
        override protected function drawLinesAndColumnGraphics(contentHolder:ListBaseContentHolder, visibleColumns:Array, separators:Object):void
        {
            //super.drawLinesAndColumnGraphics(contentHolder, visibleColumns, separators);
            var lines:Sprite = Sprite(contentHolder.getChildByName("lines"));
            if (!lines)
            {
                lines = new UIComponent();
                lines.name = "lines";
                lines.cacheAsBitmap = true;
                lines.mouseEnabled = false;
                contentHolder.addChild(lines);
            }
            contentHolder.setChildIndex(lines, contentHolder.numChildren - 1);
            var rowInfo:Array = contentHolder.rowInfo;
   
            lines.graphics.clear();
   
            var linesBody:Sprite = Sprite(lines.getChildByName("body"));
           
            if (!linesBody)
            {
                linesBody = new UIComponent();
                linesBody.name = "body";
                linesBody.mouseEnabled = false;
                lines.addChild(linesBody);
            }
           
            linesBody.graphics.clear();
            while (linesBody.numChildren)
            {
                linesBody.removeChildAt(0);
            }
   
   
            var tmpHeight:Number = unscaledHeight - 1; // FIXME: can remove?
            var lineCol:uint;
   
            var i:int;
   
            var len:uint = visibleColumns ? visibleColumns.length : 0;
            var rowlen:uint = contentHolder.listItems.length
   
            // draw horizontalGridlines if needed.
            lineCol = getStyle("horizontalGridLineColor");
            if (getStyle("horizontalGridLines"))
            {
                for (i = 0; i < rowlen; i++)
                {
                    var yy:Number = rowInfo[i].y + rowInfo[i].height;
                   
                    // listItems.length = RowCount
                    // 데이터가 rowCount 보다 적을 경우 데이터가 없기때문에 에러가 난다
                    if (contentHolder.listItems[i].length > 0)
                    {
                        // listItems[i][0].data 에는 XML 데이터가 들어 있다
                        if (contentHolder.listItems[i][0].data.@line=="true")
                        {
                            // 라인 추가
                            if (yy < contentHolder.height)
                                drawHorizontalSeparator(linesBody, i, lineCol, yy);
                        }
                    }
                   
                   
                }
            }
            /*
            if (separators.top)
                drawHorizontalSeparator(linesBody, i++, 0, rowInfo[0].y, true);
            if (separators.bottom && rowlen > 0)
                drawHorizontalSeparator(linesBody, i++, 0, rowInfo[rowlen - 1].y + rowInfo[rowlen - 1].height, true);
   
            var vLines:Boolean = getStyle("verticalGridLines");
            lineCol = getStyle("verticalGridLineColor");
   
            if (len)
            {
                var colBGs:Sprite = Sprite(contentHolder.getChildByName("colBGs"));
                // traverse the columns, set the sizes, draw the column backgrounds
                var lastChild:int = -1;
                var xx:Number = 0;
                for (i = 0; i < len; i++)
                {
                    // only draw the vertical separator for the ones in the middle (not beginning and not end)
                    if (vLines && i < (len - 1))
                        drawVerticalSeparator(linesBody, i, lineCol, xx + visibleColumns[i].width);
   
                    var col:DataGridColumn = visibleColumns[i];
                    var bgCol:Object;
                    if (enabled)
                        bgCol = col.getStyle("backgroundColor");
                    else
                        bgCol = col.getStyle("backgroundDisabledColor");
   
                    if (bgCol !== null && !isNaN(Number(bgCol)))
                    {
                        if (!colBGs)
                        {
                            colBGs = new FlexSprite();
                            colBGs.mouseEnabled = false;
                            colBGs.name = "colBGs";
                            contentHolder.addChildAt(colBGs, contentHolder.getChildIndex(contentHolder.getChildByName("rowBGs")) + 1);
                        }
                        drawColumnBackground(colBGs, i, Number(bgCol), col);
                        lastChild = i;
                    }
                    else if (colBGs)
                    {
                        var background:Shape = Shape(colBGs.getChildByName(i.toString()));
                        if (background)
                        {
                            var g:Graphics = background.graphics;
                            g.clear();
                            colBGs.removeChild(background);
                        }
                    }
                    xx += visibleColumns[i].width;
                }
                if (colBGs && colBGs.numChildren)
                {
                    while (colBGs.numChildren)
                    {
                        var bg:DisplayObject = colBGs.getChildAt(colBGs.numChildren - 1);
                        if (parseInt(bg.name) > lastChild)
                            colBGs.removeChild(bg);
                        else
                            break;
                    }
                }
   
            }
   
            if (separators.right && visibleColumns && visibleColumns.length)
            {
                if (contentHolder.listItems.length && contentHolder.listItems[0].length)
                    drawVerticalSeparator(linesBody, i++, 0, contentHolder.listItems[0][len - 1].x + visibleColumns[len - 1].width, true);
                else
                {
                    xx = 0;
                    for (i = 0; i < len; i++)
                    {
                        xx += visibleColumns[i].width;
                    }
                    drawVerticalSeparator(linesBody, i++, 0, xx, true);
                }
            }
            if (separators.left)
                drawVerticalSeparator(linesBody, i++, 0, 0, true);
            */
        }
        import mx.core.IFlexDisplayObject;
        import flash.display.DisplayObject;
        import mx.styles.ISimpleStyleClient;
        private var lockedColumnWidth:Number = 0;
        private var displayWidth:Number;
        private function drawHorizontalSeparator(s:Sprite, rowIndex:int, color:uint, y:Number, useLockedSeparator:Boolean = false):void
        {
            var hSepSkinName:String = "hSeparator" + rowIndex;
            var hLockedSepSkinName:String = "hLockedSeparator" + rowIndex;
            var createThisSkinName:String = useLockedSeparator ? hLockedSepSkinName : hSepSkinName;
            var createThisStyleName:String = useLockedSeparator ? "horizontalLockedSeparatorSkin" : "horizontalSeparatorSkin";
           
            var sepSkin:IFlexDisplayObject;
            var lockedSepSkin:IFlexDisplayObject;
            var deleteThisSkin:IFlexDisplayObject;
            var createThisSkin:IFlexDisplayObject;
                                   
            // Look for separator by name
            sepSkin = IFlexDisplayObject(s.getChildByName(hSepSkinName));
            lockedSepSkin = IFlexDisplayObject(s.getChildByName(hLockedSepSkinName));
           
            createThisSkin = useLockedSeparator ? lockedSepSkin : sepSkin;
            deleteThisSkin = useLockedSeparator ? sepSkin : lockedSepSkin;
           
            if (deleteThisSkin)
            {
                s.removeChild(DisplayObject(deleteThisSkin));
                //delete deleteThisSkin;
            }
           
            if (!createThisSkin)
            {
                var sepSkinClass:Class = Class(getStyle(createThisStyleName));
           
                if (sepSkinClass)
                {
                    createThisSkin = IFlexDisplayObject(new sepSkinClass());
                    createThisSkin.name = createThisSkinName;
                   
                    var styleableSkin:ISimpleStyleClient = createThisSkin as ISimpleStyleClient;
                    if (styleableSkin)
                        styleableSkin.styleName = this;
                       
                    s.addChild(DisplayObject(createThisSkin));
                }
            }
           
            if (createThisSkin)
            {
                var mHeight:Number = !isNaN(createThisSkin.measuredHeight) ? createThisSkin.measuredHeight : 1;
                createThisSkin.setActualSize(displayWidth - lockedColumnWidth, mHeight);
                createThisSkin.move(0, y);     
            }
            else // If we still don't have a sepSkin, then we have no skin style defined. Use the default function instead
            {
                drawHorizontalLine(s, rowIndex, color, y);
            }
           
        }




    }
}








저작자표시 비영리

'개발 > FLEX/AS3/AIR/BlazeDS' 카테고리의 다른 글

[FLEX] AIR로된 FlexComponent  (0) 2008.11.18
[FLEX] MXML 2009 스펙  (0) 2008.11.08
[AS] 문자열 더하기 방법 성능비교!  (0) 2008.11.01
[FLEX] Flex Application 시작시 발생 이벤트 순서  (0) 2008.10.19
[AS3] anglePositionRet :: 원형 위치 값 구하기  (0) 2008.10.12
'개발/FLEX/AS3/AIR/BlazeDS' Related Articles more
Comments