문서뷰어 (Fileopener) 디바이스API 가이드 프로그램

문서뷰어(FileOpener) 가이드 프로그램은 디바이스 API 실행환경을 활용하여 하이브리드 앱을 개발 시 참고 및 활용될 수 있도록 구현된 전자정부 디바이스 API에 대한 가이드 앱으로써, 모바일 스마트 디바이스의 FileOpener관련 기능을 JavaScript기반으로 구성 된 FileOpener DeviceAPI를 통하여 다운받은 문서를 볼수 있도록 내장 앱으로 연동하는 기능을 지원한다. 또한, 전자정부 표준프레임워크 기반의 웹 서버 어플리케이션과 연계하여 문서 목록 및 해당 문서를 다운받을 수 있는 조회 및 다운로드 기능으로 구성되어 있다.

본 가이드 프로그램에서는 웹 서버에서 문서 목록 및 해당 파일 다운로드 기능의 활용을 가이드 할 수 있도록 문서목록 조회, 문서뷰어로 열기(다운로드포함) 기능을 제공하고 있다.

문서뷰어(FileOpener) 디바이스API 가이드 프로그램는 문서목록 조회, 문서 목록, 그리고 문서 클릭 시 문서열람 기능으로 구성되어 있다.(관련기능 부분참조)

• 웹 서버에 문서 목록을 조회하여 로드한다.

window.plugins.EgovInterface.request(url, params, onSuccess);

• 문서목록에서 선택된 파일을 디바이스로 다운받는 기능

window.plugins.EgovFileOpener.fileDownload(url, params, onSuccess);

• 디바이스 저장소에 저장된 파일을 해당 파일뷰어와 연동하는 기능

cordova.plugins.fileOpener2.open(filePath, fileMINEType, {error:function(){}, success:function(){}} );

• FILE_OPENER_LIST

• FILE_DETAIL_INFO

문서뷰어(FileOpener) 디바이스API 가이드 프로그램에서 제공하는 문서목록 조회, 파일다운로드, 문서뷰어 연동을 위한 기능을 활용하기 위하여 필요한 항목 및 그 환경 설정은 다음과 같다.

    <!--전자정부 문서뷰어 API를 사용하기 위한 Custom Plugin 클래스-->
    <feature name="EgovFileOpener">
        <param name="android-package" value="kr.go.egovframework.hyb.plugin.EgovFileOpener" />
    </feature>
    <!--전자정부 문서뷰어 API를 사용하기 위한 Phonegap Plugin 클래스-->
    <feature name="FileOpener2">
        <param name="android-package" value="io.github.pwlin.cordova.plugins.fileopener2.FileOpener2" />
    </feature>

    <!--전자정부 Interface 디바이스 API에서 사용하기 위한 서버경로 설정-->
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<string name="SERVER_URL">http://192.168.100.222:8080/DeviceAPIGuideTotal_Web</string>
    </resources>

    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
    <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
    <permission android:name="kr.go.egovframework.hyb.fileopenerapp.permission.C2D_MESSAGE" android:protectionLevel="signature" />
    <uses-permission android:name="kr.go.egovframework.hyb.fileopenerapp.permission.C2D_MESSAGE" />

<sqlMap resource="egovframework/sqlmap/hyb/mbl/fop/EgovFileOpenerDeviceAPIGuide_SQL_[DB명].xml"/>

문서뷰어(FileOpener) API 가이드 프로그램은 웹서버 문서목록을 조회하여 해당 파일을 다운로드 후 디바이스 내 문서뷰어와 연동으 할 수 있는 기능으로 구성되어 있다.

• 웹 서버에 문서목록 리스트를 조회한다.

