I have a question: I'm getting in Javascript XML. I want to add a 'father' node
to that xml.
How do I do that?
/* Load the XML text from the text area to a Javascript XML object */
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(taData.innerText);
xmlObj = xmlDoc.documentElement;
/* Creating the Screen node */
var Screen = document.createElement("Screen");
Screen.setAttribute("xmlns:xsi", "http://www.w3.org/2001/XMLSchema-instance");
Screen.setAttribute("xsi:noNamespaceSchemaLocation", "../../GUIGenerator_V2/Scheme/GG_Scheme.xsd");
/* Creating the Legend node */
var Legend = document.createElement("Legend");
Legend.setAttribute("EntityType", "Request");
var ImportedNode = document.adopteNode(xmlDoc.documentElement);
Legend.appendChild(ImportedNode);
Screen.appendChild(Legend);
Legend is the child of Screen, And I want to make the xmlDoc a child of Legend.
I have tried to write: Legend.appendChild(xmlDoc.documentElement);
but getting an error. What can be the problem?
In some case, a XML is reference as a DOM inside JavaScript so you can use standard DOM functions on it. Pay attention about navigator specific implementation to avoid compatibility problems...
To add a father node you need to use something like :
/* Load the XML text from the text area to a Javascript XML object */
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(taData.innerText);
xmlObj = xmlDoc.documentElement;
/* Creating the Screen node */
var Screen = document.createElement("Screen");
Screen.setAttribute("xmlns:xsi", "http://www.w3.org/2001/XMLSchema-instance");
Screen.setAttribute("xsi:noNamespaceSchemaLocation", "../../GUIGenerator_V2/Scheme/GG_Scheme.xsd");
/* Creating the Legend node */
var Legend = document.createElement("Legend");
Legend.setAttribute("EntityType", "Request");
var ImportedNode = document.adopteNode(xmlDoc.documentElement);
Legend.appendChild(ImportedNode);
Screen.appendChild(Legend);
after execution of that code you obtain a document strucured like:
<fathernode>
<YOURXMLDOCUMENT />
</fathernode>
Related
When I double click the node text editing is going some where, instead of the node. The below is the code and I don't know what is happening. I'm using AJAX to get the mxGraph XML from server side.
Edited source code as per comments
// Creates the div for the graph
mxEvent.disableContextMenu(container);
document.body.appendChild(container);
var xmlDocument = mxUtils.parseXml(xml);
var decoder = new mxCodec(xmlDocument);
var node = xmlDocument.documentElement;
container.innerHTML = '';
graph = new mxGraph(container);
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
graph.setHtmlLabels(true);
graph.setPanning(true);
graph.setTooltips(true);
graph.setConnectable(true);
// Changes the default style for edges "in-place"
var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_ROUNDED] = true;
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;
decoder.decode(node, graph.getModel());
var layout = new mxHierarchicalLayout(graph, mxConstants.DIRECTION_WEST);
var parent = graph.getDefaultParent();
layout.execute(parent);
Adding following piece of code during initialization helped me
graph.cellEditor.init();
graph.cellEditor.textarea.style.position='absolute';
I try to compose a unique HTML file composed by the concat of multiple svg, loads from externals file. I've create a function that receive in input the content of SVG file and want to append it to an svg child node already load in the dom.
function LoadComponent(xmlContent) {
//the node name to append svg
var gridCell = "Zone00";
//svgDoc is
var itemGrid = svgDoc.getElementById(gridCell)
if (itemGrid != null)
{
var oParser = new DOMParser();
var oDOM = oParser.parseFromString(xmlContent, "image/svg+xml");
var root = oDOM.documentElement;
alert(itemGrid);
itemGrid.appendChild(root);
}
else
{
alert("item not found");
return false;
}
return true;
}
My Idea is to create a Grid into the principal svg, and Load in the cells other svg from external files. After all I want to animate the controls using SVG animations.
The loading does not work properly.
Thanks
by printing svg from javascript I got my chart without styles.css. Any ideas how to add styles?
function print(){
var element = document.getElementById("chart");
var serializer = new XMLSerializer();
var view = serializer.serializeToString(element);
console.log(view);
var printWin = window.open('','','left=0;top=0;width=800;height=600;toolbar=0;scrollbars=0; status=0;');
printWin.document.write(view);
printWin.document.close();
printWin.print();
printWin.close();
}
if want to know what I mean check this screenshot http://de.tinypic.com/r/30auvec/5
I need somehow to point on my styles.css file which is located not in the same file
I want to fill a country depends on how many users are online from this country. I have SVG file which has all countries, and the if for example from Canada I have 5 people online, then script should fill id="ca to green.
I storage the Data in a JSON formatted file.
The error I get in the Console is:
TypeError: svgMap is undefined
var mapElement = svgMap.getElementById(iso).style.fill="#94d31b";
$(document).ready(function()
{
$.getJSON("results.json", function(data)
{
data = data.iso_countries;
var map = document.getElementById("blank_map");
var svgMap = map.contentDocument;
for(var key in data)
{
var iso = data[key].country;
var visitors = data[key].visitors;
if( visitors > 1 && 50>=visitors)
{
var mapElement = svgMap.getElementById(iso).style.fill="#94d31b";
}
else if( visitors > 50 && 500>=visitors)
{
document.getElementById("iso").style.fill="#94d31b";
}
}
});
});
It is possible you will have an easier time if you use d3.js to generate an SVG instead of JQuery. See this example, similar to what you would like to do. http://bl.ocks.org/mbostock/5912673
Your need NameSpace for javascript, to handle tags to append new tags o update tags
function Text(){
//svg is a google chart
var svg = document.getElementById('graphic').getElementsByTagName('svg')[0];
var parent = svg.contentDocument;
//show me structure svg as DOM
console.log(parent);
//find tag fill and change color and write element type text
for(var i=0; i<svg.childNodes[4].childNodes[1].childNodes[1].childElementCount; i++) {
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
var child = svg.childNodes[4].firstChild.nextSibling.firstChild.nextSibling.firstChild;
text.setAttribute('x', child.getAttribute('x'));
text.setAttribute('y', child.getAttribute('y'));
text.setAttribute('fill', '#000000');
text.setAttribute('dy', '-2');
text.textContent = 'Hell0';
parent.removeChild(child);
g.appendChild(child);
g.appendChild(text);
parent.appendChild(g);
}
}
I hope that it help you
Hallo,
I'm new to objective-j and cappuccino and just have tried to create a
small application, that creates the gui dynamically from a xml file.
Unfortunately it works only partially. It seems that the button
regions are disorder. This means, that the buttons also response if
I click besides the button....
Please help me. I dont get it..
- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
mControlList = [CPArray alloc];
theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero()
styleMask:CPBorderlessBridgeWindowMask],
contentView = [theWindow contentView];
[contentView setFrame:[[contentView superview] bounds]];
[contentView setAutoresizingMask:CPViewWidthSizable |
CPViewHeightSizable];
// Loadxmlfile
var xhttp;
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest()
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
xhttp.open("GET","test.xml",false);
xhttp.send("");
xmlDoc = xhttp.responseXML;
//Get controls nodeand iterate through all controls
var node = xmlDoc.getElementsByTagName("controls")[0];
for (var i=0; i<node.childNodes.length; i++) {
if(node.childNodes[i].nodeName=="button"){
var item = node.childNodes[i];
var name = item.attributes["name"].nodeValue;
var text = item.getElementsByTagName("text")
[0].childNodes[0].nodeValue;
var x= item.getElementsByTagName("rect")
[0].attributes["x"].nodeValue;
var y= item.getElementsByTagName("rect")
[0].attributes["y"].nodeValue;
var width= item.getElementsByTagName("rect")
[0].attributes["width"].nodeValue;
var height= item.getElementsByTagName("rect")
[0].attributes["height"].nodeValue;
var b = [[Button alloc] InitWithParent:contentView Text:text X:x
Y:y Width:width Height:height];
[mControlList addObject:b];
}
}
[theWindow orderFront:self];
}
#implementation Button : CPObject
{
CPButton _button;
}
- (Button)InitWithParent:(CPView)contentView Text:(CPString)text X:
(int)x Y:(int)y Width:(int)width Height:(int)height
{
_button = [[CPButton alloc] initWithFrame:
CGRectMake(x,y,width,height)];
[_button setTitle:text];
[_button setTarget:self];
[_button setAction:#selector(cmdNext_onClick:)];
[contentView addSubview:_button];
return self;
}
- (void)cmdNext_onClick:(id)sender
{
}
#end
Cappuccino gives you most of this functionality for free.
You can load files by using a CPURLConnection.
Also Atlas (or Interface Builder and nib2cib) will automatically create cib files for you, Cappuccino itself already knows how to build up it's UI from a cib files.
If you really want to implement your own system to do this, could you please provide the actual XML you are trying to load? Also try loading the button without using the XML. For example:
var myButton = [CPButton buttonWithTitle:#"My Cool Button"];
[contentView addSubview:myButton];
+ buttonWithTitle: will automatically call - sizeToFit on the initialized button, so you can just add it to your contentView and it should be visible with the appropriate size.