5.File up/download를 구현한 모델 개발하기

Edit

5.1개요

File Parameter를 이용하여 사용자가 선택한 파일을 업로드/다운로드하는 X-UP 모델을 개발하고 Nexacro어플리케이션과 연동하는 방법에 대해 알아봅니다.

File Parameter는 파일 입/출력을 정의하기 위한 파라메터입니다. 기본적으로 다른 파라메터와 동일한 속성을 가지고 있으며 Schema탭만 다르게 정의 합니다.

그림 5-1file1

File Parameter의 Schema 탭은 다음 항목을 설정합니다.

Content Type : File의 Content Type을 정의합니다.

아래의 표는 몇가지 양식을 보여줍니다.

표 5-1File Content Type

MIME Type

File Extension

application/pdf

pdf

image/jpeg

jpeg

text/html

html

text/css

css

기본적으로 File Parameter를 사용할 경우 Content Type은 application/octet-stream으로 사용하게 되며 필요시 http://en.wikipedia.org/wiki/Internet_media_type 명시 된 정보를 토대로 처리하도록 합니다.

5.2필요 사항

5.3File up/download를 구현한 모델 개발하기

X-UP 모델을 개발하고 Nexacro 어플리케이션과 연동하기 위해선 다음과 같이 개발을 수행합니다.

5.3.1File up/download 모델 개발하기

File up/download를 하기위한 X-UP 모델 개발은 다음과 같은 절차로 이루어집니다.

1파일 업로드 모델 개발하기

2파일 다운로드 모델 개발하기

3Jetty Web Server 구동하기

그림 5-2File upload & download 모델 개발하기

5.3.2Nexacro 어플리케이션에서 X-UP 모델 호출하기

X-UP에서 만들어진 도메인을 사용하기 위해서 Nexacro 어플리케이션에서는 다음과 같은 순서로 진행됩니다.

1TypeDefinition File 관련 Component 추가하기

2모델 호출 스크립트 작성하기

3테스트 하기

그림 5-3File upload & download 모델 호출하는 Nexacro 어플리케이션 개발하기

Nexacro 어플리케이션 Sample download

5.4Review

5.4.1File up/download 모델 개발하기

File up/download 모델을 개발합니다.

파일 업로드 모델 개발하기

Nexacro 어플리케이션에서 선택 한 다수개의 파일을 X-UP의 File Parameter를 이용하여 지정된 경로에 업로드하는 모델을 개발합니다.

FileUpload 라는 X-UP 모델을 생성합니다.

X-UP 모델을 생성하고 에디터에 User Method를 아래와 같이 추가합니다.

그림 5-4file2

User Method 컴퍼넌트를 더블클릭하여 java editor를 열어 아래와 같은 코드를 입력합니다.

입력된 input parameter 중 type이 File인 경우에만 미리 지정된 경로에 파일을 업로드 하는 코드를 입력합니다.

String path = "C:/xup/upload";

int size = globalParameterSet.size();
for (int i = 0; i < size; i++) {
    Parameter parameter = globalParameterSet.getParameter(i);
    
    if (parameter.getDataType().getType() == MashupDataType.FILE.getType()) {
        
        MashupFile upfile = parameter.getFile();
        String originalName = upfile.getOriginalName(); // this is the actual name of the uploaded file.
        
        File destFile = new File(path+"/"+originalName);
        
        InputStream input = null;
        OutputStream output = null;
        try {
            input = new FileInputStream(upfile);
            output = new FileOutputStream(destFile);
            byte[] buf = new byte[1024];
            int bytesRead;
            while ((bytesRead = input.read(buf)) > 0) {
                output.write(buf, 0, bytesRead);
            }
        } catch(IOException e) {
            throw new AutomationFailException("file upload failed. fileName="+originalName+", e="+e.getMessage());
        } finally {
            if(input != null) try { input.close(); } catch (IOException e) { }
            if(output != null) try { output.close(); } catch (IOException e) { }
        }
        
        log("DEBUG", "uploaded file="+upfile.getOriginalName());
    }
}

