What is SAP's BSP UI technology

SAP Web Application Server provides a page-based programming model with server-side scripting as well as server page technology for developing, designing and implementing web applications: Business Server Pages (BSP). Server-side scripts allow direct access to all elements in the application server (such as function modules, database tables, ABAP objects, etc.).

In a web application server, presentation is separated from business logic.

You can create HTML pages or Business Server Pages (BSP) using server-side scripting in ABAP or JavaScript.

When creating applications, you can take advantage of the Model View Controller (MVC) design pattern. HTMLBand XHTMLBHTML Business Libraries are available as BSP extensions to enable a uniform layout and its associated usability benefits.

In SAP, a BSP application consists of a series of BSP pages, which can contain static HTML, ABAP code, JavaScript or CSS. These pages can contain elements from the HTMLB (HTML Business) library, which provides a set of predefined HTML controls, such as buttons, input boxes, drop-down lists, etc., which can be easily used in BSP pages.

The main advantage of BSP technology is its tight integration with SAP system, which allows developers to directly access all ABAP functions in SAP system, including database access, business logic, user management, etc. In addition, because BSP pages run on the server, they can generate HTML dynamically, which allows the page to change its content based on user input and the state of the system.

For example, consider a simple BSP application that allows users to enter their name and age in a form, and then displays a welcome message. This application may contain two BSP pages: an input page and an output page. The input page can contain two HTMLB input box controls, one for entering the name and another for entering the age, and one HTMLB button control for submitting the form. When the user clicks the button, the page's ABAP code is executed, which stores the user's input in the server's session memory, and then navigates to the output page. The ABAP code for the output page reads the user's input from the session memory and generates an HTML page with a welcome message that includes the user's name and age.

When creating a BSP application, you first need to create a new BSP application in the SAP system. This can be done by selecting Create under the BSP Application node in the ABAP Development Workbench. When creating a BSP application, you need to provide a unique name and a directory that contains all the pages and related resources of the application. After creating the BSP application, you can start adding BSP pages. When creating a BSP page, you can choose the type of page (for example, HTML page or ABAP page), and provide a name and title for the page.

In a BSP page, HTML and ABAP code can be used to define the content and behavior of the page. HTML code is used to define the layout and style of the page, while ABAP code is used to process user input and generate dynamic content. In order to allow ABAP code to run on the server, BSP provides a special markup syntax that can insert ABAP code in HTML code. These ABAP code snippets are executed on the server and generate dynamic HTML.

Let's look at a concrete example.

First, we need to create a BSP application. In the SE80 transaction, select BSP Application, and create a new BSP application, such as "MyBSPApplication".

Under this application, we create a page, such as "MyPage.htm". The code is as follows:

<htmlb>
<head>
  <title>My First BSP Application</title>
</head>
<body>
  <h1><%= request->get_form_field( 'input1' ) %></h1>
  <form method="POST" runat="server">
    <input type="text" name="input1">
    <input type="submit" name="submit" value="Submit">
  </form>
</body>
</htmlb>

Here is a line-by-line explanation of the code:

  1. <htmlb>: This is a special tag for BSP, indicating that this is a BSP HTML page.
  2. <head>: This is the header section of the HTML, including the page's title and other metadata.
  3. <title>My First BSP Application</title>: This is the title of the page, which will be displayed on the browser's title bar.
  4. </head>: Ends the head section of the HTML.
  5. <body>: This is the main body of the HTML, including the content to be displayed on the page.
  6. <h1><%= request->get_form_field( 'input1' ) %></h1>: This is a header tag whose content is the value of the form field "input1" obtained from the request. <%=The content between and %>is ABAP code, which can be executed directly in the BSP page.
  7. <form method="POST" runat="server">: This is a form tag, whose method attribute is set to "POST", indicating that the data submitted by this form will be sent to the server through the POST method. runat="server" indicates that this form will run on the server side.
  8. <input type="text" name="input1">: This is a text input box whose name attribute is set to "input1" to identify the data of this input box.
  9. <input type="submit" name="submit" value="Submit">: This is a submit button, clicking this button will submit the data of the form.
  10. </form>: End form tag.
  11. </body>: Ends the main body of the HTML.
  12. </htmlb>: End BSP HTML page.

This BSP application is very simple, just a form and a submit button. The user can enter text in the text box, and after clicking the submit button, this text will be displayed on the title of the page.

Guess you like

Origin blog.csdn.net/i042416/article/details/131747988