Darren Ferguson - Blog
26 February 2009 at 18:50
Umbraco Map/Place datatype available to Download
My Umbraco map/place dataype that I've blogged about previously is available for download here. The datatype is distributed as an Umbraco package.
Note: This is an Umbraco v4 datatype only. I may update it to support version 3 if there is the demand.
Important: You will need a Google maps API key to use this datatype. The key can be obtained from this site and needs to be placed in the configuration file /umbraco/plugins/FergusonMoriyama/place/place.config.
There are a couple of known issues, which I believe are issues with Canvas, but I'm happy to be corrected if wrong. First, the first time you click on a map location to edit - in IE only - the map doesn't render, subsequent edits work fine. The second issue is that if you edit one map on a canvas page and then edit another map before saving the document then the second map you edit gets the value of the first. I'm hoping to communicate with Ruben and figure out what happens.
I'll treat this as a beta release, please install, test and send feedback. I'll make any modifications needed and release again next week. Feel free to suggest any additional features.
I'll follow up with a couple of blog posts on how to render static and dynamic maps in Umbraco templates.
Finally, you'll notice the datatype renders a link to my site - only visible in canvas or the Umbraco GUI not on the front end of your published site. I've thought long and hard about this, and I figure that If you can't live with the credit link you can make a donation to me and I'll send you a version minus the link.
16 February 2009 at 18:50
Screencast: Umbraco map datatype preview
Preview of the Umbraco map datatype I've been working on. HINT: You can make the screencast full screen.
16 February 2009 at 08:01
Adding jQuery autocomplete to TeamSite Formspublisher
The TeamSite Formspublisher GUI is getting a little old. Although extremely powerful when it comes to capturing user input, it hasn’t always kept up with some of the advancements in Web GUI.
Recently, I was asked to add a select dialogue to a TeamSite data-capture template that contained hundreds of options. Out of the box you could either have a massive scrolling select box or a callout that launched a pop-up window and displayed the data in some custom fashion, neither of which are a particularly pleasant user experience.
The obvious UI pattern for choosing from a large data set is an “auto complete” control. jQuery provides a plugin to do all of the hard work for us.
After a bit of hacking around I managed to get everything working nicely in TeamSite.
Getting this working isn’t completely straight forward so I’ve decided to share the process here.
Start by placing the jQuery files an any plugins that you want to use within Formspublisher in iw-home/iw. Include jQuery within your DCT as follows:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE datacapture SYSTEM "datacapture6.0.dtd"> <data-capture-requirements> <ruleset name="dct"> <script language="javascript" type="text/javascript" src="/iw/jquery/jquery-1.3.1.min.js" /> <root-container location="..." name="...."> .... DCT Structure here ..... </root-container> </ruleset> </data-capture-requirements>
Now we need to add some JavaScript to the DCT:
var o = {};
o.iwInitialised = false;
o.loadedScripts = 0;
o.stylesheets = new Array(
'/iw/mi_custom/jquery/plugins/jquery.autocomplete.css
');
o.scripts = new Array(
'/iw/mi_custom/jquery/jquery-1.3.1.min.js',
'/iw/mi_custom/jquery/plugins/jquery.autocomplete.pack.js'
);
o.formField = null;
o.data= [];Above we are just setting up some variables. You’ll notice a list of scripts and CSS files we want to use within Formspublisher and a few basic state variables.
The next thing we want to achieve is to wait until both the FormAPI onFormInit event has been fired and the DOM is fully loaded in order that we start our manipulations:
IWEventRegistry.addFormHandler("onFormInit", o.iwInitalise);
$().ready(function() {
o.waitForIwInitialise();
});
o.waitForIwInitialise = function() {
if(!o.iwInitialised) {
setTimeout('o.waitForIwInitialise()', 500);
} else {
o.ready();
}
}The code above instructs jQuery to periodically check whether the o.iwInitialised variable has been set to true by the formAPI onFormInit event before executing the next steps. The onFormInit code looks like this:
o.iwInitalise = function() {
o.iwInitialised = true;
o.formField = IWDatacapture.getItem('my/text');
o.formField.setReadOnly(true);
}Note that as well as setting a flag to say that Formspublisher is initialised I am also disabling the field that we will apply auto-completion to. I had issues when a user would start to type before auto complete was fully initialised.
Next we’ll get some JSON from the TeamSite server that contains all of the values for our auto-complete field:
o.ready = function() {
$.getJSON('/iw/data/city.json', function(data) {
o.data= data;
o.loadStylesheets();
});
}I am storing my JSON in iw-home/httpd/iw. The jQuery auto-complete plugin allows for a number of different JSON formats but I am just using an array of cities for purposes of demonstration.
A TeamSite DCT is rendered to the browser as a series of iFrames. Our next step is to inject the Javascript and CSS that we need into the iFrame containing the form that makes up our DCT.
o.loadStylesheets = function() {
var f = window.top.formframe.document;
var head = f.getElementsByTagName('head')[0];
$(o.stylesheets).each(function() {
var script = f.createElement("link");
script.setAttribute("rel", "stylesheet");
script.setAttribute("type", "text/css");
script.setAttribute("href", this);
head.appendChild(script);
});
o.loadScripts();
}
o.loadScripts = function() {
var f = window.top.formframe.document;
if(o.loadedScripts < o.scripts.length) {
var head = f.getElementsByTagName('head')[0];
var src = o.scripts[o.loadedScripts];
var script = f.createElement('script');
script.setAttribute('src', src);
script.setAttribute('type', 'text/javascript');
o.loadedScripts++;
script.onreadystatechange= function () {
if (this.readyState == 'loaded') o.loadScripts();
}
script.onload = o.loadScripts;
head.appendChild(script);
} else {
o.topFrameLoaded();
}
}A few things to note about the functions above. We are targeting our CSS and scripts at window.top.formframe.document which is where the DCT form resides. The list of Javascript and CSS files is taken from our configuration variables so you could reuse this code to add any jQuery plugins that you wish to use.
CSS is being loaded in a fire and forget fashion, we are not checking it’s load state before proceeding to load JavaScript, this is only because I’m not sure how to do it. This could expose us to the styles not being loaded before the user starts to interact with the form but I haven’t experienced this to date. The code to load JavaScript is a bit smarter, only proceeding once all scripts are loaded.
You’ll note that we’ve loaded jQuery again as we are interested in manipulating the DOM in another iFrame. The best way that I have found to do that is simply to have an instance of JQuery within the frame.
Now we have all of our pre-requisites loaded the final step is to enable auto complete.
o.topFrameLoaded = function() {
var f = window.top.formframe;
f.document.mi0 = {};
f.document.o.data = o.data;
f.$('input[name=my/text]').blur();
f.$('input[name=my/text]').autocomplete(f.document.o.data, {matchContains: true});
o.formField.setReadOnly(false);
f.$('input[name=my/text]').focus();
}Here we are finding a reference to our text field in the DCT and enabling auto complete. We are also re-enabling the field now that all is ready. I found that I had to blur the field prior to auto complete initialisation through some trial and error.
Obviously the auto complete plugin has many options and can be configured however you wish.
Finally, for bonus points you can ensure that the user enters a value from your list of options using the following bit of formAPI.
IWEventRegistry.addItemHandler('/my/text', 'onItemChange', function(item) {
var v = item.getValue();
var found = false;
$(o.data).each(function() {
if(v == this) {
found = true;
return;
}
});
item.setValid(found);
});Anyway, I hope you found this helpful. For me it opens the door to give Formspublisher some extra usability.
14 February 2009 at 18:42
A weekend in London
As a Londoner I'm often asked by friends to recommend places to go and things to see when they visit London. My career and my passion for travel has taken me around the world and I've met a number of people who end up visiting my home 'town'.
I'm often reluctant to recommend. What if my visiting acquaintance doesn't like a nice cosy pub as I do? What if they love to shop and hunt out bargains? I loathe shopping with a passion.
Anyway, here is what I would do if I was limited to a weekend. I'll make a few assumptions. First, you are energetic and keen to fit a lot in. Second, you are fit and able bodied and open minded. Finally, you aren't travelling on a shoe string budget. While I wouldn't send you anywhere that would break the bank you'll need to spend a few pounds in order to make the most of a trip. Oh, and I almost forgot, I'll assume that the sun is shining.
Here goes...
Arrive on Friday night, preferably at city airport and head east to Brick lane for a curry. After dinner have drinks at the Vibe bar or 93 feet east. If you are feeling super energetic see what is going on at Sosho, Cargo or Electricity showrooms before getting a good night of sleep.
Saturday morning, get up early and have breakfast at Patisserie Valerie in Knightsbridge. Have a wander around Harrods for an hour or two making sure that you check out the food hall. Jump on the tube and head over to Camden. You may enjoy the market - I don't - but if the chaos isn't for you get off at Chalk Farm station rather than Camden to avoid it all. Grab lunch at Thanh Binh one of the best cheap Vietnamese restaurants in London, I recommend the Pho.
After lunch, walk to the top of Primrose hill for one of the best views of the whole city. On the way back to the tube, stop for a pint or two outside The engineer or The queens.
I'd suggest a rest at this point so you can make the most of your evening. For dinner book Latium and have cocktails before/after at the Sanderson.
You are on your own for the evening. I don't really do clubbing any more, but the one piece of advice I give is don't just wander to Leicester square and choose a venue, there are some absolute hovels. If you are just after a few more drinks after dinner I like the bar at the Charlotte street hotel.
Sunday morning, make sure you enjoy a full English breakfast to start your day. Your hotel probably serves one and to be honest there isn't any particular culinary skill involved in making one so it is hardly worth hunting down an 'authentic greasy spoon' cafe.
Get a tube to Westminster and walk over the bridge enjoying the uber tourist views of Big ben and the houses of parliament. Get a boat from Waterloo pier next to the London eye to Bankside pier, browse Tate modern for a while then cross the river using the millennium foot bridge, head up to St. Pauls Cathedral and check out the whispering gallery.
Make sure you use the Thames Clippers commuter boats. The tourist boats are over priced and very slow.
Back on the boat to Greenwich, from Blackfriars pier. Walk through the grounds of the naval college and into the park, up to the observatory for another view over London. If you have time check out the three markets in Greenwich.
Finish your trip with a late Sunday roast and a beer at the Plume of feathers (you'll need to book a sitting at 2 or 4pm). Get on the DLR and head back to city airport!
That is just one of many ways of spending a weekend in London. I missed out Fish and Chips, some great markets and many of my favourite pubs simply because of time constraints. I also tried to leave plenty of spare time between my recommendations so you can wander off the beaten track and discover your own London - in my experience, just wandering is one of the true joys of travel.
My final tip, here is what to avoid. Leicester Square, Theatre Land, The London eye, Buckingham palace. Some Londoners may passionately disagree, but I think you'd be wasting valuable time.
So, if you are reading this and thinking of visiting, enjoy my city. Arguably the greatest on earth.
I'd also be fascinated to hear other Londoners 'top tips'.
05 February 2009 at 08:22
Umbraco trials: Setup and demo Umbraco instantly
My new site http://autoumbraco.darren-ferguson.com/ allows you to install an instance of Umbraco by filling out a web form which will take you less than 10 seconds. You can choose from version 3 and 4 and also specify whether you want any packages pre-installed – such as Warren Buckley’s excellent Creative website wizard.
Why is this useful? Scenario 1: you want to demonstrate Umbraco to a client/colleague who has never used it before. You are out of the office and don’t have IIS running on your laptop.
Scenario 2: You want to check out a new Umbraco package or test one that you are developing but you don’t want to install it into any of your development/production environments before you’ve tested the functionality.
Scenario 3: You want to run an event website for week or two while the event is on and then close the site immediately after.
I frequently need a fresh installation of Umbraco and am already finding this service very useful. I hope you do too.