Streamline and modernize all while keeping your CMS

I’ve struggled with integrating CMS products into projects here as of late. CMS products like WordPress, Joomla and Drupal allow you get rapid get something up and running, but can really paint you into a corner if you are trying to do something that doesn’t fit within it’s boundaries. For my money, I would avoid a CMS all together and just manage my content directly in the HTML pages, but that is outside the realm of expertise of most marketing folks who want to be able to manage their content. So I have worked on a couple of strategies that allow for a compromise.

CMS is dead

We are definitely in the post-CMS era of web design. It’s not that the CMS is going away, it is just going to be more streamlined. I read a quote the other day that basically said that CMS products get you 80% of the way really fast but they make you work really hard to get that last 20%. From my experience, this is very true. The future of CMS is just pure content pulled into templates via service calls. For example, utilize your CMS to mange your content, but pull the data from the CMS via a RESTful API into a pure HTML template. There are several ways to accomplish this, it just depends on your needs.

Ajax framework

The easiest way to get started with your CMS and decouple it from your project, it just to utilize a Javascript framework like AngularJS. Most CMS products have native REST plugins or third-party plugins that make it simple to retrieve data. What I do is create an Angular-based application and just pull each post into the template as the user navigates. This keeps me free to do whatever I want in HTML5, CSS and javascript but still gives users the ability to manage the content. The only drawback here is for SEO since the HTML won’t be in the page if you view source… it is written into the DOM later with a RESTful Ajax call. If you want SEO for this strategy, you have to support Google’s Ajax Crawler Specification and use the _escaped_fragment_= syntax to serve a prerendered version of the page or just serve up a static wordpress template… I believe this to be the ideal compromise of modern technology and flexibility of the CMS with few drawbacks.

Server Rendering

This strategy employs all the above approaches except without the AngularJS mechanism of replacing content dynamically. Each page is rendered on the server with PHP, JSP or ASP… it’s really up to you so long as the rendered HTML is there when you view source. The pages or controllers can get the data from the CMS via the database of through the REST api. If all of your content is in the CMS’s, you’ll have it a bit easy. The drawback to this approach is that is isn’t as clean nor is it easy to maintain. The advantages of keeping a pure HTML5 site and not having to run on an app server to test go out the window. You also can lose valuable performance time this way if you aren’t careful.

Pure CMS

Pure CMS-based approaches are the most common for a myriad of reasons. I want to lay out a few of the reasons that you might choose this approach. In this approach, the template for the site is embedded into the CMS, the content is all in the CMS and you are in a lot of ways a victim of the stylesheet and elements that the template uses. This is the box I spoke of… You are also fairly tied to the CMS itself. Now that we know the pitfalls… lets look at why you would choose this route.

  • Your expertise in house isn’t capable of taking on any other option.
  • You have an extremely static site that has little to no dynamic pages
  • You don’t have a need for fancy dynamic components or a super cool site
  • SEO is your only goal
  • You want to keep it as simple as possible

Conclusion

At the end of the day, CMS products aren’t going anywhere and they are constantly dying out and new ones are taking their places. This is the rapidly changing world of technology we live in. I just prefer to keep a loose coupling between my code and my CMS as much as possible so I can respond very quickly to these changes.

 

 

 

 

 

Bootstrap 3 for the win in responsive design

Screenshot 2014-05-19 07.51.57Have you ever downloaded a WordPress or other CMS template and hit your head against the wall trying to figure out how the styles are setup so that you can format your content? Have you ever built a template from scratch or a website and thought that there has to be some standard by which web formatting and styles should adhere. Bootstrap is about to be your best friend.

Bootstrap is a rapid responsive design development library consisting of mostly standard stylesheet elements. Bootstrap consists of a 12 column grid with standard css names that you can apply to divs. Have you ever tried to make a HTML table work just the way you want it to and nest them? It’s really painful. Bootstrap solves that with these styles.

Bootstrap Grid

The code to produce the above grid is as follows:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

As you can see, this is not complex if you follow the row and column nomenclature.

Bootstrap elements are designed to stack as you resize your browser or as the resolution of the device changes. You can see how beneficial this is if you want the elements above to be viewable on a mobile device.

My Cardinal Rules

