[API/UI]

Form

개요

Form 클래스는 전통적인 방법 또는 비동기 통신 방법으로 <form>을 전송합니다.
디폴트는 비동기 통신 방법입니다.
Form 클래스의 주요 기능은 다음과 같습니다.
    1. CRUD(Create, Read, Update, Delete를 처리할 수 있습니다.
    2. 데이터를 입력할 수 있는 <form>을 제공합니다.
        - 이때 서버에서 데이터를 가져와 표시할 수 있습니다.
        - 데이터가 없거나 데이터 수신을 지정하지 않으면 Create mode가 됩니다.
        - 데이터가 있으면 <form>에 표시되며 Update, Delete를 할 수 있습니다.
        - updateMode를 false로 설정하면 Update, Delete를 할 수 없는 Read mode가 됩니다.
    3. <form>에 입력한 데이터를 체크합니다.
        - 체크 방법 및 순서
            1) 각 단계에서 에러가 발생하면 다음 단계를 실행하지 않습니다.
            2) 각 컴포넌트에 정의된 에러 체크 메서드를 호출하여 체크를 행합니다.
            3) options.operator를 지정한 경우 이를 기준으로 체크합니다.
            4) Button 클래스의 buttonClick 프로퍼티에 지정한 함수를 호출합니다.
    4. 전통적인 방법 또는 비동기 통신 방법으로로 <form> 데이터를 서버로 전송합니다.
        - 비동기 통신은 다시 동기 통신과 비동기 통신으로 구분할 수 있습니다.
    5. ccode: button에 네 개의 프로퍼티를 지정할 수 있습니다.
        - createData, updateData, deleteData, resetData, getData
        - 디폴트 값은 false이며 아래의 설명은 true를 지정한 경우 입니다.
        1) createData            
            이 버튼은 신규로 데이터를 입력할 때 사용하며 클릭하면 서버로 데이터를 전송합니다.
            {ccode: 'button', text: '저 장', buttonType: 'button', createData: true},
            actionStatus에 'create'가 설정됩니다.

        2) updateData
           이 버튼은 존재하는 데이터를 수정할 때 사용하며 클릭하면 서버로 데이터를 전송합니다.
           {ccode: 'button', text: '저 장', buttonType: 'button', updateData: true},
           actionStatus에 'create' 또는 'update'가 설정됩니다.

        3) deleteData
            이 버튼은 데이터를 삭제할 때 사용하며 클릭하면 서버로 데이터를 전송합니다.
            {ccode: 'button', text: '삭 제', buttonType: 'button', deleteData: true},
            actionStatus에 'delete'가 설정됩니다.

        4) resetData
            이 버튼을 클릭하면 <form>에 입력한 데이터를 reset합니다.
            4.1) {ccode: 'button', text: '입력 취소', buttonType: 'button', resetData: true}
            4.2) {ccode: 'button', text: '입력 취소', buttonType: 'reset', resetData: true}
           - 4.1 형태는 MethodChain에서 reset을 행하며 4.2 형태는  Native 방법으로 reset을 행합니다.
           - 4.2 형태인 경우 resetData를 지정하지 않을 수도 있습니다만, reset을 위한 사전처리를 하지 않게 됩니다.
           - 4.2 형태는 초기 값을 설정하지 못하고 <div>에 설정한 값을 clear할 수 없으므로 4.1 형태를 권장합니다.

        5) getData
            getData 버튼을 기준으로 추출 조건을 입력하는 <form>과 데이터를 입력하는 <form>으로 구분됩니다.
            이는 아래와 같은 프로세스를 의미합니다.
            - <form>에 데이터를 입력합니다. (이를 getData form이라고 칭합니다.)
                getData form에 입력한 데이터가 서버에서 데이터를 추출하는 기준이 됩니다.
                getData form의 엘리먼트는 ccode: button이 아닌 options.getData 프로퍼티에 component로 지정합니다.
            - getData 버튼을 클릭합니다.
                - getData form에 입력한 데이터를 서버로 전송합니다.
                - actionStatus에 'read'가 설정됩니다.
            - 서버에서 데이터를 수신합니다.
            - 수신한 데이터를 getData 버튼 아래의 <form>에 설정합니다.
               이를 data form이라고 칭합니다.
               데이터가 있으면 update/delete 모드가 되고 없으면 create mode가 됩니다.
 
    - 이상의 프로세스를 정리하면 다음과 같은 흐름이 됩니다.
    - 주문번호를 입력하고 getData 버튼을 클릭합니다.
    - 주문번호와 actionStatus 'read'를 서버로 전송합니다.
    - 서버에서 주문번호에 해당하는 데이터를 받아 data form에 표시합니다.
    - 주문 내역을 수정한 후 updateData 버튼을 클릭합니다.
    - 수정한 주문 내역 데이터와 actionStatus 'update'를 서버로 전송합니다.
        주문번호를 같이 보낼 수 있습니다.
    - 서버가 주문 내역 처리 결과를 클라이언트에 전송합니다.
        이 프로세스는 필수가 아닌 선택입니다.
