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

简介: 原文:关于FlexPaper 2.1.2版本 二次开发 Logo 、打印、搜索、缩略图、添加按钮、js交互、右键菜单等相关问题先废话几句。最近用到文档在线浏览功能,之前用的是print2flash(一个工具,文档直接转flash,自带翻页搜索等一系列功能),由于无法与js进行交互,所以改用flexpaper。
原文: 关于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],
 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;
右键菜单

 

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

 

 

目录
相关文章
|
5月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
7月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
277 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
6月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
2412 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
10月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
342 5
|
10月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
241 4
|
11月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
117 1
【JavaScript】网页交互的灵魂舞者
|
10月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
237 4
|
11月前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
873 4
|
11月前
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
374 4