Hey Keith ...

The storage data in this method is akin to XML, however it really isn't actual XML in that you really couldn't easily bind it to XML data aware objects, traverse it with XPath, etc. And to prevent data from appearing on the page to the user, I am strictly using attributes, which can be a little bit limiting in what you can transmit, but with a little bit of ingenuity, usually you can get away with almost anything.

Anyway, on with an example. I'll frame this in reference to your calendar project as I believe that is the solution you are looking at implementing this for.

What I would do is create a <div class="contextual"> ... </div> with the css class definition I listed in my comment post above on Mar 5. Then within that div, place your contextual data. for example, in the XPage I might structure it like this.

<div class="contextual" id="contextual">
  <xp:repeat rows="999" var="repeatVar" indexVar="repeatIndex" value="#{datasource}">
    <calendarentry unid="#{repeatVar.getUniversalId()}">
      <date value="#{repeatVar.dateColumn}" />
      <time value="#{repeatVar.timeColumn}" />
      <duration value="#{repeatVar.durationColumn}" />
      <title value="#{repeatVar.titleColumn}" />
    </calendarentry>
  </xp:repeat>
</div>

That should give you a hidden div with an XML-like structure representing each of your calendar entries. Then create a a client-side javascript library, with the the following code and include it on your XPage.

XSP.addOnLoad(function() {
   // the following lines will retrieve a nodelist (array of nodes) of each of your calendar entries
   var calEntries = dojo.query('calendarentry', dojo.byId('contextual'));

   // iterate through each node entry to process your calendar entry
   for (i=0;i<calEntries.length;i++) {
      // retrieve the UNID attribute of the calendarEntry tag
      var nodeUNID = dojo.attr(calEntries[i], 'UNID');

      // retrieve the Date from the value attribute of the date tag below this calendar entry
      var entryDate = dojo.attr(dojo.query('date', calEntries[i])[0], 'value');

      // retrieve the Time from the value attribute of the time tag below this calendar entry
      var entryTime = dojo.attr(dojo.query('time', calEntries[i])[0], 'value');

      // retrieve the Duration from the value attribute of the duration tag below this calendar entry
      var entryDuration = dojo.attr(dojo.query('duration', calEntries[i])[0], 'value');

      // retrieve the Title from the value attribute of the title tag below this calendar entry
      var entryTitle = dojo.attr(dojo.query('title', calEntries[i])[0], 'value');

      // Do what you need to draw the calendar entries here now that you know
      // entryDate, entryTime, entryDuration, entryTitle, and nodeUNID

   }
})

You'll need to tweak that code to adjust to your data source, insert your code for dojox.gfx, etc, but it should get you all the data you need to do so client side. Let me know if you have anymore questions.

Great post, however I'm just starting to delve into dojo and XML and was wondering if you could provide an example of storing the data as XML and then retrieving that data using dojo.attr()?

If you have to be strict HTML compliant, either through a strict doctype or a validation service, then yes, using your own tags will cause you to fail validation, or can/will trigger quirks mode. If you have to be compliant, you can instead use a hidden span to do the same thing. For example, to contextually store a UNID, you could use:

<span class="contextual unid" title="#{java_script:listData.getUniversalId();}" />


The define a css class "contextual" like this:

.contextual { display: none; }


and to retrieve the data, you would use this client-side:

dojo.attr(dojo.query('span.contextual.unid', this.node)[0], 'title');


This is really cool
is there any drawbacks using non html tags on a webpage? could this be a problem for some browsers like doctypes and html validation services?

thanks
Thomas