Web Dynpro ABAP Quick Design guidelines

This Page is to discuss WD4A Design guidelines which can be used by beginner WD4A developer as a checklist to design quality WD4A applications. Please feel free to Add/Correct/Comment to below WD4A Design guidelines and help novice WD4A developer like me in designing quality WD4A applications.

Performance Optimization:

  • Use Range Supply Function to load part of data into context node for heavy table performance optimization.
  • Consider Delta Rendering Optimization while designing WD4A component.
  • Avoid complex and nested Layouts because it has a big impact on browser or client rendering performance.
  • Prefer the Row Layout to the Grid or Matrix Layout if horizontal alignment is not needed for better performance.
  • Number of visible rows in Table or ALV has an impact on performance.
  • Avoid writing much processing in WDDOMODIFYVIEW() method like initialization and all.
  • Don't use context of all WD4A component data. Use context for Screen In/Out data only.
  • Consider the Price Tag of UI elements when designing Web Dynpro Component.

UI Design Practice:

  • Use Flash Islands as add-on for Web DynPro and avoid using more than 3 Flash Islands on the screen.
  • Avoid Scrolling and make all information visible at a glance.
  • Prefer the Matrix Layout to the Grid Layout for Ease of use and consistent layout.
  • Avoid usage of TransparentContainers inside container UI elements.
  • Don't misuse Web Dynpro UI elements by setting improper property values.
  • Exchange default root UI element container with other container UI element to minimize container nesting levels.
  • Never Use Trays and Panel on same screen to avoid confusion for end users.
  • Never use a Section header without associating it with a TransparentContainer.
  • Use Access and Hot Keys for better accessibility.
  • Use Floorplan Manager for consistency across applications.
  • Componentization of Web DynPro component for reusability.

Better Development efficiency:

  • Use Floorplan Manager for the creation of new Web Dynpro ABAP applications to increase development efficiency.
  • Use Developer Defined Reusable Templates.

Miscellaneous:

  • Add URL Parameter "sap-wd-stableids=X" to achieve stable HTML IDs for Automated Tests.

웹딘프로 메시지 처리는 MESSAGE 문법을 쓰지 않기 때문에 사용처 리스트에 나타나지 않는다.
하지만 사용처 리스트로 찾게 하려면 이렇게 실행되지 않는 IF 문으로 감싸주면 된다.
IF 1 = 2.

MESSAGE ....
ENDIF.
아래는 사용 예.
           IF 1 = 2.
             MESSAGE i210(usmd2) WITH ld_string.
           ELSE.
             CLEAR: lt_message, ls_message.
             ls_message-msgid = 'USMD2'.
             ls_message-msgty = 'I'.
             ls_message-msgno = '210'.
             ls_message-msgv1 = ld_string.
             INSERT ls_message INTO TABLE lt_message.
             CALL METHOD do_service->show_message( lt_message ).
           ENDIF.

SAP NetWeaver Business Client (NWBC)

는 웹으로 통합 환경을 제공하여 SAP GUI를 대체하려는 새로운 기술입니다.

이 NWBC는 SAP GUI 처럼 컴퓨터에 프로그램을 설치하여 사용하는 NWBC for Desktop 와
프로그램 설치 없이 웹브라이저로 접속하는 NWBC for HTML 두가지 방식이 있습니다.

이중 NWBC for HTML 은 특정 URL을 가지고 있어서 접속을 할 수 있는데,
SAP GUI에서 이 URL을 생성하여 NWBC를 실행하는 티코드가 NWBC 입니다.
이때 실행되는 코드가 이렇습니다.

코드
Class Name            CL_NWBC
Method                SE93_LAUNCH

METHOD se93_launch.

* In transaction SE93 this method is tied to a transaction called NWBC.

* Get NWBC URL
  DATA: url(1024)       TYPE c,
        nwbc_exception  TYPE REF TO cx_nwbc.

  TRY.
      url = cl_nwbc=>url_base(  ).

      DATA: url_suffix   TYPE icfredurl,
            icf_state    TYPE icfactive.
      cl_icf_tree=>if_icf_tree~service_from_url(
        EXPORTING url             = '/sap/bc/nwbc/nwbc_launch' "#EC NOTEXT
                  hostnumber      = 0
                  authority_check = space
        IMPORTING icfactive       = icf_state
                  urlsuffix       = url_suffix ).
      IF NOT ( icf_state IS INITIAL OR url_suffix IS NOT INITIAL ).
        CONCATENATE url '~launch/' INTO url.
      ENDIF.
    CATCH cx_nwbc INTO nwbc_exception.
      DATA: err_txt TYPE string.
      err_txt = nwbc_exception->get_text( ).
      MESSAGE err_txt TYPE 'E'.
      RETURN.
  ENDTRY.

