You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bu...@apache.org on 2014/04/04 03:17:30 UTC

svn commit: r904814 [7/7] - in /websites/staging/flex/trunk: cgi-bin/ content/ content/css/ content/flexunit/tutorial/css/ content/flexunit/tutorial/flexunit/ content/flexunit/tutorial/scripts/

Added: websites/staging/flex/trunk/content/flexunit/tutorial/flexunit/Unit-9.html
==============================================================================
--- websites/staging/flex/trunk/content/flexunit/tutorial/flexunit/Unit-9.html (added)
+++ websites/staging/flex/trunk/content/flexunit/tutorial/flexunit/Unit-9.html Fri Apr  4 01:17:29 2014
@@ -0,0 +1,494 @@
+<!DOCTYPE html>
+<!--[if IE 7 ]><html class="ie ie7" lang="en"><![endif]-->
+<!--[if IE 8 ]><html class="ie ie8" lang="en"><![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
+
+<head>
+
+    <meta charset="utf-8">
+    <title>Apache Flex® - Unit 9 - External Data
</title>
+
+    <!-- For Mobiles  -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link href='https://fonts.googleapis.com/css?family=Carrois+Gothic' rel='stylesheet' type='text/css'>
+    <!-- CSS -->
+    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
+    <link rel="stylesheet" type="text/css" href="/css/fixed-width.css" id="layout">
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
+
+    <!-- Java Script  -->
+    <script src="/js/jquery.js"></script>
+    <script src="/js/custom.js"></script>
+    <script src="/js/selectnav.js"></script>
+    <script src="/js/flexslider.js"></script>
+    <script src="/js/twitter.js"></script>
+    <script src="/js/fancybox.js"></script>
+    <script src="/js/isotope.js"></script>
+    <script src="/js/bootstrap.js"></script>
+    <script src="/js/showcase.js"></script>
+
+    <!-- Google Analytics -->
+    <script type="text/javascript">
+
+        var _gaq = _gaq || [];
+        _gaq.push(['_setAccount', 'UA-37926454-1']);
+        _gaq.push(['_trackPageview']);
+
+        (function() {
+            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+        })();
+
+    </script>
+
+
+</head>
+<body>
+
+<!-- Wrapper Start -->
+<div id="wrapper" class="container-fluid">
+
+
+    <!-- Header -->
+
+
+    <div class="ie-dropdown-fix" >
+
+        <!-- Header -->
+        <div class="row-fluid" id="header">
+
+            <!-- Logo -->
+            <div class="span5">
+
+                <a href="#"><img src="/images/logo_01_fullcolor-sm.png" alt="Apache Flex®" title="Apache Flex®" /></a>
+
+            </div>
+
+            <!-- Social / Contact -->
+            <div class="span3 pull-right">
+
+                <!-- Social Icons -->
+                <ul class="social-icons">
+                    <li class="facebook"><a href="https://www.facebook.com/pages/Apache-Flex/174249699342648">Facebook</a></li>
+                    <li class="twitter"><a href="http://twitter.com/ApacheFlex">Twitter</a></li>
+                    <li class="linkedin"><a href="http://www.linkedin.com/groups/Apache-Flex-Developers-4296888">LinkedIn</a></li>
+                </ul>
+
+                <!-- Apache Logo -->
+                <a href="http://www.apache.org" id="contact-top"><img src="http://www.apache.org/images/feather-small.gif" title="An Apache Project" alt="An Apache Project" /> </a>
+            </div>
+
+        </div>
+        <!-- Header / End -->
+
+        <!-- Navigation -->
+        <div id="navigation" class="margintop">
+            <ul id="nav">
+
+                <li><a href="index.html">Home</a></li>
+
+                <li><a href="#">About Flex</a>
+                    <ul>
+
+                        <li><a href="/about-whatis.html">What is Flex?</a></li>
+                        <li><a href="/about-features.html">Features</a></li>
+                        <li><a href="/about-licensing.html">License &amp; Trademarks</a></li>
+                        <li><a href="/about-people.html">The Team</a></li>
+                        <li><a href="/about-history.html">Project History</a></li>
+                        <li><a href="/about-assets.html">Logo and Assets</a></li>
+                    </ul>
+                </li>
+                <li><a href="#">Community</a>
+                    <ul>
+
+                        <li><a href="/community-getinvolved.html">How to get involved</a></li>
+                        <li><a href="/community-mailinglists.html">Mailing Lists</a></li>
+                        <li><a href="/community-showcase.html">Flex Showcase</a></li>
+						<li><a href="/community-3rdparty.html">Third-Party</a></li>
+                        <li><a href="https://cwiki.apache.org/confluence/display/FLEX/Apache+Flex+Wiki">Wiki <i class="icon-share icon-white"></i></a></li>
+                        <li><a href="http://blogs.apache.org/flex/">Blog <i class="icon-share icon-white"></i></a></li>
+                    </ul>
+                </li>
+
+                <li><a href="#">Development</a>
+                    <ul>
+                        <li><a href="/dev-faq.html">Developer FAQ</a></li>
+                        <li><a href="/dev-sourcecode.html">Source Code</a></li>
+                        <li><a href="https://issues.apache.org/jira/browse/FLEX">Bug-Tracker <i class="icon-share icon-white"></i></a></li>
+                    </ul>
+                </li>
+
+                <li><a href="#">Documentation</a>
+                    <ul>
+
+                        <li><a href="/doc-getstarted.html">Getting Started</a></li>
+                        <li><a href="/doc-videos.html">Videos</a></li>
+                        <li><a href="/asdoc/">ASDocs</a></li>
+                        <li><a href="http://help.adobe.com/en_US/flex/using/index.html">Documentation Reference (Old) <i class="icon-share icon-white"></i></a></li>
+
+                    </ul>
+                </li>
+
+                <li><a href="#">About Apache</a>
+                    <ul>
+
+                        <li><a href="http://www.apache.org">The Apache Software Foundation Website <i class="icon-share icon-white"></i></a></li>
+                        <li><a href="http://www.apache.org/foundation/contributing.html">Donations <i class="icon-share icon-white"></i></a></li>
+                        <li><a href="http://www.apache.org/foundation/sponsorship.html">Sponsorship <i class="icon-share icon-white"></i></a></li>
+                        <li><a href="http://www.apache.org/foundation/thanks.html">Thanks <i class="icon-share icon-white"></i></a></li>
+                    </ul>
+                </li>
+
+                <li><a href="#" class="download">Download</a>
+                    <ul>
+
+                        <li><a href="/installer.html">Download the SDK Installer (For Application Developers)</a></li>
+                        <li><a href="/download-binaries.html">Download the SDK Binaries (For SDK Developers)</a></li>
+                        <li><a href="/download-source.html">Download the SDK Source Code (For SDK Developers)</a></li>
+                        <li><a href="/download-utilities.html">Download Utilities</a></li>
+                        <li><a href="/download-archive.html">Previous Versions</a></li>
+                    </ul>
+                </li>
+            </ul>
+
+        </div>
+        <div class="nav-shadow"></div>
+        <div class="clear"></div>
+
+    </div>
+    <!-- Navigation / End -->
+
+
+    <!-- Content -->
+
+    
+    <div class="row-fluid">
+
+
+        <!-- Page Title -->
+        <div id="page-title">
+            <h2>Unit 9 - External Data
</h2>
+        </div>
+        <!-- Page Title / End -->
+
+
+    </div>
+    
+
+    <div class="row-fluid">
+
+
+
+<!-- Home Page Exception -->
+
+
+<p><a href="../code/unit9.zip"><img src="../images/DownloadIcon.png" alt="Download" /> Download Unit Project Files</a></p>
+<p>For the sake of optimization or integration, large or complicated sets of data are often easier to manage within external files. FlexUnit 4.x provides support for external data in Theories as well as Parameterized tests, which you will learn to use in Unit 11.</p>
+
+<h3>Objectives:</h3>
+
+<p>After completing this lesson, you should be able to:</p>
+
+<ul>
+    <li>Load external data points from an XML file into the FlexUnit testing environment</li>
+</ul>
+
+<h3>Topics</h3>
+
+<p>In this unit, you will learn about the following topics:</p>
+
+<ul>
+    <li>Understanding asynchronous loading</li>
+    <li>Loading external data</li>
+    <li>Discussion on data typing and conversion</li>
+</ul>
+
+<h2>Understanding asynchronous loading</h2>
+
+<p>The large collections of data points that accompany theories can become increasingly difficult to maintain as the number of tests in your system grows. Additionally, in some circumstances, you may want to generate the data used for your data points in a different application or system.</p>
+
+<p>In these cases, you will want to switch to external data. External data has the advantage of being maintained external to the tests, making maintenance easier and increasing the legibility of test cases.</p>
+
+<p><p>However, external data presents a particular problem in Flash-based testing. Flash is a single-threaded machine that uses asynchronous communication for all remote data access. It does not have the ability to access data synchronously nor the ability to suspend a process until data arrives.</p>
+<p>This means the test runners will need to wait for a server response before parsing the returned data into datapoints before beginning the test process.</p><br />
+<p>While you could load all of the data for your system external to the testing framework before testing ever begins, you now lose some of the flexibility, or at least the performance, inherent in the ability to pick and choose test cases or suites and only load the data that is required.</p>
+<p>To resolve these issues, FlexUnit 4 offers the concept of External Dependency Loaders. An External Dependency Loader allows the loading of external data in a test.</p></p>
+<h2>Loading external data</h2>
+
+<p>As every source of data for every user of FlexUnit is slightly different, you are required to write a simple class that understands how to load and parse your test data. This class implements the IExternalDependencyLoader interface and is used to load all data into FlexUnit.</p>
+
+<p><p>This interface has one required method: retrieveDependency(). This method returns an ExternalDependencyToken. During startup of the testing process, FlexUnit looks for IExternalDependencyLoaders and invokes this method.</p> 
+<p>Internal to this method, you are responsible for making any server calls and loading any data. Once the operation has been completed, in either a result or fault, you are responsible for notifying the framework that it is now safe to begin testing.</p>
+<p>Here is an example of the retreiveDependency function and the associated result and fault handlers that uses an HTTPService to retrieve data:</p></p>
+<p><code><pre>public function RadiiDataHelper( url:String ) {
+    service = new HTTPService();
+    service.url = url;
+    service.resultFormat = "e4x";</p>
+<div class="codehilite"><pre><span class="n">dToken</span> <span class="p">=</span> <span class="n">new</span> <span class="n">ExternalDependencyToken</span><span class="p">();</span>
+</pre></div>
+
+
+<p>}</p>
+<p>public function retrieveDependency( testClass:Class ):ExternalDependencyToken {
+    var asyncToken:AsyncToken = service.send();
+    asyncToken.addResponder( this );</p>
+<div class="codehilite"><pre><span class="k">return</span> <span class="n">dToken</span><span class="p">;</span>
+</pre></div>
+
+
+<p>}</p>
+<p>public function result( data:Object ):void {
+    var ar:Array = new Array();</p>
+<div class="codehilite"><pre><span class="n">var</span> <span class="n">list</span><span class="p">:</span><span class="n">XMLList</span> <span class="p">=</span> <span class="n">data</span><span class="p">.</span><span class="n">result</span><span class="p">..</span><span class="n">node</span><span class="p">;</span>
+<span class="n">var</span> <span class="n">node</span><span class="p">:</span><span class="n">XML</span><span class="p">;</span>
+
+<span class="k">for</span> <span class="p">(</span> <span class="n">var</span> <span class="nb">i</span><span class="p">:</span><span class="n">int</span> <span class="p">=</span> 0<span class="p">;</span> <span class="nb">i</span> <span class="o">&amp;</span>#60<span class="p">;</span> <span class="n">list</span><span class="p">.</span><span class="nb">length</span><span class="p">();</span> <span class="nb">i</span><span class="o">++</span> <span class="p">)</span> <span class="p">{</span>
+    <span class="n">node</span> <span class="p">=</span> <span class="n">list</span><span class="p">[</span> <span class="nb">i</span> <span class="p">][</span> 0 <span class="p">];</span>
+    <span class="n">ar</span><span class="p">.</span><span class="n">push</span><span class="p">(</span> <span class="n">Number</span><span class="p">(</span> <span class="n">node</span><span class="p">.</span><span class="n">text</span><span class="p">()</span> <span class="p">)</span> <span class="p">);</span>
+<span class="p">}</span>
+
+<span class="n">dToken</span><span class="p">.</span><span class="n">notifyResult</span><span class="p">(</span> <span class="n">ar</span> <span class="p">);</span>
+</pre></div>
+
+
+<p>}</p>
+<p>public function fault(info:Object):void {
+    dToken.notifyFault( "Totally broken" );
+}</pre></code></p>
+<p>In this loader:</p>
+
+<ol>
+    <li><p>Loader is instantiated with a new HTTPService.</p></li>
+    <li><p>retrieveDependency() makes the external HTTP call, returning the loaders ExternalDependencyToken.</p></li>
+    <li><p>If the call is successful, the result function parses the data into an array (datapoints expect an array) and calls notifyResult() on the ExternalDependencyToken passing the datapoint array.</p></li>
+    <li><p>If the call fails, the fault function calls notifyFault() on the token, passing a useful error message.</p></li>
+    <li><p>If neither notifyResult() nor notifyFault() are called on the token the runner will stall indefinitely as it is impossible for the testing framework to identify a reasonable delay for your situation. This makes it extremely important to handle both cases.</p></li>
+</ol>
+
+<p>To use an external loader you must instantiate the loader and assign it to a public static variable in the test case. Constructor args are used to provide any additional configuration information to the loader.</p>
+
+<p><code><pre>public static var testLoader:IExternalDependencyLoader = new MyLoader(" myData.xml" );</pre></code>
+<p>You then need to create the datapoints array. However, instead of instantiating the array, as you had in previous lessons, you will specify a loader argument on the DataPoints metadata tag. The runner knows how to handle this attribute and ensure your loader is invoked.</p></p>
+<p><code><pre>[DataPoints(loader="testLoader")]
+[ArrayElementType("Number")]
+public static var radii:Array;</pre></code></p>
+<p>Once the data points are loaded, your test case will use them as if they were statically coded into the test case.</p>
+
+<h2>Walkthrough 1: Moving Theory Data to an External Source</h2>
+
+<p>In this walkthrough you will perform the following tasks:</p>
+
+<ul>
+    <li>Load radii data points from an external source.</li>
+</ul>
+
+<h3>Load the external data</h3>
+
+<ol>
+    <li>
+        <p>Import the FlexUnit4Training_wt1.fxp project from the Unit 9/Start folder. If you completed the previous walkthrough, choose the option to Overwrite your existing project. If this is your first Flex Unit 4 Training walkthrough, import it as a new project.  Please refer to Unit 2: Walkthrough 1 for instructions on importing a Flash Builder project.</p>
+        <p>The new FlexUnit4Training_wt1 project contains everything that all the walkthroughs up until this point have taken you through.It also includes several new files and additional dependencies to help you through the current walkthrough.</p>
+    </li>
+    <li>
+        <p>Open the CircleTheory.as file in the math.testcases package within the tests directory.</p>
+    </li>
+    <li>
+        <p>Add a public static variable named <code>radiiLoader</code> of type <code>RadiiDataHelper</code> to the CircleTheory class. It should instantiate a <code>RadiiDataHelper</code> object with the argument <code>"xml/radii.xml"</code>.</p>
+
+        <code><pre>public static var radiiLoader:RadiiDataHelper 
+    = new  RadiiDataHelper( "xml/radii.xml" );</pre></code>
+
+        <p>If you did not use code-completion, add the import for helper.RadiiDataHelper at this time. RadiiDataHelper is the external loader and already has the logic for loading the data.</p>
+
+        <h3><br />Alter the array to use the external data</h3>
+
+        <p>Now that you are loading the radii data from an external source the <code>radii</code> variable no longer requires the static values. The <code>radii</code> variable must also be marked with <code>[DataPoints(loader="radiiLoader")] metadata</code>.</p>
+    </li>
+    <li>
+        <p>Modify the radii array so that it has <code>[DataPoints(loader="radiiLoader")]</code> metadata.</p>
+
+        <code><pre>[DataPoints]
+[ArrayElementType("Number")]
+public static var radii:Array = [ -5, 1,2,3,4,5,6,7,8,9,10 ];</pre></code>
+
+        <p>Becomes:</p>
+
+        <code><pre>[DataPoints(loader="radiiLoader")]
+[ArrayElementType("Number")]
+public static var radii:Array;</pre></code>
+
+    </li>
+    <li>
+        <p>Save CircleTheory.as.</p>
+
+        <h3><br />Examing the loader class</h3>
+    </li>
+    <li>
+        <p>Open the RadiiDataHelper.as file in the helper package within the tests directory.</p>
+        <p>To get an idea of how the loader class retrieves the data, you are going to setup breakpoints in the RadiiDataHelper class. As a result, you will get a chance to examine the data before it is parsed into the theory.</p>
+    </li>
+    <li>
+        <p>In Flash Builder add a breakpoint within the RadiiDataHelper constructor at the line that reads: <code>dToken = new ExternalDependencyToken();</code></p>
+
+        <img alt='AddingBreakpoint' id='shift' src='../images/unit9/image1.png' /> 
+        <p class='caption' id='shift'>Figure 1: Adding a breakpoint to the constructor</p>
+    </li>
+    <li>
+        <p>Add another breakpoint within the <code>retrieveDependency()</code> method at the line that reads <code>var asyncToken:AsyncToken = service.send();</code></p>
+
+        <img alt='AddingBreakpoint' id='shift' src='../images/unit9/image2.png' /> 
+        <p class='caption' id='shift'>Figure 2: Adding a breakpoint to the retrieveDependency() method</p>
+    </li>
+    <li>
+        <p>Add a breakpoint within the <code>fault()</code> method at the line that reads: <code>dToken.notifyFault( "Totally Broken" );</code></p>
+
+        <img alt='AddingBreakpoint' id='shift' src='../images/unit9/image3.png' />
+        <p class='caption' id='shift'>Figure 3: Adding a breakpoint to the fault() method,</p>
+
+        <p>Ideally, you shouldn't hit the breakpoint within the <code>fault()</code> method, but if the loader has a problem retrieving the data, you will know before the tests are even run.</p>
+    </li>
+    <li>
+        <p>Finally, add a breakpoint within the <code>result()</code> method at the line that reads: <code>dToken.notifyResult( ar );</code></p>
+
+        <img alt='AddingBreakpoint' id='shift' src='../images/unit9/image4.png' /> 
+        <p class='caption' id='shift'>Figure 4: Adding a breakpoint within the <code>result()</code> method</p>
+    </li>
+    <li>
+        <p>Switch Flash Builder over to debug view using the selector in the upper-right-hand corner.</p>
+
+        <img alt='FlashDegub' id='shift' src='../images/unit9/image5.png' />
+        <p class='caption' id='shift'>Figure 5: Flash Debug view</p>
+    </li>
+    <li>
+        <p>In the expressions tab, which should appear in the upper-right-hand corner by default, add a new watch expression by right-clicking on the whitespace.</p>
+
+        <img alt='WatchExpression' id='shift' src='../images/unit9/image6.png' />
+        <p class='caption' id='shift'>Figure 6: Adding a watch expression</p>
+    </li>
+    <li>
+        <p>The expression being watched should be list, which is the returned data converted to an XMLList object.</p>
+
+        <img alt='NewWatch' id='shift' src='../images/unit9/image7.png' />
+        <p class='caption' id='shift'>Figure 7: New watch expression</p>
+    </li>
+    <li>
+        <p>Add another watch expression for the <code>ar</code> variable, which is the parsed array that the <code>RadiiDataHelper</code> returns as data points.</p>
+    </li>
+    <li>
+        <p>Run the FlexUnit4Training.mxml file in debug mode.</p>
+    </li>
+</ol>
+
+<p>If the FlexUnit4Training.mxml file runs successfully, it should take you through each breakpoint except for the one placed in the <code>fault()</code> method.</p>
+
+<p>When you reach a breakpoint, press F8 or the play button to move on.</p>
+
+<p>The first breakpoint illustrates the instantiation of the ExternalDependencyToken, which is responsible for notifying FlexUnit whether the data is return or there is a fault.</p>
+
+<p>The next breakpoint illustrates the sending of the HTTPService.</p>
+
+<p><p>When you reach the third breakpoint, on the <code>dToken.notifyResult( ar );</code> line, the list watch expression should show that list is equal to an XMLList whose values can be expanded and evaluated in the Expressions tab.</p></p>
+<p><img alt='ExpressionList' src='../images/unit9/image8.png' />
+<p class='caption'>Figure 8: The list expression in the Expressions tab</p></p>
+<p>The ar expression is the parsed array created in the <code>result()</code> method from the <code>XMLList</code>.</p>
+
+<p><img alt='ArExpression' src='../images/unit9/image9.png' />
+<p class='caption'>Figure 9: The ar expression in the Expressions tab</p></p>
+<p>After running through the last breakpoint, you should see the following in your browser window.</p>
+
+<p><img alt='TestsPassed' src='../images/unit9/image10.png' /> 
+<p class='caption'>Figure 10: FlexUnit tests passed</p></p>
+<p>The radii.xml file contains the same values previously declared within the radii array. There is no change in operation, because the externally loaded values are interacting with the test in the same way, but having the data externalized makes it easy to modify the tests to run with different values, without having to re-compile the tests.</p>
+
+<h2>Summary</h2>
+
+<ul>
+    <li><p>Loading external data is an inherently asynchronous process.</p></li>
+    <li><p>For external data to be passed in as DataPoints, the data must be loaded with a loader class.</p></li> 
+    <li><p>Loader methods, datapoints, and datapoint collections must be declared as static variables.</p></li>
+</ul>
+
+<h2>Navigation</h2>
+
+<ul>
+    <li><a href="Unit-8.html">Unit 8 - FlexUnit Theories</a></li>
+    <li><a href="Unit-10.html">Unit 10 - Mock Classes</a></li>
+    <li><a href="../index.html">Table of Contents / Introduction</a></li>
+</ul>
+
+<!-- Home Page Exception -->
+
+
+
+
+</div></div>
+<!-- Wrapper / End -->
+
+
+<!-- Footer -->
+
+<!-- Footer Top -->
+<div id="footer" class="container-fluid paddingbottom" >
+
+
+    <div class="row-fluid">
+
+        <!-- About -->
+        <div class="span3">
+            <div class="footer-headline"><h4>About Us</h4></div>
+            <p>Apache Flex® is a highly productive, open source application framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops and devices (including smartphones, tablets and tv). It provides a modern, standards-based language and programming model that supports common design patterns suitable for developers from many backgrounds. Flex applications can be deployed to the ubiquitous Adobe® Flash® Player in the browser, Adobe® AIR™ on desktop and mobile or to native Android™, IOS™, QNX®, Windows® or Mac® applications.</p>
+        </div>
+
+        <!-- Subscribe  -->
+        <div class="span3">
+            <div class="footer-headline"><h4>Subscribe</h4></div>
+            <p>We have two mailing lists, one for SDK developers, and one for SDK users.</p>
+            <p>Developers, send an email to <br>
+                <a href="mailto:dev-subscribe@flex.apache.org">dev-subscribe@flex.apache.org</a>
+            </p>
+            <p>Users, send an email to <br>
+                <a href="mailto:users-subscribe@flex.apache.org">users-subscribe@flex.apache.org</a>
+            </p>
+        </div>
+
+        <!-- Latest Releases -->
+        <div class="span3">
+            <div class="footer-headline"><h4>Latest Releases</h4></div>
+            <p>Apache Flex SDK : <a href="/download-binaries.html">4.12.0 (Mar 2014)</a><br />
+                SDK Installer : <a href="/installer.html">2.7.0 (Oct 2013)</a><br />
+                BlazeDS : <a href="http://sourceforge.net/adobe/blazeds/wiki/Home/">4.6.0 (Nov 2011)</a><br />
+                Flex Mavenizer : <a href="http://svn.apache.org/viewvc/flex/utilities/trunk/mavenizer/"> 4.8.0 (Jan 2013)</a></p>
+        </div>
+
+        <!-- Latest Tweets -->
+        <div class="span3">
+            <div class="footer-headline"><h4>Latest Tweets</h4></div>
+            <a class="twitter-timeline" href="https://twitter.com/ApacheFlex" data-chrome="noheader nofooter noborders noscrollbar" data-widget-id="364567612920852480">Tweets by Apache Flex</a>
+            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+            <div class="clear"></div>
+        </div>
+
+    </div>
+
+</div>
+<!-- Footer / Bottom -->
+<div id="footer" class="container-fluid" style="background: #111;">
+    <div class="row-fluid">
+        <div class="span12">
+            <div id="footer-bottom">
+                Copyright © 2014 The Apache Software Foundation, Licensed under the Apache License, Version 2.0 <br>
+                Apache Flex, Apache and the Apache feather logo are trademarks of The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of their respective owners.
+                Read more about our privacy policy on our <a href="about-privacy.html">Privacy Policy</a> page.
+                <div id="scroll-top-top"><a href="#" title="Go to Top"></a></div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!-- Footer / End -->
+
+</body>
+
+</html>
\ No newline at end of file