In my last Tag Libraries: Creating a Hover Menu in SAP NetWeaver Portal, I covered how to create a custom navigation iView using the navigation tag library. This time we'll explore how to create a custom layout using tag libraries - in case the SAP delivered light framework page doesn't meet your needs. This tutorial only uses the basic layout tags - there's a whole set of custom tray tags that let you control the iView tray's look & feel. I will skip setting up the project in SAP NetWeaver Developer Studio since it was covered previously. Detailed online information about the layout and custom tray tag library is available here .
Create a new JSP page called 'framework.jsp' under the 'JSP' folder as well as a 'framework.css' file under the 'CSS' folder. Copy the contents of the respective textareas in this blog into the files. Looking at the 'framework.jsp' file, we observe the same pattern that we saw in the navigation iView - we need to declare the tag library with the 'tablib uri' directive. Again, it's important to note that the URI name must match the name used under the 'component-profile' in the portalapp.xml file (Figure 1.1). In addition, you need to add 'com.sap.portal.pagebuilder' as a SharingReference in the portalapp.xml file.
!https://weblogs.sdn.sap.com/weblogs/images/1767/frameworkjsp1.jpg|height=321|alt=image|width=404|src...!
!https://weblogs.sdn.sap.com/weblogs/images/1767/frameworkjsp3.jpg|height=225|alt=image|width=412|src...!
Figure 1: Page layout.
When creating a new layout, we need to provide two layout definitions: one for the run-time and one for the design-time when working with the layout in portal content administration. In order to distinguish between the two we query one of the page variables in the outer IF statement. Notice two things when we are in runtime mode: (1) the CSS file is loaded and (2) the extensive use of div tags to built our custom layout. Without getting into a detailed discussion of table based versus CSS based web page layout, let's just say it's considered good design and coding practice to use CSS. When in design mode, you notice that we have to use the table tag to construct our layout. This example uses a simple three container layout, but you can define as many containers and arrange them as you see fit. It's critical that for each container, the 'container id' strings you use matches the consecutively numbered 'com.sap.portal.reserved.layout.Cont[X]' entries in the portalapp.xml file (Figure 1.1).
#body
#leftnav
}
#content {
text-align: justify;
margin-left: 21%;
}
#box
ul.treenav {
list-style: none;
padding: 0px 20px 0px 20px;
}
ul.treenav a
ul.treenav a:hover {
background-color: white;
}
ul.treenav ul {
list-style: none;
margin-left: 14px;
}
ul.treenav li
ul.treenav a.path {
font-weight: bold;
}
ul.treenav a.current
ul.treenav a.folder {
background-image: url(<%=mimeUrl%>/images/black_bullet_big.gif);
background-repeat: no-repeat;
}
ul.treenav a.leaf {
background-image: url(<%=mimeUrl%>/images/black_bullet.gif);
background-repeat: no-repeat;
}
</style>
</textarea>
</p>
6 Comments