Raible's Wiki: HibernateRelationshipsUI

Raible's Wiki

Raible Designs
Wiki Home
News
Recent Changes

AppFuse

Homepage
  - Korean
  - Chinese
  - Italian
  - Japanese

QuickStart Guide
  - Chinese
  - French
  - German
  - Italian
  - Korean
  - Portuguese
  - Spanish
  - Japanese

User Guide
- Korean
- Chinese

Tutorials
  - Chinese
  - German
  - Italian
  - Korean
  - Portuguese
  - Spanish

FAQ
- Korean

Latest Downloads

Other Applications

Struts Resume
Security Example
Struts Menu

Set your name in UserPreferences

Referenced by
HibernateRelationshi...

JSPWiki v2.2.33

Hide Menu

HibernateRelationshipsUI	Search Wiki:
Your trail:

This is version 40. It is not the current version, and thus it cannot be edited.
[Back to current version] [Restore this version]

Part II: Create Weblog UI - A HowTo for creating a UI (in Struts) for managing the DAOs created in the Hibernate Relationships tutorial. I've eliminated creating managers in this tutorial for a couple reasons: 1) to reduce the amount of code and 2) to show you that you don't have to create them.

About this Tutorial

In this section, you'll create a UI that has the following features.

Edit a User and their Weblogs (many-to-many)
CRUD a Weblog and its Users (many-to-many)
CRUD a Weblog and its Entries (one-to-many)
Add a Category drop-down for Entries (many-to-one)

[1] Modify userForm.jsp to allow creating/editing a weblog (many-to-many)
[2] Modify the UserAction to support editing a user's weblogs
[3] Create a WeblogAction to handle CRUD-ing Weblogs
[4] Create JSPs to display a Weblog's information
[5] Add the ability to edit users from the Weblog Detail Screen
[6] Add the ability to edit entries from the Weblog Detail Screen

