XML editor using Blockly

[Anuj Khandelwal]

One of the projects at EMBL-EBI as part of GSoC 2016 is to create a graphical XML editor. We're trying to create a Blockly editor which automatically generates the appropriate Blockly blocks to represent any Relax NG XML schema that is uploaded to it.

Any inputs/suggestions regarding the project are most welcome!

[Wolfgang Koehler]

Doesn't seem to be too challenging. I did a similar application, which I can not share, parsing through a text document and creating a graphical representation of it. The way I approached it was to first create all the blocks I needed. Then I put the blocks together on the workspace and save the resulting Blockly XML to a file using:

//**************************************
//this function saves the certifier file
//**************************************
function saveConfig() {
  var xml = Blockly.Xml.workspaceToDom(workspace);
  var xml_text = Blockly.Xml.domToPrettyText(xml);
  //save the DOM
  var blob = new Blob([xml_text], {type: "text/plain;charset=utf-8"});
  saveAs(blob, "toolingConfig.xml");
}

Then I dissected that file to see how each of the blocks was represented.

Next I parsed through my text files and based on the information encountered I created the Blockly XML based on my above findings.

Last but not least:

//prepare XML for display
var oSerializer = new XMLSerializer();
var sXML = oSerializer.serializeToString(xmlDoc);
var xml = Blockly.Xml.textToDom(sXML);
Blockly.mainWorkspace.clear();
//show blocks on workspace
Blockly.Xml.domToWorkspace(xml, workspace);

Will display the blocks. All just a matter of string manipulation. Took me no more than a day to do.

To create an XML output file you simply create a new generator file und generators/javascript that looks something like this:

//*******************************
//XML definition for switch block
//*******************************
Blockly.JavaScript['px'] = function(block) {
  var XML;
  XML = '\n<switch>' +
        '\n <name>' + block.getFieldValue('SwitchName') + '</name>' +
        '\n <address>' + block.getFieldValue('SwitchAddress') + '</address>' +
        '\n</switch>';
  return XML;
}

Your XML is compiled and saved with:

//********************************
//this function saves the XML file
//********************************
function saveXML() {
  var xml_text = Blockly.JavaScript.workspaceToCode(workspace);
  var blob = new Blob([xml_text], {type: "text/plain;charset=utf-8"});
  saveAs(blob, "toolingConfig.l5g");
}

This is not 100% clean as XML is not javascript but it works. To make it correct you would have to create a XML.js under generators and add a folder XML in which you put our code snippets. In that case don't forget to add this new generator to the build.py

To read and write to your local disc use FileReader and FileSaver.

This should be all the information you should need.

Happy coding.

[Anuj Khandelwal]

Thanks for the inputs. My project may be a little different from the one that you've mentioned. But I'll definitely use this as a reference point.