정의

Submission은 서버와의 데이터 통신을 위한 모듈로서, AJAX로 구현되어 있습니다. Submission의 특징은 아래와 같습니다.

특징

서버와의 통신용 전송/수신 데이터를 DataCollection 형식으로 정의해야 함.

화면의 전환 없이 데이터만 전송.

동기/비동기 통신 선택 가능.

통신의 전/후 처리를 위해 각 이벤트에 호출할 함수 정의 가능.

Script를 통해 동적 Submission 생성 가능.

ID를 제외한 속성은 동적 변경이 가능.

권장 내용

용도별로 Submission을 등록하는 것을 권장. (유지보수 편의성)

화면의 코드성 데이터 통신은 공통 모듈을 만들어 이용할 것을 권장

일반적인 순서

(1) 화면 UI 작성

(2) 서버와 주고 받는 데이터 형식 정의 (DataCollection 정의)

(3) 화면 UI와 DataCollection 바인딩

(4) Submission 생성

(5) Submission 실행 이벤트 정의

Submission vs. AJAX

개발자는 데이터 통신을 위해 Submission은 정의하거나 AJAX를 통해 직접 통신 모듈을 개발할 수도 있습니다.

Ajax는 Submission을 생성하지 않고 서버를 호출할 수 있습니다.

다음은 Submission과 AJAX를 비교한 것입니다.

var reqstr = '<request>'
    + '<data value="efg">ABCD</data>'
    + '</request>';

$p.ajax({
      action : "http://localhost:8090/developGuide/getAjax.jsp",
      mode : "asynchronous",
      mediatype : "application/xml",
      method : "post",
      requestData : reqstr, 
      type : "xml",
      beforeAjax : function(e) {
        WebSquare.logger.printLog("beforeAjax call");
      },
      success : function(e) { 
        alert(e.responseText); 
      },
      error : function(e) {
        WebSquare.logger.printLog("error call");
      },
      requestHeader : {
        sendData1 : "123",
        sendData2 : "456"
      }
    });

Submission & DataCollection

즉, 웹 브라우저와 서버와의 데이터 통신이 필요한 경우 DataCollection을 생성하고 Submission을 정의해야 합니다. (본 장은 Submission을 위주로 설명합니다. DataCollection에 대한 자세한 설명은 본 매뉴얼의 DataCollection 부분을 참조하십시오.)

Submission 생성

Studio에서 생성

1. Outline – Head 뷰를 선택합니다.

2. Submission을 우클릭한 후, Add를 선택합니다.

3. 아래와 같은 창이 표시되면 해당 정보를 입력합니다.

아래는 상단의 Detailed 버튼을 클릭한 모습입니다. 하단의 Simple 버튼을 클릭하면 위의 화면으로 돌아갈 수 있습니다.

동적 생성

아래와 같이 API를 활용하여 동적으로 Submission을 생성할 수도 있습니다.

$p.createSubmission ( temOpt );

아래와 같이 오브젝트 형태로 Submission 객체를 생성하십시오. 속성은 Submission 생성창의 속성과 동일합니다.

var tmpOpt = {
    id : "sub_getUserXmlMapData"
    , ref : "data:xml,dc_reqCode"
    , target : "data:xml,dc_resUserMapData"
    , action : "/data/sampleData_xml_dc_map.data"
    , mediatype : "text/plain"
    , submitDoneHandler : function(e){
        alert(e.responseText);
    } 
};

// Submission 생성
$p.createSubmission( tmpOpt );

Submission의 생성만으로는 데이터를 주고 받을 수 가 없습니다.

Async 통신 권장 (Sync 모드 경고)

Submission 실행시 비동기(Asynchronous) 모드의 통신을 권장합니다.

config.xml 파일에 <warningSyn> 항목이 "true"로 설정된 경우, 동기(synchronous) 모드의 Submission에 대해 경고 메시지가 표시됩니다.

$r_title(사용 예)
<WebSquare>
	<notRecommended>
        <warningSync value="true"/>
    </notRecommended>
</WebSquare>

