The Inbox page
The first thing most ProjectTrack users will see is the Inbox. (Upper Managers will see the Show All page instead, and won't be able to access this page at all.) The Inbox is the page that shows all of the projects waiting for processing, and it's the one that users will typically interact with the most. Users can view details, approve, or reject any projects on this page. A mock-up is depicted in figure 9.3.
As you can see in figure 9.3, this view has a page header and a panel that contains the main content for the page. The panel has a header that states the name of the page, a row for optional application messages, and a section that comprises the main content of the page. Application messages will be displayed only if a backing bean creates a message for this page, which could happen if the user tries to approve a project that was just approved by someone else, for example.
The inner panel simulates a data table. The first row has column headers for the project fields we want to display: the project name, type, and status. The user
ProjectTrack: tefk Inbox flj Show ail ^ Create new jcjft Logout Language: I English .1 (dev_mgr)
Inbox - approve or reject projects
Application messages (optional)
Inbox - approve or reject projects
Application messages (optional)
|
Project name |
Type |
Status | |||
|
Project One Name |
Project One Description |
Proposal |
Approve |
Relect |
Details |
|
Project Two Name |
Project Two Description |
Planning |
Ap Drove |
Reject |
Details |
Figure 9.3 Mock-up of the Inbox page. This page lists all projects currently waiting for users, and allows them to approve, reject, or view the details of each project.
Figure 9.3 Mock-up of the Inbox page. This page lists all projects currently waiting for users, and allows them to approve, reject, or view the details of each project.
should be able to click on any of these column headers in order to re-sort the list by that column. The other rows cycle through the list of projects waiting for this user, with links for the three primary operations: approve, reject, and view details. This page is shown in listing 9.4.
Listing 9.4 Inbox.jsp: JSP source
<!DOCTYPE HTML PUBLIC "'-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib uri=Mhttp://java.sun.com/jsf/coreM prefix="fM%> <%@ taglib uri=Mhttp://java.sun.com/jsf/htmlM prefix="hM%>
<f:view> <html> <head> <title>
<h:outputText value="ProjectTrack - Inbox"/> </title>
<link rel=Mstylesheet" type="text/css" | Style sheet href="stylesheet.cssM/>
<body class="page-backgroundM> <—C Background style
<jsp:include page="header.jspM/> <1—d Page header include
import
<h:panelGrid headerClass=Mpage-header" styleClass=Mtable-background" columns=M1" cellpadding="5M>
Main panel
<f:facet name="header"> <h:outputText value="Inbox - approve or reject projects"/>
ff Main panel header
<h:outputText value="Application messages." styleClass="errors"/> <h:panelGrid columns="6"
styleClass=Mtable-background"
rowClasses="table-odd-row,table-even-row"
cellpadding="3M>
Messages placeholder
Inner panel
<h:commandLink styleClass="table-headerM>
<h:outputText value="Project name"/> </h:commandLink>
<h:commandLink styleClass="table-headerM>
Column headers
<h:outputText value="Type"/> </h:commandLink>
<h:commandLink styleClass="table-header">
<h:outputText value="Status"/> </h:commandLink> <h:panelGroup/> <h:panelGroup/> <h:panelGroup/>
<h:outputText value='Inventory Manager v2.0"/> <h:outputText value="Internal Desktop Application"/> <h:outputText value="Requirements/Analysis"/>
Column headers
<h:commandLink action= <h:outputText value= </h:commandLink> <h:commandLink action= <h:outputText value= </h:commandLink> <h:commandLink action= <h:outputText value= </h:commandLink>
approve"> Approve"/>
reject"> Reject"/>
details"> Details"/>
Project rows
<h:outputText value="TimeTracker"/> <h:outputText value='Internal Web Application"/> <h:outputText value="Requirements/Analysis"/> <h:commandLink action="approve">
<h:outputText value="Approve"/> </h:commandLink> <h:commandLink action="rejectM>
<h:outputText value="RejectM/> </h:commandLink>
<h:commandLink action="detailsM>
<h:outputText value="Details"/> </h:commandLink>
</h:panelGrid>
O Import the CSS style sheet. We'll use the same style sheet for every other page.
C This whole page should have a pleasant light-blue background, so we'll use a CSS style for the HTML <body> element.
d We include the header with a dynamic JSP include tag.
O This is the main panel, declared with the popular HtmlPanelGrid control. Because we want the heading to be large and bold, we add a CSS style for the header with the headerClass attribute. This panel is basically a container for the inner panel, so it has only one column.
Q Here, we specify the main panel's header, which serves as the title of the page.
© This HtmlOutputText will serve as a placeholder for application messages. In chapter 10, we'll replace this with an HtmlMessages component. (We use HtmlOutputText now because HtmlMessages won't show anything unless there are actually messages, and because there's no back-end code in our prototype, there aren't any application messages yet.)
h This is the inner panel, which is where all of the action takes place. It's an HtmlPanelGrid that simulates an HtmlDataTable. There are six columns, and we specify two styles for the rows so that the component will alternate between the two when it displays the rows.
© These are the column headings. You may have noticed that these make up a row in the table, even though they're used as headings. Laying the components out this way allows the headings to line up in the same columns with the content in subsequent rows. Because the HtmlPanelGrid displays headings as a single column, this would not be possible if the components were part of a heading. (When we convert this into an HtmlDataTable, we'll use UlColumn components, which have header facets.)
The first three columns are HtmlCommandLink components, so that we can resort the table's data when the user clicks on a column heading. In this prototype, the action property isn't set, so clicking on the header just redisplays the page without changes. The final three columns are simply HtmlPanelGroup components, which are used to create blank headings.
j This is the actual data of the inner panel. Our prototype has only two rows, so it looks like there are two projects in the user's inbox. The first three columns display different project fields with HtmlOutputText components. The final three columns represent the commands you can perform on that project with HtmlCommandLink components. We'll create navigation cases for each of the outcomes specified by the action properties in the next section. Then, in chapter 10, we'll integrate them with real action methods. Once this section is integrated with the model, these rows will come from model objects instead of static data.
|
SI ProjectTrack - Inbox - Mozilla {Build ID: 2004031616} Q0S | |
|
File Edit View Go Bookmarks Tools Window Help Debug QA | |
|
ProjectTrack: ^ lnbox ®D ShowAII Create New Logout Language: English v | Go! | (proj_mgr) | |
|
Inbox - approve or reject projects Application messages. | |
|
Project name Type Status ; Inventory Manager v2.Q Internal Desktop Application Requirements/Analysis Approve Reject Details TimeTracker Internal Web Application Requirements/Analysis Approve Reject Details | |
Figure 9.4 inbox.jsp: Displayed in a browser.
The output of this page is shown in figure 9.4. You can see that the header is seamlessly integrated. The use of style sheets for colors and fonts enhances the look of the page.
We have now created an attractive Inbox page. It's time to create a navigation rule for it.
Post a comment