关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单、书签等相关问题

 


2015-03-02 更新文章,由于需求修改,更改了flexpaper插件,故增加第9、10、11小节,下载代码时请注意。

 

 

 

先废话几句。最近用到文档在线浏览功能,之前用的是print2flash(一个工具,文档直接转flash,自带翻页搜索等一系列功能),由于无法与js进行交互,所以改用flexpaper。

由于之前没接触过Flex,了解不多,所以文章难免有不合适的地方。希望各位给予指正。

首先感谢ajava.org的mark,一系列文章有很多的帮助,少走很多弯路。

 

开发工具:1.Adobe Flash Builder 4.5。下载地址:http://trials3.adobe.com/AdobeProducts/FLBR/4_5/win32/FlashBuilder_4_5_LS10.exe (目前已失效)

     2.Flash Player Debugger 。 下载地址:http://download.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_ax_debug.exe (目前已失效)

     3.Flex项目用的是Flex SDK4.5。

 

如果你没有Flex基础或不了解FlexPaper,强烈推荐你参考mark的文章。

具体修改FlexPaper的步骤就不多说了,随便百度一下,都是一大堆,具体的可以参阅mark的文章。PDF版下载

提供编译后的文件下载(不带间隔时间限制)。下载 

修改后的FlexPaper项目文件下载(不带间隔时间限制)。csdn资源 (如果没有积分可以评论留下邮箱)

FlexPaper 2.1.2版本项目的源代码,有bug。csdn资源 

FlexPaper 2.1.2Demo。下载地址:https://code.google.com/p/flexpaper/downloads/detail?name=FlexPaper_2.1.2.zip&can=2&q=

 

下面说说主要内容。

1.去关于、Logo和打印功能可以参照mark系列的文章或者文末的链接

 

