關於FlexPaper 2.1.2版本 二次開發 Logo 、打印、搜索、縮略圖、添加按鈕、js交互、右鍵菜單、書籤等相關問題
2015-03-02 更新文章，因爲需求修改，更改了flexpaper插件，故增長第九、十、11小節，下載代碼時請注意。javascript
先廢話幾句。最近用到文檔在線瀏覽功能，以前用的是print2flash（一個工具，文檔直接轉flash，自帶翻頁搜索等一系列功能），因爲沒法與js進行交互，因此改用flexpaper。css
因爲以前沒接觸過Flex，瞭解很少，因此文章不免有不合適的地方。但願各位給予指正。html
首先感謝ajava.org的mark，一系列文章有不少的幫助，少走不少彎路。java
開發工具：1.Adobe Flash Builder 4.5。下載地址：http://trials3.adobe.com/AdobeProducts/FLBR/4_5/win32/FlashBuilder_4_5_LS10.exe (目前已失效)c++
2.Flash Player Debugger 。 下載地址：http://download.macromedia.com/pub/flashplayer/updaters/11/flashplayer_11_ax_debug.exe (目前已失效)express
3.Flex項目用的是Flex SDK4.5。json
若是你沒有Flex基礎或不瞭解FlexPaper，強烈推薦你參考mark的文章。服務器
具體修改FlexPaper的步驟就很少說了，隨便百度一下，都是一大堆，具體的能夠參閱mark的文章。PDF版下載ide
提供編譯後的文件下載（不帶間隔時間限制）。下載 函數
修改後的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 });
調用的地方：
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 );
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 }
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}"/>
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}"/>
public function bookMarks():void{ var m:String = ExternalInterface.call("ShowCurrentPage",_currPage); trace(m); }
經過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傳參，固定間隔時間。
- 首先在默認包中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}" - 在FlexPaperViewer_Base.mxml同級目錄中的FlexPaperViewer.mxml文件中添加以下變量和方法（207行）：
FlexPaperViewer.mxml//計時器參數 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); }
在initApp方法中添加計時器啓動代碼（64行）：
initApppublic function initApp():void { //去除LOGO paper1.removeElementAt(2); //初始化，計時器操做 pstarttimer=new Timer(1000);//1000是指1秒 pstarttimer.addEventListener(TimerEvent.TIMER, funTimer); pstarttimer.start(); }
修改formatPageNumber方法（243行）：
formatPageNumberprotected 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(); } }
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; }
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; } }
在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 頁"; } }
帶翻頁間隔二次開發源代碼：下載
編譯過版本：下載
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
- 1. JS添加右鍵菜單
- 2. 右鍵 添加ideallij 菜單
- 3. 綠色版Sublime Text添加右鍵菜單打開
- 4. WebStorm 添加右鍵菜單
- 5. MFC添加右鍵菜單
- 6. layui tab標籤右鍵關閉菜單
- 7. Qt添加右鍵菜單
- 8. C# AutoCAD 二次開發相關問題
- 9. 關於UIWebView與js交互的問題
- 10. ASP頁面添加打印按鈕
- 更多相關文章...
- • Eclipse 添加書籤 - Eclipse 教程
- • XML 相關技術 - XML 教程
- • NewSQL-TiDB相關
- • PHP開發工具
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JS添加右鍵菜單
- 2. 右鍵 添加ideallij 菜單
- 3. 綠色版Sublime Text添加右鍵菜單打開
- 4. WebStorm 添加右鍵菜單
- 5. MFC添加右鍵菜單
- 6. layui tab標籤右鍵關閉菜單
- 7. Qt添加右鍵菜單
- 8. C# AutoCAD 二次開發相關問題
- 9. 關於UIWebView與js交互的問題
- 10. ASP頁面添加打印按鈕