opinion on modal dialog

[Vangel V. Ajanovski]

In the past I have used the modal window from ChenilleKit, and recently I read the post from Taha on Java Magic blog, but I wanted to create something simpler, preferably without additional custom JavaScript code - just CSS and Tapestry zones.

<t:zone t:id="editingZone">
<t:if test="objectToEditInModal">
<div class="backgroundoverlay">
<div class="modalwindow">

<t:submit
</form>
</div>
</div>
</t:if>
</t:zone>

<t:zone t:id="gridZone">
<t:grid ................. add="editing" >

</t:grid>
</t:zone>

And in Java:

@Property
@Persist(FLASH)
private SomeClass objectToEditInModal;

public Object onActionFromEditDataLink(SomeClass rowObject) {
    objectToEditInModal = rowObject;
    return editingZone.getBody();
}

public Object onSelectedFromCancelButton() {
    objectToEditInModal = null;
    return editingZone.getBody();
}

@CommitAfter
public Object onSuccessFromEditingForm() {
    doSomeThingWithData(objectToEditInModal);
    objectToEditInModal = null;

}







Finally, how it will look like depends on CSS so here it is:

.backgroundoverlay {
    visibility: visible;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: url(/upisi/images/background-plasma-transparent.png);
}

.modalwindow {
    width: 300px;
    margin: 200px auto;
    background-color: #fff;
    border: 1px solid #000;
    padding: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 2px 2px 8px #000;
    -webkit-box-shadow: 2px 2px 8px #000;
    box-shadow: 2px 2px 12px #000;
    border:2px solid #DDF;
    -webkit-box-shadow:
        3px 3px 6px rgba(0, 0, 0, .2),
        0px 0px 3px rgba(0, 0, 0, .1),
        inset 0px 25px 25px #DDF;
}

This is what I did, and I want to hear about any opinion if I will have problems with it. The use-case is: a page shows a grid based on a complex database view, and I want to edit underlying data that will change the grid contents, but the data itself is not directly part of the objects in the grid, so direct inPlace editing is not a suitable usecase. <form t:id="editingForm" zone="gridZone">this form is used to edit the relevant data <p:editingCell><t:actionlink id="editDataLink" context="rowObject" zone="editingZone" /> return new MultiZoneUpdate("editingZone",editingZone),add("gridZone", gridZone); So on clicking the EditDataLink in the grid, the editingzone will be updated, and because the value of the objectToEditInModal is no longer null, the inside DIVs and FORM will be displayed. If I click OK in the editingform then in Success it will change the data and set the objectToEdit to null, so after refreshing the two zones, the modal DIVs and the editingForm will be stripped from the HTML and finally everything will be commited. If I click Cancel then just objectToEdit is nulled and just the editing zone will be refreshed leaving the grid intact, but because the null value, the modal DIVs and the editingForm will be stripped from the HTML. I tried it with several browsers and it looked ok. It is very important for the z-index to be 0, in order for tapestry validation boxes to be shown in front. Do you see any problem with this? This approach works for me. With many test cases that I did for a single admin user it was OK. One problem that I see is if many users edit the same data and same page at the same time, I will need to constantly refresh the grid to show the latest data, and I might need some locking. But in my case this will not happen, there will be just few admins dealing with separate subsets of the data with proper filtering. Maybe there are some other problems, especially with how tapestry works, so that's why I need an opinion.

smime.p7s
Description: S/MIME Cryptographic Signature