Catalogue of series articles
SAP FPM Volume 1: what is FPM
FPM Volume II of SAP: FPM development example - creating WDA application
FPM Volume III of SAP: FPM development example - assumption, demand and optimization
preface
This chapter creates the tables and structures required by the program and completes the code of the search page
1, Create tables, structures
The structure used in the search interface (for search header) and create the corresponding table type (for displaying search results)
Among them, the project definition and its corresponding description field POST1 are filtered according to the business division. I have made a separate search help here. You can choose your familiar business scenario to write DEMO program
STATUS is a field with saved, deleted, approved and other statuses
We try not to physically delete the deletion, just mark it for deletion
Create a header table and activate it (import the structure just created)
You can create a detail structure or create a table directly (I choose to create a table directly here). The detail class can create a table type by referencing this table
The coded data element can be created with the same name. Remember to add the currency / quantity reference field area for the field of QUAN data type_ UNT
2, Implement search page
1. Add attribute
Enter class ZCL_TEST_DEMO_SCH_HEAD
Add Mo in the property tab_ FPM TYPE REF TO IF_ FPM
MS for selection criteria_ SEL； MT for query results_ Result (refer to the structure table type built above)
Go to type label maintenance
First create a TS type and refer to the bottom table ZTEST_DEMO_SCH
Enter private: add TT_RESULT
PRIVATE SECTION.
TYPES ts_result TYPE ztest_demo_sch .
TYPES:
tt_result TYPE TABLE OF ztest_demo_sch .
2. Go to the method tab
1. Enter the INITIALIZE method
Add code to get object instance
Save activation
mo_fpm ?= cl_fpm=>get_instance( ).
2. Enter guibb_ Get corresponding to form_ Definition, paste the following code and save the activation
METHOD if_fpm_guibb_form~get_definition.
DATA:
ls_action_def TYPE fpmgb_s_actiondef,
ls_fixed_value TYPE wdr_context_attr_value,
ls_field_descr LIKE LINE OF et_field_description,
lt_component TYPE abap_component_tab.
DATA:ls_value TYPE wdr_context_attr_value,
lt_value TYPE wdr_context_attr_value_list.
FIELD-SYMBOLS:
<ls_component> LIKE LINE OF lt_component,
<fs_field_desc> TYPE fpmgb_s_formfield_descr.
eo_field_catalog ?= cl_abap_structdescr=>describe_by_data( ms_sel ).
lt_component = eo_field_catalog->get_components( ).
* Set properties for fields
LOOP AT lt_component ASSIGNING <ls_component>.
CLEAR ls_field_descr.
ls_field_descr-name = <ls_component>-name.
"Setting required
IF <ls_component>-name = 'ZSYBM'.
* The business department is going to set it as a drop-down box, so it must have fixed_value
ls_value-value = '01'.
ls_value-text = 'Beijing Business Department'.
APPEND ls_value TO lt_value.
ls_value-value = '02'.
ls_value-text = 'Shanghai Business Department'.
APPEND ls_value TO lt_value.
ls_field_descr-fixed_values = lt_value.
CLEAR:lt_value.
ls_field_descr-mandatory = 'X'.
APPEND ls_field_descr TO et_field_description.
ELSE.
APPEND ls_field_descr TO et_field_description.
ENDIF.
ENDLOOP.
* CHANGE SYB
* The response events added here are hidden in the changes of the business unit, so there is no need to set descriptions and icons
CLEAR: ls_action_def-extended.
ls_action_def-id = 'CHG_SYB'.
ls_action_def-enabled = abap_true.
APPEND ls_action_def TO et_action_definition.
ENDMETHOD.
eo_field_catalog is essential for generating query structure objects. In addition, field properties (required, read-only, FIX_VALUE, available, etc.) can be set below, et_field_description is a built-in parameter in the method, so we just need to set the desired effect, regardless of how to achieve it. Where LS_ field_ The attributes that can be set in descr are shown in the following figure: (it can be seen that there are many attributes that can be set)
3. Enter GUIBB_FORM corresponds to the FLUSH method, paste the following code and activate it
METHOD if_fpm_guibb_form~flush.
FIELD-SYMBOLS: <fs> TYPE any.
IF it_change_log IS NOT INITIAL.
ASSIGN is_data->* TO <fs>.
ms_sel = <fs>.
ENDIF.
ENDMETHOD.
- Enter guibb_ Get of form_ Data method
Paste the code and activate it (please read my notes, which will be used in the actual scene):
METHOD if_fpm_guibb_form~get_data.
* EV_FIELD_USAGE_CHANGED = ABAP_TRUE Time
* Represents that the field properties have been changed, such as changing the readability and mandatory of a field
* You can still set field properties here, just LOOP Inner table CT_FIELD_USAGE MODIFY Or use FIELD-SYMBOLS
* If we change the field properties, EV_FIELD_USAGE_CHANGED Must be set to ABAP_TRUE Otherwise, the change will not take effect
* EV_ACTION_USAGE_CHANGED = ABAP_TRUE Time
* Represents that the event (button) property has changed LOOP Inner table EV_ACTION_USAGE_CHANGED Button properties can be changed
* ENABLED Available VISIBLE Show
* For event handling, you can first define its attribute name in the attribute GC_CHG_SYB TYPE FPM_EVENT_ID Its default value is : 'CHG_SYB'
* ET_MESSAGES It is an error message. If an error is encountered during the running of the program, you can directly send the error message append Into this inner table
* All activities depend on objects( IO_EVENT) This is also a built-in parameter in this method
CASE io_event->mv_event_id.
WHEN 'FPM_START'.
* This is the first and standard event captured by the entry program
WHEN gc_chg_syb. "'CHG_SYB'."You can use the attribute name instead
CLEAR:ms_sel-pspid,ms_sel-post1.
WHEN OTHERS.
ENDCASE.
cs_data = ms_sel.
* If the data changes, the system will refresh the value of the page, which is required by default
ev_data_changed = abap_true.
ENDMETHOD.
Set the EVENT_ID in the property tab. If it is not set, you can also use the event ID set at the beginning, that is, the value in the initial value
PROCESS_EVENT of GUIBB_FORM, paste the following code
The CREATE method code is at the end of the article
METHOD if_fpm_guibb_form~process_event.
DATA:lv_result TYPE fpm_event_result.
CASE io_event->mv_event_id.
WHEN gc_create. "CREATE Create data
CLEAR:lv_result.
CALL METHOD me->check_before_create
CHANGING
cv_result = lv_result " FPM Event results
ct_messages = et_messages.
CHECK lv_result NE 'FAILED'.
CALL METHOD me->create_data( ).
WHEN OTHERS.
ENDCASE.
ENDMETHOD.
5. Enter GET_DEFINITION of GUIBB_LIST
Here we need to add buttons (handle events) and display them on the web page, so we add text and icon s
Paste the following code and activate
METHOD if_fpm_guibb_list~get_definition.
DATA:
lo_field_catalog TYPE REF TO cl_abap_structdescr,
ls_field_descr TYPE fpmgb_s_listfield_descr,
ls_action_def TYPE fpmgb_s_actiondef,
ls_fpm TYPE fpm_s_runtime_info,
lt_component TYPE abap_component_tab.
DATA:ls_value TYPE wdr_context_attr_value,
lt_value TYPE wdr_context_attr_value_list.
FIELD-SYMBOLS:
<ls_component> LIKE LINE OF lt_component,
<fs_field_desc> TYPE fpmgb_s_listfield_descr.
eo_field_catalog ?= cl_abap_structdescr=>describe_by_data( mt_result ).
lo_field_catalog ?= eo_field_catalog->get_table_line_type( ).
lt_component = lo_field_catalog->get_components( ).
LOOP AT lt_component ASSIGNING <ls_component>.
CLEAR ls_field_descr.
ls_field_descr-name = <ls_component>-name.
ls_field_descr-allow_sort = 'X'.
ls_field_descr-allow_filter = 'X'.
ls_field_descr-read_only = 'X'.
IF ls_field_descr-name EQ 'ZSYBM'.
* The drop-down box set by the business department must have fixed_value
ls_value-value = '01'.
ls_value-text = 'Beijing Business Department'.
APPEND ls_value TO lt_value.
ls_value-value = '02'.
ls_value-text = 'Shanghai Business Department'.
APPEND ls_value TO lt_value.
ls_field_descr-fixed_values = lt_value.
CLEAR:lt_value.
ENDIF.
APPEND ls_field_descr TO et_field_description.
CLEAR ls_field_descr.
ENDLOOP.
* add to EVENT(Button)
* see
CLEAR: ls_action_def-extended.
ls_action_def-id = 'DISPLAY'.
ls_action_def-imagesrc = '~Icon/Display'.
ls_action_def-text = 'see'.
ls_action_def-enabled = abap_true.
APPEND ls_action_def TO et_action_definition.
* Adjustment button
CLEAR: ls_action_def-extended.
ls_action_def-id = 'ADJUST'.
ls_action_def-imagesrc = '~Icon/EditChangedItem'.
ls_action_def-text = 'adjustment'.
ls_action_def-enabled = abap_true.
APPEND ls_action_def TO et_action_definition.
* Delete button
CLEAR: ls_action_def-extended.
ls_action_def-id = 'DELETE'.
ls_action_def-text = 'delete'.
ls_action_def-imagesrc = '~Icon/Delete'.
ls_action_def-enabled = abap_true.
APPEND ls_action_def TO et_action_definition.
ENDMETHOD.
6. After entering the workbench, you can put out the fields to see the effect
Select uibb to enter the configuration, or click the wrench at the top right of uibb to enter
Add three fields to the current level according to the diagram
Hold down the CTRL key, add three fields, and click OK
Select the ZSYBM element and change its display type to the drop-down list box
If there is no property page below, click it at the place shown in the figure
Pull up the page to see this effect
However, this page is not beautiful. We can adjust the cells and save them
7. Go back to OVP:ZTEST_WDC_APPLICATION and enter UIBB of LIST
Find the column to add below, or press and hold CTRL, click in the order we planned in the previous chapter, and finally confirm
Set the display type of business unit and status (the bottom layer is set as field) to the drop-down list, and the effect is as follows
The column title can be changed by ourselves. The description automatically brought out may not conform to the actual business scenario
Switch to the toolbar tab and add the three buttons we defined in GET_DEFINITION.
We have set the respective icons of the buttons in the method, so it has the following effects. Save
8. Now open the web address of the application
Our query interface has the same style as that designed in the previous article
9. Continue to return to the code. There is inevitably a manual error in the operation. We make an operation redundant space for the delete button to avoid misoperation and directly delete the data mark. We will see the effect later
First add the interface IF_FPM_GUIBB_LIST_EXT to the interface tab of the class. With this interface, you can add a confirmation dialog box for deletion, with the content of "confirm deletion?". When you click the confirm button in the dialog box, you will continue to delete the logic, and click Cancel to stop.
Switch to the method tab, open the needs_configuration method of LIST_EXT, paste the following code, and save the activation
The other two corresponding methods can also be activated without filling in any code. Many parameters can be customized and can be simply studied
METHOD if_fpm_guibb_list_ext~needs_confirmation.
DATA lv_selected_row TYPE i.
DATA lo_confirm TYPE REF TO cl_fpm_confirmation_request.
DATA lt_confirmation_text TYPE string_table.
DATA lv_text TYPE string.
IF io_event->mv_event_id = 'DELETE'.
lv_text = 'Are you sure to delete?'.
APPEND lv_text TO lt_confirmation_text.
CREATE OBJECT lo_confirm
EXPORTING
it_confirmation_text = lt_confirmation_text.
eo_confirmation_request = lo_confirm.
ENDIF.
ENDMETHOD.
10. Go back to the web page, refresh the page, click the delete button, and the dialog box as shown in the figure will appear
11. If you can see that there is no data in the query result, you should report an error by clicking the delete button. It's only right if you don't select a row of data. You can't delete the air? Haha, it's the same with displaying and adjusting. You need to confirm that you have selected a piece of data first
Enter the PROCESS_EVENT method of GUIBB_LIST class
Copy and paste the following code
METHOD if_fpm_guibb_list~process_event.
DATA:
ls_result TYPE ztest_demo_sch,
ls_message TYPE fpmgb_s_t100_message,
lv_selected_row TYPE int4,
lt_app_params TYPE apb_lpd_t_params,
ls_app_param LIKE LINE OF lt_app_params,
lv_status TYPE zde_apv_status.
CASE io_event->mv_event_id.
WHEN gc_display_data OR gc_adjust_data OR gc_delete_data.
* Select data check You must select a piece of data
io_event->mo_event_data->get_value(
EXPORTING
iv_key = if_fpm_guibb_list=>gc_event_par_row
IMPORTING
ev_value = lv_selected_row ).
IF lv_selected_row IS INITIAL OR lv_selected_row < 0.
ls_message-msgid = 'ZTEST'.
ls_message-msgno = '000'.
ls_message-severity = 'E'.
APPEND ls_message TO et_messages.
ev_result = 'FAILED'.
EXIT.
ENDIF.
* Read it before moving on to the next step
READ TABLE mt_result INTO ls_result INDEX lv_selected_row.
IF sy-subrc EQ 0.
* Delete button
IF io_event->mv_event_id EQ gc_delete_data.
* Read selected row data
CLEAR:ls_result.
* Only saved status can be deleted
SELECT SINGLE status INTO lv_status
FROM ztest_demo_sch
WHERE guid EQ ls_result-guid
AND status EQ '4'."I set 4 as saved
IF sy-subrc EQ 0.
* Update the selected data to deletion status
UPDATE ztest_demo_sch SET status = '6' WHERE guid EQ ls_result-guid.
IF sy-subrc EQ 0.
DELETE mt_result INDEX lv_selected_row.
ENDIF.
* No data found in saved state
ELSE.
ls_message-msgid = 'ZTEST'.
ls_message-msgno = '004'.
ls_message-severity = 'E'.
ls_message-parameter_1 = 'The selected data is not in saved status and cannot be deleted!'.
APPEND ls_message TO et_messages.
ev_result = 'FAILED'.
EXIT.
ENDIF.
* Display button adjustment button
ELSE.
* Display button
IF io_event->mv_event_id EQ gc_display_data.
* Set edit mode
ls_app_param-key = 'FPM_EDIT_MODE'.
ls_app_param-value = 'R'. "read only mode
APPEND ls_app_param TO lt_app_params[].
* Adjust button to generate new data
ELSEIF io_event->mv_event_id EQ gc_adjust_data.
* Set change mode
ls_app_param-key = 'CHANGE_MODE'.
ls_app_param-value = 'C'.
APPEND ls_app_param TO lt_app_params[].
* Set edit mode
ls_app_param-key = 'FPM_EDIT_MODE'.
ls_app_param-value = 'E'. "Edit mode
APPEND ls_app_param TO lt_app_params[].
ENDIF.
* Sets the unique of the selected data guid，In order to make the main page easy to obtain data
ls_app_param-key = 'GUID'.
ls_app_param-value = ls_result-guid.
APPEND ls_app_param TO lt_app_params[].
* What is the current operation passed to the master page
ls_app_param-key = 'ACTION'.
ls_app_param-value = io_event->mv_event_id.
APPEND ls_app_param TO lt_app_params[].
* Skip initial interface
ls_app_param-key = 'SKIP_INITIAL_SCREEN'.
ls_app_param-value = abap_true.
APPEND ls_app_param TO lt_app_params[].
* Jump to main page
zgld_cl_fpm_navigation=>launch_webdynpro_abap(
iv_wda = 'ZTEST_WDA_APPLICATION'
iv_wdac = 'ZTEST_WDC_APPLICATION'
it_parameter = lt_app_params ).
ENDIF.
ENDIF.
WHEN OTHERS.
ENDCASE.
ENDMETHOD.
This is the page jump code. You can use it with a little change
method LAUNCH_WEBDYNPRO_ABAP.
DATA: lr_navigate_to TYPE REF TO if_fpm_navigate_to,
lr_fpm TYPE REF TO if_fpm,
ls_webdynpro_fld TYPE fpm_s_launch_webdynpro,
ls_add_param TYPE apb_lpd_s_add_wd_parameters,
lt_message TYPE fpm_t_t100_messages,
ls_message LIKE LINE OF lt_message,
lv_error TYPE boole_d,
ls_parameter TYPE apb_lpd_s_params,
lt_parameter TYPE apb_lpd_t_params
.
lr_fpm = cl_fpm_factory=>get_instance( ).
lr_navigate_to = lr_fpm->get_navigate_to( ).
IF it_parameter IS NOT INITIAL.
lt_parameter = it_parameter.
ENDIF.
ls_parameter-key = 'sap-language'.
ls_parameter-value = sy-langu.
APPEND ls_parameter TO lt_parameter.
ls_webdynpro_fld-wd_application = iv_wda.
ls_webdynpro_fld-wd_configuration = iv_wdac.
ls_webdynpro_fld-system_alias = sy-sysid.
ls_webdynpro_fld-wd_namespace = 'sap'.
ls_webdynpro_fld-parameter = lt_parameter.
IF is_additional_parameters IS INITIAL.
ls_add_param-navigation_mode = 'EXTERNAL'.
ELSE.
ls_add_param = is_additional_parameters.
ENDIF.
lr_navigate_to->launch_webdynpro_abap(
EXPORTING
is_webdynpro_fields = ls_webdynpro_fld
is_additional_parameters = ls_add_param
IMPORTING
et_messages = lt_message
ev_error = lv_error ).
LOOP AT lt_message INTO ls_message.
lr_fpm->mo_message_manager->report_t100_message(
EXPORTING
io_component = lr_fpm
iv_msgid = ls_message-msgid
iv_msgno = ls_message-msgno
iv_severity = ls_message-severity
iv_lifetime = ls_message-lifetime
iv_parameter_1 = ls_message-parameter_1
iv_parameter_2 = ls_message-parameter_2
iv_parameter_3 = ls_message-parameter_3
iv_parameter_4 = ls_message-parameter_4 ).
ENDLOOP.
endmethod.
Enter guibb_ Get of list_ Data method, paste the following code
METHOD if_fpm_guibb_list~get_data.
DATA:lv_result TYPE fpm_event_result.
CASE iv_eventid->mv_event_id.
* get data
WHEN gc_search. "SEARCH "query
CLEAR:lv_result.
* get data
CALL METHOD me->get_data
CHANGING
ct_result = mt_result
cv_result = lv_result
ct_messages = et_messages.
CHECK lv_result NE 'FAILED'.
WHEN OTHERS.
ENDCASE.
ct_data = mt_result.
ev_data_changed = abap_true.
ENDMETHOD.
Create three private methods and maintain parameters
GET_ The parameter settings of data are all CHANGING
GET_DATA code:
METHOD get_data.
DATA:ls_crit TYPE rsdsselopt,
ls_frange TYPE rsds_frange,
lt_frange TYPE rsds_frange_t,
ls_range TYPE rsds_range,
lt_range TYPE rsds_trange,
lt_where TYPE rsds_twhere,
ls_where LIKE LINE OF lt_where,
lt_where_tab TYPE rsds_where_tab,
ls_proj TYPE proj,
ls_message TYPE fpmgb_s_t100_message.
* The business unit is required, so the business unit must not be empty when obtaining data
CLEAR:ls_crit,ls_frange-selopt_t.
ls_crit-sign = 'I'.
ls_crit-option = 'EQ'.
ls_crit-low = ms_sel-zsybm.
APPEND ls_crit TO ls_frange-selopt_t.
ls_frange-fieldname = 'ZSYBM'.
APPEND ls_frange TO lt_frange.
IF NOT ms_sel-pspid IS INITIAL.
SELECT SINGLE * INTO ls_proj
FROM proj
WHERE pspid EQ ms_sel.
IF sy-subrc NE 0.
* In project table PROJ There is no error report in the
cv_result = 'FAILED'.
ls_message-msgid = 'ZTEST'.
ls_message-msgno = '002'.
ls_message-severity = 'E'.
APPEND ls_message TO ct_messages.
EXIT.
ENDIF.
CLEAR:ls_crit,ls_frange-selopt_t.
ls_crit-sign = 'I'.
ls_crit-option = 'EQ'.
ls_crit-low = ms_sel-pspid.
APPEND ls_crit TO ls_frange-selopt_t.
ls_frange-fieldname = 'PSPID'.
APPEND ls_frange TO lt_frange.
ENDIF.
* Set dynamic SQL
IF lt_frange IS NOT INITIAL.
APPEND LINES OF lt_frange TO ls_range-frange_t.
APPEND ls_range TO lt_range.
CALL FUNCTION 'FREE_SELECTIONS_RANGE_2_WHERE'
EXPORTING
field_ranges = lt_range
IMPORTING
where_clauses = lt_where.
READ TABLE lt_where INTO ls_where INDEX 1.
lt_where_tab = ls_where-where_tab.
ENDIF.
SELECT * INTO CORRESPONDING FIELDS OF TABLE mt_result
FROM ztest_demo_sch
WHERE (lt_where_tab).
IF mt_result IS NOT INITIAL.
cv_result = 'OK'.
ENDIF.
ENDMETHOD.
CREATE_DATA does not need to set parameters
Paste the following code:
METHOD create_data.
DATA:lt_app_params TYPE apb_lpd_t_params,
ls_app_param LIKE LINE OF lt_app_params.
* Set change mode
ls_app_param-key = 'CHANGE_MODE'.
ls_app_param-value = 'C'.
APPEND ls_app_param TO lt_app_params[].
* Set edit mode
ls_app_param-key = 'FPM_EDIT_MODE'.
ls_app_param-value = 'E'.
APPEND ls_app_param TO lt_app_params[].
ls_app_param-key = 'SKIP_INITIAL_SCREEN'.
ls_app_param-value = abap_true.
APPEND ls_app_param TO lt_app_params[].
* Transfer division for new create one
ls_app_param-key = 'ZSYBM'.
ls_app_param-value = ms_sel-zsybm.
APPEND ls_app_param TO lt_app_params[].
ls_app_param-key = 'PSPID'.
ls_app_param-value = ms_sel-pspid.
APPEND ls_app_param TO lt_app_params[].
ls_app_param-key = 'ACTION'.
ls_app_param-value = 'CREATE'.
APPEND ls_app_param TO lt_app_params[].
zgld_cl_fpm_navigation=>launch_webdynpro_abap(
iv_wda = 'ZTEST_WDA_APPLICATION'
iv_wdac = 'ZTEST_WDC_APPLICATION'
it_parameter = lt_app_params ).
ENDMETHOD.
CHECK_BEFORE_CREATE method parameters
code:
METHOD check_before_create.
DATA:ls_proj TYPE proj,
lt_prps TYPE TABLE OF prps,
ls_message TYPE fpmgb_s_t100_message.
cv_result = 'OK'.
IF ms_sel-pspid IS INITIAL.
CLEAR:ls_message.
ls_message-msgid = 'ZTEST'.
ls_message-msgno = '004'. "004 stay SE91 Medium is&1 &2 &3 &4
ls_message-severity = 'E'.
ls_message-parameter_1 = 'Please enter an item'.
APPEND ls_message TO ct_messages.
ENDIF.
SELECT SINGLE * INTO CORRESPONDING FIELDS OF ls_proj
FROM proj
WHERE zsybm EQ ms_sel-zsybm
AND pspid EQ ms_sel-pspid.
IF sy-subrc NE 0.
CLEAR:ls_message.
ls_message-msgid = 'ZTEST'.
ls_message-msgno = '004'.
ls_message-severity = 'E'.
ls_message-parameter_1 = 'Project does not exist! Cannot create data'.
APPEND ls_message TO ct_messages.
ELSE.
SELECT * INTO CORRESPONDING FIELDS OF TABLE lt_prps
FROM prps
WHERE psphi EQ ls_proj-pspnr
AND stufe = 3.
IF sy-subrc NE 0.
CLEAR:ls_message.
ls_message-msgid = 'ZTEST'.
ls_message-msgno = '004'.
ls_message-severity = 'E'.
ls_message-parameter_1 = 'Building does not exist! Cannot create data'.
APPEND ls_message TO ct_messages.
ENDIF.
ENDIF.
READ TABLE ct_messages WITH KEY severity = 'E' TRANSPORTING NO FIELDS.
IF sy-subrc EQ 0.
cv_result = 'FAILED'.
ENDIF.
ENDMETHOD.
12. Here, the code of the search interface has been completed and can be activated as a whole
summary
1. For the question of where the code for responding to button events is written, press will go when you click the button or trigger the event_ Event and GET_DATA, but press_ Event response precedes GET_DATA
2. In FPM, the main method execution sequence of the first program entry is INITIALIZE - > get_ Definition (the program is run only once) - > get_ Data, click a button or trigger an event. The main method execution sequence is press_ EVENT -> GET_ Data, in the actual business scenario, also deals with the above methods most. Making good use of these mechanisms can get twice the result with half the effort
3. If there is an error in entering the program from the web page at this time and you can't see the page content, check whether all methods in the class are activated. If there is a problem, you can also discuss it in the comment area and reply when you see it
4. The next chapter starts to write the code of the main interface. There are a lot of code. It may be divided into several articles. Wait a few days. I'm a little busy recently