ABAP Combat screen Design (ii)

Screen is one of the most important tasks of the ABAP design, and the business functions such as SAP's documents, master data maintenance, etc. use the screen, and a program can contain multiple screens.
Previous post "ABAP real-world screen design (a)" mainly describes the following:
(1) First "HELLO World" screen program
(2) Tool bar and menu design
(3) Screen object
(4) Data Dictionary Association fields
(5) Logical flow
(6) drop-down frame design
This post will continue to cover the rest of the content, mainly including
(1) Modify screen status
(2) Sub-window (subscreen)
(3) Table entry control
(4) Customize control, upload pictures and display picture instances on the screen
(5) Text editor

(6) List and screen call each other

1. Modify the screen state to dynamically set the properties of an object while the program is running, such as setting a field to be valid, grouping the fields in the screens design, and setting properties in the PbO event.
This section creates a checkbox on the screen, several input fields, divides the field into two groups, each group has a button, clicks the Group button, changes the properties of the field group according to the value of the checkbox, and the Design interface

1-1 and 1-2 are NO1 groups, 2-1 and 2-2 are NO2 groups.
The program code is as follows

Report  ytest20160613002.* function code return value Data:ok_code type Sy-ucomm,      save_ok type Sy-ucomm. DATA:SGRP () type C,     smod (1) Type c.* whether to modify Data:canmod (1) Type c.* default can be modified by Canmod = ' X '. * Direct call to window called screen 100.MODULE STA tus_0100 OUTPUT.  Set Pf-status ' STATUS1 '. * Determine the field group  SGRP = "according to the button.  IF SAVE_OK = ' BTN1 '.    SGRP = ' NO1 '.  ELSE.    SGRP = ' NO2 '.  Endif.*checkbox convert  IF canmod = ' X '.    Smod = ' 1 '.  ELSE.    Smod = ' 0 '.  endif.* Scan the screen element  LOOP at screen.* if it is a group that needs to be modified, change the variable, the other group does not consider, if formally consider storing first to the variable if    screen-group1 = sgrp.      Screen-input = smod.* updated to window element variable      MODIFY screen.    ENDIF.  Endloop. Endmodule. MODULE CANCEL INPUT.  LEAVE program. Endmodule. MODULE user_command_0100 INPUT.  SAVE_OK = Ok_code.  CLEAR Ok_code.  Case SAVE_OK.    When ' CANCEL '.      LEAVE program.  Endcase. Endmodule.

Output results such as

When you click the Set Group 1 button when you choose not to change, the test group 1 status becomes non-editable.

2, sub-window a program can have multiple windows, through the Sub-window, you can put a number of sub-windows on a window, so that the integrity of both, and convenient for the maintenance of a single screen. In SAP business programs, a large number of child window designs are used.
The Window object Sub-screen Range object is used to define properties such as the size and position of a child window on the main window, and the object is associated with the child window through the logical flow and the main program.
For example: Set up a main window and two sub-windows, create a sub-window range on the main window, add two buttons, and switch the child window when the button is clicked.

Main Window Design Interface:

Sub-window Design interface:

The same way to define a good screen 300

Back to main screen 100, define logical flow

PROCESS before OUTPUT. The MODULE STATUS_0100.*SUBSCR is the name of the child screen range defined by call SUBSCREEN:SUBSCR including Sy-repid SID1. PROCESS after INPUT. MODULE CANCEL at Exit-command. The MODULE user_command_0100.* causes the child screen to display the call Subscreen SUBSCR.

The main program code is as follows

Report  ytest20160613003.* function code return value Data:ok_code type Sy-ucomm,     save_ok type sy-ucomm.* child window default with 200 child window DATA:SID1 (4) TYPE N VALUE ' 200 '. * Direct call window called screen 100.MODULE status_0100 OUTPUT.  SET pf-status ' STATUS1 '. Endmodule. MODULE CANCEL INPUT.  LEAVE program. Endmodule. MODULE user_command_0100 INPUT.  SAVE_OK = Ok_code.  CLEAR Ok_code.  Case save_ok.* When the first button is clicked, a 200 child window is displayed when    ' BTN1 '.      SID1 = ' 200 '. * When the second button is clicked, 300 child windows are displayed when    ' BTN2 '.      SID1 = ' + '.    When ' CANCEL '.      LEAVE program.  Endcase. Endmodule.

Output results

When you click the Show Subwindow 2 button, the Subwindow 200 is displayed,

