I've written a simple taglib (called Script
) that takes its body's content, wraps it in an HTML <script>
element and inserts it at the bottom of an outer taglib (called Body
). This is to automate the initialization of Zurb's Foundation 4. This means this JSP:
<r:page>
<r:head title='Test Site'/>
<r:body>
<div id='thing'></div>
<r:script>
$(function() {
$('#thing').html('DOM is ready');
});
</r:script>
</r:body>
</r:page>
Is rendered as this HTML:
<!DOCTYPE html>
<!--[if IE 8]><html class='no-js lt-ie9' lang='en'><![endif]-->
<!--[if gt IE 8]><!--><html class='no-js' lang='en'><!--<![endif]-->
<head>
<meta http-equiv='content-type' content='text/html;charset=UTF-8' />
<title>Test Site</title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
<link rel='stylesheet' href='/css/foundation.min.css'>
<script src='/js/vendor/custom.modernizr.js'></script>
<!--[if lt IE 9]><script src='http://html5shiv.googlecode.com/svn/trunk/html5.js'></script><![endif]-->
</head>
<body>
<div id='thing'></div>
<script>
document.write('<script src=/js/vendor/' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>
<script src='/js/foundation.min.js'></script>
<script>
$(document).foundation();
//The contents of the <r:script> from the JSP
$(function() {
$('#thing').html('DOM is ready');
});
</script>
</body>
</html>
Now the downside to this approach is that the Eclipse WTP JSP Editor sees the body contents of the script taglib as just more HTML, so I lose JavaScript syntax highlighting. Is there some way (possibly by adding information to the .tld
file or creating a TagInfo
Class to tell the JSP editor that the body is mean to be read a JavaScript? or is the only approach to just add a <script></script>
element by hand (and for clarity sake rename the custom taglib something like onFoundationReady
). Also just in case it's still possible to to convince smarter people than myself that this extra effort is worth it in the first place, the alternative would be to include the boilerplate Zepto/jQuery loader and $(document).foundation();
at the bottom of each page, and when include the fact that I'm also using Facebook Connect via the JavaScript SDK there is a lot of boiler plate code that this taglib is cleanly hiding from me)