function fn_egov_documentlist() {
    
    var url = "/fop/FileOpenerDocumentList.do";
    var accept_type = "xml";
    var params = {};    
    
    window.plugins.EgovInterface.request(url, params, function(jsondata) {                                         
                                         
		 resultJson = jsondata;
		 
		 if(resultJson.resultState == "OK"){
			 var strhtml="";
			 $(resultJson.resultSet).each(function(){
				 
		            var sn = this.sn;
		            var orignlFileNm = this.orignlFileNm;
		            var streFileNm = this.streFileNm;
		            var fileSize = this.fileSize;
		            var updDt = this.updDt;	    						                    
		            
		            fileorignlFileNm = this.orignlFileNm;	    						                    
		            
		            strhtml += '<li>';	    						                    
		            strhtml += '     <a href="#" onclick="javascript:fn_egov_filelist_go(\'' + sn + ';'+ orignlFileNm + ';'+ streFileNm +'\')">';
		            strhtml += '         <h3>파일명:  ' + orignlFileNm + '</h3>';
		            strhtml += '         <h3>파일크기: ' + fileSize + '</h3>';
		            strhtml += '         <h3>등록일:  ' +  updDt + '</h3>';
		            strhtml += '    </a>';
		            strhtml += '</li>';        
		            
		        });
		     									 
			    var theList = $('#theList');
		        theList.html(strhtml);	    								        
		        $.mobile.changePage("#documentInfo", "slide", false, false);
		        theList.listview("refresh");
			    infoScroll.refresh();
			     
		 }else{
		     $("#alert_dialog").click( function() {
		         jAlert('데이터 전송 중 오류가 발생 했습니다.', '전송 오류', 'c');
		       });
		 }
		 
		 }, function(result){
			 alert("error > "+result);
		 });
    
}

• 선택된 문서를 서버에서 다운로드 받아 내장 문서뷰어로 연동하기

[참고] 문서 종류에 따라 내장된 문서뷰어는 별도로 설치되어야 한다.

          예)  문서가 PDF일 경우 PDF용 뷰어가 별도로 설치되어 있어야 한다.(Adobe Reader)

function fn_egov_fileDownload(input){
	
	var url = "/fop/FileOpenerfileDownload.do";
    
	var inputArray = input.split(";");	
	var inputTargetPath = cordova.file.externalDataDirectory; 
    var params = {sn : inputArray[0], orignlFileNm : inputArray[1], streFileNm : inputArray[2], targetPath : inputTargetPath};
    var fileExt = inputArray[2].split(".");
    var fileMINEType = "application/" + fileExt[fileExt.length-1];
    
    console.log('File Download Start ');
    console.log('>> inputTargetPath : ' + inputTargetPath);
    console.log('>> fileMINEType : ' + fileMINEType);
    
    window.plugins.EgovFileOpener.fileDownload(url, params, function(jsondata) {
        jsonresult = jsondata;
        console.log("jsondata > "+jsondata);
        
        console.log('File Open Start ');        
    	cordova.plugins.fileOpener2.open(
    			inputTargetPath + inputArray[1],
    			fileMINEType,
	            {
		            error : function(e) {
		            	console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
		            	if(e.status == "9")
		            		alert('문서를 실행할 수 있는 뷰어가 설치되어 있지 않습니다.');
		            },
		            success : function () {
		            	console.log('file opened successfully'); 				
		            }
			        }
				);
        }, function(result){
           alert("error > "+result);
        });
}

문서뷰어 연동 확인 화면	문서뷰어 연동(PDF) 화면

문서뷰어 연동 실패 화면

• 프로젝트 선택 > 오른쪽 클릭 > Run As > Android Application

• 상단의 메뉴 > Run As > Android Application

• 실행할 타겟 선택 > 에뮬레이터, 디바이스(디버깅모드)

• 디바이스를 이용한 실행 화면

• 서버사이드 가이드 프로그램의 실행은 프로젝트를 마우스 오른쪽 버튼을 클릭 한후 Run As>Run On Server 버튼을 통해 실행 할 수 있다.

• 빌드가 성공적으로 수행 되면 이클립스의 콘솔 창에서 'Server Startup in xxx ms' 메시지를 확인 할 수 있다.

디바이스 어플리케이션에서 발생한 오류 내용 확인 및 디버깅을 위해서는 폰갭 프레임워크에서 제공하는 console.log를 이용할 수 있다. console.log 함수는 자바스크립트 구문에서 사용할 수 있는 디버그 코드로 이클립스 및 Xcode에서 확인 할 수 있다.

console.log의 작성 방법의 예시는 다음과 같다.

function onError(e)
{
    ...
    console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
    ...
}

디버깅 코드가 실행 되면 아래와 같은 메시지를 개발도구의 콘솔 메시지 창에서 볼 수 있다.

문서뷰어(FileOpener) 디바이스 API 가이드 다운로드 : Click

• Cordova 플러그인 정보 : cordova-plugin-file-opener2Click