Introduction to XML in Flash
by senocular
Example: Simple Editor
Back to the basics: simple loading and simple
sending (and reloading) of XML. Here, you have
a simple, two-paned editor. The top pane is
the input pane (a text field named input_txt)
and the bottom pane is the output pane (a text
field named output_txt). What you do is load
existing XML into the input pane, edit it (or
just start anew), then send or "save"
it and the changes will be sent out to the server
using sendAndLoad. The results (what you just
sent) is displayed in the output pane thanks
to the load aspect of sendAndLoad.
[
save and load using input and output panes ]
The XML
The XML is about as simple as its going to get.
It starts out as:
- <?xml version="1.0"?>
- <edit>This
is what is to be edited.</edit>
And then changes based on whoever was last
to save what. All you have is a simple edit
element for the document root node and a text
node as a child. The text within this text node
is what represents what you see in the input
and output panes of the example.
ActionScript
Much of the Flash-based scripting is old hat.
The big difference in this example is that two
XML instances are created to deal with the same
XML document. One handles the loading and sendAndLoading
for the input pane and the other receives data
from the return result of the sendAndLoad call
from the first. You could actually use the same
XML instance to send and load into. However,
since the first XML instance handles loading
into the input pane, it would be slightly more
difficult to also have it handle content loading
into the output pane. Lets take a look at their
definitions:
- var input_xml
= new
XML();
- input_xml.ignoreWhite
= true;
- input_xml.contentType
= "text/xml";
- input_xml.onLoad
= function(success){
- if (success)
input_txt.text
= this.firstChild.firstChild.nodeValue;
- else input_txt.text
= "Error
loading input XML";
- }
-
- var output_xml
= new
XML();
- output_xml.ignoreWhite
= true;
- output_xml.onLoad
= function(success){
- if (success)
output_txt.text
= this.firstChild.firstChild.nodeValue;
- else output_txt.text
= "Error
loading output XML";
- }
Each input_xml (for the input pane) and output_xml
(for the output pane) have their own separate
onLoad events to handle each of the text fields'
text assignments from the XML loaded where this.firstChild.firstChild.nodeValue
represents the text within the text node child
of the edit element. Since input_xml is sending
data to a server, contentType is also specified
for it, set to "text/xml."
- input_xml.contentType=
"text/xml";
Button actions make up the rest of the code.
They control when XML is loaded and sent and
also provide ways to clear the two panes.
- var xml_file
= "simple_edit.xml";
- var server_file
= "simple_edit.php";
-
- load_btn.onRelease
= function(){
- input_xml.load(xml_file
+ "?uniq="
+ new
Date().getTime());
- input_txt.text
= "Loading...";
- }
- send_btn.onRelease
= function(){
- input_xml.firstChild.firstChild.nodeValue
= input_txt.text;
- input_xml.sendAndLoad(server_file,
output_xml);
- output_txt.text
= "Loading...";
- }
-
- clearin_btn.onRelease
= function(){
- input_txt.text
= "";
- }
- clearout_btn.onRelease
= function(){
- output_txt.text
= "";
- }
Some variables are first defined for keeping
track of what files are being used. These aren't
necessary but keep some organization going when
dealing with multiple files.
- var xml_file
= "simple_edit.xml";
- var server_file
= "simple_edit.php";
Next are the button actions that interact with
the server. The first is the load button. It
simply loads the xml file into the input_xml
instance. To make sure that a fresh version
of the file is loaded and not a cached version,
an addition query string is added to file url.
This adds a (mostly) unique number to the end
of the url so that the same url will not be
loaded for each instance the XML is loaded into
the Flash Player - hence, no cached version.
- input_xml.load(xml_file
+ "?uniq="
+ new
Date().getTime());
The send button is much like load except it
first updates the input_xml with the input_txt
text field's text and uses sendAndLoad to send
the XML to a server-side PHP script.
- input_xml.sendAndLoad(server_file,
output_xml);
What this does is takes the XML within input_xml,
sends it to the server_file url as raw POST
data and then loads the result of that url into
output_xml. Once output_xml receives the result,
its onLoad will be called and the output_txt
text field can be updated.
The remaining buttons simply clear the fields.
They set the text of either of the two panes
to "" which removes any other text
that might have been there before.
- input_txt.text
= "";
Server-side Scripting
The server-side script used in sendAndLoad does
half the work. For this particular example,
I used PHP though feel free to use whatever
you wish. For it to do its job, the script simply
needs to print what its been sent and save it
on the server. A very basic version of that
in PHP is the following:
- <?php
- $filename =
"simple_edit.xml";
- $raw_xml =
file_get_contents("php://input");
-
- print $raw_xml;
-
- $fp =
fopen($filename,
"w");
- fwrite($fp,
$raw_xml);
- fclose($fp);
- ?>
This takes input from raw post data (sent by
the swf) and saves it as a variable called $raw_xml.
This is printed as output and then saved to
simple_edit.xml.
Normally, the print command would display to
a web page. And, for the most part, it's still
doing that. However, you never see this web
page yourself. Instead, it's sent back to Flash
and loaded in as part of the load aspect of
sendAndLoad. Send throws the XML at the PHP
script as raw data and load brings the results
back in.
[
load and sendandload interaction with xml and
the server ]
A few modifications and this can be doing something
a little more useful. That brings us to our
next example.
|