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. QT类使用记录

    QT类使用记录 1.QSharedMemory 提供了对一段共享内存的访问.既提供了被多进程和多线程共享的一段内存的访问.也为单线程或单进程锁定内存以实现互斥访问提供了方法. QSharedMemor ...

  2. vue3响应式模式设计原理

    vue3响应式模式设计原理 为什么要关系vue3的设计原理?了解vue3构建原理,将有助于开发者更快速上手Vue3:同时可以提高Vue调试技能,可以快速定位错误 1.vue3对比vue2 vue2的原 ...

  3. Blazor Bootstrap 组件库语音组件介绍

    Speech 语音识别与合成 通过麦克风语音采集转换为文字(STT),或者通过文字通过语音朗读出来(TTS) 本组件依赖于 BootstrapBlazor.AzureSpeech,使用本组件时需要引用 ...

  4. 分布式应用运行时 Dapr 1.7 发布

    Dapr 是一个开源.可移植的.事件驱动的运行时,可以帮助开发人员构建在云和边缘上运行的弹性的.微服务的.无状态和有状态应用程序,并且关注于业务逻辑而不用考虑分布式相关的问题. 分布式相关的问题交给D ...

  5. Java语言学习day05--7月2日

    今日内容介绍1.引用类型变量的创建及使用2.流程控制语句之选择语句 ###01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scanner类是属于引用数据类型,我们先了解下 ...

  6. spring4 mvc + jpa demo

    BEGIN; pom.xml 的引入的相关jar版本配置 <properties> <project.build.sourceEncoding>UTF-8</projec ...

  7. Jwt验证登录

    练习模板:https://gitee.com/zh1446802857/swagger-multi-version-api.git Jwt在我的 认知里,是一套门锁.别人(用户)需要用到你的接口 的时 ...

  8. 数据结构篇(2) ts实现单循环链表

    JS的class可以通过extends关键字实现类似其他语言的继承效果,比起使用一个extends关键字,在es5中实现继承要复杂一些,可以通过修改原型链的方法实现继承,让一个原型对象等于另一个类型的 ...

  9. SpringBoot 如何进行参数校验

    为什么需要参数校验 在日常的接口开发中,为了防止非法参数对业务造成影响,经常需要对接口的参数进行校验,例如登录的时候需要校验用户名和密码是否为空,添加用户的时候校验用户邮箱地址.手机号码格式是否正确. ...

  10. 实战｜Linux大文件切割

    一个执着于技术的公众号 日常工作中需要对日志文件进行分析,当日志文件过大时,Linux中使用vim.cat.grep.awk等这些工具对大文件日志进行分析将会成为梦魇,具体表现在: 执行速度缓慢,文件 ...