Modify userForm.jsp to allow creating/editing a weblog [#1]

In order for the Struts version of AppFuse to allow editing of a Weblog's attributes from the User object, you need to modify User.java to support indexed properties. You can do this by adding indexedProperties="true" to the @struts.form tag in User.java.




@struts.form include-all="true" extends="BaseForm" indexedProperties="true"

NOTE: While you're at it, you might as well add this same line to Weblog.java. You can also add it to Entry.java and Category.java, but you don't need indexedProperties="true".

A weblog record has 3 fields: weblogId, blogTitle and dateCreated. The blogTitle is the only field that users should be able to edit. The rest of them can be set programmatically. Open web/pages/userForm.jsp and add the following code to the bottom of the form (between </table> and </form>.

<fieldset style="position: absolute; top: 190px; left: 520px">
    <legend style="font-weight: bold">Weblogs</legend>
    <c:forEach var="blog" items="${userForm.weblogs}" varStatus="index">
        <input type="hidden" name="weblogs[<c:out value='${index.index}'/>].weblogId" value="<c:out value='${blog.weblogId}'/>"/>
        <input type="hidden" name="weblogs[<c:out value='${index.index}'/>].dateCreated" value="<fmt:formatDate value='${blog.dateCreated}' pattern="MM/dd/yyyy"/>"/>
        <input type="text" name="weblogs[<c:out value='${index.index}'/>].blogTitle" size="40" value="<c:out value='${blog.blogTitle}'/>"/><br/>
    </c:forEach>
</fieldset>

Run ant clean deploy, go to http://localhost:8080/appfuse/editProfile.html and login as "tomcat/tomcat". You should see a screenshot like the one below.

If you try to save at this point, you'll probably get the following error:

The process did not complete. Details should follow.

IllegalArgumentException occurred calling getter of org.appfuse.model.Weblog.weblogId

object is not an instance of declaring class

This happens because the "weblogs" property of User is populated with a bunch of WeblogForm objects, instead of Weblog objects.

Modify the UserAction to support editing a user's weblogs [#2]

To fix saving a User, add convertLists(user) to the save() method of UserAction.java (in src/web/**/webapp/action):




        convertLists(user);



        try {

            mgr.saveUser(user);

In addition, you can add convertLists(user) to UserAction.edit():




        userForm.setConfirmPassword(userForm.getPassword());

        convertLists(userForm);

        updateFormBean(mapping, request, userForm);

NOTE: The reason convertLists(Object) isn't called automatically by the convert(Object) method is because it invokes lazy-loaded collections. APF-81

This will allow you to get rid of the <fmt:formatDate> tag around the dateCreated property.

<input type="hidden" name="weblogs[<c:out value='${index.index}'/>].dateCreated" value="<c:out value='${blog.dateCreated}'/>"/>

Run ant deploy, wait for Tomcat to reload your application, and then try saving the User Profile again. This time it should succeed - and you can also change the blog title if you so choose.

Create a WeblogAction to handle CRUD-ing Weblogs [#3]

In order to edit a Weblog object, and it's children (Users and Entries), you need to create a WeblogAction.java class. Before you do that, you'll need to add a couple constants to src/dao/**/Constants.java:




    /**

     * The request scope attribute that holds the weblog form.

     */

    public static final String WEBLOG_KEY = "weblogForm";



    /**

     * The request scope attribute that holds the weblog list

     */

    public static final String WEBLOG_LIST = "weblogList";

Then download WeblogAction.java and put it in your src/web/**/webapp/action directory. This class already has the convertLists(Object) methods that you added to UserAction.java.

Create JSPs to display a Weblog's information [#4]

Add the following i18n keys to web/WEB-INF/classes/ApplicationResources.properties. You'll need these for the master/detail screen when editing weblogs.

# -- weblog form --
weblogForm.weblogId=Weblog Id
weblogForm.blogTitle=Blog Title
weblogForm.dateCreated=Date Created
weblogForm.entries=Entries
weblogForm.users=Users

weblog.added=Weblog has been added successfully.
weblog.updated=Weblog has been updated successfully.
weblog.deleted=Weblog has been deleted successfully.

# -- weblog list page --
weblogList.title=Weblog List
weblogList.heading=Weblogs

# -- weblog detail page --
weblogDetail.title=Weblog Detail
weblogDetail.heading=Weblog Information

Create weblogList.jsp and weblogForm.jsp files in web/pages.

Add a "WeblogMenu" to web/WEB-INF/menu-config.xml:

<Menu name="WeblogMenu" title="weblogList.title" page="/weblogs.html"/>

Add this menu to web/pages/menu.jsp:

...
    <menu:displayMenu name="WeblogMenu"/>
</menu:useMenuDisplayer>

There is an issue with Struts where the client-side validation blows up if you have <html:javascript> tags in your page and no validation rules defined. To prevent this from happening, add at least validation rule to Weblog.java. For example, that blogTitle is a required field.




    /**

     * @hibernate.property column="blog_title" not-null="true"

     * @struts.validator type="required"

     */

    public String getBlogTitle() {

        return blogTitle;

    }

At this point, you should be able to run ant deploy reload and navigate to the "Weblog List" (from the menu). You should also be able to perform CRUD on a weblog object.

NOTE: If you get a "invalid LOC header (bad signature)" error, you'll need to stop/start Tomcat to get rid of it. To prevent it from happening in the future, you'll need to patch build.xml

and metadata/web/web-settings.xml

(APF-123

One issue you might run into when adding a new Weblog is that a created date is not set. To fix this, add the following in WeblogAction.java (in the save() method):




        if (isNew) {

            weblog.setDateCreated(new Date());

        }



        mgr.saveObject(weblog);

Add the ability to edit users from the Weblog Detail Screen [#5]

In order to view and edit the Users associated with a Weblog, you need to add some code to weblogForm.jsp that will allow you to do this. After the "dateCreated" row, add the following:




    <tr>

        <th class="tallCell"><fmt:message key="weblogForm.users"/>:</th>

        <td>

            <nested:iterate property="users" id="user" indexId="index">

                <nested:hidden property="password"/>

                <nested:hidden property="confirmPassword"/>

                <nested:text property="username" readonly="true"/> 

                <nested:text property="firstName"/> <nested:text property="lastName"/>

                <nested:hidden property="addressForm.city"/>

                <nested:hidden property="addressForm.province"/>

                <nested:hidden property="addressForm.country"/>

                <nested:hidden property="addressForm.postalCode"/>

                <nested:hidden property="passwordHint"/>

                <nested:hidden property="website"/>

                <nested:hidden property="email"/>

                <nested:hidden property="version"/>

                <nested:hidden property="enabled"/>

                Roles: 

                <c:forEach var="role" items="${user.roles}" varStatus="status">

                    <c:out value="${role.name}"/><c:if test="${!status.last}">,</c:if>

                    <input type="hidden" name="users[<%=index%>].userRoles" value="<c:out value="${role.name}"/>" />

                </c:forEach>

                <br />       

            </nested:iterate>

        </td>

    </tr>

The WeblogForm is request-scoped, so that's why you have to put all the attributes of user as hidden fields in the page. Other options include making the form session-scoped, as well as re-fetching the object in your Action before saving it. All of these approaches have issues:

Request-scoped: Everything has to be in the page as editable or hidden fields. If you leave a field out, it'll get set to null when you save the page. There may also be security implications with using hidden fields - so don't use this approach if you have sensitive data.
Session-scoped: You have to clean up the session after successfully saving the form.
Re-fetching before save: You have to figure out which fields have changed and merge the two objects together.

The request-scoped method is used in this example because it's one of the easiest to understand. This particular "editing users in a weblog form" probably wouldn't be used in the real world (rather you'd have a <select multiple="multiple"%gt;). However, it does show you how to edit a many-to-many on both ends.

In UserAction.java, there is logic to grab the usersRoles, fetch the Role objects from the database, and set them on the User object. You need to replicate this functionality in WeblogAction. Add the following just after the convertLists() call in WeblogAction.save():




        convertLists(weblog);



        // loop through and make sure all the roles are saved on User

        if (weblog.getUsers() != null) {

            for (int i=0; i < weblog.getUsers().size(); i++) {

                User user = (User) weblog.getUsers().get(i);

                String[] userRoles = request.getParameterValues("users[" + i + "].userRoles");



                for (int j = 0; userRoles != null &&  j < userRoles.length; j++) {

                    String roleName = userRoles[j];

                    user.addRole((Role)mgr.getObject(Role.class, roleName));

                }

            }

        }

Run ant deploy db-load and navigate to the Weblog with an id of 2. This weblog should have one user assigned to it - the mraible user. To add an additional user, run the following against your database:

insert into weblog_user values ('tomcat', 2);

If you're using < AppFuse 1.9, You may notice that the disabled fields are highlighted with a border when you click on those fields - even though they aren't editable. To fix this, apply this patch. Also, note the use of class="tallCell on the <th> that holds the Users: caption. This is used to put the caption at the top of the cell. After inserting the tomcat user and refreshing the page - your screen should resemble the image below.

You should be able to modify the first and last name of the listed users without any issues.

: You may notice that clicking "Refresh" on your browser after saving a Weblog results in an error. To fix this, you can use the redirect-after-post pattern. In the WeblogAction.save() method, change:




    return mapping.findForward("edit");

To:




    return new ActionForward("/editWeblog.html?weblogId=" + weblog.getWeblogId(), true);

NOTE: In Struts 1.2.7, you can use the ActionRedirect

to implement post-and-redirect a bit easier. However, Struts 1.2.7 has some issues

, so AppFuse still uses 1.2.4 at the time of this writing.

Add the ability to edit entries from the Weblog Detail Screen [#6]

To edit a Weblog's entries on the same weblog form, you need to add some more code, just after the Users row.




    <tr>

        <th class="tallCell"><fmt:message key="weblogForm.entries"/>:</th>

        <td>

            <nested:iterate property="entries" id="entry" indexId="index">

            <div id="entry<%=index%>">

                <nested:hidden property="entryId"/>

                <nested:hidden property="weblogId"/>

                <nested:hidden property="timeCreated"/>

                <nested:textarea property="text" style="width: 400px; height: 100px"/>

                <br />

                Posted at: <nested:write property="timeCreated"/></span>

            </div>

            </nested:iterate>

        </td>

    </tr>

Run ant deploy db-load and view the same weblog again. You should see a screen like the one below:

If you try to clicking the "Save" button, you'll get a nice and descriptive javax.servlet.ServletException: BeanUtils.populate stack trace. This is caused by the fact that the struts_form.xdt (prior to AppFuse 1.9) did not account for plurals that ended in "ies". To fix this, replace metadata/templates/struts_form.xdt with the latest one from CVS (right-click, save as).

Run and clean deploy and try clicking the Save button again. This time you might get the following lovely error:

The process did not complete. Details should follow.

Could not convert java.lang.String to java.sql.Timestamp

I'll admit, I struggled with this issue for hours and I still don't have a good solution. From my hours of trial-and-error, the only conclusion I can come up with is that Struts (and Commons BeanUtils in particular) can't handle java.util.Date and java.sql.Timestamp together very well. If you know of a solution that'll allow displaying and saving a date and timestamp on the same form, please comment on APF-176. The problem is basically that I can't get the DateConverter to recognize Date as a java.util.Date - for some reason it thinks it's a Timestamp in the following logic:




        if (value instanceof Date) {

            DateFormat df = new SimpleDateFormat(DateUtil.getDatePattern());

            // this works in unit tests, but when running in Tomcat, a java.util.Date

            // comes through as a java.sql.Timestamp - wierd eh?

            if (value instanceof Timestamp) {

                df = new SimpleDateFormat(TS_FORMAT);

            } 

    

            try {

                return df.format(value);

            } catch (Exception e) {

                e.printStackTrace();

                throw new ConversionException("Error converting Date to String");

            }

        } 

]}



For the purpose of this tutorial, you'll need to replace your ''src/service/org/appfuse/util/__DateConverter.java__'' with the [latest one from CVS|https://appfuse.dev.java.net/source/browse/*checkout*/appfuse/src/service/org/appfuse/util/DateConverter.java].





# Modify struts_form.xdt so collections ending with "ies" will get their POJO's names ending with "y" (i.e. entries -> Entry).

# TODO: Figure out how to get DateConverter and TimestampConverter to play nicely with each other (maybe combine them)

# Style up the "posted at" text



# Add AVAILABLE_CATEGORIES to Constants.java

# Grab Categories in StartupListener and expose them, discuss why not do it in edit() method

# Add "extends Manager" to LookupManager interface so getObjects() can be used in StartupListener

# LookupManager.getObjects results in NPE, change signature of setLookupDAO() method to call super.dao = dao:



[{Java2HtmlPlugin



    public void setLookupDAO(LookupDAO dao) {

        super.dao = dao;

        this.dao = dao;

    }

Add html:select tag to weblogForm.jsp, include prettying up - show screenshot
POSSIBLITY: Add "title" to Entry.java

Add the ability to delete an entry

Wrap nested:iterate with div id

Category: Posted at:

This will delete, but only the first one - might need some more JavaScript magic to shuffle the numbers
Delete only works if last entry is deleted
Add only works if there's already an existing one to replicate.

Attachments:

WeblogWithUsers.png		12462 bytes
WeblogAction.java		5803 bytes
weblogList.jsp		1483 bytes
WeblogWithEntry.png		14386 bytes
WeblogCRUD.png		38859 bytes
UserWithWeblog.png		10692 bytes
weblogForm.jsp		1782 bytes
WeblogWithCategory.png		15572 bytes

Go to top More info... Attach file...

This particular version was published on 06-Nov-2006 13:52:47 MST by MattRaible.