The Sample Flex Viewer (SFV) uses a simple xml file (config.xml) for application initialization and configuration. Application properties managed by this configuration file include, among others, UI attributes such as banner, title and logo, primary menu configuration, widget management, and layer management.
It is almost a certainty that any customization will require custom configuration settings, either populated by passing in URL parameters (in a future post) or by setting custom properties in the config.xml file. These data can be captured and used by making a few changes to core classes in the SFV. This example focuses on capturing a custom attribute added to one of the existing elements, in this case, the <mapservice> element.
The ultimate goal of this example is to provide some means of categorizing map services identified in the configuration file for display in multiple instances of the livemaps widget, each containing subsets of specific map services. We will do this by adding a custom attribute to the <mapservice> element called group.
<mapservice label="map label" type="dynamic, tiled, arcims, etc" visible="true/false" alpha="0..1" group="wlci">url</mapservice>
Now, getting the data. But first, we need some background. While we won’t be using it directly in this example, it is important to mention the configData class. The configData class does nothing more than provide a place to store the configuration data. It is a collection of arrays which correspond to application functional groups such as UI, menus, maps services, widgets etc. If your intent is to create an entirely new class of configuration data, let’s say for url parameters (more on that in a later post), you would provide the framework for that data in this class. Our example is a bit simpler, we are simply adding a new attribute to an existing class.
The class that does most of the legwork is the configManager. It begins by establishing and HTTPService connection (configService) to the config.xml file and then listens for a result (ResultEvent.RESULT). The important stuff occurs in the handler for this event. Within this handler, an instance of configData is created along with an xml dataset containing the contents of config.xml:
var configData:ConfigData = new ConfigData();
var configXML:XML = event.result as XML;
It then proceeds to parse out the functional collections of data as needed. The following illustrates how it parses out <mapservice> configuration data. This pattern can be used to obtain any attributes added to the mapservice element in the config file.
//================================================
//map
var configMap:Array = [];
var mapserviceList:XMLList = configXML..mapservice;
for (i = 0; i < mapserviceList.length(); i++) {var msLabel:String = mapserviceList[i].@label;
var msType:String = mapserviceList[i].@type;
var msVisible:Boolean = true;
if (mapserviceList[i].@visible == "false")
msVisible = false;
var msAlpha:Number = 1;
if (!isNaN(mapserviceList[i].@alpha))
msAlpha = Number(mapserviceList[i].@alpha);
var msURL:String = mapserviceList[i];
var mapservice:Object =
{label: msLabel,
type: msType,
visible: msVisible,
alpha: msAlpha,
url: msURL,}
configMap.push(mapservice);}
configData.configMap = configMap;
The previous block of code begins by creating an empty array for populating local data.
var mapserviceList:XMLList = configXML..mapservice;
creates an XMLList of all nodes in the DOM hierarchy called mapservice. The XMLList can then be examined just like an array, stepping through it by using a for statement. Attributes of the elements within the XMLList are then accessed explicitly via the attribute name. For example:
var msLabel:String = mapserviceList[i].@label;
retrieves the value assigned to the label attribute for that particular mapservice node. The value of the node itself is retrieved using the following syntax:
var msURL:String = mapserviceList[i];
For each node instance, a generic object of name/values pairs is then created containing each attribute value along with the value of the node itself. That object is then added to a local array for each node instance and then is assigned to the configData instance upon parsing completion.
For this example, recall that we have added a new attribute called group to each <mapservice> element. To retrieve that value, we simply need to create and assign a new local variable with the attribute value, add it to the generic name/value pairs object and we are golden.
//================================================
//map
...
for (i = 0; i < mapserviceList.length(); i++)
{...
//retrieve newly added group attribute from mapservice entry
var msGroup:String = mapserviceList[i].@group;
...
var mapservice:Object =
{...
//add newly added group attribute to mapservice object
group: msGroup,}
configMap.push(mapservice);
}
configData.configMap = configMap;
Our configData instance now contains the newly added "group" attribute. Once it is completely populated, the CONFIG_LOADED event is dispatched which essentially notifies the application that the configData instance is now available for use. Using the data is even easier. All that is needed is to listen for the CONFIG_LOADED event:
SiteContainer.addEventListener(AppEvent.CONFIG_LOADED, config);
where config is a function whos argument is an event containing the data itself. It is then accessed via the following:
private function config(event:AppEvent):void
{configData = event.data as ConfigData;
}
This is done by default in the MapManager.mxml component. Have a look at the function called config is this component and you will see that pattern for obtaining data from configData.
private function config (event:AppEvent):void
{configData = event.data as ConfigData;
....
for (i = 0; i <donfigData.configMap.length; i++){
...
var url:String = confData.configMap[i].url;
...}
}
A nice feature in the Sample Flex Viewer is that the BaseWidget class (that which we extend for all new widgets) exposes the configData object by default. This means we can then obtain data parsed from the config.xml file by the ConfigManager from any widget that extends the BaseWidget. To do this, we do something similar to what the MapManager component does.
for (var i:Number = 0; i <configData.configMap.length; i++)
{
...
var group:string = configData.configMap[i].group.toString();
...}
