AWG Blogs

Thursday, January 24, 2013

XML/Javascript Mapping with Jsonix

I needed a way to edit an XML config pulled from a SharePoint List (via SPServices). So that's when I found Jsonix, which so far in my testing appears to do the job quite well.

The steps I took were:
- Load the XML in Visual Studio and click XML, Create Schema. This created two .xsd files "MySettings.xsd" and "MySettings1.xsd" (in the same directory) as Visual Studio 2010 split them out by namespace apparently. At any rate, what I had to do was edit the xs:import element in the parent XSD, adding a schemaLocation attribute with the unqualified name of the second .xsd file.

- Downloaded jsonix-scripts-1.2-all.js and jsonix-full-1.2.jar   from http://repo2.maven.org/maven2/org/hisrc/jsonix/  -- note, I tried 1.0 per the how-to on the author's site, but it didn't seem to work for me (got errors which I didn't have the time to troubleshoot); however 1.2 worked like a charm, although the generated objects are rather cryptic.

- Ran C:\temp\jsonix-samples-po-1.0>java -jar lib/jsonix-full-1.2.jar -d src/main/webapp/js src/main/resources/MySettings.xsd
This generated two folders with a Mappings.js in each folder, corresponding to the two .xsd files. I combined these two .js files into one, putting the code from generated\Mappings.js at the top of the file and the code from settingsuri\Mappings.js (assuming "SettingsURI" is the root xmlns) at the bottom.

- I then uploaded my sample .xml and the .js files to the SharePoint list and placed the following code in a test .html page.


<script type="text/javascript" language="javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.SPServices-0.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="jsonix-scripts-1.2-all.js"></script>
<script type="text/javascript" language="javascript" src="BothMappings.js"></script>

<script type="text/javascript" language="javascript">

    $(document).ready(function () {
 
var context = new Jsonix.Context([ settingsuri]);

var unmarshaller = context.createUnmarshaller();
var myURL = "MySettings.xml";
unmarshaller.unmarshalURL(myURL,
function (data) {
var objectFromURL = data;
alert(objectFromURL);
});

    });

</script>

- Turn on Debugging in IE Developer tools and place a breakpoint in the callback. The local watch clearly shows objectFromURL reflects the mappings of the XML file. Pretty sweet.