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.htmlHelloWorld.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!"를 관찰하십시오. 두 개의 버튼을 클릭하면 글꼴이 계속 변경되는 텍스트.