화면 설계 및 UI 작업

화면 설계 및 UI 작업

SAP의 화면 설계와 사용자 인터페이스(UI) 작업은 사용자와 시스템 간의 상호작용을 설계하는 데 초점이 있습니다. 이 과정은 SAP Module Pool 프로그램(대화형 프로그램)에서 주로 사용되며, 화면(Screen)과 화면 요소(Screen Elements)를 설계하여 데이터를 입력하고 출력하는 데 사용됩니다.

---

1. Creating Screens and Screen Elements

1. 화면(Screen)이란?

• SAP 시스템에서 사용자와 상호작용하는 데 사용되는 UI 구성 요소.
• 화면은 화면 번호(Screen Number)와 PBO(Processing Before Output) 및 PAI(Processing After Input) 이벤트를 통해 동작.

2. 화면 요소(Screen Elements)

• 화면에서 사용자가 상호작용할 수 있는 구성 요소.
  • 입력 필드(Input Field): 데이터 입력.
  • 출력 필드(Output Field): 데이터 표시.
  • 버튼(Button): 사용자 작업 트리거.
  • 체크박스(Checkbox): 선택 옵션 제공.
  • 라디오 버튼 그룹(Radio Button Group): 여러 선택지 중 하나를 선택.
  • 탭 컨트롤(Tab Controls): 화면을 여러 탭으로 구분.

3. 화면 생성 절차

1. SE51 트랜잭션 실행
   • 새로운 화면 생성 및 번호 지정.
2. 레이아웃 편집
   • 도구를 사용하여 화면 요소 배치.
   • 각 요소의 속성(Property) 설정.
3. PBO/PAI 로직 추가
   • ABAP 코드로 화면의 동작 정의.
   • 예: 데이터를 화면에 표시하거나 입력 값을 처리.

예제

• 간단한 화면 설계 및 요소 추가
  1. 입력 필드: Customer ID
  2. 버튼: Submit

MODULE status_0100 OUTPUT.
  SET PF-STATUS 'MAIN'. " 화면의 상태바(Status Bar) 설정
ENDMODULE.

MODULE user_command_0100 INPUT.
  CASE sy-ucomm.
    WHEN 'SUBMIT'. " 사용자가 Submit 버튼 클릭 시 실행
      READ TABLE lt_customers WITH KEY id = screen_customer_id.
      IF sy-subrc = 0.
        MESSAGE 'Customer found!' TYPE 'S'.
      ELSE.
        MESSAGE 'Customer not found!' TYPE 'E'.
      ENDIF.
  ENDCASE.
ENDMODULE.

---

2. Explaining the User Dialog Programming Model

1. 사용자 대화형 프로그래밍 모델이란?

• 사용자 입력과 상호작용을 처리하기 위해 SAP GUI에서 실행되는 대화형 프로그램 설계 방식.
• 주요 이벤트:
  • PBO (Process Before Output):
    • 화면이 사용자에게 표시되기 전에 실행.
    • 화면 초기화, 데이터 준비.
  • PAI (Process After Input):
    • 사용자가 입력 값을 제출하거나 작업을 수행한 후 실행.
    • 데이터 검증, 저장, 다음 화면으로의 이동 처리.

2. 화면 흐름(Screen Flow)

• 모듈 풀 프로그램(Module Pool Program):
  • 여러 화면(Screen)과 그 흐름을 설계하는 프로그램.
  • 대화형 트랜잭션 코드를 통해 실행.

3. PBO/PAI 설계 예제

• 화면 설계 절차:

  1. SE51에서 화면 생성.
  2. PBO/PAI 모듈 생성.
  3. 화면 요소와 관련 코드를 연결.

• PBO와 PAI 예제:

  MODULE pbo_0100 OUTPUT.
    " 화면 출력 전에 내부 테이블 데이터 로드
    SELECT * INTO TABLE lt_customers FROM zcustomers.
  ENDMODULE.
  
  MODULE pai_0100 INPUT.
    " 사용자가 입력한 데이터 검증
    CASE sy-ucomm.
      WHEN 'SAVE'.
        INSERT INTO zcustomers VALUES (screen_customer_id, screen_customer_name).
        MESSAGE 'Customer saved successfully!' TYPE 'S'.
      WHEN 'EXIT'.
        LEAVE PROGRAM.
    ENDCASE.
  ENDMODULE.

---

3. Implementing Input Checks and Creating Variants

1. 입력 검증(Input Checks)

• 입력 데이터 유효성 확인:
  사용자 입력 데이터를 검증하여 잘못된 데이터를 방지.

  • 필드 속성 설정: 필수 입력, 데이터 타입 제한.
  • 코드 레벨 검증: ABAP 코드로 조건 확인.

• 예제: 입력 검증

  MODULE pai_input_check INPUT.
    IF screen_customer_id IS INITIAL.
      MESSAGE 'Customer ID is required!' TYPE 'E'.
    ELSEIF NOT screen_customer_id IS NUMERIC.
      MESSAGE 'Customer ID must be numeric!' TYPE 'E'.
    ENDIF.
  ENDMODULE.

2. 화면 변형(Creating Variants)

• 변형(Variants)이란?

  • 화면이나 프로그램의 실행에 필요한 기본값을 저장하고 재사용하는 기능.
  • 사용자는 특정 화면 요소의 초기값을 설정하여 반복적인 입력을 줄일 수 있음.

• 변형 생성 절차:

  1. 트랜잭션 코드를 실행.
  2. 원하는 기본값 입력 후, Variants 저장.
  3. 다음 실행 시 저장된 변형 선택.

• 예제:

  • 고객 검색 화면에서 Country = 'US' 값을 기본값으로 저장.

---

예제: 통합 화면 설계

REPORT zcustomer_screen.

DATA: screen_customer_id TYPE zcustomer-id,
      screen_customer_name TYPE zcustomer-name.

MODULE pbo_0100 OUTPUT.
  IF screen_customer_id IS INITIAL.
    screen_customer_id = 'Default_ID'.
  ENDIF.
ENDMODULE.

MODULE pai_0100 INPUT.
  CASE sy-ucomm.
    WHEN 'CHECK'.
      IF screen_customer_id IS INITIAL.
        MESSAGE 'Customer ID cannot be empty!' TYPE 'E'.
      ENDIF.
    WHEN 'EXIT'.
      LEAVE PROGRAM.
  ENDCASE.
ENDMODULE.

START-OF-SELECTION.
  CALL SCREEN 100.

---

화면 설계 및 UI 작업의 요약

1. 화면과 화면 요소: SE51을 사용해 화면을 생성하고 입력 필드, 버튼, 체크박스 등을 설계.
2. PBO/PAI: 화면 출력 전과 입력 후 이벤트를 처리.
3. 입력 검증: 사용자 입력 데이터를 확인하고 오류를 방지.
4. 변형(Variants): 기본값 설정 및 저장으로 사용자 편의성 향상.