快乐生活，快乐工作

5顶
5踩

用MXML开发Flex应用－Developing applicati ... | 用MXML开发Flex应用－关于MXML

2008-04-29

从服务器端获得数据并用Flex展示

如何从服务器端获得数据并通过Flex以图表形式展现出来，主要思路是：用户通过浏览器调用嵌入Flex应用的html页面->Flex应用发送请求到服务端请求数据->服务端将数据返回给Flex应用->Flex向用户展示数据。下面分别从服务端和Flex进行说明：

1.编写服务端

服务端用来向Flex应用返回请求的数据。这里的数据格式设置为XML数据。对于XML数据，可以直接返回一个XML文件或者通过编码返回XML格式的数据。这里我们采用后者，这里的服务端还接收一个参数：type，根据type不同返回不同的XML数据。

package service;

import java.io.*;

import javax.servlet.*;
import javax.servlet.http.*;

/**
 * 返回Flex请求的XML数据
 * @author tangs
 */
public class DataServiceServlet extends HttpServlet {
   
    /** 
    * Processes requests for both HTTP <code>GET</code> and <code>POST</code> methods.
    * @param request servlet request
    * @param response servlet response
    */
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        response.setContentType("text/xml;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {
            //根据type不同，返回不同的XML数据
            String type = request.getParameter("type");
            
            StringBuilder xml = new StringBuilder();
            xml.append("<?xml version='1.0' encoding='UTF-8'?>");
            if ("1".equals(type)) {
                xml.append("<root>");
                xml.append("<Expense name='Taxses' value='3000'/>");
     		xml.append("<Expense name='Rent' value='1520'/>");
                xml.append("<Expense name='Bills' value='500'/>");        
                xml.append("</root>");
            } else if ("2".equals(type)) {
                xml.append("<root>");
                xml.append("<Expense name='Taxses' value='5000'/>");
     		xml.append("<Expense name='Rent' value='1020'/>");
                xml.append("<Expense name='Bills' value='210'/>");        
                xml.append("</root>");
            }
            out.println(xml.toString());
        } finally { 
            out.close();
        }
    } 

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /** 
    * Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
    * Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }
    // </editor-fold>
}

服务端很简单，就是返回请求数据。

2.编写Flex应用

这个例子总Flex需要向服务端发送请求的同时，传递一个参数。用Flex发送带参数请求很简单，但是如何向Flex应用传递参数，却有些繁琐。下面先来看Flex应用如何获得外部传来的参数：

<?xml version="1.0"?>
<!-- charts/BasicPie.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    initialize="getParams();">    //Flex应用初始化时，向服务端获取数据
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
	 import mx.rpc.http.HTTPService;
	 import mx.controls.Alert;
	 
	 [Bindable]
	 private var service:HTTPService ;
		
	 private function get_Label(item:Object, field:String, index:Number, percentValue:Number):String
	 {
		 return item["name"].toString()+":"+item[field].toString();
	 }
		
	 //获得参数
	 private function getParams():void {
	 	 //获得参数
	 	 var params:Object = this.parameters;
		 if (params != null) {
				//向服务端请求数据
				service = DataLoader.getData(params["type"].toString());
		 } else {
				Alert.show("No params");
		 }
			
	 }
		
		
  ]]></mx:Script>

  <mx:Panel title="Pie Chart" backgroundColor="#FFFFFF">
    //展示饼状图
     <mx:PieChart id="myChart" 
        dataProvider="{service.lastResult.root.Expense}"    //获得服务端返回的数据
        showDataTips="true"
     >
        <mx:series>
           <mx:PieSeries 
                field="value" 
                nameField="name" 
                labelPosition="callout"
                labelFunction="get_Label"
           />
        </mx:series>
     </mx:PieChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

从上面的代码可以看出，Flex获得参数的方法：

	 private function getParams():void {
	 	 //获得参数
	 	 var params:Object = this.parameters;


		 if (params != null) {
				//向服务端请求数据
				service = DataLoader.getData(params["type"].toString()

);
		 } else {
				Alert.show("No params");
		 }
			
	 }

在应用加载的时候，通过调用getParams()方法，获得传入的参数，并向服务端请求数据。

Flex向服务端请求数据有3种方式：REST-sytle service，web service，Remote object service。这里使用的是第一种方式。REST-style service实际上就是采用HTTP协议通信的方式。Flex提供了HTTPService component，使用起来很方便。这里用的是ActionScript：

DataLoader.as

package
{
	import mx.controls.Alert;
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.http.HTTPService;

	public class DataLoader
	{
		
		public function DataLoader()
		{
		}
		public static function getData(type:Object):HTTPService {
				var service:HTTPService;
                service = new HTTPService();
                service.url = "http://localhost:7001/DataService/getData?type="+type;
                service.method = "POST";
                service.addEventListener("result", httpResult);
                service.addEventListener("fault", httpFault);
                service.send();
                
                return service;
        }

        public static function httpResult(event:ResultEvent):void {
                var result:Object = event.result;
        }

        public static function httpFault(event:FaultEvent):void {
                var faultstring:String = event.fault.faultString;
                Alert.show("Fault: " + faultstring);
        }
}

下面的代码得到服务端返回的数据：

<mx:PieChart id="myChart" 
        dataProvider="{service.lastResult.root.Expense}

"    //获得服务端返回的数据
        showDataTips="true"
     >
  。。。
</mx:PieChart>

之后，Flex就可以根据获得的数据将图展现出来了。

上面说了Flex如何获得参数并向服务端发送请求，那么参数是如何传递给Flex应用的呢？这里就有点复杂了。需要写一段JS脚本进行参数的传递。

chartType.js

var requiredMajorVersion = 9;
var requiredMinorVersion = 0;
var requiredRevision = 0;

<!-- 动态创建Flash -->
<!-- id:应用编号 -->
<!-- url:嵌入网页的SWF文件名称 -->
<!-- width:应用在网页中的宽度 -->
<!-- high:应用在网页中的高度 -->
<!-- type:服务端需要的参数 -->

function sendParameters(id, url, width, high, type)
{
	var hasProductInstall = DetectFlashVer(6, 0, 65);
	var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

	if(hasProductInstall && !hasRequestedVersion)
	{
		var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
		var MMredirectURL = window.location;
    	document.title = document.title.slice(0, 47) + " - Flash Player Installation";
	    var MMdoctitle = document.title;

		AC_FL_RunContent

(
			"id", id,
			"src", "playerProductInstall",
			"name", url,
			"width", width,
			"height", high,
			"menu", false,
			"wmode", "opaque",
			"align", "middle",
			"quality", "high",
			"bgcolor", "#808080",
			"allowScriptAccess","always",
			"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
			"type", "application/x-shockwave-flash",
			"pluginspage", "http://www.adobe.com/go/getflashplayer");
	}
	else if(hasRequestedVersion)
	{
		var flashvars = "type=" + type;
		
		AC_FL_RunContent

(
			"id", id,
			"src", url,
			"name", url,
			"flashvars", flashvars,
			"menu", false,
			"width", width,
			"height", high,
			"wmode", "opaque",
			"align", "middle",
			"quality", "high",
			"bgcolor", "#808080",
			"allowScriptAccess","always",
			"type", "application/x-shockwave-flash",
			"pluginspage", "http://www.adobe.com/go/getflashplayer");
	}
	else
	{
    	var alternateContent = 'Alternate HTML content should be placed here. '
	  		+ 'This content requires the Adobe Flash Player. '
	   		+ '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
	    document.write(alternateContent);  // insert non-flash content
	}
}

function getInfoForFlash(type)
{    
	if(type.toLowerCase().indexOf("f_code") != -1)
	{
        var target = document.getElementById("f_code");
        if(target != null)
        	return target.value;
        else
		    return "g01";
	}
	else if(type.toLowerCase().indexOf("f_title") != -1)
    {
        var target = document.getElementById("f_title");
        if(target != null)
        	return target.value;
        else
		    return "unkown";
	}
	else
		return "unkown";
}

上面的脚本中，调用了AC_FL_RunContent方法，这个方法是Flex提供给我们的一个方法，用FlexBuilder创建一个Flex Project后，就可以在html-template这个文件夹中看到一个叫AC_OETags.js的文件。这个方法就在这个文件中。下面是调用Flex应用的html页面：

chart.html

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="AC_OETags.js" language="javascript"></script>

</head>
<body bgcolor="#EBEAE5" leftmargin="0" topmargin="0">
<script language="JavaScript" type="text/javascript" src="history.js"></script>
<script language="javascript" type="text/javascript" src="chartType.js"></script>
<table width="770" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td></td>
  </tr>
  <tr>
  <td align="center">
	<script>
		sendParameters("Chart1", "Chart1", 800, 600, "2");
	</script>
  </td>
  </tr>
</table>
</body>
</html>

这个HTML页面包含了AC_OETags.js和chartType.js。通过sendParameters方法向Flex应用传递参数，并将应用嵌入网页中显示出来。

OK，上面的工作都做好后，在浏览器中输入http://...../chart.html，就可以看到结果了：

这是type=1时的结果：

这是type=2时的结果：

10:45
浏览 (702)
评论 (1)
分类: Flex
发布在 flex 圈子
相关推荐

发表评论

tangshuo

浏览: 8125 次
性别:
来自: 北京
详细资料

快乐生活，快乐工作

5顶
5踩

从服务器端获得数据并用Flex展示

评论

发表评论

搜索本博客

博客分类

我的相册

其他分类

最近加入圈子

链接

存档

最新评论

评论排行榜

快乐生活，快乐工作

5顶5踩

从服务器端获得数据并用Flex展示

评论

发表评论

搜索本博客

博客分类

我的相册

其他分类

最近加入圈子

链接

存档

最新评论

评论排行榜

5顶
5踩