Using an HTML page as a data provider

Here’s a new example in the charting doc. It shows how someone might use some or all of an HTML page they load via an HTTPService tag as a data provider for their charting component. It includes logic to extract just the data from the target page.

The benefit to this is that if you have a wiki or blog that you can edit via a browser, you can build and update a data page without having to hit a database. The code extracts specially-tagged data from the HTML page, so even if it’s part of a larger block of HTML, you can still extract just the data.

One thing to note: The target domain in this example works because it has a crossdomain.xml file. If you want to load a page from your own target domain, you must be sure that your target domain has a crossdomain.xml file in place, and that that policy file lets the domain on which the Flex app is running request data from it.

Here’s the running example:

Here’s the data page that drives this chart:
http://examples.adobe.com/flex3/exchangingdata/html/dataPage.html

You can download the source MXML file here:
HTMLDataProvider.zip (1KB)

The exact location of the data page is passed into the application as a flashVars property. To change the data page, you only have to edit the HTML wrapper for the SWF file.

In the HTML wrapper, we pass the target HTML page as a param in the <object> tag:

<param name="flashVars" value="dataPage=http://examples.adobe.com/flex3/exchangingdata/html/dataPage.html" />

And again as an attribute of the <embed> tag:

flashVars="dataPage=http://www.shallowpondestates.com/misc/dataPage.html"

Note that you can view the source of this blog entry page to see the complete object/embed tags.

In the Flex app, the data page is read from the Application’s application.parameters property:

dataPage = Application.application.parameters.dataPage;

To initially get the page’s contents into the Flex app, we use an HTTPService object:

<mx:HTTPService id="serviceInput"
resultFormat="text"
url="{dataPage}"
/>

To get the HTML in a single string we get the lastResult property of the HTTPService in the ResultEvent handler:

var htmlBlob:String = serviceInput.lastResult.toString();

And to extract just the portion of the data page that we need (the part between the “data starts here” and “data ends here” comments), we use the slice() method:

htmlBlob = htmlBlob.slice( htmlBlob.indexOf("&lt;!-- data starts here --&gt;", 0) + 25, htmlBlob.length );
htmlBlob = htmlBlob.slice( 0, htmlBlob.indexOf("&lt;!-- data ends here --&gt;", 0) );

We then do a couple more passes on the remaining HTML string to replace HTML entities with angle brackets, so that we will end up with well-formed XML:

var tagPattern:RegExp = /<[^]*>/g;
htmlBlob = htmlBlob.replace(tagPattern, "");

var ltPattern:RegExp = /&lt;/g;
htmlBlob = htmlBlob.replace(ltPattern, "<");

var gtPattern:RegExp = /&gt;/g;
htmlBlob = htmlBlob.replace(gtPattern, ">");

At this point, we just need to pass the XML to the XMLList constructor so that it can be used as a data provider in the chart:

chartData = new XMLList(htmlBlob);

That’s it. If you compile and deploy this app, you can use the provided data page, or create your own. If your data page is on the same domain as the application, then you do not need a crossdomain.xml file.