Channels ▼
RSS

Web Development

XLEFF, Flash, and XML


Crystal is an adjunct associate professor of Computer Studies at University of Maryland University College. She holds a Ph.D. in physics and can be reached at ccooper@drcrystalcooper.com.


XLEFF is an XML layout engine for Flash that lets you create component-based UIs from XML files. An XML layout engine is a useful tool because it automatically follows the MVC (Model-View-Controller) architecture, where presentation is separated from the program, and changes to the UI can be done without recompiling the client. In this article, I use Flash, XLEFF, CSS, XML, and Perl to develop a web-based exam system. The complete source code and related files are available here.

The advantages of using XLEFF are three-fold: component creation is done by the SWF on the client side, you only need the basic Flash application environment to create applications, and thanks to its creator Antonio DeDonatis, XLEFF is in the public domain.

The completed XLEFF-based exam program consists of:

  • A web page called exam.html.
  • Two database files: bio101questions.xml and bio101answers.xml.
  • Two UI files: start-view.xml and test-view.xml.
  • A stylesheet called exam.css.
  • A Flash file named exam.swf.

To run the exam program from the browser, put the HTML files and the SWF in the same directory. Under this directory, create three subdirectories -- xml, images, and css. Put all of the XML files inside the xml directory. The images directory contains graphics used directly by the XML files. In this case, only start-view.xml has an image (intro.jpg). The css directory contains the stylesheet. Inside of the css directory, create a fourth directory named "images" and copy the graphics -- bg_diagonal_blue and e_exam_head -- used by the CSS file. Also included is an optional Perl script (process.pl) that collects the answers from the exam; if you use it, you must modify this file to correspond to your installed Perl interpreter and specified URL on your web server. You also need to install the CGI.pm Perl script. When your setup is finished, open the HTML file in Firefox, IE, or other browser.

When you first run the program, the introductory page appears. Clicking the Start button causes the program to present questions and possible answers from the XML files; see Figure 1. At the end of the questions, the last page gives users a chance to review or submit answers to the server. Upon submission, the Perl script sends a "thank you" message to the browser.

Figure 1

The HTML file contains the embedded SWF file. It also passes (via the FlashVars variable) four parameters to the SWF: the names of the question and the answer XML files, the header (exam title), and the URL that contains the code that processes the answers. These four parameters can also be hard-coded directly inside the SWF. The SWF reads the questions and answers XML files for database information. Styling is mainly handled by the CSS file, with additional parameters supplied by test-view.xml and submit-view.xml, where necessary.

Modifying the UI

You can modify the UI by changing parameters in the XML and CSS files. The database XML files are easy to modify -- just change the content of the questions and/or answers. You can also increase or decrease the number of questions; 18 is the maximum. Modifying the CSS file is straightforward if you are familiar with stylesheets; however, modifying the UI for the test requires some explanation.

Listing One (test-view.xml) generates the bulk of the UI for the exam. The first few sections display styling information not handled by the CSS stylesheet; it sets default color schemes and fonts, for example. These sections are prefaced by the tag "style", and must appear at the beginning of the file.

