(Flex generates a pie chart) the application of converting XML in flex to arraycollection.

(Flex generates a pie chart) the application of converting XML in flex to arraycollection.

Let's talk about the application. The pie chart of the space used by the database. Of course, more data can be compared. Based on requirements:

Question: learning this Flex is really a last resort. I copied a lot of things from the Internet recently because I used it for projects.

 

Nothing you do is enough to get your teeth. well, let's get back to the truth and give you some of your gains: here we will talk about the XML obtained in the backend of FLEX (mainly the data you get from the database, (self-encapsulated XML) is converted into arraycollection and a pie chart is generated;

 

The first step is to get data from the background. Here there is only one important thing, that is, the resultformat of httpservice. Here you can try it in many other ways. it was a time-tested experience. Well, I thought that I had found the New World, and there was almost no other stuff I had already been reclamation. Haha.

 

Let's talk about the program,
Data Source and background. Let's take a look at the Java code.

@ Override <br/> Public void querydatabasestat (httpservletrequest request, <br/> httpservletresponse response) {</P> <p> stringbuffer xml = new stringbuffer (); </P> <p> try {</P> <p> Map <string, Object> map = (Map <string, Object>) (databasestatdao <br/>. query ()). get (0); <br/>/* <br/> // XML. append ("["); </P> <p> XML. append ("{"). append ("Name:/" Idle space/", value :"). append (<br/> string. valueof (map. get ("freespace "))). append ("},"); <br/> XML. append ("{"). append ("Name:/" use space/", value :"). append (<br/> string. valueof (map. get ("usedspace "))). append ("}"); </P> <p> // XML. append ("]"); <br/> */</P> <p> XML. append ("<projects>"); </P> <p> XML. append ("<project "). append ("name =/" available space/"value = /""). append (<br/> string. valueof (map. get ("freespace "))). append ("/""). append ("/>"); <br/> XML. append ("<project "). append ("name =/" used space/"value = /""). append (<br/> string. valueof (map. get ("usedspace "))). append ("/""). append ("/>"); </P> <p> XML. append ("</Projects>"); </P> <p> // system. out. println (XML); </P> <p >}catch (exception e) {</P> <p> E. printstacktrace (); <br/> XML. append (toyxml. writealert (false, "failed to retrieve menu tree:/N" + E. getmessage (); <br/>}finally {</P> <p> writexml (response, XML); <br/> // system. out. println ("XML ---------->"); <br/> // system. out. println (XML); <br/>}</P> <p>}

Here, a data stream in XML format is returned, which is then obtained on the flex page.

See the program:

 

 

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <mx: module xmlns: MX = "http://www.adobe.com/2006/mxml" layout = "absolute" creationcompleteeffect = "seqin" <br/> width = "100%" Height = "100%" verticalscrollpolicy = "off" <br/> implements = "modules. control. imodulecontroller "<br/> creationcomplete =" Init (); "> </P> <p> <mx: httpservice id = "request4xml" resultformat = "E4X" <br/> url = "{actionurl}" method = "Post" showbusycursor = "true" <br/> result = "response4xml (Event); "/> </P> <p> <mx: style source =" Resources/CSS/project.css "/> </P> <p> <! -- Global --> <br/> <mx: script source = ".../../resources/ases/Main. As"/> <br/> <! -- Tool --> <br/> <mx: script source = ".../../resources/ases/toy. As"/> <br/> <! -- Module Controller --> <br/> <mx: script source = ".../../control/modulecontroller. As"/> <br/> <! -- Business implementation --> <br/> <mx: script source = "Business/bs4xml. As"/> <br/> <mx: SCRIPT> <br/> <! -- [CDATA [<br/> Import MX. utils. objectproxy; <br/> Import MX. utils. objectutil; <br/> Import MX. collections. arraycollection; <br/> Import MX. RPC. events. resultevent; <br/> Import MX. controls. alert; <br/> Import MX. charts. series. items. pieseriesitem; <br/> Import MX. charts. events. chartitemevent; <br/> [Bindable] <br/> private var actionurl: String = address + 'databasestat. do '; </P> <p> private var xmlobj: XML; <br/> private var arr: arraycollection; </P> <p> private function piechart_itemclick (EVT: chartitemevent): void {<br/> var PSI: pieseriesitem = EVT. hitdata. chartitem as pieseriesitem; <br/> expense. TEXT = "Project:" + psi. item. @ name; <br/> amount. TEXT = "Usage:" + psi. item. @ value + '(m)'; <br/> percent. TEXT = "Usage:" + psi. percentvalue. tofixed (1) + "%" <br/> // percent. TEXT = "fruit proportion:" + psi. percentvalu E. tofixed (1) + "%" <br/>}</P> <p> private function Init (): void {<br/> // 1. initialize the region <br/> Params ={}; <br/> Params ['handle'] = 'pie'; </P> <p> request4xml. send (Params); // get data </P> <p >}< br/> private function response4xml (Event: resultevent ): void {</P> <p> xmlobj = event. result as XML; <br/> arr = new arraycollection (); <br/> // alert. show (xmlobj. toxmlstring () + xmlobj. length (), ''); // feasible <br/> // alert. show (x Mlobj. toxmlstring () + xmlobj. children (). length (), ''); // feasible <br/> for each (VAR arrxml: XML in xmlobj. children () {</P> <p> arr. additem (arrxml); <br/>}< br/> piechart. dataprovider = arr; <br/>}</P> <p>]> <br/> </MX: SCRIPT> <br/> <mx: style> </P> <p> application {<br/> fontsize: 12; <br/> backgroundgradientcolors: # ffffff, # d4d4d4; <br/> themecolor: # aeb4e6 <br/>}< br/>. greenbg {<br/> headercolors: <br/> #6674 16, # cbdb30; <br/> highlightalphas: 0, 0; </P> <p >}< br/> </MX: style> <br/> <mx: panel id = "SG" Title = "database tablespace occupied by (m) "<br/> stylename =" greenbg "Height =" 494 "width =" 780 "layout =" absolute "x =" 5 "Y =" 5 "> <! -- Status = "demopiechart value" --> <br/> <mx: piechart id = "piechart" <br/> itemclick = "piechart_itemclick (event ); "<br/> showdatatips =" true "<br/> Height =" 408 "<br/> width =" 720 "fontsize =" 12 "x =" 2 "Y = "2"> <br/> <mx: series> <br/> <mx: pieseries labelposition = "callout" field = "@ value" namefield = "@ name" fontsize = "12"> <br/> <mx: calloutstroke> <! -- Some data line information --> <br/> <mx: stroke Weight = "0" color = "0x888888" alpha = "1.0"/> <br/> </MX: calloutstroke> <br/> <mx: radialstroke> <! -- Color value of the place of delivery between each graph --> <br/> <mx: stroke Weight = "0" color = "# ffffff" alpha = "0.20"/> <br/> </MX: radialstroke> <br/> <mx: stroke> <br/> <mx: stroke color = "0" alpha = "0.20" Weight = "2"/> <br/> </MX: stroke> <br/> </MX: pieseries> <br/> </MX: Series> <br/> </MX: piechart> <br/> <mx: legend dataprovider = "{piechart}"/> </P> <p> <mx: vbox width = "163" Y = "38" x = "547" backgroundcolor = "# acbec6" backgroundalpha = "0.5" bordercolor = "# C 6d8e5 "cornerradius =" 4 "borderstyle =" solid "verticalgap =" 2 "Height =" 72 "> </P> <p> <mx: label x = "10" Y = "10" text = "Project:" id = "expense"/> <br/> <mx: label x = "10" Y = "30" text = "Usage:" id = "amount"/> <br/> <mx: label x = "10" Y = "50" text = "Usage:" id = "percent"/> <br/> <! -- <Mx: Label x = "10" Y = "50" text = ":" id = "percent"/> --> <br/> </MX: vbox> <br/> <! -- <Br/> <mx: textarea x = "23" Y = "404" width = "130" Height = "25" backgroundalpha = "0.0" color = "# ffffff" borderthickness = "0" enabled =" true "editable =" false "wordwrap =" true "> <br/> <mx: htmltext> <br/> <! [CDATA [<B> <font color = "# 138fec"> CSS </font> <font color = "# fefefe00"> flex </font>. com </B>] --> <br/> </MX: htmltext> <br/> </MX: textarea> <br/> --> </P> <p> </MX: Panel> <br/> </MX: module>

 

The program here is on the Internet. In fact, I just switched it. If you use it, let's talk about it. It's mainly about this.

<Mx: httpservice id = "request4xml" resultformat = "E4X"
Url = "{actionurl}" method = "Post" showbusycursor = "true"
Result = "response4xml (event);"/>
When resultformat = "E4X" and result = "response4xml (event );"

Then we use the following method to retrieve the data and put it into the array. To be honest, there are still many things to learn,

Private function Init (): void {
// 1. initialize the region
Params = {};
Params ['handle'] = 'pie ';

Request4xml. Send (Params); // get data

}
Private function response4xml (Event: resultevent): void {

Xmlobj = event. result as XML;
Arr = new arraycollection ();
// Alert. Show (xmlobj. toxmlstring () + xmlobj. Length (), ''); // feasible
// Alert. Show (xmlobj. toxmlstring () + xmlobj. Children (). Length (), ''); // feasible
For each (VAR arrxml: XML in xmlobj. Children ()){

Arr. additem (arrxml );
}
Piechart. dataprovider = arr;
}

 

Of course you may not be able to solve this problem here. I hope you can think about it in another way. For example, if you get the data above and use debugging more, I hope you can try it online, set the breakpoint. I think this is also a trial. Of course, alert is the simplest, just like syso.