Portlet SimpleFormController Cheat Sheet

It's holiday season so I've finally found a bit of time to create a version of the SimpleFormController cheat sheet for the portlet MVC. Once again, remember that this cheat sheet should be used in conjunction with the API and source code. It is not meant to be a comprehensive translation of the source code. Rather, it is meant to highlight important areas where your own implementation should hook in to the standard workflow.

When compared to the servlet, you can see that the portlet workflow differs mainly in the seperation of the action phase and render phase, as per the JSR-168 spec. Some main points of comparison to note:

• showNewForm() and showForm() will be called during the render phase (depicted on the LHS of the diagram).
• The 3 main stages of submission (backing object phase, bind and validate phase, process form submission phase) are found in the action phase (depicted on the RHS of the diagram).
• In the servlet version, we often need to bind the original form on sucessView, and we did this by calling showForm() during onSubmit(). The same thing is achieved in the portlet version by calling showForm() during onSubmitRender()

I've tweaked the colors slightly, so hopefully they will turn out a bit better on grayscale printers. The servlet version of the cheat sheet has been updated to keep the two cheat sheets consistent.

Hope you will will find this useful. Please leave comments and let me know if anything is wrong, or if there are any suggestions. Happy new year!

Portlet SimpleFormController Cheat Sheet Servlet SimpleFormController Cheat Sheet

Triple equals in JavaScript

I think I'm a pretty decent javascript programmer, so it's always refreshing to learn something new in a language I'm so familiar with! I recently had some time to watch those great lectures from Doug Crockford at YUI Theatre, and noticed lots of === in the code.

That's right, it's not a typo, but 3 equal signs, and it means equality without type coersion. In other words, if using the triple equals, the values must be equal in type as well.

e.g.

0==false   // true
0===false  // false, because they are of a different type
1=="1"     // true, auto type coersion
1==="1"    // false, because they are of a different type

Another handy tool in my javascript bag of tricks, as recommended by Mr father of javascript himself!

SimpleFormController Cheat Sheet

I felt I didn't have a good understanding of Spring MVC until I understood the lifecycle of the controller. Not being able to find any good resources that showed the workflow step by step, I created this flowchart of the SimpleFormController.

In a single page cheat sheet format, I've found it handy to keep it on my desk. For the beginner, it should be used in conjunction with the API, and nothing beats firing up a debugger and stepping through the code yourself. Once you understand the SimpleFormController, you can easily understand the WizardFormController or create your own custom controller.

I hope someone will find this useful. Please leave comments and let me know if anything is wrong, or if there are any suggestions. Cheers!

SimpleFormController Cheat Sheet

Fluid Horizontal Menu - Using UL, CSS (and a table)

In the A List Apart article: Taming Lists there is a very simple example of using UL to markup a horizontal list. Making this into a fluid full width menu proved much more difficult than I thought, and I have provided the implementation here.

The broad requirements of this are:

• There is a color for the menu, and another color for the current item. The menu has a bottom border the same color as the current item.
• The menu must not wrap when browser is resized, it must always be a single horizontal row
• When browser width is smaller than menu, scrolling the viewport across will still display the menu bottom border
• When browser width is larger than the menu, the menu expands to 100% width
• The items in the menu are dynamically generated on the server (so the number of items may vary, as can the total possible width)

Show below, is the screenshot of the final product.

The final code to produce this menu is as follows:

<style type="text/css">
li, ul {
   padding: 0;
   margin:0;
}
table.menu {
   background-color: #CCC;
   border-bottom: 5px solid #8C78C5;
   width: 100%;
   padding: 0;
   border-collapse:collapse;
}
table.menu td, table.menu tr {
   border: 0; padding: 0;
}
table.menu ul {
   white-space: nowrap;
   padding: 4px 0px;
}
table.menu li{
   display: inline;
   list-style: none;
}
table.menu a{
   background-color: #CCC;
   padding: 4px 10px;
   color: black;
   text-decoration: none;
   border-left: 1px solid white;
}
table.menu a:hover {
   text-decoration: underline;
}
table.menu a.first {
   border-left: none;
}
table.menu a.current{
   color: white;
   background-color: #8C78C5;
}
</style>

<!--[if IE]>
<style type="text/css">
table.menu ul{
   width:110%;
}
</style>
<![endif]-->

<table class="menu"><tr><td><!--
  --><ul><!--
  --><li><a href="#" class="first">Spring MVC framework</a></li><!--
  --><li><a href="#">Struts MVC</a></li><!--
  --><li><a href="#" class="current">Tapestry</a></li><!--
  --><li><a href="#">JSF</a></li><!--
  --><li><a href="#">Java Server Pages</a></li><!--
  --></ul><!--
--></td></tr></table>

To summarise the main points of the implementation:

• The LI are inline, and the UL has white-space:nowrap so that the items are in a single row
• The background-color is defined in the anchor so that the entire "tab" is clickable
• To increase the height of each "tab", add padding to the anchor, and also to the UL because the anchors are inline elements
• We need the container to expand to accomodate its content regardless of browser viewport size, so that the bottom border stretches with the content. A table is used because IE doesn't suppport display:table* attributes
• Whitespace is commented out because for some reason compliant browsers render a gap
• An IE only rule is provided to solve a problem which appears to be collapsing related.

For the full explaination of this menu, see my article Fluid Horizontal Menu - Using Unordered List, XHTML, CSS (and a table)

This menu has been tested on IE6, IE7, Firefox 2, Opera 9, and Safari 3beta