大家通过前面的内容已经基本可以简单的使用Flexpaper了,但某些时候,我们会觉得FlexPaperViewer的某些内容不适合显示出来,如Flexpaper的打印、官方介绍、logo等,这时候我们就需要对Flexpaper进行二次开发,修改Flexpaper的源码来达到效果。
1)caurina.transitions,com.adobe为actionscript类包
2)com.devaldi为devaldi公司开发的Flexpaper核心类包,如上图红色框部分。 其中:controls为主控部分,events为事件处理部分,skinning为UI设置部分,streaming为文 件流处理部分。
3)libs下被引用FlexPaper_Resources.swc为com.devaldi调用的资源库,我们可以看到一些abc(ActionScript bytecode(字节码))文件,编译过看不到源代码,ABC文件不可以单独运行,必须放入SWF(.swf) 文件中才可以被Flash Player执行。
4)bin-debug目录,mxml文件编译目录。
5)bin-release目录,mxml文件发布目录。
6)local目录,flexpaper加载的本地化文件。
7)com.erim是我自己的一些业务相关的文件,不需要关心。
<?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:fp="com.devaldi.controls.flexpaper.*" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="applicationCreationCompleteHandler(event)" > <fx:Script> <![CDATA[ import com.erim.core.component.EAlert; import mx.core.FlexGlobals; import mx.events.FlexEvent; import mx.managers.CursorManager; /** 基础加载swf的url */ [Bindable]public var swfUrl:String; // 初始化加载程序 protected function applicationCreationCompleteHandler(event:FlexEvent):void { // 设置志鉴目录数据源 swfUrl = FlexGlobals.topLevelApplication.parameters["swfUrl"]; // 添加事件,swf文件开始加载事件 pdf.addEventListener("onDocumentLoading",function():void{ // 弹出遮罩 EAlert.showShadow(); // 设置鼠标忙碌 CursorManager.setBusyCursor(); }); // 添加事件,swf文件加载完成事件 pdf.addEventListener("onDocumentLoaded",function():void{ // 隐藏遮罩 EAlert.hideShadow(); // 删除鼠标忙碌 CursorManager.removeBusyCursor(); }); } ]]> </fx:Script> <s:Group top="0" left="0" right="0" bottom="0"> <fp:FlexPaperViewer id="pdf" left="0" right="0" top="0" bottom="0" borderStyle="none" SearchMatchAll="true" SwfFile="{swfUrl}" ReadOnly="true" EncodeURI="true" FitPageOnLoad="false" FitWidthOnLoad="true" horizontalScrollPolicy="off" FullScreenAsMaxWindow="false" MaxZoomSize="5" MinZoomSize="0.3" rogressiveLoading="true" Scale="1" ZoomInterval="0.1" ZoomTime="0.6" ZoomTransition="easeOut" /> </s:Group> </s:Application>
备注:
1)上面的程序为我自己编写的一个基于flex4的程序,可以用于PDF转换SWF后的展示,swf地址可动态替换,在js调用的时候传入参数即可。
2)上面的代码使用的弹出遮罩,是我自己写的核心库,各位可自己编写本部分代码。
3)只对SwfFile的pdf属性做了动态替换,其他均使用的固定写法,若使用其他字段的动态,可添加绑定属性,添加方式同SwfFile。
于包com.devaldi.controls.flexpaper下查找mxml文件,FlexPaperViewer.mxml,本mxml文件对应的加载pdf展示页面布局。
<!-- 打印按钮 --> <st:GradientImageButton icon="{MenuIcons.PRINT_ICON}" styleName="toolbttn" width="20" click="printPaper(event)" toolTip="@Resource(key='Print', bundle='FlexPaper')" visible="{!ReadOnly}" includeInLayout="{!ReadOnly}" enabled="{PrintEnabled}" /> <mx:Image source="{MenuIcons.BAR}" width="3" height="21" visible="{!ReadOnly}" includeInLayout="{!ReadOnly}" />
若不需要该按钮,则可以将以上的代码注释掉,同理,页面上的其他按钮也可以去掉。顶部按钮依次显示为单页布局、双页布局、宽度自适应、高度自适应、旋转按钮、页面缩放、全屏、上一页、当前页号、总页数、下一页、选中文字、手形拖动。
于包com.devaldi.controls.flexpaper下查找mxml文件,FlexPaperViewer.mxml,显示swf文件加载进度部分的代码内含有FP关于我们的按钮。
<!-- swf文件加载进度 --> <mx:Canvas width="100%" id="cnv_info" horizontalScrollPolicy="off" verticalScrollPolicy="off" height="100%"> <st:GradientImageButton id="bttnInfo" left="{cnv_info.width-21}" visible="false" icon="{MenuIcons.SMALL_GRAY}" styleName="toolbttn" width="20" height="20" click="showInfo(event);" toolTip="@Resource(key='About', bundle='FlexPaper')" addedToStage="{new MenuIcons.SMALL_TRANSPARENT().width > 10}" /> <st:GradientLabel id="lblProgress" left="{cnv_info.width-26}" textAlign="center" y="4" fontSize="8" height="19" width="32" text="" tabIndex="18"/> <ct:Spinner id="spin1" left="{cnv_info.width-22}" styleName="gradientlines" y="-1" startImmediately="false" spinnerType="gradientcircle" width="22" height="22" /> </mx:Canvas>
此段代码不能通过注释来达到删除FP的效果,因为注释掉后会发现更多的问题,查找修改起来更
麻烦,所以我们通过查找FlexPaperViewer.mxml文件会找到下面三行代码,我们把它们注释掉就
可以达到效果。
//bttnInfo.visible = false; //bttnInfo.visible = (new MenuIcons.SMALL_TRANSPARENT().width > 10); //bttnInfo.visible = (new MenuIcons.SMALL_TRANSPARENT().width > 10);
于包com.devaldi.controls.flexpaper下查找mxml文件,FlexPaperViewer.mxml,找到方法papersLoadingHandler 于最后面添加代码如下:
protected override function papersLoadingHandler(event:Event):void{ //spin1.start(); //spin1.visible = true; spin1.visible = false; super.papersLoadingHandler(event); paper1.removeElementAt(2); }
1)右键项目,选择导出,会出现导出提示框,列表中选择“Flash Builder”->“发行版”
2)选择导出目录,导出发布版
3)生成完毕后,可以看到bin-release文件夹下有FlexPaperViewer.swf,可直接使用。
<script type="text/javascript" src="$staticRoot/third/flexpaper/flexpaper.js"> <script type="text/javascript" src="$staticRoot/third/flexpaper/swfobject.js"> <div id="flashContent"></div> <script type="text/javascript"> var swfVersionStr = "11.1.0"; var xiSwfUrlStr = "$staticRoot/third/flexpaper/playerProductInstall.swf"; var flashvars = {}; flashvars.swfUrl = "$articleSwfUrl"; var params = {}; params.quality = "high"; params.bgcolor = "#ffffff"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "FlexPaperViewer"; attributes.name = "FlexPaperViewer"; attributes.align = "middle"; swfobject.embedSWF( "$staticRoot/third/flexpaper/FlexPaperViewer4.swf", "flashContent", "100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes); swfobject.createCSS("#flashContent", "display:block;text-align:left;"); </script> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlexPaperViewer"> <param name="movie" value="FlexPaperViewer4.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="FlexPaperViewer4.swf" width="100%" height="100%"> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--<![endif]--> <!--[if gte IE 6]>--> <p> Either scripts and active content are not permitted to run or Adobe Flash Player version 11.1.0 or greater is not installed. </p> <!--<![endif]--> <a href="http://www.adobe.com/go/getflashplayer"> <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" /> </a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </noscript>
备注:
以上flashvars仅使用了参数swfUrls,可根据需要自行添加对应的参数!
本系列文章主要是基于ajava上教程的转载,由于我使用的是flex4.6,所以对文章中的部分内容做了相应的变更。后面还有一篇文章是介绍swfTools的使用,希望对您有所帮助。