Raible's Wiki: HibernateRelationshipsUI

At line 383 changed 1 line.

If you're using < AppFuse 1.9, you'll need to fix [LookupManager.java|https://appfuse.dev.java.net/source/browse/appfuse/src/service/org/appfuse/service/LookupManager.java?r1=1.6&r2=1.7] and [LookupManagerImpl.java|https://appfuse.dev.java.net/source/browse/appfuse/src/service/org/appfuse/service/impl/LookupManagerImpl.java?r1=1.3&r2=1.4] so the above code works.

If you're using < AppFuse 1.9, you'll need to fix [LookupManager.java|http://fisheye4.cenqua.com/browse/~raw,r=1453/appfuse/trunk/src/service/org/appfuse/service/LookupManager.java] and [LookupManagerImpl.java|http://fisheye4.cenqua.com/browse/~raw,r=1453/appfuse/trunk/src/service/org/appfuse/service/impl/LookupManagerImpl.java] so the above code works.

At line 403 added 2 lines.

This covers most of the things you need to know for using Hibernate's relationships and modifying child elements. However, it doesn't cover adding or deleting child elements.

At line 407 added 4 lines.

There are many different ways to add and delete child elements from a form. This section is a work in progress and shows a quick-n-dirty (complete with bugs!) way of doing this.

In __weblogForm.jsp__, add a "Delete" button just after the "Posted at" information:

At line 407 changed 4 lines.

public void setLookupDAO(LookupDAO dao) {

super.dao = dao;

this.dao = dao;

}

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

<input type="button" class="button" name="delete" style="font-size: 11px"

onclick="parentNode.parentNode.removeChild($('entry<%=index%>'))" value="Delete"/>

At line 413 changed 2 lines.

# Add html:select tag to weblogForm.jsp, include prettying up - show screenshot

# POSSIBLITY: Add "title" to Entry.java

Run __ant deploy-web__, refresh your browser - and you should be able to delete the entry. Click "Save" after clicking "Delete" to complete the process. While this works, it's not the ideal solution. Since it just removes the entry (and it's form elements) from the form, it doesn't re-adjust the index numbers on other entries. This means that deleting will only work for the last entry. In addition, the entry won't be deleted from the "entry" table (try ''select * from entry''). Both of these issues could likely be fixed if you linked the "Delete" button to an action (or Ajax) that deleted the entry from the database.

At line 420 added 1 line.

To add a new entry, there are also a number of things you can do. The simplest one I've found is to duplicate an existing set of entry fields, re-index the input element names and clear the values. To do this: add the following after the ending </nested:iterate> for the "entries":

At line 417 changed 1 line.

!!Add the ability to delete an entry

[{Java2HtmlPlugin

At line 419 changed 1 line.

# Wrap nested:iterate with div id

<hr />

<input type="button" class="button" onclick="toggleDisplay('newentry');

if ($('newentry').style.display == '') {

var entries = parentNode.getElementsByTagName('div');

$('newentry').innerHTML = entries[entries.length-2].innerHTML;

// reset all fields to blank, and change their names

var inputs = $('newentry').getElementsByTagName('input');

var index = inputs[0].name.substring(inputs[0].name.indexOf('[')+1, inputs[0].name.indexOf(']'));

var next = parseInt(index) + 1;

for (i=0; i < inputs.length; i++) {

inputs[i].name = inputs[i].name.replace(index, next);

if (inputs[i].name == 'delete') {

inputs[i].onclick =

function() { $('newentry').innerHTML = ''; $('newentry').style.display='none'; };

} else if (inputs[i].name.indexOf('weblogId') == -1) {

inputs[i].value = '';

}

// reset any textareas

var boxes = $('newentry').getElementsByTagName('textarea');

for (i=0; i < boxes.length; i++) {

boxes[i].name = boxes[i].name.replace(index, next);

boxes[i].value = '';

}

// reset any selects

var dropdowns = $('newentry').getElementsByTagName('select');

for (i=0; i < dropdowns.length; i++) {

dropdowns[i].name = dropdowns[i].name.replace(index, next);

dropdowns[i].selectedIndex = 0;

}

boxes[0].focus();

this.value = this.value.replace('Add', 'Cancel');

} else {

this.value = this.value.replace('Cancel', 'Add');

}" value="Add New Entry"/>

}]

At line 421 changed 21 lines.

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

<nested:hidden property="entryId"/>

<nested:hidden property="weblogId"/>

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

<br />

Category:

<nested:select property="categoryId" style="color: #333; font-size: 11px; margin: 2px 10px 0 0">

<html:options collection="availableCategories" property="categoryId" labelProperty="name"/>

</nested:select>

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

<input type="submit" class="button" style="font-size: 11px"

onclick="parentNode.parentNode.removeChild($('entry<%=index%>'))" value="Delete"/>

</div>

</nested:iterate>

# 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.

Run __ant deploy-web db-load__ and you should be able to add a new Entry by clicking on the <button>Add New Entry</button> button. There are a couple of issues with this technique:

* Adding a new entry will only work if there is (at least) one entry already in the weblog.

* The "timeCreated" field won't be set as part of the new entry.

Since this tutorial is designed to show Hibernate relationships and how to edit them (moreso than techniques for adding/deleting child records), I'll leave the issues with Delete and Add as an exercise for the reader. <img src="http://raibledesigns.com/images/smileys/wink.gif" alt="Wink" style="vertical-align: middle" /> Of course, if you do figure out a good solution - please send an e-mail to the mailing list (or enter an issue in [JIRA|http://issues.appfuse.org]) so we can enhance this tutorial.

Raible's Wiki

AppFuse

Other Applications

HibernateRelationshipsUI