Yesterday, I released my first plugin for Grails. The goal of the plugin is to do Syntax Highlighting for Code Snippets in HTML pages, for which no plugin existed yet. The plugin supports a whole range of languages, and even includes Groovy Highlighting support. The Grails Synax Highlighter builds on the great work of Alex Gorbatchev, who wrote and maintains the Javascript Syntax Highlighter.

Since pictures say more that a 1000 words can describe, I’ll show you a sample output of plugin:

The above is some syntax colored code, and also includes linenumbers, support to copy it to your clipboard, etc. So, how can we use it in Grails?

Installation

Well, the first step to take is to install it. If you don’t have a Grails project, you can create one by using the grails create-app <name> command. After that, install the plugin by doing a grails install-plugin syntax-highlighter. Grails will download the plugin from the plugin repository. The plugin contains everything you need, so there’s no need to manually download the Javascript library.

After the plugin is installed, you will have a new ‘syntaxhighlighter’ directory in your /web-app/js and css directory. These directories contain the various formatters, like Java, PHP, Groovy, and the style used for them, which can be changed by modifying the CSS file.

Usage

The Plugin can be used in the following way. First, include the <syntax:resources> tag in the head of the GSP page. The <syntax:resources> tag is responsible for loading the required Javascript and CSS and has two required attributes: name and languages. The name corresponds to the name of the
code blocks to highlight in the body of the GSP page. The languages attribute takes in a map of different languages. This page provides an overview of all the supported languages.

To syntax highlight the code using the plugin, you can use the <syntax:format> (which I should probably rename to <syntax:highlight>, now I think of it..). This tag also has two required attributes, which are similar to the resource tag: name and language, which are hopefully self explanatory.

Example

A complete example looks like this:

   


Some Groovy code

   
class User {
   def name
   def password
}
   
And some Java code

   
public class User {
   private String name;
   private String password;

   public String getName() {
     return name;
   }
}
   

Which produces this output:

As a bonus, the <syntax:format> automatically encodes the HTML and XML elements in the tag body. So you don’t have to escape these elements yourself, the plugin does it for you. And if you don’t like it, you can turn it off by using the <syntax:format escapeXml=”false”> attribute.

I hope this gave a nice overview of the plugin, and what you can do with it. For more information, head over to the Grails Plugin page, which should contain all the information you need. And if you miss something, don’t hesitate to leave a comment!

Today’s keynote was all about toys. The guys from the Netbeans team showed some new features such as a JavaScript editor (which contains code completion), Sentilla showed there small sensor thingies, which you can program to gather information, such as acceleration, temperature etc.., LiveScribe showed there very cool pen and lots more.

Today’s topic included:

• User Experience
• SOA
• Semantic Web

Mischa and Erik Jan on The Layperson’s Guide to Building a Better User Experience

Burk Hufnagel showed in his presentation how to leverage the skills you already have and build experiences that delight your users.

The term “User Experience” describes how people feel about using something. This is very important, because if the experience isn’t satisfying,

• The ability to get things done is slow.
• The software will be replaced by software that does have a satisfying experience.

The Layperson’s guide is a guide for non-experts, on how to develop the best “User Experience” for the target group.

So what affects the user’s experience?

• Interaction Design
• How the users thinks it works.
• How the system is actually built.
• How the system presents itself to the user

Doing Test Driven Design has a couple of benefits like

• Writing tests first makes it easier to you create the right interfaces and behaviors later.
• Writing tests first can reduce the chances of the implementation model leaking into the representation model.

So how do you start? Well identifying the Key users is a good start.
They are te ones that must be satisfied for the product to succeed in the market.
Next you need to develop Persona’s, figure out there behavior, motivation and goals. It may take some time to get to the
bottom of this, but it is better then to guess what they want. Try to limit the amount of persona’s, because you need to create
an interface for all of them, to be able to get the best User Experience for all Key Users.

Developing like this may take a little more time on startup, but will gain a lot in the end.

Jeroen on the Semantic Web
Today I had another talk on the Semantic Web, this time a real Technical Session by one of the same guys who talked in yesterday’s discussion panel, Dean Allemang from TopQuadruant. His talk was similarly titled as his book: Semantic Web for the Working Ontologist.

One of the best ways to describe the semantic web is probably using the following sentence: From data on the web to a Web of Data. Our current Web mostly consists of data that us humans can interpret as meaningful, but it has no meaning whatsoever to machines. In the Semantic Web, it is all about adding another dimension to data so that both humans and computers can reason about the data.

One of the standards for the Semantic Web is the Resource Description Framework (RDF). RDF is a way of storing data as triples (subject, predicate, object) distributed across a network, using URI’s as identifiers for the data. For instance if I wanted to model the plays Hamlet and Romeo and Juliet written by Shakespeare in RDF I could write down the following:

(1, my:writer, Shakespeare)
(1, my:title, Hamlet)
(2, my:writer, Shakespeare)
(2, my:title, Romeo and Juliet)

However as you can see, my:title could be very different from your:title. Where my:title is the title of the play, your:title could be your degree, like “MSc.”. This means that the first requirement for the Semantic Web is that we need to agree to disagree. Using namespacing we can assign different meanings to the same terms.

The Semantic Web is all about data, and not about how you represent the data. Yo can chose your own representation and map that to someone else’s representation. For example, if I wanted to say that my:writer is the same as a Dubblin Core author, I could write down the following RDF triple:

(my:writer, owl:equivalentProperty, dc:author)

Now anyone knows that if I say writer, I am actually talking about an author. What is nice is that RDF is used for both the data, as well as the schema. Usig these constructions we can build an ontology. An ontology is best described as: A reusable component of a distributed semantic model. A well known example of an ontology is the Dublin Core standard.

This primer into the Semantic Web was pretty good and clear. I hope they’ll give some more talks on this subject.

Marco on his day
Keynote: extreme innovation
This one was about some of the really cool things you can do with Java. The absolute highlight was the Pulse smartpen, a Java-enabled pen that can not only record what you write & what you hear at the same time, but also order a cup of coffee. In Mandarin. Also noteworthy was a car that can drive & park by itself, which will become hugely popular amongst Asian people & women, I hope.

Designing GUI’s 101: From User Needs To Usable GUI’s
Thank heaven this one only lasted for about 30 minutes, as absolutely nothing new was said (“so we first need to ask the users what they want, then create a prototype, and then ask the same users again what they think of it? Brilliant!”).

Using SOA, EAI, and BPM to reengineer Legacy Applications to Java 2 Platform, Enterprise J2EE Platform
A real-life story about how to drag a legacy system kicking & screaming into the 21st century. I really dug this one, with a very energetic speaker talking about how they wanted to save 30 years of business logic stored in the system by putting JNI on top of it, then later taking another step into the future with SOA. One lesson learned: apparently it’s easier to teach Java developers assembly code than vice versa. Which should insult me in some way as I started out doing machine language, but I’m just too tired to care at this point.

Open Source Development Tools fir the Java Platform, Enterprise Edition (Java Platform), Web 2.0 and SOA
The final session I attended and it sure was hot, temperature wise that is. The demo gods still seemed to be angry, resulting in the room telling the presenter what to do, instead of the other way around (rule #61: if there is a stack trace, study it to see what is wrong – it will save time). After a change of subject (JBoss ESB instead of Seam) things got pretty interesting again, too bad it wasn’t possible anymore to get hold of the free development cd.

Epilogue
It was really clear that this was the last day, as both the number of visitors and the energy level of those still present was down. After attending so many sessions (and writing about them to boot) I myself am ‘stuffed’, but all things considered it was a fantastic experience, and I certainly learned a lot. I’m glad I decided to concentrate on one track (SOA), even though it means I missed out on some other great presentations. Then again, my esteemed colleagues saw those, and I’m pretty sure they will blog about it as well somewhere else.

What do you mean, they share this space with me? I’m a star damn it, I deserve my own space! Now go get me some monkeys!

Think about a Fortune 50 organization (with around 100 thousands employee strength) which has many web applications working across the organization. It may have intranet applications, some business applications etc to facilitate business in effective way. These organizations spend a lot of money on IT spending and generally require many new applications every quarter. Now think about a case where all these new web based applications are different in their look and feel (navigation, fonts, colors etc) from each other.

If that organization doesn’t use consistent look and feel, it becomes really hard for its employees to get used to new applications every now and then. People take a lot of time just to get familiar with the new application and its navigation and you may say, hey… why don’t you spend some money for training these people. Here I am not saying that you don’t change the look and feel with the span of time and with the advent of new technologies. But how about a situation where in case you want to change the look and feel across enterprise, it’s just the implementation of new enterprise UI standards to those applications without significant code change.

Good questions but how about training 100 thousand people. It takes a lot of money, resources and logistics efforts from enterprise side to train these people. And again in case a new person joins the company, he’ll have hard time to be familiar with the application.

So now as an IT division of that organization, we may not want to spend a lot of money but still would like to make applications usable. The answer to those questions comes in terms making your applications intuitive. Many organizations really believe the philosophy/slogan of a very well known usability book “Don’t make me think”. The idea is to make the applications so intuitive and self explanatory that you really will not require a full fledged training. If people get to work on a totally new applications and they are familiar with the look and feel, they really won’t take much time to get acclimatize with the new application.

Another focus area is to spend a lot less time on making things work with an application. Think about a case where it takes around 20 clicks and corresponding wait time to complete one business transaction. You may have come across with these kinds of applications already I guess. That’s a pain, don’t you think. Let me give you yet another example. While booking a plain ticket, if you want to select the destination, you may need to click on an image which pops-up a “choose destination” screen. You will put your search criteria followed by yet another click to search, select and put the result on the parent screen. That’s a lot of effort and time wastage. The end user may be annoyed if the internet speed is not good for some reason. How about you start typing and AJAX interface provide you the option to choose from just in time. You as an end user are able to finish that task within a sec. So less number of clicks is one of the usability principles you may want to focus on while creating the web application.

Let’s talk about some more examples which may be relevant to your day to day experience working with web applications.

1. Complex Navigation: Sometimes you don’t have a clue for how to reach to a certain page as it may be under a complex (lengthy) and nested navigation (remember some Confluence pages )
2. Ever thought why text is always left-aligned and not center aligned. Humans are more used to read from left-to-right always and as soon as you make the text center-aligned, people have a hard time just to read it.
3. Older people feel more comfortable while reading something with big fonts. So it may make sense to provide the capabilities in the website to change it with a lot less efforts.
4. Some colors are more soothing while reading. Generally you try to avoid something with black background but it’s generally pleasant to read something with white background.
5. Consistent look and feel helps a lot in branding a company. Think about Xebia and you remember its logo and prominence of purple color. People start relating brand with logo and color and the way you structure the look and feel. If consistency is lost between websites, the brand doesn’t itch in the people’s memory.

In JEE based development, developers are more focused on creating the server side components and the focus towards creating a usable UI is relatively less as they may not be aware about UI usability at-all. Irrespective of cutting edge technologies you may be using, if application UI is not usable, people won’t use it. Many IT shops are already spending their resources on usability already and those who haven’t, need to focus on this aspect of software development to provide good IT solution to the customer.