GWT 소개

1. 소개

GWT 또는 Google Web Toolkit은 Java로 고성능 웹 애플리케이션을 구축하기 위한 프레임워크입니다 .

이 사용방법(예제)에서는 몇 가지 주요 기능과 기능에 중점을 두고 다룰 것입니다.

2. GWT SDK

SDK에는 Java API 라이브러리, 컴파일러 및 개발 서버가 포함되어 있습니다.

2.1. 자바 API

GWT API에는 사용자 인터페이스 구축, 서버 호출, 국제화, 단위 테스트 수행을 위한 클래스가 있습니다. 자세한 내용은 여기에서 Java 설명서를 확인하십시오 .

2.2. 컴파일러

간단히 말해서 GWT 컴파일러는 Java 코드에서 Javascript로의 소스 번역기입니다 . 컴파일 결과는 Javascript 애플리케이션입니다.

작업 논리에는 코드에서 사용하지 않는 클래스, 메서드, 필드를 정리하고 Javascript 이름을 줄이는 것이 포함됩니다.

이러한 이점 때문에 더 이상 Javascript 프로젝트에 Ajax 라이브러리를 포함할 필요가 없습니다. 물론 코드를 컴파일하면서 힌트를 설정하는 것도 가능합니다.

다음은 몇 가지 유용한 GWTCompiler 매개변수입니다.

-logLevel – ERROR, WARN, INFO, TRACE, DEBUG, SPAM, ALL 로깅 수준 중 하나를 설정합니다.
-workdir – 컴파일러의 작업 디렉토리
-gen – 생성된 파일을 쓸 디렉터리
-out – 출력 파일 디렉토리
-optimize – 컴파일러 최적화 수준을 0에서 9로 설정합니다.
-style – 스크립트 출력 스타일 OBF, PRETTY 또는 DETAILED
-module[s] – 컴파일할 모듈의 이름

3. 설정

최신 SDK는 다운로드 페이지에서 받을 수 있습니다. 나머지 설정은 시작 페이지에서 사용할 수 있습니다.

3.1. 메이븐

Maven으로 프로젝트를 설정하려면 pom.xml 에 다음 의존성을 추가해야 합니다 .

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-servlet</artifactId>
    <scope>runtime</scope>
</dependency>
<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-user</artifactId>
    <scope>provided</scope>
</dependency>
<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt-dev</artifactId>
    <scope>provided</scope>
</dependency>

gwt-servlet 라이브러리는 GWT-RPC Endpoints을 호출하기 위한 서버 측 구성 요소를 지원합니다. gwt-user에는 웹 애플리케이션을 구축하는 데 사용할 Java API가 포함되어 있습니다 . gwt-dev에는 컴파일러, 배포 또는 응용 프로그램 호스팅을 위한 코드가 있습니다.

모든 의존성이 동일한 버전을 사용하도록 하려면 상위 GWT 의존성을 포함해야 합니다.

<dependency>
    <groupId>com.google.gwt</groupId>
    <artifactId>gwt</artifactId>
    <version>2.8.2</version>
    <type>pom</type>
    <scope>import</scope>
</dependency>

모든 아티팩트는 Maven Central 에서 다운로드할 수 있습니다 .

4. 신청

간단한 웹 애플리케이션을 만들어 봅시다. 서버에 메시지를 보내고 응답을 표시합니다.

일반적으로 GWT 애플리케이션은 서버와 클라이언트 부분으로 구성됩니다 . 클라이언트 측은 서버에 연결하기 위해 HTTP 요청을 합니다. 이를 가능하게 하기 위해 GWT는 원격 프로시저 호출 또는 단순히 RPC 메커니즘을 사용합니다.

5. GWT 및 RPC

애플리케이션으로 돌아가서 RPC 통신이 어떻게 이루어지는지 살펴보겠습니다. 이를 위해 서버에서 메시지를 수신하는 서비스를 만듭니다.

먼저 인터페이스를 생성해 보겠습니다.

@RemoteServiceRelativePath("greet")
public interface MessageService extends RemoteService {
    String sendMessage(String message) throws IllegalArgumentException;
}

