파일 탐색기 설정

2 분 소요

파일 메뉴 설정

기본적으로 분석기를 EDISON 워크벤치와 연동을 하면서 필요한 파일 메뉴는 3가지 입니다. 현재 대부분의 워크벤치와 연동된 파일 메뉴는 로컬 파일 불러오기, 서버 파일 불러오기, 현재 파일 다운로드하기 가 있습니다. 이러한 파일 메뉴와 더불어 실제 파일을 불러와 가시화하는 가시화 부분을 호출하는 iframe도 같이 포함하여 정의합니다. 이러한 파일 메뉴는 이전 포스트에서 설정되어 있는 osp-analyzer.css에서 정의되어 있는 스타일을 사용합니다.

다음은 파일 메뉴를 설정하기 위한 html 태그 코드입니다.

<div class="container-fluid osp-analyzer">
	<div class="row-fluid header">
		<div class="col-sm-10" id="<portlet:namespace/>title"></div>
		<div class="col-sm-2" >
			<div class="dropdown">
				<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
					Menu<span class="caret"></span>
				</button>
				<!-- Link or button to toggle dropdown -->
				<ul class="dropdown-menu dropdown-menu-right">
					<li ><a href="javascript:$('#<portlet:namespace/>selectFile').click();"><i class="icon-folder-open"> Open local...</i></a></li>
					<li><a href="javascript:<portlet:namespace/>openFileExplorer();"><i class="icon-folder-open"> Open server...</i></a></li>
					<li><a href="javascript:<portlet:namespace/>downloadCurrentFile();"><i class="icon-download-alt"> Download</i></a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="row-fluid canvas" id="<portlet:namespace/>canvasFrame">
		<iframe class ="col-sm-12 iframe-canvas" id="<portlet:namespace/>canvas"  src="<%=request.getContextPath()%>/html/testanalyzer/loadAnalyzer.jsp" style="border:0">
		</iframe>
	</div>
</div>

파일 다이얼로그 추가

서버와 연동되는 파일 처리를 위한 서버 파일 리스트를 볼 수 있는 다이얼로그를 띄울 수 있는 태그를 추가합니다.

또한 서버의 파일 리스트를 볼 수 있는 서버 파일 탐색기를 호출하게 됩니다. 이 서버 사이드 파일 탐색기는 EDISON 플랫폼에 탑재되어 있으며, 분석기를 개발하려면 호출하기만 하면 됩니다. 호출하는 함수는 OSPFileExplorerportlet로서 자바스크립트로 정의되어 있습니다.

<div id="<portlet:namespace/>hiddenSection" class="osp-analyzer hidden">
	<div id="<portlet:namespace/>fileExplorer" class="panel panel-primary ui-draggable" style="padding:0px;margin-bottom:0px;">
		<!-- title -->
		<div class="panel-heading">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true" id='<portlet:namespace/>closeDialog'>&times;</button>
			<h4>Select a File</h4>
		</div>

		<!-- content -->
		<div class="panel-body" id="<portlet:namespace/>file-explorer-content" style="height: 81%"></div>


		<!-- bottom -->
		<div class="panel-footer">
			<div class="ui-dialog-buttonset">
				<input class="btn btn-primary" id="<portlet:namespace/>file-explorer-ok" type="button" value="OK">
				<input class="btn" id="<portlet:namespace/>file-explorer-cancel" type="button" value="Cancel">
			</div>
		</div>

	</div>
	<input type="file" id="<portlet:namespace/>selectFile"/>
</div>

파일 메뉴 이벤트 처리

  • 로컬 파일 처리 함수
$('#<portlet:namespace/>selectFile').bind(
	'change',
	function(event){
		var input = document.getElementById('<portlet:namespace/>selectFile');
		var reader = new FileReader();

		reader.onload = function (e) {
			$('#<portlet:namespace/>canvas').each(function(){
				$(this).prop('contentWindow').loadJSMolFile(e.target.result);
			});
	        console.log("[JSMOL] local file test : ", input);
			console.log("[JSMOL] local file test2 : ", input.files[0]);


			<portlet:namespace/>setTitle(input.files[0].name);
		};

		reader.readAsDataURL(input.files[0]);
	}
);
  • 서버 파일 처리 함수 initializeFileExplorer 함수는 서버 파일 탐색기를 호출하기 위해 초기값을 설정하는 코드입니다.
