Customizing config.xml in the ESRI FlexViewer

If you’re relatively new to Flex (like me), you will have noticed that a lot of the functionality in this framework is geared towards WebServices and external XML calls. If you’re also a #geonerd and love Flex, you’ve probably come across the FlexViewer example on ESRI’s website. This is an awesome and very powerful example of all that Flex can give you right out of the box. The challenge here is that you have to learn how to weed though all the different classes and other bologna in order to understand exactly what is going on.

My latest challenge was deploying an application that referenced several .NET web services that were GOING to change once delivered to the customer. So, it made no sense what so ever to hard code the URL’s for the web services in the application it self. I decided to add them to config.xml which is at the root of the web application. This file behaves much in the same way as the web.config file that is created on-the-fly in your .NET web application. This one, however, holds things elements like URLs, queries, logo assignments and like in this example, paths to web services.

Once you figure out what is going on, this is relatively simple to do so I hope that this example helps to put things in to perspective for you.

First things first…You have to first grab the XML file and because this is a web application, you are able to use HTTPService() to call you file on the server. My biggest “idiot” moment was caused because this file is at the root of the application while most of the “config” files that ride along with their corresponding .swf’s are in the same directory. No matter! See the code below that will show you how to connect to your config.xml file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

private function doInit():void
{
        try {
	        var initService:HTTPService = new HTTPService();
	        initService.url = "config.xml";
		initService.resultFormat = "e4x";
		initService.addEventListener(ResultEvent.RESULT, initResult);
		initService.send();
	}
		catch(e:Error)
		{
			showMessage(e.message, false);
		}
}

Note that this function has an event lister (addEventListener) that calls another function which in this case is called “initResult”. Also note that with all Actionscript, it’s pretty good practice to use try/catch statements in all of your functions. Actually, isn’t this true in any programming language?

Now, on to the next function! This is the function that actually does the work and populates an “Object” with the data your specify from your XML file. Please note that I added an extra root node to config.xml called <ServiceURL>. Under that we have <service> and under that we’ve got <url> and <name>. I am merely trying to retrieve a URL based on a service name so if we do a query for <name>, the URL for that name will be returned. w00t! The function called “initResult” is as follows.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

private function initResult(event:ResultEvent):void
	{
		try
		{
			var i:int;
			var serviceArray:Array = [];
			var serviceXML:XML = event.result as XML;
			var serviceList:XMLList = serviceXML..service;
 
			for (i = 0; i < serviceList.length(); i++) {
				var name:String = serviceList[i].name;
				var url:String = serviceList[i].url;
				var serviceURL:Object =
				{
					name: name,
					url: url
				}
					trace(name, url);
			}
		serviceArray.push(serviceURL);
	}
			catch (e:Error)
			{
    			    showMessage(e.message, false);
			}
	}

You’ll first notice that I created an Array.

var serviceArray:Array = [];

I then grabbed the resulting event as XML from the event listener.

var serviceXML:XML = event.result as XML;

. From there I searched down through the XML file for the root node I was looking for which in this case was called “service” in the XML file:

var serviceList:XMLList = serviceXML..service;

. Finally, I looped through the file to find all the data in the tags using a *for* loop.

1
2
3
4
5
6
7
8
9
10
11

for (i = 0; i < serviceList.length(); i++) {
	var name:String = serviceList[i].name;
	var url:String = serviceList[i].url;
	var serviceURL:Object =
		{
			name: name,
			url: url
		}
	trace(name, url);
}
serviceArray.push(serviceURL);

There are a couple things to notice here.
1. You can loop through anything in an XML file…you’ve just got to know what you’re looking for.
2. It’s absolutely mandatory that you create an :Object and populate it using the .push command.

serviceArray.push(serviceURL);

What you’ve got now is an Object that has all of the information that you can readily reuse when the page/site loads.

More from Adam Estrada

• WordPress as a CMS
• ESRI FlexViewer and Error 1065
• More on ESRI Flex and Config.xml
• Open Street Map (take 1)
• How to Load a Shapefile in to Oracle Spatial

Adam Estrada Recommends

• OpenStreetMap in the First Month After the Haiti Quake (Maploser)
• Adam - The Indian iPad killer (MtaraM)
• Routing with the new Google Maps Data (Maploser)