@RemoteServiceRelativePath 어노테이션은 서비스를 모듈의 /message 상대 URL 에 매핑 합니다 . RPC 통신을 수행하려면 MessageService가 RemoteService 마커 인터페이스 에서 확장되어야 합니다 .

MessageService 의 구현은 서버 측에 있습니다.

public class MessageServiceImpl extends RemoteServiceServlet 
  implements MessageService {

    public String sendMessage(String message) 
      throws IllegalArgumentException {
        if (message == null) {
            throw new IllegalArgumentException("message is null");
        }

        return "Hello, " + message + "!<br><br> Time received: " 
          + LocalDateTime.now();
    }
}

우리의 서버 클래스는 RemoteServiceServlet 기본 서블릿 클래스 에서 확장됩니다 . 클라이언트에서 들어오는 요청을 자동으로 역직렬화하고 서버에서 나가는 응답을 직렬화합니다 .

이제 클라이언트 측에서 어떻게 사용하는지 살펴보겠습니다. MessageService 는 우리 서비스의 최종 버전일 뿐입니다 .

클라이언트 측에서 수행하려면 서비스의 비동기 버전을 생성해야 합니다.

public interface MessageServiceAsync {
    void sendMessage(String input, AsyncCallback<String> callback) 
      throws IllegalArgumentException;
}

여기에서 getMessage() 메서드 의 추가 인수를 볼 수 있습니다 . 비동기 호출이 완료되면 UI에 알리려면 비동기가 필요합니다 . 이렇게 하면 작업 UI 스레드가 차단되지 않습니다.

6. 구성 요소 및 수명 주기

SDK는 그래픽 인터페이스 디자인을 위한 몇 가지 UI 요소와 레이아웃을 제공합니다.

일반적으로 모든 UI 구성 요소는 Widget 클래스에서 확장됩니다. 시각적으로 우리는 화면에서 보거나 클릭하거나 이동할 수 있는 요소 위젯을 가지고 있습니다.

컴포넌트 위젯 – TextBox , TextArea , Button , RadioButton , CheckBox 등

화면을 구성하고 구성하는 레이아웃 또는 패널 위젯이 있습니다.

패널 위젯 – HorizontalPanel , VerticalPanel , PopupPanel , TabPanel 등…

코드에 위젯이나 다른 구성 요소를 추가할 때마다 GWT는 보기 요소를 브라우저의 DOM과 연결하기 위해 열심히 노력합니다 .

생성자는 항상 루트 DOM 요소를 초기화합니다. 자식 위젯을 부모 구성 요소에 연결하면 DOM 수준에서 바인딩도 발생합니다 . 진입점 클래스에는 먼저 호출될 로딩 함수가 포함되어 있습니다. 여기에서 위젯을 정의합니다.

7. 진입점

애플리케이션의 주요 진입점을 자세히 살펴보겠습니다.

public class Google_web_toolkit implements EntryPoint {

    private MessageServiceAsync messageServiceAsync = GWT.create(MessageService.class);

    public void onModuleLoad() {
        Button sendButton = new Button("Submit");
        TextBox nameField = new TextBox();
        nameField.setText("Hi there");

        sendButton.addStyleName("sendButton");

        RootPanel.get("nameFieldContainer").add(nameField);
        RootPanel.get("sendButtonContainer").add(sendButton);
    }
}

모든 UI 클래스는 com.google.gwt.core.client.EntryPoint 인터페이스를 구현하여 모듈의 기본 항목으로 표시합니다 . Java 코드가 실행되는 해당 HTML 문서에 연결됩니다.

GWT UI 구성 요소를 정의하고 동일한 ID를 가진 HTML 태그에 할당할 수 있습니다. 진입점 클래스는 모듈을 로드할 때 자동으로 호출되는 진입점 onModuleLoad() 메서드를 재정의합니다 .

여기에서 UI 구성요소를 생성하고, 이벤트 핸들러를 등록하고, 브라우저 DOM을 수정합니다.

