微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

原文:

先废话几句。最近用到文档在线浏览功能,之前用的是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。

具体修改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],153)">4         expressInstall                : "js/expressinstall.swf"5         wmode                        : _WMode
6     },153)">7         ElementId               : id,153)">8         SwfFile                  : _SWFFile,153)">9         PdfFile                  : _PDFFile,128)">10         IMGFiles                  : _IMGFiles,153)">11         JSONFile                 : _JSONFile,153)">12         useCustomJSONFormat     : config.useCustomJSONFormat,153)">13         JSONPageDataFormat         : config.JSONPageDataFormat,153)">14         JSONDataType             : _JSONDataType,153)">15         Scale                     : (config.Scale!=null)?config.Scale:0.816         ZoomTransition             : (config.ZoomTransition!=null)?config.ZoomTransition:'eaSEOut'17         ZoomTime                 : (config.ZoomTime!=null)?config.ZoomTime:0.518         ZoomInterval             : (config.ZoomInterval)?config.ZoomInterval:0.219         FitPageOnLoad             : (config.FitPageOnLoad!=null)?config.FitPageOnLoad:false20         FitWidthOnLoad             : (config.FitWidthOnLoad!=null)?config.FitWidthOnLoad:21         FullScreenAsMaxWindow     : (config.FullScreenAsMaxWindow!=null)?config.FullScreenAsMaxWindow:22         ProgressiveLoading         : (config.ProgressiveLoading!=null)?config.ProgressiveLoading:23         MinZoomSize             : (config.MinZoomSize!=null)?config.MinZoomSize:24         MaxZoomSize             : (config.MaxZoomSize!=null)?config.MaxZoomSize:525         SearchMatchAll             : (config.SearchMatchAll!=null)?config.SearchMatchAll:26 // PrintEnabled : (config.PrintEnabled!=null)?config.PrintEnabled:false,
27  PrintVisible : (config.PrintVisible!=null)?config.PrintVisible:false,153)">28         SearchServiceUrl         : config.SearchServiceUrl,153)">29         Initviewmode             : config.Initviewmode,153)">30         BitmapBasedRendering     : (config.BitmapBasedRendering!=null)?config.BitmapBasedRendering:31         StartAtPage             : config.StartAtPage,153)">32         PrintPaperAsBitmap        : (config.PrintPaperAsBitmap!=null)?config.PrintPaperAsBitmap:33         AutoAdjustPrintSize        : (config.AutoAdjustPrintSize!=null)?config.AutoAdjustPrintSize:34 
35         EnableCornerDragging     : ((config.EnableCornerDragging!=null)?config.EnableCornerDragging:true), FlexPaper Zine parameter36         BackgroundColor         : config.BackgroundColor,153)">37         PanelColor                 : config.PanelColor,153)">38         BackgroundAlpha         : config.BackgroundAlpha,153)">39         UIConfig                : config.UIConfig,153)">40 
41         viewmodeToolsVisible     : ((config.viewmodeToolsVisible!=null)?config.viewmodeToolsVisible:true),153)">42         ZoomToolsVisible         : ((config.ZoomToolsVisible!=null)?config.ZoomToolsVisible:43         NavToolsVisible         : ((config.NavToolsVisible!=null)?config.NavToolsVisible:44         CursorToolsVisible         : ((config.SearchToolsVisible!=null)?config.CursorToolsVisible:45         SearchToolsVisible         : ((config.SearchToolsVisible!=null)?config.SearchToolsVisible:46         StickyTools                : config.StickyTools,153)">47         Toolbar                 : config.Toolbar,153)">48         DocSizeQueryService     : config.DocSizeQueryService,153)">49 
50         RenderingOrder             : config.RenderingOrder,153)">51 
52         localeChain             : (config.localeChain!=null)?config.localeChain:"en_US"53         jsDirectory             : _jsDirectory,153)">54         cssDirectory             : _cssDirectory,153)">55         localeDirectory            : _localeDirectory,153)">56         key                     : config.key
57     });
flexpaper.js

调用的地方:

 1 $('#documentViewer').FlexPaperViewer(
 2                   { config : {
 3                          DOC : escape(getDocumentUrl(startDocument)),128)"> 4                          Scale : 2 5                          ZoomTransition : 'eaSEOut' 6                          ZoomTime : 0.5 7                          ZoomInterval : 0.2 8                          FitPageOnLoad : 9                          FitWidthOnLoad : 10                          FullScreenAsMaxWindow : 11                          ProgressiveLoading : 12                          MinZoomSize : 13                          MaxZoomSize : 14                          SearchMatchAll : 15 // PrintEnabled:false,
16  PrintVisible:true,153)">17                          Initviewmode : 'Portrait'18                          RenderingOrder : '<%=(configManager.getConfig("renderingorder.primary") + ',' + configManager.getConfig("renderingorder.secondary")) %>'19 
20                          viewmodeToolsVisible : 21                          ZoomToolsVisible : 22                          NavToolsVisible : 23                          CursorToolsVisible : 24                          SearchToolsVisible : 25 
26                            DocSizeQueryService : 'services/swfsize.ashx?doc=' + startDocument,153)">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 != for(var ic:int=0;ic<_markList[i].numChildren;ic++){
 if(_markList[i].getChildAt(ic) is SearchShapeMarker){ _markList[i].removeChildAt(ic); }                                    _markList[i].parent.removeChild(_markList[i]);
                                }                        
                            }
                        }
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"horizontalScrollPolicypaddingTop"2"paddingLefthorizontalGap"3">
        st:GradientimageButton id"PrintButton"icon"{MenuIcons.PRINT_ICON}""toolbttn""20"click"printPaper(event)"toolTip"@Resource(key='Print',bundle='FlexPaper')"visible{PrintVisible}includeInLayout{!ReadOnly}enabled{PrintEnabled}  />mx:Image "PrintBar"source{MenuIcons.BAR}"3""21" 
        
        "@Embed('../src/img/bookmarks.png')""paper1.bookMarks();""@Resource(key='BookMarks',128)">tabIndex"1"{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://www.voidcn.com/article/p-wgwcjphp-cc.html   这里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 = ;
3                     contextMenu.clipboardItems.selectAll = false;
右键菜单

另外推荐几篇关于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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