Show TOC

Procedure documentationImplementing (Designing) the Application JSPs Locate this document in the navigation structure

 

This procedure describes how to implement the listProject.jsp of the application. You need to rewrite the source code of the other JSPs from the provided Reference section. For more information about developing JSP pages, see Developing JSP Pages.

Procedure

  1. Under app-web/WebContent/META-INF select listProject.jsp and from the context menu select Open With/Web Page Editor.

  2. To create a new JSF form, from the Palette choose JSF HTML/Form and drop it within the JSP.

    Add a form parameter by entering target="_self" after the h:form tag.

    Syntax Syntax

    1. <f:view><h:form target="_self">
    End of the code.

  3. Enter the user interface text to be displayed (Search by name or description), and an input text box.

    Syntax Syntax

    1. Search by name or description: <h:inputText value="#{projectMB.projectsPtrn}"></h:inputText>
    End of the code.

  4. To create a user interface button (Filter), choose JSF HTNL/Command Button and drop it within the JSP.

    Syntax Syntax

    1. <h:commandButton value="Filter"></h:commandButton>
    End of the code.

  5. To create a user interface table, choose JSF HTML / Data Table and drop it within the JSP.

  6. Enter the following source code:

    Syntax Syntax

    1. 	<h:dataTable border="1" var="proj" value="#{projectMB.projects}">
			<h:column id="Title">
			<h:outputText value="#{proj.title}"></h:outputText>
			<f:facet name="header">
				<h:outputText value="Title" id="title"></h:outputText>
				</f:facet>
			</h:column>
			<h:column id="Project_Descr">
			<h:outputText value="#{proj.description}"></h:outputText>
			<f:facet name="header">
				<h:outputText value="Description"></h:outputText>
			</f:facet>
		</h:column>
		<h:column id="edit_prj">
			<h:commandLink action="#{projectMB.editProject}" >
				<h:graphicImage alt="Edit" value="/images/edit.gif" ></h:graphicImage>
				<f:param id="currEditProjId_id" name="currProjId" value="#{proj.projectId}"/>
			</h:commandLink>

				<f:facet name="header">
				<h:outputText value="Edit Project"></h:outputText>
			</f:facet>
		</h:column>
	</h:dataTable>
    End of the code.

  7. Create an additional New Project button.

    Syntax Syntax

    1. <h:commandButton value="New Project" action="#{projectMB.navigationNewProject}"></h:commandButton>
    End of the code.

  8. Review the full code from the Reference section.

  9. Copy and paste the rest of the JSPs from the Reference section.