3, Table Entry Control Table entry control is the implementation of multiple sub-screens to switch the page form of the control, there are hand-made and wizard generated two, in this section, no longer repeat the sub-screen creation operation, only to express the particularity of the operation, hand-made icons are, the wizard made the icon is.
3.1, hand-made into the screen design, click the button, create a table entry control,

The controls in the figure show pink to indicate that their properties are not set to complete.
Set the name, text, function code properties by page, then select the "Child screen Range" button, on the first page to create the object, set the properties of the child screen, the first page is set to complete, no longer show pink, such as the table in the

3.2, wizard production on the design screen to create the "Table Entry Control Production Wizard" Object, start the wizard program,
After entering a name, continue
Enter the name of the page you want to create and continue

Wizard generates page face screen number and function code per page, can be adjusted on this basis, continue

The main program name of the home screen is called by default and continues

Set the parameter information as shown in the system prompt, click the "Finish" button

Open the design interface, the system automatically establishes the complete page, the logical flow and the main program code,

4, through custom control to display pictures on the screen can be "custom" objects on the screen to display a variety of controls, slices, Tree control, ALV, editor, and so on, the following example will be used in this control, first introduced in a custom control object display picture.
4.1, upload pictures upload images by tcode:smw0, select Binary data of the application, click the Find button,

Search criteria is empty by default, click the Execute button,

The screen shows an existing object, click the New button,

Enter the object name, click the input button,

Select the pair of images you want to upload

SAP GUI security pop-up window, click the "Allow" button

The development class here is empty by default, click the Local object button,

Generate a transfer-in request, click the button,
The upload succeeds, the screen displays the newly generated object row,

The relevant information can be queried in the data sheet "Wwwdata",

4.2, screen design definition object in the screen design interface to add custom control objects and "Exit" button,

4.3. The picture shows the program code as follows:

Report YTEST20160614002. Data:ok_code type Sy-ucomm, SAVE_OK type sy-ucomm.* define the control and image object definition data CONTAINER TYPE REF to Cl_gui_custom_container. Data picture the TYPE REF to cl_gui_picture.* initial flag field defines data INIT.  Call screen 100.MODULE user_command_0100 INPUT.  SAVE_OK = Ok_code.  CLEAR Ok_code.    Case SAVE_OK.      When ' CANCEL '.  LEAVE program. Endcase. Endmodule.  MODULE status_0100 OUTPUT.    SET pf-status ' STATUS1 '. * If the custom object has not yet been created if the INIT is initial.* picture Address field defines the DATA URL (255).    CLEAR url.* Create object CONTAINER exporting Container_name = ' P1 '.    CREATE OBJECT Picture Exporting PARENT = CONTAINER EXCEPTIONS ERROR = 1.    IF SY-SUBRC NE 0. Endif.* Define general function get picture address PERFORM load_pic_db changing url.* show picture call METHOD Picture->load_picture_from_url EXPORT    ING url = URL.    IF SY-SUBRC NE 0.  The endif.* flag bit is initialized with init = ' X '. ENDIF.  endmodule.* Get picture address general function form load_pic_db changing P_url.  DATA query_table like w3query occurs 1 with HEADER line. DATA html_table LIKE w3html occurs 1.  DATA return_code like W3param-ret_code.  DATA content_type like W3param-cont_type.  DATA content_length like W3param-cont_len.  DATA pic_data like w3mime occurs 0.  DATA pic_size TYPE I.  REFRESH query_table.* Query Object Data query_table-name = ' _object_id '. * Picture Object name Query_table-value = ' Ztestpic '.      APPEND query_table.* read Wwwdata table, get Picture object information call FUNCTION ' Www_get_mime_object ' TABLES query_string = query_table      HTML = html_table MIME = pic_data changing Return_code = return_code Content_Type = Content_Type  Content_length = content_length EXCEPTIONS object_not_found = 1 Parameter_not_found = 2 OTHERS = 3.    IF SY-SUBRC EQ 0.  Pic_size = Content_length.      endif.* Create image URL address call FUNCTION ' dp_create_url ' exporting TYPE = ' image ' subtype = Cndp_sap_tab_unknown SIZE = pic_size LIFETIME = cndp_lifetime_transaction TABLES DATA = pic_data changing URL = UR L EXCEPTIONS Dp_invalid_paramEter = 1 Dp_error_put_table = 2 Dp_error_general = 3 OTHERS = 4.ENDFORM. 