Like they used to say about American Express… don’t leave home without it. Well, here are my rules with responsive design.

  • Always looks for Bootstrap templates or structures before you start from scratch. Preferably look for BootStrap3.
  • If you are using a CMS, picking a Bootstrap-based template can not only save you time, but save you vast amounts of hair pulling when working with your post content.
  • Look for existing styles that do what you want in BootStrap. If you need to override them, do so in your CSS after Bootstrap’s is imported.
  • Don’t reinvent the wheel… see rule #1
  • Think mobile first before you look at supporting the desktop versions
  • When in doubt about an element… wrap it in a div. You’ll be able to deal with it better later.

Using Bootstrap is probably the biggest time saving move you can make in preparing your web application or mobile website for the real world. I’ve barely scratched the surface of what the framework can do as well. You can even import the files for Bootstrap via a CDN or import them into your project using Bower.

 

 

 

 

 

Making SEO work in an world of Ajax

I came across a bit of a stumbling block with application development lately as it relates to “public-facing” web sites and SEO and decided I would share my thoughts. On one we all want the most advanced, dynamic Ajax-driven websites but these sites aren’t exactly SEO friendly since crawling engines don’t crawl these sites Seo-Logoswell or most of the time at all. I have no doubt that Google is already indexing some Ajax sites and I have no doubt that Ajax sites will enjoy premium support when it comes to crawling engines in the near future, but for now we have to have a work around.

What is Ajax?

Ajax or Asynchronous Java and XML is not new. Actually more nowadays the XML has been replaced by JSON.. thank goodness. Ajax has been around for a long time, but over the past several years it exploded and you can take your pick at Javascript frameworks that allow you to write a very dynamic and engaging application for the web that has the power and flexibility of a desktop application. Ajax works by making a request to the server with Javascript for data after the HTML page has loaded. Search indexing engines don’t fully support this because of security reasons and because of the resources involved in following Javascript as opposed to just parsing flat HTML.

So how does Google index sites like Twitter, Tumbler etc?

Google’s crawler specification as it relates to Ajax was designed to address the problems that these Ajax sites represent. It works like this. The Crawler hits your HTML and sees a special meta tag or a url with a #! in it. The #! technique is all but dead thanks to HTML5 Push State though.

Http Request -> http://host/index.html

<meta name=”fragment” content=”!”>

The crawler then issues a second call to your site for the same url with the following format.

Request = http://host/index.html?_escaped_fragment_=/index.html

It is now your responsibility to serve up static HTML so that the crawler can scan…

ajax-diagram-1

 

 

 

The simplest way to do this is to use a prerendering engine that will create a snapshot of your page by making a request to it from a headless browser. Prerender.io and PhantomJS are the combination of items that make this normally possible. This approach requires a forwarding rule on your web server to look for the ?_escaped_fragment_= and then to proxy that request to the prerendering engine and return the HTML. The web server must not redirect… You also support this on the web server by looking for the user agent of twitterbot or googlebot along with a dozen or so other indexing bots.

I know it sounds daunting, but it’s not really that difficult. There are services out there that make it pretty easy to set this up.

SEO tools slow to adapt

All this being said, SEO tools have become slow to adapt to Ajax technology that has been around for many years now. They really haven’t had to since they thrive on volume and right now the volume is still in the completely in the court of non-ajax driven sites. In fact, I heard the head of an SEO company today say AngularJS would destroy the SEO for your site. Unfortunately, this is the same adversity to change we see every so many years in this industry. The very thing that this attitude does is destroy innovation. Do you really think that Google would support a technology they won’t be able to crawl natively forever? The fact remains that Google and Bing support this technology through the aforementioned Ajax specification and it is a fairly simple matter to set it up.

Ajax is one of the best methods for retrieving content and keeping your presentation layer separate from your backend. It provides for a more pleasant user experience, it is faster than server side rendering of pages and provides users with feedback as resources are loading from the server. Remember the old days on dial up of waiting for a page to load every time you click a link… People no longer worry about this because they mark that devices have a access to high speed bandwidth making this no longer a chief concern. Of course, they are forgetting that mobile devices are still limited when it comes to these resources and bandwidth concerns due to mobile data limits are chief among user’s concerns. Newer Ajax frameworks like AngularJS by Google solve many of these problems with regards to bandwidth. SEO and cutting edge technology are rarely equal in terms of weight. I rank SEO higher in priority myself as if you can’t get found, you might as well be spitting in the wind. However, I believe we can all get our cake and eat it too.

Short-sighted approaches

