private function myAccordion(e:IndexChangedEvent):void {
  // perform validations before allowing step change
  if (e.newIndex > 0) {
    // selection required to move beyond this step
    if (myRequiredItem== null) {
      // save the step to return to
      this.current_step = 0;
      // add the event listener
      myAccordion.addEventListener(FlexEvent.UPDATE_COMPLETE, flexUpdateComplete);
      // show an alert - this won't show until the slide is complete actually
      Alert.show("You must select a fabric!");
    }
  }
}

private function flexUpdateComplete(event:Object):void {
  myAccordion.selectedIndex = this.current_step;
  myAccordion.removeEventListener(FlexEvent.UPDATE_COMPLETE, flexUpdateComplete);
}

private function accBuildSteps_test(e:IndexChangedEvent):void {
    // perform validations before allowing step change
    if (e.newIndex > 0) {
        // selection required to move beyond this step
        if (mgrProducts.SelectedFabric == null) {
            accBuildSteps.addEventListener(FlexEvent.UPDATE_COMPLETE, flexUpdateComplete);
            Alert.show("You must select a fabric!");
        }
    }
}

private function flexUpdateComplete(event:Object):void {
    accBuildSteps.selectedIndex = 0;
    accBuildSteps.removeEventListener(FlexEvent.UPDATE_COMPLETE, flexUpdateComplete);
}

Peter

Actually, this may be a better way of doing what you want (or, at least I think it is cool):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Accordion id="acc"
            headerRenderer="comps.MyAccHeader"
            width="100%" height="100%">
        <mx:VBox id="v1" label="One">

        </mx:VBox>
        <mx:VBox id="v2" label="Two" enabled="false">

        </mx:VBox>
        <mx:VBox id="v3" label="Three" enabled="false">

        </mx:VBox>
        <mx:VBox id="v4" label="Four">

        </mx:VBox>
        <mx:VBox id="v5" label="Five">

        </mx:VBox>
    </mx:Accordion>

</mx:Application>

comps/MyAccHeader.as

package comps {
    import mx.containers.accordionClasses.AccordionHeader;
    import mx.events.FlexEvent;

    public class MyAccHeader extends AccordionHeader {
        public function MyAccHeader() {
            super();
            addEventListener(FlexEvent.INITIALIZE, accordionHeader_initialize);
        }

        private function accordionHeader_initialize(evt:FlexEvent):void {
            enabled = data.enabled;
        }
    }
}

Now the enabled property on the VBox container should bubble up to the AccordionHeader.

In fact, I think it is SO cool and useful that I may turn it into today’s “official”
example (and that way it will get a nice SWF too).

Happy Flexing!
Peter

OMG TY TY TY

- Nick

acc.getHeaderAt(0).enabled = false;

Peter

This should disable all Accordion header mouse clicks and only allow users to change the selected child using the nested Button controls. (I say *should* since I haven’t really tested this):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Accordion id="acc"
            headerRenderer="comps.MyAccHeader"
            width="100%" height="100%">
        <mx:VBox id="v1" label="One">
            <mx:Button label="next" click="acc.selectedChild = v2;" />
        </mx:VBox>
        <mx:VBox id="v2" label="Two">
            <mx:Button label="prev" click="acc.selectedChild = v1;" />
            <mx:Button label="next" click="acc.selectedChild = v3;" />
        </mx:VBox>
        <mx:VBox id="v3" label="Three">
            <mx:Button label="prev" click="acc.selectedChild = v2;" />
            <mx:Button label="next" click="acc.selectedChild = v4;" />
        </mx:VBox>
        <mx:VBox id="v4" label="Four">
            <mx:Button label="prev" click="acc.selectedChild = v3;" />
            <mx:Button label="next" click="acc.selectedChild = v5;" />
        </mx:VBox>
        <mx:VBox id="v5" label="Five">
            <mx:Button label="prev" click="acc.selectedChild = v4;" />
        </mx:VBox>
    </mx:Accordion>

</mx:Application>

comps/MyAccHeader.as

package comps {
    import mx.containers.accordionClasses.AccordionHeader;

    public class MyAccHeader extends AccordionHeader {
        public function MyAccHeader() {
            super();
            mouseEnabled = false;
        }
    }
}

And there may be better ways of doing this, but this was the first thing that came to mind.

Hope that helps,
Peter

I’m in the same boat as Rod Keith also lol. Can you possibly do a example on how to disable accordion index’s not allowing the user to click them to bring them up but rather click a continue or submit button in the main accordion index which loads you into the next accordion index?

Please :)

- Nick

Accordion.getHeaderAt(1).enabled = false;

I’d like to know if there are others ways to do the same thing, but this will work for me.

regards,
-r