Combining list and all CRUD functionality on a single page?

[lawrieg]

Hi,

I'm just wondering whether it makes sense to combine listing and all create, read, update and delete functionality all on the same page?

The reason I ask is that all the examples I've seen tend to split this functionality out onto separate pages, and coming from a Swing background this seems strange to me. I think I can see why web apps used to be done this way (because people thought in terms of pages and page-flows and due to not being easily able to store a page's state), but I can't see why you'd go for this approach now when using Seam to develop a desktop app replacement (especially if using Ajax).

Can anyone tell me why the single page approach isn't used? Have I missed something?

Thanks,

Lawrie

[lawrieg]

Also, is using disabled input components (e.g. h:inputText) instead of output components (e.g. h:outputText) considered bad practice?

The reason I ask is that it would certainly simplify my forms if I can just set the disabled attribute on components rather than having to duplicate every input component with a matching output one.

Any thoughts?

Thanks,

Lawrie

[pmuir]

I'm just wondering whether it makes sense to combine listing and all create, read, update and delete functionality all on the same page?

JSF allows you to do this easily (an editable table, which is a nightmare in PHP type stuff). I suppose you just choose what is best for your app...

I often use readOnly (this is a specific Trinidad thing) when outputting a form. I think you could use disabled in the same way - but as its just an html attribute, those fields could still be submitted by a malicious person...

[lawrieg]

Thanks Pete - that's reassuring to hear.

I like being able to model and think of my pages in terms of state machines so combining related functionality on a single page (like you would on a desktop app) makes sense to me. It seems to make even more sense with web2 / ajax.

Cheers,

Lawrie

[gavin.king]

It's completely a matter of taste :)

[stephen.friedrich]

It's completely a matter of taste :)

Is it really?
I'd like to show my list with key fields only and my edit form with fields for each detail for the selected item.
So when do I start a conversation? On each select? Or do I need to show the edit form with all fields disabled first and only enable fields when user clicks a "start edit" button ? This would be awkward interaction design and time consuming due to the extra server roundtrip.

[pmuir]

I'd like to show my list with key fields only and my edit form with fields for each detail for the selected item.
So when do I start a conversation?On each select?

This is the pattern I use for a list/detail page.

I I were using an editable table, I would start the conversation on page entry (if there wasn't one running already).

[carloszaniolo]

"petemuir" wrote:

This is the pattern I use for a list/detail page.

It would be great to see a pattern like this in an seam example!

I am using the same pattern with Ajax4jsf, but I am having some trouble with [When/How] [start/end] conversations...

[norman.richards]

The seampay example combines everything on one page. It's not complete CRUD, but it does combine several of the operations on one page.

[tony.herstell1]

I would post another example of CRUD based on IceFaces but IceFaces is not tooooooo stable with Seam right now (they are working on it).

I have a menu option with Create that goes to a create page, in a separate conversation, of the required object type.
I use a page with a list of objects of the required object type... and buttons for View, Delete, Update that "jump off the list" (into separate conversations).

From the View you can transform into a Update or Delete.

Finally, the separate conversations talk back to the original stateful list to update it.


All view pages use "NonEditableXXXFields.xhtml" and all pages that need to edit (inc. Create) the fields use "EditableXXXFields.xhtml"... using one .xhtml gets just too cluttered i.m.h.o.

The List is both paged and ordered based on the column header you select (nice features of IceFaces Table).

Its all a matter of taste...

I'll post a link to the running site at some point (but it's FRAGILE) due to Icefaces.

[ebu]

Hi,

And if both create and update conversations are using same page seam's conversation list shows them under the same label which is a bit misleading. Is there any way to fix it?

wbr, eugen.

[tony.herstell1]

I think what you want is to hack the conversation string...

See my CRUD pages below..

cRUDOrganisationController.mode

is visible in the conversation state which is either CREATE, READ, UPDATE, DELETE

public interface CRUDOrganisationController {

 public enum Mode {CREATE, READ, UPDATE, DELETE};

 public Mode getMode();

 public boolean getModeIsRead();

 public boolean getModeIsCreate();

 public boolean getModeIsUpdate();

 public boolean getModeIsDelete();

 public String startCreate();

 public String startRead(Organisation organisation);

 public String startUpdate(Organisation organisation);

 public String startDelete(Organisation organisation);

 public String checkDetails();

 public String revise();

 public String create();

 public String update();

 public String delete();

 public String switchToUpdate();

 public String switchToDelete();

 public String cancelCRUD();

 public String cancelConfirm();

 public void destroy();
}

<pages no-conversation-view-id="/mainmenu.xhtml">
 <page view-id="/userCRUD.xhtml" timeout="300000">
 Reason: #{cRUDUserController.mode} User ( #{user.username} )
 </page>
 <page view-id="/userConfirm.xhtml" timeout="300000">
 Reason: Confirm #{cRUDUserController.mode} User
 (#{user.username} )
 </page>
 <page view-id="/userRegistration.xhtml" timeout="300000">
 Reason: Registration of new User
 </page>

 <page view-id="/organisationCRUD.xhtml" timeout="300000">
 Reason: #{cRUDOrganisationController.mode} Organisation (
 #{organisation.name} )
 </page>
 <page view-id="/organisationConfirm.xhtml" timeout="300000">
 Reason: Confirm #{cRUDOrganisationController.mode} Organisation
 (#{organisation.name} )
 </page>

 <page view-id="/upload.xhtml" timeout="300000">
 Reason: Upload Image
 </page>

 <!-- Security -->

 <page view-id="/userRegistration.xhtml">
 <restrict>#{!identity.loggedIn}</restrict>
 </page>

 <page view-id="/userFind.xhtml">
 <restrict>#{identity.loggedIn}</restrict>
 </page>
 <page view-id="/userCRUD.xhtml">
 <restrict>#{identity.loggedIn}</restrict>
 </page>
 <page view-id="/userConfirm.xhtml">
 <restrict>#{identity.loggedIn}</restrict>
 </page>

 <page view-id="/organisationFind.xhtml">
 <restrict>#{identity.loggedIn}</restrict>
 </page>
 <page view-id="/organisationCRUD.xhtml">
 <restrict>#{identity.loggedIn}</restrict>
 </page>
 <page view-id="/organisationConfirm.xhtml">
 <restrict>#{identity.loggedIn}</restrict>
 </page>

 <page view-id="/upload.xhtml">
 <restrict>#{identity.loggedIn}</restrict>
 </page>

 <exception class="org.jboss.seam.security.NotLoggedInException">
 <end-conversation />
 <redirect view-id="/securityError.xhtml">
 <message>#{messages.security_not_logged_in}</message>
 </redirect>
 </exception>

 <exception class="org.jboss.seam.security.AuthorizationException">
 <end-conversation />
 <redirect view-id="/securityError.xhtml">
 <message>#{messages.security_permission}</message>
 </redirect>
 </exception>

</pages>

Someone will have a better solution I am sure...