Multipart로 복수의 파일 데이터를 전송받기 때문에 입력파라매터를 설정하지 않고 JAVA 코드에서 처리합니다.

파일 다운로드 모델 개발하기

Nexacro 어플리케이션에서 파일을 다운로드 하는 X-UP 모델을 개발하는 방법을 설명합니다.

FileDownload 라는 X-UP 모델을 생성합니다.

X-UP 모델을 생성하고 에디터에 User Method를 아래와 같이 추가합니다.

그림 5-5nexacro_filedown1

1다운로드 할 파일명이 담긴 String Type 의 input parameter

2output 으로 출력될 File Type의 output parameter

3다운로드 할 파일의 Content Type 이며, HTTP Mime 헤더의 Content-Type 입니다.

4파일 다운로드 로직이 담기는 User Method

본 동영상에서의 outFile 파라매터의 Content Type은 JAVA 코드에서 삽입 되었습니다.

User Method 컴퍼넌트를 더블클릭하여 java editor를 열어 아래와 같은 코드를 입력합니다.

String path = "C:/xup/upload";
String originalFileName = globalParameterSet.getStringValue("fileName"); 
String fullName = path+"/"+originalFileName;

log("DEBUG", "download file=" + fullName);

MashupFile outputFile = new MashupFile(fullName, originalFileName, "application/octet-stream");
globalParameterSet.add("outFile", MashupDataType.FILE ,outputFile);

Jetty Web Server 실행

Start 버튼을 누르면 Jetty Web Server가 동작합니다.

X-UP Explorer에 보이는 모든 X-UP Project가 Jetty Web Server에 올라가게 됩니다.

복수개의 데이터 전송으로 인해 동영상에서 테스트는 수행하지 않았습니다.

5.4.2Nexacro 어플리케이션에서 X-UP 모델 호출하기

Nexacro 어플리케이션에서 개발하기위해 Nexacro-Studio에서 X-UP 모델을 사용하기 위한 개발단계는 다음과 같습니다.

TypeDefinition File 관련 Component 추가하기

FileUpload FileDownload 컴포넌트를 추가 합니다.

모델 호출 스크립트 작성하기

모델을 호출 하기 위해 Form을 하나 생성합니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="FileUpDown" classname="FileUpDown" left="0" top="0" width="582" height="325" titletext="New Form">
    <Layouts>
      <Layout>
        <Button id="btnUpload" taborder="1" text="upload file" left="384" top="29" width="95" height="20" onclick="btnUpload_onclick"/>
        <Grid id="Grid00" taborder="2" useinputpanel="false" left="16" top="64" width="564" height="226" binddataset="ds_File" autofittype="col">
          <Formats>
            <Format id="default">
              <Columns>
                <Column size="272"/>
                <Column size="122"/>
                <Column size="80"/>
              </Columns>
              <Rows>
                <Row size="24" band="head"/>
                <Row size="24"/>
              </Rows>
              <Band id="head">
                <Cell text="FILE_PATH"/>
                <Cell col="1" text="FILE_NAME"/>
                <Cell col="2" text="FILE_SIZE"/>
              </Band>
              <Band id="body">
                <Cell text="bind:FILE_PATH"/>
                <Cell col="1" text="bind:FILE_NAME"/>
                <Cell col="2" text="bind:FILE_SIZE"/>
              </Band>
            </Format>
          </Formats>
        </Grid>
        <FileUpload id="FileUpload00" taborder="3" multiselect="true" retry="0" index="0" onsuccess="FileUpload01_onsuccess" onitemchanged="FileUpload00_onitemchanged" left="16" top="29" width="365" height="20" style="buttonsize:100;buttonpadding:0 0 0 10;buttontext:select file;border:0 solid #808080ff ;align:center middle;" innerdataset="@ds_File"/>
        <FileDownload id="FileDownload00" taborder="5" retry="0" text="filedownload component" left="616" top="18" height="44" onclick="FileDownload00_onclick" width="95" visible="false"/>
        <Button id="btnDownload" taborder="6" text="download file" left="481" top="29" height="20" onclick="btnDownload_onclick" width="95"/>
      </Layout>
    </Layouts>
    <Objects>
      <Dataset id="ds_File" firefirstcount="0" firenextcount="0" useclientlayout="false" updatecontrol="true" enableevent="true" loadkeymode="keep" loadfiltermode="keep" reversesubsum="false">
        <ColumnInfo>
          <Column id="FILE_PATH" type="STRING" size="256"/>
          <Column id="FILE_NAME" type="STRING" size="256"/>
          <Column id="FILE_SIZE" type="STRING" size="256"/>
        </ColumnInfo>
      </Dataset>
    </Objects>
    <InitValue>
      <FileUpload id="FileUpload00" innerdataset="@dsFilePath"/>
    </InitValue>
  </Form>
