回到顶部
您的当前位置: 编程语言> FLEX> FLEX项目> FlexPaper
FlexPaper(三)FlexPaper二次开发
2014-08-27 15:22:22
标签: 转载 FlexPaper 二次开发

大家通过前面的内容已经基本可以简单的使用Flexpaper了,但某些时候,我们会觉得FlexPaperViewer的某些内容不适合显示出来,如Flexpaper的打印、官方介绍、logo等,这时候我们就需要对Flexpaper进行二次开发,修改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是我自己的一些业务相关的文件,不需要关心。

编写自己的mxml应用程序(SDK4.6)
<?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。

删除Flexpaper浏览器的打印按钮

于包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}"  />

若不需要该按钮,则可以将以上的代码注释掉,同理,页面上的其他按钮也可以去掉。顶部按钮依次显示为单页布局、双页布局、宽度自适应、高度自适应、旋转按钮、页面缩放、全屏、上一页、当前页号、总页数、下一页、选中文字、手形拖动。

删除、修改Flexpaper浏览器FP关于我们按钮

于包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);

删除Flexpaper浏览器的LOGO

于包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);
}

Flexpaper重新编译打包

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的使用,希望对您有所帮助。