* Add sap-language and sap-client to URL to give start page same settings as SAPGUI is running in
  DATA: lang_iso TYPE laiso.
  CALL FUNCTION 'LANGUAGE_CODE_SAP_TO_ISO'
    EXPORTING
      sap_code = sy-langu
    IMPORTING
      iso_code = lang_iso.

  CONCATENATE url `?` if_http_form_fields_sap=>sap_client   `=` sy-mandt
                  `&` if_http_form_fields_sap=>sap_language `=` lang_iso
         INTO url.

* Start URL in browser.
  url_launch( url ).

*!!! code below will close currently open additional SAP GUI sesion
* after opening of web browser, if this is not a last session open for
* this system

*** !!!! The code was commented, because it was a logic change for transactio NWBC
* and not all users can accept it

** close current ABAP session, after starting URL
*  DATA: lv_act_sessions TYPE i.
*  CALL FUNCTION 'TH_USER_INFO'
*    EXPORTING
*      client              = sy-mandt
*      user                = sy-uname
*    IMPORTING
*      act_sessions        = lv_act_sessions.
*
*  " do not close last session
*  IF lv_act_sessions GT 1.
*    CALL FUNCTION 'TH_DELETE_MODE'.
*  ENDIF.

ENDMETHOD.

Web Dynpro Application을 열고 Parameters 탭에 가면 여러가지 파라미터를 입력 할 수 있습니다.

여기서는
 테이블(ALV포함)의 새로 스크롤바 또는 하단에 1/30 으로 항목번호를 표시하고 이동하는 방식을 선택할 수 있고,
 마우스 오른쪽 버튼 눌러서 나오는 사용자 세팅을 허용할 것인지를 선택할 수 있고,
 css 테마는 어떤것을 사용할지 지정할 수 있고,
등등 여러가지 어플리케이션 실행에 관련된 세팅을 할 수 있습니다.

그리고 이러한 파라미터를 서버(클라이언트별) 전체 세팅으로 기본값을 지정할 수 있는 프로그램이 있습니다.
WD_GLOBAL_SETTING <-- 웹딘프로 어플리케이션 이름 입니다.

예를 들어 '사용자 세팅'을 모든 웹딘프로 어플리케이션에 대해서 사용 못하게 하려면 이 프로그램을 실행하고
Do Not Allow Personalization by the User: 를 체크하고 저장하면 끝입니다.
하지만 이미 사용자 세팅으로 저장된 내용은 계속 적용이 되고 있으므로 이것을 삭제하려면
WD_ANALYZE_CONFIG_USER 를 실행하여 삭제하여야 합니다.


파라미터에 대해 자세한 내용은 아래 SAP HELP를 참고하세요.
http://help.sap.com/saphelp_nw70/helpdata/en/7b/fb57412df8091de10000000a155106/frameset.htm
7.0을 기준으로 파라미터를 정리해 보았습니다. 버전에 따라 내용이 다를 수 있습니다.
 
WDACCESSIBILITY
접근성 사용 여부
참고: Accessibility parameters.
입력 가능 값: ‘X’, ‘ ‘
WDCONFIGURATIONID
사용할 Configuration 이름 입력
WDDELTARENDERING
델타 렌더링 사용 여부
참고: Delta Rendering. 변경된 뷰만 다시 렌더링 하도록 하여 성능 향상에 도움이 됨.
입력 가능 값: ‘ON’ , ‘OFF’(기본값)
델타 렌더링 사용여부를 설정하는 같은 효과를 가지는 다른 방법으로는 sap‑wd‑deltaRendering URL 파라미터로 입력하는 방법이 있다.
WDDISABLEUSERPERSONALIZATION
개인화 (사용자 세팅 > 숨기기) 불가 여부
참고: Personalization
입력 가능 값: ‘X’, ‘ ‘
WDDISPLAYSPLASHSCREEN
웹딘 초기 로딩시 시작로고 표시 여부
입력 가능 값: ‘X’, ‘ ‘
WDFORCEEXTERNALSTYLESHEET
포털과 연동시 자동으로 포털과 웹딘의 CSS 버전을 검사하여 더 최신버전을 사용하는 기본동작을 무시하도록 할지 여부
입력 가능 값: ‘X’, ‘ ‘
WDHIDEMOREFIELDHELPASDEFAULT
웹딘 UI 엘리먼트의 explanation 프로퍼티 표시 숨김 여부
입력 가능 값: ‘X’, ‘ ‘
WDPROTECTEDAPPLICATION
도메인 릴렉싱 공격으로부터 보호 여부
입력 가능 값: ‘X’, ‘ ‘
‘X’세팅하면 포털과 통합 연동하는 기능이 전혀 작동하지 않음. 예를 들어 포털 이벤트가 작동하지 않음
WDSHAREDREPOSITORY
어플리케이션 메타데이터를 shared memory 영역으로 로드 할지 여부.
입력 가능 값: ‘X’, ‘ ‘
‘X’세팅하면 성능 향상이 있지만, 메모리 사용량이 늘어남
WDTABLENAVIGATION
테이블이나 ALV의 스크롤 방식을 지정
입력 가능 값
‘ ‘ : 기본값, 테이블 아래에 페이지 방식
‘PAGINATOR’ : 테이블 아래에 페이지 방식
SCROLLBAR‘ : 테이블 오른쪽에 스크롤 바
WDTHEMEROOT
포털의 테마를 사용하지 않고 별도 테마를 지정
입력 가능 값
sap_chrome
sap_hcb
sap_highcont
sap_standard
sap_tradeshow (웹딘의 기본 사용 테마)


