Xwiki+Simile Exhibit integration // request for help w/ portability issue

[Niels Mayer]

Although I was previously able to do a hack integration with Simile's Exhibit and Xwiki, it was too heinous to actually live with. A cleaner solution, using Xwiki's "skin extensions" for stylesheets and javascript now works. The "clean" solution required hosting my own copy of Exhibit based on checking out from the trunk the latest copy of "Exhibit." Hosting my own copy of Exhibit seems to be problematic, as the version of Exhibit I checked out from svn/trunk has issues such as (1) a non-working minified jquery that needed to be replaced w/ original, and (2) portability issue on IE (see below) on which I need help/advice.

Here's my example of Xwiki/Exhibit integration:
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents
Here's the original example from which above was derived:
http://simile-widgets.org/exhibit/examples/presidents/presidents.html

Xwiki Source Code: Presidents
Data used by example: PresidentsSchemaJSON , PresidentsJSON

Attached, because there's no easy way to view these, the contents of XWiki.StyleSheetExtension[0] and XWiki.JavaScriptExtension[0] -- these are objects attached to the underlying Xwiki document http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents which cause the appropriate magic to happen in the header via calls to $xwiki.ssx.use("$doc.fullName") and $xwiki.jsx.use("$doc.fullName").

It's all explained in the preamble for  http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents?viewer=code :

## Note that to get this whole thing working requires jquery NOT FROM EXHIBIT SVN TRUNK
##( http://nielsmayer.com/js/exhibit/api/scripts/jquery-1.3.2.min.js )
## Instead, preload http://nielsmayer.com/xwiki/resources/js/exhibit/api/scripts/jquery-1.3.2.min.js
## for details see  http://nielsmayer.com/xwiki/resources/js/exhibit/api/scripts/jquery-1.3.2.min.js.README
$xwiki.jsfx.use("js/exhibit/api/scripts/jquery-1.3.2.min.js")##
## Note that http://nielsmayer.com/xwiki/resources/js/exhibit/api/exhibit-api.js different
## to trunk  http://nielsmayer.com/js/exhibit/api/exhibit-api.js
$xwiki.jsfx.use("js/exhibit/api/exhibit-api.js")##
## though http://nielsmayer.com/xwiki/resources/js/Simile/Exhibit/webapp/styles.css works the line below does not:
##$xwiki.ssfx.use("js/simile/Exhibit/webapp/styles.css")##same loaded from XWiki.StyleSheetExtension[0] via ssx.use.
$xwiki.ssx.use("$doc.fullName")##
$xwiki.jsx.use("$doc.fullName")##

------------

ISSUE AND REQUEST FOR HELP:

In IE, after the simile busy-spinner has popped up indicating a successful load of Exhibit, the following errors happen, causing three successive dialog boxes:

(1) "Caught exception: ColorCoder: Error processing configuration of coder
Details: 'firstChild.nodeValue' is null or not an object

(2) Caught exception: undefined
Details: 'firstChild.nodeValue' is null or not an object

(3) IE error: Line 1831, char 52, Error: object expected

Suggestions on which version of "Exhibit" or "Simile-Ajax-API" to use in order to get rid of this error would be appreciated. It is interesting to note that the "trunk" version of the same example http://trunk.simile-widgets.org/exhibit/examples/presidents/presidents.html works fine in IE.

Is this the same issue noted previously: http://www.mail-archive.com/simile-...@googlegroups.com/msg00385.html http://www.mail-archive.com/simile-...@googlegroups.com/msg00391.html http://www.mail-archive.com/simile-...@googlegroups.com/msg00846.html ???
----------

TODO:

One last remaining hack is that I put the following in the headers

<link rel="exhibit/data" type="application/json" href="$xwiki.getURL("Exhibit.PresidentsSchemaJSON","view","xpage=plain")" />
<link rel="exhibit/data" type="application/json" href="$xwiki.getURL("Exhibit.PresidentsJSON","view","xpage=plain")" />