</FDL>

위의 코드로 UI를 생성하면 아래와 같은 폼이 만들어 집니다.

그림 5-6nexacro_fileupload

script 탭을 클릭하여 파일 업로드를 위한 스크립트를 입력합니다.

this.FileUpload00_onitemchanged = function(obj:FileUpload,  e:nexacro.FileUploadItemChangeEventInfo)
{
    var sFileName;
    var sFilePath;
  
    if(obj.multiselect)
    {
        var sFullData = e.newvalue;
        var aFilePath = sFullData.split(",");
        this.ds_File.clearData();
    }
        
    for(var i=0; i<aFilePath.length; i++)
    {
        sFilePath = aFilePath[i];
        var dirExpt = sFilePath.lastIndexOf("\\")+1;
        sFileName = sFilePath.substr(dirExpt);
  
        this.ds_File.addRow();
  
        this.ds_File.setColumn(i, "FILE_PATH", sFilePath);
        this.ds_File.setColumn(i, "FILE_NAME", sFileName);
    }
}

this.btnUpload_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    var svcparam      = "domain="     + "NexawebInc"      // Domain name
                    + "&model="     + "FileUpload"      // Model name
                    + "&format="    + "xml"
                    + "&version="   + "nexacro";
                    
    var svcUrl = "XUP_SERVER::FrontControllerServlet.do?service=xupservice&" + svcparam;
    var bSucc = this.FileUpload00.upload(svcUrl); 
    if(bSucc) {
        alert("file upload success");
    }
}

this.btnDownload_onclick = function(obj:Button,  e:nexacro.ClickEventInfo)
{
    var sFileName = this.ds_File.getColumn(this.Grid00.currentrow,"FILE_NAME");
     
    var svcparam         = "domain="     + "NexawebInc"      // Domain name
                        + "&model="     + "FileDownload"    // Model name
                        + "&format="    + "xml"
                        + "&version="   + "nexacro"
                        + "&fileName="  + sFileName;
    var svcUrl = "XUP_SERVER::FrontControllerServlet.do?service=xupservice&" + svcparam;
        
    //this.FileDownload00.set_text(sFileName);
    //this.FileDownload00.set_name(sFileName);
    this.FileDownload00.set_downloadurl(svcUrl); 
    
    var bSucc = this.FileDownload00.download();
    if(bSucc) {
        alert("file download success");
    }
}

테스트하기

테스트를 수행하기 위해 어플리케이션을 실행하고 select file 버튼을 클릭해 업로드 하고자 하는 파일을 선택 하고 file upload 버튼을 눌러 파일업로드가 정상적으로 실행되는지 확인합니다.

그림 5-7nexacro_fileupload2

1업로드 할 파일을 한개 또는 여러개 선택합니다.

2upload file 버튼을 클릭하면 서버에 지정한 디렉토리로 파일이 업로드 됩니다.

3그리드에 출력된 파일을 선택하고 download file 버튼을 클릭하면 로컬피씨로 파일이 다운로드 됩니다.

파일 업로드 디렉토리로 이동해 정상적으로 업/다운로드 되었는지 확인합니다.

그림 5-8nexacro_fileupload3