이벤트 추가

Outline – Head 뷰에서 Submission을 우클릭한 후 Event를 선택합니다.

submitdone(e)

submiterror(e)

예제

request header 설정

setRequestHeader() 함수를 사용하여 각 서브미션에 대해 request header를 설정할 수 있습니다.

$r_title(사용 예)
var subObj = $p.getSubmission("submission01");
subObj.setRequestHeader( {"userKey": "userValue"} );

Submission 실행

데이터를 주고받기 위해서는 생성된 Submission 을 실행시켜야 합니다.

$p.executeSubmission API를 활용하여 아래와 같이 Submission을 실행하십시오.

$r_title(사용 예)
$p.executeSubmission ( submission id );

Submission 중단

abortTrigger="true" 속성 설정을 통해 Submission을 중단할 수 있는 취소 버튼을 화면에 출력할 수 있습니다. 사용자가 이 버튼을 클릭하면 현재 실행중인 Submission은 중단됩니다.

지정한 ID의 Submission이 현재 실행 중일 경우 해당 Submission을 중단할 수 있습니다.

$r_title(형식)
WebSquare.ModelUtil.abort( "서브미션ID" );

Submission 확인

$p.getSubmissionList() 함수를 호출할 경우, 해당 함수가 호출된 화면에 포함된 submission 객체를 반환할 수 있습니다. 또한, 화면이 WFrame을 포함할 경우, WFrame의 src 화면에 포함된 submisison 객체를 함께 변환할 수도 있습니다.

// main.xml 아래에 wframe1.xml과 wframe2.xml이 있고 
// 각 화면에 submission1, submission2가 정의된 경우

// wframe1.xml에서 아래를 실행하면
$p.getSubmissionList();
// wframe1.xml에 있는 submission1, submission2 객체가 array로 반환됨.

// main.xml에서 아래를 실행하면,
$p.getSubmissionList({"returnType": "json", {"all" : true});

// 아래의 결과가 반환됨. 
// {"mf":["submission1","submission2"], "mf_wframe1":["submission1","submission2"], "mf_wframe2":["submission1","submission2"]}

데이터가 없는 경우 전송 데이터에서 제외

dataType=“bigDecimal” 혹은 “number” 컬럼의 데이터가 없는 경우 전송 데이터에서 제외할 수 있습니다. config.xml 파일에서 <exceptEmptyValue> 항목을 아래와 같이 설정하십시오.

$r_title(사용 예)

<WebSquare>
    <submission>
          <exceptEmptyValue value="true" />
    </submission
</WebSquare>

예제

선택용 컴포넌트와 바인딩된 DataMap에 데이터를 로딩하기

GridView와 바인딩된 DataList에 데이터 로딩하기

1. Project Explorer에서 마우스 우클릭 후 New – WebSquare Project를 선택합니다.

2. 프로젝트 명("edu")을 입력하고 Next를 클릭합니다.

3. Context Root를 "/"로 지정한 후 Finish를 클릭합니다.

4. 새로 생성한 프로젝트를 마우스 우클릭 후 New – WebSquare Page를 선택합니다.

5. 파일 명("sample")을 입력합니다.

6. GridView에 표시할 데이터 파일을 준비합니다. (일반적인 경우 서버에 있는 데이터를 수신하나, 본 예제의 경우 로컬 파일을 사용하겠습니다.)

7. 위의 데이터 파일에 따라 아래와 같이 DataList를 정의합니다.

8. DataList에 정의된 형태의 데이터를 출력할 GridView를 Design 탭에 그립니다.

9. Outline – Head 뷰에서 DataList를 GridView로 드래그-앤-드롭하여 GridView와 DataList를 바인딩합니다. 혹은, GridView 우클릭 후 Bind – Bind Set을 클릭하여 바인딩할 DataList를 선택합니다.

10. Outline – Head 뷰에서 Submission을 추가합니다.

11. Submission을 실행할 스크립트를 추가합니다.

한 개의 Submission으로 여러 DataCollection에 데이터를 로딩하기