Question

I am faced with a small project now,in which I have to present a peoridic table to the user.However,it is bit more complicated than just a pure peoridic table image file.Let me break it down a bit:

1.In the same folder,there is an xml file,which have the following format:

<constraints>
<element>
 <name>Calcium</name>
 <abbreviation>Ca</abbreviation>
 <emissions>
  <wavelength>118</wavelength>
 </emissions>
 <standards>
  <concentration>0.01</concentration>
  <concentration>0.1</concentration>
 </standards>
</element>

it basically just specifies what elements should be highlighted in the peoridic table.So after reading from this xml file,our peoridic table should be reflected by making these elements yellow and clickable while leaving others grey and not-clickable.But only the name attribute is what I needed.

2.Secondly,it just needs to make sure that the elements on the periodic table elements that have been specified by the xml file should be enabled for clicking by the user.

Since I am bit new to Flex programming,now two things concern me most.The first is how to do the xml parsing in FLEX?I did this parsing in C#,but have no idea how to do this.
Secondly,how should I depict the periodic table?I should make elements clickable.
Thirdly,how should I make the periodic table be aware of the elements that have been parsed out from the xml file,i.e,where should I store these extracted elements?

Sounds bit tough,I just need some ideas or maybe some code to help me start,thanks!

Answer 1

XML parsing is pretty easy in actionscript 3 with E4X and somewhat similar to C#.

e.g.

var table:XML = <constraints>
<element>
 <name>Calcium</name>
 <abbreviation>Ca</abbreviation>
 <emissions>
  <wavelength>118</wavelength>
 </emissions>
 <standards>
  <concentration>0.01</concentration>
  <concentration>0.1</concentration>
 </standards>
</element>
</constraints>
trace(table.element.name);

Do checkout the E4X tutorial on the Yahoo Developer Network to get started easily. The rest should be easy enough.

For point 2 you should just loop through the element names and then enable their view/visual asset equivalent.

e.g.

for each (var element:XML in table.element.*) trace(element.name);//enable here instead of tracing

Update

I had a bit of fun with the great libspark SvgParser and the wikipedia periodic table svg.
This is NOT how anyone should write code, this is just a quick and dirty test.

You can view the test here and the source here.

here’s a preview:

Also displaying the C# version of parsing would help.
And I found another great E4X article.

HTH,
George