[flexcoders] Crazy Bindables

[Heiko Niemann]

Hi,

following code works ok. There are two button menus: One sets the
level, the other the language. The eabled-properties of these buttons
are bound to two vars. Those vars are set whenever a button is clicked.

The labels of the level-buttons are also set depending on which
language is chosen. 

Then there are three text areas which are visible when a certain level
is chosen. Also their text is set depending on the level and the
language chosen, e.g.:

htmlText="{words.loc.(@v==lang).item.(@m=='1')}" 

Now. Of course I thought: why not just using one text area and say:

htmlText="{words.loc.(@v==lang).item.(@m==level)}" 

But this for some reason does not work, when 'level' is set. The text
just changes whenever 'lang' is set.

Any ideas?


-- CODE ----

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute">

  <mx:Script>
   <![CDATA[

    [Bindable]
    public var lang:String = 'en';

    [Bindable]
    public var level:String = '1';

  ]]>
  </mx:Script>

  <mx:XML id="buttons" format="e4x" xmlns="">
    <root>
      <loc v="en">
        <item m='1'>NEW</item>
        <item m='2'>INTERMEDIATE</item>
        <item m='3'>PROFESSIONAL</item>
      </loc>
      <loc v="de">
        <item m='1'>NEU</item>
        <item m='2'>FORTGESCHRITTEN</item>
        <item m='3'>PROFI</item>
      </loc>
    </root>
  </mx:XML>

  <mx:XML id="words" format="e4x" xmlns="">
    <root>
      <loc v="en">
        <item m='1'><![CDATA[English 1<br>beginner]]></item>
        <item m='2'><![CDATA[English 2<br>some experience]]></item>
        <item m='3'><![CDATA[English 3<br>call me guru]]></item>
      </loc>
      <loc v="de">
        <item m='1'><![CDATA[German 1<br>anfänger]]></item>
        <item m='2'><![CDATA[German 2<br>etwas erfahrung]]></item>
        <item m='3'><![CDATA[German 3<br>ich weiss alles]]></item>
      </loc>
    </root>
  </mx:XML>

  <mx:HBox x="250" y="310">
    <mx:Button 
      width="100" 
      label="English" 
      enabled="{lang!='en'}"
      click="{lang='en'}" />
     
    <mx:Button 
      width="100" 
      label="German" 
      enabled="{lang!='de'}"
      click="{lang='de'}" />

  </mx:HBox>

  <mx:VBox x="50" y="130">

    <mx:Button 
      width="150"
      enabled="{level!='1'}" 
      label="{buttons.loc.(@v==lang).item.(@m=='1')}" 
      click="{level='1'}" />
    
    <mx:Button 
      width="150"
      enabled="{level!='2'}"  
      label="{buttons.loc.(@v==lang).item.(@m=='2')}" 
      click="{level='2'}" />

    <mx:Button 
      width="150" 
      enabled="{level!='3'}" 
      label="{buttons.loc.(@v==lang).item.(@m=='3')}" 
      click="{level='3'}" />

  </mx:VBox>

  <mx:TextArea 
    x="220" 
    y="100" 
    width="300"
    height="200"
    fontSize="20"
    htmlText="{words.loc.(@v==lang).item.(@m=='1')}" 
    visible="{level=='1'}" />

  <mx:TextArea 
    x="220" 
    y="100" 
    width="300"
    height="200"
    fontSize="20"
    htmlText="{words.loc.(@v==lang).item.(@m=='2')}" 
    visible="{level=='2'}" />

  <mx:TextArea 
    x="220" 
    y="100"  
    width="300"
    height="200"
    fontSize="20"
    htmlText="{words.loc.(@v==lang).item.(@m=='3')}" 
    visible="{level=='3'}" />

</mx:Application>


-- CODE -----


Thanks,

Heiko