function <portlet:namespace/>initializeFileExplorer(){
if( $.isEmptyObject(<portlet:namespace/>initData) ||(
  <portlet:namespace/>initData.type() !== OSP.Enumeration.PathType.FILE &&
  <portlet:namespace/>initData.type() !== OSP.Enumeration.PathType.FOLDER &&
  <portlet:namespace/>initData.type() !== OSP.Enumeration.PathType.EXT ))	return;

var eventData = {
            portletId: '<%=portletDisplay.getId()%>',
            targetPortlet: <portlet:namespace/>fileExplorerId,
            data: OSP.Util.toJSON(<portlet:namespace/>initData)
};

Liferay.fire( 'OSP_LOAD_DATA', eventData );
}

openFileExplorer함수는 사용자가 서버 파일 오픈 메뉴를 선택하였을 때, 다이얼로그형태로 사용자에게 서버쪽 파일 리스트를 탐색한 내용을 업데이트 하여 보여주는 함수 부분입니다.

function <portlet:namespace/>openFileExplorer(){
	AUI().use('liferay-portlet-url', function(A){
		if($("#<portlet:namespace/>file-explorer-content").children().length > 0){
			$<portlet:namespace/>fileExplorerDialogSection.dialog("open");
		}else{
			var inputData;
			if(	!$.isEmptyObject(<portlet:namespace/>initData) && (
				<portlet:namespace/>initData.type() === OSP.Enumeration.PathType.FILE ||
				<portlet:namespace/>initData.type() === OSP.Enumeration.PathType.FOLDER ||
				<portlet:namespace/>initData.type() === OSP.Enumeration.PathType.EXT )){
				inputData = <portlet:namespace/>initData;
			}
			else{
				inputData = new OSP.InputData();
				inputData.repositoryType( '<%=OSPRepositoryTypes.USER_HOME.toString()%>' );
				inputData.type( OSP.Enumeration.PathType.FOLDER );
				inputData.parent('');
				inputData.name('');
			}

			var dialogURL = Liferay.PortletURL.createRenderURL();
			dialogURL.setPortletId(<portlet:namespace/>fileExplorerId);
			dialogURL.setParameter('inputData', JSON.stringify(inputData));
			dialogURL.setParameter('mode', 'VIEW');
			dialogURL.setParameter('eventEnable', false);
			dialogURL.setParameter('connector', '<%=portletDisplay.getId()%>');
			dialogURL.setWindowState('<%=LiferayWindowState.EXCLUSIVE%>');

			$("#<portlet:namespace/>file-explorer-content").load( dialogURL.toString());
			$<portlet:namespace/>fileExplorerDialogSection.dialog("open");
		}
	});
}
  • 현재 파일 다운로드 현재 선택되어 있는 파일을 다운로드 하는 함수입니다.
function <portlet:namespace/>downloadCurrentFile(){
console.log("[testView] Download current data", <portlet:namespace/>currentData);
if( $.isEmptyObject(<portlet:namespace/>currentData) ||
  <portlet:namespace/>currentData.type() !== OSP.Enumeration.PathType.FILE )
  return;

var filePath = <portlet:namespace/>currentData;
var data = {
  <portlet:namespace/>command: "DOWNLOAD_FILE",
  <portlet:namespace/>pathType: filePath.type_,
  <portlet:namespace/>repositoryType: filePath.repositoryType_,
  <portlet:namespace/>parentPath: filePath.parent_,
  <portlet:namespace/>fileName: filePath.name_
};


var base = '<%=serveResourceURL.toString()%>';
var sep = (base.indexOf('?') > -1) ? '&' : '?';
var url = base + sep + $.param(data);

location.href = url;
<portlet:namespace/>loadXXXXFile( <portlet:namespace/>currentData );
}

댓글남기기