Figure 1: Working hover menu. With the introduction of the light framework page in support of external-facing portals, developers now have a access to several JSP tag libraries for navigation and layout. Using this library (in both the light as well as standard framework page), CSS and JavaScript you can build a hover drop down menu to replace the standard top level navigation bar. Before the navigation tag libary was available, making changes to the top level navigation was painful to say the least. No more! Creating innovative, and highly branded navigation iViews is now straightforward. In this tutorial we will cover setting up the portal project in the SAP Netweaver Developers Studio, creating the JSP page and portalapp.xml file and deploying the PAR file into the portal. After successful deployemnt we will create an iView and add it to our copy of the light framework page. Figure 1 shows the end result of this tutorial. 
Let's get started. Fire up your SAP NetWeaver Developer Studio and create a new portal project. If you haven't done so already, also open the enterprise portal perspective (Window->Open Perspetive->Other). Once you have created the project, expand the 'dist->PORTAL-INF' folder, and add a new JSP page to the 'JSP' folder.See Figure 2, with step-by-step screen shots. Step 1:
Step 2: 
Step 3:
Step 4: 
Figure 2: Creating a portal project. The new tag libraries are extensively documented here (http://help.sap.com/saphelp_nw04s/helpdata/en/42/f35146a7203255e10000000a1553f7/frameset.htm) so I will not go into great detail but just provide a brief overview. The navigation tags fall into different categories: | Iterator: | Iterates through a set of nodes, exposing in its body a different navigation node during each iteration. | | Node: | Exposes in its body a specific navigation node. | | Operator: | Performs an operation, such as storing a navigation node for later recall. | | Rendering: | Outputs HTML based on the currently exposed navigation node. | | Conditional: | Includes its body if a condition is true or false. | Sven Kannenegiesser and his series of blogs were fundamental, providing insight and code, that made this appliction possible. I encourage you to check out the blogs - they are very informative: Part I (EFP: Working with the New Taglibs - Part 1) Part II (EFP: Working with the New Taglibs - Part 2) Part III (EFP: Working with the new Taglibs - Part 3) In you SAP NetWeaver Developer Studio project, notice the structure underneath the 'dist' folder: 'images' for any graphics you want to use in your JSP code, 'CSS' for all cascading style sheets used in your portal application (see Figure 3). 
Figure 3: Project Structure Now that the project framework is in place, we can proceed with adding code. Since we are using two separate tag libraries we have to declare their use at the top of the 'header.jsp' file. In conjunction, we need to add the used tag libraries to our component and add them in the 'SharingReference' of the portalapp.xml file. (Figure 4). On the portalapp.xml 'Components' tab the component-profile for our 'HoverTLN' component needs two new entries for the tag libraries (note the matching names in the XML file and the reference in the JSP!). All of the +portalapp.xml+ configuration options are well documented on the SAP Help Portal (http://help.sap.com/saphelp_nw2004s/helpdata/en/53/c8af42a6f6cb6ae10000000a155106/frameset.htm) but it's easier to start from an existing XML file than create one from scratch. One important thing to point out is that the Enterprise Portal Client Framework (EPCF aka client-side eventing) is set to '0' (disabled) to ensure that no EPCF JavaScript libraries are loaded. 
Let's get started. Fire up your SAP NetWeaver Developer Studio and create a new portal project. If you haven't done so already, also open the enterprise portal perspective (Window->Open Perspetive->Other). Once you have created the project, expand the 'dist->PORTAL-INF' folder, and add a new JSP page to the 'JSP' folder.See Figure 2, with step-by-step screen shots. Step 1: Step 2: Step 3: Step 4: Figure 2: Creating a portal project. The new tag libraries are extensively documented here (http://help.sap.com/saphelp_nw04s/helpdata/en/42/f35146a7203255e10000000a1553f7/frameset.htm) so I will not go into great detail but just provide a brief overview. The navigation tags fall into different categories: | Iterator: | Iterates through a set of nodes, exposing in its body a different navigation node during each iteration. | | Node: | Exposes in its body a specific navigation node. | | Operator: | Performs an operation, such as storing a navigation node for later recall. | | Rendering: | Outputs HTML based on the currently exposed navigation node. | | Conditional: | Includes its body if a condition is true or false. | Sven Kannenegiesser and his series of blogs were fundamental, providing insight and code, that made this appliction possible. I encourage you to check out the blogs - they are very informative: Part I (EFP: Working with the New Taglibs - Part 1) Part II (EFP: Working with the New Taglibs - Part 2) Part III (EFP: Working with the new Taglibs - Part 3) In you SAP NetWeaver Developer Studio project, notice the structure underneath the 'dist' folder: 'images' for any graphics you want to use in your JSP code, 'CSS' for all cascading style sheets used in your portal application (see Figure 3). Figure 3: Project Structure Now that the project framework is in place, we can proceed with adding code. Since we are using two separate tag libraries we have to declare their use at the top of the 'header.jsp' file. In conjunction, we need to add the used tag libraries to our component and add them in the 'SharingReference' of the portalapp.xml file. (Figure 4). On the portalapp.xml 'Components' tab the component-profile for our 'HoverTLN' component needs two new entries for the tag libraries (note the matching names in the XML file and the reference in the JSP!). All of the +portalapp.xml+ configuration options are well documented on the SAP Help Portal (http://help.sap.com/saphelp_nw2004s/helpdata/en/53/c8af42a6f6cb6ae10000000a155106/frameset.htm) but it's easier to start from an existing XML file than create one from scratch. One important thing to point out is that the Enterprise Portal Client Framework (EPCF aka client-side eventing) is set to '0' (disabled) to ensure that no EPCF JavaScript libraries are loaded.
29 Comments