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: '통신 장애로 인해 입력한 데이터가 서버에 저장되지 않았습니다. |
|
| 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)
|
form.FormType |
|
생성자
|
|
mainFormType
(HTMLElement/String)
|
form.FormType |
|
option 설정, HTMLElement생성, Event를 설정합니다.
|
|
getComp
(String) : Object
|
form.FormType |
|
component 오브젝트를 반환합니다.
|
|
getForm
() : HTMLElement
|
form.FormType |
|
form 엘리먼트를 반환합니다
|
|
getFormComp
() : Object
|
form.FormType |
|
FormType/FormAsync에서 생성한 component를 포함한 mc.Component.Member 오브젝트를 반환합니다.
|
|
| Custom Event | Component |
|---|---|
|
|
|