8 Replies Latest reply on Oct 16, 2007 7:47 AM by levancho

    User error checking

    Handycam Level 1
      I have a fairly typical app with multiple screens, where the user makes choices on each screen -- by dragging items from one datagrid to another. The user traverses the various steps (screens, actually a viewStack) by either clicking previous/next buttons on each screen or by clicking another step in a link bar bound to the viewStack.

      My problem is how to check any errors on a given screen BEFORE the user leaves it, and display an error (e.g. "you can only have 5 items here ").

      If all I had was the previous/next buttons, this would be simple -- just check the errors before issuing the command to navigate the viewStack. But the user can click the buttons on the linkBar and bypass my other buttons.

      So how can I hook up a checking function that is fired whenever the user tries to leave the screen, to display my error AND prevent them from leaving (i.e. cancel the event)?

      Any help here gratefully appreciated.
        • 1. Re: User error checking
          Gregory Lafrance Level 6
          One idea is when responding to user clicks on the LinkBar (or whatever user would click to leave the page), do validation there, and return from the event handler function without leaving the page/screen.

          If you have a LinkBar, the itemClick handler can first validate user choices on the screen by calling a function, and based on the return vallue of the validation function, can either return out of the itemClick handler function without moving user to the next screen (user did something wrong) or advance them to the next screen (validation succeeded).
          • 2. Re: User error checking
            Handycam Level 1
            But how do I prevent the linkBar from executing its default behavior? From the docs it doesn't look like the event is cancellable, although I admit I'm not that knowledgeable about events like this one.
            • 3. User error checking
              levancho Level 3
              linkbar is changing stack or something?

              use linkbar's or viewStack's childIndexChange event which dispatches event object of type : IndexChangedEvent
              it has very usefull attributes in it which are :

              newIndex The zero-based index of the child after the change.
              oldIndex The zero-based index of the child before the change.

              so do validation in that listener and if it fails set linkbars/stackVies or whatever mechanizm you have selectedIndex to oldIndex otherwise let it go to newIndex .
              • 4. Re: User error checking
                Handycam Level 1
                If I understand correctly, this should get me a result in the trace log:
                private function bar(event:IndexChangedEvent) : void {
                trace('clicked');
                trace(event);
                trace(event.oldIndex);
                trace(event.newIndex);
                }

                But I get nothing at all with a trace from
                <mx:ViewStack id="vs" childIndexChange="bar(event)" >
                or
                <mx:LinkBar id="mybar" width="100%" dataProvider="{vs}" childIndexChange="bar(event)" />

                Am I doing it wrong?
                • 5. User error checking
                  levancho Level 3
                  sorry just looked in my code event is IndexChangedEvent.CHANGE not
                  childIndexChange. ( I am sorry for that confusion) here is how I do it
                  ina creationComplete of container component that has viewStack in it I do :
                  myviewtack.addEventListener(IndexChangedEvent.CHANGE,initSelectedStackProps);


                  if you want to do it through mxml then you should use change event of viewStack not childIndexChange

                  <mx:ViewStack id="vs" change="bar(event)" >
                  • 6. Re: User error checking
                    Handycam Level 1
                    quote:

                    here is how I do it
                    ina creationComplete of container component that has viewStack in it I do :
                    myviewtack.addEventListener(IndexChangedEvent.CHANGE,initSelectedStackProps);


                    Thanks. That should do it. If I use a handler like:
                    private function initSelectedStackProps(event:IndexChangedEvent) : void {
                    var _userError:Boolean = true;
                    if (_userError){
                    trace('ERROR');
                    vs.selectedIndex = event.oldIndex;
                    myBar.selectedIndex = event.oldIndex;
                    }
                    }

                    Note I also need to set the selectedIndex of the linkBar so the correct step is highlighted. I'll let you know how it goes.

                    Hey, Adobe, how about making this event cancelable? So if we have an error condition we can STOP the navigation in its tracks instead of switching back?
                    • 7. Re: User error checking
                      Handycam Level 1
                      OK, here's the problem that now arises.

                      The above code works perfectly when the VS changes elements. However, I'm having an issue where the change event is not being fired.

                      As advised above, I have this creationComplete event:
                      mainViewStack.addEventListener(IndexChangedEvent.CHANGE,changeStep);

                      Calls this handler:
                      public function changeStep(event:IndexChangedEvent) : void {
                      trace("changeStep says err condition ="+_errCondition);
                      var _intendedStep:int = event.newIndex;
                      trace("intended step ="+_intendedStep);
                      if (_errCondition){
                      // the errNum is a global variable set by each step, its the step number
                      trace('ERROR in step number '+_errNum);
                      mainViewStack.selectedIndex = _errNum;
                      mainMenu.selectedIndex = _errNum;
                      } else {
                      trace("no errors");
                      mainViewStack.selectedIndex = _intendedStep;
                      mainMenu.selectedIndex = _intendedStep;
                      }
                      }

                      The "next" button on my screen calls:
                      public function nextStep():void{
                      if (mainViewStack.selectedIndex < mainViewStack.numChildren-1)
                      {
                      mainViewStack.selectedIndex += 1;
                      }
                      }

                      The problem is when that when _errCondition = false, the TRACE statement does say "no errors". But the VS does not go to the requested index. It just stays on step 1. Tracing the oldIndex and newIndex shows the numbers are correct, but nothing happens.
                      • 8. User error checking
                        levancho Level 3
                        maybe you have to change index of LinkBar instead of vs, since as i understand your vs is bind to it

                        and I think now that I read linkbar api that is the case, go through linkbar with same logic I think it will work.