If you want an example of putting tons of JS/CSS (including jquery) into Xwiki's skin extensions, see the following:
http://nielsmayer.com/xwiki/bin/view/Exhibit/Presidents3 http://nielsmayer.com/xwiki/bin/download/Exhibit/Presidents3/Exhibit.Presidents3.xar note objects on Exhibit.Presidents3 (import the xar and view in your own object-editor): XWiki.JavaScriptExtension[0]: JSON data on US presidents that drives Exhibit. XWiki.JavaScriptExtension[1]: Event.observe(window, "load", onLoad) - create UI after all JS loaded XWiki.JavaScriptExtension[2]: inlined jQuery JavaScript Library v1.3.2 XWiki.JavaScriptExtension[3]: javascript that dynamically injects SCRIPT tags into the HEAD, which causes the browser to load the javascript. This is dependent on inlined jquery in XWiki.JavaScriptExtension[2], which must actually have been loaded (as opposed to just injecting the SCRIPT/CSS tags into the head, which causes it to load later). XWiki.StyleSheetExtension[0]: my workaround to the fact that $xwiki.ssfx.use() won't let me specify external libs: "@import url(" http://trunk.simile-widgets.org/styles/common.css";);" XWiki.StyleSheetExtension[1]: Modified Stylesheet from http://trunk.simile-widgets.org/exhibit/examples/presidents/styles.css The contents of XWiki.JavaScriptExtension[3] may be of interest, in terms of technique for injecting SCRIPT and CSS into HEAD from an Xwiki document. It's quite a hack -- see "document.write("<script src= ...);" -- but it works, courtesy of the Simile Project at MIT. IMHO, the technique in and of itself should be made into an Xwiki macro so you can more easily inject arbitrary SCRIPT, CSS, or LINK into the HEAD from within an Xwiki document: /*================================================== * Modification of <script src= * http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.jstype="text/javascript";></script> * for use with http://nielsmayer.com/xwiki/bin/edit/Exhibit/Presidents* ... * by Niels Mayer http://nielsmayer.com *================================================== */ (function() { var useLocalResources = true; // NPM: set to true to use trunk.simile-widgets.org rather than default api.simile-widgets.org var loadMe = function() { if (typeof window.Exhibit != "undefined") { return; } window.Exhibit = { version: useLocalResources ? "trunk pre 2.3.0" : "2.2.0", loaded: false, params: { bundle: true, authenticated: false, autoCreate: false, safe: false, gmapkey: "...", views: "timeline,map" }, namespace: "http://simile.mit.edu/2006/11/exhibit#";, importers: {}, locales: [ "en" ] }; var javascriptFiles = [ "exhibit.js", "persistence.js", "authentication.js", "util/set.js", "util/util.js", "util/settings.js", "util/views.js", "util/facets.js", "util/coders.js", "data/database.js", "data/expression.js", "data/expression-parser.js", "data/functions.js", "data/controls.js", "data/collection.js", "data/importers/authenticated-importer.js", "data/importers/exhibit-json-importer.js", "data/importers/html-table-importer.js", "data/importers/jsonp-importer.js", "data/importers/babel-based-importer.js", "data/importers/rdfa-importer.js", "data/exporters/rdf-xml-exporter.js", "data/exporters/semantic-wikitext-exporter.js", "data/exporters/exhibit-json-exporter.js", "data/exporters/tsv-exporter.js", "data/exporters/bibtex-exporter.js", "data/exporters/facet-selection-exporter.js", "ui/ui.js", "ui/ui-context.js", "ui/lens.js", "ui/format-parser.js", "ui/formatter.js", "ui/coordinator.js", "ui/facets/list-facet.js", "ui/facets/numeric-range-facet.js", "ui/facets/text-search-facet.js", "ui/facets/cloud-facet.js", "ui/facets/hierarchical-facet.js", "ui/facets/image-facet.js", "ui/facets/slider-facet.js", "ui/facets/slider.js", "ui/facets/alpha-range-facet.js", "ui/coders/color-coder.js", "ui/coders/default-color-coder.js", "ui/coders/color-gradient-coder.js", "ui/coders/size-coder.js", "ui/coders/size-gradient-coder.js", "ui/coders/icon-coder.js", "ui/widgets/logo.js", "ui/widgets/collection-summary-widget.js", "ui/widgets/resizable-div-widget.js", "ui/widgets/legend-widget.js", "ui/widgets/legend-gradient-widget.js", "ui/widgets/option-widget.js", "ui/widgets/toolbox-widget.js", "ui/views/view-panel.js", "ui/views/ordered-view-frame.js", "ui/views/tile-view.js", "ui/views/thumbnail-view.js", "ui/views/tabular-view.js", "ui/views/html-view.js" ]; var cssFiles = [ "exhibit.css", "browse-panel.css", "lens.css", "util/facets.css", "util/views.css", "widgets/collection-summary-widget.css", "widgets/resizable-div-widget.css", "widgets/legend-widget.css", "widgets/option-widget.css", "widgets/toolbox-widget.css", "views/view-panel.css", "views/tile-view.css", "views/thumbnail-view.css", "views/tabular-view.css" ]; var includeMap = false; var includeTimeline = false; var defaultClientLocales = ("language" in navigator ? navigator.language : navigator.browserLanguage).split(";"); for (var l = 0; l < defaultClientLocales.length; l++) { var locale = defaultClientLocales[l]; if (locale != "en") { var segments = locale.split("-"); if (segments.length > 1 && segments[0] != "en") { Exhibit.locales.push(segments[0]); } Exhibit.locales.push(locale); } } var paramTypes = { bundle:Boolean, js:Array, css:Array, autoCreate:Boolean, safe:Boolean }; if (typeof Exhibit_urlPrefix == "string") { Exhibit.urlPrefix = Exhibit_urlPrefix; if ("Exhibit_parameters" in window) { SimileAjax.parseURLParameters(Exhibit_parameters, Exhibit.params, paramTypes); } } else { Exhibit.urlPrefix = "http://api.simile-widgets.org/exhibit/2.2.0/";; } if (useLocalResources) { Exhibit.urlPrefix = " http://trunk.simile-widgets.org/exhibit/api/";; } if (Exhibit.params.locale) { // ISO-639 language codes, // optional ISO-3166 country codes (2 characters) if (Exhibit.params.locale != "en") { var segments = Exhibit.params.locale.split("-"); if (segments.length > 1 && segments[0] != "en") { Exhibit.locales.push(segments[0]); } Exhibit.locales.push(Exhibit.params.locale); } } if (Exhibit.params.gmapkey) { includeMap = true; } if (Exhibit.params.views) { var views = Exhibit.params.views.split(","); for (var j = 0; j < views.length; j++) { var view = views[j]; if (view == "timeline") { includeTimeline = true; } else if (view == "map") { includeMap = true; } } } var scriptURLs = Exhibit.params.js || []; var cssURLs = Exhibit.params.css || []; /* * Core scripts and styles */ if (true) { scriptURLs.push(Exhibit.urlPrefix + "exhibit-bundle.js"); cssURLs.push(Exhibit.urlPrefix + "exhibit-bundle.css"); } else { SimileAjax.prefixURLs(scriptURLs, Exhibit.urlPrefix + "scripts/", javascriptFiles); SimileAjax.prefixURLs(cssURLs, Exhibit.urlPrefix + "styles/", cssFiles); } /* * Localization */ for (var i = 0; i < Exhibit.locales.length; i++) { scriptURLs.push(Exhibit.urlPrefix + "locales/" + Exhibit.locales[i] + "/locale.js"); }; if (Exhibit.params.callback) { window.SimileAjax_onLoad = function() { eval(Exhibit.params.callback + "()"); } } else if (Exhibit.params.autoCreate) { scriptURLs.push(Exhibit.urlPrefix + "scripts/create.js"); } /* * Extensions (for backward compatibility) */ if (includeTimeline) { scriptURLs.push(Exhibit.urlPrefix + "extensions/time/time-extension.js"); } if (includeMap) { scriptURLs.push(Exhibit.urlPrefix + "extensions/map/map-extension.js"); } SimileAjax.includeJavascriptFiles(document, "", scriptURLs); SimileAjax.includeCssFiles(document, "", cssURLs); Exhibit.loaded = true; }; /* * Load SimileAjax if it's not already loaded */ if (typeof SimileAjax == "undefined") { window.SimileAjax_onLoad = loadMe; var url = useLocalResources ? " http://trunk.simile-widgets.org/ajax/api/simile-ajax-api.js?bundle=true"; : " http://api.simile-widgets.org/ajax/2.2.1/simile-ajax-api.js?bundle=true";; var createScriptElement = function() { var script = document.createElement("script"); script.type = "text/javascript"; script.language = "JavaScript"; script.src = url; document.getElementsByTagName("head")[0].appendChild(script); }; if (document.body == null) { try { document.write("<script src='" + url + "' type='text/javascript'></script>"); } catch (e) { createScriptElement(); } } else { createScriptElement(); } } else { loadMe(); } })(); --------------------------------------- to insert a LINK: function insertExhibitDataLink(doc, url) { if (doc.body == null) { try { doc.write("<link rel='exhibit/data' href='" + url + "' type='application/json'/>"); return; } catch (e) { // fall through } } // never called if write() above succeeds var link = doc.createElement("link"); link.setAttribute("rel", "exhibit/data"); link.setAttribute("type", "application/json"); link.setAttribute("href", url); doc.getElementsByTagName("head")[0].appendChild(link); } insertExhibitDataLink(window.document, "/xwiki/bin/view/Exhibit/PresidentsSchemaJSON?xpage=plain"); insertExhibitDataLink(window.document, "/xwiki/bin/view/Exhibit/PresidentsJSON?xpage=plain"); Niels http://nielsmayer.com _______________________________________________ devs mailing list devs@xwiki.org http://lists.xwiki.org/mailman/listinfo/devs
