[번역] 웹딘프로 아밥에서 CSS 스타일 적용하기

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다

http://scn.sap.com/docs/DOC-65405

 

 

 

 

웹딘프로 아밥에서 CSS 스타일 적용하기

created by Harsha Jalakam on Jul 17, 2015 9:01 AM, last modified by Harsha Jalakam on Jul 22, 2015 2:34 PM

Version 4

 

서버 버전이 SAP_UI 740이상 SP 10 이상 이면 CSS를 사용할 수 있습니다. 이제 HTML Island를 사용하지 않고도 배경색상, 글자색상, 글자크기 등을 변경하여 UI를 아름답게 꾸밀 수 있습니다.

 

 

웹딘프로아밥에 CSS를 적용하려면 아래 단계를 진행하세요.

 

1.  적용할 CSS 스타일 속성(배경색상, 글자크기, 글자색상)을 if_wd_custom_style=>t_style_properties 타입에 맞게 이름과 값으로 정의합니다.

 

2.  메소드 IF_WD_CUSTOM_STYLE_MANAGER~CREATE_CUSTOM_STYLE를 호출합니다. 파라미터로 스타일 클래스 이름, 스타일 속성(단계1에서 정의한것), UI엘리먼트 등이 필요합니다.

 

3.  위에서 만들어진 IF_WD_CUSTOM_STYLE_MANAGER 타입의 인스턴스를 컴포넌트에 추가합니다. 이제 컴포넌트에서 스타일시트를 사용 할 수 있습니다.

 

4.  스타일시트 이름을 UI 속성 styleClassName에 입력합니다.

 

 

단계별 시나리오 예제:-

 

1. 웹딘프로아밥 컴포넌트를 새로 만듭니다.

 

    

 

 

2. 컴포넌트 컨트롤러의 메소드 탭에서 WDDOINIT 메소드에 아래 코드를 추가 합니다.

 

 

    

WDDOINIT

data(lo_custom_style_manager) = wd_this->wd_get_api( )->get_application( )->get_custom_style_manager( ). data lo_btn_style_properties type if_wd_custom_style=>t_style_properties. lo_btn_style_properties = value #( ( name = 'fontSize' value = '15px' ) ( name = 'fontWeight' value = 'bold' ) ( name = 'fontColor' value = 'RED' ) ). data(lo_btn_custom_style) = lo_custom_style_manager->create_custom_style( style_class_name = 'myCustomButton' library_name = 'STANDARD' element_type = 'BUTTON' style_properties = lo_btn_style_properties ). lo_custom_style_manager->add_custom_style( lo_btn_custom_style ). data lo_txt_vw_style_properties type if_wd_custom_style=>t_style_properties. lo_txt_vw_style_properties = value #( ( name = 'fontSize' value = '15px' ) ( name = 'fontWeight' value = 'bold' ) ( name = 'fontColor' value = 'rgb(95,95,95)' ) ). data(lo_txt_custom_style) = lo_custom_style_manager->create_custom_style( style_class_name = 'myCustomTextView' library_name = 'STANDARD' element_type = 'TEXT_VIEW' style_properties = lo_txt_vw_style_properties ). lo_custom_style_manager->add_custom_style( lo_txt_custom_style ).

 

 

3. 뷰 탭으로 이동하여 transparent container를 하나 만들고 안에 button 하나와 text view 하나를 만듭니다. 만들어진 transparent container를 복사하여 하나 더 만듭니다. 이렇게 복사하는 이유는 일반 UI 와 CSS가 적용된 UI를 비교해 보기위해서 입니다. 아래그림처럼 만듭니다.

 

   

 

 

4. 복사한 transparent container아래 button 과 text view에 속성 styleClassName를 각각 아래 그림처럼 입력합니다. (속성에 들어가는 이름은 WDDOINIT 메소드에서 정의한 이름입니다).

 

 

5. 이제 어플리케이션을 만들고 실행합니다. CSS 적용된 결과를 보세요.

 

 

 

스탠다드의 WDR_TEST_CUSTOM_STYLES 컴포넌트를 보면 이와 관련된 더 많은 예제를 볼 수 있습니다.

 

 

참고자료:

 

1. http://help.sap.com/saphelp_nw74/helpdata/en/7d/1bb2b262f9400a99e17296eb9bd81f/content.htm
2. http://help.sap.com/saphelp_nw74/helpdata/en/57/fa8b41bce2a609e10000000a155106/content.htm?fullscreen=true

 

 

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다

http://scn.sap.com/docs/DOC-65405