title: Flex Component using global variable
body: <p>I am using Flash Builder 4 Burrito Preview - builing a Mobile Application.  I have a custom component called footer.mxml.  That footer has 4 buttons, and one of them has a lable that is bound to cartValue.  I am trying to maintain a global variable called cartValue within all views and footer component.</p>
  
  <p><strong>footer.mxml</strong></p>
  
  <pre><code>&lt;s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx"
     width="100%" height="64" chromeColor="#000000" fontSize="10"&gt;
  &lt;fx:Declarations&gt;
    &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
    &lt;mx:CurrencyFormatter id="currencyFormatter"
       currencySymbol="$"
       useThousandsSeparator="true"
       precision="2" /&gt;
   &lt;/fx:Declarations&gt;
  
  
  
  &lt;fx:Script&gt;
    &lt;![CDATA[
     [Bindable]
     public var cartValue:int;
  
    ]]&gt;
  &lt;/fx:Script&gt;
  
   &lt;s:HGroup width="100%" contentBackgroundColor="#000000" paddingBottom="0" paddingLeft="0"
   paddingRight="0" paddingTop="0"&gt;
   &lt;s:Button x="0" y="624.5" width="25%" height="64" label="Account" chromeColor="#2259AA"
   enabled="true" fontSize="10" fontWeight="bold" icon="@Embed('assets/user.png')"/&gt;
   &lt;s:Button x="121" y="624.5" width="25%" height="64" label="Orders" chromeColor="#2259AA"
   fontSize="10" icon="@Embed('assets/doc_lines_stright.png')"/&gt;
   &lt;s:Button x="241" y="624.5" width="25%" height="64" label="Help" chromeColor="#2259AA" 
   fontSize="10" icon="@Embed('assets/spechbubble.png')"/&gt;
   &lt;s:Button x="360" y="624.5" width="25%" height="64" label="{currencyFormatter.format(cartValue)}" chromeColor="#2259AA" 
   fontSize="10" icon="@Embed('assets/shop_cart.png')"/&gt;
  
   &lt;/s:HGroup&gt;
      &lt;/s:Group&gt;
  </code></pre>
  
  <p><strong>RincoTest.mxml</strong></p>
  
  <pre><code> &lt;s:MobileApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    backgroundColor="#000000" firstView="views.RincoTestHome"
    &gt;
   &lt;fx:Style source="RincoTest.css"/&gt;
  &lt;fx:Declarations&gt;
   &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt;
   &lt;/fx:Declarations&gt;
   &lt;fx:Script&gt;
    &lt;![CDATA[
  
     [Bindable] 
     public var cartValue:int;
    ]]&gt;
   &lt;/fx:Script&gt;
  
  
   &lt;s:titleContent&gt;
    &lt;s:Image left="1" top="3" width="173" height="75" backgroundAlpha="1.0" smooth="true"
   source="assets/iphone_large.png"/&gt;
   &lt;/s:titleContent&gt;
   &lt;s:navigationContent&gt;
    &lt;mx:Spacer width="10" height="82"/&gt;
   &lt;/s:navigationContent&gt;
  
  
      &lt;/s:MobileApplication&gt;
  </code></pre>
  
  <p><strong>And this is how I am implementing it</strong></p>
  
  <pre><code>&lt;components:footer x="1.65" y="614.95" width="100%" height="64" cartValue="{cartValue}"/&gt;
  </code></pre>
  
  <p>I have tried to bind Application.application.cartValue and
  MobileApplication.application.cartValue.  Neither of them work.</p>
  
  <p>If there is a better way to maintain a cartValue across the entire application please let me know.  This is my first attempt with Flex.</p>
  
  <p>Thanks,
  Ernie</p>