I believe avoiding Ajax alltogether is a short-sighted approach. Here is a great example of what I am talking about. The author never mentions HTML5 PushState that will remove the # from the urls and make urls appear like they are real to the search engine crawler. If you want to learn more about this, then take a gander here.

Recommendations

Aside from using the prerendering mechanisms there are other tactics that can allow your Ajax enabled site to get indexed.

  • Make sure your menus are plain HTML (AngularJS and HTML5 both allow for dynamic menus that are plain HTML)
  • Make sure you create friendly url schemes and use HTML 5 push state instead of the #! mechanism (AngularJS again will facilitate this)
  • Create a mechanism by which each page will get it’s own meta information and canonicalization. (I do this by passing in the data to my header and footer)
  • Create snapshots that don’t have images or other data… just text. This approach is even better for the crawlers as it keeps them from having to crawl over useless information that it will toss out anyway. A simple process that will create snapshots and store them for the crawler would be excellent if you don’t have a plethora of pages to contend with.
  • If you use prerendering… Make sure you cache the results and precache the results so that the search engine doesn’t have to wait.
  • The prerendered pages don’t have to be pretty… they just have to give the search engine something to read.
  • CMS users… pull your content from your CMS directly for your meta information. For example, pull your description and keyword information to place in your header
  • Delay the complete load of your page until the Ajax completes. If the page completely renders before the Ajax does, the crawler may stop processing it… This is why you need to precache your content. Remember you also have to provide the user with feedback so you need to load part of the page. This is a balancing act.
  • Hang in there… Google’s crawlers area already processing some Ajax and in the near future writing your site this way and getting great SEO won’t be a problem.
  • Last resort, create a server side process for static content or use a CMS. As a last ditch effort if you don’t have the expertise for Ajax-enabled sites, you probably shouldn’t do it anyway. Back up and revisit a CMS-based or a static HTML5 site approach. I highly recommend the latter. It is incredibly easy these days to create and maintain a pure HTML site if you have some HTML experience. If you don’t know HTML or CSS and you don’t really care, you probably need to just outsource it or grab a CSS tool like WordPress or Joomla to do the work for you.
  • If your site is mostly static and doesn’t change, then why use Ajax anyway.

SEO is important

Don’t let me sway you against ranking your SEO as a first class citizen. SEO is extremely important to your website if you want to increase your reach and build your company. The proper balance between technology and common sense is just what most folks need. A proper assessment of what your needs and goals are is what you need. As for myself… I am going all in with AngularJs by Google and I believe in Google’s ability to make it indexable in the near future so none of this is a concern.

AngularJS is what HTML should have been from the start

JAngularJS-largeavascript UI development and Ajax frameworks have been pretty painful and tedious for as long as I can remember, but the past few years the constantly evolving landscape has given us new tools that make it just as simple as writing server side compiled code. We now have development tools that allow you to debug through javascript, watch variables and insert data into the debugging process and even change elements on the fly while debugging. However, the very nature of javascript and HTML combos lend themselves to be pretty messy.

Developers are constantly munging HTML and javascript together and writing javascript code inline to manipulate DOM elements. It can be a downright daunting task to go back and edit code you wrote a few months ago in frameworks like Dojo and ExtJS. I won’t even mention having to look over someone else’s code… It makes me want to shiver. It’s not always because the other person’s code is bad, it’s usually because they munged it all together in a different way than you do. This is all a reminder of the days when programmers intermingled ASP/JSP code into the same files as HTML. Luckily, on the server side, we have had Struts, Spring MVC and .NET MVC frameworks  just to name a few. These frameworks provide Model View Controller (MVC) architecture to separate presentation logic from business logic and aggregation logic. This is something that HTML and Ajax frameworks have been missing… until now.

AngularJS is just HTML and Javascript

AngularJS by Google is a really simple Javascript framework that gives you the ability to separate the parts of your web client application by concerns. Angular allows you to define clearly delineated Controller, Service and Model layers that are completely separate from the templates or HTML. In fact, it you look at an HTML template from an Angular application, it looks pretty much just like plain HTML and it fairly easy to read and understand. I will repeat, it is just HTML.

Let’s look at an example. Angular provides that most applications would be “single-page” meaning that you won’t ever transition away from the header and footer once you reach the index.html, but instead the “live area” of the page will change based on elements that you choose as you click links. Thanks to HTML 5 history mechanisms, the Url appears to change as you switch pages. This makes the application extremely fast since you aren’t loading anything but changes as you progress through the application.