2.我修改的打印按钮是可通过属性进行控制的,默认不显示

  官网demo中要修改flexpaper.js中传递参数的地方,加入PrintEnabled和PrintVisible属性。

 1     window[instance] = flashembed(id, {
 2         src                            : _jsDirectory+"../FlexPaperViewer.swf",
 3         version                        : [10, 0],
 4         expressInstall                : "js/expressinstall.swf",
 5         wmode                        : _WMode
 6     },{
 7         ElementId               : id,
 8         SwfFile                  : _SWFFile,
 9         PdfFile                  : _PDFFile,
10         IMGFiles                  : _IMGFiles,
11         JSONFile                 : _JSONFile,
12         useCustomJSONFormat     : config.useCustomJSONFormat,
13         JSONPageDataFormat         : config.JSONPageDataFormat,
14         JSONDataType             : _JSONDataType,
15         Scale                     : (config.Scale!=null)?config.Scale:0.8,
16         ZoomTransition             : (config.ZoomTransition!=null)?config.ZoomTransition:'easeOut',
17         ZoomTime                 : (config.ZoomTime!=null)?config.ZoomTime:0.5,
18         ZoomInterval             : (config.ZoomInterval)?config.ZoomInterval:0.2,
19         FitPageOnLoad             : (config.FitPageOnLoad!=null)?config.FitPageOnLoad:false,
20         FitWidthOnLoad             : (config.FitWidthOnLoad!=null)?config.FitWidthOnLoad:false,
21         FullScreenAsMaxWindow     : (config.FullScreenAsMaxWindow!=null)?config.FullScreenAsMaxWindow:false,
22         ProgressiveLoading         : (config.ProgressiveLoading!=null)?config.ProgressiveLoading:false,
23         MinZoomSize             : (config.MinZoomSize!=null)?config.MinZoomSize:0.2,
24         MaxZoomSize             : (config.MaxZoomSize!=null)?config.MaxZoomSize:5,
25         SearchMatchAll             : (config.SearchMatchAll!=null)?config.SearchMatchAll:false,
26 //        PrintEnabled             : (config.PrintEnabled!=null)?config.PrintEnabled:false,
27 //        PrintVisible             : (config.PrintVisible!=null)?config.PrintVisible:false,
28         SearchServiceUrl         : config.SearchServiceUrl,
29         InitViewMode             : config.InitViewMode,
30         BitmapBasedRendering     : (config.BitmapBasedRendering!=null)?config.BitmapBasedRendering:false,
31         StartAtPage             : config.StartAtPage,
32         PrintPaperAsBitmap        : (config.PrintPaperAsBitmap!=null)?config.PrintPaperAsBitmap:false,
33         AutoAdjustPrintSize        : (config.AutoAdjustPrintSize!=null)?config.AutoAdjustPrintSize:false,
34 
35         EnableCornerDragging     : ((config.EnableCornerDragging!=null)?config.EnableCornerDragging:true), // FlexPaper Zine parameter
36         BackgroundColor         : config.BackgroundColor, // FlexPaper Zine parameter
37         PanelColor                 : config.PanelColor, // FlexPaper Zine parameter
38         BackgroundAlpha         : config.BackgroundAlpha, // FlexPaper Zine parameter
39         UIConfig                : config.UIConfig,  // FlexPaper Zine parameter
40 
41         ViewModeToolsVisible     : ((config.ViewModeToolsVisible!=null)?config.ViewModeToolsVisible:true),
42         ZoomToolsVisible         : ((config.ZoomToolsVisible!=null)?config.ZoomToolsVisible:true),
43         NavToolsVisible         : ((config.NavToolsVisible!=null)?config.NavToolsVisible:true),
44         CursorToolsVisible         : ((config.SearchToolsVisible!=null)?config.CursorToolsVisible:true),
45         SearchToolsVisible         : ((config.SearchToolsVisible!=null)?config.SearchToolsVisible:true),
46         StickyTools                : config.StickyTools,
47         Toolbar                 : config.Toolbar,
48         DocSizeQueryService     : config.DocSizeQueryService,
49 
50         RenderingOrder             : config.RenderingOrder,
51 
52         localeChain             : (config.localeChain!=null)?config.localeChain:"en_US",
53         jsDirectory             : _jsDirectory,
54         cssDirectory             : _cssDirectory,
55         localeDirectory            : _localeDirectory,
56         key                     : config.key
57     });
flexpaper.js

  调用的地方:

 1 $('#documentViewer').FlexPaperViewer(
 2                   { config : {
 3                          DOC : escape(getDocumentUrl(startDocument)),
 4                          Scale : 2,
 5                          ZoomTransition : 'easeOut',
 6                          ZoomTime : 0.5,
 7                          ZoomInterval : 0.2,
 8                          FitPageOnLoad : true,
 9                          FitWidthOnLoad : false,
10                          FullScreenAsMaxWindow : false,
11                          ProgressiveLoading : false,
12                          MinZoomSize : 0.2,
13                          MaxZoomSize : 5,
14                          SearchMatchAll : false,
15 //                         PrintEnabled:false,
16 //                         PrintVisible:true,
17                          InitViewMode : 'Portrait',
18                          RenderingOrder : '<%=(configManager.getConfig("renderingorder.primary") + ',' + configManager.getConfig("renderingorder.secondary")) %>',
19 
20                          ViewModeToolsVisible : true,
21                          ZoomToolsVisible : true,
22                          NavToolsVisible : true,
23                          CursorToolsVisible : true,
24                          SearchToolsVisible : true,
25 
26                            DocSizeQueryService : 'services/swfsize.ashx?doc=' + startDocument,
27                            jsDirectory : 'js/',
28 
29                          JSONDataType : 'jsonp',
30                          key : '<%=configManager.getConfig("licensekey") %>',
31 
32                            localeChain: 'zh_CN'
33 
34                          }}
35                 );
simple_document.aspx

3.修改搜索bug

  2.1.2版本的源码搜索中有Bug.第一次和第二次搜索的结果并存。修改后的版本修复整个文件搜索。

  但是分页加载时搜索只能搜索当前页,官网Demo也是这样,Flex一窍不通,不知如何修改。囧。。。

  修改View.as中searchText函数中for循环部分。改为:

 1 if(clearmarklist){
 2                         if(_markList!=null){
 3                             for(var i:int=0;i<_markList.length;i++){
 4                                 if(_markList[i]!=null && _markList[i].parent !=null){
 5 //                                    for(var ic:int=0;ic<_markList[i].numChildren;ic++){
 6 //                                        if(_markList[i].getChildAt(ic) is SearchShapeMarker){
 7 //                                            _markList[i].removeChildAt(ic);
 8 //                                        }
 9 //                                    }
10                                     _markList[i].parent.removeChild(_markList[i]);
11                                 }                        
12                             }
13                         }
14                         
15                         _markList = new Array(numPages);
16                     }
View.as