티코드 SE63
메뉴에서 번역 - ABAP 오브젝트 - 전송 오브젝트를 선택한다.
입력칸 3곳에 이것을 입력한다.

R3TR
WDYA
웹딘프로아밥 애플리케이션 아이디




New Features in Web Dynpro ABAP for Enhancement Package 2 (EhP2)
http://help.sap.com/saphelp_nw70ehp2/helpdata/en/54/07ec96bd5a4764be4996fff231b4de/content.htm

7.02가 2010년 11월 나왔다고 하는데 어디 쓰는 사이트 있나요?
-> 개인 컴퓨터에 설치하고 연습할 수 있습니다. Netweaver ABAP 7.02 trial 설치 후기
-> ERP 6 인핸스먼트패키지 5 버전으로 프로젝트를 진행하고 있는 사이트가 있습니다.

http://help.sap.com/saphelp_nw70ehp2/helpdata/en/48/ca3351508f04e7e10000000a42189c/content.htm

exit plug를 만들때 파라미터를 추가하고, 호출할때 파라미터와 값을 주면 됩니다.

* 창을 닫습니다.
CLOSE_WINDOW = 'X'

* 다른 URL로 이동합니다.
URL = 'http://www.yourdomain.com/goodbye_page.html'

* 로그아웃(로그오프) 합니다.  SSO가 적용된 EP도 로그아웃 됩니다.
LOGOFF = 'X'

단, 로그아웃(로그오프)은 7.02 부터 가능

CD105
What’s New in Web Dynpro ABAP 7.01 and 7.02
Thomas Jung, SAP Technology Solution Management

동영상 (120분 FLASH)
http://www.virtualsapteched.com/index.aspx?url=9pQnEKuchLP2%2FuXehU9V+D0Qrlxk24DreHOyvFSQGJTyrSsKeShyU3Q0ymFlDIfKBXxdqB3NwFVN*%7E*WKz%2FuFUa8LsiXP0QkF85i6Vv20PZxhY%3D#+eH/oixgrjV/KR/H6TFd72kLXep3chZuEpRqpVDt598=

PDF 파일
http://www.sapevents.edgesuite.net/TechEd/TechEd_Vegas2010/Collateral/CD105.pdf
같은 파일을 이글에 첨부함


잡담. Thomas Jung 씨는 정이 아니라 영으로 발음하네요. 한국사람 아니예요.


동영상과 PDF파일을 보면서 대충 내용을 정리해 보았습니다.




웹딘프로 ABAP (WDA) 7.01과 7.02에 추가된 기능

Enhancement Package와 Support Package 차이점.
EP는 새로운 기능의 추가, SP는 버그 수정만

1. 웹딘프로.
ABAP으로 작성 -> 실행시 HTML+js 렌더링 or 또다른 렌더링
새로운 렌더링 엔진이 나오더라도 어플리케이션 코딩은 수정할 필요 없음
이번에 새로 나온 AJAX 방식의 Lightspeed 렌더링은 더 멋있는 화면을 보여줍니다.

데모
시작 1277초 (21:18) 끝 1740초 (29:00)
멋진 화면이 보입니다. AJAX 적용된 부분. Suggest, 드래그앤드랍

7.01에 추가된 기능
context가 트리뷰에서 테이블뷰로 변경
마법사(code wizard) 팝업이 2개의 탭으로 변경되었고 context 관련 기능 강화
클라이언트에서 Trace 가능 (T-Code: WD_TRACE_TOOL)
UI에 키보드 단축키 할당 가능
Value Help의 모양이 더 사용하기 편하도록 바뀌었음
컨피그를 통해서 어플리케이션을 만들수 있음 (예를 들어 FPM)
테이블 UI에 Row Grouping, Header Wrapping, Header Grouping 옵션 추가
새 UI: 드래그앤드랍 가능
새 UI: 리치 텍스트 에디터
새 UI: Section Header
새 UI: Link Choice
새 UI: Page Layout
새 UI: Shuttle
새 UI: ACFExecute (클라이언트의 어플리케이션 실행가능)
새 UI: AcfUpDownload (여러개 파일 업/다운로드)
새 UI: Threshold Slider