Essentially, if you use Angular routing, you will map a url say /test to a controller object, this controller object will process data and pass data to the HTML partial that will be included into the live area. The controller will typically interact with one or more services. The data that is passed to the HTML partial is merely the model. This is typical MVC architecture. Now let’s see how my application is structured.

Directives

The power of Angular likes mostly in directives.  Without this functionality Angular wouldn’t be nearly as useful to anyone. Directives define functionality and are mostly uses in conjunction with an html tag. For example, I can include my header partial just by using <header-menu></header-menu> in my index.html. The directive for this functionality is defined as follows:

 

directives.directive('headerMenu', function () {
    'use strict';
    return {
    	scope: false,
		//replace: true,
		//transclude: true,
    	restrict: 'E',
        templateUrl: 'templates/partial/header.html',
        controller: 'controllers.HeaderController'
    };
});

 

The HeaderController in this instance is unnecessary although, I might want to do some inclusion of dynamic elements of the header with it. Let’s take a look at the HeaderController…

 

controllers.HeaderController = function ($scope, $cookies) {
'use strict';

function init() {

var user = $cookies.username;
$scope.username = $cookies.username;

}

$scope.searchBar = new UISearch(document.getElementById( 'sb-search' ) );
$scope.searchBar.open();
$scope.searchData = {};
$scope.searchData.advanceSearchClicked = function() {

$scope.searchData.showAdvanced = !$scope.searchData.showAdvanced;

if ($scope.searchData.showAdvanced) {
$scope.searchBar.close();
} else {
$scope.searchBar.open();

}

};

init();
};

I’m not doing anything spectacular here… but you get the idea. You can also do controllers using the routing functionality. I do this by creating a configuration.js and defining JSON data that will provide data to the routing module.

 

var routes = routes || {};

 
//Route configurations
routes["/dashboard"] =  { 
        
         controller: 'controllers.DashboardController', 
		 templateUrl: 'templates/dashboard.html', 
		 aliases: ['/dash','/dasher'],
		 searchable: false,
		 meta: {
		   title: "Dashboard",
		   description: 'This is my description'
		 }
		 
 };
 
//in application.js

...