<?xml version="1.0"?>
<xleff>
<!--begin style area-->	
	<color name="examThemeColor" rgb="0xEEEEEE" />
	<color name="examThemeColor2" rgb="0xFF9933" />
	<color name="examLightTextColor" rgb="0xFFFFFF" />
	<color name="examTextColor" rgb="0x5078A5" />
	<color name="examDarkTextColor" rgb="0x000000" />
	<color name="examDisabledColor" rgb="0xDDDDDD" />
	
	<style name="examNormal">
	    <property name="themeColor">
			<value>examThemeColor</value>
		</property>
			<property name="color">
			<value>examDarkTextColor</value>
		</property>
		<property name="fontFamily">
			<value>Arial</value>
		</property>
		<property name="fontSize">
			<value type="Number">12</value>
		</property>
	</style>
	<style name="SubFormStyle">
		<property name="backgroundColor">
			<value>examThemeColor</value>
		</property>
		<property name="fontFamily">
			<value>Arial</value>
		</property>
		<property name="fontSize">
			<value type="Number">12</value>
		</property>
	</style>
	<style name="SubFormStyle2">
		<property name="backgroundColor">
			<value>examThemeColor2</value>
		</property>	
		<property name="color">
			<value>examLightTextColor</value>
		</property>
		<property name="fontFamily">
			<value>Arial</value>
		</property>
		<property name="fontSize">
			<value type="Number">12</value>
		</property>
	</style>
	<style name="examFontInput1">
	<property name="color">
			<value>examLightTextColor</value>
		</property>
		<property name="fontSize">
			<value type="Number">12</value>
		</property>
		<property name="fontWeight">
			<value>bold</value>
		</property>
	</style>
	<style name="examFontInput2">
	<property name="color">
			<value>examTextColor</value>
		</property>
		<property name="fontWeight">
			<value>bold</value>
		</property>
		<property name="fontSize">
			<value type="Number">12</value>
		</property>
	</style>
	<style name="Label">
		<property name="color">
			<value>examDarkTextColor</value>
		</property>
		<property name="fontFamily">
			<value>Arial</value>
		</property>
		<property name="fontWeight">
			<value>bold</value>
		</property>
		<property name="fontSize">
			<value type="Number">13</value>
		</property>
	</style>
<!--end style area-->
<stage>
<!--begin form area-->
<form name="HeaderForm" styleName="SubFormStyle2" x="0" y="0" width="750" height="20" transparentBackground="false">
<textarea name="header_ta" x="10" y="0" width="750" height="20" editable="false" html="true">
</textarea>
</form>
<form name="StartForm" styleName="SubFormStyle" x="0" y="20" width="740" height="460" transparentBackground="false"> 
    <loader name="startHolder_ldr" x="0" y="0" contentPath="images/intro.jpg" scaleContent="false" />
	</form>  
<form name="StartFormNavigation" styleName="SubFormStyle" x="0" y="20" width="740" height="40" transparentBackground="true"> 
	<button name="start_btn" styleName="Label" visible="true" x="650" y="405" width="92" height="27" lbl="START >>" />
	</form>  
<form name="QuestionsForm" styleName="SubFormStyle" x="0" y="40" width="750" height="40"  transparentBackground="false" visible="false">
 	<label name="question_lbl" x="23.3" y="1.4" width="30" height="22"  text=""/>
	<textarea name="question_ta" x="47.3" y="0" width="700" height="40" wordWrap="true" editable="false" html="true">
	</textarea>
</form>		
<form name="AnswersForm" styleName="SubFormStyle" x="0" y="85" width="750" height="340" transparentBackground="true" visible="false">
	<checkbox name="myCheck1" lbl="" x="15.0" y="15.4" width="30" height="16" />
	<radiobutton name="myRadio1" lbl="" group="ansrsRadioGrp" x="15.0" y="15.4" width="30" height="16" />
	<textarea name="answers1_ta" x="47.3" y="15.4" width="360" height="40" wordWrap="true" editable="false" html="true">
	</textarea>
	<checkbox name="myCheck2" lbl="" x="15.0" y="55.4" width="30" height="16" />
	<radiobutton name="myRadio2" lbl="" group="ansrsRadioGrp" x="15.0" y="55.4" width="30" height="16" />
	<textarea name="answers2_ta" x="47.3" y="55.4" width="360" height="40" wordWrap="true" editable="false" html="true">
	</textarea>
	<checkbox name="myCheck3" lbl="" x="15.0" y="95.4" width="30" height="16" />
	<radiobutton name="myRadio3" lbl="" group="ansrsRadioGrp" x="15.0" y="95.4" width="30" height="16" />
	<textarea name="answers3_ta" x="47.3" y="95.4" width="360" height="40" wordWrap="true" editable="false" html="true">
		</textarea>		
    <checkbox name="myCheck4" lbl="" x="15.0" y="135.4" width="28" height="16" />
	<radiobutton name="myRadio4" lbl="" group="ansrsRadioGrp" x="15.0" y="135.4" width="28" height="16" />
	<textarea name="answers4_ta" x="47.3" y="135.4" width="360" height="40" wordWrap="true" editable="false" html="true">
	</textarea>
    <checkbox name="myCheck5" lbl="" x="15.0" y="175.4" width="30" height="16" />
	<radiobutton name="myRadio5" lbl="" group="ansrsRadioGrp" x="15.0" y="175.4" width="30" height="16" />
	<textarea name="answers5_ta" x="47.3" y="175.4" width="360" height="40" wordWrap="true" editable="false" html="true">
	</textarea>
