birdeye 绘制拓扑关系图的复习

http://www.cnblogs.com/xiaogangqq123/archive/2011/06/03/2070673.html

birdeye概述

BirdEye是一个开源的Adobe Flex图表制作组件。用于创建多维数据分析可视化界面。

birdeye 可以绘制 拓扑图,关系图,流程图,星空图,地图,饼图 等等..

birdeye 项目地址:http://code.google.com/p/birdeye/

birdeye 源码下载:http://code.google.com/p/birdeye/source/checkout  需要用SVN.

birdeye Demo:http://birdeye.googlecode.com/svn/branches/ng/examples/demo/BirdEyeExplorer.html

birdeye  svn源码地址:

svn checkout http://birdeye.googlecode.com/svn/trunk/ birdeye-read-only

checkout 大约几分钟的时间 下载下来的源码如下

1

每个文件夹里面对应了一类图形. 导入的项目可能会报错,注意查看每个文件夹下的lib目录下的swc文件 引入即可。

ravis 下是拓扑图

导入工程后,运行Level4.mxml

1

birdeyeravis 传递数据的方式也是通过xml

xml结构如下:

节点

<Node id="1" name="0" desc="This is a description" nodeColor="0x333333" nodeSize="32" nodeClass="earth" nodeIcon="center" x="10" y="10" />

name-就是显示名, desc-是描述,可以不显示. nodeColot -是节点颜色. nodeSize-节点大小.  nodeClass-节点样式, nodeIcon-不清楚属性,

连接的关系xml

<Edge fromID="1" toID="2" edgeLabel="No Change" flow="50" color="0x556b2f" edgeClass="sun" edgeIcon="NoChange" />

fromID toID就不用说了,edgeLabel-线上的显示名  color -线的颜色, edgeClass-线的样式

