웹딘프로 아밥에서 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 ).

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를 비교해 보기위해서 입니다. 아래그림처럼 만듭니다.