Options Component
action {String} form.Form
form action 속성
전통적인 방법으로 form을 전송할 때 지정합니다.
actionStatus {String} form.FormType
데이터 처리 형태
클라이언트에서 발생한 데이터 처리 형태(CRUD)를 서버 프로그램에서 구분할 수 있도록 하기 위함입니다.
create: 신규로 작성한 데이터
read: 서버에서 데이터 추출
update: 수정 데이터
delete: 삭제 데이터
시스템에서 필드 네임 actionStatus에 위의 구분 값을 설정하여 데이터와 함께 서버로 전송합니다.
시스템이 자동으로 처리하므로 부가적인 처리가 필요하지 않습니다.
allowError {Boolean} form.FormType
에러 발생시 submit 여부. default: false
입력한 값을 체크하여 에러가 발생한 경우 sumbit 여부를 지정합니다.
false: 에러가 있으면 submit 하지 않음
true: 에러를 무시하고 submit 실행
appendSend {Array} form.Form
<form>에 추가해서 서버로 전송할 데이터
tagName이 <input>, <textarea>, <select>는 시스템이 자동으로 값을 추출해서
서버로 전송하게 됩니다.
이는 <div>에 설정한 text는 전송하지 않는다는 것을 의미합니다.
appendSend에 <div>와 같이 자동으로 값을 추출하는 tagName 이외의 엘리먼트 id를 지정하면,
text 값을 추출하여 서버로 전송합니다.
서버로 데이터를 전송하기 위해 hidden 엘리먼트를 설정하지 않아도 됩니다.
async {Boolean} form.Form
비동기 통신 방법 중에서 동기/비동기 형태. default: true
true: 비동기 형태, false: 동기 형태
전통적인 방법과 비동기 통신 방법에 대한 구분은 submitAsync을 사용합니다.
async는 비동기 형태로 통신할 때 동기와 비동기를 구분하는 것입니다.
autoCheck {Boolean} form.FormType
에러 자동 체크 여부. default: true
true: 체크함, false: 체크하지 않음
각 컴포넌트에 정의된 체크 방법으로 체크합니다.
buttonClass {String} form.FormType
button wrapper 엘리먼트에 적용할 className
buttonStyle {Hash} form.FormType
button wrapper 엘리먼트에 적용할 style
cancelConfirm {Hash} form.FormType
취소 확인 Message
MessageBox를 표시하지 않으려면 options에 (cancelConfirm: '')을 작성해야 합니다.
yes는 입력한 값을 취소하는 것을 의미하고, no는 취소를 취소하게 되므로 입력한 값이 남아있게 됩니다.
ccode {String} form.Form
component code : 'form'
clearData {Boolean} form.FormType
최종 데이터를 서버로 전송한 후 <form> 데이터의 초기화 여부. default: true
true: 초기화함, false: reset하지 않고 <form>에 입력한 데이터 유지
createConfirm {Hash} form.FormType
입력 확인 Message
MessageBox를 표시하지 않으려면 options에 (createConfirm: '')을 작성해야 합니다.
    createConfirm: {
        title: {text: '입력 저장 확인'},
        html: '"확인"을 클릭하면 입력한 자료를 저장합니다.<br /> "아니오"를 클릭하면 저장하지 않습니다.',
        buttons: {yes: '확인', no: '아니오'}
    }