xml和SpringGraph绘制拓扑图的xml结构有点相似吧…

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:ravis="org.un.cava.birdeye.ravis.graphLayout.visual.*"
                xmlns:lc="org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.*"
                xmlns:vc="org.un.cava.birdeye.ravis.components.ui.controls.vgraphControls.*"
                xmlns:flexlib="http://code.google.com/p/flexlib/"
                creationComplete="init();" width="100%" height="100%" >

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            
            import org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.LayoutSelector;
            import org.un.cava.birdeye.ravis.components.ui.controls.layouterControls.PhiDial;
            import org.un.cava.birdeye.ravis.components.ui.controls.vgraphControls.EdgeRendererSelector;
            import org.un.cava.birdeye.ravis.graphLayout.data.Graph;
            import org.un.cava.birdeye.ravis.graphLayout.data.IGraph;
            import org.un.cava.birdeye.ravis.graphLayout.layout.ConcentricRadialLayouter;
            import org.un.cava.birdeye.ravis.graphLayout.layout.IAngularLayouter;
            import org.un.cava.birdeye.ravis.graphLayout.layout.ILayoutAlgorithm;
            import org.un.cava.birdeye.ravis.graphLayout.layout.ParentCenteredRadialLayouter;
            import org.un.cava.birdeye.ravis.graphLayout.visual.IEdgeRenderer;
            import org.un.cava.birdeye.ravis.graphLayout.visual.IVisualNode;
            import org.un.cava.birdeye.ravis.graphLayout.visual.VisualGraph;
            import org.un.cava.birdeye.ravis.graphLayout.visual.edgeRenderers.DirectedBalloonEdgeRenderer;
            
            import renderers.edgelabels.mxml.basicEdgeLabelRenderer;
            
            private var graph:IGraph;
            private var layouter:IAngularLayouter;
            private var selectedEdgeRenderer:IEdgeRenderer;
            private var startRoot:IVisualNode;
            private var itemCount:int = 0;
            private var initDone:Boolean = false;
            

            private function init():void{
                var strXML:String = 
                      "<graph>" + 
                "<Node id=\"1\" name=\"\" nodeColor=\"0xaf3a99\" nodeSize=\"0\" nodeIcon=\"center\" />" +  
                    "<Node id=\"2\" name=\"B60R\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" +  
                    "<Node id=\"3\" name=\"H01L\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" +  
                    "<Node id=\"4\" name=\"B24B\" nodeColor=\"0xaf3a42\" nodeSize=\"50\" />" +  
                    "<Node id=\"5\" name=\"H01M\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"6\" name=\"B25J\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"7\" name=\"G05B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"8\" name=\"H04L\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"9\" name=\"H01R\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"10\" name=\"G05G\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"11\" name=\"H05K\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"12\" name=\"H01H\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"13\" name=\"H03H\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"14\" name=\"G06F\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"15\" name=\"H04Q\" nodeColor=\"0xaf3a42\" nodeSize=\"40\" />" +  
                    "<Node id=\"16\" name=\"A63B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"17\" name=\"G06T\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"18\" name=\"E05B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"19\" name=\"G01N\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"20\" name=\"F02B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"21\" name=\"F04C\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"22\" name=\"B23C\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"23\" name=\"H04B\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"24\" name=\"B62D\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Node id=\"25\" name=\"H02K\" nodeColor=\"0xaf3a42\" nodeSize=\"30\" />" +  
                    "<Edge fromID=\"1\" toID=\"2\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"2\" toID=\"3\" edgeLabel=\"1228\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"4\" toID=\"3\" edgeLabel=\"589\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"4\" toID=\"5\" edgeLabel=\"233\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"4\" toID=\"6\" edgeLabel=\"216\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"6\" toID=\"7\" edgeLabel=\"294\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"6\" toID=\"8\" edgeLabel=\"211\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"2\" toID=\"8\" edgeLabel=\"553\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"3\" toID=\"9\" edgeLabel=\"244\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"10\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"10\" toID=\"11\" edgeLabel=\"701\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"12\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"12\" toID=\"13\" edgeLabel=\"523\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"14\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"14\" toID=\"15\" edgeLabel=\"522\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"16\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"16\" toID=\"17\" edgeLabel=\"402\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"18\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"18\" toID=\"19\" edgeLabel=\"350\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"20\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"20\" toID=\"21\" edgeLabel=\"304\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"22\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"22\" toID=\"23\" edgeLabel=\"300\" color=\"0x556b2f\" />" +  
                    "<Edge fromID=\"1\" toID=\"24\" edgeLabel=\"\" color=\"0xFFFFFF\" />" +  
                    "<Edge fromID=\"24\" toID=\"25\" edgeLabel=\"298\" color=\"0x556b2f\" />" +  
                    "</graph>"        
                initData(strXML);
//                //nodeSize 球的大小, nodeColor 节点的颜色  edgeLabel=线上的描述
            
                
                ExternalInterface.addCallback("GetXMLFunction",initData);
            }
            
            private function initData(strXML:String):void {
                
                var xmldata:XML = new XML(strXML);
                
                graph = new org.un.cava.birdeye.ravis.graphLayout.data.Graph("XMLAsDocsGraph",false,xmldata);
                
                vgraph.graph = graph;
                
                layouter = new ParentCenteredRadialLayouter(vgraph);
                vgraph.layouter = layouter;

                layouter.autoFitEnabled = false;
                //layouter.linkLength = 300;
                //layouter.phi = 300;
                //layouter.layoutChanged = true;
                
                vgraph.edgeRendererFactory = new ClassFactory(DirectedBalloonEdgeRenderer);
                
                vgraph.maxVisibleDistance = 5;
                
                //指定根节点
                startRoot = graph.nodeByStringId("1").vnode;
                
                vgraph.displayEdgeLabels = true;
                
                vgraph.currentRootVNode = startRoot;
                initDone = true;
                
                
                //线条样式
                var myEdgeRender:EdgeRendererSelector = new EdgeRendererSelector();
                myEdgeRender.selectedItem = "Default";
                myEdgeRender.vgraph  = vgraph;
                myEdgeRender.changeEdgeRenderer();
                
                var selector:LayoutSelector = new LayoutSelector();
                selector.vgraph = vgraph;
                selector.selectedItem = "ConcentricRadial";
                selector.changeLayouter();
                
                vgraph.draw();
            }
        ]]>
    </mx:Script>                    
    
    <mx:Style source="styles/main.css" />
        <mx:Canvas id="graphCnvs" width="100%" height="100%"  >        
            <ravis:VisualGraph id="vgraph" width="100%" height="100%" 
                               left="0" right="0" top="0" bottom="5"
                               backgroundColor="#FFFFFF" alpha="1"
                               itemRenderer="renderers.nodes.mxml.sizeColorNodeRenderer"
                               edgeLabelRenderer="renderers.edgelabels.mxml.basicEdgeLabelRenderer" 
                               resize="vgraph.draw(VisualGraph.DF_RESET_LL)"
                               visibilityLimitActive="true"
                               >
            </ravis:VisualGraph>
            
            <flexlib:WindowShade
                id="layoutContainer"
                styleName="linkButtonWindowShade" 
                label="设置"
                width="400"
                opened="false"
                horizontalAlign="center"
                paddingBottom="5"
                 visible="false">
                                   
                    <lc:PhiDial id="myPhiDial" vgraph="{vgraph}" />
                    <lc:ToggleDamping id="myDamping" vgraph="{vgraph}" />
                    <lc:CommonLayoutControls id="myCommonLC" vgraph="{vgraph}" />
                
            </flexlib:WindowShade>

        </mx:Canvas>
    
