Providing a Common Look and Feel in JSPs
| < Day Day Up > |
| As the number of pages in a Web application grows, you need an easy way to unify their appearance and make subsequent changes to these pages. The Workshop development framework fulfills this need through templates . Templates are JSPs that define the layout and style elements of a Web page and leave placeholders, called sections , for actual content. Other JSPs then elect to use these templates and fill in the holes with application data. In this manner, you can revise a Web site's overall look and feel by modifying the templates instead of revising every single page. The JSP tags for defining and applying templates are found in the netui -tag-template.tld tag library. This library is imported into Workshop-generated JSPs by default, via the following JSP directive at the top of each file: <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%> This tag library has two sets of tags : one set used in the templates to define placeholders and a second set used in the content pages to specify which template to use and the actual data to be presented on the page. Defining Template PagesListing 7.8 displays grid_template.jsp , a slightly modified version of the template file created with the wizard-generated database application discussed in the section "The Power of Grid Tags" earlier in this chapter. For the current discussion, the tags of note in this file are <netui-template:attribute> and <netui-template:includeSection> . Listing 7.8. grid_template.jsp : The Template File Used by Grid.jsp<!--Generated by Weblogic Workshop--> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%> <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%> <%@ taglib uri="netui-tags-html.tld" prefix="netui"%> <netui:html> <head> <netui:base /> <title><netui-template:attribute name="title"/></title> <link href="<%=request.getContextPath()%>/resources/css/style.css" type="text/css" rel="stylesheet"/> </head> <body style="margin:0"> <script language="javascript" type="text/javascript" src="<%=request.getContextPath()%>/resources/grid/_grid.js" > </script> <jsp:include page="/resources/jsp/header.jsp" /> <br/> <netui-template:includeSection name="firstBodySection"> </netui-template:includeSection> <netui-template:includeSection name="secondBodySection"> </netui-template:includeSection> </body> </netui:html> The <netui-template:attribute> tag defines a placeholder for the value of a single element. The JSP that uses the template can later fill in this element by referencing the value of the name attribute. In this case, the attribute tag defines the page title. You can also set a defaultValue attribute to specify what to display when a content page doesn't reference this tag. The <netui-template:includeSection> tag is also a placeholder for content, this time for an entire block of expected tags. Again, the JSP that uses the template can later fill in the content by referencing the value of the name attribute. You can also set a defaultPage attribute to specify an external JSP or HTML file for filling the section when a content page doesn't reference this tag. Applying TemplatesTo apply a template, a content page uses the <netui-template:setAttribute> and <netui-template:section> tags. Listing 7.9 displays grid.jsp , the content file that uses the grid_template.jsp file. Listing 7.9. grid.jsp ”A Content File That Includes grid_template.jsp <!--Generated by WebLogic Workshop--> <%@ page language="java" contentType="text/html;charset=UTF-8"%> <%@ taglib uri="netui-tags-databinding.tld" prefix="netui-data"%> <%@ taglib uri="netui-tags-html.tld" prefix="netui"%> <%@ taglib uri="netui-tags-template.tld" prefix="netui-template"%> <netui-template:template templatePage="/resources/jsp/grid_template.jsp"> <netui-template:setAttribute value="ChipPurchase - Grid View" name="title"/> <netui-template:section name="secondBodySection"> <blockquote> <span class="pagehead"> <netui:label value="ChipPurchase - Grid View"/> </span> <br/> <br/> <netui-data:grid dataSource="{pageFlow.allRows}" name="{pageFlow.gridName}"> <netui-data:gridStyle styleClassPrefix="gridStyle"/> <netui-data:pager renderInHeader="true" action="pageAction" renderInFooter="true"/> <netui-data:columns filterAction="begin" sortAction="begin"> <netui-data:anchorColumn action="detailsChipPurchases" addRowId="true" title="Details"/> <netui-data:anchorColumn action="updateChipPurchases" addRowId="true" title="Edit"/> <netui-data:basicColumn filterable="true" title="Name" sortable="true" name="name"/> <netui-data:basicColumn filterable="true" title="Numchips" sortable="true" name="numchips"/> </netui-data:columns> </netui-data:grid> <netui:imageAnchor action="insertChipPurchases" align="center" border="0" src="/BuyChips/resources/images/insert.gif"> Insert </netui:imageAnchor> </blockquote> </netui-template:section> <netui-template:section name="firstBodySection"> <netui:label value="This should be displayed before the table"/> </netui-template:section> </netui-template:template> After setting the values of the attribute and section placeholders, the result is a JSP with runtime-specific data in a layout determined by the template. Notice that although the firstBodySection content was defined at the bottom of the grid.jsp file, the rendered JSP has the content displayed above the table. |
| < Day Day Up > |
EAN: 2147483647
Pages: 138