<textarea name="ansrText_ta" text="" styleName="examNormal" x="47.3" y="15.4" width="570" height="200" wordWrap="true" editable="false">
	</textarea>
  </form>	
<form name="NavigationForm" styleName="SubFormStyle" x="0" y="360" width="750" height="35" transparentBackground="false" visible = "false">	
	<button name="previous_btn" styleName="Label" visible="true" x="280" y="3.4" width="92" height="27" lbl="<< Previous" />
	<button name="next_btn" styleName="Label" visible="true" x="390" y="3.4" width="92" height="27" lbl="Next >>" />
	<!--unrem below to use last button-->
	<!--<button name="last_btn" styleName="Label" visible="true" x="370" y="43.4" width="92" height="27" lbl="Last" />-->
 </form>
  <form name="SubmissionForm" styleName="examNormal" x="100" y="100" width="750" height="40" visible="false">
<textarea name="submission_ta" x="50" y="50.4" width="500" height="40" editable="false" html="true">
                 <content>To review your answers click Review Answers or click Submit Answers if you are done</content>
</textarea>
<textarea name="end_ta" x="200" y="50.4" width="500" height="40" editable="false" html="true" visible = "false">
</textarea>
<button name="submission_btn" styleName="Label" visible="true" x="120" y="272.4" width="152" height="27" lbl="Submit Answers" />	
 <button name="review_btn" styleName="Label" visible="true" x="305" y="272.4" width="160" height="27" lbl="<< Review Answers" />	
</form>		
 <!--unrem below to use debugging grids-->
<!--<form name="GridForm" styleName="SubFormStyle" x="530" y="0" width="160" height="460">	 
<datagrid name="questions_dg" styleName="examText" x="10.3" y="5.4" width="210" height="120" />
<datagrid name="answers_dg" styleName="examText" x="10.3" y="130.3" width="210" height="120" />
<datagrid name="answerHold_dg" styleName="examText" x="10.3" y="260" width="210" height="120" />
 </form>-->
<!-- end form area-->	
</stage>
</xleff>

Listing One

The following sections are basic holders called "forms" -- one each for the header, the introduction, test questions, possible test answers, navigation buttons, and the submission. The header, which appears on each part of the test, is the name of the exam and can be deleted. The introductory start form appears at only the beginning of the test, and holds the button that starts the exam. The other forms appear throughout the test--except for the submission form, which appears only on the last page and which holds the Submission and Review buttons.

Listing One allows for three components to be used for answering -- radio buttons, checkboxes, and text areas. The default number of questions on a single page is 10, but you can modify this.

Certain properties, such as the name group and transparent background setting on the XML files, must not be changed since they're required by the SWF. However, you can change properties relating to appearance and geometry:

  • Appearance. The XML files' default appearances for components not handled by the stylesheet are set by the style tags at the top of the file. They include font properties (size, color, weight, and name), the background color of the forms, and text properties of the buttons.
  • Properties set by the forms are the default for the objects inside them. These can be overridden by setting individual properties on the components. For example, QuestionsForm has a style set by the section SubFormStyle. Normally, the two components would inherit these properties, but they have been overridden. The label font is set by examFontInput1, and the text area has been overridden by exam.css.
  • Geometry includes properties such as x/y position, height, and width. The forms are positioned relative to the page, and the components inside are positioned relative to the respective forms. Practice by changing a property and then refreshing the HTML page. You can also delete a component.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 
Dr. Dobb's TV