Flex itemEditor - 제2 부분 이해: 이벤트 편집 및 복잡 편집기
11289 단어 Flex itemEditor
전재 하 다 http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt1.html
이 시리즈 제1 부분 에서 간단 한 내 연 item Editor 를 만 드 는 방법 을 보 았 습 니 다.만약 당신 이 읽 은 적 이 있다 면 itemRenderer 시리즈, 당신 은 둘 이 매우 비슷 하 다 는 것 을 발견 할 수 있 을 것 입 니 다.
itemEditor 가 정상적으로 작 동 할 수 있 도록 두 가지 요점 이 있 습 니 다.우선
itemEditor 속성 이름 클래스.다음으로 editorDataField 속성 이름 itemEditor 의 value 속성 입 니 다.본 논문 에서 저 는 이벤트 로 더 복잡 한 itemEditor 를 만 드 는 방법 을 설명 할 것 입 니 다. 간단 한 데이터 검증 작업 을 수행 할 수 있 고 다른 사람 이 특정한 셀 을 편집 하 는 것 을 방지 할 수 있 습 니 다.
여기 서 주의 하 세 요. 여기 있 는 '복잡 함' 은 많은 제어 와 레이아웃 을 포함 하 는 편집 기 를 말 하 는 것 이 아 닙 니 다.내 가 말 하 는 것 은 내 연 item Editor 보다 좀 복잡 하 다 는 것 이다.DataGrid 의 목록 이나 셀 에서 복잡 한 편집 을 요구 할 때 불공평 하 다 고 생각 합 니 다.편집 기 는 한 가지 일 에 만 관심 을 가 져 야 합 니 다: 셀 의 내용.예 를 들 어 목록 을 사용 하여 카 트 를 제어 하고 보 여 준다 면 사용자 가 셀 의 값 을 직접 편집 하여 카 트 의 상품 수량 을 변경 할 수 있 도록 합 니 다.그러나 그들 이 상품 자체, 색깔, 특수 설명 등의 내용 을 변경 하도록 허락 하 는 것 은 불합리 하 다.쇼핑 카 트 에서 직접 상품 을 구 매 할 수 있 도록 허용 하 는 것 은 합 리 적 이지 않다 는 얘 기다. 역 전체 가 상품 을 구 매 할 수 있 기 때문이다.카 트 는 단지 그들 이 계산 하 는 것 을 편리 하 게 할 뿐이다.물론 아이스크림 한 캔 을 더 넣 거나 감자 칩 한 봉 지 를 떼 어 낼 수 는 있 지만 감자 칩 을 통 밀 파스 타 두 박스 로 바 꿔 서 는 안 된다.
itemEditEnd 이벤트
응용 프로그램 에 DataGrid 가 재고 관 리 를 돕 는 데 사용 된다 고 가정 합 니 다.사용 자 는 위 젯 번 호 를 변경 할 수 있 지만 위 젯 번 호 를 비 워 두 는 것 을 원 하지 않 습 니 다.기본 itemEditor, 즉 TextInput 제 어 를 사용 하면 'Part \ #' 열 에 있 는 셀 을 누 르 고 delete 키 를 누 르 고 위 젯 번 호 를 지 울 수 있 습 니 다.다음 코드 는 일종 의 기술 을 실시 함으로써 이런 상황 을 방지한다.
<mx:DataGrid x="10" y="64" editable="true" dataProvider="{inventoryDB}"
itemEditEnd="verifyInput(event)">
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="product"/>
<mx:DataGridColumn headerText="Part #" dataField="part"/>
<mx:DataGridColumn headerText="Type" dataField="type"
itemEditor="editors.ProductTypeEditor" editorDataField="type"/>
<mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
</mx:columns>
</mx:DataGrid>편집 이 끝 날 때마다 목록 제어 스케줄 링
itemEditEnd 사건데이터 가 dataProvider 에 제출 되 기 전에 이벤트 가 발생 합 니 다.이 사건 을 처리 하면 데 이 터 를 변경 하거나 데 이 터 를 검증 하고 상황 에 따라 제출 을 중단 할 수 있 습 니 다.이 예 에서 verifyInput() 함수 가 제품 부품 번호 가 비어 있 지 않도록 확보 합 니 다. private function verifyInput( event:DataGridEvent ) : void
{
// it is OK if the user cancels the edit
if( event.reason == DataGridEventReason.CANCELLED ) return;
// grab the instance of the itemEditor. For this DataGrid, only the
// TextInput control is used as the editor, so it is safe to get the
// editor no matter what column has been edited.
var editor:TextInput = (event.currentTarget as DataGrid).itemEditorInstance as TextInput;
// if the edit is on the part number column, make sure it is not blank
if( event.dataField == "part" )
{
if( editor.text.length == 0 ) {
// call event.preventDefault() so the edit will not continue and store the
// blank value
event.preventDefault();
// give the editor an error to display to the user
editor.errorString = "You must enter a part number";
return;
}
}
// handle other columns here
}이 이 벤트 는 DataGridEvent 류 의 인 스 턴 스 로 실 용적 인 속성 을 포함 합 니 다.
reason 속성 은 이 사건 을 스케줄 링 하 는 원인 을 설명 합 니 다.사용자 가 ESCAPE 키 를 누 르 거나 DataGrid 이외 의 영역 을 누 르 면 DataGridEventReason. CANCELED 때 문 입 니 다.저 처럼 이 사건 을 무시 하고 싶 을 수도 있 습 니 다. DataGrid 에 게 기본 동작 만 실행 하면 편집 을 취소 하고 이전 값 을 복원 할 수 있 습 니 다.이 사건 을 처리 하기 로 결정 하면 itemEditor 가 있어 야 속성 에 접근 할 수 있 습 니 다.이벤트
currentTarget 속성 은 제 어 를 포함 합 니 다. DataGrid 로 변 환 했 습 니 다.DataGrid 는 하 나 를 포함 합 니 다. itemEditorInstance 속성, 나 는 그것 을 TextInput 으로 변환 합 니 다. 이 예 에 대해 서 는 속성 itemEditor 형식 입 니 다.모든 셀 에 이 이벤트 처리 프로그램 을 호출 할 것 이기 때문에 편집 을 검증 할 지 여 부 를 결정 해 야 합 니 다.제 가 사건 을 검 사 했 어 요.
dataField 속성, 셀 이 "part" 열 에 있 는 지 확인 합 니 다.만약 그렇다면, 나 는 편집 기 를 테스트 할 것 이다. text 속성, 어떤 문자 가 포함 되 어 있 는 지 확인 합 니 다.문자 가 없 으 면 두 가지 일이 발생 합 니 다.우선
event.preventDefault() 。나 는 이런 방식 으로 편집 작업 을 방지 하고 DataGrid 가 새 값 을 dataProvider 로 복원 하 는 것 을 방지 합 니 다.사용자 에 게 는 TAB 나 ENTER 키 를 누 른 후에 아무 일 도 일어나 지 않 은 것 같 습 니 다.preventDefault() 함수 가 itemEditor 를 제자리 에 유지 합 니 다.그 다음 에 저 는 error String 을 TextInput 제어 에 두 었 습 니 다.이것 은 선택 할 수 있 는 것 이지 만, 그것 은 오히려 사용자 에 게 잘못 되 었 다 는 것 을 알려 줄 것 이다.TAB 나 ENTER 키 를 눌 렀 을 때 아무 일 도 일어나 지 않 았 기 때문에 이 유 를 제공 해 야 한다.
itemEdit 이벤트 시작
때때로 셀 이 편집 되 는 것 을 방지 하고 싶 을 수도 있 습 니 다.DataGridColumn 의 편집 가능 한 속성 을 false 로 설정 할 수 있 지만, 각 칸 이 편집 되 는 것 을 방지 할 수 있 습 니 다.열 에 있 는 셀 만 편집 할 수 없 는 것 으로 바 꾸 기 를 원한 다 고 가정 하 시 겠 습 니까?사용 가능
itemEditBeginning 이 벤트 는 편집 할 수 있 는 셀 을 지정 합 니 다. <mx:DataGrid x="10" y="64" editable="true" dataProvider="{inventoryDB}"
itemEditEnd="verifyInput(event)"
itemEditBeginning="allowForEdit(event)">
<mx:columns>
<mx:DataGridColumn headerText="Product" dataField="product"/>
<mx:DataGridColumn headerText="Part #" dataField="part"/>
<mx:DataGridColumn headerText="Type" dataField="type"
itemEditor="editors.ProductTypeEditor" editorDataField="type"/>
<mx:DataGridColumn headerText="Quantity" dataField="quantity"/>
</mx:columns>
</mx:DataGrid>처리 에 통과 하 다
itemEditBeginning 이벤트, 셀 의 편집 성 을 동적 으로 결정 할 수 있 습 니 다.이 예 에서 데이터 의 모든 기록 에는 이름 이 포함 되 어 있 습 니 다. permanent 필드저희 생각 은 요. permanent=true 제품 이름 은 변경 할 수 없 는 값 이기 때문에 이 줄 의 제품 셀 을 편집 할 수 없습니다.그것 은 allowForEdit() 함수 처리: private function allowForEdit(event:DataGridEvent) : void
{
// if the field to be edited is a product, prevent the user from making
// changes if the permanent flag is true<. You can use more complex logic,
// of course.
if( event.dataField == "product" ) {
var item:Object = ((event.currentTarget as DataGrid).dataProvider as ArrayCollection)[event.rowIndex];
if( item.permanent ) {
event.preventDefault();
}
}
// handle other columns here
}다시 한 번 말씀 드 리 지만 이 사건 은 DataGridEvent 류 의 인 스 턴 스 입 니 다. 저 는 여기에서 사건 을 검 사 했 습 니 다.
dataField 속성, 내 가 처리 하고 있 는 "produt" 필드 인지 확인 하 십시오.그 후에 나 는 사건 을 사용 할 수 있다. currentTarget 속성 은 DataGrid 의 dataProvider 에서 기록 을 얻 고 DataGrid 로 변환 합 니 다.그 후에 저 는 DataGrid 의 dataProvider 를 Array Collection 으로 전환 하여 얻 었 습 니 다. event.rowIndex 값.저도 이 함수 에 직접 접근 할 수 있 습 니 다. inventoryDB Array Collection 은 같은 파일 에 있 지만 이 방법 은 더 일반적 입 니 다.기록 을 얻 은 후, 나 는 그 매개 변수 속성 과 그것 이 true 인지, 호출 되 었 는 지 를 조회 할 수 있다.
event.preventDefault() 함수 가 이 셀 의 편집 작업 을 사용 하지 않 습 니 다.이 예 에서 itemEditBeginning 기본 동작 은 itemEditor 를 표시 하 는 것 입 니 다.기본 동작 을 막 으 면 이 셀 을 편집 할 수 없습니다.편집 제한
편집 사건 을 처리 할 때 약간의 제한 을 고려 해 야 한 다 는 것 을 주의해 야 한다.편집 이 벤트 를 사용 하여 이 벤트 를 계속 진행 할 지 여 부 를 결정 할 때 백 엔 드 나 서버 프로 세 스 를 호출 하 기 를 원할 수도 있 습 니 다.예 를 들 어 위 젯 번 호 를 검증 할 수 있 는 웹 서비스 가 있 을 수 있 습 니 다.지금
itemEditEnd 이벤트 에서 웹 서비스 호출 을 실행 하고 사용자 가 방금 입력 한 내용 을 검증 하려 고 시도 합 니 다.논리 에 맞 는 것 같 아 요. 그 렇 죠?논리 에 맞 는 것 같 지만 실제 적 으로 는 안 됩 니 다. 서비스 호출 이 비동기 적 이기 때 문 입 니 다.호출 을 실행 할 수 있 지만 나중에 결 과 를 되 돌려 줍 니 다. 이벤트 처리 프로그램 이 종 료 될 때 까지 기 다 려 야 합 니 다.사실 함수 가 종료 되 기 전에 호출 을 실행 하지 않 습 니 다.호출 은 줄 을 서서 Flex 프레임 워 크 에서 함 수 를 종료 할 때 요청 을 실행 한 다음 웹 서비스의 결과 처리 프로그램 에서 결 과 를 되 돌려 줍 니 다.
따라서 셀 을 편집 할 때 이러한 서버 측 인증 을 실행 할 수 없습니다.이러한 인증 을 실행 하려 면 프로그램 이 시 작 될 때 인증 할 데 이 터 를 서버 에 조회 하고 셀 을 편집 할 때 사용 해 야 합 니 다.
후속 작업
동적 으로 변경 사항 을 편집 하고 검증 할 수 있 는 능력 은 응용 프로그램의 사용자 체험 을 대폭 개선 할 수 있다.사용자 가 오 류 를 줄 이 고 편집 과정 에서 피드백 을 할 수 있 도록 도와 줄 수 있 습 니 다.사용자 가 변경 할 수 없 는 내용 을 검증 할 필요 가 없 기 때문에 특정 데 이 터 를 편집 하고 프로그램 개발 을 간소화 하 는 것 을 방지 할 수 있 습 니 다.
(전재 출처: 로 또 통http://www.hoom.org)
좋은 웹페이지 즐겨찾기
