Using the SAP Component Library for JSF

Use

The SAP Component Library for JSF provides seamless integration with the look and feel of SAP Web frameworks like Web Dynpro or Business Integration. It is suitable for both developing applications from scratch, and for migrating existing applications developed with usage of JSF 1.2 standard components to the SAP look and feel.

Prerequisites

The Web application is available as a Dynamic Web project in SAP NetWeaver Developer Studio.

More information: Creating Dynamic Web Projects .

Procedure

1. Add and Configure the JavaServer Faces Facet

In the Project Explorer , select the Dynamic Web project that contains the Web application.
In the context menu, choose Properties .
In the properties list, choose Project Facets .
Add and configure the JavaServer Faces facet.
1. If the facet has already been added, you must first remove it.
  
  Deselect the relevant checkbox, then choose Apply .
2. Select the relevant checkbox, then choose Further configuration required .
3. Select the Server Supplied JSF Implementation radio button.
4. In the Component Libraries area, select SAP Component Library for JSF , then choose the > pushbutton.
5. Optionally, modify the other configuration properties - JSF Configuration File , JSF Servlet Name , JSF Servlet Classname , and URL Mapping Patterns .
6. Choose OK .
Choose Apply , then choose OK .

2. Add a Runtime Dependency to the SAP Component Library in the application-j2ee-engine.xml

This is done by adding the following source code to the META-INF/application-j2ee-engine.xml :

               <application-j2ee-engine xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="application-j2ee-engine.xsd">
        <reference reference-type="weak">
                <reference-target target-type="library" provider-name="sap.com">
                        tc~ui~faces
                </reference-target>
        </reference>
</application-j2ee-engine>

By adding this dependency, the Web application can access classes of the SAP Component Library for JSF at runtime.

More information:

3. Declare the SAP Component Library in the JSP Source Code

This is done by adding the following line to the JSP source code:

<%@ taglib uri="http://java.sap.com/jsf/html" prefix="h" %>

If you are migrating an existing JSP page that uses JSF 1.2 standard components, you need to replace the original taglib URI with the latter.

Sample Code

This is a simple JSP file that uses the SAP Component Library:

                  <%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sap.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<f:view>
        <html>
                <head>
                        <title>Hello World</title>
                </head>
        <h:outputText value="Hello World!"/>  
                <body>
                <!--Web page body-->
                </body>
        </html>
</f:view>

The tag library descriptor contains all UI components from the tag library of the Java standard. There are some limitations in the tag library caused by the focus of that library, for example, concerning style and Java Script. The runtime execution for these attributes can be deactivated with the following entry in your web.xml:

               <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<context-param>
        <param-name>
                com.sap.ui.faces.application.ProjectStage
        </param-name>
        <param-value>Development</param-value>
</context-param>

In this case, unsupported attributes, and tags are listed at runtime so that existing applications can be easily migrated to the SAP Component Library for JSF.

4. Perform Additional Steps

The following additional steps are necessary to migrate the JSP pages to the SAP Component Library for JSF:

Remove the DOCTYPE element in your HTML files and store your files in the UTF-8 format.
Move the <f:view > root tag to beginning of the document. It has to be the root element so that the complete content is rendered by the JSF lifecycle.
Remove style attributes, stylesheet links, and JavaScript from your document.

Note
It may be helpful to activate the full stack trace for error pages. You can do this using the SAP NetWeaver Administrator.

More information: Troubleshooting Application Errors