« ROXIK Sharikura 3D Library
» Google And Yahoo! Are Indexing SWF Files

ActionScript, Components, Events, MXML, Skin

MatrixGrid Component - Extending The DataGrid

Andrei Ionescu | 30.06.08 | Comment?

MatrixGrid is a complex component I made that displays a bi-dimensional array and gives the possibility to change its values using combo boxes. These are the changes you can do:

  • change one single item
  • change one row at once
  • change one column at once

The MatrixGrid component receives for objects:

  • array with the possible values in each combo box
  • the top header array with (id, name) pairs
  • the left header array also with (id, name) pairs
  • the array to be displayed

In our application we will have an XML structure that will be transformed to our needed matrix object because we want to be able to test with different structures but keep in mind that the values will be find if there is a correlation between the matrix and the other three objects (the ids must be found).


MatrixGrid component is complex and involves a lot of files so it will not be displayed here but everybody will be able to download it.

Now the application that uses the MatrixGrid:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" xmlns:flexer="com.flexer.MatrixGrid.*"
    creationComplete="start()" width="520" height="745">
    <mx:TextArea x="10" y="10" width="500" height="200" id="indata">
        <mx:text>
            <![CDATA[<matrix>
    <row id="lid1">
        <column id="cid1">q1</column>
        <column id="cid2"></column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid2">
        <column id="cid1">q1</column>
        <column id="cid2"></column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid3">
        <column id="cid1">q1</column>
        <column id="cid2">b</column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid4">
        <column id="cid1">q1</column>
        <column id="cid2">b</column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid5">
        <column id="cid1">q1</column>
        <column id="cid2">b</column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid6">
        <column id="cid1">q1</column>
        <column id="cid2">b</column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid7">
        <column id="cid1">q1</column>
        <column id="cid2">b</column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid8">
        <column id="cid1">q1</column>
        <column id="cid2">b</column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
    <row id="lid9">
        <column id="cid1">q1</column>
        <column id="cid2">b</column>
        <column id="cid3">c</column>
        <column id="cid4">d</column>
        <column id="cid5">q1</column>
        <column id="cid6">q1</column>
        <column id="cid7">q1</column>
    </row>
</matrix>]]>
        </mx:text>
    </mx:TextArea>
    <mx:Button horizontalCenter="0" y="218" label="SetData"
        click="handleSetClick(event)"/>
    <flexer:MatrixGrid id="mdg"
        width="500" height="250" x="10" y="248"/>
    <mx:Button horizontalCenter="0" y="506" label="GetData"
        click="handleGetClick(event)"/>
    <mx:TextArea id="debug" x="10" y="536" width="500" height="200"/>
    <mx:Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
            import com.flexer.Debug;
            import mx.charts.chartClasses.DualStyleObject;
 
            private function xml2Matrix(x:XML):Object
            {
                var retObj:Object = new Object();
                for each (var item:XML in x.children())
                {
                    var rowName:String = item.attribute("id").toString();
                    retObj[rowName] = new Object();
                    for each (var item2:XML in item.children())
                    {
                        var colName:String = item2.attribute("id").toString();
                        retObj[rowName][colName] = item2.toString();
                    }
                }
                return retObj;
            }
 
            private function start():void
            {
                // our matrix
                // every item is defined by coordinates 
                // like this: (rowId, colId)
                var testdata:Object = xml2Matrix(new XML(indata.text));
                // the left header
                // contains pairs of: (rowName, rowId)
                var leftHeader:Object = {
                    "lid1":"row1",
                    "lid2":"row3",
                    "lid3":"row3",
                    "lid4":"row3",
                    "lid5":"row3",
                    "lid6":"row6",
                    "lid7":"row7",
                    "lid8":"row8",
                    "lid9":"row9"
                };
                // the top header 
                // contains pairs of: (columnName, columnId)
                var topHeader:Object = {
                    "cid1":"col1",
                    "cid2":"col1",
                    "cid3":"col1",
                    "cid4":"col4",
                    "cid5":"col5",
                    "cid6":"col6",
                    "cid7":"col7"
                }
                // possible values for comboboxes
                var _possibleValues:Array = [
                    {data:"",label:""},
                    {data:"q1",label:"v1"},
                    {data:"b",label:"v2"},
                    {data:"c",label:"v3"},
                    {data:"d",label:"v4"}
                ];
                // setting the left header width
                mdg.leftHeaderWidth = 150;
                // setting the possible values for comboboxes
                mdg.possibleValues = _possibleValues;
                // setting the left header
                // the leftheader is an object that 
                // contains pairs of: (rowName, rowId)
                mdg.leftHeader = leftHeader;
                // setting the top header
                // the top header is an object that 
                // contains pairs of: (columnName, columnId)
                mdg.topHeader = topHeader;
                // setting our matrix
                // every item is defined by coordinates 
                // like this: (rowId, colId)
                mdg.matrix = testdata;
            }
 
            private function handleSetClick(e:MouseEvent):void
            {
                mdg.matrix = xml2Matrix(new XML(indata.text));
            }
 
            private function handleGetClick(e:MouseEvent):void
            {
                var newData:Object = mdg.matrix;
                debug.text = Debug.dump(newData);
            }
        ]]>
    </mx:Script>
</mx:Application>

This component uses about 10 files to implement the following:

  • dataGrid
  • comboBox
  • itemRenderers:
    • top header
    • left header
    • items
  • events
  • skins

Some interesting things I found when I implemented this MatrixGrid:

  1. is that is hard to link back to the columns and the data grid from within an item renderer. It is possible to access the data grid by using owner property, but is hard to find out the current position from an item renderer, relative to the data grid - more precise to find the column and the row
  2. is even harder to dispatch an event from the item renderer to the data grid

But there are ways, as you can see in the source files, but that involves to dive into the Flex framework to understand how data grid is working, in order to be able to take code and use it in you item renderers.

I hope MatrixGrid will be helpful for you and if it is please leave a comment and do not delete the licensing text inside source files.

Share and Enjoy:
  • Technorati
  • StumbleUpon
  • del.icio.us
  • NewsVine
  • Reddit
  • Digg
  • Furl
  • co.mments
  • blogmarks
  • Slashdot
  • description
  • Taggly
  • YahooMyWeb
  • connotea
  • Webride
MatrixGrid_sources
MatrixGridApp




Tags: , , , , ,

This post was written by Andrei Ionescu

Views: 2276

related

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

:

:


« ROXIK Sharikura 3D Library
» Google And Yahoo! Are Indexing SWF Files