Content

About this project

This project is established to create a word table like widget in Flex.

API

Here is the APIs of classes Table, Row, and Cell.

public class Table

selectedCells:ArrayCollection
return the selected of the table.
rows:Array
return all the rows of the table.
cells:Array
return all the cells of the table.
public static function createTable(width:int,numRows:int,numColumns:int):Table
create a table with defined width, rows number and columns number.

Parameters:
int width -- the width of the table to be created
int numRows -- the number of the rows to be created.
int numColumns -- the number of the cells to be created for each row.
public function getChildrenFrom(rowPosition:int,cellPosition:int):Array
get all the children of the specified cell at the given position

Parameters:
int rowPosition -- the position of the row contains the specified cell in the table.
int cellPosition-- the position of the specified cell in the row.
public function removeChildrenFrom(rowPosition:int,cellPosition:int):void
remove all the children from the specified cell

Parameters:
int rowPosition -- the position of the row contains the specified cell in the table.
int cellPosition-- the position of the specified cell in the row.
public function insertChildAt(child:UIComponent, rowPosition:int,cellPosition:int):void
add a component into the specified cell.

Parameters:
UIComponent child -- the component to be added into the cell.
int rowPosition -- the position of the row contains the specified cell in the table.
int cellPosition-- the position of the specified cell in the row.

public class Row

previous:Row
return the previous row of the current one. if the current is the first row of the table, it returns a null object.
next:Row
return the next row of the current one. if the current is the last row of the table, it returns a null object.
cells:Array
return all the cells of the row.
position:int
return the index of the row in the table' children .

public class Cell

selected:Boolean
indicates whether the cell is selected.
previous:Cell
return the previous cell of the current one. if the current is the first cell of the parent row, it returns a null object.
next:Cell
return the next cell of the current one. if the current is the last cell of the parent row, it returns a null object.
position:int
return the index of the cell in the parent row' children .

Demo

Here is a simple demo of the usage of this widget. The source is published as well.

Let me have a look

Screenshot

Description

insert controls
insert some flex controls into each cell of the specified table widget.
remove all controls
remove all the controls from each cell of the specified table widget.
remove controls from selected cell
remove all the controls from the selected cells of the specified table widget.
the operations of the table
(click right mouse button on anywhere of the table to show a context menu)

merge cells
merge all the selected cells.
split cells
split the selected cell.
Insert Columns to the Left
insert several cells into the table widget on the left side of the top-left cell of the selected cells.
Insert Columns to the Right
insert several cells into the table widget on the right side of the top-right cell of the selected cells.
Insert Rows Above
insert a row contained several cells into the table widget above the topmost selected cells.
Insert Rows Below
insert a row contained several cells into the table widget below the bottommost selected cells.
Delete Entire Row
delete the entire rows contains the selected cells.
select single cell
move the cursor over the table, when the cursor looks like ,click the left mouse button to select the target cell. Or directly click the right mouse button to select the target cell.
select multiple cells
select one cell, then press and hol SHIFT key to select another cell, the cells among the first cell and the last cell are all selected. Or press and hold CTRL key, you will select the target cells one by one.
select a row of cells
when the cursor looks like , double the left mouse button.
select a column of cells
move the cursor to the top of the cells contained in the first row, when cursor looks like , click the left mouse button.
deselect a cell
press and hold CTRL key and do what we do to select cell to deselect the target cell .
change cell width
when cursor looks like , click and hold left mouse button and move the appeared line to proper position in order to change the width of related cells. Select a cell first, and move the mouse to its border, then move the appeared line to proper position, you can merely change its width.
change cell height
when cursor looks like , drag the appeared line to proper position to change the height of related cells.

Note

The "wmode" of your SWF using flex-table and embedded in html page should be "opaque", or the context menu won't work.

Related Projects

rightclickmanager