RAP에서 CSS사용하기

RAP에서 외부 모양을 꾸미기 위해서는 테마(확장점:org.eclipse.rap.themes)를 사용합니다.
이 테마는 RAP가 웹에서 동작하니 당연히 CSS를 사용하게 되지요.

좀더 부언하자면 다음과 같습니다.
Button의 모양을 CSS로 다음과 같이 정의 했다면
Button {
color: #705e42;
padding: 3px 6px 3px 4px;
font: bold 12px Arial, Helvetica, sans-serif;
}

다음과 같이 출력 됩니다.


이 CSS가 적용된 프로젝트에는 모든 버튼이 위와 같이 표시 됩니다.

- 지금까지 알 수 있는 사항은 다음과 같이 정의할수 있습니다.
대부분의 콘트롤을 CSS로 정의할 수 있습니다
RWT(RWT는 SWT와 같은 것으로 표준 Widget을 말합니다) Widget으로 화면에 정의된 모양과 CSS 정의된 타입이 중복 되었을 경우에는 RWT가 우선적로 적용되는 것으로 보입니다.

- RAP에서 CSS를 정의하는 방법은 다음과 같습니다.
1) Extensions에 org.eclipse.rap.themes를 추가 합니다.

위의 정의를 설명하면 다음과 같습니다.
프로젝트 내에 theme1/theme.css파일을 테마로 정의합니다.

처음 출발은 RAP 공식 데모인 org.eclipse.rap.demo에 적용된 css를 보면 CSS를 어떻게 정의 해야 하는지와 설명이 잘 되어 있습니다.

2) 적용된 CSS가 어떻게 보여질 것인지는 branding로 정의할 수 있습니다.

위의 정의를 설명하면 다음과 같습니다.
body는 body.html파일로 정의합니다. body로 정의하고 싶은 내용을 정의 합니다.
defaultEntrypointId으로 정의하는 기본 entry point를 정의 할 수 있습니다.(entry point는 RAP의 시작 포인트 입니다. 즉 RCP에서 IApplicstion과 같은 역활을 합니다)
exitConfirmationClass는 종료 시에 출력되는 클래스를 정의합니다.
favicon, title는 화면에 표시될 아이콘과 타이틀을 지정합니다.


id는 중복되지 않는 고유의 id를 정의합니다.
servletName은 호출될때 사용되는 이름을 정의합니다.
themeId는 호출될때 적용할 theme를 정의합니다. (위의 1에서 정의한 css를 정의 할수 있습니다.)

위와 같이 정의하고 프로그램을 호출하면(http://localhost:9090/ems) 위에 적용된 css가 출력됩니다.


전체 디테일한 메뉴얼은 다음을 참조하세요.
0) Eclipse help의 RAP Developer Guide -> Advance Guide -> theme부분 참조
http://help.eclipse.org/ganymede/topic/org.eclipse.rap.help/help/html/advanced/theming.html

1) http://www.ibm.com/developerworks/edu/os-dw-os-eclipse-ganymede-pt2.html중에 Theming the personal organizer 살표보세요.

2) Rich Ajax Platform: Bringing Rich Client to the Web (Firstpress) 6장 Changing RAP to Use a Different Theme부분을 참조하세요