4.修改缩略图bug

  当时遇到这问题的时候,百度了一下,说替换googlecode中的SDK3.5的swc就可以。但是失败。

  自己尝试修改,发现把Flex项目属性>Flex编译器>Flex SDK版本>”使用兼容Flex 3兼容模式“,然后会报错,再将FlexPaperViewer_Base.mxml中第9行的borderThickness="1"更改为如下四个属性即可:

paddingBottom="0"
paddingLeft="0"
paddingRight="0"
paddingTop="0"

5.添加按钮

  修改FlexPaperViewer.mxml中<mx:HBox>节点代码。例如我加的一个书签按钮。

<mx:HBox styleName="toolbarBackground" width="100%" height="26" borderStyle="solid" verticalScrollPolicy="off" horizontalScrollPolicy="off" paddingTop="2" paddingLeft="2" horizontalGap="3">
        <st:GradientImageButton id="PrintButton" icon="{MenuIcons.PRINT_ICON}" styleName="toolbttn" width="20" click="printPaper(event)" toolTip="@Resource(key='Print', bundle='FlexPaper')" visible="{PrintVisible}" includeInLayout="{!ReadOnly}" enabled="{PrintEnabled}"  />
        <mx:Image id="PrintBar" source="{MenuIcons.BAR}" width="3" height="21" includeInLayout="{!ReadOnly}" visible="{PrintVisible}" />
        
        <st:GradientImageButton icon="@Embed('../src/img/bookmarks.png')" styleName="toolbttn" width="20" click="paper1.bookMarks();" toolTip="@Resource(key='BookMarks', bundle='FlexPaper')" tabIndex="1" visible="{ViewModeToolsVisible}" includeInLayout="{ViewModeToolsVisible}"/>
FlexPaperViewer.mxml

6.javascript与Flex交互

  javascript交互分两种情况,1是Flex调js,2是js调用Flex。

  可以参考:http://www.cnblogs.com/tiandi/archive/2012/06/03/2532977.html

       http://wymsxty.blog.163.com/blog/static/77790858201083045541915/

       http://blog.csdn.net/kunoy/article/details/7903258  这里js调用Flex的时候,javascript可能会报错。即window.FlexPaperViewer_Instance.getApi()中FlexPaperViewer_Instance会是undefined。我没找到什么原因。可参照上面两种,记得引入swfobject.js

7.去右键菜单

  注释掉FlexPaperViewer_Base.mxml中所有contextMenu.customItems.push()的代码。contextMenu.clipboardMenu三行属性都改为false.

1 contextMenu.clipboardMenu = false;//是否使用剪贴板菜单
2                     contextMenu.clipboardItems.copy = false;
3                     contextMenu.clipboardItems.selectAll = false;
右键菜单

 8.书签功能

  书签功能原理是点击按钮,获取当前页数,然后需要和Js进行交互,Js保存当前页数。

      按钮添加在FlexPaperViewer.mxml中<mx:HBox> 节点中:

 <st:GradientImageButton icon="@Embed('../src/img/bookmarks.png')" styleName="toolbttn" width="20" click="paper1.bookMarks();" toolTip="@Resource(key='BookMarks', bundle='FlexPaper')" tabIndex="1" visible="{ViewModeToolsVisible}" includeInLayout="{ViewModeToolsVisible}"/>
FlexPaperViewer.mxml
        public function bookMarks():void{
            var m:String = ExternalInterface.call("ShowCurrentPage",_currPage);
            trace(m);
        }
Viewer.as

     通过js和按钮进行交互。

 


以下内容为更新内容,更新时间:2015-03-02,文中所指行数为修改代码的行数。

 

9.去掉右侧滚动条和工具栏文本框

    由于需要增加现有需求,需要增加翻页时间间隔功能,所以添加9和10 两小节内容。

    屏蔽右侧滚动条,修改内容Viewer.as文件中createDisplayContainer 方法(1508行,_paperContainer 变量实例化之后),添加:

