[번역] UI 테마 디자이너로 웹딘프로아밥 테마를 관리

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/10/24/ui-theme-designer-for-web-dynpro-abap/

 

UI Theme Designer for Web Dynpro ABAP

October 24, 2014 

Kiran Kumar Valluru

 

소개

이 문서는 UI 테마 디자이너로 웹딘프로아밥 테마를 만드는 방법을 설명합니다.

UI 테마 디자이너는 웹브라우저에서 실행됩니다. 스탠다드 테마를 복사하여 자신만의 테마를 만들고 수정할 수 있습니다.

준비물

넷위버 7.4 미만 버전에서는 UI Add-on for Netweaver 1.0 SP04 이상 버전을 추가 설치해야 합니다.

넷위버 7.4 SP04 버전 이상인 경우, UI 테마 디자이너는 이미 설치 되어 있습니다.

단계별 진행

예제로 간단한 웹딘프로아밥 어플리케이션을 하나 선택하였습니다. 여기에 배경 그림을 변경하는 데모를 보여드리겠습니다.

위 어플리케이션입니다. 이제 UI 테마 디자이너로 테마 변경을 해보겠습니다.

시작

UI 테마 디자이너를 실행하기 위해서는 티코드 /UI5/THEME_DESIGNER를 실행합니다.

또는, 웹 브라우저에서 아래 주소를 입력해도 됩니다:

https://<server>:<port>/sap/bc/theming/theme-designer?sap-client=<client>

테마 디자이너를 실행하기 전에 다음의 ICF 노드를 활성해 해야 합니다. 티코드 SICF를 실행합니다. 아래의 ICF 노드를 (활성화 하지 않았다면) 활성해 해주세요.

 

경로: default_host -> SAP -> BC -> ui5_ui5 -> SAP 에서 아래 노드를 활성화:

 

• ARSRVC_SUITE_PB
• ARSRVC_SPB_ADMN
• ARSRVC_LPD_C

 

경로: default_host -> SAP -> Public -> BC 에서 아래 노드를 활성화:

• ui2
• ui5_ui5

 

 

혹시나 활성화 하지 않더라도 UI 테마 디자이너를 실행하면 활성화 여부를 체크하여 활성화 할지 물어 봅니다.

 

실행

 

이제 티코드 /UI5/THEME_DESIGNER를 실행합니다.

 

웹브라우저에서 테마 디자이너가 실행됩니다. 사용가능한 (스탠다드와 커스텀 테마 모두) 테마 목록이 나타납니다.

 

테마를 선택합니다. 복사하여 수정할 기본이 될 테마를 선택하는 것입니다. Open을 클릭합니다.

테마 수정 화면으로 이동합니다. 화면에 나타난 Target Content를 입력해야 합니다.

 

 

테마를 적용할 웹딘프로 어플리케이션의 URL을 복사하여 Target Content의 application link 에 입력합니다.

application link에 url을 입력하고 description에 설명을 입력하고 Add를 클릭합니다.

 

테마 디자이너가 해당 어플리케이션을 미리보기 영역에 보여줍니다. 테마를 수정하면 미리보기에 바로 반영되어 확인할 수 있습니다.

 

이제 Quick 모드로 배경 그림를 추가하여 테마를 수정해 보겠습니다. 아래 그림처럼 Background Image 옆에 있는 버튼을 누릅니다:

팝업 창이 뜹니다. 파일 추가 아이콘을 누르거나 PC에서 파일을 드래그하여 드랍합니다:

그림을 추가하면 작은 미리보기가 나타납니다. 그림을 선택하고 OK를 클릭합니다.

미리보기에 테마 변경사항이 바로 반영 됩니다:

 

테마 디자이너는 'Expert' 모드를 지원합니다. Quick 보다 더 많은 옵션이 제공 됩니다. 글꼴, 글 색상, 테두리, 넓이, 스타일 등을 쉽게 변경 할 수 있습니다.

 

예를들어 글 색상을 변경하고 싶다면, sapTextColor 옆에 있는 아이콘 버튼을 눌러 보세요:

색상을 쉽게 선택할 수 있고 변경 사항은 즉시 미리보기에 적용됩니다:

 

 

변경된 파라미터는 굵게 표시됩니다. 변경사항을 취소하는 방법은 파라미터 이름 옆에 표시된 세팅 아이콘을 누르고 'Reset to Original'을 선택하면 취소 됩니다.

 

여기에는 필터 기능도 있습니다. 테마 파라미터를 색상, 그림, 글꼴 등을 기준으로 필터링 할 수 있습니다,

 

필터에 직접 글자를 입력할 수도 있습니다:

 

테마 디자이너에서는 직접 css를 입력할 수 있도록 CSS 탭을 제공합니다.

 

미리보기에는 변경전(Original) 과 변경후(Preview)를 쉽게 바꿔가며 볼 수 있습니다.

 

변경이 끝났으면 이제 저장을 해보겠습니다. 테마 메뉴에서 'Save & Build'를 선택합니다.

 

새로 저장할 테마 ID와 설명을 입력하고 Publish를 클릭합니다.

 

 

이제 새로운 테마가 생성되어 사용할 준비가 되었습니다.

 

 

완료

 

테마를 테스트 해보겠습니다. 파라미터 sap-theme=<your_theme> 를 URL 에 추가하여 웹딘프로 어플리케이션을 실행합니다.

 

 

또는, 어플리케이션의 파라미터탭에서 WDTHEMEROOT 파라미터를 선택하고 테마이름을(myTheme)  value 에 입력해도 됩니다.

 

우리가 만든 테마가 (배경 그림 변경) 적용된 웹딘프로 어플리케이션이 실행 됩니다.

 

이 테마는 당연히 다른 어플리케이션에도 적용할 수 있습니다. 아래 그림은 스탠다드 어플리케이션(비행 목록)을 실행하여 테마를 적용해 보았습니다.

 

 

결론

UI 테마 디자이너로 큰 노력 들이지 않고 쉽게 테마를 만들고 수정할 수 있습니다. 웹딘프로아밥, FPM, SAPUI5, NWBC, 포탈 모두에 적용되는 일관성 있는 테마를 만들 수 있습니다.

참고:

UI Theme Designer – User Interface Add-On for SAP NetWeaver – SAP Library

 

이글은 아래 링크의 원본 글에 대한 한글 번역 입니다
https://blogs.sap.com/2014/10/24/ui-theme-designer-for-web-dynpro-abap/