2009-08-09 4 views
1

4 개의 탭으로 플렉스 애플리케이션을 개발 중입니다. 사용자가 탭을 전환하면 이전 탭을 초기 상태로 재설정하려고합니다. 또한 사용자가 변경 한 사항을 저장하지 않은 경우 사용자에게 알려야합니다.플렉스 - 탭 아래의 필드 변경 확인

모델에 변수를 설정하고 탭 아래의 필드에서 변경이 발생하면이를 설정/재설정 할 계획입니다. 그러나 이것을 어떻게 모니터합니까? 이것에 청취자가 있습니까?

또한 이전 탭의 상태를 확인하고 재설정하려면 어떻게해야합니까? 탭 아래에 오는 내용은 구성 요소에서만 제공됩니다.

[편집] 내 질문은 : 사용자가 현재 탭에있는 편집을 만든 경우

  1. 어떻게 확인합니까? 일부 필드는 동적으로 생성됩니다.
  2. TabNavigator의 onchange 이벤트에서 함수를 호출하고 실제로 탭을 전환할지 묻는 메시지가 나타납니다. 사용자가 경고 상자에서 예를 클릭 한 경우에만 다른 탭의 내용을로드하고 싶습니다. 갑자기 나타났다. 하지만 이제 확인 상자가 나타나고 내용이 다른 탭에로드되고 사용자가 아니요를 클릭하면 다른 탭으로 돌아갑니다. 사용자가 예를 누를 때까지 다른 탭의 내용을로드하는 동작을 방지하려면 어떻게합니까?

귀중한 의견을 보내주십시오.

답변

1

1) 사용자가 필드를 편집 할 때마다 이벤트를 보낼 수 있습니다. 이벤트는 업데이트 된 항목에 대한 올바른 정보로 모델의 일부 속성을 업데이트하는 명령으로 처리 할 수 ​​있습니다. 그러면 누구나 볼 수있는 사람은 그 속성에 묶일 수 있습니다.

2) onChange() 핸들러에서 event.preventDefault()를 호출하십시오. 그런 다음 사용자가 예를 클릭 한 경우에만 프로그래밍 방식으로 다음 탭을 선택할 수 있습니다.

2

질문 1에 대한 답변은 다음과 같습니다. 부울 변수를 사용하여 사용자가 데이터를 편집했는지 추적합니다. 사용자가 탭을 선택하면이 변수를 false로 설정합니다. 탭 내의 모든 필드에서 변경 이벤트를 청취하십시오. 모든 필드에 대한 change 이벤트 핸들러를 Boolean을 true로 설정하는 메소드로 설정하십시오. 동적 필드의 경우 다른 필드와 동일한 변경 이벤트 핸들러를 추가하십시오. 각 동적 필드를 만드는 즉시이 작업을 수행하십시오. 아래 코드를 참조하십시오.

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
    <mx:Script> 
     <![CDATA[ 
      private var userChangedData:Boolean=false 

      function onUserChangedData() 
      { 
       trace("onUserChangedData") 
       userChangedData=true 
      } 

      function onTabChanged() 
      { 
       trace("ontabchanged") 
       trace(userChangedData) 
       userChangedData=false 
      } 
     ]]> 
    </mx:Script> 
    <mx:Panel title="TabNavigator Container Example" 
       height="90%" 
       width="90%" 
       paddingTop="10" 
       paddingLeft="10" 
       paddingRight="10" 
       paddingBottom="10"> 

     <mx:TabNavigator id="tn" 
         width="100%" 
         height="100%" 
         change="onTabChanged()"> 
      <!-- Define each panel using a VBox container. --> 

      <mx:VBox label="Panel 1"> 
       <mx:Label text="TabNavigator container panel 1"/> 
       <mx:TextInput text="default" 
           change="onUserChangedData()"/> 
       <mx:CheckBox label="check something" 
          change="onUserChangedData()"/> 
      </mx:VBox> 

      <mx:VBox label="Panel 2"> 
       <mx:Label text="TabNavigator container panel 2"/> 
      </mx:VBox> 

      <mx:VBox label="Panel 3"> 
       <mx:Label text="TabNavigator container panel 3"/> 
      </mx:VBox> 
     </mx:TabNavigator> 


    </mx:Panel> 

+0

전체 응용 프로그램에 연결하고 부울을 설정하는 전역 onchange/onkeypress 메서드를 추가 할 수 있습니까? 그렇지 않으면 onchange 이벤트를 추가하기 위해 여러 곳에서 편집해야합니다. – jobinbasani

+0

솔루션을 제공해 주셔서 감사합니다. 하지만 onchange 이벤트 처리기를 설정하면 TabNavigator에서 제대로 작동하지 않습니다. http://natescodevault.com/?p=43에서 해결책을 찾았으며 잘 작동합니다 ... – jobinbasani

+0

흥미 롭습니다. 탭 탐색기의 변경 이벤트에 대해 알지 못했습니까? –

0

아직 설명을 추가 할 수있는 명성을 가지고 있지 않지만, 귀하의 질문에 대답 :

"는에 후크 글로벌 onchange를/때 onKeyPress 방법을 추가 할 수 있습니다를 완전한 응용 프로그램을 만들고 부울을 설정합니까? 그렇지 않으면 onchange 이벤트를 추가하기 위해 여러 장소에서 편집해야합니다. - Basani "

예,"변경된 사항 "이 이브를 파견해야 함을 알릴 필요가있는 각 장소를 마련하십시오. nt. 그런 다음 지휘관에게 그 사건의 파견을 지켜 보게하십시오. 이 명령은 모델에서 userDataChanged 부울을 설정하는 것을 포함하여 필요한 모든 처리를 수행 할 수 있습니다.

질문에 태그를 추가하는 방식에 따라 Cairngorm을 사용하는 것처럼 들리므로 쉽게 지원해야합니다.