Passing variables between mxml components

[10basetom]

Hi guys,

I'm just getting started in Flex, using the Dashboard sample app as my training ground:

http://www.adobe.com/devnet/flex/samples/dashboard/

For anyone not familiar with this sample app, here's the basic layout:


dashboard.mxml - main application that calls AllRegions.mxml, RegionDetail.mxml, and RegionBreakdown.mxml
RevenueTimeline.mxml - provides chart class
AllRegions.mxml - subclass of RevenueTimeline that instantiates chart
RegionDetail.mxml - subclass of RevenueTimeline that instantiates chart
RegionBreakdown.mxml - pie chart panel


My goal is very simple: I've declared a variable in dashboard.mxml that contains the string "Revenue":


public var timeline:String = "Revenue";


All I'm trying to do is access this 'timeline' variable from within the RevenueTimeline, AllRegions, RegionDetail, and RegionBreakdown components. Right now "Revenue" is hard-coded everywhere (e.g., tool tips, column header in grid view), so was trying to do something like this instead:


private function formatDataTip(hitData:HitData):String
{
var name:String = hitData.item.name;
var revenue:Number = hitData.item.revenue;
return "<b>Month: " + name + "</b><br>' + timeline + ': " + cf.format(revenue);
}


What's holding me back is that I can't seem to find a way to pass the variable that I declared in dashboard.mxml to all of the other four components (RevenueTimeline, AllRegions, RegionDetail, RegionBreakdown). I'm at the end of my rope here, so I was hoping someone can offer a quick solution or lead me in the right direction. I've read about view states, but it seems a little over the top for me; I'm not changing layouts depending on states or anything.

After finding out how to change the tool tips to use the 'timeline' variable, my next goal is to also leverage this variable for the column headers in the grid view. For example, I would like to use my variable instead of hard-coding "Total Revenue" in the code below:


<mx:DataGridColumn dataField="name" headerText="Month" sortCompareFunction="sortByDates" />
<mx:DataGridColumn dataField="revenue" headerText="Total Revenue" labelFunction="dataGridCurrencyFormat" />
<mx:DataGridColumn dataField="average" headerText="Average Across Categories" labelFunction="dataGridCurrencyFormat" />


Does anyone have any suggestions on how to do this as well?

TIA!
Tom

[CDHBookingEdge]

Hi Tom,
here's the simplest answer to your direct question. Make an AS (An ActionScript file) that contains the hard-coded strings and any numeric constants you'd like to use an import it where you want to use it.

So then the concept is that you've got a file called myStrings.as and in it you've got some thing like this:

package
{
class myStrings()
{
public const _revenue:String = "Revenue";
public const _totRev:String = "Total Revenue";
}
}


Then in your MXML file you can say something like:

// this is in the middle of a function/method or such.
thisString = myStrings._totRev;


or



<mx:DataGridColumn dataField="revenue" headerText={myStrings._totRev} labelFunction="dataGridCurrencyFormat" />



This is a "restriction" the language places on you to help keep down on easily accessible globals. I know you might not agree, and there are times that a true global is darn nice to have, but the general idea is that globals are bad in the "OOP world" so the languages try and dissuade you from doing that. You could also pass in the value in a function or once you have the instance of the object you could set one of it's variables to a value, things such as that.

Essentially dashboard.mxml is the Application object, it's the parent and things in the parent are not accessible by the child, unless you either pass them in or pass in a "reference" to the parent. But that's not considered advisable in a lot of situations.

I hope that helped. The long and short of it is that I'd recommend some type of utility class or classes and use that for your constant data and such.

Christopher

[10basetom]

Hi Christopher,

Thanks so much for your assist! I took your suggestion and ran with it. I also studied some more sample code and discovered that if you static type then you don't even need to import the package in. For example, I created my strings in MyStrings.as that looks like this:


package
{
public class MyStrings
{
static public var rev:String = "Revenue";
}
}


Now, from any component in my application I can write to and read from this static variable without having to add an import statement, e.g.:


MyStrings.rev = "Revenue 2";


Tom

[CDHBookingEdge]

yep LOL just a small quirk of mine that I do I guess. That way I know that I'm calling and using the right mystings.as stuff. ;-)

Glad it helped you out!

[TJCoder]

Hi Tom

i've tried to implement the method that you used to have a global variable, but isn't working i did the following:

First, created the ActionScript File variables.as with this code in it
package
{

public class myVariable
{
static public var working:String="It Works!";
}
}

So, when i use the following code in one of my functions:
myVariable.working="Yes it is";
it shows me that "myVariable" is visible to my application because when i type "myVariable." inmediately shows "working" as an option but when i try to build up the application it shows me an error: access of an undefined property myVariable.

I don't know what i am doing wrong or i don't know if i missed something, so that's my problem.

I really apreciate if you could help me out.

Regards
Raul

[10basetom]

Hi Raul,

I've moved on to other non-Flash projects since Jan 07, but looking back at my code I noticed that the package filename has to have the same name as the class name. In your case, make sure your package is put in a file called myVariable.as.

Tom

[mac345]

I also have the same problem as Raul,
Can you please tell me the solution for that...what to do

Thanks