application.config(['$routeProvider', '$locationProvider','cfg', function AppConfig($routeProvider, $locationProvider, cfg, $routeParams) {
 
     $locationProvider.html5Mode(true).hashPrefix('!');
	 
	 console.log(cfg);
	 for (var route in cfg.routes)  {
		 
		 var routeObj = cfg.routes[route];
		 
		 $routeProvider.when(route, routeObj);
		
		if (routeObj.aliases) {
		 for (var i = 0; i < routeObj.aliases.length; i++)  
			  $routeProvider.when(routeObj.aliases[i], routeObj);
		}
		 
		 
		 
	 }


...

Notice that I am using HTML 5 routing… This is essential if you want pretty urls without having #! in them. Angular will automatically interpret for browsers that don’t support the HTML 5 history mechanism.

Services
Services in Angular are just areas where we can interact with servers or complete calculation or logic that is necessary for a page or to present data. For example, you might aggregate data from two REST services in an Angular service and add it to the scope. Let’s look at an example service that does just that.

services.factory('CMS', ['$resource','cfg', function($resource, cfg) {
  return function(postId) {
    
	console.log(cfg.cmsServiceAddress);
	return { 
	
	Post: $resource(cfg.cmsServiceAddress + '/?json=get_post&id=' + postId, {id: '@id'}),
	Posts: $resource(cfg.cmsServiceAddress + '/?json=get_posts'),
	Page: $resource(cfg.cmsServiceAddress + '/?json=get_page&id=' + postId, {id: '@id'}),
	
	};
  
  };
}]);

We are are getting fancy now by using resource to automatically populate a model for us. This particular service, gets data from WordPress via the JSON API plugin. Now lets see how to use it.

 

			 CMS(postId).Page.get({id: postId}, function(p){
                           console.log('Page success, got data: ', p); 
			
			    if (p && p.status == "ok") {
					
					title = p.page.title;
					description = p.page.description;
					
					$scope.Page = p;
					$scope.Content = p.page;
					
					 } else {
	
	     				alertService.add("Error", "Failed to Load Content...");
 
  					}
			
			}, function(err){

					alertService.add("Error", "Failed to Load Content...");
    				console.log('Page error');
						  
			});
			 

Scopes are Angular’s way to pass data, in the controller we pass the data to the HTML partial via the scope… In this case, we are adding content to the page this way. Let’s see how it is used.

 

<img src=”images/loading.gif” width=”214″ height=”206″ ng-show=”showLoad == true” class=”center”></img>

</div>

<div ng-bind-html=”Content.content”></div>

I display a loading dialog until the Content is loaded and then the page is rendered replacing the image. It’s pretty simple.

You can also include data in pages from the scope using the expression syntax. {{Content.content}} would put the content directly into the page for display.

Angular’s power also lies in it’s flexibility and architecture. Regardless of who the programmer is, the application should work similar enough for anyone familiar with Angular to work on it. And it really only takes a couple days to be up and running if you have knowledge of Javascript and HTML5. CSS can be extremely helpful as well since CSS is the mechanism by which a lot of the dynamic mechanisms work.

I think AngularJS is the future of web programming. Google has backed it and now we can stop pulling our hair out while trying to code in other inferior Javascript frameworks… AngularJS is definitely the Rolls Royce of the Ajax and dynamic web frameworks. Stay tuned for future posts because I am going to be presenting more examples from the AngularJS cookbook.

 

 

Responsive UI design is awesome, but pretty painful

I just completed a template design for a responsive UI using Bootstrap 3 and AngularJS and it has been a while since I have written anything about responsive UI so I thought I would write an update. My conclusion after all these months of working on them is that you can enjoy the fruits of your labor when you are done, but it can be a pretty painful process.

The first thing I learned about developing a responsive ui is that you probably should invest in a “ready made” template if you are using a CMS tool like Joomla or WordPress or outsource to someone who does it regularly if you want to start from scratch. It is fairly time consuming even for an experienced designer and can be extremely frustrating.

The second thing I learned was to use the right tools. I started out just trying to use a text editor and a browser and I learned really quick that I needed to expedite the development process. It had been several years since I had used Dreamweaver, but it is an extremely valuable tool for responsive design. Dreamweaver will show you multiple views of your application as you develop it and give you code and CSS insight when you need it.

Chrome and Chrome extensions are extremely valuable tools for the responsive UI arsenal. Chrome Developer Tools that are built in to Chrome are your best friend. Developer tools allow you to debug javascript, inspect div elements to see where they border and what styles are affecting them and a console for debugging. Other Chrome extensions I found useful are rulers, responsive ui views, eye dropper and more. Browse the extensions on the Chrome Store to learn more.

AngularJS-largeIn another post, I am going to extol the virtues of AngularJS by Google as a development tool and framework for really advanced websites and web applications, but I will mention that if you are doing more than just developing a static responsive ui and you really want dynamic and easy Ajax functionality in your application, then AngularJS is definitely the route to go. Angular provides very simple tools to allow you to utilize Ajax services and utilize the data returned in the simplest fashion.

My UI Philosophy

As I have mentioned many times, I completely disagree with frameworks and tools that write one language from another. After many years of writing applications with JSP/JSF, Vaadin, PHP. Perl and other languages that render html, I completed disagree with their use. I believe firmly in separating the presentation from the backend. Angular not only makes this process easy but it also allows you to separate your javascript logic from your HTML presentation. Clearly defined delineations in your application make sense and they make for a fantastic design.

Mobile First

Here is another thing I learned really quick… Build your handheld application view before you move out to the tablet view and desktop views. In my last project, I started with a desktop view template and some completed pages, then I moved on to make it responsive and I had to rework those pages and just through quite a few hoops to get the UI to scale and respond correctly. Write your handheld template, then move out to tablet and get that right, then move out to desktop. Do not write a single page in one view or another until your template is set. You will definitely thank me for this later…

Bootstrap

ImageI should have mentioned Bootstrap 3 already but I guess I was saving the best for last. If you do have to design a responsive template from scratch or you are searching for a template for your web site, make sure you start with Bootstrap as a requirement. It is without a doubt an amazing framework that unifies the approach to responsive ui design. I highly recommend spending a couple hours learning about how to utilize it before you dig in. Bootstrap allows you simple “grid-based” CSS approaches to your ui design that will automate the process of creating your template.

CMS

We are no doubt at the end of the CMS era. While I have no problems with CMS-based approaches and they get you 80% of the way through development really quickly, I do think they hamstring your development work in a lot of works. That last 20% can be really difficult to achieve using a CMS. Lately, I have taken the approach that I just use Angular and pull the data from the CMS via a RESTful service with JSON. This allows for users to still input content and take an easier approach and doesn’t tie me in to a particular CMS. I also get the added benefit of not having to munge PHP or some other language into my UI code.

If you are using a CMS and don’t have the technical voltage to be able to write your own front end, then I highly recommend choosing a template based on Bootstrap itself. There are plenty of them out there. You will thank me later, I promise.

Wrapping up

I’ll have plenty of folks who will disagree with my assessment to the CMS and most likely to my assessment of page rendering technologies like JSF, but I don’t like getting tied into technologies and have to code in a box. While Bootstrap and Angular have boxes of their own I believe the boxes to be much larger by order of magnitude.

I highly recommend putting the responsive ui tools in your repertoire. You will not only be setup for the future but you’ll have a lot of fun doing it.

 

 

 

 

 

 

 

 

Struts 2 isn’t Spring 3 but its darn close

By Chris L Hardin
Sr. Software Architect

Five years ago I wrote off Struts in favor of Spring MVC and with good reason. I was already using Spring for a myriad of other things and it was just logical to use the MVC portion since it had all the niceties that I came to expect from Struts, plus a lot more. Also, after Spring 3 came along, I think I decided there couldn’t be anything farther from perfection.

I started using Struts when it was still in its infancy and I used it on more than 20 projects, some of which were really high profile like the Toyota and Lexus Web sites. Struts was the solution to all these home-rolled frameworks that other architects were writing at the time. I think at this point all of those in-house solutions have been replaced by some Web framework by now or at least I hope they are.

I enjoyed Struts while it was in its heyday and I still think it dominates as the most widely used and accepted framework even today. All this being said, I haven’t seen anything Struts can do that can top Spring 3 though.

Recently, I had the pleasure of working on a project that was full-blown Struts 2 and I kept saying things like, “This is a new project, why are we using Struts.” and “Struts is dead…move on.” I was wrong.

Struts 2, which is actually WebWork rebranded as Struts, is a different animal. A pretty well designed framework that does a good job of creating a MVC architecture. It has all the features you have come to expect from Struts, along with a plugin framework and much, much more.

Struts 2 is still configuration heavy and I am pretty disappointed in that, but there is a convention plugin that allows you to use annotations and there is a JSON plugin as well that is really useful. All in all, I think there are around 30 plugins or more in Struts 2 that you can use.

Since I really love Spring 3 and conventional configuration options, I decided I would share some of my Struts 2 + Convention plugin configurations and code.

Simply, the convention plugin annotations allow you to use the “Zero Configuration” option for Struts 2, which I highly recommend. If you are still gluing your actions together with the struts.xml, you really need to stop overworking yourself. Let’s look at some examples of creating actions by convention.

The app that follows is an app for searching up and displaying users using either Ajax forms or an HTML form. The options you have are to return another page or just to return the JSON data.

I only have one class for this example and here is the declaration.


@ParentPackage("json-default")
@Namespace("/")
public class DefaultAction extends ActionSupport implements
ModelDriven {

Our UserSearch object contains just setters and getters for your form like get/setFirstName, etc. The UserSearch object is also annotated using the Java Validation Framework annotations. We implement ModelDriven so that we can externalize our form bean properties away from our action. We also extend ActionSupport so that we can add error and validation messages. I do not like having to extend ActionSupport just for the sake of adding messages because my object is no longer a POJO at that point. I couldn’t find anyway to add messages without extending this class.


@Action(value = "Start", results = { @Result(name = "success", location = "start.jsp") })
@Override
public String execute() {
...

private UserSearch search = new UserSearch();

@Override
public UserSearch getModel() {

return search;

}

Our first action is simple. Someone asks for /Start and we execute and redirect to start.jsp if success is returned.


@Action(value = "Process", results = { @Result(name = "success", location = "start.jsp") })
public String process() {

Set<ConstraintViolation> violations = search
.validate(search);
for (ConstraintViolation violation : violations) {
addActionError(violation.getPropertyPath() + " "
+ violation.getMessage());
}

In our form, we submit to /Process and since we have annotated the UserSearch with the Java Validation Framework, we can now validate the object. Struts 2 has built-in validation,. but I prefer to use the Java standard. If there are any constraint violations, we add them to action messages and they get returned to the client to display in the JSP page if you are using the correct tags from Struts.


@Action(value = "json", results = { @Result(name = "success", type = "json"),
@Result(name = "error",location = "start.jsp") })
public String executeAsJSON() {

Just in case you wanted to return the results of the search as JSON, you can do this in Struts 2. This will return the Model represented as JSON. This doesn’t do you much good in this case because the model is what we passed in the form, a UserSearch object. I got around this by putting a new property on UserSearch called UserSearchResult which contains the results of the search. In the executeAsJSON method, I merely call getModel().setUserSearchResult(result) and then I can access the results in JSON. In Spring 3, I could have set the return type of the method to UserSearchResult and solved the problem, but I couldn’t figure out in Struts how to do this or I don’t know if it is even possible yet, so I settled for my little hack.

I know I said that there was nothing in the struts.xml, but I didn’t exactly tell the truth. I did set some configuration options in the file.

<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<!---->

<!-- -->

<!-- -->

<!-- -->
<!-- -->
<!-- -->
<!-- -->

<!-- -->

<!---->

I’m not going to go into an explanation of these properties. They are kind of self explanatory anyway.

There is also another great plugin for Struts 2 for Spring integration. It allows you to use @Autowire in your actions to automatically inject the value of a bean from Spring into the action. This is very useful, but if you’re already using Spring, you’ll probably use the more flexible Spring 3 features instead of Struts anyway.

I have to say that I love Struts 2 and you really can’t go wrong by choosing it for your MVC framework. I will add though that some more work needs to be done on supporting the convention-based options. Some of the things I would like to see are the ability to easily just let the return type be anything and have the framework convert it to JSON and I’d like to see content negotiation whereby I can change the output of the method from json to XML to PDF to Excel, just by requesting a different extension.

All in all Struts may be an old dog, but it certainly has learned some new tricks.

JQuery…my new favorite Ajax framework

After a several stints with Dojo, Ext and Prototype, I decided to see if JQuery could provide anything better. I figure it’s a good thing to be versed in several Ajax frameworks. You never know which one you might use next really. I am definitely weary of Dojo and it’s lack of support and constant revamping to remove things that worked previously. I love Ext, but turning around and charging for it was really a bad idea on their part. I think they have the best forums and support and their API is really easy to use.
After looking into JQuery, I was pleasantly surprised to find out how lightweight it was. It is a tiny fraction of the size of the Dojo library and the syntax of use is more concise and direct. Of course, this lack of size is mainly because all of the widgeting control is included in other separate plugins that you can add on, but I do like that. It is simple to download a plugin or write your own. I really avoid writing something custom unless a last resort. There is always one out there ready for use.
So, I put JQuery into my project and I already had a Spring Controller using Content negotiation serving up my JSON and I gave it a whirl. It just a few minutes I was able to get data from the JSON object and then populate anything or do anything I wanted to do with it. I accomplished it in just a few lines of code.

$(document).ready(function(){

$.getJSON(“rest/DataService/loanTypes.json”,{id: $(this).val(), ajax: ‘true’}, function(j){

var options = ”;
var loanTypes = j.loanTypeList;

var currOptions = $(“select#loanTypes”).html(options);

for (var i = 0; i < loanTypes.length; i++) { options += '’ + loanTypes[i].loanType + ”;
}

$(“select#loanTypes”).html(options);

});

});

At first the $ notation takes a little getting used to, but just think of it as a dojo.byId on steroids. It’s a really powerful notation. This is just a snippet from the example, but I just get the JSON from the server and populate a select box manually creating option elements. Ordinarily I would frown upon doing this, but it’s just an example. A proper way would be to use a JQuery UI component that would just take the JSON automatically.

I found several plugins that were really useful on the JQuery site. I even used JQuery UI and another plugin to replace alert messages with Ajax Alerts.

Most of the other libraries out there are all very self contained, but JQuery just allows you to download plugins at will. This is very powerful but it has it’s drawbacks. You have to make sure that the plugin you download and all it’s dependencies all match with the supported versions of each. This can make upgrading JQuery difficult if you use a lot of plugins. I recommend using them cautiously.

You can find a list of all the JQuery plugins here.

http://plugins.jquery.com/

You can download and install JQuery into your project as simply as downloading the js file and including in your HTML page.

Go get it and try it out.

JQuery http://www.jquery.com

If you want support or see other examples of how other users are leveraging the framework, check out the forum.

http://forum.jquery.com/