//屏蔽右侧滚动条
_paperContainer.verticalScrollPolicy="off";

   替换工具栏文本框防止翻页,修改FlexPaperViewer.mxml中<mx:HBox/> 节点中:

        <!-- 屏蔽切换页-->
        <!--<st:GradientTextInput id="txtPage" visible="{NavToolsVisible}" width="45" height="21"
                              enabled="{paper1.ViewMode == ViewModeEnum.PORTRAIT||paper1.ViewMode == ViewModeEnum.TWOPAGE||paper1.ViewMode == ViewModeEnum.SINGLEPAGE}"
                              fontSize="9" includeInLayout="{NavToolsVisible}"
                              keyDown="txtPageNumKeyDown(event)" tabIndex="12"
                              text="{formatPageNumber(paper1.currPage)}"
                              toolTip="@Resource(key='Current Page', bundle='FlexPaper')"/>-->
        <!-- 修改切换页为文本-->
        <st:GradientLabel id="txtPage" visible="{NavToolsVisible}" width="45" height="21" paddingTop="2"
                          enabled="{paper1.ViewMode == ViewModeEnum.PORTRAIT||paper1.ViewMode == ViewModeEnum.TWOPAGE||paper1.ViewMode == ViewModeEnum.SINGLEPAGE}"
                          fontSize="9" includeInLayout="{NavToolsVisible}" tabIndex="12"
                          text="{formatPageNumber(paper1.currPage)}"
                          toolTip="@Resource(key='Current Page', bundle='FlexPaper')"/>
添加节点

 

10.增加翻页间隔

 

    增加翻页间隔,用到计时器,而且开放给外部js传参,固定间隔时间。

  1. 首先在默认包中FlexPaperViewer.mxml文件中定义外部调用参数(62行)
    [Bindable]
    public var _IntervalSecond:Number = 0;

    在InitApp方法中获取Js传的值,默认值为5(116行).

    _IntervalSecond = getNumber(params,"IntervalSecond",5);

    在FlexPaperViewer_Base.mxml文件中定义变量,供传值(141行)

    [Bindable]
    public var IntervalSecond:Number=0;

    在FlexPaperViewer.mxml文件末尾的<fp:FlexPaperViewer />中传参给FlexPaperViewer_Base。

    IntervalSecond="{_IntervalSecond}"
  2. 在FlexPaperViewer_Base.mxml同级目录中的FlexPaperViewer.mxml文件中添加如下变量和方法(207行):
                //计时器参数
                public var pstartTime:Number = 0;
                public var pstarttimer:Timer;
                
                //上次阅读到的页数
                public  var lastPageNumber:Number=0;
                /**
                 * 开始计时
                 */
                public function funTimer(event:TimerEvent):void{
                    pstartTime++;
                }
                
                /**
                 * 停止计时 并归0
                 */
                public function PageTimerReset():void{
                    pstarttimer.reset();
                    pstartTime = 0;
                    pstarttimer.start();
                }
                
                //上次阅读页数
                private var _oldpage:Number=1;
                
                //是否已显示alert
                private var isShowAlert:Boolean=false;
    
                // 关闭后触发的事件  
                private function alertClickFirst(event:CloseEvent):void {  
                    isShowAlert=false;
                    //跳转指定页
                    paper1.gotoPage(_oldpage);
                } 
    FlexPaperViewer.mxml

    在initApp方法中添加计时器启动代码(64行):

                public function initApp():void {  
                    //去除LOGO
                    paper1.removeElementAt(2); 
                    
                    //初始化,计时器操作
                    pstarttimer=new Timer(1000);//1000是指1秒
                    pstarttimer.addEventListener(TimerEvent.TIMER, funTimer);
                    pstarttimer.start();
                }
    initApp

    修改formatPageNumber方法(243行):

                protected function formatPageNumber(n:Number):String
                {
                    //如果已弹窗,不继续执行
                    if(isShowAlert) return _oldpage.toString();
                    
                    //如果当前页面不等于上次打开的页面,并且当前页面大于上次打开页面,并且时间小于设定间隔,开始提醒
                    if(n!=1 && n!=_oldpage && n>lastPageNumber && pstartTime<IntervalSecond)
                    {
                        //如果已经弹窗,就不再弹窗
                        if(!isShowAlert){
                            isShowAlert=true;
                            Alert.show("读书有三到,谓心到,眼到,口到。","", Alert.OK  , this, alertClickFirst);
                        }
                        return _oldpage.toString();
                    }
                    else
                    {
                        if(_oldpage!=n)
                            //计时器重启
                            PageTimerReset();
                        
                        _oldpage=n;
                        
                        if(n>lastPageNumber)
                            lastPageNumber=n;
                        if(viewer.ViewMode == ViewModeEnum.TWOPAGE)    
                            return viewer.currPage.toString() + "-" + (viewer.currPage+1).toString();
                        else
                            return n.toString();
                    }
                }
    formatPageNumber

 11.增加上次阅读到xx功能

      由于添加此功能,所以带翻页间隔的代码中就屏蔽掉了书签按钮。

      这里的记录页数,是通过Js和FlexPaper进行交互获取,需要你自己处理保存在服务器中。

      在默认包中FlexPaperViewer.mxml中定义_StartPage 变量,并在initApp方法中进行获取Js传的值,最后传递给FlexPaperViewer_Base中,同第10节定义变量。

