- The Basics
- Getting Started: Directory Structure, XPath, Flash File, and HTML Table
- The Methods
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Getting Started: Directory Structure, XPath, Flash File, and HTML Table
First you need to set up your directories and download the files necessary for your class:
- Create a directory named tableViewer.
- In the tableViewer directory, create a new Flash document called tableView.fla.
Next you’ll need to download some files that will make your work in reading the HTML table much easier. We’ll do that in the next section.
XPath: What It Is, How to Get It, Where to Put It
XPath is a technology that enables quick and clear access to data within XML files. Flash certainly has adequate native support for XML, but XPath makes working with XML so much easier that once you use it you’ll never go back. Let’s get going with XPath:
- Go to XFactor Studio and download XPath4AS2. (The name is short for "XPath for ActionScript 2.0.")
- Extract the zip file into the tableViewer folder where you saved your tableView.fla Flash file.
The XPath zip file extracts into a directory structure, and this structure is important. It looks like this:
\com\xfactorstudio\xml\xpath
We’ll store our class files in this com directory, which gives us a convenient syntax for accessing the various classes.
HTML Table Code
Now we’re ready for some HTML table code. One thing to remember is that the code we’re going to build requires well-formatted HTML/XML table code. If it’s not well-formatted, XPath won’t be able to target tags. Follow these steps:
- Copy and paste the following code into your favorite text editor. I use
jEdit, but you can
use whatever you like. (Perhaps you’d prefer to use Flash’s own
Actions window—that’s perfectly fine.)
<table width="400" bgcolor="#ffffff" padding="2" border="#000000"> <tr><td bgcolor="#e2e2e2">row 1 cell 1</td><td>row 1 cell 2</td><td>row 1 cell 3</td></tr> <tr><td bgcolor="#3fe63b" colspan="2" align="center">row 2 cell 1 and 2</td><td align="center">row 2 cell 3</td></tr> <tr><td bgcolor="#e2e2e2" align="center">row 3 cell 1 row 3 cell 1 row 3 cell 1 row 3 cell 1 row 3 cell 1 row 3 cell 1 row 3 cell 1 row 3 cell 1 row 3 cell 1</td><td>row 3 cell 2</td><td>row 2 cell 3</td></tr> <tr><td bgcolor="#e2e2e2" colspan="3" align="center">row 4 cell spanned spanned spanned spanned spanned spanned spanned spanned spanned</td></tr> <tr><td bgcolor="#e2e2e2">row 5 cell 1</td><td>row 5 cell 2</td><td>row 5 cell 3</td></tr> </table>
- Save the file as table.xml in the tableViewer folder where you saved the Flash file.
Flash Code to Import table.xml
Now let’s go back to the Flash file for a bit:
- Open tableView.fla.
- Click in the first frame and press F9 to open the Actions window.
- Copy these lines of code and paste them into the Actions window:
import com.*; tableXML = new XML(); tableXML.load("table.xml"); tableXML.onLoad = xmlHandler; tableXML.ignoreWhite = true; var rootClip:MovieClip = this; function xmlHandler(success) { if (success == true) { rootNode = tableXML.firstChild; var tb:TableViewer = new TableViewer(rootClip, rootNode, 640, 500); } }
This code does three things. The first line (import com.*) imports the class that we’re soon going to create. By importing it, we make it available for use in our Flash application. As for the rest of it, if you’ve done any ActionScript coding at all, this should look at least a little bit familiar, so I’m not going to go into great detail here. Suffice it to say that it imports the table.xml file, and if that operation is successful it assigns the value of that file to the variable rootNode, and then instantiates our TableViewer.
Look at the next line of the code:
var tb:TableViewer = new TableViewer(rootClip, rootNode, 640, 500);
Flash isn’t a "strongly typed" language; that is, you can create a variable without explicitly saying just what kind of variable it is. It could be a string or a number or an object—you don’t have to say. That doesn’t mean that you can’t explicitly state what kind of variable you’re creating. In this case, as in most cases, it makes sense to take advantage of typing to let the program know just what kind of variable you’re creating. We’re creating a variable named tb that is a TableViewer. Using the new keyword, we create the TableViewer object and pass into it four parameters:
- rootClip is a reference to the root MovieClip, so we’ll have some place to attach the table.
- rootNode is a reference to the XML file we just imported.
- 640 is how wide we want the table to be.
- 500 is how tall we want the table to be.
The TableViewer Class
Let’s turn our attention to the code of the TableViewer class (see Listing 1 at the end of the following steps) and see whether we can get this thing working.
- The first step, of course, is to open a text editor and begin with an
import statement that will make available all of the XPath code so
necessary for our work:
import com.xfactorstudio.xml.xpath.XPath;
- With the following line, we define the actual class itself:
class com.TableViewer {Note that the name of your class must match the name of the file (TableViewer and TableViewer.as in this example).
- Following the class name, I’ve created a number of global variables
for use in the program (see Listing 1 for the variables). These are private
variables, meaning that only the TableViewer has access to them to
change them. We declare them here, and then in the constructor function
we can initialize them with values:
public function TableViewer(mc:MovieClip, xml:XML, tableWidth:Number, maxTableHeight:Number)
- After providing values for most—but not all—of the variables,
create three MovieClips—Base_mc, Border_mc, and
Boxes_mc—that will give us space to work:
Base_mc = TimeLine.createEmptyMovieClip("base_clip", TimeLine.getNextHighestDepth() ); Border_mc = Base_mc.createEmptyMovieClip("borders_clip", Base_mc.getNextHighestDepth() ); Boxes_mc = Base_mc.createEmptyMovieClip("boxes_clip", Base_mc.getNextHighestDepth() ); - At this point, all we have left to note is the method call at the end of our
constructor. The external XPath code is available, the class is defined, the
variables declared and initialized, and the basic clip structure of our code
established. All that remains is to make a method call to start the
process:
TableController();
Listing 1 The TableViewer class.
import com.xfactorstudio.xml.xpath.XPath;
class com.TableViewer {
// define global variables
private var TableFile:XML;
private var TimeLine:MovieClip;
private var Base_mc:MovieClip;
private var Border_mc:MovieClip;
private var Boxes_mc:MovieClip;
private var AllBoxes:Array;
private var AllTexts:Array;
private var Rows:Array;
private var Cells:Array;
private var CellsMax:Array;
private var CellNumbers:Array;
private var AllTextBoxes:Array;
private var BackgroundColor:Number;
private var CellWidth:Number;
private var TableWidth:Number;
private var TableHeight:Number;
private var TablePadding:Number;
//**********************************
// pass in a movie clip, the xml, and the desired width of the table
//**********************************
public function TableViewer(mc:MovieClip, xml:XML, tableWidth:Number, maxTableHeight:Number) {
TimeLine = mc;
TableFile = new XML(xml.toString());
AllBoxes = new Array();
AllTexts = new Array();
Cells = new Array();
CellsMax = new Array();
CellNumbers = new Array();
AllTextBoxes = new Array();
BackgroundColor;
TableWidth = tableWidth;
TablePadding;
// create necessary clips
Base_mc = TimeLine.createEmptyMovieClip("base_clip", TimeLine.getNextHighestDepth() );
Border_mc = Base_mc.createEmptyMovieClip("borders_clip", Base_mc.getNextHighestDepth() );
Boxes_mc = Base_mc.createEmptyMovieClip("boxes_clip", Base_mc.getNextHighestDepth() );
TableController();
}