How does the "Live Data View" feature in Dreamweaver MX
work?
In Dreamweaver MX, there is a feature called "Live Data View"
by which you get to see the output of dynamic pages (ASP,
Coldfusion...etc) alongside with their source code. When you
highlight an instance of the dynamic data in the live data
pane, the corresponding code segment will be highlighted automactically
in the code pane so that you will know which piece of code
produced what output. Obviously, it will enable you to modify
code easily. That's a really cool feature!
But have you ever wondered how this cool feature was done?
In this article, we are going to take an insider's look
into the inner-workings of this handy feature.
In MX's normal "Code and Design" view, you will see something
like this:
If you change to the Live Data mode by clicking on the "Live
Data View" button...
.... you will then see both the ASP code and the live data
produced by it side by side! If you highlight an instance
of the dynamic data block in the Live Data pane, the corresponding
peice of code in the upper pane will be highlighted automatically
for you to edit easily! Like this:
How'd they do that?
They do that by tokenizing the ASP page (or other types
of dynamic page like ColdFusion), executing it and then matching
different parts of the program's output with the original
tokens.
You may ask: What is a token? Two things can be a token.
A block of ASP code will become a token. Likewise, a block
of static HTML code will become a token too. Let's take a
look at an example to see what that actually means:
In the diagram, each red box is a token. As you may have
figured out, a
<% ...some code ...%>
or
<%= some expression %>
block is a token. Besides, static HTML code between these
blocks will become a token too. To sum up, there are only
two types of tokens, one for ASP code, one for HTML block.
Okay. Then, how do they actually create a tokenized page
and get it executed? Good question. A temporary ASP page is
created by Dreamweaver MX. It has the same content as the
original ASP page except that special HTML comment tags are
inserted at token boundaries to serve as token identifiers.
Like this:
It stores this temporary file in the same folder as the original
ASP page. Then, its "internal browser" will invoke the ASP
page and grab the output from the webserver. With the help
of HttpRevealer, we can visualize this invisible process:
In the above diagram, you see some of the special HTML comment
tags (i.e. token identifiers) inserted by Dreamweaver MX:
<!-- MMDW n
-->
, n being a unqiue ID for each identifier.
Once Dreamweaver MX has obtained the output from the web
server, it will then make use of these token identifiers to
match up different parts of the output with the corresponding
blocks of code (i.e. tokens) in the source file. When the
matching is done, it will know which segment of code in the
source is responsible for which parts of content in the output,
thereby allowing you to see and manipulate the program source
alongside with the Live Data!
That's that. I hope you enjoyed the discussion. I found
out the above with HttpRevealer.
You can explore the web yourself too! [See
more info]
Steven Chau
Go back to the Index of Articles
Dreamweaver MX is a registered trademark of Macromedia, Inc.
All other marks are properties of their respective owners.
|
