Oddjob Gets a Faces Lift

My first pass at a new Ajax enabled JSF front end for Oddjob is complete.

Oddjob JSF/Ajax Browser View

Oddjob JSF/Ajax Browser View

The frames are gone. Instead I’m using the JQuery Splitter to provide the split panel affect. It works well but doesn’t resize when the browser window size is changed. The Splitter documentation aludes to this, and I probably just need to read it properly to understand what the fix is.

The refresh is now done entirely on the client. Unfortunately no cleaver Ajax push yet – it’s just some Java Script that uses an interval to click the refresh button:

	<f:ajax render="treeform detailtab actions">
		<h:form id="refresh">
			<fieldset id="refresh-set">
				<legend>Refresh</legend>
				<label for="refresh:rate">Rate (seconds)</label> 
				<input type="text" id="rate" onchange="oddjob.refresh(this.value)"/>
			</fieldset>
			
			<h:commandButton value="Refresh" id="refresh-button" styleClass="refresh-submit"/>
			
		</h:form>
	</f:ajax>
	
	<script type="text/javascript">
oddjob = function() {
	var timer;
	
	return {
		refresh: function(value) {
			if (timer) {
				clearInterval(timer);
				timer = null;
			}
			var interval = parseInt(value);
			if (interval > 0) {
				timer = setInterval(function() {
					document.getElementById("refresh:refresh-button").click();
				}, interval * 1000);
			}
		}
	};
}();
	</script>

Slightly crude – but it works!

Oddjob’s new front end has got some way to go to being a truely slick user experience but it’s good enough for the next version of Oddjob. I’ve certainly got the bug for JSF and Ajax now, and will be coming back to it many times over the coming months.

Comments are closed.