<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.2.3" -->
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	>

<channel>
	<title>Internet Articles ∞</title>
	<link>http://articles.pakcreations.com</link>
	<description>Learning some stuff!</description>
	<pubDate>Tue, 26 Feb 2008 02:02:47 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.2.3</generator>
	<language>en</language>
			<item>
		<title>Web2.0 how-to Design Style Guide</title>
		<link>http://articles.pakcreations.com/web20-how-to-design-style-guide</link>
		<comments>http://articles.pakcreations.com/web20-how-to-design-style-guide#comments</comments>
		<pubDate>Tue, 26 Feb 2008 02:02:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[web 2.0]]></category>

	<!-- AutoMeta Start -->
	<category></category>
	<!-- AutoMeta End -->
	
		<guid isPermaLink="false">http://articles.pakcreations.com/web20-how-to-design-style-guide</guid>
		<description><![CDATA[Summary of features covered
The list below is a summary of many of the common features of typical &#8220;Web 2.0&#8243; sites.
Clearly, a site doesn&#8217;t need to exhibit all these features to work well, and displaying these features doesn&#8217;t make a design &#8220;2.0&#8243; - or good!
I&#8217;ve already addressed some of these factors in my introductory Current Style [...]]]></description>
			<content:encoded><![CDATA[<h2>Summary of features covered</h2>
<p>The list below is a summary of many of the common features of typical &#8220;Web 2.0&#8243; sites.</p>
<p>Clearly, a site doesn&#8217;t need to exhibit all these features to work well, and displaying these features doesn&#8217;t make a design &#8220;2.0&#8243; - or good!</p>
<p>I&#8217;ve already addressed some of these factors in my introductory <a href="http://www.webdesignfromscratch.com/current-style.cfm">Current Style</a> article.</p>
<p class="snippet">
<ol>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#simplicity">Simplicity</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#central-layout">Central layout</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#fewer-columns">Fewer columns</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#separate-top-sections">Separate top section</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#solid-areas-of-screen-real-estate">Solid areas of screen real-estate</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#simple-nav">Simple nav</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#bold-logos">Bold logos</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#bigger-text">Bigger text</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#bold-text-introductions">Bold text introductions</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#strong-colours">Strong colours</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#rich-surfaces">Rich surfaces</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#gradients">Gradients</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#reflections">Reflections</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#cute-icons">Cute icons</a></li>
<li><a href="http://www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm#star-flashes">Star flashes</a></li>
</ol>
<h2>Disclaimer</h2>
<p>Not all these design features are appropriate in all cases. There are always exceptions, and there are lots of bad examples of these features being used wrongly, over-used, or done without sensitivity to the &#8220;symphony&#8221; of a site&#8217;s design.</p>
<p>You can&#8217;t just take all these elements, throw them together and make a good web page, any more than you can take some eggs, sugar, flour and throw them together and get a cake.</p>
<p>Making a web page that works requires a lot of sensitivity to the various forces at work. 	A good design solution is one that balances those (often opposing) forces.</p>
<h2>Web 2.0 ?!</h2>
<p>I&#8217;m using the term &#8220;Web 2.0 design&#8221; to describe the prevailing style of web design I introduce in my <a href="http://www.webdesignfromscratch.com/current-style.cfm">current style</a> article.</p>
<p>Many people use the term &#8220;Web 2.0&#8243; to describe:</p>
<ul>
<li>a resurgence in the web economy</li>
<li>a new level of technological interactivity between web sites and services</li>
<li>or social phenomena deriving from new types of online communities and social networks</li>
</ul>
<p>Many others also use the term in reference to a recent school of web design. 	I&#8217;m comfortable with using it in that context here.</p>
<p>In sociological terms, movements impact people on many levels: economic, cultural, political, etc. 	Is skate-punk about entertainment and sport, music and the music industry, fashion, or the breakdown of society?</p>
<p style="border: 1px solid #ffaa00; padding: 1.5em; margin-top: 2em">
<h3 style="margin-top: 0pt; padding-top: 0pt">Shortcut to Web2.0 Style</h3>
<p>If you don&#8217;t have the resources to create your own “2.0”-style site design, <a href="http://www.templatemonster.com/category/web-2-0-templates/">TemplateMonster</a> have <strong>just (17 July 07)</strong> launched a new <a href="http://www.templatemonster.com/category.php?cat=102">Web 2.0 Templates</a> section.</p>
<p>Of course, a purchased template won&#8217;t always hit your goals perfectly, but a custom design doesn&#8217;t always guarantee that either!</p>
<p>Many sites will benefit loads from applying a fresh, current design, and purchasing a template for under $100 can be a great way to achieve that! And TemplateMonster have been doing this for years, so I&#8217;d certainly recommend taking a look.</p>
<p><a href="http://www.templatemonster.com/category/web-2-0-templates/" title="TemplateMonster's Web 2.0 templates"> 	<img src="http://www.webdesignfromscratch.com/screenshots/tm20-14777-b.jpg" alt="Small screenshots of TemplateMonster template" style="margin: 5px 0pt" height="209" width="200" /> 	<img src="http://www.webdesignfromscratch.com/screenshots/TM20-15360-b.jpg" alt="Small screenshots of TemplateMonster template" style="margin: 5px 1px" height="209" width="200" /> 	<img src="http://www.webdesignfromscratch.com/screenshots/TM20-15436-b.jpg" alt="Small screenshots of TemplateMonster template" style="margin: 5px 0pt" height="209" width="200" /></a></p>
<h2>Introduction</h2>
<p>I&#8217;m going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.</p>
<p>If I had to sum up &#8220;Web 2.0&#8243; design in one word, it would have to be &#8220;simplicity&#8221;, so that&#8217;s where we&#8217;ll start.</p>
<p>I&#8217;m a great believer in simplicity. 	I think it&#8217;s the way forward for web design.</p>
<p>Today&#8217;s simple, bold, elegant page designs <strong>deliver more with less</strong>:</p>
<ul>
<li>They enable designers to shoot straight for the site&#8217;s goals, by guiding the site visitor&#8217;s eye through the use of fewer, well-chosen visual elements.</li>
<li>They use fewer words but say more, and carefully selected imagery to create the desired feel.</li>
<li>They reject the idea that we can&#8217;t guess what people want from our sites</li>
</ul>
<h2 id="simplicity"><span class="faint">1</span>Simplicity</h2>
<p class="comment rightfloat"> 	&#8220;Use as few features as are necessary to achieve what you need to achieve&#8221;</p>
<p> 	<strong>Web design is simpler than ever, and that&#8217;s a good thing.</strong></p>
<p><strong>2.0 design means focused, clean and simple.</strong></p>
<p>That doesn&#8217;t necessarily mean minimalist, as I&#8217;ll explain later.</p>
<p>I really believe in simplicity. That&#8217;s not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.</p>
<p>I&#8217;ve written elsewhere about <a href="http://en.wikipedia.org/wiki/Occam%27s_razor">Occam&#8217;s Razor</a>, which is a principle I use all the time. 	One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.</p>
<p>Here are some examples. 	Note how unnecessary elements have been stripped out from each. 	There <em>could</em> be a lot more on each page than there is&#8230; but would that make them stronger?</p>
<p>The result is that you <strong>have</strong> to look at the content. 	You find yourself interacting with exactly the screen features the designer intended. 	And you don&#8217;t mind - it&#8217;s easy, and you get just what you came for.</p>
<p class="hot-snips"> 	<a href="http://intlstore.mozilla.org/index.php?cPath=2" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-mozilla-store.jpg" alt="Mozilla store" height="200" width="300" /></a> 	<a href="http://www.mediconmedia.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-medicon-media.jpg" alt="Medicon Media" height="200" width="300" /></a> 	<a href="http://www.etre.uk.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-etre.jpg" alt="Etre" height="200" width="300" /></a> 	<a href="http://www.simplebits.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-simplebits.jpg" alt="Simplebits" height="200" width="300" /></a> 	<a href="http://www.artypapers.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-artypapers.jpg" alt="Artypapers" height="200" width="300" /></a> 	<a href="http://www.realmeat.co.uk/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-real-meat.jpg" alt="Real Meat" height="200" width="300" /></a></p>
<h3>Why simplicity is good</h3>
<ul>
<li>Web sites have goals and all web pages have purposes.</li>
<li>Users&#8217; attention is a finite resource.</li>
<li>It&#8217;s the designer&#8217;s job to help users to find what they want (or to notice what the site wants them to notice)</li>
<li><em>Stuff</em> on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.</li>
<li>So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that&#8217;s does its stuff with as little as possible. That&#8217;s economy, or simplicity.</li>
</ul>
<h3>When &amp; how to make your designs simple</h3>
<h4>When?</h4>
<p>Always!</p>
<h4>How?</h4>
<p>There are two important aspects to achieving success with simplicity:</p>
<ol>
<li>Remove unnecessary components, without sacrificing effectiveness.</li>
<li>Try out alternative solutions that achieve the same result more simply.</li>
</ol>
<p class="comment rightfloat">&#8220;It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.&#8221;</p>
<p><cite>Antoine de Saint-Exupéry,<br />
Terre des hommes, 1939</cite></p>
<p><strong>Whenever you&#8217;re designing, take it as a discipline consciously to remove all unnecessary visual elements.</strong></p>
<p>Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.</p>
<p>Use visual detail - whether lines, words, shapes, colour - to communicate the relevant information, <a href="http://www.webdesignfromscratch.com/dont_decorate_communicate.cfm">not just to decorate</a>.</p>
<p>Here&#8217;s an example of a design that suffers from not enough simplicity.</p>
<p><a href="http://www.yaxay.com/" target="_blank">Yaxay&#8217;s</a> interface uses a lot of pixels, but the vast majority of them are <strong>decorative</strong>, part of the page background. 	Relatively few pixels are used to user to find or understand information or interact with the site.</p>
<p class="clear-all">&nbsp;</p>
<p><a href="http://www.yaxay.com/" target="_blank"> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-yaxay.jpg" alt="Yaxay is busy and ineffective" height="200" width="300" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-yaxay-detail.jpg" alt="Yaxay detail" style="margin-left: 15px" height="200" width="300" /> </a> See how much &#8220;stuff&#8221; there is to look at, and notice how few of the pixels are used to clarify actual navigation, actual content, or actual interactive features.</p>
<p><a href="http://en.wikipedia.org/wiki/Edward_Tufte" target="_blank">Edward Tufte</a> is the boss when it comes to the design of information. 	He uses the terms <strong>&#8220;data ink&#8221;</strong> (i.e. detail that enables information transfer) and <strong>&#8220;non-data ink&#8221;</strong> (i.e. detail that&#8217;s just detail) to describe this phenomenon.</p>
<p>One way Tufte specifically measures the effectiveness of information design (graphs, charts, presentations etc.) is using <strong>the ratio of data-ink to non-data-ink</strong>. 	The higher the proportion of data-ink used, the more likely it is that a design is effective.</p>
<p>Taking the Yaxay detail above, there&#8217;s a lot of what I call &#8220;busyness&#8221;, i.e. a lot of edges, tonal changes, colour variations, shapes, lines&#8230; a lot of stuff to look at. But, in this detail, the only <strong>useful</strong> features are:</p>
<ol type="a">
<li>The site logo, and</li>
<li>the label on the nav button (which reads &#8220;art gallery&#8221;)</li>
</ol>
<p>All the rest of the &#8220;busyness&#8221;: the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients&#8230; all this is noise, it&#8217;s all &#8220;non-data ink&#8221;, because it&#8217;s <strong>not enabling communication</strong>.</p>
<h4>I&#8217;m not against richness, complexity or beauty in web design</h4>
<p>Simplicity means:</p>
<blockquote><p>Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.</p></blockquote>
<p>Of course, often what you&#8217;re communicating isn&#8217;t <strong>hard data</strong>, but <strong>soft information</strong>.</p>
<dl>
<dt><strong>Hard data</strong></dt>
<dd>means facts, like news, stock prices, train times, or how much money is in your bank account&#8230;</dd>
<dt><strong>Soft information</strong></dt>
<dd>covers the qualitative aspects of communication, like the <em>first impression</em> about the quality of a company, the <em>sense</em> of how approachable a service provider is, and whether you <em>feel</em> a product will be right for you. It can be just as important!</dd>
</dl>
<p> 	Whether what you&#8217;re communicating is hard or soft, your pixels count, so use them consciously and with care.</p>
<p>Take the example below:</p>
<p class="hot-snips" style="clear: both">
<p style="text-align: center"> 	<a href="http://www.circografico.com.ar/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-alex-dukal-large.jpg" alt="Alex Dukal, illustrator" height="400" width="600" /></a></p>
<p><a href="http://www.circografico.com.ar/" target="_blank">Alex Dukal&#8217;s site</a> is rich, interesting and appealing. It uses a range of visual techniques to draw your attention, make you interested and to give you a warm feeling about the quality of Alex&#8217;s work.</p>
<p>But it&#8217;s also simple, because it uses its pixels/ink/busyness with care and sensitivity. 	It&#8217;s not gratuitous, it&#8217;s <em>economical <strong>and</strong> rich</em>.</p>
<p>Whatever you&#8217;re saying, choose wisely where you use your ink/pixels. 	Use it to communicate, first and foremost. 	Then, ask whether you can communicate just as effectively with less. 	If so, do it.</p>
<h2 id="central-layout"><span class="faint">2</span>Central layout</h2>
<p>(More about this on the <a href="http://www.webdesignfromscratch.com/current-style.cfm">Current Style</a> page). 	Basically, the vast majority of sites these days are positioned centrally within the browser window. 	Relatively few are full-screen (liquid) or left-aligned / fixed-size, compared to a few years ago.</p>
<h3>Why a central layout is good</h3>
<p>This &#8220;2.0&#8243; style is simple, bold and honest. 	Sites that sit straight front &amp; center feel more simple, bold and honest.</p>
<p>Also, because we&#8217;re being more economical with our pixels (and content), we&#8217;re not as pressurised to cram as much information as possible above the waterline/fold.</p>
<p>We&#8217;re using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.</p>
<h3>When &amp; how to use a central layout</h3>
<p>I&#8217;d say, position your site centrally unless there&#8217;s a really good reason not to.</p>
<p>You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with a web app).</p>
<h2 id="fewer-columns"><span class="faint">3</span>Fewer columns</h2>
<p>A few years ago, 3-column sites were the norm, and 4-column sites weren&#8217;t uncommon. 	Today, 2 is more common, and 3 is the mainstream maximum.</p>
<h3>Why using fewer columns is good</h3>
<p>Less is more. 	Fewer columns feels simpler, bolder, and more honest. 	We&#8217;re communicating less information more clearly.</p>
<p>There&#8217;s also a by-product of the domination of centered layouts. Because we&#8217;re not filling the whole screen so much, and not trying to get as much on-screen at any one time, we simply don&#8217;t need as many columns of information.</p>
<p class="hot-snips"> 	<a href="http://www.37signals.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-37-signals.jpg" alt="37 Signals' home page" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.37signals.com/" target="_blank">37Signals</a> have always been at the front when it comes to questioning the status quo and coming up with simple answers.</p>
<p>Here, they use 2 columns. This a great case study in simplicity. It lets the message speak, and adds <strong>nothing</strong> that could get in the way.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="margin-top: 1em"> 	<a href="http://www.apple.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-apple-expo.jpg" alt="Apple Expo" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.apple.com/" target="_blank">Apple</a> is the other leader in elegant simplicity.</p>
<p>This kind of layout works really, really well. 		Each time I experience Apple&#8217;s simple design, the more convinced I become that its zen approach is the holy grail of design.</p>
<p>This typical Apple layout shows that someone has honestly asked, &#8220;How many boxes/columns/lines do we really <strong>need</strong>?&#8221;. 		Then they&#8217;ve boldly edited out unnecessary elements, and the result is undeniably the cleanest, most effective communication.</p>
<p class="clear-all">&nbsp;</p>
<h3>How to choose your columns</h3>
<p><strong>I&#8217;d definitely recommend using no more than 3 columns, simply because you should use no more of anything than you need to.</strong></p>
<p>There are always exceptions, so here are a few examples of more than 3 columns used effectively.</p>
<p class="hot-snips" style="background: #ffffff none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"> 	<a href="http://www.powazek.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-powazek.jpg" alt="Derek Powazek's blog" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.powazek.com/" target="_blank">Derek Powazek&#8217;s blog site</a> uses 3 columns for the main section of his blog, but 4 lower down.</p>
<p>The lower section is a kind of <strong>pick &amp; mix</strong>, where the abundance of columns emphasises the &#8220;Take what you like&#8221; feel.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips"> 	<a href="http://www.amazon.co.uk/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-amazon-uk.jpg" alt="Amazon.co.uk" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.amazon.co.uk/" target="_blank">Amazon (UK)</a> has two side columns, and products arranged centrally in 3 additional columns.</p>
<p>It works beacuse the purpose of each column is clear from its design. 		The left col is definitely navigation; the right column is &#8220;other stuff&#8221;. 		The products in the middle are clearly tiled and separated by white space, so they don&#8217;t overwhelm.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="background: #ffffff none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"> 	<a href="http://www.popurls.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-popurls.jpg" alt="Popurls.com screenshot" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.popurls.com/" target="_blank">Popurls.com</a> contains loads of pick-n-mix information, collating the hot links from other sites like <a href="http://www.digg.com/" target="_blank">digg</a> and <a href="http://del.icio.us/" target="_blank">del.icio.us</a>, but it still keeps to 3 columns for the main blocks of text.</p>
<p>Further down, it shows thumbnails of popular images on the photo-sharing site <a href="http://www.flickr.com/" target="_blank">Flickr</a> (and there are Youtube vids later). 		These are tiled in several columns, which is fine, because it&#8217;s a sit-back, scan and pick your experience moment&#8230;</p>
<p class="clear-all">&nbsp;</p>
<h4> 	And here&#8217;s a site that gets it wrong&#8230;</h4>
<p class="hot-snips" style="background: #ffffff none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"> 	<a href="http://www.allthingsweb2.com/"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-all-things-web-20.jpg" alt="All things web 2.0 has 2 much" class="text-alongside" height="200" width="300" /></a> 		Here&#8217;s <a href="http://www.allthingsweb2.com/">All Things Web2.0</a> using 4 columns: 2 side columns and 2 central columns.</p>
<p>The downside of this layout is that you don&#8217;t know where to start looking. 		Everything is somehow low-priority (partly because of the darkish background).</p>
<p>As we saw, Amazon differentiates the page to this extent, but the design helps you instantly identify what each area of screen real-estate is for, so it&#8217;s not confusing.</p>
<p class="clear-all">&nbsp;</p>
<h2 id="separate-top-sections"><span class="faint">4</span>Separate top sections</h2>
<p><strong>This means making the top of the screen (the main branding &amp; nav area) distinct from the rest (the main content).</strong></p>
<p>Of course, there&#8217;s nothing new about this approach. It&#8217;s a good idea, and has been used for ever. 	But it&#8217;s being used <strong>more than ever</strong> now, and the distinction is often stronger.</p>
<p>See how clear the &#8220;page-tops&#8221; are in these 6 samples, even at small scale:</p>
<p class="hot-snips"> 	<a href="http://www.simplebits.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-simplebits.jpg" alt="Simplebits" height="200" width="300" /></a> 	<a href="http://intlstore.mozilla.org/index.php?cPath=2" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-mozilla-store.jpg" alt="Mozilla store" height="200" width="300" /></a> 	<a href="http://www.mediconmedia.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-medicon-media.jpg" alt="Medicon Media" height="200" width="300" /></a> 	<a href="http://www.curve2.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-curve2.jpg" alt="Curve2" height="200" width="300" /></a> 	<a href="http://www.alsacreations.fr/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-alsa-creations.jpg" alt="Alsa Crétions" height="200" width="300" /></a> 	<a href="http://www.tonyyoo.com/protolize/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-protolize.jpg" alt="Tony Yoo's Protolize" height="200" width="300" /></a></p>
<h3>Why distinct top sections are good</h3>
<p>The top section says &#8220;Here&#8217;s the top of the page&#8221;. 	Sounds obvious, but it feels good to know clearly where the page starts.</p>
<p>It also starts the site/page experience with a strong, bold statement. 	This is very &#8220;2.0&#8243;-spirited. We like strong, simple, bold attitude.</p>
<p>2 of these top-sections contain just branding (<a href="http://www.tonyyoo.com/protolize/" target="_blank">Protolize</a>, <a href="http://www.mediconmedia.com/" target="_blank">Mediconmedia</a>), 1 has just navigation (Cross Connector), and the remaining 3 have both.</p>
<p>The weakness of <a href="http://www.crossconnector.com/" target="_blank">Cross Connector</a>, in my view, is that the logo comes after the nav. 	I prefer the nav to be high-up, and clear (like e.g. <a href="http://www.simplebits.com/" target="_blank">Simple Bits</a>).</p>
<h3>When &amp; how to use a distinct top section</h3>
<p><strong>On any site, both the main branding and main navigation should be obvious, bold and clear.</strong></p>
<p>So it&#8217;s a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly.</p>
<p>Always put your logo right up the top of the screen. 	I&#8217;d always recommend putting your main navigation right after it.</p>
<p>It&#8217;s definitely a good thing to mark the top of the page with a section that marks out the high-level screen features as separate from the main site content.</p>
<p>The top section should be visually distinct from the rest of the page content. 	The strongest way to differentiate is to use a bold, solid block of different colour or tone, but there are alternatives.</p>
<p>Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.</p>
<p class="hot-snips"> 	<a href="http://www.londonpainconsultants.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-london-pain-consultants.jpg" alt="London Pain Consultants" height="200" width="300" /></a> 	<a href="http://www.exblogs.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-ex-blogs.gif" alt="Ex Blogs" height="200" width="300" /></a></p>
<p> 	And here, the top section contents simply sit boldly outside the main column area.</p>
<p class="hot-snips"> 	<a href="http://newtech.aurum3.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-aurum3.jpg" alt="Aurum Newtech" height="200" width="300" /></a> 	<a href="http://www.steinruckdesign.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-steinruck.jpg" alt="Steinruck Design" height="200" width="300" /></a></p>
<h2 id="solid-areas-of-screen-real-estate"><span class="faint">5</span>Solid areas of screen real-estate</h2>
<p>Leading on from the clearly differentiated top area, you&#8217;ll notice that lots of sites define the various areas of <em>real-estate</em> boldly and clearly.</p>
<p>Real estate comes in various forms, including:</p>
<ul>
<li>Navigation</li>
<li>Background / canvas</li>
<li>Main content area</li>
<li>Other stuff</li>
<li>Callouts / cross-links</li>
</ul>
<p>It&#8217;s possible to design a web page so that these areas are immediately distinct from their neighbours.</p>
<p>The strongest way to do this is using colour.</p>
<p class="hot-snips"> 	<a href="http://www.mediconmedia.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-medicon-media.jpg" alt="Medicon Media" height="200" width="300" /></a> 	<a href="http://www.jeremyboles.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-jeremy-boles.jpg" alt="Jeremy Boles' blog" height="200" width="300" /></a> 	<a href="http://www.exblogs.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-ex-blogs.gif" alt="Ex Blogs" height="200" width="300" /></a> 	<a href="http://www.curve2.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-curve2.jpg" alt="Curve2" height="200" width="300" /></a></p>
<p class="clear-all">&nbsp;</p>
<p>But white space can be just as effective.</p>
<p>The risk with strong colour is that it draws the eye, so it can take attention away from other relevant screen elements.</p>
<p>I think that placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.</p>
<p class="hot-snips"> 	<a href="http://www.apple.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-apple-expo.jpg" alt="Apple Expo" class="text-alongside" height="200" width="300" /></a> 	<a href="http://www.etre.uk.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-etre.jpg" alt="Etre" height="200" width="300" /></a></p>
<p class="clear-all">&nbsp;</p>
<h2 id="simple-nav"><span class="faint">6</span>Simple nav</h2>
<p>Permanent navigation - your global site nav that appears on every page as part of the page template - needs to be clearly identifiable as navigation, and should be easy to interpret, target and select.</p>
<ul>
<li>2.0 design makes <strong>global navigation</strong> large, bold, clean and obvious.</li>
<li><strong>Inline hyperlinks</strong> (links within text) are typically clearly differentiated from normal text.</li>
</ul>
<p class="hot-snips"> 	<a href="http://www.tradingeye.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-tradingeye.jpg" alt="Navigation from TradingEye" height="153" width="470" /></a> 	<a href="http://www.crossconnector.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-crossconnector.gif" alt="Navigation from Cross Connector" height="153" width="470" /></a> 	<a href="http://www.mozilla.com/"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-moz.gif" alt="Navigation from Mozilla" height="153" width="470" /></a> 	<a href="http://www.londonpainconsultants.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-painclinic.jpg" alt="Navigation from London Pain Consultants" height="153" width="470" /></a> 	<a href="http://www.tonyyoo.com/protolize/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-protolize.jpg" alt="Navigation from Protolize" height="153" width="470" /></a></p>
<h3>Why simple navigation is better</h3>
<p>Users need to be able to identify navigation, which tells them various important information:</p>
<ul>
<li>Where they are (in the scheme 	 	 of things)</li>
<li>Where else they can go from here</li>
<li>And what options they have for doing stuff</li>
</ul>
<p>Following the principle of simplicity, and general reduction of noise, the best ways to clarify navigation are:</p>
<ul>
<li>Positioning permanent navigation links apart from content</li>
<li>Differentiating navigation using colour, tone and shape</li>
<li>Making navigation items large and bold</li>
<li>Using clear text to make the purpose of each link unambiguous</li>
</ul>
<h3>How to keep your nav simple</h3>
<p>Simply remember the key: <strong>navigation should be clearly distinguishable from non-navigation</strong>.</p>
<p>Just follow the guidelines above, regarding differentiation through position, colour and clarity.</p>
<p><a href="http://www.webdesignfromscratch.com/navigation.cfm">My article about navigation »</a></p>
<p>Inline hyperlinks should also stand out sufficiently from the text around them.</p>
<p>Check out these snippets. 	In each case, you&#8217;re in do doubt what&#8217;s a link. 	(Personally, I prefer using blue text (non-underlined) which turns to underlined red on hover&#8230;)</p>
<p class="hot-snips" style="text-align: center"> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-nav-hyperlinks1.gif" height="169" width="567" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-nav-hyperlinks2.gif" height="169" width="567" /></p>
<p style="border: 6px solid #e9e9e9; padding: 0.75em; background: #f6f6f6 none repeat scroll 0% 50%; margin-top: 1.5em; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; font-size: 0.9em"> 	<a href="http://savethepixel.org/"><img src="http://www.webdesignfromscratch.com/images/stp-100x.gif" class="text-alongside" alt="Save the Pixel book cover" style="border-style: solid; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187); border-width: 1px 3px 3px 1px; margin: 12px 12px 5px 5px" height="134" width="100" /></a><strong>Read “Save the Pixel - the Art of Simple Web Design”</strong></p>
<p><a href="http://www.webdesignfromscratch.com/save-the-pixel-book.cfm">For the best professional insight into how to create super-simple, effective designs, get Ben Hunt&#8217;s new e-book.</a></p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="display: inline; float: right">
<input src="http://webdesignfromscratch.com/images/paypal-add-to-cart.gif" name="submit" alt="Add to PayPal cart" type="image" />
<input name="notify_url" value="https://www.tradebit.com/paypal/merchantpaypal.php/23861/ipn" type="hidden" />
<input name="bn" value="urlservices.tradebit" type="hidden" />
<input name="add" value="1" type="hidden" />
<input name="cmd" value="_cart" type="hidden" />
<input name="business" value="ebooks@scratchmedia.co.uk" type="hidden" />
<input name="item_name" value="Save the Pixel, the Art of Simple Web Design - ebook (Web Design from Scratch)" type="hidden" />
<input name="item_number" value="2485740" type="hidden" />
<input name="custom" value="tb323861" type="hidden" />
<input name="amount" value="15" type="hidden" />
<input name="no_shipping" value="1" type="hidden" />
<input name="shipping" value="0" type="hidden" />
<input name="shipping2" value="0" type="hidden" />
<input name="handling" value="0" type="hidden" />
<input name="no_note" value="1" type="hidden" />
<input name="currency_code" value="GBP" type="hidden" />
<input name="return" value="http://webdesignfromscratch.com/ebook-thankyou.cfm" type="hidden" />
<input name="cancel_return" value="http://webdesignfromscratch.com/downloads.cfm" type="hidden" /> 	</form>
<p> 		It features 10 brand new chapters teaching pro pixel-saving skills, plus <strong>22 worked example case studies</strong>. 		<strong>Buy it now, only £15</strong></p>
<p class="clear-all">&nbsp;</p>
<p><strong>Howie Jacobson</strong>, author of “Adwords for Dummies”, says&#8230;</p>
<blockquote style="padding-left: 1.5em"><p>“Save the Pixel is <strong>the best book on web design and usability I&#8217;ve ever read</strong>, and one of the best books on internet marketing in general. If you&#8217;re sending traffic to your web site via Google AdWords and you haven&#8217;t discovered the strategies and tactics in Save the Pixel, <strong>I guarantee you&#8217;re throwing away money</strong>.</p>
<p>“It&#8217;s not just information, but a systematic way of designing a site for your customers rather than your web designer&#8217;s online portfolio. <strong>Save the Pixel is the one book I insist my clients read before I&#8217;ll roll out an AdWords campaign for them</strong>.”</p></blockquote>
<h2 id="bold-logos"><span class="faint">7</span>Bold logos</h2>
<p>A clear, bold, strong brand - incorporating attitude, tone of voice, and first impression - is helped by a bold logo.</p>
<p>Here are some (100% scale). 	Notice that logos are tending to be quite large, in line with the general 2.0 principles.</p>
<p><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-logos-wall.gif" alt="Collection of strong logos" height="358" width="662" /></p>
<h3>Why?</h3>
<p>Strong, bold logos say &#8220;This is who we are.&#8221; in a way that we can believe.</p>
<h3>When &amp; how?</h3>
<p>See my <a href="http://www.webdesignfromscratch.com/logos.cfm">articles on logos</a> and <a href="http://www.webdesignfromscratch.com/text_based_logos.cfm">text-based logos</a>.</p>
<p>It&#8217;s very hard to say how to create a good logo, but in brief&#8230;</p>
<p>Your logo should:</p>
<ul>
<li><strong>work visually</strong> in its main context, and any other uses in which it may be used (like flyers or t-shirts?)</li>
<li>be <strong>recognisable</strong> and <strong>distinctive</strong></li>
<li><strong>represent your brand</strong>&#8217;s personality and qualities on first viewing</li>
</ul>
<h2 id="bigger-text"><span class="faint">8</span>Bigger text</h2>
<p><strong>Lots of &#8220;2.0&#8243; web sites have big text, compared to older-style sites.</strong></p>
<p>If you fill the same amount of space with less &#8220;stuff&#8221;, you have more room.</p>
<p>When you&#8217;ve made more room, you can choose to make more important elements bigger than less important elements (if they&#8217;re still there).</p>
<p>Making things bigger makes them more noticeable than lesser elements. 	This effect has been used throughout the history of print design, on headings, title pages and headlines.</p>
<p>Not only does big text stand out, but it&#8217;s also more accessible to more people. That&#8217;s not just people with visual impairments, but also people looking on LCD screens in sunlight, people sitting a little further from the screen, and people just skimming the page. If you think about it, that could be quite a lot of people!</p>
<p class="hot-snips"> 	<a href="http://browsehappy.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-browse-happy.jpg" alt="Browse Happy" class="text-alongside" height="200" width="300" /></a> 	<a href="http://www.37signals.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-37-signals.jpg" alt="37 Signals' home page" class="text-alongside" height="200" width="300" /></a> 	<a href="http://intlstore.mozilla.org/index.php?cPath=2" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-mozilla-store.jpg" alt="Mozilla store" height="200" width="300" /></a> 	<a href="http://newtech.aurum3.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-aurum3.jpg" alt="Aurum Newtech" height="200" width="300" /></a></p>
<p class="clear-all">&nbsp;</p>
<h3>When &amp; how to use big text</h3>
<p><strong>Big text makes most pages more usable for more people, so it&#8217;s a good thing.</strong></p>
<p>Of course, size is relative. 	You can&#8217;t take a normal, busy site, make ALL the text bigger, and make it more usable. 	That might not work, that might be worse.</p>
<p>In order to use big text, you have to make room by simplifying, removing unnecessary elements.</p>
<p>You also need to haave a <strong>reason</strong> to make some text bigger than other text. 	And the text must be meaningful and useful. 	There&#8217;s no point adding some big text just because it&#8217;s oh-so 2.0!</p>
<p>If you need to have a lot of information on a page, and it&#8217;s all relatively equal in importance, then maybe you can keep it all small.</p>
<h2 id="bold-text-introductions"><span class="faint">9</span>Bold text introductions</h2>
<p><strong>Leading on from the big text theme, many sites lead with strong all-text headline descriptions.</strong></p>
<p>These normally set out the site&#8217;s <abbr title="Unique Selling Point">USP</abbr>, <a href="http://en.wikipedia.org/wiki/Elevator_pitch" title="Explained on Wikipedia" target="_blank">elevator pitch</a> or main message.</p>
<p>They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the page&#8217;s visual impact, especially early on in a browsing experience.</p>
<p class="hot-snips"> 	<a href="http://www.apple.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-apple-home.jpg" alt="Apple.com" height="200" width="300" /></a> 	<a href="http://www.37signals.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-37-signals.jpg" alt="37 Signals' home page" height="200" width="300" /></a> 	<a href="http://www.exblogs.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-ex-blogs.gif" alt="Ex Blogs" height="200" width="300" /></a> 	<a href="http://www.crossconnector.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-cross-connector.gif" alt="Cross Connector" height="200" width="300" /></a></p>
<p class="clear-all">&nbsp;</p>
<h3>When &amp; how to use a bold text intro</h3>
<p>Only use one if you&#8217;ve got something bold to say. v (If you haven&#8217;t got something bold to say, maybe it&#8217;s worth having a think about the purpose of your page/site and coming up with somethign worth saying boldly!)</p>
<p>If you have a simple message that you want to be seen first, go ahead and headline it. 	Make it clear by putting it against a relatively plain background.</p>
<h2 id="strong-colours"><span class="faint">10</span>Strong colours</h2>
<p><strong>Bright, strong colours draw the eye.</strong> 	Use them to <strong>divide the page</strong> into clear sections, and to <strong>highlight important elements</strong>.</p>
<p>When you have a simple, stripped-out design, you can use a bit of intense colour to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice.</p>
<p class="hot-snips"> 	<a href="http://www.treomobile.co.uk/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-treo.jpg" alt="Treo mobile" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.treomobile.com/">The Treo Mobile site</a> uses 3 areas of strong colour to mark out and advertise 3 main areas of the site.</p>
<p>The background colour makes it clear that this isn&#8217;t <em>main content</em>, and large, bold title text helps you see quickly what&#8217;s in each one, so you can decide whether it interests you.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="background: transparent none repeat scroll 0% 50%; margin-top: 1em; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"> 	<a href="http://www.colorschemer.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-colorschemer.gif" alt="Colorschemer" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.colorschemer.com/">Colorschemer</a> sections the page with bands of intense, bright, cheerful colour, set against a more neutral background.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="margin-top: 1em"> 	<a href="http://www.apple.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-apple-home.jpg" alt="Apple.com home" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.apple.com/">Apple&#8217;s design</a> has always used a great balanced combination of tone (darks), rich effects and colour to draw the eye.</p>
<p>It may be the most perfectly designed web site there is, in my opinion.</p>
<p>In this image, the intense dark areas and strong colour are used sparingly to <strong>pick out important content</strong>.</p>
<p class="clear-all">&nbsp;</p>
<h4> 	Colour is also a great medium for communicating brand values</h4>
<p class="hot-snips"> 	<a href="http://www.realmeat.co.uk/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-real-meat.jpg" alt="Real Meat" class="text-alongside" height="200" width="300" /></a> 		Here, the colour isn&#8217;t bright, but it is strong, partly because of the amount of green used.</p>
<p>This design uses green to communicate the values of &#8220;quality&#8221; and &#8220;health&#8221;.</p>
<p><strong>Note: site design doesn&#8217;t match this image!</strong></p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="margin-top: 1em"> 	<a href="http://www.gearforgirls.co.uk/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-gear-for-girls.jpg" alt="Gear for girls" class="text-alongside" height="200" width="300" /></a> 		This site sells outdoor clothes exclusively for females, and the soft colours reinforce the chosen brand personality.</p>
<p class="clear-all">&nbsp;</p>
<h4> 	Be careful to use intense colour on or around high-value features</h4>
<p class="hot-snips"> 	<a href="http://www.giddykippa.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-giddykippa.jpg" alt="Giddy Kippa" class="text-alongside" height="200" width="300" /></a> 		A nice, effective page design is compromised by the use of large areas of intense colour <strong>outside</strong> the main page area.</p>
<p>The result is that the eye is drawn <strong>away</strong> from the real content.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="margin-top: 1em"> 	<a href="http://newtech.aurum3.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-aurum3.jpg" alt="Aurum Newtech" class="text-alongside" height="200" width="300" /></a> 		<a href="http://newtech.aurum3.com/" target="_blank">The Aurum Newtech site</a> risks the same effect, but the colour is just pale enough to keep the content noticeable.</p>
<p>Also, the big, bold and well-spaced content elements help draw attention away from the &#8220;attractive&#8221; background.</p>
<p class="clear-all">&nbsp;</p>
<h4>Remember to use sparingly</h4>
<p>If you&#8217;re using strong colours to attract the eye, it only works if there&#8217;s lots of area that isn&#8217;t strongly coloured.</p>
<p>If <strong>everything</strong> is trying to attract the eye, then the eye just gets confused, and the site will feel confusing and chaotic.</p>
<h2 id="rich-surfaces"><span class="faint">11</span>Rich surfaces</h2>
<p>Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.</p>
<p>We all know that these little touches just feel nice, but we may not know why.</p>
<p>Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and &#8220;finished&#8221;.</p>
<p>They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors. Making stuff look solid and real can make it look &#8220;touchable&#8221;, which is likely to appeal.</p>
<p class="hot-snips"> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-apple.jpg" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-i-hate-clowns-redesign.jpg" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-sinelogic.jpg" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-shopify.gif" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-webtalent.jpg" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-giddykippa.jpg" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-enhanced-labs.jpg" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-aurum.jpg" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-ruby-containers.gif" height="67" width="179" /></p>
<p class="clear-all">&nbsp;</p>
<h3>When &amp; how to use rich surfaces</h3>
<p>The golden rule here is to use with care, and not to overdo it.</p>
<p>As I explain in <a href="http://www.webdesignfromscratch.com/3d_effects.cfm">the tutorial on 3D Effects</a>, these effects should not be applied to everything.</p>
<p class="comment"> 		Like any of these techniques, a rich surface may add value to your design when used sensitively and appropriately.</p>
<p>If your navigation/icon/logo/layout sucks fundamentally, <strong>you can&#8217;t polish your way out</strong>. Get the fundamentals right first.</p>
<p>It can also be important to maintain a consistent light-source. Although this can get more complex with the illusion of back-lit diffusion in buttons etc., you still know whether an overall design <em>feels</em> consistent.</p>
<p>3D effects can also make elements seem to stand out from the page, but only if the rest of the page is <em>relatively</em> flat.</p>
<p>Avoid trying to make your entire design 3D-realistic because:</p>
<ul>
<li>It&#8217;s more work</li>
<li>It will increase the overall size of the page assets</li>
<li> 		And <strong>you don&#8217;t need to.</strong> 3D effects use lots of different pixels, and different pixels should be used deliberately to draw the visitor&#8217;s attention to key content elements, or to enhance &#8220;soft&#8221; informational aspects. A little goes a long way.</li>
</ul>
<h2 id="gradients"><span class="faint">12</span>Gradients</h2>
<p><strong>Web 2.0 design has more gradients than the Alps.</strong></p>
<h3>Why gradients are so useful</h3>
<p>Gradients soften areas that would otherwise be flat colour/tone.</p>
<p class="hot-snips"> 	<a href="http://www.circografico.com.ar/portfolio/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-3d-alex-dukal-folio.jpg" alt="Artypapers" class="text-alongside" height="200" width="300" /></a> 		They can create the illusion of a non-flat surface, used to good effect on <a href="http://www.circografico.com.ar/portfolio/">Alex Dukal&#8217;s portfolio</a>.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="background: transparent none repeat scroll 0% 50%; margin-top: 1em; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"> 	<a href="http://www.aurum3.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-3d-aurum.jpg" alt="Aurum homepage" class="text-alongside" height="200" width="300" /></a> 		Gradients can be used to fade a colour into a lighter or darker tone, which can help create <strong>mood</strong>.</p>
<p class="clear-all">&nbsp;</p>
<p class="hot-snips" style="margin-top: 1em"> 	<a href="http://www.artypapers.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-artypapers.jpg" alt="Artypapers" class="text-alongside" height="200" width="300" /></a> 		In page backgrounds, they may also create an <strong>illusion of distance</strong>.</p>
<p>A common gradient combo is blue-to-white, which evokes the effect of <a href="http://en.wikipedia.org/wiki/Aerial_perspective" title="More on Wikipedia">aerial perspective</a>, creating the sense that the background fades away towards the horizon.</p>
<p class="clear-all">&nbsp;</p>
<p>They are commonly used at the very top of page backgrounds, where they help denote the boundary of the viewable area.</p>
<p class="hot-snips"> 	<a href="http://www.colorschemer.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-colorschemer.gif" alt="Colorschemer" height="200" width="300" /></a> 	<a href="http://www.circografico.com.ar/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-alex-dukal-small.jpg" alt="Alex Dukal, illustrator" height="200" width="300" /></a></p>
<p class="clear-all">&nbsp;</p>
<p>They&#8217;re also an integral part of drop-shadows, and the inner-glows and specular highlights you see on glass- or plastic-style buttons.</p>
<p>Note that gradients usually work best when <strong>juxtaposed with areas of flat colour or tone</strong>.</p>
<p class="hot-snips" style="background: transparent none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial"> 	<a href="http://www.curve2.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-curve2.jpg" alt="Curve2" class="text-alongside" height="200" width="300" /></a> 		<a href="http://www.curve2.com/" target="_blank">On the Curve2 homepage</a>, the gradients are more effective because each one is positioned adjacent to a flat white or grey section.</p>
<p>It&#8217;s common to find gradients enhancing the base colour (using mix effects like color-burn or overlay in Photoshop), which create subtly different hues.</p>
<p>Here, the highlighted green colour is warmer and friendlier than the darker base colour. 		The overall effect is both softer and richer.</p>
<p class="clear-all">&nbsp;</p>
<h2 id="reflections"><span class="faint">13</span>Reflections</h2>
<p>The illusion of reflection is one of the most common applications on gradients.</p>
<p>These commonly come in 2 kinds:</p>
<ul>
<li>Highlights caused by light reflecting on shiny surfaces</li>
<li>That shiny table effect!</li>
</ul>
<h3>Specular highlights</h3>
<p>Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years.</p>
<p>I don&#8217;t know where the trends started, but Apple&#8217;s web site must have been one of the most influential, preceding their <a href="http://en.wikipedia.org/wiki/Aqua_%28user_interface%29" target="_blank" title="More on Wikipedia">Aqua interface look &amp; feel</a>.</p>
<p>Here are some examples:</p>
<p class="hot-snips"> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-apple.jpg" class="text-alongside" height="67" width="179" /> 		The classic <a href="http://www.apple.com/" target="_blank">Apple.com</a> <strong>shiny plastic</strong> tabs, still in use today.</p>
<p>These use highlights caused by a light source above the tabs, combined with an inner, diffuse glow that creates the plastic effect.</p>
<p class="clear-all">&nbsp;</p>
<p><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-i-hate-clowns-redesign.jpg" class="text-alongside" height="67" width="179" /> 		These tabs, from one of my recent redesigns, have a polished (from the strong white highlight) <strong>carbon-fibre</strong> appearance. 		The carbon effect comes from the warm diagonal-stroke pattern from the icon&#8217;s glow.</p>
<p class="clear-all">&nbsp;</p>
<p><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-enhanced-labs.jpg" class="text-alongside" height="67" width="179" /> More nice shiny plastic. Notice how the reflections fall off at the edge of the shape, which create the illusion of rounded edges.</p>
<p class="clear-all">&nbsp;</p>
<p><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-ruby-containers.gif" class="text-alongside" height="67" width="179" /> 		Similar effect on a square shape looks like a badge.</p>
<p>The non-horizontal angle creates a sense of dynamism.</p>
<p class="clear-all">&nbsp;</p>
<p><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-shiny-button.jpg" class="text-alongside" height="67" width="179" /> 		This shiny button from <a href="http://www.cafepress.com/" target="_blank">cafepress.com</a> uses a rounded reflection that suggests a wide light source coming off a rounded surface.</p>
<p class="clear-all">&nbsp;</p>
<p><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-surface-mediatemple1.jpg" class="text-alongside" height="67" width="179" /> 		This button from <a href="http://www.mediatemple.net/" target="_blank">web hosts Mediatemple</a> has a more diffuse reflection, suggesting a matt glass finish.</p>
<p class="clear-all">&nbsp;</p>
<h3>That shiny table effect!</h3>
<p>Pioneered by Apple again (I&#8217;m sure). This is a really nice effect which is so prevalent now, it&#8217;s in danger of being overused, now starting to look tired and is falling out of favour with designers.</p>
<p class="comment"> Remember, of course, that web designers are usually more sensitive to these things, so even if we&#8217;re getting turned off by it, the general public may still think it&#8217;s cool for some time to come.</p>
<p class="hot-snips">
<p style="width: 50%; float: left"> 		<a href="http://www.creixems.com/home/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-shinytable-2.jpg" class="text-alongside" height="100" width="100" /></a>The standard Apple look. Greyed-out and fading on a white base.</p>
<p style="width: 50%; float: left"> 		<a href="http://www.curve2.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-shinytable-1.jpg" class="text-alongside" height="100" width="100" /></a>On a coloured background</p>
<p style="width: 50%; float: left"> 		<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-shinytable-3.jpg" class="text-alongside" height="100" width="100" />Fading out to either side (my one this, not published yet)</p>
<p style="width: 50%; float: left"> 		<a href="http://www.stonewall.co.za/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-shinytable-4.jpg" class="text-alongside" height="100" width="100" /></a>More extreme angle, and a rich layered effect reflecting the colour of the solid object</p>
<p class="clear-all">&nbsp;</p>
<p><a href="http://www.photoshoplab.com/web20-design-kit.html" target="_blank">Here&#8217;s how to do it (from photoshoplab.com) »</a></p>
<h2 id="cute-icons"><span class="faint">14</span>Cute icons</h2>
<p><strong>Icons play an important role in Web 2.0 design. 	Today we use fewer, better icons that carry more meaning.</strong></p>
<p>Icons can be useful when they&#8217;re <strong>easily recognisable</strong> and carry a <strong>clear meaning</strong>. 	In lots of other cases, a simple word is more effective.</p>
<p>In the old days, icons were sometimes overused. 	It seemed that everyone wanted an icon for every navigation link or tab. 	Now, we use clear text more extensively, and are less ready to litter a page with icons.</p>
<p>Where 2.0 designers do employ icons, they are reserved for <strong>higher-value spots</strong>, where .</p>
<p>Simpler, more spacious designs demand less attention and allow for a richer icons.</p>
<p>Some examples, demonstrating various attributes.</p>
<h4>Simple and clean</h4>
<p class="hot-snips"> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-hireus.gif" border="0" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-scribble.gif" border="0" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-7.gif" border="0" height="67" width="179" /></p>
<p class="clear-all">&nbsp;</p>
<h4>Cute and quirky</h4>
<p>Do not necessarily have to feature tiny hills!</p>
<p class="hot-snips" style="margin-top: 1em"> 	<a href="http://www.37signals.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-10.gif" alt="37 Signals" border="0" height="67" width="179" /></a> 	<a href="http://overture21.com/" target="_blank"><img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-6.jpg" alt="Overture" border="0" height="67" width="179" /></a> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-ihc.jpg" border="0" height="67" width="179" /></p>
<p class="clear-all">&nbsp;</p>
<h4>Richly detailed</h4>
<p>Creatively inspired by Mac OSX. 	See <a href="http://www.enhancedlabs.com/main/showroom.php" target="_blank">Enhanced Labs</a> for a great showcase.</p>
<p class="hot-snips"> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-8.gif" border="0" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-4.jpg" border="0" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-13.jpg" border="0" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-14.gif" border="0" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-15.gif" border="0" height="67" width="179" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-icons-17.jpg" border="0" height="67" width="179" /></p>
<p class="clear-all">&nbsp;</p>
<h2 id="star-flashes"><span class="faint">15</span>Star flashes</h2>
<p>These are the star-shaped labels that you see stuck on web pages, alerting you to something important.</p>
<p>They work by evoking price stickers in low-cost stores. 	For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites.</p>
<p>They can really work well, but of course should only be used to draw attention to something important.</p>
<p>I&#8217;d recommend only using one on a page (at most!).</p>
<p>Another style that&#8217;s seeming over-used, and will probably run its course over the next year.</p>
<p class="hot-snips"> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes1.jpg" border="0" height="100" width="100" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes2.gif" border="0" height="100" width="100" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes3.jpg" border="0" height="100" width="100" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes4.gif" border="0" height="100" width="100" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes5.gif" border="0" height="100" width="100" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes6.gif" border="0" height="100" width="100" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes7.jpg" border="0" height="100" width="100" /> 	<img src="http://www.webdesignfromscratch.com/snippets/20-article/20-flashes8.jpg" border="0" height="100" width="100" /></p>
]]></content:encoded>
			<wfw:commentRss>http://articles.pakcreations.com/web20-how-to-design-style-guide/feed</wfw:commentRss>
		</item>
		<item>
		<title>Using ActiveMQ JMS from C#</title>
		<link>http://articles.pakcreations.com/using-activemq-jms-from-c</link>
		<comments>http://articles.pakcreations.com/using-activemq-jms-from-c#comments</comments>
		<pubDate>Mon, 25 Feb 2008 11:25:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Apache]]></category>

	<!-- AutoMeta Start -->
	<category>writeline</category>
	<category>receivesession</category>
	<category>ikvm</category>
	<category>receiveconnection</category>
	<category>protected</category>
	<category>mainclass</category>
	<category>connectionfactory</category>
	<category>messagecount</category>
	<!-- AutoMeta End -->
	
		<guid isPermaLink="false">http://articles.pakcreations.com/using-activemq-jms-from-c</guid>
		<description><![CDATA[Wishing to have a publish/subscribe message queue available in .NET, I have looking for ways to allow .NET to talk to a JMS implementation. After reading the article An Introduction to IKVM by Avik Sengupta, I took the latest release of ActiveMQ and IKVM, complied the jar files (as described in the article), and modified [...]]]></description>
			<content:encoded><![CDATA[<p>Wishing to have a publish/subscribe message queue available in .NET, I have looking for ways to allow .NET to talk to a JMS implementation. After reading the article <a href="http://www.onjava.com/pub/a/onjava/2004/08/18/ikvm.html">An Introduction to IKVM</a> by Avik Sengupta, I took the latest release of <a href="http://activemq.codehaus.org/">ActiveMQ</a> and <a href="http://www.ikvm.net/">IKVM</a>, complied the jar files (as described in the article), and modified one of the examples from the ActiveMQ distribution and created a C# version (see below). Everything seems to work. The example submits items to the queue, and them retrieves them.</p>
<pre style="color: #000000"><span style="color: #0000ff">using</span> System;
<span style="color: #0000ff">using</span> System.Threading;
<span style="color: #0000ff">using</span> ikvm.lang;
<span style="color: #0000ff">using</span> org.codehaus.activemq;
<span style="color: #0000ff">using</span> org.codehaus.activemq.util;
<span style="color: #0000ff">using</span> org.codehaus.activemq.message;
<span style="color: #0000ff">using</span> javax.jms;
<span style="color: #0000ff">using</span> java.util;

<span style="color: #0000ff">namespace</span> DefaultNamespace
{
    <span style="color: #0000ff">class</span> MainClass : MessageListener
    {
        <span style="color: #0000ff">protected</span> <span style="color: #0000ff">int</span> messageCount = 100;
        <span style="color: #0000ff">protected</span> String[] data;
        <span style="color: #0000ff">protected</span> ActiveMQConnectionFactory connectionFactory;
        <span style="color: #0000ff">protected</span> Session session;
        <span style="color: #0000ff">protected</span> MessageConsumer consumer;
        <span style="color: #0000ff">protected</span> MessageProducer producer;
        <span style="color: #0000ff">protected</span> Destination destination;
        <span style="color: #0000ff">protected</span> Connection connection;

        <span style="color: #0000ff">protected</span> Connection receiveConnection;
        <span style="color: #0000ff">protected</span> Session receiveSession;

        <span style="color: #0000ff">protected</span> List messages = Collections.synchronizedList(<span style="color: #0000ff">new</span> ArrayList());
        <span style="color: #0000ff">protected</span> <span style="color: #0000ff">bool</span> topic = <span style="color: #0000ff">true</span>;

        <span style="color: #0000ff">protected</span> ActiveMQMessage createMessage()
        {
            <span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span> ActiveMQMessage();
        }

        <span style="color: #0000ff">protected</span> Destination createDestination(String subject)
        {
            <span style="color: #0000ff">return</span> <span style="color: #0000ff">new</span> ActiveMQTopic(subject);
        }

        <span style="color: #0000ff">public</span> <span style="color: #0000ff">void</span> testSendReceive()
        {
            messages.clear();

            <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> i = 0; i &lt; data.Length; i++)
            {
                Message message = session.createTextMessage(data[i]);

                Console.WriteLine(<span style="color: #848284">&#8220;About to send a message: &#8220;</span> + message + <span style="color: #848284">&#8221; with text: &#8220;</span> + data[i]);

                producer.send(destination, message);
            }

            <span style="color: #008200">// lets wait a little while</span>
            Thread.Sleep(4000);

            Console.WriteLine(<span style="color: #848284">&#8220;should have received a message: {0} {1} {2}&#8221;</span>, messages, data.Length, messages.size());

            <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> i = 0; i &lt; data.Length; i++)
            {
                TextMessage received = (TextMessage) messages.get(i);
                String text = received.getText();

                Console.WriteLine(<span style="color: #848284">&#8220;Received Text: &#8220;</span> + text);

            }
        }

        <span style="color: #0000ff">public</span> MainClass()
        {
            topic = <span style="color: #0000ff">true</span>;

            data = <span style="color: #0000ff">new</span> String[messageCount];
            <span style="color: #0000ff">for</span> (<span style="color: #0000ff">int</span> i = 0; i &lt; messageCount; i++)
            {
                data[i] = <span style="color: #848284">&#8220;Text for message: &#8220;</span> + i + <span style="color: #848284">&#8221; at &#8220;</span> + DateTime.Now.ToLongTimeString();
            }

            connectionFactory = <span style="color: #0000ff">new</span> ActiveMQConnectionFactory();
            connectionFactory.setBrokerURL(<span style="color: #848284">&#8220;vm://localhost&#8221;</span>);
            connectionFactory.setUseEmbeddedBroker(<span style="color: #0000ff">true</span>);

            connection = connectionFactory.createConnection();
            receiveConnection = connectionFactory.createConnection();

            Console.WriteLine(<span style="color: #848284">&#8220;Created connection: &#8220;</span> + connection);

            session = connection.createSession(<span style="color: #0000ff">false</span>, 1);
            receiveSession = receiveConnection.createSession(<span style="color: #0000ff">false</span>, 1);

            Console.WriteLine(<span style="color: #848284">&#8220;Created session: &#8220;</span> + session);
            producer = session.createProducer(<span style="color: #0000ff">null</span>);

            Console.WriteLine(<span style="color: #848284">&#8220;Created producer: &#8220;</span> + producer);

            <span style="color: #0000ff">if</span> (topic)
            {
                destination = receiveSession.createTopic(<span style="color: #848284">&#8220;FOO.BAR&#8221;</span>);
            }
            <span style="color: #0000ff">else</span>
            {
                destination = session.createQueue(<span style="color: #848284">&#8220;FOO.QUEUE&#8221;</span>);
            }

            consumer = receiveSession.createConsumer(destination);
            consumer.setMessageListener(<span style="color: #0000ff">this</span>);
            receiveConnection.start();
                connection.start();

            Console.WriteLine(<span style="color: #848284">&#8220;Created connection: &#8220;</span> + connection);

            testSendReceive();

            Console.WriteLine(<span style="color: #848284">&#8220;Dumping stats&#8230;&#8221;</span>);
            connectionFactory.getFactoryStats().dump(<span style="color: #0000ff">new</span> IndentPrinter());

            Console.WriteLine(<span style="color: #848284">&#8220;Closing down connection&#8221;</span>);

            session.close();
            receiveSession.close();

            connection.close();
            receiveConnection.close();

            connectionFactory.stop();
            connection.close();

        }

        <span style="color: #0000ff">public</span> <span style="color: #0000ff">void</span> onMessage(Message message)
        {
            Console.WriteLine(<span style="color: #848284">&#8220;Received message: &#8220;</span> + message);

            messages.add(message);
        }

        <span style="color: #0000ff">public</span> <span style="color: #0000ff">static</span> <span style="color: #0000ff">void</span> Main(<span style="color: #0000ff">string</span>[] args)
        {
            MainClass mc = <span style="color: #0000ff">new</span> MainClass();
        }
    }
}</pre>
]]></content:encoded>
			<wfw:commentRss>http://articles.pakcreations.com/using-activemq-jms-from-c/feed</wfw:commentRss>
		</item>
		<item>
		<title>Magic with JMS, MDBs, and ActiveMQ in Geronimo</title>
		<link>http://articles.pakcreations.com/magic-with-jms-mdbs-and-activemq-in-geronimo</link>
		<comments>http://articles.pakcreations.com/magic-with-jms-mdbs-and-activemq-in-geronimo#comments</comments>
		<pubDate>Mon, 25 Feb 2008 11:23:53 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Apache]]></category>

	<!-- AutoMeta Start -->
	<category></category>
	<!-- AutoMeta End -->
	
		<guid isPermaLink="false">http://articles.pakcreations.com/magic-with-jms-mdbs-and-activemq-in-geronimo</guid>
		<description><![CDATA[Apache Geronimo is the workhorse open source Java™ 2 Platform, Enterprise Edition (J2EE) 1.4 server container with an open framework that&#8217;s ready to host a variety of existing servers and services. ActiveMQ is a proven best-of-breed, open source Java Messaging Service (JMS) engine with a Swiss-army-knife arsenal of features and connectivity options. When you marry [...]]]></description>
			<content:encoded><![CDATA[<blockquote>Apache Geronimo is the workhorse open source Java™ 2 Platform, Enterprise Edition (J2EE) 1.4 server container with an open framework that&#8217;s ready to host a variety of existing servers and services. ActiveMQ is a proven best-of-breed, open source Java Messaging Service (JMS) engine with a Swiss-army-knife arsenal of features and connectivity options. When you marry the two, magic happens! Sing Li takes you on a grand tour of this symbiotic relationship, providing example code to help you get started writing JMS applications and creating message-driven beans (MDBs) with Geronimo immediately.</p></blockquote>
<p><!--START RESERVED FOR FUTURE USE INCLUDE FILES--><script language="JavaScript" type="text/javascript"> <!-- if (document.referrer&#038;&#038;document.referrer!="") {     // document.write(document.referrer);    var q = document.referrer;    var engine = q;    var isG = engine.search(/google\.com/i);    var searchTerms;    //var searchTermsForDisplay;    if (isG != -1) {  	   var i = q.search(/q=/); 	   var q2 = q.substring(i+2); 	   var j = q2.search(/&#038;/); 	   j = (j == -1)?q2.length:j; 	   searchTerms = q.substring(i+2,i+2+j); 	   if (searchTerms.length != 0) { 	       searchQuery(searchTerms); 	       document.write("</p>
<div id=\"contents\"></div>
<p>&#8220;); 	   }    }  } //&#8211;> </script><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->The JMS API is an integral part of the J2EE platform, enabling message-based communications between loosely coupled components. Messages can be sent and received throughout the J2EE stack between clients, Web-tier components, business-tier Enterprise JavaBeans (EJBs), and Enterprise Information System (EIS)-tier services. These messages are sent asynchronously, where the sender continues with other application logic once the message is sent, and a message broker is responsible for delivering the message on behalf of the sender. Messages can be sent and received between specific endpoints (sender and recipients), or passed anonymously between producer(s) and consumer(s) using a publish/subscribe interaction model. Within the J2EE framework, components communicating through JMS can leverage the security and transaction capabilities provided by the container. Geronimo supports this vital API by integrating an open source project called <em>ActiveMQ</em>.</p>
<p>This article explores the ActiveMQ integration within Geronimo. You&#8217;ll see how Geronimo benefits from the integration and how ActiveMQ&#8217;s capabilities are enhanced when hosted inside Geronimo. A hands-on example, which you can download from this article, reveals how to code clients and Geronimo components that communicate through JMS. Another example shows you how to create versatile MDBs within Geronimo.</p>
<p><a name="N10079"></a><span class="atitle">ActiveMQ: a best-of-breed, open source JMS implementation</span></p>
<p>ActiveMQ is a mature and feature-rich JMS server, or <em>message broker</em> in JMS terminology.  Housed at Codehaus (see <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#resources">Resources</a>), ActiveMQ supports a large variety of transports (such as TCP, SSL, UDP, multicast, intra-JVM, and NIO) and client interactions (such as push, pull, and publish/subscribe). With a sizable existing user base, the ActiveMQ server can work in a completely stand-alone state, independent of any container (J2EE or otherwise), or in conjunction with a J2EE server host, such as Geronimo.</p>
<p>When operated within Geronimo, ActiveMQ provides support for MDBs, which are EJBs that consume JMS messages. The asynchronous nature of JMS enables MDBs to be activated on demand by the container to perform work within the J2EE server on behalf of clients. Geronimo benefits greatly from ActiveMQ&#8217;s rich client support. Unlike session or entity EJBs, MDBs are not called through rigid EJB interfaces. Instead, a client can invoke MDB services by simply sending a JMS message to a destination. This significantly simplifies the coding of clients that consume EJB-based services. In fact, Geronimo inherits the ability to provide services to non-J2EE clients &#8212; those supported by the stand-alone ActiveMQ server.</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="http://www.ibm.com/i/v14/rules/blue_rule.gif" height="1" width="100%" /></td>
</tr>
</table>
<table class="no-print" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><img src="http://www.ibm.com/i/v14/icons/u_bold.gif" border="0" height="16" width="16" /></td>
<td align="right" valign="top"><a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#main" class="fbox"><strong>Back to top</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
<p><a name="N1008D"></a><span class="atitle">Wrapping the ActiveMQ message broker in a GBean</span></p>
<p>The ActiveMQ message broker is designed to be embeddable. Geronimo takes advantage of this capability. By providing a GBean container that wraps an embedded message broker, the ActiveMQContainerGBean is created. Other components of the ActiveMQ message broker are also wrapped as GBeans, as you will see shortly. <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#figure1">Figure 1</a> illustrates how the ActiveMQContainerGBean embeds the ActiveMQ message broker.<br />
<a name="#figure1"></a><strong>Figure 1. The ActiveMQContainerGBean</strong><br />
<img src="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/figure1.gif" alt="The ActiveMQContainerGBean" height="221" width="329" /><br />
By wrapping the ActiveMQ message broker in a GBean, the broker&#8217;s life cycle can now be managed through Geronimo. Specifically, you can deploy, start, and manage instances of ActiveMQ message brokers using Geronimo deployer and management tools. The configurable properties of the message broker are exposed as GBean properties. In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#figure1">Figure 1</a>, the ActiveMQContainerGBean wraps the ActiveMQ message broker and provides life cycle management and configuration services. In addition to life cycle and configuration support, Geronimo provides the persistence support for durable messages. The current ActiveMQ server configuration uses the default Derby RDBMS instance to handle persistence.</p>
<p>The default J2EE server assembly supplied by Geronimo has an instance of the ActiveMQ message broker integrated. This assembly starts the message broker when the server is started, typically using the command line:</p>
<table border="0" cellpadding="0" cellspacing="0" width="68%">
<tr>
<td class="code-outline">
<pre class="displaycode">java -jar binserver.jar</pre>
</td>
</tr>
</table>
<p>To see how this instance is configured, examine the system-activemq-plan.xml deployment plan in the plan directory of the Geronimo source code distribution. You&#8217;ll see how the ActiveMQContainerGBean and other related ActiveMQ components are configured. <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list1">Listing 1</a> shows the relevant segment in this deployment plan.<br />
<a name="#list1"></a><strong>Listing 1. Configuring the ActiveMQContainerGBean in the system-activemq-plan.xml  deployment plan</strong></p>
<table border="0" cellpadding="0" cellspacing="0" width="68%">
<tr>
<td class="code-outline">
<pre class="displaycode">&lt;?xml version="1.0" encoding="UTF-8"?&gt;
&lt;configuration
    xmlns="http://geronimo.apache.org/xml/ns/deployment"
    configId="org/apache/geronimo/ActiveMQServer"
    parentId="org/apache/geronimo/SystemDatabase"&gt;
...
&lt;gbean name="ActiveMQ"
  class="org.activemq.gbean.ActiveMQContainerGBean"&gt;
  &lt;attribute name="brokerName"&gt;possibly-unique-broker&lt;/attribute&gt;
  &lt;reference name="persistenceAdapter"&gt;
  &lt;gbean-name&gt;geronimo.server:j2eeType=JMSPersistence,name=ActiveMQ.cache,*&lt;/gbean-name&gt;
  &lt;/reference&gt;
 &lt;/gbean&gt;

&lt;gbean name="ActiveMQ.cache"
class="org.activemq.store.cache.SimpleCachePersistenceAdapterGBean"&gt;
&lt;attribute name="cacheSize"&gt;10000&lt;/attribute&gt;
&lt;reference name="longTermPersistence"&gt;
&lt;gbean-name&gt;geronimo.server:j2eeType=JMSPersistence,name=ActiveMQ.journal,*&lt;/gbean-name&gt;
&lt;/reference&gt;
&lt;/gbean&gt;

&lt;gbean name="ActiveMQ.jdbc"
class="org.activemq.store.jdbc.JDBCPersistenceAdapterGBean"&gt;
  &lt;reference name="dataSource"&gt;
&lt;gbean-name&gt;geronimo.server:J2EEApplication=null,J2EEServer=geronimo,
JCAResource=org/apache/geronimo/SystemDatabase,j2eeType=JCAManagedConnectionFactory,
name=SystemDatasource&lt;/gbean-name&gt;
&lt;/reference&gt;
&lt;/gbean&gt;

&lt;gbean name="ActiveMQ.tcp.${PlanServerHostname}.${PlanActiveMQPort}"
  class="org.activemq.gbean.ActiveMQConnectorGBean"&gt;
  &lt;attribute name="url"&gt;tcp://${PlanServerHostname}:${PlanActiveMQPort}&lt;/attribute&gt;
   &lt;reference
    name="activeMQContainer"&gt;
&lt;gbean-name&gt;geronimo.server:j2eeType=JMSServer,name=ActiveMQ,*&lt;/gbean-name&gt;
&lt;/reference&gt;
  &lt;/gbean&gt;

&lt;gbean name="ActiveMQ.vm.localhost" class="org.activemq.gbean.ActiveMQConnectorGBean"&gt;
  &lt;attribute name="url"&gt;vm://localhost&lt;/attribute&gt;
  &lt;reference name="activeMQContainer"&gt;
  &lt;gbean-name&gt;geronimo.server:j2eeType=JMSServer,name=ActiveMQ,*&lt;/gbean-name&gt;
  &lt;/reference&gt;
&lt;/gbean&gt;</pre>
</td>
</tr>
</table>
<p>In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list1">Listing 1</a>, the first GBean sets up the ActiveMQ message broker. The GBean has an attribute with a reference to a persistence adapter, and points to the second GBean. The second GBean wraps an instance of the ActiveMQ in-memory cache. This second GBean references ActiveMQ&#8217;s persistence component for long-term persistence. The third GBean wires a JDBC datasource for the persistence, pointing to the SystemDatasource &#8212; a Derby RDBMS instance. The last two GBeans set up the following two transports for accessing the message broker:</p>
<ul>
<li>A TCP transport, by default at the localhost and port 61616</li>
<li>An in-VM transport, by default mapped to vm://localhost</li>
</ul>
<p>If you ever need to change the configuration of this instance, you can modify this system-activemq-plan.xml file and then redeploy the org/apache/geronimo/ActiveMQServer configuration.</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="http://www.ibm.com/i/v14/rules/blue_rule.gif" height="1" width="100%" /></td>
</tr>
</table>
<table class="no-print" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><img src="http://www.ibm.com/i/v14/icons/u_bold.gif" border="0" height="16" width="16" /></td>
<td align="right" valign="top"><a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#main" class="fbox"><strong>Back to top</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
<p><a name="N100E0"></a><span class="atitle">Accessing the message broker through JCA 1.5 resource adapter</span></p>
<p>An application component (such as a servlet, JSP, or EJB) utilizing JMS must access the message broker through a library that implements the JMS API. This API is provided by Geronimo. To implement this API in a way that will work with any JMS provider (such as a message broker), Geronimo supports the J2EE Connector (JCA) 1.5 specification. The JCA 1.5 specification details the contracts required between the application server (Geronimo) and the resource adapter (RA) &#8212; a <em>driver</em> supplied by ActiveMQ. (See <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#resources">Resources</a> for an article on JCA 1.5.) Managed application components hosted in Geronimo access the ActiveMQ message broker only through this RA. This is another major benefit that ActiveMQ brings to the table &#8212; it has a ready-for-integration JCA 1.5-compliant RA implementation. <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig2">Figure 2</a> shows the ActiveMQ JCA 1.5-compliant RA.<br />
<a name="#fig2"></a><strong>Figure 2. The ActiveMQ JCA 1.5-compliant RA</strong><br />
<img src="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/figure2.gif" alt="The ActiveMQ JCA 1.5 compliant RA" height="285" width="292" /><br />
In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig2">Figure 2</a>, you can see that the ActiveMQ RA interacts with Geronimo’s security and transaction system through well-defined JCA 1.5 system contracts. The ActiveMQ RA supports both outbound connections (JMS calls out to the message broker), and inbound connections (ActiveMQ-originated calls call into MDBs). For outbound connections, the message-sending application can enroll the JMS provider (ActiveMQ in this case) as a part of a distributed transaction, perhaps involving another resource manager (such as an RDBMS). For inbound connections, typically activating MDBs, the transaction is started by Geronimo. In the current JCA 1.5 specification, and in the Geronimo implementation, inbound connections do not interact with the container’s security subsystem.</p>
<p>The WorkManager contract is part of JCA 1.5. It allows an RA to submit work to the application server for execution. This allows the server &#8212; Geronimo &#8212; to have control over the thread management and work distribution for a compliant RA. In the case of ActiveMQ, this feature is used to manage threads for the inbound connections. For more information on this feature, read &#8220;<a href="http://www.ibm.com/developerworks/opensource/library/j-jca3/">JCA 1.5, Part 3: Message inflow</a>&#8221; (developerWorks, June 2005).</p>
<p><a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing2.html">Listing 2</a> shows a fragment of the system-jms-plan.xml deployment plan. This plan configures the components for an RA instance, as detailed for a deployment descriptor in the JCA 1.5 specification. In the ActiveMQ RA case, these components include an RA implementation class, an outbound connection factory, topics, and queues (administered objects).</p>
<p>The deployment plan in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing2.html">Listing 2</a> configures the following:</p>
<ul>
<li>An instance of the ActiveMQ RA, to access the ActiveMQ message broker configured in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing2.html">Listing 2</a>, using the TCP protocol for transport</li>
<li>A JCA 1.5 WorkManager implementation, supplied by Geronimo, for the ActiveMQ RA instance</li>
<li>A JMS connection factory that can be used to create queue connections (through the QueueConnectionFactory interface), or topic connections (through the TopicConnectionFactory interface)</li>
<li>An admin object that contains a JMS queue named MDBTransferBeanOutQueue</li>
<li>An admin object that contains a JMS queue named SendReceiveQueue</li>
</ul>
<p>If you need to modify this default configuration of the JMS RA (for example, to add another queue), you&#8217;ll need to make the appropriate changes in the system-jms-plan.xml deployment plan. To make any change effective, first undeploy the org/apache/geronimo/SystemJMS configuration, and then redeploy it. For other deployment plans where you can configure instances of ActiveMQ RAs, see the sidebar <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#deployra">Deploying ActiveMQ RAs</a>.</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="http://www.ibm.com/i/v14/rules/blue_rule.gif" height="1" width="100%" /></td>
</tr>
</table>
<table class="no-print" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><img src="http://www.ibm.com/i/v14/icons/u_bold.gif" border="0" height="16" width="16" /></td>
<td align="right" valign="top"><a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#main" class="fbox"><strong>Back to top</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
<p><a name="N1013E"></a><span class="atitle"> Application client JMS access  </span></p>
<p>A J2EE application client, supported by Geronimo&#8217;s Client Application Container, can have access to the ActiveMQ message broker. <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig3">Figure 3</a> shows some client access configurations.</p>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tr>
<td width="10"><img src="http://www.ibm.com/i/c.gif" height="1" width="10" /></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td bgcolor="#eeeeee"><a name="deployra"></a><strong>Deploying ActiveMQ RAs</strong><br />
Other than server-start deployment in the system-jms-plan.xml, you can also deploy ActiveMQ RA instances in one of the following ways:</p>
<ul>
<li>Stand-alone, using an ra.xml deployment plan</li>
<li>With your Enterprise Application aRchive (EAR), inside a &lt;module&gt; element within the geronimo-application.xml deployment plan</li>
<li>With a Web Application aRchive (WAR), inside a &lt;resource&gt; element within the geronimo-web.xml deployment plan</li>
</ul>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p><a name="#fig3"></a><strong>Figure 3. J2EE and non-J2EE client access to message broker</strong><br />
<img src="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/figure3.gif" alt="J2EE and non-J2EE client access to message broker" height="397" width="358" /><br />
The top configuration in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig3">Figure 3</a> shows a J2EE client application accessing an RA deployed in the client scope. This RA instance is configured to access the message broker located at the server. The second configuration in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig3">Figure 3</a> shows another J2EE client with an RA deployed in the client scope, but accessing a message broker instance deployed also at the client. (This can be useful in disconnected operations &#8212; notebook computers that occasionally connect to the enterprise network.) In the third configuration, a non-J2EE client&#8217;s access to the ActiveMQ message broker can be direct through any configured transport. The hands-on example demonstrates how to create such a stand-alone, non-J2EE ActiveMQ application client.</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="http://www.ibm.com/i/v14/rules/blue_rule.gif" height="1" width="100%" /></td>
</tr>
</table>
<table class="no-print" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><img src="http://www.ibm.com/i/v14/icons/u_bold.gif" border="0" height="16" width="16" /></td>
<td align="right" valign="top"><a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#main" class="fbox"><strong>Back to top</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
<p><a name="N1017F"></a><span class="atitle"> Creating a JMS application: a servlet producer with native ActiveMQ consumer </span></p>
<p>This first example shows how a servlet can communicate with an external non-J2EE application through JMS. The example uses the global server-scoped queue called SendReceiveQueue (see <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing2.html">Listing 2</a>). It consists of a JMS message sender (producer), and a JMS message receiver (consumer). The producer is a servlet, called SenderServlet, that runs inside Geronimo. The consumer is a stand-alone ActiveMQ client that does not use Geronimo for JMS support. <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig4">Figure 4</a> shows the interactions in this example.<br />
<a name="#fig4"></a><strong>Figure 4. SenderServlet with ActiveMQ receiver application</strong><br />
<img src="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/figure4.gif" alt="SenderServlet with ActiveMQ receiver application" height="218" width="284" /><br />
In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig4">Figure 4</a>, the application flow is as follows:</p>
<ol>
<li>The user accesses the SenderServlet using a Web browser.</li>
<li>The SenderServlet, hosted by Geronimo, presents a data-entry form to the user.</li>
<li>The user enters a text message and clicks <strong>Send</strong>.</li>
<li> The SenderServlet processes the form submission and uses JMS to send the text message to the SendReceiveQueue.</li>
<li>The stand-alone, non-J2EE ActiveMQ client reads the SendReceiveQueue and displays the received message.</li>
</ol>
<p>The Web application source code for this example is in   the war_only directory of the code download (see the Download section below <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#resources">Resources</a>).  The client code is in the mqclient subdirectory.</p>
<p>If you just want to try out the example, you can find the sender.war  archive in the war_only/dist subdirectory. Just deploy the following  application archive on your Geronimo server:</p>
<table border="0" cellpadding="0" cellspacing="0" width="68%">
<tr>
<td class="code-outline">
<pre class="displaycode">java -jar bin/deployer.jar sender.war</pre>
</td>
</tr>
</table>
<p>Use <code>system</code> for the user name and <code>manager</code> for the password when prompted. Follow the instructions in the readme.txt file to build the client. Next, go into the mqclient directory and run the client application using the run.bat file. This will start the client waiting for incoming messages.</p>
<p>Access the data entry servlet through a browser using the URL http://localhost:8080/sender/sendform.cgi.</p>
<p>Enter a text message into the field, and click <strong>Send</strong>. Notice that the ActiveMQ client receives and prints out the message immediately.</p>
<p>View <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing3.html">Listing 3</a> to see some of the code for SendServlet.java. You can find the complete source in the war_only/src directory.</p>
<p>In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing3.html">Listing 3</a>, the servlet generates the input form on an HTTP GET request and handles form submission on an HTTP POST request. The actual <code>doPost()</code> method extracts the entered message, creates a queue connection, starts a session, and sends the message to the queue.</p>
<p>The <code>servlet init()</code> method looks up the connection factory and queue using Java Naming and Directory Interface (JNDI). Geronimo provides the JNDI mapping service. You can see that the queue is looked up using java:comp/env/dwSendReceiveQueue. This name is mapped in the web.xml deployment descriptor for the Web application. The relevant segment of web.xml is reproduced in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list4">Listing 4</a>.<br />
<a name="#list4"></a><strong>Listing 4. JNDI mapping and resource reference in web.xml  </strong></p>
<table border="0" cellpadding="0" cellspacing="0" width="68%">
<tr>
<td class="code-outline">
<pre class="displaycode">&lt;resource-ref&gt;
  &lt;res-ref-name&gt;DefaultActiveMQConnectionFactory&lt;/res-ref-name&gt;
  &lt;res-type&gt;javax.jms.QueueConnectionFactory&lt;/res-type&gt;
  &lt;res-auth&gt;Container&lt;/res-auth&gt;
&lt;/resource-ref&gt;

&lt;message-destination-ref&gt;
  <span class="boldcode">&lt;message-destination-ref-name&gt;dwSendReceiveQueue&lt;/message-destination-ref-name&gt;</span>
  &lt;message-destination-type&gt;javax.jms.Queue&lt;/message-destination-type&gt;
  &lt;message-destination-usage&gt;Produces&lt;/message-destination-usage&gt;
  &lt;message-destination-link&gt;SendReceiveQueue&lt;/message-destination-link&gt;
&lt;/message-destination-ref&gt;</pre>
</td>
</tr>
</table>
<p>In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list4">Listing 4</a>, the &lt;message-destination-ref&gt; maps the name dwSendReceiveQueue to the system scoped queue through a &lt;message-destination-link&gt; subelement. Unfortunately, the J2EE 1.4 specification does not support a &lt;resource-link&gt; subelement inside a &lt;resource-ref&gt; element in web.xml. As a result, you must use the actual resource name for the connection factory (DefaultActiveMQConnectionFactory), or you will have to create a custom deployment plan (such as geronimo-web.xml) to map the reference.</p>
<p><a name="N10213"></a><span class="smalltitle"> Coding the ActiveMQ message receiver client </span></p>
<p>The receiver is a native ActiveMQ client; it does not use any Geronimo client support.  It accesses the ActiveMQ message broker hosted in Geronimo using the TCP transport and the URL tcp://localhost:61616. Partial source code to this client, JMSReceiver, is shown in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list5">Listing 5</a>.  You can see the complete source code in the war_only/clientsrc directory.<br />
<a name="#list5"></a><strong>Listing 5. JMSReceiver.java &#8212; a non-J2EE JMS messages receiver client</strong></p>
<table border="0" cellpadding="0" cellspacing="0" width="68%">
<tr>
<td class="code-outline">
<pre class="displaycode">package com.ibm.dw.geronimo.jms;

import javax.jms.*;
import org.activemq.ActiveMQConnectionFactory;

public class JMSReceiver {
	protected Queue queue;
	protected String queueName = "SendReceiveQueue";
	protected String url = "tcp://localhost:61616";
	protected int ackMode = Session.AUTO_ACKNOWLEDGE;

	public static void main(String[] args) {
		JMSReceiver msgReceiver = new JMSReceiver();
		msgReceiver.run();
	}

	public void run() {
		try {
			ActiveMQConnectionFactory connectionFactory =
				new ActiveMQConnectionFactory(url);
			QueueConnection connection =
				(QueueConnection)
				connectionFactory.createConnection();
			connection.start();
			MessageConsumer consumer = null;
			Session session = connection.createQueueSession(
					false,
					Session.AUTO_ACKNOWLEDGE);
			queue = session.createQueue(queueName);
			consumer = session.createConsumer(queue);
			System.out.println("Waiting for message (max 5)");
			for (int i = 0; i &lt; 5; i++) {
				Message message = consumer.receive();
				processMessage(message);
			}
			System.out.println("Closing connection");
			consumer.close();
			session.close();
			connection.close();

		} catch (Exception e) {
        ...
		}
	}

	public void processMessage(Message message) {
		try {
			TextMessage txtMsg = (TextMessage) message;
			System.out.println("Received a message: " + txtMsg.getText());
		} catch (Exception e) {
        ...
        }
	}

}</pre>
</td>
</tr>
</table>
<p>In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list5">Listing 5</a>, the JMSReceiver is completely free of J2EE code. There is no need to perform JNDI lookup or destination mapping, because the ActiveMQ native library performs the equivalent actions automatically.</p>
<p>Coding this non-J2EE message consumer is straightforward, using a mix of JMS API and ActiveMQ support library. Coding of a J2EE message consumer, with Geronimo&#8217;s support, is also simple. The next example shows the construction of a useful J2EE message consumer: an MDB that adds product categories to the Really Big Pet Store example.</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="http://www.ibm.com/i/v14/rules/blue_rule.gif" height="1" width="100%" /></td>
</tr>
</table>
<table class="no-print" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><img src="http://www.ibm.com/i/v14/icons/u_bold.gif" border="0" height="16" width="16" /></td>
<td align="right" valign="top"><a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#main" class="fbox"><strong>Back to top</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
<p><a name="N10236"></a><span class="atitle"> Creating an MDB for data update </span></p>
<p>The second hands-on example shows the construction of an MDB. This example uses the same SendServlet code as in the first example, but the message consumer is now an MDB inside the same enterprise application (bundled in the same EAR). <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig5">Figure 5</a> illustrates the operation of this example.<br />
<a name="#fig5"></a><strong>Figure 5. Operation of the MDB example</strong><br />
<img src="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/figure5.gif" alt="Operation of the MDB example" height="388" width="492" /><br />
The example uses code from the article, &#8220;<a href="http://www.ibm.com/developerworks/opensource/library/j-geron2/">Geronimo! Part 2: Tame this J2EE 1.4 bronco</a>&#8221; (developerWorks, May 2005). The article includes more information on the operation of the Really Big Pet Store.</p>
<p>In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#fig5">Figure 5</a>, the operation of the original Web application is left intact.  Shoppers use a browser to access the store&#8217;s JSP-based user interface.  The StoreController servlet fetches the product categories information using the <code>getCats()</code> method of a stateless session EJB called CategoriesBean.</p>
<p>CategoriesBean has been modified to use a new helper class, called <code>CategoryData</code>, to obtain  the list of categories.</p>
<p>The MDB is called CategoriesMDB. This EJB is activated when a message is placed into the SendReceiveQueue. CategoriesMDB extracts the message content and uses it to add a product category to <code>CategoryData</code>.  Because  the session EJB, CategoriesBean, uses <code>CategoryData</code> for every screen update, the new category is visible to the shopper immediately.</p>
<p>In a production environment, the <code>CategoryData</code> helper class can be replaced by an entity bean representing the categories. The use of an entity bean is purposely avoided here to simplify the configuration and setup for this example.</p>
<p><a name="N10280"></a><span class="smalltitle"> Coding CategoriesMDB </span></p>
<p>The code for SenderServlet is almost identical to the version in the first example. See ear_ejb/src/SenderServlet.java for complete source.</p>
<p>The code for CategoriesMDB is shown in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list6">Listing 6</a>. You can find complete source at ejb/CategoriesMDB.java.<br />
<a name="#list6"></a><strong>Listing 6.  CategoriesMDB &#8212; consuming JMS messages and add category</strong></p>
<table border="0" cellpadding="0" cellspacing="0" width="68%">
<tr>
<td class="code-outline">
<pre class="displaycode">import javax.ejb.*;
import javax.jms.*;
import com.ibm.dw.reallybigpet.ejb.CategoryData;

public class CategoriesMDB
  implements MessageDrivenBean,MessageListener {

private transient MessageDrivenContext mdc = null;
public CategoriesMDB() {
}

public void setMessageDrivenContext(MessageDrivenContext mdc) {
   this.mdc = mdc;
}

public void ejbCreate() {
}

public void onMessage(Message inMessage) {
    TextMessage msg = null;

    try {
<span class="boldcode">
        if (inMessage instanceof TextMessage) {
            msg = (TextMessage) inMessage;
         CategoryData.getInstance().addCat(msg.getText());
</span>
        }
     } catch (Exception e) {
        e.printStackTrace();
    }
} 

public void ejbRemove() {
}

}</pre>
</td>
</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tr>
<td width="10"><img src="http://www.ibm.com/i/c.gif" height="1" width="10" /></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td bgcolor="#eeeeee"><a name="parent"></a><strong>Parent configuration and class loading</strong><br />
Make sure to set the parentId attribute of the application element in  geronimo-application.xml to <code>org/apache/geronimo/SystemJMS</code>.  This will ensure that you are using the class loader of the JMS RA.  If you set your parentId to  <code>org/apache/geronimo/System</code> instead, you will encounter class-loading problem similar to<code> java.lang.ClassNotFoundException:  org.activemq.ra.ActiveMQActivationSpec</code>. This is the most common mistake you are likely to make when deploying  MDB with Geronimo.</td>
</tr>
</table>
</td>
</tr>
</table>
<p>The MDB code is simple. The highlighted lines in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing7.html">Listing 7</a> are where the work is performed. When a JMS message is received at the queue, Geronimo will:</p>
<ol>
<li>Pick up the message.</li>
<li>Activate an instance of this MDB.</li>
<li>Call the MDB&#8217;s <code>onMessage()</code> method, passing the received message as an argument of the method.</li>
</ol>
<p>You need to configure the MDB with the associated JMS destination (or queue) in the deployment descriptor, ejb-jar.xml. See an example of this in <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/listing7.html">Listing 7</a>.</p>
<p>In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list8">Listing 8</a>, the SendReceiveQueue is associated with MDB through an &lt;activation-config&gt; subelement in the &lt;message-driven&gt; element. To select the JMS RA that will be used, create a custom openejb=jar.xml similar to <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list8">Listing 8</a>.<br />
<a name="#list8"></a><strong>Listing 8.  Custom deployment plan, openejb-jar.xml, to select JMS RA </strong></p>
<table border="0" cellpadding="0" cellspacing="0" width="68%">
<tr>
<td class="code-outline">
<pre class="displaycode">&lt;?xml version="1.0"?&gt;
&lt;openejb-jar xmlns="http://www.openejb.org/xml/ns/openejb-jar"
configId="catmdb"
parentId="org/apache/geronimo/SystemJMS"
&gt;
&lt;enterprise-beans&gt;
  &lt;message-driven&gt;
        &lt;ejb-name&gt;CatMDB&lt;/ejb-name&gt;
        &lt;resource-adapter&gt;
           &lt;resource-link&gt;ActiveMQ RA&lt;/resource-link&gt;
         &lt;/resource-adapter&gt;
   &lt;/message-driven&gt;
&lt;/enterprise-beans&gt;
&lt;/openejb-jar&gt;</pre>
</td>
</tr>
</table>
<p>In <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#list8">Listing 8</a>, the default system-scoped RA is selected by name using the &lt;resource-link&gt; element.  See the sidebar <a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#parent">Parent configuration and class loading</a> for information on the need for a geronimo-application.xml deployment plan.</p>
<p>To try out this example, deploy the reallybigpet.ear application, located in the ear_ejb/dist directory. To access the store, point your browser to http://localhost:8080/ReallyBigPetStore/store.cgi. To access the category add form, point your browser to http://localhost:8080/ReallyBigPetStore/sendform.cgi.</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="http://www.ibm.com/i/v14/rules/blue_rule.gif" height="1" width="100%" /></td>
</tr>
</table>
<table class="no-print" align="right" cellpadding="0" cellspacing="0">
<tr align="right">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="middle"><img src="http://www.ibm.com/i/v14/icons/u_bold.gif" border="0" height="16" width="16" /></td>
<td align="right" valign="top"><a href="http://www-128.ibm.com/developerworks/opensource/library/os-ag-jmsbeans/#main" class="fbox"><strong>Back to top</strong></a></td>
</tr>
</table>
</td>
</tr>
</table>
<p><a name="N102F9"></a><span class="atitle"> Conclusion </span></p>
<p>ActiveMQ provides quintessential JMS service for Geronimo, while Geronimo provides ActiveMQ with JDBC-based persistence, life cycle management (through JCA 1.5 compliance), security, transaction, and work management. This symbiotic relationship allows Geronimo users to enjoy the best of both worlds: access to standardized J2EE 1.4 JMS and MDB facilities enhanced by ActiveMQ&#8217;s rich transports and client support.</p>
]]></content:encoded>
			<wfw:commentRss>http://articles.pakcreations.com/magic-with-jms-mdbs-and-activemq-in-geronimo/feed</wfw:commentRss>
		</item>
		<item>
		<title>Asynchronous calls and remote callbacks using Lingo Spring Remoting</title>
		<link>http://articles.pakcreations.com/asynchronous-calls-and-remote-callbacks-using-lingo-spring-remoting</link>
		<comments>http://articles.pakcreations.com/asynchronous-calls-and-remote-callbacks-using-lingo-spring-remoting#comments</comments>
		<pubDate>Mon, 25 Feb 2008 11:22:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Apache]]></category>

	<!-- AutoMeta Start -->
	<category></category>
	<!-- AutoMeta End -->
	
		<guid isPermaLink="false">http://articles.pakcreations.com/asynchronous-calls-and-remote-callbacks-using-lingo-spring-remoting</guid>
		<description><![CDATA[Lingo is the only Spring Remoting implementation that supports asynchronous calls and remote callbacks. Today I&#8217;ll cover all the nitty gritty details of the async/callback related functionality along with the limitations and gotchas.Asynchronous method invocation and callback support by Lingo is an awesome feature and there are several usecases where these are an absolute must. [...]]]></description>
			<content:encoded><![CDATA[<p>Lingo is the only Spring Remoting implementation that supports asynchronous calls and remote callbacks. Today I&#8217;ll cover all the nitty gritty details of the async/callback related functionality along with the limitations and gotchas.Asynchronous method invocation and callback support by Lingo is an awesome feature and there are several usecases where these are an absolute must. Lets consider a simple and rather common use case : You have a server side application (say an optimizer) for which you want you write a remote client API. The API has methods like solve() which are long running and methods like cancel() which stops the optimizer solve.</p>
<p>A synchronous API under such circumstances is not really suitable since the solve() method could take a really long time to complete. It could be implemented by having the client code spawn their own thread and do its own exception management but this becomes really kludgy. Plus you have to worry out network timeout issues. You might be thinking &#8220;I&#8217;ll just use JMS if I need an asynchronous programming model&#8221;. You could use JMS but think about the API you&#8217;re exposing. Its going to be a generic JMS API where the client is registering JMS listeners, and sending messages to JMS destinations using the JMS API. Compare this to a remote API where the client is actually working with the Service interface itself.</p>
<p>Lingo combines the elegance of Spring Remoting with the ability to make asynchronous calls. Lets continue with our Optimizer example and implement a solution using Lingo and Spring. <strong>OptimizerService interface</strong></p>
<pre class="code"><span class="keyword">public</span> <span class="keyword">interface</span> OptimizerService {
    <span class="keyword">void</span> registerCallback(OptimizerCallback callback) <span class="keyword">throws</span> OptimizerException;

    <span class="keyword">void</span> solve();

    <span class="keyword">void</span> cancel() <span class="keyword">throws</span> OptimizerException;
}</pre>
<p>The solve() method is asynchronous while the cancel() and registerCallback(..) methods are not. Asynchronous methods by convention must not have a return value and also must not throw exceptions. The registerCallback(..) method registers a client callback with the Optimizer. In order to make an argument be a remote callback, the argument must implement java.util.EventListener or java.rmi.Remote. In this example the OptimizerCallback interface extends java.util.EventListener. If the argument does not implement either of these interfaces, it must implement java.io.Serializable and it will then be passed by value.</p>
<p><strong>OptimizerCallback interface</strong></p>
<pre class="code"><span class="keyword">public</span> <span class="keyword">interface</span> OptimizerCallback <span class="keyword">extends</span> EventListener {

    <span class="keyword">void</span> setPercentageComplete(<span class="keyword">int</span> pct);

    <span class="keyword">void</span> error(OptimizerException ex);

    <span class="keyword">void</span> solveComplete(<span class="keyword">float</span> solution);
}</pre>
<p>The callback API has a method for the Optimizer to set the percentage complete, report an error during the solve() process (remember that the solve() method is asynchronous so it cannot throw an exception directly) and finally the solveComplete(..) callback to inform the client that the solve is complete along with the solution.</p>
<p><strong>OptimizerService implementation</strong></p>
<pre class="code"><span class="keyword">public</span> <span class="keyword">class </span>OptimizerServiceImpl <span class="keyword">implements</span> OptimizerService {

    <span class="keyword">private</span> OptimizerCallback callback;
    <span class="keyword">private</span> <span class="keyword">volatile</span> <span class="keyword">boolean</span> cancelled = false;

    <span class="keyword">private</span> <span class="keyword">static</span> Log LOG = LogFactory.getLog(OptimizerServiceImpl.class);

    <span class="keyword">public</span> <span class="keyword">void</span> registerCallback(OptimizerCallback callback) {
        LOG.info(<span class="literal">&#8220;registerCallback() called &#8230;&#8221;</span>);
        <span class="keyword">this</span>.callback = callback;
    }

    <span class="keyword">public</span> <span class="keyword">void</span> solve() {
        LOG.info(<span class="literal">&#8220;solve() called &#8230;&#8221;</span>);
        <span class="keyword">float</span> currentSolution = 0;

        <span class="comment">//simulate long running solve process
</span>        <span class="keyword">for</span> (<span class="keyword">int</span> i = 1; i &lt;= 100; i++) {
            <span class="keyword">try</span> {
                currentSolution += i;
                Thread.sleep(1000);
                <span class="keyword">if</span> (callback != null) {
                    callback.setPercentageComplete(i);
                }
                <span class="keyword">if</span> (cancelled) {
                    <span class="keyword">break</span>;
                }
            } <span class="keyword">catch</span> (InterruptedException e) {
                System.err.println(e.getMessage());
            }
        }
        callback.solveComplete(currentSolution);

    }

    <span class="keyword">public</span> <span class="keyword">void</span> cancel() <span class="keyword">throws</span> OptimizerException {
        LOG.info(<span class="literal">&#8220;cancel() called &#8230;&#8221;</span>);
        cancelled = true;
    }
}</pre>
<p>The solve() method sleeps for a while and makes the call setPercentageComplete(..) on the callback registered by the client. The code is pretty self explanatory here.</p>
<p><strong>Optimizer Application context - optimizerContext.xml</strong>We now need to export this service using Lingo Spring Remoting. The typical Lingo Spring configuration as described in the Lingo docs and samples is :</p>
<pre class="code"><a name="l1"></a><span class="s0">&lt;?</span><span class="s1">xml version=</span><span class="s3">&#8220;1.0&#8243; </span><span class="s1">encoding=</span><span class="s3">&#8220;UTF-8&#8243;</span><span class="s0">?&gt;
</span><a name="l2"></a><span class="s4">&lt;!DOCTYPE beans PUBLIC &#8220;-//SPRING//DTD BEAN//EN&#8221; &#8220;http://www.springframework.org/dtd/spring-beans.dtd&#8221;&gt;</span><span class="s0">
</span><a name="l3"></a>
<a name="l4"></a><span class="s2">&lt;</span><span class="s5">beans</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l5"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;optimizerServiceImpl&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.sanjiv.lingo.server.OptimizerServiceImpl&#8221; </span><span class="s1">singleton=</span><span class="s3">&#8220;true&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l6"></a>
<a name="l7"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;optimizerServer&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.logicblaze.lingo.jms.JmsServiceExporter&#8221; </span><span class="s1">singleton=</span><span class="s3">&#8220;true&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l8"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;destination&#8221; </span><span class="s1">ref=</span><span class="s3">&#8220;optimizerDestination&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l9"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;service&#8221; </span><span class="s1">ref=</span><span class="s3">&#8220;optimizerServiceImpl&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l10"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;serviceInterface&#8221; </span><span class="s1">value=</span><span class="s3">&#8220;org.sanjiv.lingo.common.OptimizerService&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l11"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;connectionFactory&#8221; </span><span class="s1">ref=</span><span class="s3">&#8220;jmsFactory&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l12"></a>    <span class="s2">&lt;/</span><span class="s5">bean</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l13"></a>
<a name="l14"></a>    <span class="s6">&lt;!&#8211; JMS ConnectionFactory to use &#8211;&gt;</span><span class="s0">
</span><a name="l15"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;jmsFactory&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.activemq.ActiveMQConnectionFactory&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l16"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;brokerURL&#8221; </span><span class="s1">value=</span><span class="s3">&#8220;tcp://localhost:61616&#8243;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l17"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;useEmbeddedBroker&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l18"></a>            <span class="s2">&lt;</span><span class="s5">value</span><span class="s2">&gt;</span><span class="s7">true</span><span class="s2">&lt;/</span><span class="s5">value</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l19"></a>        <span class="s2">&lt;/</span><span class="s5">property</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l20"></a>    <span class="s2">&lt;/</span><span class="s5">bean</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l21"></a>
<a name="l22"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;optimizerDestination&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.activemq.message.ActiveMQQueue&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l23"></a>        <span class="s2">&lt;</span><span class="s5">constructor-arg </span><span class="s1">index=</span><span class="s3">&#8220;0&#8243; </span><span class="s1">value=</span><span class="s3">&#8220;optimizerDestinationQ&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l24"></a>    <span class="s2">&lt;/</span><span class="s5">bean</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l25"></a><span class="s2">&lt;/</span><span class="s5">beans</span><span class="s2">&gt;</span></pre>
<p>In this example, I&#8217;m embedding a JMS broker in the Optimizer process. However you are free to use an external JMS broker and change the JMS Connection Factory configuration appropriately.</p>
<pre>Note : The above optimizerContext.xml it the typical configuration in the Lingo docs/examples
but is not the ideal configuration. It has some serious limitations which I'll cover in a bit
along with the preferred  "server" configuration.</pre>
<p><strong>OptimizerServer</strong> The &#8220;main&#8221; class that exports the OptimizerService simply needs to instantiate the &#8220;optimizerServer&#8221; bean in the optimizerContent.xml file.</p>
<pre class="code"><span class="keyword">public</span> <span class="keyword">class </span>OptimizerServer {

    <span class="keyword">public</span> <span class="keyword">static</span> <span class="keyword">void</span> main(String[] args) {
        <span class="keyword">if</span> (args.length == 0) {
            System.err.println(<span class="literal">&#8220;Usage : java org.sanjiv.lingo.server.OptimizerServer &lt;config file&gt;&#8221;</span>);
            System.exit(-1);
        }
        String applicationContext = args[0];

        System.out.println(<span class="literal">&#8220;Starting Optimizer &#8230;&#8221;</span>);
        FileSystemXmlApplicationContext ctx = <span class="keyword">new</span> FileSystemXmlApplicationContext(applicationContext);

        ctx.getBean(<span class="literal">&#8220;optimizerServer&#8221;</span>);

        System.out.println(<span class="literal">&#8220;Optimizer Started.&#8221;</span>);

        ctx.registerShutdownHook();
    }
}</pre>
<p><strong>The Client</strong>In order for the client to lookup the remote OptimizerService, we need to configure the client side Spring application context as follows : <strong>Client Application Context - clientContext.xml</strong></p>
<pre class="code"><a name="l1"></a><span class="s0">&lt;?</span><span class="s1">xml version=</span><span class="s3">&#8220;1.0&#8243; </span><span class="s1">encoding=</span><span class="s3">&#8220;UTF-8&#8243;</span><span class="s0">?&gt;
</span><a name="l2"></a><span class="s4">&lt;!DOCTYPE beans PUBLIC &#8220;-//SPRING//DTD BEAN//EN&#8221; &#8220;http://www.springframework.org/dtd/spring-beans.dtd&#8221;&gt;</span><span class="s0">
</span><a name="l3"></a>
<a name="l4"></a><span class="s2">&lt;</span><span class="s5">beans</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l5"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;optimizerService&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.logicblaze.lingo.jms.JmsProxyFactoryBean&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l6"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;serviceInterface&#8221; </span><span class="s1">value=</span><span class="s3">&#8220;org.sanjiv.lingo.common.OptimizerService&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l7"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;connectionFactory&#8221; </span><span class="s1">ref=</span><span class="s3">&#8220;jmsFactory&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l8"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;destination&#8221; </span><span class="s1">ref=</span><span class="s3">&#8220;optimizerDestination&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l9"></a>
<a name="l10"></a>        <span class="s6">&lt;!&#8211; enable async one ways on the client &#8211;&gt;</span><span class="s0">
</span><a name="l11"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;remoteInvocationFactory&#8221; </span><span class="s1">ref=</span><span class="s3">&#8220;invocationFactory&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l12"></a>    <span class="s2">&lt;/</span><span class="s5">bean</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l13"></a>
<a name="l14"></a>    <span class="s6">&lt;!&#8211; JMS ConnectionFactory to use &#8211;&gt;</span><span class="s0">
</span><a name="l15"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;jmsFactory&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.activemq.ActiveMQConnectionFactory&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l16"></a>        <span class="s2">&lt;</span><span class="s5">property </span><span class="s1">name=</span><span class="s3">&#8220;brokerURL&#8221; </span><span class="s1">value=</span><span class="s3">&#8220;tcp://localhost:61616&#8243;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l17"></a>    <span class="s2">&lt;/</span><span class="s5">bean</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l18"></a>
<a name="l19"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;optimizerDestination&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.activemq.message.ActiveMQQueue&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l20"></a>        <span class="s2">&lt;</span><span class="s5">constructor-arg </span><span class="s1">index=</span><span class="s3">&#8220;0&#8243; </span><span class="s1">value=</span><span class="s3">&#8220;optimizerDestinationQ&#8221;</span><span class="s2">/&gt;</span><span class="s0">
</span><a name="l21"></a>    <span class="s2">&lt;/</span><span class="s5">bean</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l22"></a>
<a name="l23"></a>    <span class="s2">&lt;</span><span class="s5">bean </span><span class="s1">id=</span><span class="s3">&#8220;invocationFactory&#8221; </span><span class="s1">class=</span><span class="s3">&#8220;org.logicblaze.lingo.LingoRemoteInvocationFactory&#8221;</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l24"></a>        <span class="s2">&lt;</span><span class="s5">constructor-arg</span><span class="s2">&gt;</span><span class="s0">
</span><a name="l25"></a>            <span class="s2">&lt;</span><span class="s5"