Periodic Table of Typefaces

SquidSpot.com has a very nice Periodic Table of Typefaces that you can purchase (name your own price). Here's a glimpse at it.

Display JSF validation errors in a RichFaces modalPanel

This took some serious research and trial-and-error. It's a non-trivial matter to display JBoss Seam validation errors in a RichFaces modalPanel. Here's the scenario: The user clicks the Submit button on your Seam page, firing off the form validation. Now, based on the existence of errors, you'd like to display a modal window that lists the errors; otherwise, you'd like to continue with the submit button's action.

This article, and its links, helped in coming up with an answer: http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4061517

Here's the Submit button's code:

<a4j:commandButton action="/home.seam" value="Submit"
  oncomplete="#{facesContext.maximumSeverity == null ? 'Richfaces.hideModalPanel(\'mpErrors\');' : 'Richfaces.showModalPanel(\'mpErrors\');'}"/>

You render the oncomplete on the server vs. the client. Based on the FacesContext errors, you either show or hide the modalPanel object.

Here's the modalPanel's code:

<rich:modalPanel id="mpErrors" width="350" height="250">
<f:facet name="header">
  <h:panelGroup>
  <h:graphicImage value="/img/msginfo.png" style="float:left; margin-right: 3px;" />
  <h:outputText value="System Messages" />
  </h:panelGroup>    
</f:facet>
<f:facet name="controls">
    <h:panelGroup>
        <h:graphicImage value="/img/close.png" styleClass="hidelink" id="hidelinkmpErrors"/>
        <rich:componentControl for="mpErrors" attachTo="hidelinkmpErrors" operation="hide" event="onclick"/>
    </h:panelGroup>
</f:facet>
<a4j:outputPanel ajaxRendered="true" style="width:100%">
      <rich:messages passedLabel="Data is allowed to be emailed."  
        style="width:100%; text-align: left; color: red; font-weight: bold;" rendered="#{facesContext.maximumSeverity == null ? 'false' : 'true'}" 
        layout="list">
          <f:facet name="errorMarker">
              <h:graphicImage style="margin-right: 5px;" value="/img/msgerror.png" />   
          </f:facet>
      </rich:messages>
      <div style="text-align:center">
      <a4j:commandButton style="text-align:center; margin: 29px;" id="btnReturn" value="Return to Form" >
        <rich:componentControl for="mpErrors" attachTo="btnReturn" operation="hide" event="onclick"/>
      </a4j:commandButton>
      </div>
</a4j:outputPanel>
</rich:modalPanel>

Next: How do you show a "Please wait..." modalPanel while the page's action is sending an email? Still working on that.

40 Web developer cheat sheets

40 great cheat sheets for front-end Web developers,

Can't post to Sun forums

Has anyone else run into this bizarre behavior? I've been trying to post to the Sun Java forums, but it won't let me. I log in, click "Post New Topic" and see the post window display; but then it won't let me type anything into the Message box:


The Message box is collapsed. No matter what I do, it won't expand the Message box so I can type the content of my forum post. I tried clicking Plain Text, and it shows a little animation as if it's doing something, but that doesn't do anything.

When I deleted my Sun.com cookies yesterday, it seemed to help temporarilly. But the problem is back today.

Comparison of JavaScript libraries

Here's a great presentation on JavaScript libraries. I'm partial to jQuery but all seem powerful. More presentations on jQuery here: http://ejohn.org/blog/jqueryembraceextend/

JavaScript Library Overview

View more Microsoft Word documents from jeresig.

Populate and validate JSF selectOneMenu

Using a backing bean or Seam component (on JBoss), you can easily populate a JSF selectOneMenu (JSF dropdown box server-side control):

<h:selectonemenu id="lstRating" value="#{asset.rating}" required="true" requiredMessage="Rating is required.">
  <f:selectitems value="#{asset.ratingItems}" />
</h:selectonemenu>
<rich:message for="lstRating" styleclass="errors" />

In this example, you have a selectOneMenu with id of lstRating. It gets its SelectItem elements from the asset.ratingItems property on the backing component. The selected item is stored in asset.rating.

  private String rating;
  private ArrayList<SelectItem> ratingItems = null;

  public ArrayList<SelectItem> getRatingItems(){
    ratingItems = new ArrayList<SelectItem>();
    ratingItems.add(new SelectItem(null,"Select One..."));
    ratingItems.add(new SelectItem("TV-Y", "TV-Y"));
    ratingItems.add(new SelectItem("TV-Y7", "TV-Y7"));
    ratingItems.add(new SelectItem("TV-G", "TV-G"));
    ratingItems.add(new SelectItem("TV-PG", "TV-PG"));
    ratingItems.add(new SelectItem("TV-14", "TV-14"));
    ratingItems.add(new SelectItem("TV-MA", "TV-MA"));

    return ratingItems;
  }

  public String getRating(){
    return this.rating;
  }

  public void setRating(String rating){
    this.rating = rating;
  }

In the above code, we declare an ArrayList of SelectItem object type. The getRatingItems() property instantiates the ratingItems ArrayList and populates it with SelectItem objects. Note the first SelectItem has a null value; if the user leaves the dropdown box to this item, the required validator will detect it as a blank value and throw a validation error.

IE fieldset overflow bug

If you've applied a background color or image to a form fieldset, you know that Internet Explorer doesn't handle it well. Zoe Gillenwater has a great article on an easy fix.

Public beta of Flash Builder 4

Adobe® Flash® Builder™ 4 (formerly Flex Builder), is now in public beta and available for download from Adobe Labs:

Flash Builder 4 delivers a long list of new features, plus improvements to many existing features. There are three main themes to this release: developer productivity, designer-developer workflow, and data-centric application development. For an overview of the features included in this first public beta release, please read Tim Buntel’s What’s New in Flash Builder 4 article and watch the new feature videos. As always, the Flex 4 framework is included within Flash Builder, so please also read Matt Chotin’s What’s New in the Flex 4 SDK article.