createTitle {Boolean} form.FormType
Title 작성 여부.
fasle: 작성하지 않음, true: 작성
defaultCcode {String} form.FormType
default ccode. default: 'labeltext'
component에 ccode를 지정하지 않은 경우 'labeltext'가 설정됩니다.
deleteConfirm {Hash} form.FormType
삭제 확인 Message
MessageBox를 표시하지 않으려면 options에 (deleteConfirm: '')을 작성해야 합니다.
    deleteConfirm: {
        title: {text: '자료 삭제 확인'},
        html: '"확인"을 클릭하면 자료를 삭제합니다.<br /> "아니오"를 클릭하면 삭제하지 않습니다.',
        buttons: {yes: '확인', no: '아니오'}
    }
enableForm {Boolean} form.Form
form 투명도 설정 여부. default: true
getData를 사용하는 경우 data form을 반투명하게 표시합니다.
이때 enableForm에 false를 설정하면 반투명으로 표시하지 않습니다.
failureSendConfirm {Hash} form.FormType
통신 실패 확인 Message
서버와 통신이 실패한 경우 failureConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.failureSendConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
    failureSendConfirm: {
        title: {text: '통신 실패 확인'},
        html: '통신 장애로 인해 입력한 데이터가 서버에 저장되지 않았습니다.
', buttons: {ok: '확인'} }
formClass {String} form.FormType
form 엘리먼트에 적용할 className
formOutsideClass {String} form.Form
formOutside 엘리먼트에 적용할 className
formOutside는 getData form과 data form을 포함하는 엘리먼트입니다.
formOutsideStyle {Hash} form.Form
formOutside 엘리먼트에 적용할 style
formStyle {String} form.FormType
form 엘리먼트에 적용할 style
getData {Object|JSON} form.Form
GetData 오브젝트 또는 JSON
getData form을 생성할 JSON 형태의 오브젝트 또는 생성한 인스턴스를 지정합니다.
자세한 내용은 GetData 클래스를 참조하세요.
getDataConfirm {Hash} form.FormType
서버 데이터 수신 확인 Message
<form>에 서버에서 받은 데이터가 있을 때 '서버에서 데이터 가져오기' 버튼을 클릭하면
서버에서 데이터를 가져와 <form>에 표시되므로 현재 표시된 데이터가 지워집니다.
이를 방지하기 위해 <form>에 데이터가 있을 때 '가져오기' 버튼을 클릭하면 getDataConfirm에 지정한
MessageBox가 표시됩니다.

MessageBox를 표시하지 않으려면 options에 (getDataConfirm: '')을 작성해야 합니다.
또한 ''를 지정하면 현재 <form>에 표시된 데이터가 지워지고 새로운 데이터가 표시됩니다.
getDataConfirm: {
    title: {text: '자료 지움 확인'},
    html: '표시된 데이터가 있습니다.<br /> "확인"을 클릭하면 지웁니다.<br /> 
            "아니오"를 클릭하면 지우지 않습니다.',
    buttons: {yes: '예', no: '아니오'}
}
getFailure {Function} form.Form
서버와 통신이 실패했을 때 실행할 메서드
데이터 수신을 위한 통신이 실패했을때 실행할 메서드를 지정합니다.
submit한 후 통신 에러 처리에 대한 callback 메서드는 onFailure입니다
지정한 메서드에 다음과 같은 순서로 파라미터가 설정됩니다.
파라미터 순서
- status: 통신 실패 코드, 예를 들면 404
- statusText: 통신 실패 명칭
- trans: 통신 오브젝트
- this, this 오브젝트
getSuccess {Function} form.Form
통신이 성공적으로 완료되었을 때 실행할 메서드
데이터 수신을 위한 통신이 성공했을때 실행할 메서드를 지정합니다.
submit한 후 통신 성공 처리에 대한 callback 메서드는 onSuccess입니다.
지정한 메서드에 다음과 같은 순서로 파라미터가 설정됩니다.
파라미터 순서
- data: 서버에서 받아 변환한 데이터
- trans: 통신 오브젝트
- this, this 오브젝트
getTimeout {Function} form.Form
HTTP 통신 시간 초과로 실패했을 때 실행할 메서드
데이터 수신을 위한 통신이 시간 초과로 실패했을때 실행할 메서드를 지정합니다.
submit한 후 시간 초과 에러 처리에 대한 callback 메서드는 onTimeout입니다.
지정한 메서드에 다음과 같은 순서로 파라미터가 설정됩니다.
파라미터 순서
- trans: 통신 오브젝트
- this, this 오브젝트
insideClass {String} form.FormType
inside 엘리먼트에 적용할 className
insideStyle {String} form.FormType
inside 엘리먼트에 적용할 style
metaData {Object} form.Form
MetaData 오브젝트
metaData를 지정하지 않으면 create mode가 됩니다.
method {String} form.Form
form 전송 방법. default: 'POST'
name {String} form.Form
form name 속성
onFailure {Function} form.FormType
서버와 통신이 실패했을 때 실행할 메서드
파라미터 순서 : status, statusText, this 오브젝트
onSuccess {Function} form.FormType
통신이 성공적으로 완료되었을 때 실행할 메서드
서버와 통신이 성공적으로 완료되었을 때 실행할 메소드를 지정합니다.
onSuccess()를 실행한 후 조건에 따라 <form>에 입력한 값을 clear합니다.
<form> 데이터를 최종적으로 서버로 submit한 후 서버에서 처리 결과 등의 데이터를 받을 수 있습니다.
반환되는 데이터는 여러 형태가 가능하지만 확인 개념의 데이터이므로 text 또는 JSON 형태를 권장합니다.
서버에서 받은 responseText를 eval()하여 첫 번째 파라미터에 설정합니다.
서버에서 받은 데이터가 없을 때에는 첫 번째 파라미터에 {}가 설정됩니다.
파라미터 순서
- JSON 형태로 변환한 서버 데이터, 통신 오브젝트, this 오브젝트
onTimeout {Function} form.FormType
HTTP 통신 시간 초과로 실패했을 때 실행할 메서드
파라미터 순서 : statusText('Timeout Abort'), this 오브젝트
operator {Array} form.FormType
<form>의 엘리먼트 값을 비교하여 에러 체크를 할 수 있습니다.
예를 들어, 비밀번호확인 값은 비밀번호에 입력한 값과 같아야 한다면 아래와 같이 작성합니다.
submit 관련 버튼을 클릭했을 때 체크를 행합니다.
['password', '!=', 'confirm', '비밀번호가 다릅니다. 다시 입력해주세요'],

위 코드를 풀어쓰면, 엘리먼트 #password 값이 엘리먼트 #confirm 값과 같지 않으면
'비밀번호가 다릅니다. 다시 입력해주세요'라는 메시지가 표시하라는 의미입니다.

자세한 내용은 mc.form.Operator 클래스를 참조하세요.
outsideClass {String} form.FormType
outside 엘리먼트에 적용할 className. default: 'mc-form'
outsideStyle {Hash|String} form.FormType
outside 엘리먼트에 적용할 style
prefix {String} form.Form
id 접두사. default: 'mc_form_'
resetConfirm {Hash} form.FormType
reset 확인 Message
MessageBox를 표시하지 않으려면 options에 (resetConfirm: '')을 작성해야 합니다.
yes를 클릭하면 reset하고 no를 클릭하면 reset하지 않습니다.
resetConfirm: {
    title: {text: '입력 취소 확인'},
    html: '입력한 자료를 취소하시겠습니까? <br />"예"를 클릭하면 입력한 자료가 지워집니다. <br />
            "아니오"를 클릭하면 지워지지 않습니다.',
    buttons: {yes: '예', no: '아니오'}
}
showMessage {Boolean} form.FormType
입력한 값에서 에러가 있을 때 error message 표시 여부. default: true
false: 표시하지 않음
각 컴포넌트에서 발생한 에러 표시 여부는 각 컴포넌트에 설정해야 하며
showMessage는 Form 관련 클래스의 메시지 표시 여부입니다.
successConfirm {Hash} form.FormType
저장 성공 확인 Message
successConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.successConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
    successConfirm: {
        title: {text: '저장 성공'},
        html: '입력한 데이터가 서버에 저장되었습니다.<br /> "확인"을 클릭하세요.',
        buttons: {ok: '확인'}
    }
submitAsync {Boolean} form.FormType
submit 형태. default: true
true: 비동기 통신 형태, false: 페이지가 이동하는 전통적인 형태
textErrorClass {String} form.FormType
operator 체크에서 에러가 발생했을 때 엘리먼트에 적용할 className
timeoutSendConfirm {Hash} form.FormType
통신 실패 확인 Message.
서버와 통신이 timeout으로 실패한 경우 timeoutSendConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.timeoutSendConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
    timeoutSendConfirm: {
        title: {text: '통신 실패 확인'},
        html: '통신 시간 경과로 인해 입력한 데이터가 서버에 저장되지 않았습니다.<br />',
        buttons: {ok: '확인'}
    }
updateConfirm {Hash} form.FormType
변경 확인 Message
표시된 데이터를 수정 입력할 때 표시됩니다.
MessageBox를 표시하지 않으려면 options에 (updateConfirm: '')을 작성해야 합니다.
    updateConfirm: {
        title: {text: '변경 저장 확인'},
        html: '"예"를 클릭하면 변경한 자료를 저장합니다. <br />"아니오"를 클릭하면 저장하지 않습니다.',
        buttons: {yes: '확인', no: '아니오'}
    }
updateMode {Boolean} form.Form
데이터 입력/수정 가능 여부. default: true.
true: 입력 가능, false: 입력 불가(readOnly)
서버 데이터를 표시한 후 삭제하려는 경우에는 false를 지정하여 수정할 수 없도록 하는 것이 안전합니다.
Method Component
mc.form.Form (Hash)
mc.form.Form(options)
생성자
Parameters :
• {Hash} options, Form클래스에 반영할 options
Returns :
• 없음
form.Form
생성자
mainForm (HTMLElement/String)
mainForm(showTo)
option 설정, HTMLElement생성, Event를 설정합니다.
Parameters :
• {HTMLElement/String} showTo, showTo 엘리먼트
Returns :
• 없음
form.Form
option 설정, HTMLElement생성, Event를 설정합니다.
getComp (String) : Object
getComp(id)
component 오브젝트를 반환합니다.
Parameters :
• {String} id, 오브젝트 id
Returns :
• {Object} id가 같은 컴포넌트
form.FormType
component 오브젝트를 반환합니다.
getForm () : HTMLElement
getForm()
form 엘리먼트를 반환합니다
Parameters :
• 없음
Returns :
• {HTMLElement} <form> 엘리먼트
form.FormType
form 엘리먼트를 반환합니다
getFormComp () : Object
getFormComp()
FormType/FormAsync에서 생성한 component를 포함한 mc.Component.Member 오브젝트를 반환합니다.
반환된 오브젝트를 오브젝트로 하여 mc.Component.Member에서 제공하는 메서드를 사용할 수 있습니다.
Parameters :
• 없음
Returns :
• {Object} mc.Component.Member 오브젝트
form.FormType
FormType/FormAsync에서 생성한 component를 포함한 mc.Component.Member 오브젝트를 반환합니다.
mainFormType (HTMLElement/String)
mainFormType(showTo)
option 설정, HTMLElement생성, Event를 설정합니다.
Parameters :
• {HTMLElement/String} showTo, showTo 엘리먼트
Returns :
• 없음
form.FormType
option 설정, HTMLElement생성, Event를 설정합니다.
Custom Event Component
applyData (HTMLElement form, Object this) form.Form
데이터를 <form>에 설정할때 fire됩니다.
Examples  
입력  
Form에서 데이터를 입력합니다.
onSuccess  
통신이 성공되었을 때 서버로 전송한 데이터를 다시 받아 #id와 value를 출력합니다.
combo  
서제스트를 사용
combo.dataFields  
서제스트 값으로 다른 필드 값 자동 설정
update  
Form update basic
update combo  
서제스트 값으로 다른 필드 값 자동 설정
update select  
select 값으로 자동 계산