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