From Blue Mars Developer Guidebook

This page is protected and certified by Avatar Reality Inc. Only Editable by Avatar Reality Staff Members.

Contents 1 High Score Flex Example 2 XML Data 3 Flex Script 4 Web 5 Flash Overlay

High Score Flex Example

Flex is a convenient tool to build Flash movies that read and display XML data, so it's a natural option to display the XML high score data from our High Score Server tutorial in a table.

See also the High Score Lua Example and Flash Overlay Quick Start

XML Data

As a reminder, this is what the XML data in our basic high score example looks like.

<leaderboard>
<scores>
<score player="" score="0" />
<score player="" score="0" />
<score player="Player0" score="122" />
<score player="Player0" score="163" />
<score player="Player0" score="131" />
</scores>
</leaderboard>

Flex Script

To read this data from our high score server and display it in a two-column table, we have this Flex MXML script.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="highscores.send()">

  <mx:HTTPService id="highscores" resultFormat="e4x" url="http://workedon.com/displayxml.php"/>

    <mx:Panel title="Highscore Example" height="100%" width="100%" >

        <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{highscores.lastResult.scores.score}">
            <mx:columns>
                <mx:DataGridColumn headerText="Player" dataField="@player"/>
                <mx:DataGridColumn headerText="Score" dataField="@score"/>
            </mx:columns>
        </mx:DataGrid>

    </mx:Panel>
</mx:Application>     

Web

After we compile the MXML script with the Flex SDK and upload the resulting SWF file to our high score server, we see a nicely presented table.

From Lua, we can bring up the web page using Game.ShowPageInBrowser

Note that Flex has some built-in protection against unauthorized access of data on different web sites, so if the swf file is on a different host than the data server, that server needs to have a file named crossdomain.xml file with something like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy> 
    <site-control permitted-cross-domain-policies="all"/> 
    <allow-access-from domain="*"/> 
</cross-domain-policy>

Flash Overlay

This swf file cannot be used with the HUD as it doesn't support Flex 3 or web access from whithin the Flash file. But it can be used with the Blue Mars FlashOverlay feature.

Here's the minimum Lua code for displaying the high score swf file as a FlashOverlay

  local handler = {}
  local flash
  flash = FlashOverlay.New(handler,self.weburl)

The handler table contains callbacks that the swf file can invoke, using the Actionscript function ExternalInterface. Since we passed in an empty handler table, there are no callbacks except the default standard FlashOverlay callbacks.

The url argument is the url of the swf file, but it can also refer to a local file, e.g. Game\\Levels\MYCO\Common\Libs\UI\highscore.swf. Note again, if the swf file is local and reads data from a web site, then you need to have an appropriate crossdomain.xml file on the site.

FlashOverlay only works on the Blue Mars client, so from the Editor we have to test it with "Check City in Blue Mars" menu command. However, if we try it now, the high score display won't appear - instead, we'll see a "UI download error" popup message.

The FlashOverlay system timed-out because it's waiting for a call to the onInit callback from the Flash file. So we'll add that call to the Actionscript in to our applicationComplete attribute, which already has a snippet of Actionscript that retrieves the high score data.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="highscores.send();ExternalInterface.call('onInit')">       

It shows up now, but chances are, we want to specify its position and size. We can do this by specifying a custom onInit callback in the handler table that calls SetGeometry and Show on the FlashOverlay object.

  local handler = {}
  local flash
  function handler.onInit(res)
    flash:SetGeometry(100,100,300,400)
    flash:Show()
  end
  flash = FlashOverlay.New(handler,self.weburl)

Also, since we're not displaying this in a web browser, we'll want a Close button. So we'll add this to our Flex script.

<mx:Button label="Close" click="ExternalInterface.call('onEnd')"/>      

The Actionscript associated with the button click will call the onEnd callback of our FlashOverlay handler. If unspecified by us, the default onEnd callback will hide the display.

Here's the final Flex script.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" applicationComplete="highscores.send();ExternalInterface.call('onInit')">

  <mx:HTTPService id="highscores" resultFormat="e4x" url="http://workedon.com/displayxml.php"/>

    <mx:Panel title="Highscore Example" height="100%" width="100%" >

        <mx:DataGrid id="dg" width="100%" height="100%" dataProvider="{highscores.lastResult.scores.score}">
            <mx:columns>
                <mx:DataGridColumn headerText="Player" dataField="@player"/>
                <mx:DataGridColumn headerText="Score" dataField="@score"/>
            </mx:columns>
        </mx:DataGrid>
	<mx:Button label="Close" click="ExternalInterface.call('onEnd')"/>
    </mx:Panel>
</mx:Application>