REPORT demo_html_input.

CLASS demo DEFINITION.

  PUBLIC SECTION.

    CLASS-METHODS main.

  PRIVATE SECTION.

    CLASS-METHODS handle_sapevent

      FOR EVENT sapevent

                  OF cl_abap_browser

      IMPORTING action

                  query_table.

ENDCLASS.

CLASS demo IMPLEMENTATION.

  METHOD main.

    DATA error_list TYPE cl_abap_browser=>html_table.

    SET HANDLER handle_sapevent.

    DATA(html_str) =

       `<html>`

    && `  <head>`

    && `    <meta http-equiv="content-type" `

    && `          content="text/html; `

    && `          charset=utf-8">`

    && `    <script language="JavaScript">`

    && `      function sendInput(form) `

    && `          { fname=form.name;       `

    && `            document[fname].submit();} `

    && `      function InputKeyDown(form) {`

    && `        if(event.keyCode == 13) {`

    && `            fname=form.name;`

    && `            document[fname].submit();} }`

    && `    </script>`

    && `  </head>`

    && `  <body>`

    && `    <form name="INPUT" accept-charset="utf-8" `

    && `          method="post" action="SAPEVENT:INPUT"> `

    && `      <input type="text" id="in1" name="field1" `

    && `             size=30 maxlength=30 title="" value="aaa" `

    && `             onKeyDown="InputKeyDown(this.form);"><br>`

    && `      <input type="text" id="in2" name="field2" `

    && `             size=30 maxlength=30 title="" value="bbb" `

    && `             onKeyDown="InputKeyDown(this.form);"><br>`

    && `      <input type="text" id="in3" name="field3" `

    && `             size=30 maxlength=30 title="" value="ccc" `

    && `             onKeyDown="InputKeyDown(this.form);"><br><br>`

    && `     <button id="enterButton" type="button" `

    && `             title="Enter" onClick="sendInput(INPUT);" `

    && `             onKeypress="if(event.keycode=13) `

    && `             sendInput(INPUT);">`

    && `             Enter</button>`

    && `    </form>`

    && `  </body>`

    && `</html>`.

    cl_abap_browser=>show_html(

      EXPORTING

        html_string = html_str

        title       = 'Input Demo'

      IMPORTING

         html_errors = error_list ).

    IF error_list IS NOT INITIAL.

      MESSAGE 'Error in HTML' TYPE 'I' DISPLAY LIKE 'E'.

    ENDIF.

  ENDMETHOD.

  METHOD handle_sapevent.

    DATA(out) = cl_demo_output_stream=>open( ).

    SET HANDLER cl_demo_output_html=>handle_output FOR out.

    out->write_data( iv_name = 'ACTION'      ia_value = action ).

    out->write_data( iv_name = 'QUERY_TABLE' ia_value = query_table ).

    out->close( ).

  ENDMETHOD.

ENDCLASS.

START-OF-SELECTION.

  demo=>main( ).

Description