4.4, program output program run, output results
You can add a picture double-click event on this basis, which is no longer described here. 5, through the custom control text editor in SAP Business system, a large number of text editor, with a text editor to process the inner table, so this section on the screen to create a text editor, enter the relevant content, the screen exit when the output editor content.
5.1, screen design definition object in the screen design interface definition control object, Exit button.
5.2. Text Editor Program

Report YTEST20160614003. Data:ok_code type Sy-ucomm, SAVE_OK type sy-ucomm.* initial flag field definition * Custom control and edit object definition data:init, CONTAINER TYPE REF to Cl_gui _custom_container, EDITOR TYPE REF to Cl_gui_textedit. DATA:M1 (occurs) type C, line (0) type c.* input initial value line = ' Please enter '. APPEND line to M1. Call Screen 100.REFRESH M1.  Call METHOD editor->get_text_as_r3table Importing TABLE = m1.* progressive output loop at M1 to line. Write/line. Endloop.  MODULE user_command_0100 INPUT.  SAVE_OK = Ok_code.  CLEAR Ok_code.    Case SAVE_OK.      When ' CANCEL '.  LEAVE to screen 0. Endcase. Endmodule.  MODULE status_0100 OUTPUT.    SET pf-status ' STATUS1 '. * If the custom object has not yet been created if the INIT is INITIAL.    INIT = ' X '.    CREATE object:container Exporting Container_name = ' P1 '. CREATE OBJECT EDITOR Exporting PARENT = CONTAINER Wordwrap_mode = cl_gui_textedit=>wordwrap_at_fixed  _position wordwrap_position = Wordwrap_to_linebreak_mode = Cl_gui_textedit=>true. endif.* read in initial data call METHOD editor->set_text_as_r3table Exporting TABLE = M1. Endmodule.

5.3, after the output program runs, the screen displays a text editor, enter text in the edit box,
Click the "CANCEL" button to exit the Text editor screen, output the inner table record,

6, List and screen call each other 6.1, from the screen input conditions, list output data to the table as a ytjayschool example, create an input field and a Query button screen, when you click the Query button, according to the input field retrieved, the data through the list output.
Add a text field, define the name and text, then create the Input box, field properties for the input and output fields, and then add the "Confirm" button and the "Cancel" button.

The logic flow program is as follows
Switch to the element manifest page, define the variable "Ok_code",

The main program code is as follows

Report  YTEST20160614004. Data:ok_code type Sy-ucomm,      save_ok type Sy-ucomm,      Cityid (a) type C.tables ytjayschool. Call screen 100.MODULE CANCEL INPUT.  LEAVE program. Endmodule. MODULE user_command_0100 INPUT.  SAVE_OK = Ok_code.  CLEAR Ok_code.  IF save_ok EQ ' BTN1 '.    LEAVE to List-processing and RETURN to screen 0.    Suppress DIALOG.    SELECT * from      ytjayschool WHERE yct_id = Cityid.      WRITE:/ytjayschool-yct_id, ytjayschool-ysh_id,               ytjayschool-ysh_name, ytjayschool-ysh_addr.    Endselect.  ENDIF.  write:/ ' Done '. Endmodule.

Output, enter the criteria in the input box, click the "Confirm" button
System output
6.2, from the list call screen to Ytjayschool table For example, the output list on the screen, when you double-click a row, the call screen displays data details.
First set up the program YTEST20160615001, and then set up a display screen, click the "Dictionary field" button on the screen interface, enter the school table, the Screen Display table field, select fields, confirm,
Select the output location, click, the system automatically creates the input text and output fields, add the Exit button,

Logic Flow Program
After switching to the element manifest page, define the variable "Ok_code",
The main program code is as follows

Report  ytest20160615001.* function code return value Data:ok_code type Sy-ucomm,      save_ok type Sy-ucomm. TABLES Ytjayschool. Start-of-selection.  SELECT * from Ytjayschool.    write:/ ytjayschool-yct_id, (ytjayschool-ysh_id), (Ytjayschool-ysh_name), (a)          ytjayschool-ysh_addr.    hide:ytjayschool-yct_id, ytjayschool-ysh_id,           ytjayschool-ysh_name,  ytjayschool-ysh_addr.  Endselect. At Line-selection.  CHECK not ytjayschool-ysh_id is INITIAL.  Call screen 100.MODULE CANCEL INPUT.  LEAVE program. Endmodule. MODULE user_command_0100 INPUT.  SAVE_OK = Ok_code.  CLEAR Ok_code.  Case SAVE_OK.  When ' CANCEL '.    LEAVE program.  Endcase. Endmodule.

Execution results
When a row is selected, the output results

ABAP Combat screen Design (ii)