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项目文件下载(不带间隔时间限制)。****资源 (如果没有积分可以评论留下邮箱)
FlexPaper 2.1.2版本项目的源代码,有bug。****资源
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属性。
window[instance] = flashembed(id, {
src : _jsDirectory+"../FlexPaperViewer.swf",
version : [10, 0],
expressInstall : "js/expressinstall.swf",
wmode : _WMode
},{
ElementId : id,
SwfFile : _SWFFile,
PdfFile : _PDFFile,
IMGFiles : _IMGFiles,
JSONFile : _JSONFile,
useCustomJSONFormat : config.useCustomJSONFormat,
JSONPageDataFormat : config.JSONPageDataFormat,
JSONDataType : _JSONDataType,
Scale : (config.Scale!=null)?config.Scale:0.8,
ZoomTransition : (config.ZoomTransition!=null)?config.ZoomTransition:'easeOut',
ZoomTime : (config.ZoomTime!=null)?config.ZoomTime:0.5,
ZoomInterval : (config.ZoomInterval)?config.ZoomInterval:0.2,
FitPageOnLoad : (config.FitPageOnLoad!=null)?config.FitPageOnLoad:false,
FitWidthOnLoad : (config.FitWidthOnLoad!=null)?config.FitWidthOnLoad:false,
FullScreenAsMaxWindow : (config.FullScreenAsMaxWindow!=null)?config.FullScreenAsMaxWindow:false,
ProgressiveLoading : (config.ProgressiveLoading!=null)?config.ProgressiveLoading:false,
MinZoomSize : (config.MinZoomSize!=null)?config.MinZoomSize:0.2,
MaxZoomSize : (config.MaxZoomSize!=null)?config.MaxZoomSize:5,
SearchMatchAll : (config.SearchMatchAll!=null)?config.SearchMatchAll:false,
// PrintEnabled : (config.PrintEnabled!=null)?config.PrintEnabled:false,
// PrintVisible : (config.PrintVisible!=null)?config.PrintVisible:false,
SearchServiceUrl : config.SearchServiceUrl,
InitViewMode : config.InitViewMode,
BitmapBasedRendering : (config.BitmapBasedRendering!=null)?config.BitmapBasedRendering:false,
StartAtPage : config.StartAtPage,
PrintPaperAsBitmap : (config.PrintPaperAsBitmap!=null)?config.PrintPaperAsBitmap:false,
AutoAdjustPrintSize : (config.AutoAdjustPrintSize!=null)?config.AutoAdjustPrintSize:false, EnableCornerDragging : ((config.EnableCornerDragging!=null)?config.EnableCornerDragging:true), // FlexPaper Zine parameter
BackgroundColor : config.BackgroundColor, // FlexPaper Zine parameter
PanelColor : config.PanelColor, // FlexPaper Zine parameter
BackgroundAlpha : config.BackgroundAlpha, // FlexPaper Zine parameter
UIConfig : config.UIConfig, // FlexPaper Zine parameter ViewModeToolsVisible : ((config.ViewModeToolsVisible!=null)?config.ViewModeToolsVisible:true),
ZoomToolsVisible : ((config.ZoomToolsVisible!=null)?config.ZoomToolsVisible:true),
NavToolsVisible : ((config.NavToolsVisible!=null)?config.NavToolsVisible:true),
CursorToolsVisible : ((config.SearchToolsVisible!=null)?config.CursorToolsVisible:true),
SearchToolsVisible : ((config.SearchToolsVisible!=null)?config.SearchToolsVisible:true),
StickyTools : config.StickyTools,
Toolbar : config.Toolbar,
DocSizeQueryService : config.DocSizeQueryService, RenderingOrder : config.RenderingOrder, localeChain : (config.localeChain!=null)?config.localeChain:"en_US",
jsDirectory : _jsDirectory,
cssDirectory : _cssDirectory,
localeDirectory : _localeDirectory,
key : config.key
});
flexpaper.js
调用的地方:
$('#documentViewer').FlexPaperViewer(
{ config : {
DOC : escape(getDocumentUrl(startDocument)),
Scale : 2,
ZoomTransition : 'easeOut',
ZoomTime : 0.5,
ZoomInterval : 0.2,
FitPageOnLoad : true,
FitWidthOnLoad : false,
FullScreenAsMaxWindow : false,
ProgressiveLoading : false,
MinZoomSize : 0.2,
MaxZoomSize : 5,
SearchMatchAll : false,
// PrintEnabled:false,
// PrintVisible:true,
InitViewMode : 'Portrait',
RenderingOrder : '<%=(configManager.getConfig("renderingorder.primary") + ',' + configManager.getConfig("renderingorder.secondary")) %>', ViewModeToolsVisible : true,
ZoomToolsVisible : true,
NavToolsVisible : true,
CursorToolsVisible : true,
SearchToolsVisible : true, DocSizeQueryService : 'services/swfsize.ashx?doc=' + startDocument,
jsDirectory : 'js/', JSONDataType : 'jsonp',
key : '<%=configManager.getConfig("licensekey") %>', localeChain: 'zh_CN' }}
);
simple_document.aspx
3.修改搜索bug
2.1.2版本的源码搜索中有Bug.第一次和第二次搜索的结果并存。修改后的版本修复整个文件搜索。
但是分页加载时搜索只能搜索当前页,官网Demo也是这样,Flex一窍不通,不知如何修改。囧。。。
修改View.as中searchText函数中for循环部分。改为:
if(clearmarklist){
if(_markList!=null){
for(var i:int=0;i<_markList.length;i++){
if(_markList[i]!=null && _markList[i].parent !=null){
// 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]);
}
}
} _markList = new Array(numPages);
}
View.as
4.修改缩略图bug
当时遇到这问题的时候,百度了一下,说替换googlecode中的SDK3.5的swc就可以。但是失败。
自己尝试修改,发现把Flex项目属性>Flex编译器>Flex SDK版本>”使用兼容Flex 3兼容模式“,然后会报错,再将FlexPaperViewer_Base.mxml中第行的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.****.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.
contextMenu.clipboardMenu = false;//是否使用剪贴板菜单
contextMenu.clipboardItems.copy = false;
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传参,固定间隔时间。
- 首先在默认包中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行):
//计时器参数
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