EXTUI SWIPE¶

목적¶

EV_SWIPE 이벤트는 웹 화면에서 마우스로 드래그할 때 이벤트를 실행하도록 설정할 수 있음

주요 단계¶

1. UI 오브젝트 및 이벤트 설정¶

1.1 UI 오브젝트 생성¶

o 애플리케이션을 만들고 UI 오브젝트를 생성

<사진 1> Swipe 적용 대상 예시 화면

1.2 ON_INIT에서 EV_SWIPE 이벤트 생성¶

o ON_INIT에서 EV_SWIPE 이벤트를 호출하고, 적용할 UI Instance ID 및 서버 이벤트를 입력

1.3 ABAP 소스 코드 예제¶

METHOD /U4A/IF_SERVER~HANDL_ON_INIT.

  "페이지 클릭 후 Swipe 했을 때 EVENT를 작동시키는 METHOD
  CALL METHOD /U4A/CL_EXTUI_EVENTS=>EV_SWIPE
    EXPORTING
      IO_VIEW        = ME->/U4A/IF_SERVER~AR_VIEW  " [U4A] UI Element Super Class
      I_UID          = 'PAGE'                      " 대상 UI 인스턴스 ID
      I_MODE         = 'R'                         " swipe:S, swipeleft:L, swiperight:R
      I_SERVER_EVENT = 'EV_MOVE_PAGE'
*     IT_SCRIPT_SOURCE =
*     I_USE_WAIT        = 'X'
*   EXCEPTIONS
*     MODE_NULL          = 1
*     NOT_SUPPORT_ELEMENT = 2
*     NOT_FOUND_UI       = 3
*     OTHERS             = 4
    .

  "두 번째 PAGE에 대한 SWIPE 설정
  CALL METHOD /U4A/CL_EXTUI_EVENTS=>EV_SWIPE
    EXPORTING
      IO_VIEW        = ME->/U4A/IF_SERVER~AR_VIEW
      I_UID          = 'PAGE1'
      I_MODE         = 'L'
      I_SERVER_EVENT = 'EV_MOVE_PAGE'
*     IT_SCRIPT_SOURCE =
*     I_USE_WAIT        = 'X'
*   EXCEPTIONS
*     MODE_NULL          = 1
*     NOT_SUPPORT_ELEMENT = 2
*     NOT_FOUND_UI       = 3
*     OTHERS             = 4
    .

ENDMETHOD.

2. 이벤트 매개변수 설명¶

Name	Description
I_UID	이벤트를 적용할 UI 오브젝트 ID
I_MODE	Swipe 방향 (S: 양방향, L: 왼쪽→오른쪽, R: 오른쪽→왼쪽)
I_SERVER_EVENT	Swipe 시 실행될 서버 이벤트
IT_SCRIPT_SOURCE	Swipe 시 실행될 JavaScript 스크립트

3. SWIPE 이벤트 실행 메서드 구성¶

o SWIPE 이벤트가 발생했을 때 실행될 메서드 구성

3.1 ABAP 소스 코드 예제¶

METHOD EV_MOVE_PAGE.

  DATA : LV_PAGE_ID TYPE STRING.

*--------------------------------------------------------------------*

  CASE I_ID.

    WHEN 'PAGE'.
      "ID가 PAGE이면 PAGE1로 이동
      LV_PAGE_ID = 'PAGE1'.

    WHEN 'PAGE1'.
      "ID가 PAGE1이면 PAGE로 이동
      LV_PAGE_ID = 'PAGE'.

  ENDCASE.

  "PAGE MOVE
  CALL METHOD /U4A/CL_UTILITIES=>PAGE_NAVIGATION
    EXPORTING
      IO_VIEW  = ME->/U4A/IF_SERVER~AR_VIEW
      I_APPID  = 'NAVCONTAINER1'
      I_PAGEID = LV_PAGE_ID.

ENDMETHOD.

4. 실행 화면¶

o 사용자가 화면을 스와이프하여 다른 페이지로 전환

<사진 2> 화면을 드래그하여 페이지 전환되는 화면