Using XML to display text in Flash Page and/or HTML

We have summary content which we use at the end of nutritional instruction. The nutritional instruction is initially rendered in a flash page at the end of a course(The course content is contained in a series of flash based pages). This information also needs to be made available for printing and for possible look up at a later time from an HTML web based page. We call this section our pocket notes and have placed this text info into an xml file.

We decided that with the use of xml we could centralize the information which needs to be displayed and massage it for display in two different contexts. The first view would be within a flash based page and the second within an html based page.

Pocket Notes Text Instructions for xml file:
The pocket notes text (which is to be displayed in both a flash page template and an html browser page) is provided a layout structure with the use of an xml file.

  • This xml file is dynamically loaded into the flash page for display.
  • The xml file is also displayed appropriately in a browser page with the use of an xsl stylesheet.

The xml file was structured using the following format:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="formatter.xsl" ?>
<cheatsheets title="Pocket Notes on Cachexia">
     <sheet id="1">
           		
     </sheet>
	
     <sheet id="2">

     </sheet>
</cheatsheets>

Please note in the <?xml-stylesheet> tag a reference to the xsl stylesheet to use when loading the xml file in a browser.

You will also probably notice that the first tag (withoout ?xml in it) is labeled the cheatsheet tag. We initially called the page cheatsheet but decided that the connotation was off base and later renamed the page pocketnotes.

The two sheet tags represent the two columns of information that will be displayed. Within the sheet tags there are a number of possible tags we created which are used to help format text in the two columns.

The tags currently being used are listed below:

  • <title>
  • <underline-header>
  • <list type=”unordered”>
  • <list type=”ordered”>
  • <li>
  • <paragraph>
  • <underline>
  • <bold>
  • <mixed>
  • <link>
  • <br>
  • <italic>
  • <regular>
  • <space>

Here is an example of the mixed result tag which allows you to combine font types(The other ones are relatively self explanatory):

<mixed>
    <italic>Note:</italic>
    <regular> 10 mg Prednisone is equivalent to:</regular>
</mixed>

Please note that Flash only supports a limited number of html format tags to be used in their text areas as noted on their livedocs site. A quick list of Flash supported tags:

  • anchor
  • bold
  • break
  • font
  • image
  • italic
  • list item
  • paragraph
  • span
  • text format
  • underline

So you can limit yourself to the limited number of html format tags in flash or you can increase your ability to specify html type behavior by doing the following:

  1. creating new xml node tags(such as underline-header)
  2. defining CSS in flash for these new xml node tags to mimic standard html tags
  3. defining xsl code to process these new xml node tags into standard html tags

For example, in the list of xml tag items we defined for our page above, we also defined the following CSS style sheet behavior for the textfields in our flash page:

//now we need to set up stylesheets so that we can mimic/define pseudo html-css behavior
var myCSS:TextField.StyleSheet = new TextField.StyleSheet();

myCSS.setStyle("title",{fontSize:"15",fontWeight:"bold",color:"#000000"});
myCSS.setStyle("underline-Header",{fontWeight:"bold",textDecoration:"underline",fontSize:"12"});
myCSS.setStyle("paragraph",{fontSize:"12"});
myCSS.setStyle("mixed",{fontSize:"12",display:"block"});
myCSS.setStyle("item",{fontSize:"12"});
myCSS.setStyle("italic",{fontStyle:"italic",display:"inline"});
myCSS.setStyle("red",{color:"#FF0000",display:"inline"});
myCSS.setStyle("regular",{display:"inline"});

sheet1_txt.styleSheet = myCSS;
sheet1_txt.html = true;
sheet2_txt.styleSheet = myCSS;
sheet2_txt.html = true;

In other words, you can create desired text behavior like titles/headers which do not currently fall within the realm of currently supported html tags in Flash.

The question is then how to render this text in a browser understandable manner. The solution was to associate a xsl sheet that can process these tags from an xml file and convert them to the desired html tags. Here is an abbreviated copy of our xsl file(formatter.xsl) that was used to format our xml

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
	
	<xsl:template match="cheatsheets">
		<html>
			<head>
				<title><xsl:value-of select="@title" /></title>
				<link type="text/css" rel="stylesheet" href="pocketnotes.css" />
			</head>
			<body>
				<div id="header">
					<xsl:value-of select="@title" />
				</div>
				<div class="colmask doublepage">
					<div class="colleft">
						<xsl:for-each select="sheet">
							<xsl:choose>
								<xsl:when test="@id = 1">
									<div class="col1">
										<xsl:apply-templates />
									</div>
								</xsl:when>
								<xsl:when test="@id = 2">
									<div class="col2">
										<xsl:apply-templates />
									</div>
								</xsl:when>
							</xsl:choose>
						</xsl:for-each>
					</div>
				</div>
				<div id="footer" />
			</body>
		</html>
	</xsl:template>
	
	<!-- Title -->
	<xsl:template match="title">
		<span class="title">
			<xsl:apply-templates />
		</span>
	</xsl:template>
	
	<!-- Underline Header -->
	<xsl:template match="underline-header">
		<p>
			<span class="underline-header">
				<xsl:apply-templates />
			</span>
		</p>
	</xsl:template>
</xsl:stylesheet>

Here is an image of our flash based page:
Pocket notes page rendered in a flash 8 based page

Here is an image of our html based page rendering our xml file:
Pocket Notes page rendered using html formatted xml

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: