FlexPaper二次开发之解决中文路径无法显示问题

我们知道对于原始的FlexPaper来说，如果打开带有中文的url路径的swf文件时，原始的FlexPaper无法显示带中文路径的swf文件！针对网友提出的问题我提供两种解决方案：

特别注意：需要设置Web服务器的URL编码，如果Web服务器是Tomcat需要设置如下配置，在server.xml下配置：

    <Connector port="8080" protocol="HTTP/1.1" 
               connectionTimeout="20000" 
               redirectPort="8443" 
               URIEncoding="UTF-8"
     />

方案一：当我们需要通过FlexPaper来打开swf文件时，实现类似百度在线阅读文档功能需求！我们可以在我们应用中尽量避免出现中文路径的swf文件路径，如避免出现像这样的文件路径：

如果所示，对于原始的FlexPaper来说，我们要打开这样路径下的swf文件时候，原始的FlexPaper无法正常显示swf文件，会出现一直在打转的情况！为了在项目需要，打开对应的swf文件的话，可以尽量将swf的文件名转化成英文或者数字的文件名！当然这不是最完美的解决方案！这种解决方案在项目开发过程中被称为规避法则！

当然，我还有最佳的解决方案，那就是对原始的FlexPaper进行二次开发来解决以上存在的问题！言归正传，下面开始讲方案：

方案二：

1、下载Flex集成开发工具Adobe Flash Builder v4.5

2、下载原始的FlexPaper的源码，网上有链接，自己下载！

3、在开发工具里新建Flex项目，和java项目的创建方式类似，见下图：

 

 

生成如下结构：

4、将下载的原始的FlexPaper源码解压，见下图：

拷贝其中的locale、src、assets三个文件夹到新建的Flex下，如图所示：

5、修改项目属性，点击项目的属性，将附加的编译参数修改成如下所示，-locale zh_CN -source-path=locale/{locale} -keep-all-type-selectors=true，其中这个编辑参数决定了Flex播放器是否支持播放中文的路径下的swf文件，这个步骤是关键，见下图：

6、在src下新建一个flexpaper.mxml文件，复制如下代码：

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				xmlns:fp="com.devaldi.controls.flexpaper.*" 
				layout="absolute" width="100%" height="100%"   
				applicationComplete="initApp();">  
	
	<mx:Script>  
		<![CDATA[  
			import mx.controls.Alert;  
			
			public var _aid = 0;//文档ID  
			
			[Bindable]  
			public var _Scale:Number = 1;//缩放比例  
			
			[Bindable]  
			public var _SwfFile:String = "";//SWF文件路径  
			
			[Bindable]  
			public var _ZoomTransition:String = "easeOut";  
			
			[Bindable]  
			public var _ZoomTime:Number = 0.6;  
			
			[Bindable]  
			public var _ZoomInterval:Number = 0.1;  
			
			[Bindable]  
			public var _FitPageOnLoad:Boolean = false;//加载后适合高度  
			
			[Bindable]  
			public var _FitWidthOnLoad:Boolean = false;//加载后适合宽度  
			
			[Bindable]  
			public var _PrintEnabled:Boolean = true;//是否支持打印  
			
			[Bindable]  
			public var _FullScreenAsMaxWindow:Boolean = false;//是否支付全屏  
			
			[Bindable]  
			public var _ProgressiveLoading:Boolean = false;//是否延迟加载  
			
			[Bindable]  
			public var _localeChain:String = "zh_CN";//语言  
			
			private var isFocus:Boolean = false;  
			
			//初始化参数  
			private function initApp():void{  
				var params:Object = Application.application.parameters;  
				_Scale = getNumber(params, "Scale", 1);  
				_SwfFile = getString(params, "SwfFile", "Paper.swf");  
				_ZoomTransition = getString(params, "ZoomTransition", "easeOut");  
				_ZoomTime = getNumber(params, "ZoomTime", 0.6);  
				_ZoomInterval = getNumber(params, "ZoomInterval", 0.1);  
				_FitPageOnLoad = getBoolean(params, "FitPageOnLoad", false);  
				_FitWidthOnLoad = getBoolean(params, "FitWidthOnLoad", false);  
				_PrintEnabled = getBoolean(params, "PrintEnabled", true);  
				_FullScreenAsMaxWindow = getBoolean(params, "FullScreenAsMaxWindow", false);  
				_ProgressiveLoading = getBoolean(params, "ProgressiveLoading", true);  
				_localeChain = params["localeChain"];  
				
				//注册事件监听  
				this.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver);  
				this.addEventListener(MouseEvent.MOUSE_OUT, onMouseOut);  
				
				//开放给外部（javascript）调用  
				ExternalInterface.addCallback("hasFocus", hasFocus);  
				//ExternalInterface.addCallback("focus", focus);   
				ExternalInterface.addCallback("setViewerFocus", setViewerFocus);  
				ExternalInterface.addCallback("gotoPage", gotoPage);
			}  
			
			
			
			private function onMouseOver(event:MouseEvent):void{  
				this.isFocus = true;  
			}  
			
			private function onMouseOut(event:MouseEvent):void{  
				this.isFocus = false;  
			}  
			
			public function hasFocus():Boolean{  
				//Alert.show("hasFocus");  
				return isFocus;  
			}  
			
			public function setViewerFocus(isFocus:Boolean):void{    
				//Alert.show("setViewerFocus");  
				this.paperViewer.setViewerFocus();  
			}  
			
			/** 
			 *  
			 * 获取String类型参数 
			 * 如果没有，则返回默认值 
			 **/ 
			private function getString(params:Object, name:String, def:String):String{  
				if(params[name] != null){  
					return params[name];  
				}  
				return def;  
			}  
			
			private function getNumber(params:Object, name:String, def:Number):Number{  
				if(params[name] != null){  
					return params[name];  
				}  
				return def;  
			}  
			
			private function getBoolean(params:Object, name:String, def:Boolean):Boolean{  
				//Alert.show("比较："+name);  
				if(params[name] != null){  
					return params[name] == "true";  
				}   
				return def;  
			}  
			
			public function gotoPage(p:Number):void{
				paperViewer.gotoPage(p);
			}
			
		]]>  
	</mx:Script>  

	<fp:FlexPaperViewer id="paperViewer" 
						width="100%"   
						height="100%"   
						Scale="{_Scale}"   
						SwfFile="{_SwfFile}"   
						ZoomTransition="{_ZoomTransition}"   
						ZoomTime="{_ZoomTime}"   
						ZoomInterval="{_ZoomInterval}" 
						FitPageOnLoad="{_FitPageOnLoad}" 
						FitWidthOnLoad="{_FitWidthOnLoad}" 
						PrintEnabled="{_PrintEnabled}" 
						FullScreenAsMaxWindow="{_FullScreenAsMaxWindow}" 
						
						ProgressiveLoading="{_ProgressiveLoading}" />  
</mx:Application>

7、重新构建整个Flex项目，在集成开发工具的工作空间找到编译生成Flex播放器的swf文件，如下图：

将改为文件引用到项目中即可！

这样就可以解决FlexPaper无法播放带中文路径的swf文件了！

如下为显示效果图：