ICEfaces
  1. ICEfaces
  2. ICE-2701

New tutorial for common master-detail scenarios

    Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 3.2
    • Component/s: Sample Apps
    • Labels:
      None
    • Environment:
      All

      Description

      We should create a new tutorial that demonstrates common master-detail scenarios using the ICEfaces components.

      Suggestions for contents include:

      1. dataTable with rowSelector to select "master" record.
      2. detail form updates with selected record details.
      3. user edits, optionally saves detail rows
      4. user selects a different "master" record from dataTable.

      Alternate scenarios:
      - A different component is used for the master list (selectOneMenu, etc.).
      - Both master and detail within the same form and also in separate forms
      - Handling of "dirty" (unsaved) edits on the detail form when the user selects an alternate "master" record to view:
          A - Ignore entered changes and display new master detail.
          B - Save entered changes prior to switching to new master detail (abort change if validation fails)
          C - Prompt the user to save any unsaved changes prior to displaying new master detail (abort change if validation fails)

        Activity

        Hide
        Hayrol Reyes added a comment -

        Excelent topic.

        The master-detail form is ones of the most widely used user interfaces forms in real applications. We are trying to start something like that, but we are not sure where and how to begin , so I'm pretty sure it'll be very helpful to get soemthing from here and we will apreciate it a lot.

        The functionality could also to include the capacity to insert/update/delete both sides of the forms (I mean, master and details) better if it donde form the two proposed scenarios (both master and detail within the same form and also separate forms).

        Show
        Hayrol Reyes added a comment - Excelent topic. The master-detail form is ones of the most widely used user interfaces forms in real applications. We are trying to start something like that, but we are not sure where and how to begin , so I'm pretty sure it'll be very helpful to get soemthing from here and we will apreciate it a lot. The functionality could also to include the capacity to insert/update/delete both sides of the forms (I mean, master and details) better if it donde form the two proposed scenarios (both master and detail within the same form and also separate forms).
        Hide
        Krashan Brahmanjara added a comment -

        Simply extension of showcase will be good.

        BTW inputs in detail table probably shows this problem http://jira.icefaces.org/browse/ICE-4015.

        Show
        Krashan Brahmanjara added a comment - Simply extension of showcase will be good. BTW inputs in detail table probably shows this problem http://jira.icefaces.org/browse/ICE-4015 .
        Hide
        Matthew Cowell added a comment - - edited

        Added wiki here: http://wiki.icesoft.org/display/ICE/Master+Details+Tutorial
        Will wait for code review of my code before I zip it and add it to the wiki.
        (Restricted to icesoft-internal-developers group)

        Show
        Matthew Cowell added a comment - - edited Added wiki here: http://wiki.icesoft.org/display/ICE/Master+Details+Tutorial Will wait for code review of my code before I zip it and add it to the wiki. (Restricted to icesoft-internal-developers group)
        Hide
        Ken Fyten added a comment - - edited

        Matthew, here is some feedback from Carlo, please review and update as appropriate. Let him know if you have questions, etc.
        One other thing I would like to request is that this tutorial be updated to use the ace:dataTable exclusively, and avoid the use of the icefaces-compat.jar (ICE comps).


        Not sure how detailed you wanted me to be in this feedback, but here is a list of items I found in the wiki text and the source code checked into the repository (projects/masterDetail/). Most of these are just minor issues, some copy-paste errors, some best practices, etc.
        From the wiki:

        • First paragraph - Do we want to say ice:dataTable instead of ICE dataTable?
        • Development Tools Used - Eclipse link goes to Helios even though it says version Juno
        • Step 1 and 2 - Not sure if we want more detail here involving screenshots, or if we're assuming users know what the create project screen looks like and how to set up a user library
        • Step 3:
          • Maybe break down the page creation process into a couple of steps, so users can understand the overall table, the details table, and the popup
          • The page shouldn't have unnecessary namespaces included, like icecore which is never used
          • Shouldn't we use ice:outputStylesheet or a JSF component for the rime.css sheet instead of a plain link?
          • The Staff List dataTable columns shouldn't wrap # {person.xyz}

            in an outputText, since we normally recommend against that for optimization purposes. It should just be inline EL like #

            {person.address}
          • Blank <p/> tag between the two forms should be removed
          • In Staff Member Details do we want to use f:ajax over ace:ajax? Not sure which we're trying to push to users
          • In Staff Member Details consider putting the commandButton in an <f:facet name="footer"> instead of padding it with a preceding blank outputText
          • The ice:panelPopup would normally be outside of the form to cut down on submission size
          • Not sure of how good of a practice putting an unescaped <br/> in the outputText prompt in the popup is
        • Step 4:
          • No scope is declared for the Person bean, probably should be @ViewScoped
          • Some comments on the overriden clone method would probably help users understand why we need it
        • Step 5:
          • Copy paste error that says "ColorBean" instead of "DataTableBean"
          • Import for Person is the wrong package compared to Step 4
          • Minor, but adding a preset size to the personData creation would be good. "personData = new ArrayList<Person>(3);" instead of the default
          • I'd consider moving the paragraph after the code to the top of step 5, so users can understand what the class is doing without having to see the full code first
        • Step 6:
          • Might want to elaborate on the deploy process
          • Should show a screenshot of the running application
          • Perhaps explain a typical use case so the user knows what to do with the app
            From the repository:
        • We've been trying to use "web" instead of "WebContent" in our projects, so that might need to be changed
        • Packaging in src/ doesn't match what the Wiki says
        • In WebContent/index.jsp I think we want to move away from jsp:forward, consider this instead:
          <%
          response.sendRedirect("faces/updateStaff.xhtml");
          %>
        • updateStaff.xhtml is not named the same as masterDetails.xhtml referenced in the wiki
        • Not sure if we want to clean up WEB-INF/web.xml or leave it as the default that Eclipse creates. I guess it depends if we want to demo best practices or just show the exact code Eclipse would make.
          • We shouldn't have the huge list of welcome files
          • We might want to consider using .jsf as the Faces Servlet mapping since we do in our live demos
          • Don't need the Google Maps key
            Looks good, just a bunch of minor issues to add that extra bit of polish.
        • Carlo
          (Restricted to icesoft-internal-developers group)
        Show
        Ken Fyten added a comment - - edited Matthew, here is some feedback from Carlo, please review and update as appropriate. Let him know if you have questions, etc. One other thing I would like to request is that this tutorial be updated to use the ace:dataTable exclusively, and avoid the use of the icefaces-compat.jar (ICE comps). Not sure how detailed you wanted me to be in this feedback, but here is a list of items I found in the wiki text and the source code checked into the repository (projects/masterDetail/). Most of these are just minor issues, some copy-paste errors, some best practices, etc. From the wiki: First paragraph - Do we want to say ice:dataTable instead of ICE dataTable? Development Tools Used - Eclipse link goes to Helios even though it says version Juno Step 1 and 2 - Not sure if we want more detail here involving screenshots, or if we're assuming users know what the create project screen looks like and how to set up a user library Step 3: Maybe break down the page creation process into a couple of steps, so users can understand the overall table, the details table, and the popup The page shouldn't have unnecessary namespaces included, like icecore which is never used Shouldn't we use ice:outputStylesheet or a JSF component for the rime.css sheet instead of a plain link? The Staff List dataTable columns shouldn't wrap # {person.xyz} in an outputText, since we normally recommend against that for optimization purposes. It should just be inline EL like # {person.address} Blank <p/> tag between the two forms should be removed In Staff Member Details do we want to use f:ajax over ace:ajax? Not sure which we're trying to push to users In Staff Member Details consider putting the commandButton in an <f:facet name="footer"> instead of padding it with a preceding blank outputText The ice:panelPopup would normally be outside of the form to cut down on submission size Not sure of how good of a practice putting an unescaped <br/> in the outputText prompt in the popup is Step 4: No scope is declared for the Person bean, probably should be @ViewScoped Some comments on the overriden clone method would probably help users understand why we need it Step 5: Copy paste error that says "ColorBean" instead of "DataTableBean" Import for Person is the wrong package compared to Step 4 Minor, but adding a preset size to the personData creation would be good. "personData = new ArrayList<Person>(3);" instead of the default I'd consider moving the paragraph after the code to the top of step 5, so users can understand what the class is doing without having to see the full code first Step 6: Might want to elaborate on the deploy process Should show a screenshot of the running application Perhaps explain a typical use case so the user knows what to do with the app From the repository: We've been trying to use "web" instead of "WebContent" in our projects, so that might need to be changed Packaging in src/ doesn't match what the Wiki says In WebContent/index.jsp I think we want to move away from jsp:forward, consider this instead: <% response.sendRedirect("faces/updateStaff.xhtml"); %> updateStaff.xhtml is not named the same as masterDetails.xhtml referenced in the wiki Not sure if we want to clean up WEB-INF/web.xml or leave it as the default that Eclipse creates. I guess it depends if we want to demo best practices or just show the exact code Eclipse would make. We shouldn't have the huge list of welcome files We might want to consider using .jsf as the Faces Servlet mapping since we do in our live demos Don't need the Google Maps key Looks good, just a bunch of minor issues to add that extra bit of polish. Carlo (Restricted to icesoft-internal-developers group)
        Hide
        Matthew Cowell added a comment - - edited

        Assignee: Ken Fyten (was: Matthew Cowell)
        Resolution: Fixed
        I have updated the code and the wiki. The biggest change is moving to the ACE:datatable.
        I based the tutorial off other tutorials that were already on the ICEfaces wiki. These did not show detailed instructions on creating a project or deployment.
        However, if you want I can add these things to the tutorial. Just let me know.
        Thanks.

        Show
        Matthew Cowell added a comment - - edited Assignee: Ken Fyten (was: Matthew Cowell) Resolution: Fixed I have updated the code and the wiki. The biggest change is moving to the ACE:datatable. I based the tutorial off other tutorials that were already on the ICEfaces wiki. These did not show detailed instructions on creating a project or deployment. However, if you want I can add these things to the tutorial. Just let me know. Thanks.

          People

          • Assignee:
            Matthew Cowell
            Reporter:
            Ken Fyten
          • Votes:
            3 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: