[API/UI]

FormType

개요

FormType 클래스는 Form 관련 클래스의 Super Class입니다.
FormType 클래스의 주요 기능은 다음과 같습니다.    
    1. 엘리먼트 구조를 위한 frame 엘리먼트를 생성합니다.
    2. component 프로퍼티를 실행하여 컴포넌트 오브젝트와 엘리먼트를 생성합니다.
    3. 각 클래스에 정의된 에러 체크를 실행합니다.        
        - null check, number check 등
    4. operator 프로퍼티에 지정한 방법으로 복수의 엘리먼트 값을 체크합니다.
        - 기능에 대해서는 Operator 클래스를 참조하세요
    5. 전통적인 방법으로 form을 submit 할 수 있습니다.
        - 입력한 값에 에러가 없거나 에러 허용인 경우에만 실행합니다.
    6  전통적인 방법으로 reset 처리를 할 수 있습니다.
    7. <form> 데이터를 서버로 전송하기 전에 확인용 MessageBox를 표시할 수 있습니다.
        - 이에 대해서는 createConfirm, deleteConfirm, updateConfirm, cancelConfirm을 참조하세요.
        - MessageBox 클래스의 yesNo() 메서드를 호출합니다.
Options Component
actionStatus {String} form.FormType
데이터 처리 형태
클라이언트에서 발생한 데이터 처리 형태(CRUD)를 서버 프로그램에서 구분할 수 있도록 하기 위함입니다.
create: 신규로 작성한 데이터
read: 서버에서 데이터 추출
update: 수정 데이터
delete: 삭제 데이터
시스템에서 필드 네임 actionStatus에 위의 구분 값을 설정하여 데이터와 함께 서버로 전송합니다.
시스템이 자동으로 처리하므로 부가적인 처리가 필요하지 않습니다.
allowError {Boolean} form.FormType
에러 발생시 submit 여부. default: false
입력한 값을 체크하여 에러가 발생한 경우 sumbit 여부를 지정합니다.
false: 에러가 있으면 submit 하지 않음
true: 에러를 무시하고 submit 실행
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.FormType
component code : 'formtype'
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: '아니오'}
    }
failureSendConfirm {Hash} form.FormType
통신 실패 확인 Message
서버와 통신이 실패한 경우 failureConfirm에 지정한 메시지가 MessageBox에 표시됩니다.
options.failureSendConfirm에 ''를 지정하면 MessageBox가 표시되지 않습니다.
    failureSendConfirm: {
        title: {text: '통신 실패 확인'},
        html: '통신 장애로 인해 입력한 데이터가 서버에 저장되지 않았습니다.
', buttons: {ok: '확인'} }
formClass {String} form.FormType
form 엘리먼트에 적용할 className
formStyle {String} form.FormType
form 엘리먼트에 적용할 style
getDataConfirm {Hash} form.FormType
서버 데이터 수신 확인 Message
<form>에 서버에서 받은 데이터가 있을 때 '서버에서 데이터 가져오기' 버튼을 클릭하면
서버에서 데이터를 가져와 <form>에 표시되므로 현재 표시된 데이터가 지워집니다.
이를 방지하기 위해 <form>에 데이터가 있을 때 '가져오기' 버튼을 클릭하면 getDataConfirm에 지정한
MessageBox가 표시됩니다.

MessageBox를 표시하지 않으려면 options에 (getDataConfirm: '')을 작성해야 합니다.
또한 ''를 지정하면 현재 <form>에 표시된 데이터가 지워지고 새로운 데이터가 표시됩니다.
getDataConfirm: {
    title: {text: '자료 지움 확인'},
    html: '표시된 데이터가 있습니다.<br /> "확인"을 클릭하면 지웁니다.<br /> 
            "아니오"를 클릭하면 지우지 않습니다.',
    buttons: {yes: '예', no: '아니오'}
}
insideClass {String} form.FormType
inside 엘리먼트에 적용할 className
insideStyle {String} form.FormType
inside 엘리먼트에 적용할 style
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.FormType
id 접두사. default: 'mc_formtype_'
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: '아니오'}
    }
Method Component
mc.form.FormType (Hash)
mc.form.FormType(options)
생성자
Parameters :
• {Hash} options, FormType 클래스에 반영할 options
Returns :
• 없음
form.FormType
생성자
mainFormType (HTMLElement/String)
mainFormType(showTo)
option 설정, HTMLElement생성, Event를 설정합니다.
Parameters :
• {HTMLElement/String} showTo, showTo 엘리먼트
Returns :
• 없음
form.FormType
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 오브젝트를 반환합니다.
Custom Event Component