Flex based on XML and JSON design

This article is a good example of how to use Flex and Java together. Java will run this service. Flex will run on the client. The agreement between them can really achieve what you want. In that case, use XML first, then use JavaScript Object notation (JSON), because both are our most common Web 2.0 standards

Creating a server block

The XML instance starts with a simple JSP document in table 1

Listing 1. xml.jsp

﹤jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2"﹥
﹤jsp:directive.page import="java.text.*"/﹥
﹤jsp:directive.page import="java.lang.*"/﹥
﹤jsp:directive.page contentType="text/xml"/﹥
﹤days﹥﹤jsp:scriptlet﹥
﹤![CDATA[
double compa = 1000.0;
double compb = 900.0;
for (int i = 0; i﹤ =30; i++) {
compa += ( Math.random() * 100 ) - 50;
compb += ( Math.random() * 100 ) - 50;
]]﹥
﹤/jsp:scriptlet﹥
﹤day﹥
﹤num﹥﹤jsp:expression﹥i﹤/jsp:expression﹥﹤/num﹥
﹤compa﹥﹤jsp:expression﹥compa﹤/jsp:expression﹥﹤/compa﹥
﹤compb﹥﹤jsp:expression﹥compb﹤/jsp:expression﹥﹤/compb﹥
﹤/day﹥
﹤jsp:scriptlet﹥
﹤![CDATA[ }
]]﹥
﹤/jsp:scriptlet﹥
﹤/days﹥
﹤/jsp:root﹥

This server exports some arbitrary inventory data from two companies (company A and Company B) for 30 days. The first company started valuing the $1000. The second company starts with $900, and these JSP codes apply to the data that changes every day.

When I use the ' Curl ' client from the command line to access the server, I can restore something like the following:

% curl "http://localhost:8080/jsp-examples/flexds/xml.jsp"
﹤days﹥﹤day﹥﹤num﹥0﹤/num﹥﹤compa﹥966.429108587301﹤/compa﹥
﹤compb﹥920.7133933216961﹤/compb﹥
﹤/day﹥...﹤/days﹥

The ﹤days﹥ label is the root tag, containing a set of ﹤day﹥ tags, each ﹤day﹥ has a ﹤num﹥ tag to do the date flag, a ﹤compa﹥ function as the company a transaction price, ﹤compb﹥ label as the Company B transaction price. The trading prices of the two companies can change as they request.

Creating an interface

Now that we have a Web server output transaction price, we need a client application to view the transaction price. The first one we want to create is a grid interface that can simply display numbers. To create flex products, we pick flex products from the Flex Builder IDE's new menu. This is shown in Figure 1.

Figure 1

At this point, all we need to do is give the product a name. Because of the XML Data grid, I'm going to call it Xmldg '. This will create a xmldg. The Mxml file has a label in it. We'll replace this simple, useless application with the code shown in table 2.

Listing 2. Xmldg.mxml

﹤?xml version="1.0" encoding="utf-8"?﹥
﹤mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"﹥
﹤mx:XML source="http://localhost:8080/jsp-examples/flexds/xml.jsp" id="stockData" /﹥
﹤mx:Panel title="Stock Data" width="100%" height="100%"﹥
﹤mx:DataGrid dataProvider="{stockData..day}" width="100%" height="100%"﹥
﹤mx:columns﹥
﹤mx:DataGridColumn dataField="compa" /﹥
﹤mx:DataGridColumn dataField="compb" /﹥
﹤/mx:columns﹥
﹤/mx:DataGrid﹥
﹤/mx:Panel﹥
﹤/mx:Application﹥

The XMLDG application code has two para-element branches. The first is the ﹤mx:xml﹥ label, which indicates that Flex has an XML data source displayed outside and provides a URL. I'm going to create a local variable called StockData (using the ID description), the ﹤mx:datagrid﹥ widget can be used as a dataprovider.

The rest of the code is the interface. This has a ﹤mx:panel﹥object to give an exquisite little surround grid. ﹤mx:datagrid﹥object then displays the data. Within ﹤mx:datagrid﹥ is a set of ﹤mx:datagridcolumn﹥ specifications that control what data can be displayed in the grid.

When we start this program from Flex Builder, we will see the picture shown in Figure 2.

Figure 2