</mx:Application>

效果如下:

1

线的长度只有通过控件才能设置,我是通过修改源码来达到固定的。

birdeye 与SpringGraph的一点区别在于 不会随意飘动,并且效果还不错。如果不想看到他的双击事件也可以通过修改源码实现.



flex URLLoader和URLRequest浅析

URLLoader,其实也是flex和后台交互的三大方法之一,其他方法我就不赘述了。

URLLoader需要URLRequest来发送请求。

URLRequest可捕获单个 HTTP 请求中的所有信息。将URLRequest 对象传递给URLStream或URLLoader 类以及其他加载操作的load()方法以启动URL数据加载。

var request:URLRequest = new URLRequest(http://localhost:1146/Data/Book.xml)

同样可以使用URLRequest来请求一个本地项目/应用里的文件,如下代码示例:

var request:URLRequest = new URLRequest("Data/Book.xml")

URLLoader 类以文本、二进制数据或 URL 编码变量的形式从 URL 下载数据。在下载文本文件、XML 或其他用于动态数据驱动应用程序的信息时,它很有用。

这里有个加载本地文件的例子:

复制代码
private function getTreefromLayerControl():void
            {
                var lcurl:String=this.configXML.groupurl;
                var urlloader:URLLoader=new URLLoader(new URLRequest(lcurl));
                urlloader.addEventListener(Event.COMPLETE, completehandler);
            }
            //layercontrol加载后解析
private function completehandler(event:Event):void
            {
                var x:XML=new XML(event.target.data);
                layerxml=x.groupconfig.layeritem;
                for each(var xm:XML in layerxml)
                {
                    if(xm.hasOwnProperty("@label"))
                    {
                        xmlhandler(xm);
                    }
                    else 
                    {
                        BLLayerItem(xm);
                    }
                }
复制代码

 

 这里有个访问服务器后台的例子:

复制代码
private function getText():void  
{  
    var v:URLVariables = new URLVariables("name=jacky&age=35&address=HongKong China");  
    var r:URLRequest = new URLRequest();  
    r.url = "http://localhost:2222/FlexService/TextFrm.aspx";  
    r.method = URLRequestMethod.GET;  
    r.data = v;  
     
    var l:URLLoader = new URLLoader();  
    l.load(r);  
    l.addEventListener(Event.COMPLETE,txtCompleteHandler); //注册请求完成后 响应获取数据事件方法   
    labMsg.alpha = 1;  
}  
private function txtCompleteHandler(e:Event):void  
{  
    var l:URLLoader = URLLoader(e.target);  
    var o:Object = URLUtil.stringToObject(String(l.data)); //使用URLUtil对将数据进行反序列化以方便使用   
    txtName.text = o.name;  
    txtAge.text = o.age;  
    txtAddress.text = o.address;  
    labMsg.alpha = 0;  
}  
复制代码


后台:

复制代码
protected void Page_Load(object sender, EventArgs e)  
{  
        //获取URLResuest请求回的参数 返回数据用;分隔以方便Flex对数据进行序列化   
        string rs = String.Format("name={0};age={1};address={2}",Request.QueryString["name"],  
                                                                 Request.QueryString["age"],  
                                                                 Request.QueryString["address"]);  
        Response.ClearContent();  
        Response.ContentType = "text/plain";  
        Response.Write(rs); //以文本形式返回数据   
        Response.End();  
}  
复制代码

Flex控件工具大全

http://developer.51cto.com/art/201007/215173.htm

本文和大家重点讨论一下Flex控件的用法,Flex控件分为2种,一种是布局控件,另外一种是元素控件。比如Canvas控件,Canvas容器绘置一个长方形的区域用来放置子组件(其他容器或者控件)。

Flex控件详解

Flex控件分为2种,一种是布局控件,另外一种是元素控件。

Canvas

Canvas容器绘置一个长方形的区域用来放置子组件(其他容器或者控件),与其他容器不同,Canvas子组件的位置必须指定绝对坐标或使用约束条件布局。

Box,HBox,andVBox

Box容器用来横向或者纵向的放置子组件,使用direction属性来决定是横向布局还是纵向布局。HBox,VBox就是指定了direction属性的Box。

ControlBar

Flex控件中ControlBar容器一般与Panel容器或者TitleWindow容器配合使用,比如在Panel容器的底部放置一个ControlBar作为Footer。

ApplicationControlBar

ApplicationControlBar容器一般起到导航的作用,作用于整个应用程序的运行期间,比如我们使用的Word,Excel顶部用来放置工具栏和菜单栏的区域。
ApplicationControlBar容器有2种模式,分别是Docked模式和Normal模式。Docked模式将ApplicationControlBar容器一直显示的停靠在应用程序的顶部,并且自动将宽度调整为应用程序的宽度。Normal模式可以将ApplicationControlBar容器以任意的大小放置在应用程序的任何位置。

DividedBox,HDividedBox,andVDividedBox

DividedBox容器类似与Box容器,用来横向或者纵向的放置子组件,不同的是DividedBox用显示的间隔物将自组件分割开,你可以拖动间隔物来扩大或缩小每个子组件所占的空间,HDividedBox和VDividedBox相与DivideBox的区别与HBox和VBox相对与Box的区别一样。

Form,FormHeading,andFormItem

Form是Web应用最为常见的容器了,常见的有用户注册,帐单信息等。FormHeading用来区分每一组Form信息,如用户注册的过程中,可以指定2个FormHeading分别是必添项目和选添项目。FormItem是Form中具体的某一个项目,包含一个Label和若干个控件。

Grid

Grid容器用来以表格的形式放置组件,好比Html中没有Border的Table。Grid容器的每一个单元格(cell)都可以放置0个或1个子组件,如果想要在一个单元格中放置多个控件,那么就在这个单元格中再多加一个容器。Grid中使用GridRow来创建行,用GridItem来创建单元格。类似与Html的table,你也可以使用rowSpan,colSpan来合并单元格。

Panel

Panel容器是Flex控件中一个比较常用的容器,包含标题(title)区域,放置子组件的容器(content)区域,以及边框(border)。content区域有3种形式,分别是横向布局(horizontal),纵向布局(vertical),绝对坐标布局(absolute)。Panel会很普遍的与Form结合起来使用,当然还有前面提到的ControlBar组件也是Panel容器中很常用的一个子容器。

Tile

Tile容器将子组件按照表格的形式放置,与Grid容器的区别是,Tile容器每个单元格的大小都是一样的。Tile容器子组件具体的放置位置由Flex来安排,而Tile容器的宗旨是将所有的子组件都能以横竖排列最佳的位置摆放。比如Tile容器有16个子组件,就将16个子组件以4行4列的位置摆放,如果是15个子组件,也是4行4列摆放,只不过最后一行的最后一列是空着的。

TitleWindow

TitleWindow容器继承与Panel容器,所以TitleWindow拥有Panel的所有特性,而不同的是TitleWindow容器是用来做弹出(popup)面板的。


flex mx:application加载顺序

http://blog.csdn.net/lihua2915/article/details/5950672

Flex应 用程序共由两帧组成,第1帧为preloader部分,第2帧为主应用程序部分,此两部分由Flex应用程序的根SystemManager统管,SystemManager是flash.display.MovieClip的子类,影片剪辑(movie clip)支持帧。由于swf属于一种渐进式(progressive)下载的格式,正是由于swf格式这个特性,Flash Player并不需要等待整个程序下载完成便可直接访问已载入帧的内容,因此第一帧通常用来作为应用程序载入时的loading画面显示,一般来说,第一帧包含的内容应该尽可能的少(在第一帧中尽量不要含有Flex框架的组件),以便能很快的下载并立即显示;第二帧才是主应用程序真正的内容,一旦 SystemManager实例进入到第二帧后,即开始内部主应用程序运行的生命周期(life cycle),也就是进入我们最为熟悉的<mx:Application>运行的部分(SystemManger实例有一 application的属性,在第1帧时,此属性为null,当进入到第2帧时,该属性才指向真正的主程序application实例)记住我们开始所说的,Flex应用程序总的来说是以事件驱动的程序

在程序进入第2帧,主程序application开始运行后,便会相应的触发相应的一系列事件,按事件发生的先后顺序依次来介绍:

preinitialize

应用程序application已实例化,但此时还未创建任何相关的孩子组件(child component)

initialize

此时,创建了相应的孩子组件,但还未对这些子组件进行布局

creationComplete

应用程序application完成全部实例化,并完成所有子组件的布局

apllicationComplete

上面三处事件的完成,表明application内部启动的整个进程完成,接下来便会通知SystemManager派发applicationComplete事件。此时,启动程序启动完成并准备运行。

 

Flash包含的是一个时间线上的多个帧, 而Flex的SWF只包含2个帧. SystemManager, Preloader, DownloadProgressBar和少量工具类都在第一帧, 剩下的包括应用代码/ 内嵌资源全都在第二帧中. 当Flash Player下载下载SWF时, 只要接收到第一帧内足够的数据, 就会实例化SystemManager, 由它来创建Preloader, 然后创建DownloadProgressBar, 这两个对象会察看剩余字节的传输过程. 当第一帧的所有字节传输完毕后, SystemManager发送enterFrame到第二帧, 然后是其他事件. 最后Application对象派发applicationComplete事件.
SystemManager是Flex应用的主控者, 它控制着应用窗口, Application实例, 弹出窗口, cursors, 并管理着ApplicationDomain中的类. SystemManager是FlashPlayer实例化的第一个类, 它存储了主应用窗口的大小和位置信息, 保存其子组件比如:浮动弹出窗口和模态窗口的痕迹. 通过SystemManager可以获得内嵌字体,样式和document对象.
自定义的可视化组件(UIComponent的子类)只有在调用过addChild()后, 才会有一个SystemManager赋给他们, 之前是Null. 所以在自定义可视化组件的构造函数中不要使用SystemManager.
通常, Application对象创建时, 发生如下事件:
1. 实例化Application对象
2. 初始化Application.systemManager
3. Application在初始化过程之前, 派发预初始化事件.
4. 调用createChild(). 此时, 所有应用组件被创建, 所有组件的createChild()被调用.
5. Application派发初始化事件, 表明所有的组件初始化完毕.
6. 派发creationComplete事件
7. Application对象添加到显示列表中
8. 派发applicationComplete事件
大多数情况下, 我们使用<mx:Application>来创建application对象, 但如果使用ActionScript来创建的话, 那么建议不要在application的构造函数中创建组件, 推荐在crateChildren函数中, 主要是从性能方面考虑.
Flex 是一个事件驱动的编程模型, 任何事情的发生, 其背后必然存在一个事件. 而开发者第一次看到MXML时, 很难体会到一个Xml标记的应用的事件流和实例化的生命周期. 这个对于HTML和Flash的开发者尤其会感到困惑, 因为其熟悉的方式与Flex的一点也不相似. HTML的实例化是从上到下的, Flash的执行是从Frame0开始一帧帧运行的. 而Flex则又有不同.

在Flex4中使用mx:HTTPService与Java通讯

http://www.cnblogs.com/modou/articles/1902492.html

mx:HTTPService的使用非常简单,我写了一个简单的例子,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
    <s:layout>
        <s:BasicLayout/>
    </s:layout>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            import mx.utils.UIDUtil;
             
            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                service.url = "http://localhost:8080/demo/Test1.action?rnd=" + new Date().toString();
                service.send();
            }
 
 
            protected function service_resultHandler(event:ResultEvent):void
            {
                Alert.show(String(event.result));
            }
 
 
            protected function service_faultHandler(event:FaultEvent):void
            {
                Alert.show("请求异常");
            }
 
        ]]>
    </fx:Script>
    <fx:Declarations>
        <mx:HTTPService id="service" <strong>resultFormat="text"</strong> result="service_resultHandler(event)" fault="service_faultHandler(event)" />
    </fx:Declarations>
     
</s:Application>


通过service.url指定一个请求的地址,我添加了一个动态的参数,可以保证每次请求的都是最新的页面,防止页面被缓存

service.send();方法开始调用这个请求.

result事件是在调用成功后执行,fault事件是在调用失败后执行

resultFormat属性为text的时候,在result事件,可以通过String(event.result)得到请求页面的输出结果

Flex编程注意之直接获取某个组件的对象(this[]用法)通过id获取控件

http://www.cnblogs.com/exmyth/archive/2013/08/09/3248031.html


<page:UserInfo userVar="{user}"/>
例如有个id为name的Object,在mxml的组件中,{name}便可以直接拿到值

如果在方法内,可以通过name.visible name.txt name.source直接获得或者改变值


轻松打造J2EE的 SSH 与flash builder整合(由Spring类管理)

http://www.cnblogs.com/jonneydong/archive/2012/03/26/2418749.html

在此将我所配置方法,,告知大家..让大家少走弯路

下面将由我来 手把手教大家 如果 配置SSH 以及将flash builder整合到一起

并由Spring类来管理,,使flash builder直接通过AMF访问java后台类方

环境:

My Eclipse 8.5

Struts 1.2

Spring 2

hibernate 3.1

flash builder 4 / 或插件版

1.前期环境

新建项目名为: MyWeb

建包:

com.sshf.study.entity (实体包)

com.sshf.study.dao(数据访问包)

com.sshf.study.biz(业务逻辑)

并在 com.sshf.study.biz 包下

新建接口 IHelloWord.java

并再建包 impl, HellWordImpl.java 类(全速路径 com.sshf.study.biz.impl.HellWordImpl). 并实现IHelloWord接口

代码如下:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
<span data-mce-= "" > package com.sshf.study.biz;
import com.sshf.study.biz.IHelloWord;
public class HelloWordImpl implements IHelloWord{
     /**
      * 测试方法
      * @param name
      * @return
      */
     public String sayHello(String name){
         return "HelloHello! " + name;
     }
}
</span>

 

稍后我们会 测试调用这个方法!

2.开始SSH搭建.

a.首先加入Spring框架

自己加入DataSource sessionFactory 实体bean DAOBean 以及事务..养成好习惯

以下是我的初期配置(稍后会添加):

 

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<span data-mce-= "" ><?xml version= "1.0" encoding= "UTF-8" ?>
<!-- 导入命名空间-->
         xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance"
         xmlns:aop= "http://www.springframework.org/schema/aop"
         xmlns:tx= "http://www.springframework.org/schema/tx"
         xsi:schemaLocation="http: //www.springframework.org/schema/beans
         http: //www.springframework.org/schema/beans/spring-beans-2.0.xsd
         http: //www.springframework.org/schema/tx
         http: //www.springframework.org/schema/tx/spring-tx-2.0.xsd
         http: //www.springframework.org/schema/aop
         http: //www.springframework.org/schema/aop/spring-aop-2.0.xsd">
         <!-- 配置事务管理 -->
         <bean id= "myHibTxManager" class = "org.springframework.orm.hibernate3.HibernateTransactionManager" >
                 <property name= "sessionFactory" ref= "sessionFactory" />
         </bean>
         
         <!--配置事务管理策略-->
         <tx:advice id= "txAdvice" transaction-manager= "myHibTxManager" >
                 <tx:attributes>
                         <tx:method name= "to*" propagation= "SUPPORTS" read-only= "true" />
                         <tx:method name= "add*" propagation= "REQUIRED" />
                         <tx:method name= "find*" propagation= "REQUIRED" />
                 </tx:attributes>
         </tx:advice>
         
         <aop:config>
                 <!--指定用于那些地方-->
                 <aop:pointcut id= "bizMethods" expression= "execution(* com.sshf.study.*.impl.*.*(..))" />
                  <!-- 织入 -->
                    <aop:advisor advice-ref= "txAdvice" pointcut-ref= "bizMethods" />
         </aop:config>
         <!-- dataSource -->
         <bean id= "dataSource"
                 class = "org.apache.commons.dbcp.BasicDataSource" >
                 <property name= "driverClassName"
                         value= "com.microsoft.sqlserver.jdbc.SQLServerDriver" >
                 </property>
                 <property name= "url" value= "jdbc:sqlserver://localhost:1433" ></property>
                 <property name= "username" value= "sa" ></property>
                 <property name= "password" value= "dongqiao" ></property>
         </bean>
         <bean id= "sessionFactory"
                 class = "org.springframework.orm.hibernate3.LocalSessionFactoryBean" >
                 <property name= "dataSource" >
                         <ref bean= "dataSource" />
                 </property>
                 <property name= "hibernateProperties" >
                         <props>
                                 <prop key= "hibernate.dialect" >
                                         org.hibernate.dialect.SQLServerDialect
                                 </prop>
                         </props>
                 </property>
                 <property name= "mappingResources" >
                         <list>
                                 <value>entity/ConfigQuestionSecondKind.hbm.xml</value>
                                 <value>entity/EngageSubjects.hbm.xml</value>
                                 <value>entity/ConfigQuestionFirstKind.hbm.xml</value></list>
                 </property>
         </bean>
         
         <!-- DAO -->
         
         <!-- biz -->
         <bean id= "HW" class = "com.sshf.study.biz.impl.HellWordImpl" >
         </bean>
         
         
         <!-- action -->
         </beans>
</span>

 

 

 

b.添加Struts支持

如用到Action 一定不要忘了改 代理类 org.springframework.web.struts.DelegatingActionProxy

c.添加hibernate支持.

以上二步省略.. 相信大家都会配..

 

3.开始将flash builder整合到SSH中

a.下载blazeDS包 将WEB-INF 文件夹下的所有文件夹和文件 拷贝到/WebRoot/WEB-INF/目录下

注意:包括web.xml 全覆盖

b.打开Web.xml 进行配置spring

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span data-mce-= "" ><!--在web.xml中引入Spring的代码-->
         <context-param>
                 <!-- 参数名为contextConfigLocation -->
                 <param-name>contextConfigLocation</param-name>
                 
                 <!-- 配置多个文件之间,以 "," 隔开 -->
                 <param-value>/WEB-INF/classes/app.xml</param-value>
         </context-param>
         <listener>
                 <listener- class >
                         org.springframework.web.context.ContextLoaderListener
                 </listener- class >
         </listener>
</span>

 

 

 

(此处app.xml为spring配置文件名 默认为applicationContext.xml)

到此为止..SSH配置完毕..部署运行一下..看是否有错误..

如有错误 自己 改正. 在确保SSH集成后无错 方可 继续.!!

以下步骤很重要

b.新建包com.sshf.study.flash

