[번역] FPM에서 CSS 스타일 적용하기

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
http://scn.sap.com/community/web-dynpro-abap/floorplan-manager/blog/2014/10/28/team-fpm--instance-styling-in-fpm

 

 

** Team FPM ** - FPM에서 CSS 스타일 적용하기

Posted by Christian Guenther in Floorplan Manager for Web Dynpro ABAP on Oct 28, 2014 1:18:09 PM

 

새로운 기능 Instance Styling (서버 버전이 SAP_UI 7.40 SP 10 이후 가능)으로 이제 FPM의 각 UI 엘리먼트별로 CSS 스타일을 적용할 수 있습니다. 이 블로그에서 어떻게 FPM에서 CSS 스타일을 적용하는지 예제를 통해 살펴보겠습니다.

FPM의 Instance Styling은 웹딘프로아밥에 새로 추가된 Instance Styling 을 기반으로 하고있습니다. 웹딘프로아밥과는 다르게 FPM 개발시에는 직접 UI 엘리먼트에 직접 접근하지 못합니다. FPM이 내부적으로 UI 엘리먼트를 그립니다. GUIBB에 필드를 추가하고, 버튼을 그리고, 페이지를 추가하고, 페이지에 섹션을 추가하고, 등등 FPM에서 개발한 내용은 FPM에 의해서 웹딘프로아밥 UI 엘리먼트가 그려집니다.

우리(FPM팀)는 FLUID(= FPM configuration editor)의 많은 엔티티에 새로운 어트리뷰트( Style, Label Style, ...)를 추가 했습니다. 여기에 여러분이 CSS 스타일 정보를 입력하면 FPM이 내부적으로 웹딘프로아밥 UI 엘리먼트를 그릴때 Instance Style로 변환하여서 연결해줍니다.

다음 섹션에서 이 기능을 어떻게 사용하는지 예제를 통해 살펴보겠습니다. 이 예제는 스탠다드 데모 어플리케이션 /BOBF/EPM_FPM_SADL_PD 를 변경하겠습니다. 다른 FPM 어플리케이션에도 적용할 수 있습니다.

이 어플리케이션을 실행하고 검색을 하면 아래 그림처럼 화면이 표시됩니다.

 

툴바 버튼에 스타일 적용하기

"Switch to Filter Page" 버튼에 스타일을 적용해보겠습니다. configuration editor 를 열어서 이 버튼을 선택하세요.

네비게이션 패널에서 "Search EPM Products" 페이지를 선택합니다. 프리뷰 또는 툴바 스키마에서 "Switch to Filter Page" 버튼을 선택합니다. Style 속성에 다음 값을 넣으세요.

borderRadius:30px;backgroundColor:#7D9847;

 

저장을 하고 어플리케이션을 다시 실행해보세요. 이제 버튼에 둥근모서리가 있고 배경색이 변경된 것을 확인할 수 있습니다.

 

버튼 위로 마우스를 올려보세요. hover background 와 font color 가 기존과 다르게 (우리가 "hoverBackgroundColor" 와 "hoverFontColor"를 변경하지 않았는데) 자동으로 변경되었습니다.

이제 "hoverBackgroundColor"를 지정하여 변화를 살펴보겠습니다. 다음 내용을 입력합니다.

borderRadius:30px;backgroundColor:#7D9847;hoverBackgroundColor:blue;

결과는 이렇게 됩니다:

 

왜 이런지 설명을 드리겠습니다. 하나의 스타일을 변경하면 관련된 다른 스타일이 자동으로 보기 좋게 맞춰서 변경됩니다. 이번 예제에서 원래의 "hoverFontColor"는 검정색이고 "hoverBackgroundColor"는 밝은 회색이였습니다. 배경색을 어두운 색상으로 변경하였기 때문에 기존 밝은 회색은 hover background color로 적절하지 않습니다. 그래서 이 속성은 어두운 녹색으로 자동 조정됩니다. 마우스를 올렸을때 어두운 녹색 배경에서 폰트색상으로 검정색은 읽기 어려우므로 hover font color 도 흰색으로 자동 조정됩니다. 다음으로 우리는 "hoverBackgroundColor"를 스타일에 추가하여 파란색으로 변경해 보았습니다. 이렇게 스타일에 추가한 값은 자동 조정된 값을 무시하고 대신(override) 적용됩니다. 그러면 hover font color 가 자동으로 조정되는데 파란색 배경에 맞춰 읽기 좋도록 역시 하얀색으로 조정되었습니다.

배경 그림 추가하기

배경 그림을 넣고 싶다는 요청사항은 자주 있는 편입니다. 스타일에 "backgroundImage" 속성을 사용하면 가능합니다.

배경 그림으로 사용될 이미지파일은 반드시 URL로 접근 가능해야 합니다. 이번 예제에서는 MIME 저장소에 이미지파일을 업로드 하고 그 URL을 사용했습니다.

이미지파일을 페이지의 배경 그림으로 넣어보겠습니다. configuration editor 를 열어서 페이지를 선택하고 Style 속성에 다음 값을 넣으세요.

backgroundImage:<Url to Image>;

 

어플리케이션을 다시 실행해보면 아래와 같이 보일겁니다.

 

요약

각 UI 엘리먼트에 Instance Styling 을 적용하여 CSS로 모양을 꾸밀 수 있습니다. 스탠다드 데모 WDR_TEST_CUSTOM_STYLES를 제공하므로 이를 통해 개략적인 스타일링 적용법을 살펴볼 수 있습니다.

Instance Styling 적용시 주의사항은 남용하면 안되고 꼭 필요할 때만 사용해 주세요. 해당 UI 엘리먼트가 특별하고 다른 UI 엘리먼트와 구분되어 보여야 할때 사용하는 것입니다. 단지 나는 동그란 모서리를 가진 버튼이 좋다는 이유로 모든 버튼에 Instance Styling을 적용하는 것은 좋지 않습니다. 다른 모양으로 표시하여 구분될 필요가 있는 경우에만 적용하세요. 만약 모든 버튼에 동그란 모서리를 적용하고 싶다면 차라리 테마 에디터를 이용하는게 좋습니다.

 

 

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
http://scn.sap.com/community/web-dynpro-abap/floorplan-manager/blog/2014/10/28/team-fpm--instance-styling-in-fpm