이제 원격 서버 인스턴스를 만드는 방법을 살펴보겠습니다. 이를 위해 GWT.create(MessageService.class) 정적 메서드를 사용합니다.

컴파일 타임에 요청된 유형을 결정합니다. 이 방법을 보면 GWT 컴파일러는 컴파일 시간에 많은 버전의 코드를 생성하며, 그 중 하나만 런타임에 부트스트래핑하는 동안 특정 클라이언트에 의해 로드되어야 합니다 . 이 기능은 RPC 호출에서 널리 사용됩니다.

여기에서 Button 및 TextBox 위젯 도 정의합니다 . 그것들을 DOM 트리에 추가하기 위해 우리는 RootPanel 클래스를 사용합니다 . 루트 패널이며 단일 값을 반환하여 위젯 요소를 바인딩합니다.

RootPanel.get("sendButtonContainer").add(sendButton);

먼저 sendButtonContainer id 로 표시된 루트 컨테이너를 가져옵니다 . sendButton 을 컨테이너에 연결한 후 .

8. HTML

/webapp 폴더 안에 Google_web_toolkit.html 파일이 있습니다 .

태그 요소에 특정 ID를 표시하여 프레임워크가 태그 요소를 Java 객체에 바인딩할 수 있도록 할 수 있습니다 .

<body>
    <h1>Sample GWT Application</h1>
    <table align="center">
        <tr>
            <td colspan="2" style="font-weight:bold;">Please enter your message:</td>
        </tr>
        <tr>
            <td id="nameFieldContainer"></td>
            <td id="sendButtonContainer"></td>
        </tr>
    </table>
</body>

nameFieldContainer 및 sendButtonContainer ID가 있는 <td> 태그 는 Button 및 TextBox 구성 요소 에 매핑됩니다 .

9. 메인 모듈 설명자

Google_web_toolkit.gwt.xml 기본 모듈 설명자 파일 의 일반적인 구성을 살펴보겠습니다 .

<module rename-to='google_web_toolkit'>
    <inherits name='com.google.gwt.user.User'/>
    <inherits name='com.google.gwt.user.theme.clean.Clean'/>
    <entry-point class='com.baeldung.client.Google_web_toolkit'/>
</module>

com.google.gwt.user.User 인터페이스를 포함하여 핵심 GWT 항목에 액세스할 수 있습니다 . 또한 애플리케이션의 기본 스타일 시트를 선택할 수 있습니다. 이 경우에는 *.clean.Clean 입니다 .

사용 가능한 다른 스타일 지정 옵션은 *.dark.Dark , *.standard.Standard , *.chrome.Chrome 입니다 . com.baeldung.client.Google_web_toolkit 도 여기서 <entry-point /> 태그 로 표시됩니다 .

10. 이벤트 처리기 추가

마우스 또는 키보드 타이핑 이벤트를 관리하기 위해 GWT는 일부 핸들러를 사용합니다. 모두 EventHandler 인터페이스에서 확장되며 이벤트 유형 인수가 있는 메서드가 있습니다 .

이 예제에서는 마우스 클릭 이벤트 핸들러를 등록합니다.

그러면 버튼을 누를 때마다 onClick() 메서드가 실행됩니다.

closeButton.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        vPanel.hide();
        sendButton.setEnabled(true);
        sendButton.setFocus(true);
    }
});

여기에서 위젯 상태 및 동작을 수정할 수 있습니다. 이 예에서는 vPanel 을 숨기고 sendButton을 활성화합니다 .

다른 방법은 내부 클래스를 정의하고 필요한 인터페이스를 구현하는 것입니다.

class MyHandler implements ClickHandler, KeyUpHandler {

    public void onClick(ClickEvent event) {
        // send message to the server
    }

    public void onKeyUp(KeyUpEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            // send message to the server
        }
    }
}

ClickHandler 외에도 여기에 KeyUpHandler 인터페이스를 포함하여 키 누르기 이벤트를 포착합니다. 여기 에서 onKeyUp() 메서드 내에서 KeyUpEvent를 사용하여 사용자가 Enter 키를 눌렀는지 확인할 수 있습니다 .

