GWT-CSS를 사용한 스타일
GWT 위젯은 시각적 스타일 지정을 위해 CSS (Cascading Style Sheet)에 의존합니다. 기본적으로 각 구성 요소의 클래스 이름은 다음과 같습니다.gwt-<classname>.
예를 들어, Button 위젯은 기본 스타일 인 gwt-Button을 가지며 유사한 방식으로 TextBox widgest는 기본 스타일 인 gwt-TextBox를 갖습니다 .
모든 버튼과 텍스트 상자에 더 큰 글꼴을 제공하려면 응용 프로그램의 CSS 파일에 다음 규칙을 넣을 수 있습니다.
.gwt-Button { font-size: 150%; }
.gwt-TextBox { font-size: 150%; }기본적으로 브라우저도 GWT도 기본값을 생성하지 않습니다. id위젯 속성. CSS에서 사용할 수있는 요소에 대한 고유 ID를 명시 적으로 만들어야합니다. 특정 버튼에 id를 부여하기 위해my-button-id 더 큰 글꼴의 경우 응용 프로그램의 CSS 파일에 다음 규칙을 넣을 수 있습니다.
#my-button-id { font-size: 150%; }GWT 위젯의 ID를 설정하려면 해당 DOM 요소를 검색 한 다음 다음과 같이 id 속성을 설정하십시오.
Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")CSS 스타일링 API
모든 GWT 위젯에 대한 CSS 설정을 수행하는 데 사용할 수있는 많은 API가 있습니다. 다음은 GWT를 사용하는 일상적인 웹 프로그래밍에 도움이 될 몇 가지 중요한 API입니다.
| Sr. 아니. | API 및 설명 |
|---|---|
| 1 |
public void setStyleName(java.lang.String style) 이 방법은 기존의 스타일을 지우고 새로운 CSS 클래스를 사용하여 제공에 위젯 스타일을 설정합니다 스타일 . |
| 2 |
public void addStyleName(java.lang.String style) 이 메서드는 위젯에 보조 또는 종속 스타일 이름을 추가합니다. 보조 스타일 이름은 추가 스타일 이름입니다. 즉, 이전에 적용된 스타일 이름이있는 경우 그대로 유지됩니다. |
| 삼 |
public void removeStyleName(java.lang.String style) 이 메서드는 위젯에서 지정된 스타일을 제거하고 위젯과 관련된 다른 스타일은 그대로 둡니다. |
| 4 |
public java.lang.String getStyleName() 이 메서드는 개체의 모든 스타일 이름을 공백으로 구분 된 목록으로 가져옵니다. |
| 5 |
public void setStylePrimaryName(java.lang.String style) 이 메서드는 객체의 기본 스타일 이름을 설정하고 모든 종속 스타일 이름을 업데이트합니다. |
예를 들어, 텍스트에 적용 할 두 가지 새로운 스타일을 정의 해 보겠습니다.
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}
.gwt-Red-Text {
color:red;
}이제 setStyleName (Style) 을 사용하여 기본 설정을 새 설정으로 변경할 수 있습니다 . 아래 규칙을 적용하면 텍스트의 글꼴이 커집니다.
txtWidget.setStyleName("gwt-Big-Text");동일한 위젯에 보조 CSS 규칙을 적용하여 다음과 같이 색상을 변경할 수 있습니다.
txtWidget.addStyleName("gwt-Red-Text");위의 방법을 사용하여 위젯에 적용하려는 스타일을 원하는만큼 추가 할 수 있습니다. 버튼 위젯에서 첫 번째 스타일을 제거해도 두 번째 스타일은 여전히 텍스트와 함께 유지됩니다.
txtWidget.removeStyleName("gwt-Big-Text");기본 및 보조 스타일
기본적으로 기본 스타일 위젯의 이름이 예에 대한 위젯 클래스의 기본 스타일의 이름이됩니다 GWT-버튼 버튼 위젯. AddStyleName () 메서드를 사용하여 스타일 이름을 추가하고 제거 할 때 이러한 스타일을 보조 스타일이라고합니다.
위젯의 최종 모양은 위젯에 추가 된 모든 보조 스타일과 기본 스타일의 합계에 의해 결정됩니다. setStylePrimaryName (String) 메서드 를 사용하여 위젯의 기본 스타일을 설정합니다 . 설명을 위해 Label 위젯이 있다고 가정 해 보겠습니다. CSS 파일에는 다음과 같은 규칙이 정의되어 있습니다.
.MyText {
color: blue;
}
.BigText {
font-size: large;
}
.LoudText {
font-weight: bold;
}특정 레이블 위젯이 항상 파란색 텍스트를 표시하고 어떤 경우에는 강조를 위해 더 크고 굵은 글꼴을 사용한다고 가정 해 보겠습니다.
우리는 이렇게 할 수 있습니다.
// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...
// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...
// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");CSS 파일 연결
CSS 파일을 모듈과 연결하는 방법에는 여러 가지가 있습니다. 최신 GWT 애플리케이션은 일반적으로 CssResource와 UiBinder의 조합을 사용합니다. 예제에서는 첫 번째 접근 방식 만 사용하고 있습니다.
호스트 HTML 페이지에서 <link> 태그 사용.
모듈 XML 파일에서 <stylesheet> 요소 사용.
사용 CssResource 안에 포함 ClientBundle.
인라인 <ui : style> 요소 사용 UiBinder 주형.
GWT CSS 예
이 예제는 GWT 위젯에 다양한 CSS 규칙을 적용하는 간단한 단계를 안내합니다. GWT 플러그인과 함께 Eclipse IDE를 작동하고 다음 단계에 따라 GWT 애플리케이션을 만듭니다.
| 단계 | 기술 |
|---|---|
| 1 | GWT- 애플리케이션 만들기 장에 설명 된대로 com.tutorialspoint 패키지 아래에 HelloWorld 라는 이름으로 프로젝트를 만듭니다 . |
| 2 | 아래 설명과 같이 HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html 및 HelloWorld.java 를 수정하십시오 . 나머지 파일은 변경하지 마십시오. |
| 삼 | 애플리케이션을 컴파일하고 실행하여 구현 된 논리의 결과를 확인합니다. |
다음은 수정 된 모듈 설명 자의 내용입니다. src/com.tutorialspoint/HelloWorld.gwt.xml.
<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name = 'com.google.gwt.user.User'/>
<!-- Inherit the default GWT style sheet. -->
<inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
<!-- Specify the app entry point class. -->
<entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
<!-- Specify the paths for translatable code -->
<source path = 'client'/>
<source path = 'shared'/>
</module>다음은 수정 된 스타일 시트 파일의 내용입니다. war/HelloWorld.css.
body {
text-align: center;
font-family: verdana, sans-serif;
}
h1 {
font-size: 2em;
font-weight: bold;
color: #777777;
margin: 40px 0px 70px;
text-align: center;
}
.gwt-Button {
font-size: 150%;
font-weight: bold;
width:100px;
height:100px;
}
.gwt-Big-Text {
font-size:150%;
}
.gwt-Small-Text {
font-size:75%;
}다음은 수정 된 HTML 호스트 파일의 내용입니다. war/HelloWorld.html 두 개의 버튼을 수용합니다.
<html>
<head>
<title>Hello World</title>
<link rel = "stylesheet" href = "HelloWorld.css"/>
<script language = "javascript" src = "helloworld/helloworld.nocache.js">
</script>
</head>
<body>
<div id = "mytext"><h1>Hello, World!</h1></div>
<div id = "gwtGreenButton"></div>
<div id = "gwtRedButton"></div>
</body>
</html>Java 파일의 다음 내용을 갖도록합시다 src/com.tutorialspoint/HelloWorld.java HTML에 두 개의 버튼을 추가하고 사용자 정의 CSS 스타일을 적용합니다.
package com.tutorialspoint.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
// add button to change font to big when clicked.
Button Btn1 = new Button("Big Text");
Btn1.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Big-Text");
}
});
// add button to change font to small when clicked.
Button Btn2 = new Button("Small Text");
Btn2.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
RootPanel.get("mytext").setStyleName("gwt-Small-Text");
}
});
RootPanel.get("gwtGreenButton").add(Btn1);
RootPanel.get("gwtRedButton").add(Btn2);
}
}모든 변경이 완료되면 GWT-Create Application 장 에서했던 것처럼 개발 모드에서 애플리케이션을 컴파일하고 실행 해 보겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 생성됩니다.
이제 표시된 두 개의 버튼을 클릭하고 "Hello, World!"를 관찰하십시오. 두 개의 버튼을 클릭하면 글꼴이 계속 변경되는 텍스트.