This example creates a HTML file containing multiple input fields, a pushbutton, and JavaScript functions for handling the input. The form INPUT uses method="post" to send the input data. The HTML control in CFW uses the parameter QUERY_TABLE of the event SAPEVENT to pass this data to its handler. The class CL_ABAP_BROWSER (a wrapper for the class CL_GUI_HTML_VIEWER also passes this parameter and the user input can be used in the ABAP program.

Also see the corresponding example for ICF.

SAP 实例 6 HTML input的更多相关文章

  1. SAP 实例 10 List Box with value list from input help

    *&---------------------------------------------------------------------* *& Report DEMO_DROP ...

  2. SAP 实例 4 CFW

    *&---------------------------------------------------------------------* *& Report demo_cfw ...

  3. Vue实例：演示input 和 textarea 元素中使用 v-model 实现双向数据绑定

    最终效果: 主要代码: <template> <div> <p>input 元素:</p> <input v-model="messag ...

  4. SAP 实例- 下拉框

    效果图 源代码 REPORT rsdemo_dropdown_listbox . DATA init. TABLES scarr. TABLES spfli. TABLES sflight. TABL ...

  5. SAP 实例- 页签tabsrip

    屏幕页签:项目上有一需求,对标准TCODE 一个屏幕增加一个页签.于是做了个例子. 下面屏幕有两个页签. 我们来看一下屏幕结构.100屏幕是主屏幕,101,102是子屏幕,对应页签test1,test ...

  6. SAP 实例 12 List Box with Value List from PBO Module

    REPORT demo_dynpro_dropdown_listbox. DATA: name TYPE vrm_id, list TYPE vrm_values, value LIKE LINE O ...

  7. SAP 实例 8 HTML from the MIME Repository

    REPORT demo_html_from_mime. CLASS mime_demo DEFINITION. PUBLIC SECTION. CLASS-METHODS main. PRIVATE ...

  8. SAP 实例 5 CFW Events

    REPORT demo_custom_control . * Declarations ***************************************************** CL ...

  9. SAP 实例 3 Context Menus

    REPORT demo_dynpro_context_menu. DATA: field1 TYPE i VALUE 10, field2 TYPE p DECIMALS 4. DATA: prog ...

随机推荐

  1. OpenHarmony标准设备应用开发（二）——布局、动画与音乐

    (以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 邢碌 上一章我们讲解了应用编译环境准备,设备编译环境准备,开发板烧录,将一个最简单的 OpenAtom OpenHar ...

  2. 1903021116—吉琛—Java第七周作业—客户类测试

    项目 内容 课程班级博客链接 19信计班 这个作业要求链接 第七周作业链接 博客名称 学号-姓名-Java第七周作业-客户类测试 要求 每道题要有题目,代码(使用插入代码,不会插入代码的自己查资料解决 ...

  3. javaScript 内存管理机制

    大家好,今天分享的主题为 JavaScript 内存管理机制,本次分享将从以下三部分进行讲述: js 内存管理与 js 垃圾 常见的 GC 算法 V8 引擎的垃圾回收 js 内存管理与 js 垃圾 关 ...

  4. JavaScript学习基础1

    ##JavaScript: # 概念:一门运行在客户端的脚本语言 *运行在客户端浏览器中的.属于前端三件套之一,属于静态资源,每一个浏览器都有JavaScript的解析引擎 *脚本语言:不需要编译,直 ...

  5. Vue 生产环境（production) 打开 调试工具的方法

    总所周知,在production生产环境下,点击vue插件会显示, 并且按F12是没办法使用调试工具的,这样非常不方便 其实是有一个办法的,那就是复制下面的js,然后在控制台执行 代码中已经写清楚执行 ...

  6. Windows资源管理器文件名排序

    Windows资源管理器文件名排序 Windows资源管理器文件名排序 背景:自然排序 什么是自然排序? 怎样按自然排序的规则进行排序? 基于Python的解决方案 参考材料 这学期担任了本科生教学助 ...

  7. tuandui last

    组长博客链接### 组长博客 参考邹欣老师的问题模板进行总结思考### 设想和目标(2分)#### 1.我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 解决的问题 ...

  8. 解构HE2E中的Kubernetes技术应用

    摘要:我们从Kubernetes技术应用的角度解构华为云DevCloud HE2E DevOps实践. 本文分享自华为云社区<解构HE2E中的Kubernetes技术应用>,作者: 敏捷小 ...

  9. 三、单redis升级redis集群+哨兵

    针对假如已经是安装了redis,只是是单部署,需要把他切换成redis集群+哨兵模式,我因为偷懒,就写了个脚本来执行,各位看官,请品~你品~你细品~ 首先准备个升级包,放到任意路径,内容如下: 第一个 ...

  10. API Schema in kubernetes

    目录 什么是schema 数据库中的schema Kubernetes中的schema 通过示例了解schema 什么是schema schema一词起源于希腊语中的form或figure,但具体应该 ...