다음은 MyHandler 클래스를 사용하여 두 이벤트 핸들러를 등록하는 방법입니다.

MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);

11. 서버 호출

이제 서버에 메시지를 보낼 준비가 되었습니다. 비동기식 sendMessage() 메서드 를 사용하여 원격 프로시저 호출을 수행합니다 .

메소드의 두 번째 매개변수는 AsyncCallback<String> 인터페이스입니다. 여기서 String은 해당 동기 메소드의 리턴 유형입니다 .

messageServiceAsync.sendMessage(textToServer, new AsyncCallback<String>() {
    public void onFailure(Throwable caught) {
        serverResponseLabel.addStyleName("serverResponseLabelError");
        serverResponseLabel.setHTML("server error occurred");
        closeButton.setFocus(true);
    }

    public void onSuccess(String result) {
        serverResponseLabel.setHTML(result);
        vPanel.setVisible(true);
    }
});

보시다시피 수신자는 각 응답 유형에 대해 onSuccess(String result) 및 onFailure(Throwable) 메서드를 구현합니다 .

응답 결과에 따라 "서버 오류가 발생했습니다"라는 오류 메시지를 설정하거나 결과 값을 컨테이너에 표시합니다.

12. CSS 스타일링

eclipse 플러그인으로 프로젝트를 생성할 때 /webapp 디렉토리 아래에 Google_web_toolkit.css 파일을 자동으로 생성하여 메인 HTML 파일에 연결합니다.

<link type="text/css" rel="stylesheet" href="Google_web_toolkit.css">

물론 프로그래밍 방식으로 특정 UI 구성 요소에 대한 사용자 지정 스타일을 정의할 수 있습니다.

sendButton.addStyleName("sendButton");

여기에서는 클래스 이름 sendButton을 사용하여 CSS 스타일을 sendButton 구성 요소 에 할당합니다 .

.sendButton {
    display: block;
    font-size: 16pt;
}

13. 결과

결과적으로 다음과 같은 간단한 웹 애플리케이션이 있습니다.

여기서 우리는 "안녕하세요" 메시지를 서버에 제출하고 "안녕하세요, 안녕하세요!"를 인쇄합니다. 화면에 대한 응답.

14. 결론

이 빠른 기사에서 우리는 GWT 프레임워크의 기본 사항에 대해 배웠습니다 . 그런 다음 SDK의 아키텍처, 수명 주기, 기능 및 다양한 구성 요소에 대해 논의했습니다.

그 결과 간단한 웹 애플리케이션을 만드는 방법을 배웠습니다.

그리고 항상 그렇듯이 예제의 전체 소스 코드는 GitHub 에서 사용할 수 있습니다 .

부티크 소개 (0)	2023.02.13
Dropwizard 소개 (0)	2023.02.13
자카르타 EE MVC 소개 / Eclipse Krazo (0)	2023.02.13
JavaLite 사용방법(예제) – RESTful CRUD 애플리케이션 구축 (1)	2023.02.13
액티브웹 소개 (0)	2023.02.13

기록만이살길

GWT 소개

1. 소개

2. GWT SDK

2.1. 자바 API

2.2. 컴파일러

3. 설정

3.1. 메이븐

4. 신청

5. GWT 및 RPC

6. 구성 요소 및 수명 주기

7. 진입점

8. HTML

9. 메인 모듈 설명자

10. 이벤트 처리기 추가

11. 서버 호출

12. CSS 스타일링

13. 결과

14. 결론

'Spring' 카테고리의 다른 글

'Spring'의 다른글

티스토리툴바

GWT 소개

1. 소개

2. GWT SDK

2.1. 자바 API

2.2. 컴파일러

3. 설정

3.1. 메이븐

4. 신청

5. GWT 및 RPC

6. 구성 요소 및 수명 주기

7. 진입점

8. HTML

9. 메인 모듈 설명자

10. 이벤트 처리기 추가

11. 서버 호출

12. CSS 스타일링

13. 결과

14. 결론

'Spring' 카테고리의 다른 글

'Spring'의 다른글

관련글

티스토리툴바