via the "Exhibit" space's "HTTP Meta Information" administration setting ( http://nielsmayer.com/xwiki/bin/admin/Exhibit/WebPreferences?editor=spaceadmin&section=Presentation&space=Exhibit ). I would like to figure out a way to set these values directly in javascript inside the document itself (or inside additional instances of XWiki.JavaScriptExtension) rather than having them read as external json files, e.g. http://www.mail-archive.com/gen...@simile.mit.edu/msg02434.html
http://www.nabble.com/JSON-created-locally-td17507332.html http://www.patrickgmj.net/node/161

-- Niels.
http://nielsmayer.com

[Niels Mayer]

On Wed, May 6, 2009 at 11:25 AM, Niels Mayer <niels...@gmail.com> wrote:

Here's my example of Xwiki/Exhibit integration:
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents

I now have an improved version
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents2

The main advantage of this version is that it should function "standalone" without installing the Simile widgets locally. Unlike "Presidents" which uses a local, modified copy of the Exhibit trunk, "Presidents2" loads from api.simile-widgets.org .

Attached, the 35K Xar (Zip/Jar format) containing the standalone demo, comprising three documents: Exhibit.Presidents2 and data-files Exhibit.PresidentsSchemaJSON and Exhibit.PresidentsJSON. You should be able to import these into your xwiki installation and get a working demo of Exhibit. (note that since the javascript in Exhibit.Presidents2's object XWiki.JavaScriptExtension[2] loads external javascript, the server and the clients accessing must be connected to the network for this to work).

Resolved, one issue:

One last remaining hack is that I put the following in the headers

<link rel="exhibit/data" type="application/json" href="$xwiki.getURL("Exhibit.PresidentsSchemaJSON","view","xpage=plain")" />
<link rel="exhibit/data" type="application/json" href="$xwiki.getURL("Exhibit.PresidentsJSON","view","xpage=plain")" />

via the "Exhibit" space's "HTTP Meta Information" administration setting ...

This is replaced with some JavaScript residing in  XWiki.JavaScriptExtension[0]:

insertExhibitDataLink(window.document, "/xwiki/bin/view/Exhibit/PresidentsSchemaJSON?xpage=plain");
insertExhibitDataLink(window.document, "/xwiki/bin/view/Exhibit/PresidentsJSON?xpage=plain");

(Next version, Presidents3, will replace loading these two extra javascript files and instead put the javascript data directly into XWiki.JavaScriptExtension[0], replacing insertExhibitDataLink() calls.)

Unresolved, the IE portability issue, an Exhibit bug? Help??

In IE, after the simile busy-spinner has popped up indicating a successful load of Exhibit, the following errors happen, causing three successive dialog boxes:
(1) "Caught exception: ColorCoder: Error processing configuration of coder
Details: 'firstChild.nodeValue' is null or not an object
(2) Caught exception: undefined
Details: 'firstChild.nodeValue' is null or not an object
(3) IE error: Line 1831, char 52, Error: object expected

Note that this issue is independent of "trunk" versus "stable" versions of Exhibit.
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents uses a local copy of "trunk"
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents2 uses api.simile-widgets.org
Both have the same problem with a null dereference from "node.firstChild.nodeValue.trim()", which occurs in api/scripts/ui/coders/color-coder.js function Exhibit.ColorCoder.createFromDOM() :

    try {
        var node = configElmt.firstChild;
        while (node != null) {
            if (node.nodeType == 1) {
                coder._addEntry(
                    Exhibit.getAttribute(node, "case"),
                    node.firstChild.nodeValue.trim(),
                    Exhibit.getAttribute(node, "color"));
            }
            node = node.nextSibling;
        }
    } catch (e) {
        SimileAjax.Debug.exception(e, "ColorCoder: Error processing configuration of coder");
    }

Niels
http://nielsmayer.com

[David Huynh]

Niels Mayer wrote:
> On Wed, May 6, 2009 at 11:25 AM, Niels Mayer <niels...@gmail.com

> <mailto:niels...@gmail.com>> wrote
> <http://n2.nabble.com/Xwiki%2BSimile-Exhibit-integration----request-for-help-w--portability-issue-td2823091.html>:

>
> Here's my example of Xwiki/Exhibit integration:
> http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents
>
>
> I now have an improved version
> http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents2
>
> The main advantage of this version is that it should function
> "standalone" without installing the Simile widgets locally. Unlike
> "Presidents" which uses a local, modified copy of the Exhibit trunk,
> "Presidents2" loads from api.simile-widgets.org

> <http://api.simile-widgets.org> .
>
> *Attached, *the 35K Xar (Zip/Jar format) containing the standalone

> demo, comprising three documents: Exhibit.Presidents2 and data-files
> Exhibit.PresidentsSchemaJSON and Exhibit.PresidentsJSON. You should be
> able to import these into your xwiki installation and get a working
> demo of Exhibit. (note that since the javascript in
> Exhibit.Presidents2's object XWiki.JavaScriptExtension[2] loads
> external javascript, the server and the clients accessing must be
> connected to the network for this to work).
>

> *Resolved*, one issue:

>
> One last remaining hack is that I put the following in the headers
>
> <link rel="exhibit/data" type="application/json"
> href="$xwiki.getURL("Exhibit.PresidentsSchemaJSON","view","xpage=plain")"
> />
> <link rel="exhibit/data" type="application/json"
> href="$xwiki.getURL("Exhibit.PresidentsJSON","view","xpage=plain")"
> />
>
> via the "Exhibit" space's "HTTP Meta Information" administration
> setting ...
>
>
> This is replaced with some JavaScript residing in
> XWiki.JavaScriptExtension[0]:
>
> insertExhibitDataLink(window.document,
> "/xwiki/bin/view/Exhibit/PresidentsSchemaJSON?xpage=plain");
> insertExhibitDataLink(window.document,
> "/xwiki/bin/view/Exhibit/PresidentsJSON?xpage=plain");
>
> (Next version, Presidents3, will replace loading these two extra
> javascript files and instead put the javascript data directly into
> XWiki.JavaScriptExtension[0], replacing insertExhibitDataLink() calls.)
>

> *Unresolved*, the IE portability issue, an Exhibit bug? Help??

>
> In IE, after the simile busy-spinner has popped up indicating a
> successful load of Exhibit, the following errors happen, causing
> three successive dialog boxes:
> (1) "Caught exception: ColorCoder: Error processing configuration
> of coder
> Details: 'firstChild.nodeValue' is null or not an object
> (2) Caught exception: undefined
> Details: 'firstChild.nodeValue' is null or not an object
> (3) IE error: Line 1831, char 52, Error: object expected
>
>
> Note that this issue is independent of "trunk" versus "stable"
> versions of Exhibit.
> http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents uses a local
> copy of "trunk"
> http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents2 uses

> api.simile-widgets.org <http://api.simile-widgets.org>

> Both have the same problem with a null dereference from
> "node.firstChild.nodeValue.trim()", which occurs in
> api/scripts/ui/coders/color-coder.js function
> Exhibit.ColorCoder.createFromDOM() :
>
> try {
> var node = configElmt.firstChild;
> while (node != null) {
> if (node.nodeType == 1) {
> coder._addEntry(
> Exhibit.getAttribute(node, "case"),
> node.firstChild.nodeValue.trim(),
> Exhibit.getAttribute(node, "color"));
> }
> node = node.nextSibling;
> }
> } catch (e) {
> SimileAjax.Debug.exception(e, "ColorCoder: Error
> processing configuration of coder");
> }
>
>

Niels,

Looking at the HTML source, I see

<div ex:role="coder" ex:coderClass="Color"
id="party-colors">
<span ex:color="red">Republican</span>
<span ex:color="blue">Democratic</span><p/>
<span ex:case="others" ex:color="#aaa">Other
parties</span>
<span ex:case="mixed" ex:color="#eee">Many
parties</span>

<span ex:case="missing" ex:color="#444">No party</span>
</div>

I think the <p/> is causing problem. Could you remove it and see if that
helps?

David

[Niels Mayer]

On Sat, May 9, 2009 at 10:04 AM, David Huynh <dfh...@alum.mit.edu> wrote:

Looking at the HTML source, I see
               <div ex:role="coder" ex:coderClass="Color" id="party-colors">
                   <span ex:color="red">Republican</span>
                   <span ex:color="blue">Democratic</span><p/>
                   <span ex:case="others"  ex:color="#aaa">Other parties</span>
                   <span ex:case="mixed"   ex:color="#eee">Many parties</span>
                   <span ex:case="missing" ex:color="#444">No party</span>
               </div>
I think the <p/> is causing problem. Could you remove it and see if that helps?

That was exactly the problem! Thank you so much, as that's one I would have never spotted myself!

FYI, here's what happened: Since I just cut/paste the HTML from view-source on the presidents example on simile-widgets.org, the newlines got interpreted as paragraphs by the wiki-engine in Xwiki. So, I removed the extra newline in Exhibit.Presidents2, and it now works in IE! This is a "gotcha" I frequently hit in Xwiki, although I find the ability to mashup HTML and wikitext in an active document quite useful.

Now both the "standalone"
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents2
and locally-hosted-exhibit
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents
work in IE! Thanks again and also thanks for Exhibit which is just all around great!

The updated XAR (zip format) of "Presidents2" example is here: http://nielsmayer.com/xwiki/bin/download/Exhibit/Presidents2/Exhibit.PresidentsPkg.xar
  Length     Date   Time    Name
 --------    ----   ----    ----
    94080  05-09-09 10:30   Exhibit/Presidents2.xml
     2226  05-09-09 10:30   Exhibit/PresidentsSchemaJSON.xml
    29379  05-09-09 10:30   Exhibit/PresidentsJSON.xml
      544  05-09-09 10:30   package.xml
 --------                   -------
   126229                   4 files

Niels
http://nielsmayer.com

PS: After sending the announcement yesterday, I realized there was one issue that makes this example not quite standalone. Exhibit.PresidentsPkg.xar contains a hard-coded google-maps key that you receive when registering your site. You'll need to change "gmapkey" setting in object XWiki.JavaScriptExtension[2] on document "Exhibit.Presidents2":

 params:     { bundle: true, authenticated: false, autoCreate: false, safe: false, gmapkey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX", views: "timeline,map" }

Until this is changed, you'll get a dialog box from google saying you need to register. When you click away the dialog box, it should load the interface even if not correctly registered.

PPS: What does this Exhibit parameter setting do, and what is the correct value:
            namespace:  "http://simile.mit.edu/2006/11/exhibit#",
(also in object XWiki.JavaScriptExtension[2] on document "Exhibit.Presidents2)

[Niels Mayer]

FYI, a third version of the same example -- http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents3 --  this time, the JSON data resides directly in the document "Presidents3" object XWiki.JavaScriptExtension[0] and the code to load it into the exhibit database is in object XWiki.JavaScriptExtension[1] ... Unlike the previous example, there's no separate documents containing the exhibit data Exhibit.PresidentsSchemaJSON and Exhibit.PresidentsJSON that get loaded by Exhibit from the browser. All data and custom javascript reside in the standalone document which means it loads more quickly, with less updating in the browser, and less server hits.

(compare performance to http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents2 )

The source code is in the "standalone" example XAR (zip) file is at
http://nielsmayer.com/xwiki/bin/download/Exhibit/Presidents3/Exhibit.Presidents3.xar

In order to get rid of the google-maps warning popup, you will need to get your own google maps key and replace the gmapkey set in object XWiki.JavaScriptExtension[2]:

 params:     { bundle: true, authenticated: false, autoCreate: false, safe: false, gmapkey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXX"> , views: "timeline,map" }

Now that I've figured out how to get a standard example working correctly in Exhibit&Xwiki, it's time to take the techniques I developed for "Presidents3" and  apply it to my own applications.

Niels
http://nielsmayer.com