View State question - changing states and custom states

Question

Hi all,
I'm working on an application that lets a user register for an event. Each event has associated child information: conferences, tickets, etc. associated with it. What I'm trying to do is create some sort of checkbox list so that, when a user clicks on an event to add it to his registration, the associated child information appears in the display so he can choose all this information at once. I have the list working and I've been trying to use a custom ItemRenderer to pop in the extra info for the user to select when he clicks on an event. The problem I'm having is that, when the user goes to click on a child to add it to his registration, my state is changing back from "selected" to "normal" and the child information disappears. So I guess I have two questions. One, am I even remotely on the right track here? If not, can someone suggest a better approach? Two, if this is the right approach, how do I solve the "disappearing child" problem? I tried creating a custom state that would set everything to visible, but I can't seem to figure out how to get into it...I tried just putting a click event on it and just doing an Alert.show(currentState) to see if I was even getting into my custom state, but I just kept switching between "normal" and "selected."
Code:
ItemRenderer:
<s:ItemRenderer name="eventItemRenderer"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
focusEnabled="false" xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:registrationapi="services.registrationapi.*">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
//this gets my data to populate the dropDown list when the parent event is selected
protected function checkbox1_clickHandler(event:MouseEvent, selectedEventCode:String):void
showPrimaryConferences = true;
getEventConferencesResult.token = registrationAPI.getEventConferences(selectedEventCode.name);
protected function comboBox_creationCompleteHandler(event:FlexEvent):void
getEventConferencesResult.token = registrationAPI.getEventConferences(data.EventCode);
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
<s:State name="selected"/>
</s:states>
<s:Rect top="0" left="0" right="0" bottom="0">
<s:fill>
<s:SolidColor id="backgroundColor" color="0xFFFFFF" />
</s:fill>
</s:Rect>
<!-- checkmark -->
<s:Path data="M 3.5 6.5 l 2 2 l 6 -7" includeIn="selected" right="2" verticalCenter="1">
<s:stroke>
<s:SolidColorStroke weight="2" caps="square" color="0x000000" />
</s:stroke>
</s:Path>
<fx:Declarations>
<s:CallResponder id="getEventConferencesResult"/>
<registrationapi:RegistrationAPI id="registrationAPI" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>
</fx:Declarations>
<s:VGroup left="3" right="10" top="3" bottom="3">
<s:CheckBox name="{data.EventCode}" label="{data.EventTitle}" id="selectedEventCode" fontWeight="bold" click="checkbox1_clickHandler(event, selectedEventCode.name)" />
<s:Label text="{data.EventTitle}" id="selectedEventCodeLabel" fontWeight.selected="bold"  />
</s:VGroup>
</s:ItemRenderer>
Thanks in advance for any suggestions!
~ amanda

Answer 1

I simplified the problem to it's essence and came up with this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"
    creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var lProvider:ArrayCollection;
            private function init():void
                var la:Array = [{label: "Conference", checked: true},
                                {label: "Tickets", checked: false}];
                lProvider = new ArrayCollection(la);
        ]]>
    </mx:Script>
    <mx:List id="cList" width="200" dataProvider="{lProvider}" itemClick="lProvider.refresh()">
        <mx:itemRenderer>
            <mx:Component>
                <mx:HBox width="100%">
                    <mx:CheckBox selected="{data.checked}" click="data.checked = event.target.selected"/>
                    <mx:Label text="{data.label}"/>
                </mx:HBox>
            </mx:Component>
        </mx:itemRenderer>
    </mx:List>
    <mx:VBox width="600">
        <mx:Panel title="Conference component" width="100%" height="200"
                visible="{lProvider.getItemAt(0).checked}"
                includeInLayout="{lProvider.getItemAt(0).checked}"/>
        <mx:Panel title="Ticket component" width="100%" height="200"
                visible="{lProvider.getItemAt(1).checked}"
                includeInLayout="{lProvider.getItemAt(1).checked}"/>
    </mx:VBox>
</mx:Application>
Does this help?
Dany