![\"Remixed](\"https:\/\/www.useragentman.com\/blog\/wp-content\/uploads\/2009\/10\/configurationXML.png\" "\\"configurationXML\\"")
<\/p>\n<\/p>\n
I have been hacking JavaScript for close to 12 years now, and love it.\u00a0 But just like anyone you have been enamored with for a long time, there are bound to be things that drive you crazy about the object of your affection.\u00a0 Sure, your feelings are stronger than when you first met, but sometimes, after you’ve had an a disagreement after a late night of coding, you catch yourself thinking \u201cwhy in the world does she do things that way!?! Ridiculous!\u00a0 She is driving me crazy with her inflexibility!\u201d\u00a0 You then calm down, and realize that despite her flaws, she is still the exciting, cool and can’t-live-without-her girl she was when you first met her \u2013 maybe even more so.<\/p>\n
Okay, I don’t mean to equate JavaScript with my wife (that may result with me sleeping on the couch tonight).\u00a0 But sometimes the way JavaScript does things is pretty silly.\u00a0 You’d figure after all these years, some of these things would have changed, but they haven’t.<\/p>\n
Take for example the way that JavaScript likes to handle long, multi-line strings:<\/p>\n
\nvar html = \"<thead><tr><th>Name<\/th><th>Address<\/th><th>City<\/th>\" +\r\n\"<th>Province<\/th><th>Postal Code<\/th><th>Telephone<\/th><\/tr><\/thead>\";<\/pre>\n<\/blockquote>\nConcatenating strings is a pretty expensive operation, both in memory and processing time<\/a>, and using concatenation\u00a0 it to describe a constant string doesn’t make too much sense. But putting this string on one line would make the code quite unwieldy to read.\u00a0 Plus it looks ugly.\u00a0 I may be a slob in real life (my coworkers and my family could go on for hours about that one) , but I love my code neat.<\/p>\n
Hard-Coding Values into Scripts<\/h2>\n
Another problem I have with this method of defining strings is that we are hard-coding text into the script. This is not a problem unique to JavaScript by any means, but this breaks the Structure\/View\/Behaviour separation<\/a> model that I like to follow when I code a web application.\u00a0 Furthermore, if we had two pages with the same content but written in different languages (like in Canada, where a lot of sites are in English and French) we either have to have two versions of our script, or have the script broken into two parts: one with all the general code in it and one containing the language specific code.\u00a0\u00a0\u00a0 While the latter is the more desirable of the two, it doesn’t lend itself to integrate well with some server-side web application frameworks like Java Struts<\/a>.<\/p>\n
Furthermore, I hate hard-coding any<\/strong> type of value (strings, integers, and any type of objects) directly into my scripts.\u00a0 Scripts should be flexible enough to be used in any type of situation – your table pagination script may work well with having ten rows on the page at the time in one situation, but in another, you may want 15 or 20.<\/p>\n
One comment I hear all the time is “Why not use JSON”?<\/strong> JSON is great, but because it is based on JavaScript, it is still gets ugly when manipulating long strings.<\/p>\n
Enter config.js to the Rescue<\/h2>\n
In fact, it was Struts that inspired me to write the config.js JavaScript library.\u00a0 If you aren’t familiar with it, Struts is a Java Framework that allows developers to configure their server-side web applications easily with a set of XML files.\u00a0 It seemed natural to do the same in JavaScript, given all the DOM and XML processing routines that it has at its disposal, so I built config.js to do this task.\u00a0 With this library, JavaScript developers can configure their own scripts using a block of XML.\u00a0 This block of XML can be either embedded inside the HTML document (via an HTML comment) or in a separate XML file of its own.\u00a0 And this configuration block can contain any number of strings, numbers, arrays or objects that a developer would need to get the job done.<\/p>\n
For example, let’s say you had a JavaScript function that looked like this:<\/p>\n
\nfunction submitFormEvent(e){\r\n var amount = document.getElementById(\"amount\").innerHTML;\r\n var creditCardType = document.getElementById(\"ccType\").value;\r\n var month = document.getElementById(\"month\").value;\r\n\r\n var configString = \"Submitting this order will charge \" + amount +\r\n \" to your \" + creditCardType +\r\n \" and will be received on your \" + month +\r\n \" credit card bill. Are you sure you want to do\" +\r\n \" this?\");\r\n\r\n if (window.confirm(configString)) {\r\n window.location = \"http:\/\/www.mycompany.com\/myApp\/chargeMe.do\";\r\n }\r\n return;\r\n}<\/pre>\n<\/blockquote>\nAs you can see, the English literals are hard-coded in the script and there is a lot of string concatenation going on.\u00a0 One could refactor the script to use config.js to fix these issues in four simple steps:<\/p>\n
\n
- Include the EventHelpers.js and config.js scripts in the <head> of your document (EventHelpers.js is included with the config.js archive):
\n\n<script type=\u201dtext\/javascript\u201d src=\u201d\/path\/to\/EventHelpers.js\u201d><\/script>\r\n<script type=\u201dtext\/javascript\u201d src=\u201d\/path\/to\/config.js\u201d><\/script><\/pre>\n<\/blockquote>\n<\/li>\n- Insert an XML block that contains the hard-coded strings in an HTML tag with an
id<\/code> ofconfig<\/code>:
\n\n<div id=\"config\">\r\n<!--\r\n<config>\r\n <myApp>\r\n <confirmCharge>\r\n <text>\r\nSubmitting this order will charge @amount@ to your\r\n@creditCardType@ and will be received on your @month@\r\ncredit card bill. Are you sure you want to do this?\r\n <\/text>\r\n <url>http:\/\/www.mycompany.com\/myApp\/confirm.do<\/url>\r\n <\/confirmCharge>\r\n <\/myApp>\r\n<\/config>\r\n -->\r\n<\/div><\/pre>\n<\/blockquote>\n<\/li>\n- Refactor you code to use config.js routines:
\n\nfunction submitFormEvent(e){\r\n var amount = document.getElementById(\"amount\").innerHTML;\r\n var creditCardType = document.getElementById(\"ccType\").value;\r\n var month = document.getElementById(\"month\").value;\r\n\r\n var configString = config.getScriptedValue(\r\n \"myApp.confirmCharge.text\",\r\n {\r\n amount: amount,\r\n creditCardType: creditCardType,\r\n month: month\r\n });\r\n\r\n if (window.confirm(configString)) {\r\n window.location = config.getValue(\"myApp.confirmCharge.url\");\r\n }\r\n<\/strong>\r\n return;\r\n}<\/pre>\n<\/blockquote>\n<\/li>\n- Replace any
window.onload<\/code> calls in your code withconfig.addLoadEvent()<\/code> to ensure that any code that relies on config.js is initialized after<\/strong> the XML block is loaded into memory:
\n\nconfig.addLoadEvent(exampleConfigForm.init);<\/pre>\n<\/blockquote>\n<\/li>\n<\/ol>\nThat’s it!\u00a0 If you need to internationalize your application, use whatever internationalization framework your server side code uses – it should integrate well with config.js.\u00a0 I use it with Java Struts all the time.<\/p>\n
See an example of the above code in action<\/a><\/p>\n
Use config.js in All Your Scripts<\/h2>\n
Have more than one script on a page that you want to use config.js with?\u00a0 No problem!\u00a0 Add another block of XML inside the <config> node right after your other scripts config information:<\/p>\n
\n<div id=\u201dconfig\u201d>\r\n<!--\r\n<config>\r\n <myApp>\r\n <confirmCharge>\r\n <text>\r\nSubmitting this order will charge @amount@ to your\r\n@creditCardType@ and will be received on your @month@\r\ncredit card bill. Are you sure you want to do this?\r\n <\/text>\r\n <url>http:\/\/www.mycompany.com\/myApp\/confirm.do<\/url>\r\n <\/confirmCharge>\r\n <\/myApp>\r\n\r\n<calendarWidget>\r\n <instructions>Enter in a valid date after @dateBegin@<\/instructions>\r\n <errors>\r\n <notValid>The date you entered is not valid<\/notValid>\r\n <holiday>\r\nSorry, @date@ is a holiday and we won't be open\r\nat that time.\u00a0 Please try again.\r\n <\/holiday>\r\n <\/errors>\r\n<\/calendarWidget>\r\n<\/span>\r\n<\/config>\r\n-->\r\n<\/div><\/pre>\n<\/blockquote>\nNow, all your configuration information for all your scripts can be in one place.\u00a0 Programmers can now develop the code with place holders for the text, and not worry about accidentally messing up the code when marketing or customer service wants to make some textual changes.<\/p>\n
config.js can also handle HTML<\/h2>\n
You can even insert full HTML inside the configuration XML block using a CDATA node:<\/p>\n
\n<config>\r\n<myApp>\r\n <browserWarning><![CDATA[\r\n <div class=\u201dwarning\u201d>\r\n As of @date@ we will <strong>not<\/strong> be supporting Internet\r\n Explore 6 or lower.\u00a0 Please <a href=\u201d\/howToUpgradeIE.html\">upgrade your\r\n installation of Internet Explorer<\/a>, or install the latest version of one\r\n <a href=\u201d\/otherChoices.html\u201d>the many alternative browsers available<\/a>.\r\n <\/div>\r\n ]]><\/browserWarning>\r\n <\/myApp>\r\n<\/config><\/pre>\n<\/blockquote>\nThis makes using an HTML node’s .innerHTML property even more fun! You longer do you have to hard-code long chunks of HTML inside your scripts. Try that with JSON!<\/p>\n
Framework Independent<\/h2>\n
Config.js is not part of a JavaScript framework \u2013 you can use this library whether you use prototype, mootools, Dojo, jQuery or anything else that may come along. Please feel free to make improvements and changes on it – if you submit the changes back to me, I’ll incorporate them into the next official release.<\/p>\n
More Information<\/h2>\n
There is way more to config.js than is explained here. Complete documentation for the library can be found here:
\nconfig.js manual page<\/a><\/p>\nDownload<\/h2>\n
You can get full source here:<\/p>\n