First I created an XML file that specifies the technique hierarchy. Inside it I allow references to other subtrees of techniques that are defined elsewhere in the file. Upon parsing of the file the references are replaced with copies of those subtrees. This saves a lot of work. The whole reason that I think this application can be a success is because there is so much overlap among techniques after the first few moves. I also created a DTD (Document Type Definition) for my XML hierarchy syntax. This enforces all kinds of syntactical and semantic checking on my data file when it gets parsed. This saves me from doing much difficult debugging further downstream - as would be the case if I did not have the DTD. This is one of the big advantages of using XML to specify the datafile (but not the only one). Here is a snippet from the XML datafile to give you an idea of what I am talking about:

<?xml version="1.0"?>
<!DOCTYPE hierarchy SYSTEM "hierarchy.dtd">
<hierarchy title="Katate dori technique hierarchy" imgpath="images/katate_dori/" date="10/19/2004" author="Barry Becker">
  <node id="katate_dori" label="katate dori" img="katate_dori">
      <node id="tenkan_grabbed" label="tenkan entrance (grabbed)" img="tenkan_grabbed">
          <node id="sumi_grabbed" label="sumi entrance (grabbed)" img="sumi_grabbed">
              <node id="sumi_otoshi_basic" label="sumi otoshi (basic)" img="sumi_otoshi_basic"/>
              <node id="sumi_otoshi_elbow" label="sumi otoshi (elbow)" img="sumi_otoshi_elbow"/>
              <node id="sumi_otoshi_inside_shoulder" label="sumi otoshi (inside shoulder)" img="sumi_otoshi_inside_shoulder"/>
              <node id="sumi_otoshi_outside_shoulder" label="sumi otoshi (outside shoulder)" img="sumi_otoshi_outside_shoulder"/>
              <node id="sumi_otoshi_head" label="sumi otoshi (head)" img="sumi_otoshi_head"/>
              <node id="sumi_koshinage" label="sumi koshinage (morote seoinage)" img="sumi_koshinage_two_hands_on_arm">
                  <node id="koshinage_right_finish" label="koshinage finish" img="koshinage_right_finish"/>
              </node>
              <node id="omote_uchi_zempo_nage" label="omote uchi zempo nage" img="omote_uchi_zempo_nage">
                  <node id="zempo_nage_left_finish" label="zempo nage" img="zempo_nage_left_finish"/>
              </node>
              <node id="ikkyo_omote_entrance" label="ikkyo omote entrance" img="ikkyo_omote_entrance">
                  <node id="ikkyo_omote" label="ikkyo omote" img="ikkyo_omote">
                      <node id="ikkyo_pin" label="ikkyo pin" img="ikkyo_pin"/>
                  </node>
                  <node id="nikkyo" label="nikkyo" img="nikkyo">
                      <node id="nikkyo_ura_finish" label="nikkyo ura finish" img="nikkyo_ura_finish">
                          <node id="nikkyo_pin" label="nikkyo pin" img="nikkyo_pin"/>
                      </node>
                      <node id="nikkyo_omote_finish" label="nikkyo omote finish" img="nikkyo_omote_finish">
                          <use ref="nikkyo_pin"/>
                      </node>
                  </node>
		  :::
		  :::
</hierarchy>

Next I shot the images at the dojo using my camcorder on a tripod. The camcorder takes low resolution images (1Kx1K), but they were still too big for my purposes, so I resampled them to be much smaller using IRFan (a free image processing tool). One of the mistakes I made was to not batch the contrast and color correction. I did it all manually which was stupid for 2 reasons: 1) it was tedious, 2) all the images look like they have different lighting and colors. I did it this way because of the limitations of IRFan. Maybe on my next attempt I will try photoshop or script GIMP. I also need to redo a few of the images. I think I may need more images than I originally planned. There are too many abrupt camara angle switches in some cases.

I then created a Java program that read in the XML data file (parsed it using javax.xml.parsers). This is another advantage of XML, there are native java parsers and validating logic available (I hardly had to write any code to do this part). Then the program generates an HTML page that contains a ton of generated javascript to specify state information. Javascript builds the dropdowns, handles the images to show, and does the rollovers. Every time you change a dropdown, Javascript dynamically changes the page DOM to show appropriate new form elements and images.

Another advantage of using XML to specify the techniques, that I did not even explore, is that I can use XSLT to transform the technique data into many other forms. For example, I could have an XSLT transform to produce an SVG application based on the same datafile, or perhaps I could convert the technique hierarchy into somehting that could be printed nicely.