Use xml file to display info in swf and html

I needed to setup a system where the same data could be viewed/accessed in both a swf file and an HTML file on the web.

I set up the swf file to dynamically load an xml file. The nodes and attributes of the xml would then be parsed and stored in an instance of a class which I named CheatsheetData class(currently known as pocket notes now).

Example data stored in the xml file is displayed below. Notice there is an xml-stylesheet reference included in the file which is ignored in the flash usage of this file but is necessary in the HTML rendering.

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="formatter.xsl" ?>

<cheatsheets title="Pocket Notes on Cachexia">
	<sheet id="1">
		<title>Assessment:</title>
		<br />
		<underline-header>1. Take weight loss seriously and intervene early:</underline-header>
		<paragraph>Patients who experience involuntary weight loss require careful monitoring; a loss of 5% or more in 12 months suggests cachexia.</paragraph>
		<br />
		<underline-header>2. Other diagnostic criteria include any three of the following:</underline-header>
		<list type="unordered">
			<li>Fatigue</li>
			<li>Decreased muscle strength</li>
			<li>Low muscle mass</li>
			<li>Anorexia</li>
			<li>CRP &gt; 5mg/L or IL-6 &gt; 4pg/mL or Hgb &lt; 12 g/dL or albumin &lt; 3.2 g/dL</li>
		</list>
	</sheet>
	
	<sheet id="2">
		<title>Intervention:</title>
		<br />
		<list type="unordered">
			<li>Stabilize weight. Prescribe high intakes of protein (1.4 g/kg/day) and energy (29 kcal/kg/day).</li>
			<li>Treat the underlying disease (e.g., cancer, chronic heart failure, COPD, etc.).</li>
			<li>Treat symptoms (e.g., inflammation, anemia, anorexia).</li>
			<li>Encourage physical activity, if appropriate.</li>
		</list>
		<br />
		<underline-header>Treatable Factors:</underline-header>
		<paragraph>Recognize that conditions and medications unrelated to the underlying disease may adversely affect appetite and contribute to involuntary weight loss:</paragraph>
		<br />
		<p>Diseases or Disorders</p>
		<list type="unordered">
			<li>Neuropsychiatric (e.g., depression, dementia)</li>
			<li>Gastrointestinal (e.g., peptic ulcer disease)</li>
			<li>Endocrine (e.g., thyroid dysfunction)</li>
			<li>Difficulty Eating (e.g., swalling disorders)</li>
		</list>
		<br />
		<p>Medication</p>
		<list type="unordered">
			<li>Antidepressants (e.g., citalopram)</li>
			<li>Adjunct Treatments (e.g., opioids)</li>
			<li>Concurrent Illness (e.g., diuretics)</li>
		</list>
		<br />
		<p>Other Factors</p>
		<list type="unordered">
			<li>Unappealing Diets (e.g., sodium-restricted)</li>
			<li>Socioeconomic Factors (e.g., poverty)</li>
		</list>
		<paragraph>Increase the success of treatment by addressing these factors.</paragraph>
	</sheet>
</cheatsheets>

The following actionscript code used in the flash fla file to interpret and render the text content in the desired format. Notice we can create non standard html(xml) tags and apply css styles to them(for example the mixed and item tags) and have flash render them based on the style information setup in my stylesheet which I have defined below:

//now we need to set up stylesheets so that we can create flash css based on xml tags
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;

The flash stylesheet is applied to the dynamic text boxes in the flash file and then the text is loaded into these html based textboxes. The stylesheet takes care of the text formatting within the text areas of the flash generated swf file.

Now we take the same xml file whose information was displayed in a flash swf and now use an xsl file to format it for display in the browser.

Here is the xsl stylesheet which we used to display the xml data in a two column format within the browser. Note the use of the inclusion of the stylesheet called pocketnotes.css which is used to format the generated div tags appropriately:

<?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>
				<link type="text/css" rel="stylesheet" href="pocketnotes.css" />
				<title><xsl:value-of select="@title" /></title>
			</head>
			<body>
				<div id="wrapper">
					<div id="header"><xsl:value-of select="@title" /></div>
					<div id="separator"></div>
					<xsl:for-each select="sheet">
						<xsl:choose>
							<xsl:when test="@id = 1">
								<div id="left-column">
									<xsl:apply-templates />
								</div>
							</xsl:when>
							<xsl:when test="@id = 2">
								<div id="right-column">
									<xsl:apply-templates />
								</div>
							</xsl:when>
						</xsl:choose>
					</xsl:for-each>
					<div id="footer"></div>
				</div>
			</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>
	
	<!-- Underline -->
	<xsl:template match="underline">
		<span class="underline">
			<xsl:apply-templates />
		</span>
	</xsl:template>
	
	<!-- Bold -->
	<xsl:template match="bold">
		<span class="bold">
			<xsl:apply-templates />
		</span>
	</xsl:template>
	
	<!-- Mixed Formats -->
	<xsl:template match="mixed">
		<p><xsl:apply-templates /></p>
	</xsl:template>
		
	<!-- Links -->
	<xsl:template match="link">
		<a href="{url}">
			<xsl:value-of select="text" />
		</a>
	</xsl:template>
	
	<!-- Paragraphs -->
	<xsl:template match="paragraph">
		<p>
			<xsl:apply-templates />
		</p>
	</xsl:template>
		
	<!-- Line breaks -->
	<xsl:template match="br">
		<br />
	</xsl:template>
	
	<!-- List -->
	<xsl:template match="list">
		<ul>
			<xsl:for-each select="li">
				<li><xsl:apply-templates /></li>
			</xsl:for-each>
		</ul>
	</xsl:template>
		
	<!-- Italic -->
	<xsl:template match="italic">
		<span class="italic">
			<xsl:apply-templates />
		</span>
	</xsl:template>
	
	<!-- Red -->
	<xsl:template match="red">
		<span class="red">
			<xsl:apply-templates />
		</span>
	</xsl:template>
	
	<!-- Regular text -->
	<xsl:template match="regular">
		<span><xsl:apply-templates /></span>
	</xsl:template>
	
	<!--Space -->
	<xsl:template match="space">
		<span>&#160;</span>
	</xsl:template>
	
</xsl:stylesheet>

Having issues with the two column html based format(IE and firefox do not display the info in the same manner). The two column layout needs to be revisited and fixed. If that does not work, will look into using php xslt function to display the xml file in an appropriate html format. Plan on having the php code detect the browser type and then use different xsl files based on the browser detected.

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: