润乾报表查询表单应用Flex拖拽控件

 
 

润乾报表默认提供了很多种填报编辑风格,如下拉树,下拉列表框,复选框等等,同时润乾报表也开放了编辑风格的扩展接口,用户可以根据具体需求定制开发多样化的编辑风格。具有拖拽功能的编辑界面,允许用户使用鼠标选择某个对象并在屏幕上进行移动,这样用户可在列表之间拖放选择数据,能够使界面操作友好性得到提升。本文介绍如何利用自定义编辑风格实现在查询表单中应用flex拖拽控件。

 

一:FLEX列表类控件的拖放行为:

在flex中,很多列表控件已经包含了拖放操作的定义,只需要在定义组件中的一些属性就可以实现拖放行为。

下面介绍本文中用到的拖拽列表的实现:

1.       初始化列表数据源:

private function initApp():void {

   srclist.dataProvider =

          new ArrayCollection(['选项A', '选项B', '选项C', '选项D', '选项E']);

   destlist.dataProvider = new ArrayCollection([]);

}

2.       定义数据源列表和目标列表,分别放置待选择拖拽的数据及被放置数据:

<mx:List id="srclist"

                    allowMultipleSelection="true"

                    dragEnabled="true"

                    dragMoveEnabled="true"

                    dropEnabled="true"/>

<mx:List id="destlist"

                    dropEnabled="true"

                    dragMoveEnabled="true"

                    dragEnabled="true"/>

二.报表设计中使用自定义拖拽控件

1.       建立查询表单,在填报单元格中使用自定义控件:

 

 

 

2.       自定义控件显示和隐藏的js函数show(),hidden(),需要在报表设计发布的jsp中定义。

Parent.jsp部分代码如下:

<script type="text/javascript">

//自定义控件显示

function show()

{

var cell = event.srcElement;

    onOpenWindow(cell.id);

}   

//自定义控件隐藏  

function hidden()

{      

//这里可添加其他处理代码    

}

//打开模式窗口,模式窗口中显示child.html即为拖拽控件所在页面

function onOpenWindow(obj){    //showModalDialog的第二个参数是传递给子窗口的值,该函数返回的值是从子窗口传递过来的值。  

       //在子窗口可以通过window.dialogArguments方法获取   

       //如果不需要传递,这个参数就用window本身,本例中没有传递参数给子窗口

       var location="dialogLeft:"+window.event.screenX +"px;dialogTop:"+window.event.screenY+"px;dialogWidth:400px;dialogHeight:400px"

    var result = window.showModalDialog("child.html",window,location); 

//利用从子窗口的传递值刷新父窗口,父窗口可以执行查询

    if(result != null){      

           window.location="parent.jsp?arg1="+ result[0];

    }

}     

</script>

……

<table id="param_tbl" align="center"><tr><td>

       <report:param name="form1" paramFileName="report_arg.raq"

           needSubmit="no"

           params="<%=param.toString()%>"

          

       />

    </td></tr><tr>

    <td><a href="javascript:_submit( form1 )"><img src="../images/query.jpg" border=no style="vertical-align:middle"></a></td>

    </tr></table>

    <table  align="center">

       <tr><td>

       <report:html name="report1" reportFileName="report.raq"

           funcBarLocation=""

           needPageMark="yes"

           generateParamForm="no"

           params="<%=param.toString()%>"

           exceptionPage="/reportJsp/myError2.jsp"

           width="-1"

          

       />

</td>

</tr></table>

 

 

3.       在模式窗口中显示拖拽控件, 在需要嵌入FlEX拖拽列表的HTML代码中使用<object>和<embed>标签来调用控件,代码如下:

 

<object id='mySwf'

                   classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/

                   flash/swflash.cab#version=9,0,0,0' height='400' width='400'>

    <param name='src' value='../Communicate-debug/ListtoListMove.swf'/>

    <param name='flashVars' value=''/>

    <embed name='mySwf' src='../Communicate-debug/ListtoListMove.swf'

             pluginspage='http://www.macromedia.com/shockwave/download/

                       index.cgi?P1_Prod_Version=ShockwaveFlash'

                       height='100%' width='100%' flashVars=''/>

</object>

注意因为模式窗口最终要返回拖拽列表中目标列表中的选择项,当用户拖拽完成,点击确定时需要将选择结果返回给报表,故需要完成flex控件和外部程序的交互。在flex中可以获得外部HTML代码中的JavaScript函数,这样就可以从flex传递到外部页面供报表调用了。

首先我们在外部包装的html页面上定义javascript函数,其功能是将参数返回给主报表页面,并关闭模式窗口。

<SCRIPT LANGUAGE="JavaScript">

           function onOK(a){   

           var runValue=new Array;

           alert(a);

           runValue[0]=a;   

           window.returnValue = runValue;   

           window.close();

           }

    </SCRIPT>

接下来我们需要在FLEX控件的MXML代码中定义“确定”按钮,调用ActionScript中的callWrapper()函数以调用外部包装的javascript函数onOK()。

<mx:Script>

            import flash.external.*;

     public function callWrapper():void {

        var s:String;

        if (ExternalInterface.available) {

           var wrapperFunction:String = "onOK";

           s = ExternalInterface.call(wrapperFunction,destlist.dataProvider.toString());

        } else {

           s = "Wrapper not available";

        }

        trace(s);

     }

</mx:Script>

 

 

三、实现效果:

1.查询表单中单击单元格打开拖拽选择窗口:

 

 

2.拖拽完成后点击OK,返回报表查询页面,并返回拖拽选择的查询参数。

 

http://knowledgewang.blog.sohu.com/213106384.html