在该包下新建二个类 SpringFactoryInstance.java FlexFactoryImpl.java

SpringFactoryInstance.java代码

 

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<span data-mce-= "" > package com.sshf.study.flash;
   import org.apache.commons.logging.Log;
   import org.apache.commons.logging.LogFactory;
   import org.springframework.beans.BeansException;
   import org.springframework.beans.factory.NoSuchBeanDefinitionException;
   import org.springframework.context.ApplicationContext;
   import org.springframework.web.context.support.WebApplicationContextUtils;
   import flex.messaging.FactoryInstance;
   import flex.messaging.FlexContext;
   import flex.messaging.FlexFactory;
   import flex.messaging.config.ConfigMap;
   import flex.messaging.services.ServiceException;
   public class SpringFactoryInstance extends FactoryInstance {
       private Log log = LogFactory.getLog(getClass());
       SpringFactoryInstance(FlexFactory factory, String id, ConfigMap properties) {
           super (factory, id, properties);
       }
       public Object lookup() {
           System.out.println( "3---spring工厂类的方法lookup" );
           ApplicationContext appContext = WebApplicationContextUtils.getRequiredWebApplicationContext(FlexContext.getServletConfig().getServletContext());
           String beanName = getSource();
           try {
               log.info( "Lookup bean from Spring ApplicationContext: " + beanName);
               return appContext.getBean(beanName);
           } catch (NoSuchBeanDefinitionException nex) {
               ServiceException e = new ServiceException();
               String msg = "Spring service named '" + beanName + "' does not exist." ;
               e.setMessage(msg);
               e.setRootCause(nex);
               e.setDetails(msg);
               e.setCode( "Server.Processing" );
               throw e;
           } catch (BeansException bex) {
               ServiceException e = new ServiceException();
               String msg = "Unable to create Spring service named '" + beanName + "'." ;
               e.setMessage(msg);
               e.setRootCause(bex);
               e.setDetails(msg);
               e.setCode( "Server.Processing" );
               throw e;
           } catch (Exception ex) {
               ServiceException e = new ServiceException();
               String msg = "Unexpected exception when trying to create Spring service named '" + beanName + "'." ;
               e.setMessage(msg);
               e.setRootCause(ex);
               e.setDetails(msg);
               e.setCode( "Server.Processing" );
               throw e;
           }
      }
}
</span>

 

 

