很久很久。。。以前写的一个测试程序，主要是通过ABAP与HTML交互，编写JavaScript实现二维码及动态屏幕实现。
1.ABAP界面效果 
2.实现代码
1 *&---------------------------------------------------------------------* 2 *& Report ZRICO_CHTML 3 *& 4 *&---------------------------------------------------------------------* 5 *& Dynamic screen edit by rico 6 *& 实例程序名：SAPHTML_EVENTS_DEMO 7 *&---------------------------------------------------------------------* 8 9 REPORT ycf_htmlviewer. 10 11 TYPES : BEGIN OF y_html, 12 dataset(255) TYPE c, 13 END OF y_html. 14 15 DATA: e_data TYPE y_html, 16 ts_data TYPE STANDARD TABLE OF y_html, 17 e_user TYPE usr03, 18 ok_code TYPE sy-ucomm, 19 w_uname TYPE char20, 20 w_url TYPE char255, 21 p_tabnm like dd03l-tabname, 22 o_tabnm like dd03l-tabname, 23 bdstr type string, 24 p_barcd type c, 25 r_p1 type c value 'X', 26 r_p2 type c. 27 28 DATA : ref_cont TYPE REF TO cl_gui_custom_container, 29 ref_html TYPE REF TO cl_gui_html_viewer. 30 31 DATA: html_control TYPE REF TO cl_gui_html_viewer, 32 my_container TYPE REF TO cl_gui_custom_container, 33 prog_repid LIKE sy-repid, 34 ui_flag TYPE i, "#EC NEEDED 35 edurl(2048), 36 edframe(255), 37 edaction(256), 38 edgetdata(2048), 39 edpostdataline(1024), 40 myevent_tab TYPE cntl_simple_events, 41 myevent TYPE cntl_simple_event, 42 postdata_tab TYPE cnht_post_data_tab, 43 edquery_table TYPE cnht_query_table, 44 qtab type line of cnht_query_table. "#EC NEEDED 45 46 data:begin of ddtb occurs 0, 47 check type c, 48 tabname like dd03l-tabname, 49 fieldname like dd03l-fieldname, 50 rollname like dd03l-rollname, 51 keyflag like dd03l-keyflag, 52 position like dd03l-position, 53 datatype like dd03l-datatype, 54 leng like dd03l-leng, 55 ddtext like dd03t-ddtext, 56 value type string, 57 end of ddtb. 58 data:ldtb like line of ddtb. 59 60 data:cuscontainer_con type ref to cl_gui_custom_container, 61 alv_grid_con type ref to cl_gui_alv_grid, 62 ls_vari_con type disvariant, 63 gt_fieldcat_con like lvc_s_fcat occurs 0 with header line, 64 gs_layout_con type lvc_s_layo, 65 lt_excl_func type ui_functions, 66 g_repid like sy-repid, 67 ls_stable type lvc_s_stbl. 68 69 data:cuscontainer_mx type ref to cl_gui_custom_container, 70 alv_grid_mx type ref to cl_gui_alv_grid, 71 ls_vari_mx type disvariant, 72 gt_fieldcat_mx like lvc_s_fcat occurs 0 with header line, 73 gs_layout_mx type lvc_s_layo. 74 75 CLASS cl_myevent_handler DEFINITION. 76 77 PUBLIC SECTION. 78 METHODS: on_sapevent 79 FOR EVENT sapevent OF cl_gui_html_viewer 80 IMPORTING action frame getdata postdata query_table. 81 82 ENDCLASS. 83 DATA: evt_receiver TYPE REF TO cl_myevent_handler. 84 85 "class define 86 class lcl_event_receiver definition deferred. 87 88 class lcl_event_receiver definition. 89 public section. 90 methods: 91 handle_double_click 92 for event double_click of cl_gui_alv_grid 93 importing e_row e_column es_row_no. 94 endclass. "lcl_event_receiver DEFINITION 95 96 97 data event_receiver type ref to lcl_event_receiver. 98 99 *----------------------------------------------------------------------* 100 * class lcl_event_receiver implementation 101 *----------------------------------------------------------------------* 102 * 103 *----------------------------------------------------------------------* 104 class lcl_event_receiver implementation. 105 method: handle_double_click. 106 perform vp_double_clk using e_row 107 e_column 108 es_row_no. 109 endmethod. "handle_double_click 110 endclass. "lcl_event_receiver implementation 111 112 data:gr_event_handler type ref to lcl_event_receiver. 113 114 CLASS cl_myevent_handler IMPLEMENTATION. 115 116 METHOD on_sapevent. 117 118 CLEAR edaction. 119 CLEAR edframe. 120 CLEAR edgetdata. 121 CLEAR edpostdataline. 122 123 edaction = action. 124 edframe = frame. 125 edgetdata = getdata. 126 postdata_tab = postdata. 127 IF NOT postdata_tab IS INITIAL. 128 READ TABLE postdata_tab INDEX 1 INTO edpostdataline. 129 ENDIF. 130 edquery_table = query_table. 131 132 CASE action. 133 * WHEN 'SHOW_FRAMESET'. 134 * PERFORM load_frame_set. 135 when 'submit_form_as_post_method'. 136 clear:bdstr. 137 loop at ddtb into ldtb. 138 read table edquery_table into qtab with key name = ldtb-fieldname . 139 if sy-subrc = 0. 140 ldtb-value = qtab-value. 141 concatenate bdstr ldtb-ddtext ldtb-value into bdstr separated by space. 142 endif. 143 modify ddtb from ldtb. 144 clear:ldtb,qtab. 145 endloop. 146 WHEN OTHERS. 147 ENDCASE. 148 ENDMETHOD. 149 150 ENDCLASS. 151 152 data:user_id TYPE usr01-bname. 153 154 initialization. 155 g_repid = sy-repid. 156 ls_stable-row = 'X'. 157 ls_stable-col = 'X'. 158 159 160 START-OF-SELECTION. 161 162 PERFORM f_get_username. 163 164 CALL SCREEN 9000. 165 *&---------------------------------------------------------------------* 166 *& Module STATUS_9000 OUTPUT 167 *&---------------------------------------------------------------------* 168 * PBO for 9000 169 *----------------------------------------------------------------------* 170 MODULE status_9000 OUTPUT. 171 SET PF-STATUS 'STATUS'. 172 173 perform f_genearte_html. 174 175 perform html_container. 176 177 perform tab_container. 178 179 ENDMODULE. " STATUS_9000 OUTPUT 180 *&---------------------------------------------------------------------* 181 *& Module USER_COMMAND_9000 INPUT 182 *&---------------------------------------------------------------------* 183 * PAI for screen 9000 184 *----------------------------------------------------------------------* 185 MODULE user_command_9000 INPUT. 186 187 CASE ok_code. 188 when ''. 189 perform initial_data. 190 WHEN 'BACK'. 191 LEAVE TO SCREEN 0. 192 WHEN OTHERS. 193 ENDCASE. 194 195 ENDMODULE. " USER_COMMAND_9000 INPUT 196 197 form initial_data. 198 if o_tabnm <> p_tabnm. 199 select * into corresponding fields of table ddtb 200 from dd03l 201 where tabname = p_tabnm 202 and comptype <> 'S'. 203 204 sort ddtb by position. 205 206 loop at ddtb. 207 if ddtb-rollname = ''. 208 select single ddtext into ddtb-ddtext from dd03t where tabname = ddtb-tabname and ddlanguage = sy-langu and fieldname = ddtb-fieldname. 209 else. 210 select single ddtext into ddtb-ddtext from dd04t where rollname = ddtb-rollname and ddlanguage = sy-langu. 211 endif. 212 if ddtb-fieldname = 'MANDT'. 213 delete ddtb. 214 else. 215 modify ddtb. 216 endif. 217 clear:ddtb. 218 endloop. 219 o_tabnm = p_tabnm. 220 endif. 221 endform. 222 *&---------------------------------------------------------------------* 223 *& Form F_GENEARTE_HTML 224 *&---------------------------------------------------------------------* 225 * HTML code 226 *----------------------------------------------------------------------* 227 228 FORM f_genearte_html . 229 230 clear:e_data. 231 free ts_data. 232 233 concatenate '<html><head> Dear:' sy-uname into e_data-dataset separated by space. append e_data to ts_data. 234 235 if r_p1 = 'X'. 236 e_data-dataset = '<br><img src="SAPLOGO.GIF" align=middle></br>'. 237 elseif r_p2 = 'X'. 238 e_data-dataset = '<br><img src="SAP_AG.GIF" align=middle></br>'. 239 endif. 240 APPEND e_data TO ts_data. 241 242 e_data-dataset = '</head><body><meta http-equiv="Content-Type" content="text/html; charset=gb2312" />'. append e_data to ts_data. 243 e_data-dataset = '<style type="text/css">'. append e_data to ts_data. 244 e_data-dataset = '.div-c{ width:200px; margin:0px;line-hight:10px;}'. append e_data to ts_data. 245 e_data-dataset = '.div-a{ float:left; width:50px; border:1px solid #999; height:60px;margin:20px;line-hight:10px;}'. append e_data to ts_data. 246 e_data-dataset = '.div-b{ float:right; width:120px; border:1px solid #999; height:60px;margin:20px;line-hight:10px;}'. append e_data to ts_data. 247 e_data-dataset = '</style>'. append e_data to ts_data. 248 "e_data-dataset = '<br><span style="font-size:500px">字体</span></br>'. append e_data to ts_data. 249 250 e_data-dataset = '<br><h3>Dynamic QR-CODE:'. APPEND e_data TO ts_data. 251 "二维码显示，已测试成功。。 252 if p_barcd = 'X'. 253 e_data-dataset = '<script type="text/javascript" src="http://static.hdslb.com/js/jquery.min.js""></script>'. append e_data to ts_data. 254 e_data-dataset = '<script type="text/javascript" src="http://static.hdslb.com/js/jquery.qrcode.min.js"></script>'. append e_data to ts_data. 255 e_data-dataset = '<div id="code"></div>'. append e_data to ts_data. 256 257 "unicode中文 由UTF-16转换为UTF-8 258 e_data-dataset = '<script type="text/javascript">'.append e_data to ts_data. 259 e_data-dataset = 'function utf16to8(str) {'.append e_data to ts_data. 260 e_data-dataset = ' var out, i, len, c;'.append e_data to ts_data. 261 e_data-dataset = ' out = "";'.append e_data to ts_data. 262 e_data-dataset = ' len = str.length;'.append e_data to ts_data. 263 e_data-dataset = ' for(i = 0; i < len; i++) {'.append e_data to ts_data. 264 e_data-dataset = ' c = str.charCodeAt(i);'.append e_data to ts_data. 265 e_data-dataset = ' if ((c >= 0x0001) && (c <= 0x007F)) {'.append e_data to ts_data. 266 e_data-dataset = ' out += str.charAt(i);'.append e_data to ts_data. 267 e_data-dataset = ' } else if (c > 0x07FF) {'.append e_data to ts_data. 268 e_data-dataset = ' out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));'.append e_data to ts_data. 269 e_data-dataset = ' out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));'.append e_data to ts_data. 270 e_data-dataset = ' out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));'.append e_data to ts_data. 271 e_data-dataset = ' } else {'.append e_data to ts_data. 272 e_data-dataset = ' out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));'.append e_data to ts_data. 273 e_data-dataset = ' out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));'.append e_data to ts_data. 274 e_data-dataset = ' }'.append e_data to ts_data. 275 e_data-dataset = ' }'.append e_data to ts_data. 276 e_data-dataset = ' return out;'.append e_data to ts_data. 277 e_data-dataset = '}'.append e_data to ts_data. 278 e_data-dataset = '</script>'.append e_data to ts_data. 279 280 "e_data-dataset = '<script>$("#code").qrcode("http://www.helloweba.com");</script>'. append e_data to ts_data. "//任意字符串 281 e_data-dataset = '<script>$("#code").qrcode({ '. append e_data to ts_data. 282 e_data-dataset = ' render: "table", '. append e_data to ts_data. 283 e_data-dataset = ' width: 100, '. append e_data to ts_data. 284 e_data-dataset = ' height:100, '. append e_data to ts_data. 285 concatenate ' text: utf16to8("' bdstr '") ' into e_data-dataset. append e_data to ts_data. 286 e_data-dataset = '}); </script>'. append e_data to ts_data. 287 endif. 288 e_data-dataset = '</h3><br>'. APPEND e_data TO ts_data. 289 290 concatenate 'Below is the dynamic fields from the data structure:' p_tabnm into e_data-dataset separated by space. 291 APPEND e_data TO ts_data. 292 293 e_data-dataset = '<form method=post action="sapevent:submit_form_as_post_method">'. 294 append e_data to ts_data. 295 296 loop at ddtb where check = 'X'. 297 concatenate '<div class="div-c"><p><font size="2" color="blue">' ddtb-ddtext '</p></div>' into e_data-dataset. 298 append e_data to ts_data. 299 concatenate '<div class="div-c"><p><font size="2" color="blue"><input type="text" name="' ddtb-fieldname '" value="' ddtb-value '" maxlength="' ddtb-leng '"></p></div>' into e_data-dataset. 300 append e_data to ts_data. 301 endloop. 302 303 * e_data-dataset = '<label for="meeting">日期：</label><input type="date" name="user_date" />'. 304 * append e_data to ts_data. 305 306 e_data-dataset = '<br><input type=submit value="submit input using post method"></br></form>'. 307 append e_data to ts_data. 308 309 e_data-dataset = '</body></html>'. 310 append e_data to ts_data. 311 312 * <FORM method=get action="SAPEVENT:SUBMIT_FORM_AS_GET_METHOD"> 313 * <P>First Name <INPUT TYPE=text NAME=FirstName VALUE=John> 314 * <P>Last Name <INPUT TYPE=text NAME=LastName VALUE=Smith> 315 * <P><INPUT TYPE=submit VALUE="Submit input using GET method"> 316 * </FORM></td><td> 317 * 318 * <FORM method=post action="SAPEVENT:SUBMIT_FORM_AS_POST_METHOD"> 319 * <P>First Name <INPUT TYPE=text NAME=FirstName VALUE=John> 320 * <P>Last Name <INPUT TYPE=text NAME=LastName VALUE=Smith> 321 * <P><INPUT TYPE=submit VALUE="Submit input using POST method"> 322 * </FORM></td></tr></table> 323 324 ENDFORM. " F_GENEARTE_HTML 325 *&---------------------------------------------------------------------* 326 *& Form F_GET_USERNAME 327 *&---------------------------------------------------------------------* 328 * To get User name from Tcode 329 *----------------------------------------------------------------------* 330 FORM f_get_username . 331 332 CALL FUNCTION 'SUSR_USER_ADDRESS_READ' 333 EXPORTING 334 user_name = user_id 335 IMPORTING 336 user_usr03 = e_user 337 EXCEPTIONS 338 user_address_not_found = 1 339 OTHERS = 2. 340 341 IF sy-subrc = 0. 342 343 CONCATENATE e_user-name1 344 e_user-name2 345 INTO w_uname 346 SEPARATED BY space. 347 348 ENDIF. 349 350 ENDFORM. " F_GET_USERNAME 351 *&---------------------------------------------------------------------* 352 *& Module EXIT INPUT 353 *&---------------------------------------------------------------------* 354 * text 355 *----------------------------------------------------------------------* 356 MODULE EXIT INPUT. 357 leave to screen 0. 358 ENDMODULE. " EXIT INPUT 359 360 form tab_container. 361 clear:gt_fieldcat_con,gs_layout_con. 362 refresh:gt_fieldcat_con. 363 364 if cuscontainer_con is initial. 365 create object cuscontainer_con 366 exporting 367 container_name = 'TBCON' 368 exceptions 369 cntl_error = 1 370 cntl_system_error = 2 371 create_error = 3 372 lifetime_error = 4 373 lifetime_dynpro_dynpro_link = 5 374 others = 6. 375 376 create object alv_grid_con "定义alv及所在容器 377 exporting 378 i_parent = cuscontainer_con 379 exceptions 380 error_cntl_create = 1 381 error_cntl_init = 2 382 error_cntl_link = 3 383 error_dp_create = 4 384 others = 5. 385 386 create object gr_event_handler. 387 set handler gr_event_handler->handle_double_click for alv_grid_con. 388 endif. 389 390 if gt_fieldcat_con[] is initial. 391 perform get_fieldcat using: 392 "'TABNAME' 'T' '' '表名', 393 'FIELDNAME' 'T' '' '字段名', 394 'VALUE' 'T' '' '值', 395 'DDTEXT' 'T' '' '描述', 396 'KEYFLAG' 'T' '' 'KEY'. 397 * 'POSITION' 'T' '' '序号', 398 * 'DATATYPE' 'T' '' '数据类型', 399 * 'LENG' 'T' '' '长度'. 400 401 gs_layout_con-zebra = 'X'. 402 gs_layout_con-cwidth_opt = 'X'. 403 gs_layout_con-stylefname = 'FIELD_STYLE'. 404 gs_layout_con-no_toolbar = 'X'. 405 gs_layout_con-box_fname = 'CHECK'. 406 endif. 407 408 call method alv_grid_con->set_table_for_first_display " 显示alv 409 exporting 410 is_layout = gs_layout_con 411 is_variant = ls_vari_con 412 i_save = 'A' 413 it_toolbar_excluding = lt_excl_func 414 changing 415 it_fieldcatalog = gt_fieldcat_con[] 416 it_outtab = ddtb[] 417 exceptions 418 invalid_parameter_combination = 1 419 program_error = 2 420 too_many_lines = 3 421 others = 4 . 422 423 endform. 424 425 form get_fieldcat using zd zdbz zdet zdms. 426 if zdbz = 'T'. 427 gt_fieldcat_con-fieldname = zd. 428 gt_fieldcat_con-reptext = zdms. 429 gt_fieldcat_con-checkbox = zdet. 430 append gt_fieldcat_con. 431 clear:gt_fieldcat_con. 432 elseif zdbz = 'M'. 433 gt_fieldcat_mx-fieldname = zd. 434 gt_fieldcat_mx-reptext = zdms. 435 gt_fieldcat_mx-checkbox = zdet. 436 gt_fieldcat_mx-edit = zdet. 437 if zd = 'ZFDTX' or zd = 'ZFLNM'. 438 gt_fieldcat_mx-edit = 'X'. 439 elseif zd = 'ZDFLG'. 440 gt_fieldcat_mx-checkbox = 'X'. 441 endif. 442 append gt_fieldcat_mx. 443 clear:gt_fieldcat_mx. 444 endif. 445 endform. "get_fieldcat_con 446 447 form vp_double_clk using e_row type lvc_s_row 448 e_column type lvc_s_col 449 es_row_no type lvc_s_roid. 450 read table ddtb index es_row_no-row_id. 451 if ddtb-check = 'X'. 452 ddtb-check = ''. 453 else. 454 ddtb-check = 'X'. 455 endif. 456 modify ddtb index es_row_no-row_id transporting check. 457 458 perform f_genearte_html. 459 460 perform html_container. 461 462 endform. 463 464 form html_container. 465 466 if not ref_html is initial. 467 "call method ref_html->free. 468 clear:w_url. 469 "free ref_html. 470 "free ref_cont. 471 endif. 472 473 if ref_cont is initial. 474 create object ref_cont 475 exporting 476 container_name = 'HTMLCONT' 477 exceptions 478 cntl_error = 1 479 cntl_system_error = 2 480 create_error = 3 481 lifetime_error = 4 482 lifetime_dynpro_dynpro_link = 5 483 others = 6. 484 if sy-subrc <> 0. 485 endif. 486 endif. 487 488 if ref_html is initial. 489 490 ui_flag = cl_gui_html_viewer=>uiflag_no3dborder. 491 " + cl_gui_html_viewer=>uiflag_noiemenu. 492 493 create object ref_html 494 exporting 495 parent = ref_cont 496 saphtmlp = 'X' 497 uiflag = ui_flag 498 lifetime = cl_gui_html_viewer=>lifetime_dynpro 499 exceptions 500 cntl_error = 1 501 cntl_install_error = 2 502 dp_install_error = 3 503 dp_error = 4 504 others = 5. 505 if sy-subrc <> 0. 506 endif. 507 508 509 myevent-eventid = ref_html->m_id_sapevent. 510 myevent-appl_event = 'X'. 511 append myevent to myevent_tab. 512 call method ref_html->set_registered_events 513 exporting 514 events = myevent_tab. 515 516 create object evt_receiver. 517 518 set handler evt_receiver->on_sapevent for ref_html. 519 520 endif. 521 522 523 call method ref_html->load_mime_object 524 exporting 525 object_id = 'HTMLCNTL_TESTHTM2_SAPLOGO' 526 object_url = 'SAPLOGO.GIF' 527 exceptions 528 others = 1. 529 530 call method ref_html->load_mime_object 531 exporting 532 object_id = 'HTMLCNTL_TESTHTM2_SAP_AG' 533 object_url = 'SAP_AG.GIF' 534 exceptions 535 others = 1. 536 537 call method ref_html->load_data 538 exporting 539 type = 'text' 540 subtype = 'html' 541 importing 542 assigned_url = w_url 543 changing 544 data_table = ts_data 545 exceptions 546 dp_invalid_parameter = 1 547 dp_error_general = 2 548 cntl_error = 3 549 others = 4. 550 if sy-subrc <> 0. 551 endif. 552 553 call method ref_html->show_url 554 exporting 555 url = w_url 556 exceptions 557 cntl_error = 1 558 cnht_error_not_allowed = 2 559 cnht_error_parameter = 3 560 dp_error_general = 4 561 others = 5. 562 if sy-subrc <> 0. 563 endif. 564 565 * call method ref_html->do_refresh 566 * exceptions cntl_error = 1. 567 * 568 * call method cl_gui_cfw=>dispatch. 569 endform.