NDE Adobe Flex Instructions

(1)

NDE Adobe Flex Instructions

Introduction

Prior to release 1.2 of NeSS Data Exchange, Adobe Flex clients could not access the service.

Configurational changes have now been applied to resolve this problem, and a sample client supplied. Calling a web service from Adobe Flex is simpler if it can be invoked via a URL (HTTP GET) rather than using a POSTed SOAP request. In version 2.0 of NeSS Data Exchange (scheduled to be released in February 2010) you will be able to build clients using the REST-like NDE Lite service, and we will supply an example application.

Access via SOAP

Declare web service and delivery operation (so we can modify its settings): private var ws:WebService = new WebService();

private var childAreaTabs:Operation = new Operation();

Initialise service, including adding the security header with logon details (code supplied): ws.loadWSDL(url + "/NeSSDeliveryBindingPort?wsdl")

ws.addEventListener(FaultEvent.FAULT, getFault)

ws.addHeader(UtilHelper.setHeader(userid, password))

For the discovery queries, we can accept an object returned (the default) but for delivery we want e4x instead:

ws.addEventListener(ResultEvent.RESULT, getChildAreaTablesResult)

var req:Object = new Object()

req.Datasets = datasetId

req.ParentAreaId = areaId

childAreaTabs = new Operation(null,"getChildAreaTables"); childAreaTabs.resultFormat ="e4x";

ws.operations = [childAreaTabs];

childAreaTabs.send(req);

Access via REST (scheduled to be released in February 2010): This is a much simpler point and shoot:

<mx:HTTPService id="httpService"

url="http://www.neighbourhood.statistics.gov.uk/nde/Deli/getChildAreaTables?Datasets=15 7&ParentAreaId=276980" result="httpServiceResultEventHandler(event)"

fault="httpServiceFaultEventHandler(event)" resultFormat="e4x" /> Security

The web service now has a crossdomain.xml file which permits universal access to NDE from Flash applications deployed to web sites. The settings are very permissive so you should not get security errors. If so, please report them to Better Info@ONS or post them on the NeSS Data Exchange google group.

(2)

It is also likely that the client will have to be “trusted”. When running inside Adobe Flex, applications are automatically trusted. However, when running the compiled SWF locally, the user may well have to explicitly trust the SWF file using the web-based Flash Player settings manager...

(3)

The Demo Client

The Adobe Flex Client aims to show users of the NeSS Data Exchange how to call the SOAP webservice, manipulate the results and display in a variety of different ways.

Getting the code into Flex

1. Save the NDE Client Zip file (NDE_Flex_Client_1_2.zip) to your file system 2. In Adobe Flex Builder File>Import>Flex Project

3. Choose location of archive and project

4. Finish – Code will be imported into your Flex Builder Application 5. Expand NDE_Flex_Client_1_2/src folder

5. Edit client.as to your username and password

line29:private const USERID:String = "username"; line30:private const PASSWORD:String = "userpass"; 6. Run NDE.mxml

(4)

Building the XML Object

On running the NeSS Data Exchange Web Service you are presented with a blank dashboard that awaits the selection of Area and Dataset.

The selection lists have been populated by running the discovery methods getAreaChildren(areaId) and getDatasetFamilies(subjected, areaId). In this client these two methods are run for areaId 276722 (Hampshire) and subjectId 15 (2001 Census: Key Statistics).

On selection of the ‘Get Data’ button the NDE WebService runs the delivery method

getChildAreaTables(dataSetId, areaId) and returns to the client a dataArray containing results in the LGDX format. This format has a rigid structure and code in getDataItemResults() loops through the dataArray to build a basic ArrayCollection which is passed through to the three display methods. The three display methods

The Flex client implements three display methods, an OLAPCube rendered in an OLAPDataGrid, a basic Bar Chart and a Choropleth (Thematic) map.

1. OLAPDataGrid:

The OLAPDataGrid control lets you aggregate large amounts of data for easy display and

interpretation. The control supports a two-dimensional grid layout, where the columns and rows of the control can display a single level of information, or you can create hierarchical rows and columns to display more complex data.

http://livedocs.adobe.com/flex/3/html/help.html?content=olapdatagrid_9.html

In this client the OLAPDataGrid is rendered after the dataArray has been returned from the webservice. At this point the system also kicks off the chart and map process passing, as default, the first column and row.

(5)

2. BarChart:

You use the BarChart control to represent data as a series of horizontal bars whose length is determined by values in the data. You can use the BarChart control to represent a number of chart variations, including clustered bars, overlaid, stacked, 100% stacked, and high-low areas. For more information, see Stacking charts:

http://livedocs.adobe.com/flex/3/html/help.html?content=olapdatagrid_9.html

The bar chart implementation in the Flex Client takes all items in the selected row and charts them for the geographical area chosen.

(6)

3. Thematic Map:

The thematic map is based on a choropleth map component that can be found on the Adobe website:

http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&loc=en_us&extid=1 828523

It plots a map and then applies a theme to the various regions of the map. Relevant data and legend information needs to be provided to the component. The component also provides tooltips on specific regions and provides an “Active Legend” that lets you highlight and hide/unhide specific regions of the map based on the data and legend.

Thematic code is found under NDE_Flex_Client_1_2/src/net/srirangan/gis The original code has been extended in the following ways:

1. Extend the polygon.as to allow the use of the OSGB36 Easting/Northing coordinate system. 2. To work with multiple geographical areas by use of boundaries stored in the boundaries.as

file.

3. Extend the polygon.as to recalculate scale depending on size of area to be mapped. 4. To allow use of a dynamically created legend.

The thematic map implementation in the Flex Client takes all geographical areas in the selected row and maps them for the data type chosen.