FlexFactoryImpl.java代码

 

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
27
28
<span data-mce-= "" > package com.sshf.study.flash;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import flex.messaging.FactoryInstance;
import flex.messaging.FlexFactory;
import flex.messaging.config.ConfigMap;
  public class FlexFactoryImpl implements FlexFactory {
       private Log log = LogFactory.getLog(getClass());
               /*override interface method*/
       public void initialize(String id, ConfigMap configMap) {
           System.out.println( "1---flex工厂实现类重写的方法initialize" );
       }
       /*override interface method*/
       public FactoryInstance createFactoryInstance(String id, ConfigMap properties) {
           System.out.println( "2---flex工厂实现类重写的方法createFactoryInstance" );
           log.info( "Create FactoryInstance." );
           SpringFactoryInstance instance = new SpringFactoryInstance( this , id, properties);
           instance.setSource(properties.getPropertyAsString(SOURCE, instance.getId()));
           return instance;
       }
       /*override interface method*/
       public Object lookup(FactoryInstance instanceInfo) {
           System.out.println( "4---flex工厂实现类重写的方法lookup" );
           log.info( "Lookup service object." );
           return instanceInfo.lookup();
       }
   }
</span>

 

 

打开/WEB-INF/flex/services-config.xml 配置文件

加入FlexFactory实现类

 

 <factories>
               <factory id="flexFactoryImpl" class="com.sshf.study.flash.FlexFactoryImpl"/>
</factories>

 

 

 

 

打开/WEB-INF/flex/remoting-config.xml 配置文件

然后将 services中的factory的实现类所调用的类配置关联

 

    <destination id="flash">
              <properties>
                  <!-- flexFactory实现类 -->
                  <factory>flexFactoryImpl</factory>
                  <!-- 对外的访问类  为spring配置中的bean id -->
                  <source>HW</source>
                  <scope>application</scope>
              </properties>
     </destination>

 

 

到此为止 配置完毕

部署运行..有错误改之

4.新建一个flex 项目

并新建一个mxml

不一一做介绍了..添加一个 文本框 和一个 按钮..

点击 按钮 将 文本框中 字符串 传入到 HelloWordImpl 的 sayHello中.并取返回值 输出

代码如下:

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark" 
                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
        <fx:Script>
                <!--[CDATA[
                        import mx.controls.Alert;
                        import mx.rpc.events.FaultEvent;
                        import mx.rpc.events.ResultEvent;
                        protected function button1_clickHandler(event:MouseEvent):void
                        {
                                var remote:RemoteObject = new RemoteObject();    
                                remote.destination = "flash";//remoting-config中destination  ID
                                //访问地址可改   在web.xml中修改   这里默认
                                remote.endpoint = "http://localhost:8080/myWeb/messagebroker/amf";    
                                remote.addEventListener(ResultEvent.RESULT, myResult);//添加访问成功后回调函数                    
                                remote.addEventListener(FaultEvent.FAULT,fault);//添加访问失败后回调函数 
                                remote.sayHello(u.text);//执行 服务器类的 sayHell方法,       
                        }
                        private function myResult(evt:ResultEvent):void{
                                Alert.show(evt.result.toString());    
                        }    
                        
                        private function fault(evt:FaultEvent):void{    
                                Alert.show(evt.fault.message);    
                        }   
                ]]-->
        </fx:Script>
        <fx:Declarations>
                <!-- 将非可视元素(例如服务、值对象)放在此处 -->
                <mx:RemoteObject id="say" destination="Test">        
                </mx:RemoteObject>
        </fx:Declarations>
        <s:Button x="451" y="251" label="按钮" click="button1_clickHandler(event)"/>
        <s:TextInput x="290" y="250" id="u"/>
</s:Application>

比较简单的方法是,拷贝FlashBuilder中bin-debug下的相关HTML以及需要的js css swf文件,粘贴到eclipse中ssh工程的webcontent目录中,运行webservice,浏览器直接打开相关的HTML,flex调用ssh中的api。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值