 Getting started with TableMaker |
| |
There are only 2 steps to create a table with tableMaker.
First, create an XHTML file similar to below and give it a name like: table1.html
|
<html>
<body>
<table width="500" height="100" border="1">
<tr>
<td>Here is some text!</td>
<td>Here is some More text!</td>
</tr>
</table>
</body>
</html>
|
Next, in Flash, drag an instance of the component to the stage and give it a
name like: myTableMaker. Then point it to the XHTML file like this:
|
myTableMaker.createTable("table1.html")
|
Then publish the movie -- That's all there is to it!
Also, be sure to explore all the other functionality TableMaker has to offer!
Please note that the XHTML file must follow the structure found here:
http://www.flashrelief.com/tablemaker/documentation.html#xhtml
|
| Methods and Events |
| |
TableMaker.createTable()
|
Usage:
instanceName.createTable(url:String);
Parameters
url A string that represents the URL where the XHTML document to be loaded is located. If the SWF file that issues this call is running in a web browser, url must be in the same domain as the SWF file.
Description:
The document to be loaded must conform to XHTML standards and be formatted according to Flashrelief specifications.
myTableMaker.createTable("myTableData.html");
or
myTableMaker.createTable("myTableData.xml");
|
|
|
| |
TableMaker.createFromString()
| |
Usage:
myTableMaker.createFromString(string:String)
Parameter:
string A string formatted as XHTML and according to the structure defined at: http://www.flashrelief.com/tablemaker/documentation.html#xhtml The string must not contain white space.
Example:
var myString = '<html><body><table width="300" border="1"><tr><td>hello</td><td>world</td></tr></table></body></html>';
myTableMaker.createFromString(myString) |
|
|
| |
TableMaker.onTableRendered()
| |
Usage:
instanceName.onTableRendered = function(){
//your statements here
}
Description:
This event is executed after the table data is parsed and the table is fully drawn.
myTableMaker.onTableRendered = function () {
trace("tableWidth= "+ myTableMaker._width);
trace("tableHeight= "+ myTableMaker._height);
} |
|
| |
| |
TableMaker.setCallBack()
| |
Usage:
myTableMaker.setCallBack(scope:Object, functionName:String);
Parameters
scope is the location where the function lives. function is the name of the target function.
Description:
This method is used if you would like to link to a function from within your table. functionName is used with an asfunction in your XHTML file. functionName and the function specified in your asfunction must match for this to work.
Set the function:
myTableMaker.setCallBack(this, myFunction);
Reference the function in your XHTML file:
<a href="asfunction:myFunction,myParameter">Click Here!</a>
Note: myParameter will be passed to your specified function. |
|
| |
TableMaker.redraw()
| |
Usage:
myTableMaker.redraw()
Description:
This method is used to redraw the table after table cell properties and/or text has been
changed using the methods: myTableMaker.id.setValue() and myTableMaker.id.setText()
Example:
In the XHTML:
<td id="myID" width="50" height="50" bgcolor="#FFFFFF">here is my text</td>
Reset text and values using actionscript. Code:
myTableMaker.myID.setValue("width","100");
myTableMaker.myID.setValue("height","100");
myTableMaker.myID.setText("This text will replace the original text")
myTableMaker.redraw();
|
|
| |
TableMaker.id.setText()
| |
Usage:
myTableMaker.id.setText(string:String [, saveTextFormat:Boolean])
Parameters:
String: sets the string that you would like to replace for the table cell.
saveTextFormat: optional parameter determining if you would like to save the original text formatting for that cell, if for example the font is emeded. Default is true.
Note: The id in: myTableMaker.id.setText() is a reference to the id attribute in the <td> tag within the XHTML.
Description:
This method is used if you would like to replace text inside a table cell. The method is available after the table has been created assuming you have set an id inside a <td> tag within the XHTML. For changes to take effect, you must use the method myTableMaker.redraw()
Example:
In the XHTML:
<td id="myID">here is my text</td>
Reset the text using actionscript:
myTableMaker.myID.setText("This text will replace the original text");
myTableMaker.redraw();
|
|
| |
TableMaker.id.setValue()
| |
Usage:
myTableMaker.id.setValue(property:String,value:String,)
Parameters:
Property: sets the property of the table cell that you would like to change. The property can be any attribute that the <td> tag accepts.
Value: sets the value for the specified property.
Note: The id in: myTableMaker.id.setText() is a reference to the id attribute in the <td> tag within the XHTML.
Description:
This method is used if you would like to change the table cell properties using actionscript. myT
The method is available after the table has been created assumingyou have set an id inside
a <td> tag within the XHTML. For changes to take effect, you must use the method myTableMaker.redraw()
Example:
In the XHTML:
<td id="myID" width="50" height="50" bgcolor="#FFFFFF">here is my text</td>
Reset the text using actionscript:
myTableMaker.myID.setValue("width","100");
myTableMaker.myID.setValue("height","100");
myTableMaker.myID.setValue("bgcolor","0xCCCCCC");
myTableMaker.myID.setValue("align","right");
myTableMaker.redraw(); |
|
| |
TableMaker.id.getMC()
| |
Usage:
myTableMaker.id.getMC(id:String)
Parameters:
There are two id's referenced here and must match what is set in the XHTML.
The first id is shown in red: myTableMaker.id.getMC() This is a reference to the id set in the <td> tag in the XHTML
The second id is shown in red: myTableMaker.id.getMC("id") This is a reference to the id set in the <img> tag in the XHTML
Description:
This method is used if you would like to access an embeded .jpg or .swf using actionscript. The method is available after the table has been created assuming you have set up id's to access the movieclip.
Example:
In the XHTML:
<td id="idOne"><img src= "myImage.swf" height ="50" width="50" id="idTwo"/></td>
Reference the Movieclip using actionscript:
var mc = myTableMaker.idOne.getMC("idTwo");
//manipulate the movieclip as you like
mc.gotoAndStop(2) |
|
| |
TableMaker.selectableText:Boolean
| |
Usage:
myTableMaker.selectableText
Description:
Property; a Boolean value that indicates whether the text field is selectable. The value true indicates that all text in the table is selectable. The default value is false.
Example:
myTableMaker.selectableText = true;
|
|
| |
| How to Structure the XHTML |
| |
The HTML used to create tables in the TableMaker component needs to be XHTML formatted. This just means your HTML needs to be well formed, so your tags need to be closed and tags & attributes need to be in lowercase. A common error is to not close the <br> tag. The correct closed tag should look like this: <br/> You can test your XHTML in Dreamweaver by selecting: File->Check Page ->Validate as XML. For more on XHTML go to: http://www.w3schools.com/xhtml/default.asp
TableMaker XHTML required tags:
The XHTML file must include tags in this order:<html><body><table> Just like HTML tables!
Example:
|
| XHTML - Supported tags and attributes (with example values) |
| |
<table >
| |
bgcolor=”#FF0000”
bordercolor=”#0066CC”
width=”300”
height=”300”
border=”5”
cellspacing=”2”
cellpadding=”2”
embedfont=”futura” *
*The embedfont attribute requires the Flash file to have a linked Font symbol in the library of the same name. |
<tr>
| |
bgcolor="#000099"
bordercolor="#000000"
|
<td>
| |
colspan=”2”
rowspan=”2”
height=”50”
width=”50”
bgcolor="#000099"
bordercolor="#000000"
align=”right” *
id="idName"
**
embedfont=”futura” ***
*The align attribute works only with cells containing text, not jpg’s or swf’s
** a reference for accessing the table cell with actionscript
***The embedfont attribute requires the Flash file to have a linked Font symbol in the library of the same name.
|
<td>Click here to view all supported HTML tags for use within table cells</td>
|
| How to use CSS with TableMaker |
| |
Linking a CSS file to the XHTML document:
The css document can use any Flash supported CSS. Click here for supported CSS properties |
| |
| How to Embed fonts into the table |
| |
There is no actionscript required to embed a font into a TableMaker table.
Embedding a font can be achieved in two simple steps:
1. Create a linked font in the Library in your Flash movie and give it a name in the "identifier" field.
2. In your XHTML file's <table> or <td> tags set the "embedfont" attribute to the linkage name you gave the font.
Examples in XHTML file:
| If you want all the table cells to use your embeded font: |
<table embedfont="futura"> |
| If you just want specific table cells to use your embeded font: |
| <td embedfont="futura">This text will be displayed is your embeded font face</td> |
*Note: embedfont will not work if the table sell contains an image. This isn't possible because of a bug in the Flash player that causes some machines to crash if a text field contains an image and also has an embded font. In this case put the text and an image in seperate table cells.
|
| How to add jpg's, swf's, and library Movie Clip symbols to table cells |
| |
When adding jpg's and swf's you must specify the height and width attributes
for the image to draw correctly.
Example of adding a .jpg (Note:jpg's must not be saved in 'progressive' format) |
| <td><img src="myphoto.jpg" height="100" width="50'' hspace="4" vspace="4"> <td> |
| |
Example of adding a .swf |
| |
<td><img src="myMovie.swf" height="100" width="50'' hspace="4" vspace="4"> <td> |
| |
Example of adding a Library Movie Clip symbol.
For this to work you must have a Movie Clip in the library with an Identifier name and
set to 'Export for Actionscript'. Here the identifier name would be "mySymbol" |
| |
<td><img src="mySymbol" height="100" width="50'' hspace="4" vspace="4"> <td> |
| |
|
| How to target table cells with actionscript |
|
To change the text in a cell using actionscript
| 1) set an id in the XHTML table cell |
<td id="myID">here is my text</td> |
| 2) in actionscript, use the id name to reference the text and redraw the table |
myTableMaker.myID.setText("This text will replace the original text");
myTableMaker.redraw();
|
To reset the attributes of a table cell using actionscript
To access images or .swf's that have been added to a table cell
|
| Differences between TableMaker and Browser HTML tables |
|
• TableMaker introduces a new attribute named “embedfont” for use within the <table> and <td> tags.
Read more here >
• Nested tables are not supported in TableMaker but using multiple instances of the component can
achieve a similar effect in some cases.
• height and width percentages are not supported but pixel numbers are. Example:
Supported: <td height="20" width="140">
Not supported: <td height="20%" width="100%">
• In TableMaker, height and width values set in the <td> tag will take precedence over values set
in the <table> tag where the opposite is generally true in browser rendering.
• default height and widths will render slightly different between TableMaker and Browsers. For best
results set width and height in the <td> tags.
• When using the <img> tag you must set a height and width attribute for the jpg or swf to draw
correctly. Example: <img src=”myswf.swf” height=”50” width=”100”>
• You can only include one swf or jpg per table cell. This is a result of the way Flash embeds images into text fields. Read more about this at the Macromedia LiveDocs |
