XML | rickluna .com

Ok, this time around lets talk about some of the little apps that make our lives a easier – they may not be worthy of putting on a resume but we all have found apps that make our lives as front-end developers a little easier.

XML Notepad 2007 – Simple XML Viewer & Editor

usefule_xml_notepad_splash

A simple XML editor – stop going blind by looking at thousands of lines of XML – this little app does a great job of revealing things to you via collapsible nodes. It allows you to insert / edit / create nodes and even drag them around. Not always necessary but always very handy. You can even go so far as to create an XSLT to preview your data.

Download XML Notepad 2007 from http://www.microsoft.com/en-us/download/details.aspx?id=7973.

OpenOffice Calc – Export data as XML

Ever tried to use Excel to export a spreadsheet as XML? Sometimes it works – mostly only when you create your own schema – I honestly like how you can drag and drop XML nodes to spreadsheet columns. However, it doesn’t always work and any error messages you get are cryptic and don’t easily point you in the right direction.

OpenOffice 4 has greatly simplified exporting data as XML. You can export any spreadsheet as XML without any configuration beforehand. Perfect and easy! You have to do two things – 1) Download and install OpenOffice 4, and 2) Download the Simple XML exporter (follow the directions on the Simple XML export site to install it).

A couple of things that I noticed with the Simple XML Export tool is that it will attempt to convert your column names into XML-friendly values. For example special characters are converted to hashes. Spaces in names are converted to a dash, etc. I suppose this is only natural due to the “configuration-less” nature of the export.

SQL Lite Database Browser

usefule_sqlldbb_splash

If you’ve ever done heavy WebSQL work you’ll now that the SQL view in Chrome quickly bogs down to the point where its completely unusable. Well, this little gem will let you view your SQL file – query it, manipulate the data however you like. Its a great tool for development and testing.

Download SQL Lite Database Browser here.

To find Chrome’s SQL database on windows:

C:\Users\[Your User Name]\AppData\Local\Google\Chrome\User Data\Default\databases\

Custom Scroll Bars in Desktop Browsers

Designers love to replace native widgets with their own designerly stuff. A few weeks ago I had to duplicate an artistic scroll button / slider. Because I needed IE 7+ support I couldn’t use my go-to which would have been iScroll.

I went through a few of the different scrolling libraries out there and spun my wheels for a bit. I went on to try Slider, NiceScroll, Scroller, enScroll and glanced at jQueryTools and jQueryUI. In the end I settled on something called “jQuery custom content scroller”. It didn’t give me IE 7 compatibility – but in that case I stopped caring as “overflow:auto” worked just as well – sometimes a designer has to give a little as there’s only so much that we as devs can reasonably do.

One thing that I immediately appreciated about it that the other scrollers failed on was the ability to change the dimensions of the scroll handle. The other libraries didn’t take into account the new dimensions of the handle and so they wouldn’t correctly calculate when the handle reached the bottom of the slider track preferring instead to stop the handle in the middle of the track. “jQuery custom content scroller” in fact takes a look at the existing handle dimensions thus allow it to be dragged appropriately.

Anyway, if you’re looking for a flexible scroller for your desktop websites then I suggest giving it a shot.

Download jQuery custom content scroller here.

XMap Image Map Editor

Not everyone has a GUI HTML editor with nifty tools like a GUI-based image mapper. xMap is a free stand-alone tool that offers a GUI-based method of creating image maps.

Download XMap here.

RELOAD SCORM Player

Great tool that will load your SCORM packages within a SCORM 1.2-compliant environment. It keeps track of the all CMI data so that you can test if you’ve integrated your SCROM wrapper correctly.

Download RELOAD SCORM Player

Having a library of scripts in your back pocket comes in handy – this one is a gem IMO, it is an XML to JSON converter written in JavaScript. I spent the better part of my day trying the wide variety of scripts that a simple Google search yielded. Some didn’t work, others did albeit with quirks (i.e., output that was “technically” JSON while having a less than desired structure).

After much searching and testing I’ve found one that is “perfect”; inserting null values where needed, arrays appearing where they should, extra objects weren’t inserted, etc, etc…. in addition the author shared his test scripts to show the robustness of his work. Download it from here:

http://michael.hinnerup.net

The library claims to also convert JSON to XML – I’ve not tried it but if the quality of the XML to JSON portion is any indication then I expect it should work just as well.

Update 1/2/2013

Michael appears to have updated his blog as all of the content has vanished – and so as a service to others (and myself) I’m providing a link to the js. Whenever Michael gets his blog backup I’ll revert to linking to him, in the meantime you can download the library here:

xml_to_json.js

Also, as his documentation has also disappeared I’ve added a quick example below showing how to request an XML resource via JQuery and turn it into JSON once its been received by the client:

...
function getXML(){
  $.ajax({
    url:      hostURL,
    type:     'GET',
    dataType: 'xml',
    error:function(xhr,status,err){
      // handle errors here
    },
    success:function(responseData,status,xhr){
      if (responseData.childNodes.length > 0){
        var obj = xmlJsonClass.xml2json(responseData); // xml to json conversion happens here
        console.log(obj);
      } else {
        console.log('Response did not appear to contain any children.');
      }
    }
  });
}
...

Tip

I had XML that contained CDATA sections – what the XML-to-JSON script did was create a needless object for the CDATA – a structure that looked like this:

...
{test:
   {test1:'something',
    test2:'something else',
    test3:{#cdata:'another something'}
    }
}
...

Note the value for “test3” – instead of putting the string “another something” as the value the library put in another object. To avoid that, open the xml_2_json.js file and go to line 186 and note the for loop:

...
for (n = xml.firstChild; n; n = n.nextSibling) {
   o["#cdata"] = this.escape(n.nodeValue);
 }
...

That block of code is where the extra object gets inserted – simply change it to this:

...
for (n = xml.firstChild; n; n = n.nextSibling) {
   //o["#cdata"] = this.escape(n.nodeValue); // << original line
   o = this.escape(n.nodeValue); // << new line
 }
...

And now the sample output above appears in a manner that makes more sense:

...
{test:
   {test1:'something',
    test2:'something else',
    test3:'another something'
    }
}
...

Category Archives: XML

A Collection of Useful Tools