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