Recently I am studying Hybrid Commerce and try to learn how the home page of Hybris storefront is implemented.

I try the approach introduced in my blog Technical data for Hybris Commerce UI – how to find the name of JSP page for a given UI and find the JSP file which implements the home page:

hybris\bin\ext-template\yacceleratorstorefront\web\webroot\WEB-INF\views\responsive\pages\layout\landingLayout2Page.jsp

When I debug this file I find there are lots of usage of tag as displayed below.

Then I study this tag a little bit. In order to understand how it works, I have built a small example.

(1) Create a template.tag under folder WEB-INF/tags with the following source code:

<%@tag description="Jerry template" pageEncoding="UTF-8"%>  
<%@attribute name="headerarea" fragment="true" %>  
<%@attribute name="footerarea" fragment="true" %>  
<!DOCTYPE html>  <html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  </head>  
  <body>  
    <jsp:invoke fragment="headerarea"/>  
    <br></br>
    <div style="color:blue;margin-left:30px;">Jerry: This paragraph is defined in the template!!</div>
    <jsp:doBody/>  
    <br></br>
    <jsp:invoke fragment="footerarea"/>  
  </body>  </html>

In this template I define two fragments with ID headerarea and footerarea, and in the middle of them I also hard coded a blue div.

(2) Create a JSP file which fills the actual content into the two fragments:

<%@page contentType="text/html" pageEncoding="UTF-8"%>  
<%@ taglib prefix="t" tagdir="/WEB-INF/tags/"%>  
<t:template>  
  <jsp:attribute name="headerarea">  
    Jerry: This is header area!  
  </jsp:attribute>  
  <jsp:attribute name="footerarea">  
    Jerry: This is footer area!  
  </jsp:attribute>  
  <jsp:body>  
    body area: Hello world!  
  </jsp:body>  </t:template>

And this is the final page displayed in browser:

And I also find the corresponding .java and compiled .class file under the work folder of my tomcat installation.

The fragment value filled in the JSP file could also be found here.

ABAP BSP

ABAP BSP(Business Server Page) has very similar name as JSP ( Java Server Page ), which indicates that it works the similar way under the hood: once a BSP page is accessed, an ABAP class is automatically generated ( if not existed yet ) to serve the page request. See one example below.

You can still open this generated class via SE24 as what you have done for normal class, except for the fact that it is not assigned to any package.

Based on this knowledge, I have also written a small tool to list all compiled ABAP classes and their corresponding BSP view name, which could act as a kind of BSP page browse history tool.

Just specify the user name and this report will list browse history:

REPORT ztool_display_page_name.PARAMETERS: name TYPE trdir-unam OBLIGATORY DEFAULT 'WANGJER'.DATA: lt_trdir TYPE STANDARD TABLE OF trdir,
      lt_page  TYPE STANDARD TABLE OF o2pagdir.TYPES: BEGIN OF ty_impl,
         name TYPE o2pagdir-implclass,
       END OF ty_impl.TYPES: tt_impl TYPE STANDARD TABLE OF ty_impl.START-OF-SELECTION.
  SELECT * INTO TABLE lt_trdir FROM trdir WHERE unam = name.
  IF sy-subrc <> 0 .
    WRITE: / 'No browse history found for current user'.
    RETURN.
  ENDIF.
  DATA: lt_impl  TYPE tt_impl,
        ls_trdir TYPE trdir,
        ls_impl  TYPE ty_impl.
  LOOP AT lt_trdir INTO ls_trdir.
    ls_impl-name = ls_trdir-name.
    APPEND ls_impl TO lt_impl.
  ENDLOOP.
  SELECT * INTO TABLE lt_page FROM o2pagdir FOR ALL ENTRIES IN lt_impl
    WHERE changedby = name AND implclass = lt_impl-name.
  SORT lt_page BY changedon DESCENDING.
  LOOP AT lt_page ASSIGNING FIELD-SYMBOL(<page>).
    WRITE: / <page>-implclass COLOR COL_GROUP, ' Last accessed on:', <page>-changedon COLOR COL_KEY,
    ' Component name: ' , <page>-applname+0(20) COLOR COL_NEGATIVE, ' view name: ', <page>-pagename+0(30) COLOR COL_POSITIVE.
  ENDLOOP.

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

SAP Hybris Commerce的JSP tag和SAP BSP tag的比較

ABAP BSP

相關文章