ActiveDen

bTable - Show your data


The bTable Component is used for displaying data in for of a table and also for highlighting certain cells from the table according to a rule set by you.

All the data and settings can be loaded from an XML file but also data and settings can be managed from Flash actionscript.

Features

It offers great features like:

  • eveything can be loaded and configured from XML
  • it can be made highly interactive
  • formating rules can be applied to a data range to highlight, emphasize and spice up the viewing
  • fixed width/height can be set to columns/rows
  • cells can have icons beside the content
  • The content of a cell can be absolutely anything:<stron>text, images, animated movieclips, flash components (RadioButton, CheckBox…) or any other custom made components
  • options for banded rows/column
  • options for diferent coloring of first row/column
  • all the colors can be changed
  • links when clicking on a cell
  • many methods which can help you modify the table on runtime, making it highly interactive
  • resizes to your available space
  • many many more

XML FILE

Structure

         //will dig into table_attributes bellow
    <row>    
        <cell cell_attributes>text</cell> //will dig into cell_attributes bellow
        <cell cell_attributes>text</cell>
    </row>
    <row>    
        <cell cell_attributes>text</cell> 
        <cell cell_attributes>text</cell>
    </row>

The whole table

bandedRows="true"         //choose to have banded rows
bandedColumns="true"     //choose to have banded column
firstRow="true"         //choose to color the first row differently
firstColumn="true"         //choose to color the first column differently 
showSeparatorLine="true"     //choose to show separators between cells
separatorLineWeight="1"                //separators line weight
separatorLineColor="0xFFFFFF"         //separator line color
showBorderLine="true"                //show border line
borderLineWeight="1.5"                 //border line weight
borderLineColor="0x000000"             //border line color
cellBackgroundColor1="0xFCE9D9"     //normal cells color
cellBackgroundColor2="0xFBD4B4"        //banded cells color
cellBackgroundColor3="0xF79546"     //first row/column cells color

Each cell

type="text"                     //the type of the cell
width="100"                     //width of the cell
height="50"                        //height of the cell
color="0x0000FF"                 //color of the cell
link="http://activeden.net/"     //link where to go when the cell is clicked

Formating Rules

The formatting rules are used to highlight, select interesting cells, emphasize unusual values and visualize data using colors, color scales and icons sets based on criteria.

Criteria may be: cell value, cell text, cell date, unique, blanks.

Conditions: >, <, =>, <=, !=, =, <>, between, not between, containing, not containing, is.

Effects: background color, background color scale, icon.

  • Formats the cells changing their background color based on their numerical value and one (or two for between and not between) reference values.
  • Formats the cells changing their background color based on their text value, highlighting those which contain/not contain a piece of text
  • Formats the cells changing their background color based on a date value, highlighting those which contain a date earlier than a reference one.
  • Formats the cells changing their background color based on if a cell is blank or not.
  • Formats the cells changing their background color based on if a cell is unique or not in the data range specified.
  • Formats the cells changing their background color with a color scale between two colors according to the two values MIN and MAX .
  • Formats the cells adding an icon next to the data of the cell, according to the array of conditions and values. The values can be considered as percentage too. >33%.

Inside Flash

Besides all the things you can do from XML there are plenty more from flash like:

  • add a row and the end or at a given index
  • add a column and the end or at a given index
  • delete everything
  • delete a row/column at the end or at a given index
  • get a reference to the cell at x,y
  • set fromating rule
  • set column fixed width
  • set row fixed height
  • dispatches events when table is loaded and is OK to modify it
  • many options

bogDesigns Portfolio

Utilities

bButton bTooltip bGlossary-xml dictionary bPopup-flash window bTable-show-your-data bgraph-customizable-xml-data-graph btextarea-professional-xml-css-textarea

by
by
by
by
by