This is an old revision of the document!
In Internet Explorer, users will need to click on “Allow blocked content” to see the report.
See How To Allow Blocked Content on Internet Explorer
Follow the steps listed if you are tired of having to “Enable Blocked Content” in IE each time you want to view your reports. This way, you won't get annoyed by the message: “To help protect your security, Internet Explorer has restricted this file from showing active content that could access your computer”.
See: http://docs.dojocampus.org/build/index
http://docs.dojocampus.org/build/profiles
Lots and lots of separate files = lots of time requesting and getting. Van use build process to make single monster file that gets called once. Also very handy if the file is on the local machine or you want the output to be portable and self-contained.
Dojo does not include a single file containing every possible dojo function, since this would be very large (especially with optional modules from Dijit and Dojox); instead, the build system allows the creation of customized Dojo builds tailored to the needs of your particular web site.
You do this from the SDK files: “If you wish to utilize the Build System to create custom optimized versions of Dojo and your own JavaScript, obtain the Dojo SDK release. ”
You want to make a layer:
A layer is a single, minified JavaScript file which combines all of the JavaScript code from multiple source files, including dependencies. This file can then be included … using standard HTML script tags.
May make sense to make a single layer, but could split them if needed. For SOFA, perhaps keep it simple and incliude all charting in one Javascript file which handles all charting.
Replace all the require statements with one call to a single layer.js file. Once this can be shown to work, the build process can create a minified version from it.
The source version of a layer file might only list dependencies e.g. sofalayer.js
dojo.require("dojox.charting.Chart2D"); dojo.require("dojox.charting.plot2d.Pie"); dojo.require("dojox.charting.action2d.Highlight"); dojo.require("dojox.charting.action2d.Magnify"); dojo.require("dojox.charting.action2d.MoveSlice"); dojo.require("dojox.charting.action2d.Shake"); dojo.require("dojox.charting.action2d.Tooltip"); dojo.require("dojox.charting.widget.Legend"); dojo.require("dojo.colors"); dojo.require("dojo.fx.easing"); // replace ajax.googleapi calls //dojo.require("dojox.gfx"); dojo.require("dojox.gfx.svg"); //svg or vml not both //dojo.require("dojox.gfx.vml"); dojo.require("dojox.gfx.shape"); //dojo.require("dojox.gfx.path");
Turn the layer into a minified layer file
Building a layer, or layers, requires a profile script. Simplest to put it in <dojo root>/util/buildscripts/profiles/. That is the default place it looks for them so no need to add path details. And never a need to add .profile.js at end - taken as given.
Use build.sh (in buildscripts folder) to actually run the build:
NB use profileFile instead of profile if the file is not in the source tree.
if multiple args for a param, separate with comma and no spaces. e.g.
if your build task specifies profile=sofastats, the system will search for <dojo root>/util/buildscripts/profiles/sofastats.profile.js
A profile might look like this:
dependencies = { layers: [ { // where to put the output relative to /util name: "../sofastatsjs/sofastats.js", // resourceName is a way of referring to this without having to repeat path details each time // resourceName: "sofastats", // either list dependencies e.g. "digit.digit" or a layer file containing dependencies // It may be more effective to create a dummy JavaScript file with multiple dojo.require statements // in the source tree, and simply list the dummy file as a dependency rather than try to maintain a // detailed dependency list within the profile. // namespaced by appropriate prefix // WRONG - dependencies: ["../sofastatsjs/src/sofastats.js"] dependencies: ["sofastats_js_src.sofastats"] //dependencies: ["dojox.charting.Chart2D", "dojox.charting.themes.PlotKit.blue", "dojox.charting.action2d.Highlight", // "dojox.charting.action2d.Magnify", "dojox.charting.action2d.MoveSlice", "dojox.charting.action2d.Shake", // "dojox.charting.action2d.Tooltip", "dojox.charting.widget.Legend", "dojo.colors", "dojo.fx.easing"] } ], prefixes: [ // the system knows where to find the "dojo/" directory, but we // need to tell it about everything else. All relative to /util. ["dijit", "../dijit"], ["dojox", "../dojox"], ["sofastats_js_src", "../sofastatsjs/src"] ] }
As usual, catering to Internet Explorer adds considerable difficulty. SVG is used by most browsers. For IE there is VML and Silverlight. Canvas is also an option for some browsers (not sure about the details of this). Can't just include everything in the code as there would be fatal conflicts. So it has to happen dynamically.
Currently, I have only made scope for VML as an alternative to SVG for IE. It may be necessary to do more sophisticated browser version sniffing or check for Silverlight etc to enable Silverlight as an alternative.
It is important to note: there isn't currently a way to include all the required renderers in a single file (such as a layer created by a custom Dojo Build). Not only would the size be prohibitive, each of the renderers re-defining the API would cause severe errors.
.tundra .dijitTooltipContainer for the border of tooltips
But - can override in JS and feed into tool tip action definition.
Call the following in sofa_charts.js: var anim_c = new dc.action2d.Tooltip(mychart, “default”, {tooltipBorderColour: “orange”, connectorStyle: “defbrown”});
Make the following line changes:
dojo.declare("dojox.charting.action2d.Tooltip", dojox.charting.action2d.Base, { ... constructor: function(chart, plot, kwArgs){ ... this.tooltipBorderColour = kwArgs.tooltipBorderColour // new line this.connectorStyle = kwArgs.connectorStyle // new line ... }, process: function(o){ ... Replace existing version of this line with extended version showChartingTooltip(this.text(o), this.aroundRect, position, "center", this.tooltipBorderColour, this.connectorStyle); // modification of existing line }
function showChartingTooltip(innerHTML, aroundNode, position, alignment, tooltipBorderColour, connectorStyle){ // modification of existing line if(!masterTT){ masterTT = new MasterTooltip(); } return masterTT.show(innerHTML, aroundNode, position, alignment, tooltipBorderColour, connectorStyle); // modification of existing line }
var MasterTooltip = dojo.declare(dijit._MasterTooltip, { show: function(/*String*/ innerHTML, /*DomNode*/ aroundNode, /*String[]?*/ position, /*String*/alignment, /*String*/tooltipBorderColour, /*String*/connectorStyle){ // modification of existing line ... // show it ... dojo.style(this.containerNode, "borderColor", tooltipBorderColour); // new line straight after opacity setting (NB under show)
Other options include borderWidth, color, fontSize, padding.
Some changes were covered above to simplify the editing process. Anything above about connectorStyle is relevant.
Replace
"BL-TL": "dijitTooltipBelow dijitTooltipABLeft", etc
with
"BL-TL": "dijitTooltipBelow" + "-" + this.connectorStyle + " dijitTooltipABLeft", "TL-BL": "dijitTooltipAbove" + "-" + this.connectorStyle + " dijitTooltipABLeft", "BR-TR": "dijitTooltipBelow" + "-" + this.connectorStyle + " dijitTooltipABRight", "TR-BR": "dijitTooltipAbove" + "-" + this.connectorStyle + " dijitTooltipABRight", "BR-BL": "dijitTooltipRight" + "-" + this.connectorStyle, "BL-BR": "dijitTooltipLeft" + "-" + this.connectorStyle
In:
var MasterTooltip = dojo.declare(dijit._MasterTooltip, { show: function()
insert:
this.connectorStyle = connectorStyle; // new line
above:
this.place = (alignment ...
Set every background url to none except for popupMenuBg.gif and the tooltipConnector images.
NB Javascript must reference files relative to the calling file, not themselves (so unlike css).
NB if blank.gif can't be found, Firefox will fail to show the arrows on tooltips when running off file (as opposed to localhost).
Approx line 14,575:
if(dojo.isIE){ var burl = dojo.config["dojoBlankHtmlUrl"] || (dojo.moduleUrl("dojo", "resources/blank.html")+"") || "javascript:\"\"";
should become:
if(dojo.isIE){ var burl = "sofastats_report_extras/blank.htm";
Where blank.htm is in the sofastats_report_extras folder as well and contains:
<html><head><script>isLoaded = true;</script></head><body></body></html>
Approx line 14,964:
+ 'background-image: url("' + (dojo.config.blankGif || dojo.moduleUrl("dojo", "resources/blank.gif")) + '");'
should become:
+ 'background-image: url("sofastats_report_extras/blank.gif");'
Where blank.gif can be a transparent 1×1 square kept in the sofastats_report_extras folder also.
At the very end of the file, comment out the dojo.i18n._preloadLocalizations part:
//dojo.i18n._preloadLocalizations(“dojo.nls.”, [“ROOT”,”ar”,”ca”,”cs”,”da”,”de”,”de-de”,”el”,”en”,”en-gb”,”en-us”,”es”,”es-es”,”fi”,”fi-fi”,”fr”,”fr-fr”,”he”,”he-il”,”hu”,”it”,”it-it”,”ja”,”ja-jp”,”ko”,”ko-kr”,”nb”,”nl”,”nl-nl”,”pl”,”pt”,”pt-br”,”pt-pt”,”ru”,”sk”,”sl”,”sv”,”th”,”tr”,”xx”,”zh”,”zh-cn”,”zh-tw”]);
Find this.rawNode.setAttribute(“d”, this.shape.path);
Replace with:
if(this.shape.path){ // http://bugs.dojotoolkit.org/attachment/ticket/12229/svg.patch this.rawNode.setAttribute("d", this.shape.path); }else{ this.rawNode.removeAttribute("d"); }
Find dojo.declare(“dojox.charting.Chart2D”
Find delayInMs under that. Just after
this.delayInMs = kwArgs.delayInMs || 200;
Put this:
this.yTitleOffset = kwArgs.yTitleOffset ? kwArgs.yTitleOffset : 45;
Find fullGeometry under that (change 60 to 150)
// add margins df.forIn(this.margins, function(o, i){ offsets[i] += o; }); if(offsets.l > 150){offsets.l = 150}; // gets too wide for some reason in some cases. Was 60 but not enough. Now 150.
Find fullRender under that
Just after
// go over axes df.forIn(this.axes, function(axis){ axis.render(dim, offsets); });
Put this:
//http://www.reigndropsfall.net/2010/08/12/dojox-charting-axis-titles/ var axes = this.axes, theme_tick = this.theme.axis.tick, theme_font = theme_tick.font, theme_font_color = theme_tick.fontColor, dim = this.dim, offsets = this.offsets, x_middle = (dim.width / 2) + (offsets.l / 2), y_middle = (dim.height / 2) - (offsets.b / 2), m = dojox.gfx.matrix; // For each axis defined, loop through, check if there // is a 'title' property defined. for(var i in axes){ var axis = axes[i]; if(axis.opt.title){ var x, y, rotate = 0; // If the axis is vertical, rotate it if(axis.vertical){ rotate = 270; y = y_middle; x = this.yTitleOffset; // distance to let of axis (needs to clear labels). reigndropsfall had 45 hardwired. }else{ x = x_middle; y = dim.height - 2; } // Render the text in the middle of the chart var elem = axis.group.createText({ x: x_middle, y: y_middle, text: axis.opt.title, align: 'middle' }); // Set the font, font color, and font weight var origTitleFont = axis.opt.font || theme_font; var fontParts = origTitleFont.split(' '); var newTitleFont = fontParts[0] + ' ' + fontParts[1] + ' bold ' + fontParts[3] + ' ' + fontParts[4]; elem.setFont( newTitleFont ).setFill( axis.opt.fontColor || theme_font_color ); // If the axis is vertical, rotate and move into position, // otherwise just move into position. if(rotate){//alert("offsets: " + offsets.l + ", x: " + x + ", x_middle: " + x_middle); elem.setTransform([ m.rotategAt(rotate, x_middle, y_middle), m.translate(0, offsets.l - (x_middle + x)) ]); }else{ elem.setTransform(m.translate(0, y - y_middle - 3)) // I added the -3 so bottom not cropped off } } }; // Render the attribution text var xLoc = dim.width + 5 - offsets.r; var yLoc = y_middle -25; var elemAttribution = this.surface.createText({ x: xLoc, y: yLoc, text: "sofastatistics.com", align: 'middle' }); elemAttribution.setFont( "normal normal normal 10px Arial" ).setFill( theme_font_color ) elemAttribution.setTransform([ m.rotategAt(90, xLoc, yLoc) ]);
get_ie_script = function(mysrc){ var script = document.createElement('script'); script.type = 'text/javascript'; script.src = mysrc; document.getElementsByTagName('head')[0].appendChild(script); } if(dojo.isIE){ get_ie_script("sofastats_report_extras/arc.xd.js"); get_ie_script("sofastats_report_extras/gradient.xd.js"); get_ie_script("sofastats_report_extras/vml.xd.js"); }
How did I know those were the files I needed? If they weren't available, whether off the web live or in the Temporary Internet folder, Dojo charts didn't work in IE and if they were, then it did.
Run “0 minify sofastats.py” to make a minified version of “sofastats_report_extras/sofastats.js.uncompressed.js”
Note - once made and happy with it put copy in code folder.
Change the script link so it points to the minified layer, not the source layer file. Success? Should run much quicker and with less back and forth.
Can't find resource - did you add the path to prefixes? e.g. unable to find templates/Menu.html under dijit.
js: "./jslib/i18nUtil.js#61(eval)", line 1: uncaught JavaScript runtime exception: SyntaxError: syntax error js: .ojox.widget js: .^
dojo.i18n._preloadLocalizations(“dojo.nls.”, [“ROOT”,“ar”,“ca”,“cs”,“da”,“de”,“de-de”,“el”,“en”,“en-gb”,“en-us”,“es”,“es-es”,“fi”,“fi-fi”,“fr”,“fr-fr”,“he”,“he-il”,“hu”,“it”,“it-it”,“ja”,“ja-jp”,“ko”,“ko-kr”,“nb”,“nl”,“nl-nl”,“pl”,“pt”,“pt-br”,“pt-pt”,“ru”,“sk”,“sl”,“sv”,“th”,“tr”,“xx”,“zh”,“zh-cn”,“zh-tw”]);
Try sun version of Java? Similar problem: js: .ojo
java -version
If not sun java, try
sudo add-apt-repository “deb http://archive.canonical.com/ lucid partner”
update repository
install sun-java-jdk and uninstall other?
Didn't work.