7.02에 추가된 기능
context 사용처(where used list) 찾는 기능 추가  <-- 유지보수에 꼭 필요한 기능
layout 미리보기 화면 기능 강화
window 플러그 연결화면을 WDJ처럼 변경
테이블 UI에 여러가지 기능 강화
새 레이아웃: Form Layout
ALV에 display as Crystal Reports
몇가지 UI에 displayAsText 속성 추가
InputField에 SuggestValues 속성 추가 <-- 구글 검색어 추천처럼 서치핼프를 누르지 않고 미리 보는 효과
드래그앤드랍 지원
테이블 UI와 Interactive Forms 연동 가능
새 UI: Panel <-- 위젯(가젯)의 박스 같은 모습
새 UI: PanelStack (탭을 대체할 UI)
새 UI: IconButton
새 UI: Accordion
새 UI: Page Layout & Header
새 UI: Print Preview button
eCATT 테스트시 웹딘프로 지원 강화
디버거에 웹딘프로 지원 강화
실행중에 웹 브라우저의 타이틀을 변경할 수 있는 API 추가

2. Islands
웹딘프로의 제한사항인 HTML, js, RIA(Flex, Silverlight) 등 일반적인 웹기술을
적용할 수 없다는 점에 대해서 불만이 없을 수가 없지요.
섬 = Islands 는 다른 웹기술을 웹딘프로 안에서 사용할 수 있도록 해주는 기술입니다.
그냥 막 허용해주면 감당이 안되니까 섬으로 만들어서 그안에서만 놀도록 관리합니다.
7.01 부터 Adobe Flash Islands
7.02 부터 Microsoft Silverlight Islands
7.03 부터(예정) Web Widgets (HTML Islands)
자세한 내용은 장표를 참고하세요.

Islands 데모
시작 6024초 (1:40:24) 끝 6240초 (1:44:00)
Flex로 만든 구글맵을 웹딘프로에 연동하는 내용

3. Floorplan Manager
새로 나온 프레임워크 입니다. 앞으로 많이 사용될 것 같네요.
공부하려면 NET313 교재를 보시면 됩니다.

4. POWL
선택 옵션과 ALV를 합쳐 놓은 화면이고 조회 내역 캐시 기능이 있는 것이 특징입니다.
POWER Lists의 약어 입니다.

5. Local Page Builder
이건 잘 모르겠네요..

6. Looking Into the Future
다음에 나올 7.03에 대한 이야기들

출처: SAP Rich Islands for Adobe Flash
FLEX(또는 FLASH)를 웹딘프로에 넣는 것은  NetWeaver 7.01 부터 가능합니다.


Tutorial - Google Maps Mashup


1. ComponentController->WDDOINIT
2. Window->WDDOINIT
3. View->WDDOINIT
4. Window->HANDLExxxxxxx        "    여기서 URL 파라미터를 받을 수 있다.
5. View->WDDOMODIFYVIEW


초기화 로직을 어디에 넣어야 하는지는 결정하기 힘든 문제이다.

OO관점에서는 1,2,3번의 WDDOINIT이 좋아 보이는데,
한가지 문제는 URL 파라미터를 받을 수 없다는 것이다. 이것은 실로 큰 문제이다.

다음으로 보이는 곳은 4번 HandelDefault 이다.
하지만 이곳의 문제는 Window 라는 곳에는 로직을 넣는것이 별로 모양이 좋지 않다는 것이다.
그래서 보통은 ComponentController에 Start 등의 이름으로 메소드를 만들고 Start를 호출하는 로직만 간단히 넣는다.
역시 로직은 ComponentController에 있는게 여러모로 나중에 편하다.

다음으로 보이는 곳은 5번 WdDoModifyView 이다.
이곳은 사실 한번만 실행되는건 아니고 이벤트가 발생할때 마다 실행이 된다.
(처음에 한번만 실행하는 것을 쉽게 구현하도록 도와주는 FIRST_TIME 파라미터가 있다)
쉽게말해 모듈풀의 PBO와 같은 것이다. 모듈풀에 익숙한 사람들은 이곳에 많은 로직을 넣는 습관이 있다.
개인적으로 이곳에 로직을 넣는것을 싫어한다. 매 이번트 마다 실행되기 때문에 이곳은 최소화 하고 싶다.


파라미터를 받게 만들면 결국 4 또는 5번에 초기화 로직을 넣게 된다.
무언가로 통일하고 싶다.

+ Recent posts