什么是 SAP 的 BSP UI 技术

简介: 什么是 SAP 的 BSP UI 技术

SAP Web 应用程序服务器提供基于页面的编程模型,具有服务器端脚本以及服务器页面技术,用于开发、设计和实施 Web 应用程序:业务服务器页面 (BSP)。 服务器端脚本允许直接访问应用程序服务器中的所有元素(例如功能模块、数据库表、ABAP 对象等)。


在 Web 应用程序服务器中,表示与业务逻辑是分开的。


可以使用 ABAP 或 JavaScript 中的服务器端脚本创建 HTML 页面或业务服务器页面 (BSP)。


创建应用程序时,可以利用模型视图控制器 (MVC) 设计模式。HTMLBXHTMLB HTML 业务库可作为 BSP 扩展提供,以实现统一的布局及其相关的可用性优势。


在 SAP 中,BSP 应用程序由一系列 BSP 页面组成,这些页面可以包含静态 HTML、ABAP 代码、JavaScript 或 CSS。这些页面可以包含 HTMLB(HTML 业务)库中的元素,HTMLB 库提供了一组预定义的 HTML 控件,如按钮、输入框、下拉列表等,这些控件可以方便地在 BSP 页面中使用。


BSP 技术的主要优点是它与 SAP 系统的紧密集成,这使得开发人员可以直接访问 SAP 系统中的所有 ABAP 功能,包括数据库访问、业务逻辑、用户管理等。此外,由于 BSP 页面在服务器上运行,因此它们可以动态地生成 HTML,这使得页面可以根据用户的输入和系统的状态来改变其内容。


例如,考虑一个简单的 BSP 应用程序,它允许用户在一个表单中输入他们的姓名和年龄,然后显示一个欢迎消息。这个应用程序可能包含两个 BSP 页面:一个输入页面和一个输出页面。输入页面可以包含两个 HTMLB 输入框控件,一个用于输入姓名,另一个用于输入年龄,以及一个 HTMLB 按钮控件,用于提交表单。当用户点击按钮时,页面的 ABAP 代码会被执行,它将用户的输入存储在服务器的会话内存中,然后导航到输出页面。输出页面的 ABAP 代码会从会话内存中读取用户的输入,然后生成一个包含欢迎消息的 HTML 页面,该消息包含用户的姓名和年龄。


在创建 BSP 应用程序时,首先需要在 SAP 系统中创建一个新的 BSP 应用程序。这可以通过在 ABAP 开发工作台的“BSP 应用程序”节点下选择“创建”来完成。在创建 BSP 应用程序时,需要提供一个唯一的名称,以及一个包含应用程序所有页面和相关资源的目录。创建 BSP 应用程序后,可以开始添加 BSP 页面。在创建 BSP 页面时,可以选择页面的类型(例如,HTML 页面或 ABAP 页面),并提供页面的名称和标题。


在 BSP 页面中,可以使用 HTML 和 ABAP 代码来定义页面的内容和行为。HTML 代码用于定义页面的布局和样式,而 ABAP 代码用于处理用户的输入和生成动态内容。为了让 ABAP 代码能够在服务器上运行,BSP 提供了一种特殊的标记语法,可以在 HTML 代码中插入 ABAP 代码。这些 ABAP 代码段在服务器上执行,并生成动态 HTML。


看一个具体的例子。


首先,我们需要创建一个BSP应用。在SE80事务中,选择BSP应用程序,并创建一个新的BSP应用,如"MyBSPApplication"。


在这个应用下,我们创建一个页面,如"MyPage.htm". 代码如下:

<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>


下面是代码的逐行解释:


  1. <htmlb>: 这是BSP的特殊标签,表示这是一个BSP HTML页面。
  2. <head>: 这是HTML的头部分,包括页面的标题和其他元数据。
  3. <title>My First BSP Application</title>: 这是页面的标题,会显示在浏览器的标题栏上。
  4. </head>: 结束HTML的头部分。
  5. <body>: 这是HTML的主体部分,包括要显示在页面上的内容。
  6. <h1><%= request->get_form_field( 'input1' ) %></h1>: 这是一个标题标签,其内容是从请求中获取的表单字段"input1"的值。<%=%>之间的内容是ABAP代码,可以直接在BSP页面中执行。
  7. <form method="POST" runat="server">: 这是一个表单标签,其method属性设置为"POST"表示这个表单提交的数据将通过POST方法发送到服务器。runat="server"表示这个表单将在服务器端运行。
  8. <input type="text" name="input1">: 这是一个文本输入框,其name属性设置为"input1",用于识别这个输入框的数据。
  9. <input type="submit" name="submit" value="Submit">: 这是一个提交按钮,点击这个按钮将提交表单的数据。
  10. </form>: 结束表单标签。
  11. </body>: 结束HTML的主体部分。
  12. </htmlb>: 结束BSP HTML页面。


这个BSP应用程序非常简单,只有一个表单和一个提交按钮。用户可以在文本框中输入文本,点击提交按钮后,这个文本将显示在页面的标题上。






相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
29 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
33 0
|
2月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
21 0
|
3天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
3天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
1月前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
2月前
|
搜索推荐 vr&ar Android开发
移动应用开发中的UI设计趋势与技术创新
随着移动应用市场的不断扩大和用户需求的日益多样化,移动应用开发领域的UI设计也在不断演进。本文将探讨当前移动应用开发中的UI设计趋势以及涌现的技术创新,包括对安卓和iOS平台的影响,以及未来可能的发展方向。
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0