Ok, so take maps out of the RadioButtonPanel AS component and make the
startLocation RadioButtonGroup public. Next create a Event in the
component, that will be dispatched when the radio buttons are clicked:
After the import statements add:
[Event(name="changeMap",type="flash.events.Event")]
Then in changeStartType(), replace the if statement with:
var event:Event = new Event( "changeMap" );
dispatchEvent( event );
Now you can listen for the event:
<wallyk:RadioButtonPanel changeMap="handleChangeMap( event )"/>
The event handler would then perform the changes, from outside of the
component:
private function handleChangeMap( event:Event ):void
{
if (event.currentTarget.startLocation.selectedValue == "address"){
start_txt.text = "Enter Starting Address";
}else{
start_txt.text = "Choose Your Airport";
}
}
It makes sense to do it this way because the content of the panel could
change and you might want to re-use your component..
-TH
--- In flexcoders@yahoogroups.com, "Wally Kolcz" <wko...@...> wrote:
>
> How can I do that? maps is the 'page' that this panel is on. I need to
control the elements that are inside the panel:
>
> <wallyk:RadioButtonPanel width="100%" height="20%" title="Start
Address Type:" paddingLeft="5" includeInLayout="true" visible="true" >
> <mx:Label id="start_txt" />
> <mx:Form id="frmAddress" width="100%" height="100%">
> <mx:FormItem label="Street Address:" fontWeight="bold" >
> <mx:TextInput id="address_txt" fontWeight="normal" />
> </mx:FormItem>
> <mx:FormItem label="City:" fontWeight="bold">
> <mx:TextInput id="city_txt" fontWeight="normal" />
> </mx:FormItem>
> <mx:FormItem label="State:" fontWeight="bold">
> <mx:TextInput id="state_txt" fontWeight="normal" maxChars="2" />
> </mx:FormItem>
> <mx:FormItem label="Zip Code:" fontWeight="bold">
> <mx:TextInput id="zip_txt" fontWeight="normal" maxChars="5"/>
> </mx:FormItem>
> <mx:Button label="Get Directions"
click="showDirections(address_txt.text, city_txt.text, state_txt.text,
zip_txt.text);" />
> </mx:Form>
> <mx:Form width="100%" id="frmAirport" height="100%"
includeInLayout="false" visible="false">
> <mx:ComboBox id="addresscbb" labelField="label" fontWeight="normal">
> <mx:ArrayCollection>
> <mx:Object label="Capital Region International Airport" address="4100
Capital City Boulevard" city="Lansing" state="MI" zipcode="48906"/>
> <mx:Object label="Kalamazoo/Battle Creek International Airport"
address="5235 Portage Road" city="Kalamazoo" state="MI"
zipcode="49002"/>
> <mx:Object label="Gerald R. Ford International Airport" address="5500
44th St SE" city="Grand Rapids" state="MI" zipcode="49512"/>
> <mx:Object label="Bishop International Airport" address="3425 W
Bristol Road" city="Flint" state="MI" zipcode="48507"/>
> <mx:Object label="Detroit Metropolitan Wayne County Airport"
address="9000 Middlebelt Road" city="Romulus" state="MI"
zipcode="48174"/>
> <mx:Object label="Capital Region International Airport" address="655
Aviation Drive" city="Mason" state="MI" zipcode="48854"/>
> </mx:ArrayCollection>
> </mx:ComboBox>
> </mx:Form>
> <mx:Button label="Map Route" id="submit_btn" visible="false" />
> </wallyk:RadioButtonPanel>
>
> ----------------------------------------
> From: "Tim Hoff" timh...@...
> Sent: Wednesday, June 24, 2009 8:56 AM
> To: flexcoders@yahoogroups.com
> Subject: [flexcoders] Re: Extending Custom Panel with RadioButtons -
Help
>
> You need to add maps as a child in createChildren().
>
> -TH
>
> --- In flexcoders@yahoogroups.com, "Wally Kolcz" wkolcz@ wrote:
>
> >
>
> >
>
> > Thanks! The labels are now showing perfectly!
>
> >
>
> > However, I am getting an error when I attempt to check the radio
>
> buttons:
>
> > TypeError: Error #1009: Cannot access a property or method of a null
>
> object reference.
>
> > at
>
>
com.wallykolcz.views.components::RadioButtonPanel/changeStartType()[D:\w\
\
>
> kolcz\My
>
>
Documents\Flex3\landingPage\src\com\wallykolcz\views\components\RadioBut\
\
>
> tonPanel.as:34]
>
> >
>
> > Line 34 (in this case since I chose Airport to make this error) is
>
> part of this:
>
> >
>
> > public function changeStartType(e:Event):void {
>
> > if (startLocation.selectedValue == "address"){
>
> > maps.start_txt.text = "Enter Starting Address";
>
> > maps.frmAirport.includeInLayout = false;
>
> > maps.frmAirport.visible = false;
>
> > maps.frmAddress.includeInLayout = true;
>
> > maps.frmAddress.visible = true;
>
> > maps.submit_btn.visible = true;
>
> > }else{
>
> > maps.start_txt.text = "Choose Your Airport";
>
> > maps.frmAddress.includeInLayout = false;
>
> > maps.frmAddress.visible = false;
>
> > maps.frmAirport.includeInLayout = true;
>
> > maps.frmAirport.visible = true;
>
> > maps.submit_btn.visible = true;
>
> > }
>
> >
>
> > }
>
> >
>
> > I did import and create a variable for the 'maps' component in which
>
> this panel is inside.
>
> >
>
> > import edu.umich.body.Maps;
>
> > private var maps:Maps;
>
> >
>
> > Is there something I am missing?
>
> >
>
> > If you need a visual reference you can see the concept site at
> http://www.med.umich.edu/prmc/landing/helipad
>
> >
>
> > ----------------------------------------
>
> >
>
> > From: "Tim Hoff" TimHoff@
>
> > Sent: Wednesday, June 24, 2009 8:04 AM
>
> > To: flexcoders@yahoogroups.com
>
> > Subject: [flexcoders] Re: Extending Custom Panel with RadioButtons -
>
> Help
>
> >
>
> > Hi Wally,
>
> >
>
> > Pretty close, just a few minor tweaks needed:
>
> >
>
> > // add the event parameter
>
> >
>
> > public
>
> >
>
> > function
>
> >
>
> > changeStartType( event:Event ):
>
> >
>
> > void
>
> >
>
> > // change to group
>
> >
>
> > addressRB.group = startLocation ;
>
> > airportRB.group = startLocation ;
>
> >
>
> > protected
>
> >
>
> > override
>
> >
>
> > function
>
> >
>
> > updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):
>
> >
>
> > void
>
> >
>
> > {
>
> >
>
> > super
>
> >
>
> > .updateDisplayList(unscaledWidth, unscaledHeight);
>
> >
>
> > // gap between label and edges of button
>
> >
>
> > var
>
> >
>
> > margin:int = 4;
>
> >
>
> > // set the sizes
>
> > addressRB.setActualSize(addressRB.getExplicitOrMeasuredWidth(),
>
> addressRB.getExplicitOrMeasuredHeight());
>
> > airportRB.setActualSize(airportRB.getExplicitOrMeasuredWidth(),
>
> airportRB.getExplicitOrMeasuredHeight());
>
> >
>
> > // position the buttons in the panel
>
> >
>
> > addressRB.move(145,5 );
>
> > airportRB.move(255,5 );
>
> > }
>
> >
>
> > -TH
>
> >
>
> > --- In flexcoders@yahoogroups.com, "Wally Kolcz" wkolcz@ wrote:
>
> > >
>
> > >
>
> > >
>
> > > Using an example from the web I am trying to create a custom Panel
>
> component that had radio buttons in the panel header for a specific
>
> piece of a web site. The panel works and I am getting 2 radio buttons
>
> but no labels for either button and the radioGroup's
>
> > > changeStartType() is not being called
>
> > > . What am I doing wrong? Here is the AS:
>
> > >
>
> > > package com.wallykolcz.views.components
>
> > > {
>
> > >
>
> > > import edu.umich.body.Maps;
>
> > > import flash.events.Event;
>
> > > import mx.containers.Panel;
>
> > > import mx.controls.Button;
>
> > > import mx.controls.RadioButton;
>
> > > import mx.controls.RadioButtonGroup;
>
> > >
>
> > > public class RadioButtonPanel extends Panel
>
> > > {
>
> > >
>
> > > //Create Radio Button Group and Buttons
>
> > > private var startLocation:RadioButtonGroup = new
RadioButtonGroup();
>
> > > private var addressRB:RadioButton = new RadioButton();
>
> > > private var airportRB:RadioButton = new RadioButton();
>
> > > private var maps:Maps;
>
> > >
>
> > > //constructor
>
> > > public function RadioButtonPanel()
>
> > > {
>
> > > super();
>
> > > }
>
> > >
>
> > > public function changeStartType():void {
>
> > > if (startLocation.selectedValue == "address"){
>
> > > maps.start_txt.text = "Enter Starting Address";
>
> > > maps.frmAirport.includeInLayout = false;
>
> > > maps.frmAirport.visible = false;
>
> > > maps.frmAddress.includeInLayout = true;
>
> > > maps.frmAddress.visible = true;
>
> > > maps.submit_btn.visible = true;
>
> > > }else{
>
> > > maps.start_txt.text = "Choose Your Airport";
>
> > > maps.frmAddress.includeInLayout = false;
>
> > > maps.frmAddress.visible = false;
>
> > > maps.frmAirport.includeInLayout = true;
>
> > > maps.frmAirport.visible = true;
>
> > > maps.submit_btn.visible = true;
>
> > > }
>
> > > }
>
> > >
>
> > > protected override function createChildren():void{
>
> > > super.createChildren();
>
> > > //instantiate new radiobuttons and assign properties
>
> > > addressRB.value="address";
>
> > > addressRB.label="My Address";
>
> > > addressRB.groupName = "startLocation";
>
> > >
>
> > > airportRB.value="airport";
>
> > > airportRB.label="Airport";
>
> > > airportRB.groupName="startLocation"
>
> > >
>
> > > //add event listener for change event and call method
>
> > > startLocation.addEventListener(Event.CHANGE, changeStartType);
>
> > >
>
> > > //add the buttons to rawChildren
>
> > > rawChildren.addChild(addressRB);
>
> > > rawChildren.addChild(airportRB);
>
> > > }
>
> > >
>
> > > protected override function
updateDisplayList(unscaledWidth:Number,
>
> unscaledHeight:Number):void{
>
> > > super.updateDisplayList(unscaledWidth, unscaledHeight);
>
> > > //gap between label and edges of button
>
> > > var margin:int = 4;
>
> > >
>
> > > //position the buttons in the panel
>
> > > addressRB.move(145, 15);
>
> > > airportRB.move(255,15)
>
> > > }
>
> > >
>
> >
>