[Bindable]
public var _StartPage:Number;
...

_StartPage=getNumber(params,"StartPage",1);

...

StartAtPage="{_StartPage}"

    在FlexPaperViewer_Base.mxml中修改viewercreationCompleteHandler(205行) 和documentLoadedHandler(426行)方法:

    private function viewercreationCompleteHandler(e:FlexEvent):void{
                if(_documentLoadedFirst && !_stageinitialized){
                    dispatchEvent(new DocumentLoadedEvent(DocumentLoadedEvent.DOCUMENT_LOADED,viewer.numPages));
                    if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){
                        viewer.gotoPage(StartAtPage);
                    }
                    //flash.utils.setTimeout(function():void{
                        if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);StartAtPage=-1;}
                    //},1000);
                }
                
                _stageinitialized = true;
            }
viewercreationCompleteHandler
protected function documentLoadedHandler(event:Event):void{
                if(_stageinitialized){
                    dispatchEvent(event);
                    
                    if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);}
                    flash.utils.setTimeout(function():void{
                        if(StartAtPage!=1&&!isNaN(StartAtPage)&&StartAtPage>0){viewer.gotoPage(StartAtPage);StartAtPage=-1;}
                    },1000);
                }else{
                    _documentLoadedFirst = true;
                }
            }    
documentLoadedHandler

    在FlexPaperViewer_Base.mxml同级目录下FlexPaperViewer.mxml中<mx:HBox />节点下增加(用于显示提示信息):

<mx:HBox id="TitileBox" width="99%" backgroundColor="#FFF9F2" borderColor="#F6CB1E"
             textAlign="center">
        <mx:Label id="lblTitleMsg" width="90%" buttonMode="true" click="lblTitleMsg_clickHandler()"
                  fontSize="15" mouseChildren="false" useHandCursor="true"/>
        <mx:Label id="lblCloseMsg" width="20" buttonMode="true" click="lblCloseMsg_clickHandler()"
                  fontSize="20" mouseChildren="false" text="×" toolTip="关闭提示" useHandCursor="true"/>
    </mx:HBox>
用于显示提示信息

   在FlexPaperViewer.mxml中 定义跳转和关闭方法(282行):

            protected function lblCloseMsg_clickHandler():void
            {
                TitileBox.removeAllElements();
            }
            
            protected function lblTitleMsg_clickHandler():void
            {
                paper1.gotoPage(1);
            }
跳转和关闭方法

    修改documentLoadedHandler 方法(114行):

            protected override function documentLoadedHandler(event:Event):void{
                spin1.visible = false;
                lblProgress.visible = false;
                spin1.stop();
                bttnInfo.visible =false;
                super.documentLoadedHandler(event);
                
                if(StartAtPage==1 || isNaN(StartAtPage) || StartAtPage==0)
                    TitileBox.removeAllElements();
                else
                {
                    _oldpage=StartAtPage;
                    lblTitleMsg.text="您上次阅读到第 "+StartAtPage+" 页,点击这里返回第 1 页";
                }
            }
documentLoadedHandler

 

带翻页间隔二次开发源代码:下载

 

编译过版本:下载

2015-03-02 更新内容完


 

 

另外推荐几篇关于FlexPaper的博客:

flexPaper简单二次开发:http://www.cnblogs.com/longjunhao00/archive/2012/11/22/2782036.html

FlexPaper阅读器开发手册(原创) :http://wujwmail.blog.163.com/blog/static/17055443320119532652421/

FlexPaper二次开发问题及搜索高亮显示:http://www.cnblogs.com/zamlove/archive/2013/05/07/3065079.html

FlexPaper初步使用时遇到的问题解决:http://blog.sina.com.cn/s/blog_673c98be0101b49m.html

 

 

转载请注明出处:http://www.cnblogs.com/xcong/p/3142155.html 

 

 

posted @ 2013-06-20 16:33  xiaocong_soft  阅读(10141)  评论(33编辑  收藏  举报