Hi all,
I am trying to run the “learning” example in a HTML page containing dojo/dijit objects which embed the .
The browser parses the gojs-debug code and fails somewhere. Unfortunately, I don’t have any error messages.
Does anybody have succeeded in embedding gojs in a dojo/dijit frame widget?
Thanks
Jeroen
I’m not very familiar with Dojo, but I think it uses AMD modules to load script files, so you may need to load GoJS like in this example:
Simon
Thanks Simon for your prompt reply.
I didn’t manage to execute the go-debug.js script using the following syntax (RequireJS?):
require.config({
// declare that the GoJS library is actually in a different directory
paths: { “go”: “…/release/go” }
});
Do you think that I should use the standard dojo “require” statement such as:
require([“…/release/go”], function(… ?
I suggest you try, but I’m not familiar enough with Dojo to say what might be the most proper way.
Hi Simon,
just let you know that I tried, tried and tried without success.
I am stopping here my evaluation of GoJs :disappointed:
Only direct support from the development team could do it.
Jeroen
What problem(s) did you have?
OK, I just went to dojotoolkit.org and started reading Hello Dojo! - Dojo Toolkit Tutorial.
So I took a truly minimal GoJS sample and added loading dojo.js and their require script. Here’s the whole page:
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2015 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="http://gojs.net/beta/release/go-debug.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script id="code">
function init() {
require([
'dojo/dom'
], function(dom) {
var greeting = dom.byId('greeting');
greeting.innerHTML += ' from Dojo!';
});
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagram",
{ initialContentAlignment: go.Spot.Center });
myDiagram.model = new go.GraphLinksModel([
{ key: "Alpha" },
{ key: "Beta" }
],[
{ from: "Alpha", to: "Beta" }
]);
}
</script>
</head>
<body onload="init()">
<div id="myDiagram" style="border: solid 1px black; width:100%; height:300px"></div>
<h1 id="greeting">Hello</h1>
</body>
</html>
It worked just fine. Here’s the resulting screenshot:
Thanks Walter for your help.
I am executing the code that you wrote and it does not work for me. No graphic is showing despite the fact that I have the complete ‘Hello from Dojo!’ text shown.
Using the debugger, I can see that the $ variable is not defined, after being declared and assigned to go.GraphObject.make; thus the remaining code is not executed.
Please remember my original post where I state that I am trying to embed GoJs in a dojo/dijit frame widget.
Jeroen
OK, so I copied another Dojo demo about widgets. That introductory page, Layout with Dijit - Dojo Toolkit Tutorial, is inconsistent with itself, which didn’t make it any easier to learn.
Still, this seems to work just fine: [EDIT: obsolete]
Thanks.
I have tested it and still got “go is undefined” but again the HTML code that you are showing needs to run in an iFrame Dojo widget.
Can we take it offline and ideally with a Skype session so I could show you my code?
Thanks
Jeroen
Are you saying that when you opened that page, [EDIT: obsolete], it didn’t display a GoJS Diagram within a Dojo tab?
No. Your example works great.
It is just that I have a quite complex configuration
If you have a quite complex configuration, I don’t think I can help. Basically all I know about Dojo I learned on the three pages I have read on dojotoolkit.org. And I don’t know anything about HTML or CSS. Well, hardly anything.
My guess is that you’re unable to load go-debug.js or go.js for some reason. That’s probably a configuration error, and I’m pretty sure I don’t know enough Dojo to be able to help.
GoJS does not depend on any libraries – just pure HTML5/CSS/JavaScript – so if you can get it loaded, you should be able to use it.
Thank you anyway Walter for your time.
I will continue my debugging :cry: and post my findings.
I also tried loading go.js (or go-debug.js) by using Dojo’s require. Alas it doesn’t seem to support configuration in the same manner as RequireJS/AMD, so I was unsuccessful trying to specify where to load GoJS.
Fortunately GoJS doesn’t depend on anything, so requiring GoJS using a URL works:
. . .
// start up and do layout
appLayout.startup();
require(["http://gojs.net/latest/release/go-debug.js"],
function(go) {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagram",
{ initialContentAlignment: go.Spot.Center });
myDiagram.model = new go.GraphLinksModel([
{ key: "Hello" },
{ key: "World" }
], [
{ from: "Hello", to: "World" }
]);
});
The change included deleting the script src=“http://gojs.net/latest/release/go-debug.js” element, and the definition of the init() function.
Hi Walter,
I went back to my original post and code.
I think that I have made some progress by debugging with IE instead of Firefox.
It looks like that GoJs cannot find the div element where to display my diagram because it is in an iframe (my original question).
Somewhere the code below is complaining:
;)c+=b.key+" “;t.trace(” Adornments: “+c)}a.fb&&t.trace(” ContainingGroup: “+a.fb.toString());if(a instanceof y){if(a.Ad)for(b=a.Ad.k;b.next(););if(0<a.Vd.count){c=”";for(b=a.Vd;b.next();)c+=
b.value.toString()+", “;t.trace(” Links: “+c)}a.Fd&&t.trace(” LabeledLink: “+a.Fd.toString());if(a instanceof z){t.trace(” Placeholder: “+a.placeholder);c=”";for(b=a.Nc;b.next();)c+=b.value.toString()+", “;t.trace(” Members: “+c);c=”";for(b=a.xm.k;b.next();)c+=b.value.toString()+", “;t.trace(” NestedGroups: “+c);t.trace(” Layout: “+a.ic)}}else if(a instanceof B){t.trace(” Path: “+a.path);t.trace(” From: “+a.ca+” “+a.sd+’ “’+a.Cf+’”’);t.trace(” To: “+a.fa+” “+a.Xd+’ “’+a.hg+’”’);c=”";for(b=
a.tj;b.next();)c+=b.value.toString()+", “;t.trace(” LabelNodes: “+c)}}},eJ:function(a){if(a instanceof v)for(a=a.qn;a.next();){var b=a.value;t.trace(b.toString());for(b=b.wj;b.next();)e.eJ(b.value)}else a instanceof x&&(b=” “,a.mA&&(b+=“c”),a.oA&&(b+=“d”),a.EA&&(b+=“g”),a.XA&&(b+=“m”),a.pB&&(b+=“h”),a.qB&&(b+=“z”),a.rB&&(b+=“o”),a.vk&&(b+=“s”),a.EB&&(b+=“t”),a.uB&&(b+=“A”),a.Gt&&(b+=“B”),a.mx&&(b+=“L”),a.ib&&(b+=“S”),a.pi&&(b+=“H”),e.EC(a,1,b))},EC:function(a,b,c){for(var d=”",f=0;f<b;f++)d+=" “;
d+=a.toString();c&&(d+=c);c=” “;c=a.visible?c+“v”:c+”~";a.mf&&(c+=“p”);a.oi&&(c+=“m”);a.Ct&&(c+=“a”);d=d+c+(" “+a.na.toString());a.Ea.N()&&(d+=” d:"+a.Ea.toString());a.Ja.N()&&(d+=" n:"+a.Ja.toString());1!==a.scale&&(d+=" s:"+a.scale);0!==a.angle&&(d+=" a:"+a.angle);null!==a.background&&(d+=" b:"+a.background.toString());null!==a.gk&&(d+=" a:"+a.background.toString());a instanceof C&&(d+=" elts:"+a.va.count,0!==a.JB&&(d+=" top:"+a.JB),0!==a.PA&&(d+=" left:"+a.PA),null!==a.Jt&&(d+=" itemArray#:"+t.tb(a.Jt)),
a.EJ&&(d+=" cat:"+a.EJ),null!==a.data&&(d+=" data:"+a.data));t.trace(d);if(a instanceof C)for(a=a.elements;a.next();)e.EC(a.value,b+1,"")},LK:function(a){t.trace(“DelayedReferences (”+a.lg.count+")");for(a=a.lg.k;a.next();){for(var b="",c=a.value.k;c.next();)b+=ka(c.value)+", “;t.trace(” “+a.key+”: “+b)}}};ba.Debug=e;
var t={xi:Object.freeze([]),yA:{},fF:0,Zw:{},xA:0,pt:”…",zt:{},gx:0,LB:[],Cx:null,En:document.createElement(“canvas”).getContext(“2d”),hq:"",GK:document.createElement(“img”),pA:[],DB:“ontouchstart"in window,fL:“ongesturestart"in window,ME:!1,ht:null,it:null,gt:null,Ew:””,ln:window.navigator&&0<window.navigator.userAgent.indexOf(“534.30”)&&0<window.navigator.userAgent.indexOf(“Android”),kx:window.navigator&&0<window.navigator.userAgent.indexOf(“MSIE 10.0”),MA:window.navigator&&0<window.navigator.userAgent.indexOf(“Trident/7”),
mn:0<=navigator.platform.toUpperCase().indexOf(“MAC”),xJ:navigator.platform.match(/(iPhone|iPod|iPad)/i),nH:!1,qH:!1,pH:!1,oH:!1,NE:null,nq:!1,lH:!1,mH:!1,JE:function(a,b,c){var d;return function(){var f=this,g=arguments;clearTimeout(d);d=setTimeout(function(){d=null;c||a.apply(f,g)},b);c&&!d&&a.apply(f,g)}},m:function(a){e&&e.oE&&alert(a)
Could you please check the behavior of this code with an iFrame?
Thanks
Jeroen
You didn’t originally mention “iframe” when describing your problem, and we don’t know (and still don’t know) that Dojo/Dijit “frame widgets” are implemented as “iframes”.
Does the problem involve cross-iframe references? Can you make sure that GoJS is loaded in the other iframe? Or can you pass the HTMLDivElement directly to Diagram when constructing/initializing the Diagram, rather than passing the id of the DIV?
Hi,
sorry but I only mentioned “frame” and not “iframe”.
I have checked to HTML and indeed the “frame” dojo widget is implemented as a iframe.
Could you please check if your basic GoJs example is working fine in an iframe?
Regards,
Jeroen
I couldn’t find any documentation for a dojo or dijit or dojox “frame” – it doesn’t seem to exist. So I used a Dialog instead. Again due to the inconsistencies of the tutorials I had a hard time getting a plain Dialog working, without any use of GoJS. Once I got a Dialog working, adding GoJS was trivial.
It works well in a Dojo Dialog. I just added another tab in my second sample that contains a Button that shows a Dialog containing a DIV that is initialized with a second GoJS Diagram.
Run it at: [EDIT: obsolete]
Here’s all of the code:
<!DOCTYPE html>
<html>
<head>
<title>GoJS Sample using Dojo</title>
<!-- Copyright 1998-2015 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<style>
/* Any demo specific styling needed for this tutorial only */
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
}
#appLayout {
height: 100%;
}
#leftCol {
width: 14em;
}
.claro .demoLayout .edgePanel {
background-color: #d0e9fc;
}
#viewsChart {
width: 550px;
height: 550px;
}
</style>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async: true"></script>
<script id="code">
require(["dijit/registry", "dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/TabContainer", "dijit/layout/ContentPane",
"dijit/Dialog", "dijit/form/Button", "dojo/domReady!"],
function(registry, parser, BorderContainer, TabContainer, ContentPane) {
window.registry = registry;
// create the BorderContainer and attach it to our appLayout div
var appLayout = new BorderContainer({
design: "headline"
}, "appLayout");
// create the TabContainer
var contentTabs = new TabContainer({
region: "center",
id: "contentTabs",
tabPosition: "bottom",
"class": "centerPanel"
});
// add the TabContainer as a child of the BorderContainer
appLayout.addChild(contentTabs);
// create and add the BorderContainer edge regions
appLayout.addChild(
new ContentPane({
region: "top",
"class": "edgePanel",
content: "Header content (top)"
})
);
appLayout.addChild(
new ContentPane({
region: "left",
id: "leftCol",
"class": "edgePanel",
content: "Sidebar content (left)",
splitter: true
})
);
// Add initial content to the TabContainer
contentTabs.addChild(
new ContentPane({
content: "<div id='myDiagram' style='border: solid 1px black; width:100%; height:100%'></div>",
title: "GoJS Diagram"
})
);
contentTabs.addChild(
new ContentPane({
content: "<button onclick='showDialog()'>Show Diagram in a Dialog</button>",
title: "in Dialog"
})
);
parser.parse();
// start up and do layout
appLayout.startup();
// create initial Diagram in a tab
require(["http://gojs.net/beta/release/go-debug.js"], function(go) {
var $ = go.GraphObject.make;
var diagram =
$(go.Diagram, "myDiagram",
{ initialContentAlignment: go.Spot.Center });
diagram.model = new go.GraphLinksModel([
{ key: "Hello" },
{ key: "World" }
], [
{ from: "Hello", to: "World" }
]);
});
});
window.myDialogDiagram = null;
function showDialog() {
window.registry.byId('myDialog').show();
// create a Diagram in a Dialog
require(["http://gojs.net/beta/release/go-debug.js"], function(go) {
var $ = go.GraphObject.make;
if (window.myDialogDiagram === null) {
// create the diagram
window.myDialogDiagram =
$(go.Diagram, "myDialogDiagram",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.ForceDirectedLayout),
nodeTemplate:
$(go.Node, "Auto",
$(go.Shape, { fill: "white" }),
$(go.TextBlock, { margin: 4 },
new go.Binding("text", "key")),
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
),
model: new go.GraphLinksModel([
{ key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" }
], [
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Alpha", to: "Delta" }
])
});
} else {
// change the layout, just for fun
window.myDialogDiagram.layout = $(go.TreeLayout);
}
});
}
function hideDialog(save) {
if (save) {
alert(window.myDialogDiagram.model.toJson());
}
window.registry.byId('myDialog').hide();
}
</script>
</head>
<body class="claro">
<div id="appLayout" class="demoLayout"></div>
<div class="dijitHidden">
<div id="myDialog" data-dojo-type="dijit/Dialog" data-dojo-props="title:'GoJS Diagram in a Dojo Dialog'">
<div id='myDialogDiagram' style='background-color: lightyellow; border: solid 1px black; width:500px; height:400px'></div>
<button onclick="hideDialog(true)">Save</button>
<button onclick="hideDialog(false)">Cancel</button>
</div>
</div>
</body>
</html>
If Dojo Dialog does not use iframes, could you provide a minimal one-page app that demonstrates a trivial use of iframes in Dojo?
Hi,
please have a look at:
http://
Thanks
Jeroen