Jake Trent

JSF Modal Goodness

Meet the new web. The simpler the better. The cleaner the better. The more pleasing the colors the better. The fuzzier feelings the better. The latest fuzzies have been brought on by a slew of modals. Previously, we haven’t used many modals in our layouts and designs, so here’s the first working pattern on how to get this kind of stuff working.

This solution allows content to appear in a modal, validation errors to post back to the modal, edits made in a modal to persist back to the database, and success messages to appear on parent page.

Meet the new web. The simpler the better. The cleaner the better. The more pleasing the colors the better. The fuzzier feelings the better. The latest fuzzies have been brought on by a slew of modals. Previously, we haven’t used many modals in our layouts and designs, so here’s the first working pattern on how to get this kind of stuff working.

This solution allows:

Example uses these technologies:

This includes these pieces:

Overall, the flow occurs as follows:

Note:

<a4j:outputPanel id="alerts">
    <ldsp:alerts />
</a4j:outputPanel>

<div class="target">
    <h2>Edit Personal Information</h2>

    <p>Please make the necessary changes and press "Save" when finished.</p>

    <div id="notes">
        <dl>
            <dt>Official Name</dt>
            <dd>
                #{personDetailsBean.person.name.fullName}
            </dd>
        </dl>
        <dl class="short-inputs">
            <dt>Preferred Name</dt>
            <dd>
                <h:inputText styleClass="input-text pref-name-field" value="#{personDetailsBean.person.preferredFirstName}" required="true" requiredMessage="Preferred first name required." />
            </dd>
            <dd>
                <h:inputText styleClass="input-text pref-name-field" value="#{personDetailsBean.person.preferredMiddleName}" required="true" requiredMessage="Preferred first name required." />
            </dd>
            <dd>
                <h:inputText styleClass="input-text pref-name-field" value="#{personDetailsBean.person.preferredLastName}" required="true" requiredMessage="Preferred first name required." />
            </dd>
        </dl>
        <dl>
            <dt>Blood Type</dt>
            <dd>
                <h:selectOneMenu value="#{personDetailsBean.person.bloodType}">
                    <f:selectItem value="#{null}" itemLabel="None given" />
                    <f:selectItems value="#{personDetailsBean.bloodTypesList}" />
                </h:selectOneMenu>
            </dd>
        </dl>

        <!--[if IE 6]>
        <dl>
        <dt>&nbsp;</dt>
        <dd>&nbsp;</dd>
        </dl><![endif]-->

        <p class="buttons">
            <h:commandButton action="#{personDetailsBean.savePerson}" value="Save" styleClass="button-default" />
            <input type="button" class="button-nondefault jqmClose" value="Cancel" />
        </p>
    </div>
</div>

</a4j:form>


<strong>Note:</strong>
<ul>
<li>&lt;ldsp:alerts /&gt; - custom component to display Alerts.</li>
<li>The ajaxSubmit attribute on the a4j:form must use a capital S for 'Submit'.  (My code renderer on this page is lowercasing that for some reason.)  Same with the 'r' on 'reRender'.</li>

<h2>Server-side Logic</h2>

<h3>Java Model:</h3>
```java
@Entity
public class Person implements Serializable {
    @Column(name = "PREF_FIRST")
    private String preferredFirstName;

    @Column(name = "PREF_MIDDLE")
    private String preferredMiddleName;

    @Column(name = "PREF_LAST")
    private String preferredLastName;

    @Column(name = "BLOOD_TYPE")
    private String bloodType;

    /** ... */
}