GWT-사용자 정의 위젯

GWT는 사용자 정의 사용자 인터페이스 요소를 만드는 세 가지 방법을 제공합니다. 따라야 할 세 가지 일반적인 전략이 있습니다-

Create a widget by extending Composite Class− 이것은 사용자 정의 위젯을 만드는 가장 일반적이고 가장 쉬운 방법입니다. 여기에서 기존 위젯을 사용하여 사용자 지정 속성이있는 복합보기를 만들 수 있습니다.
Create a widget using GWT DOM API in JAVA− 이런 방식으로 GWT 기본 위젯이 생성됩니다. 여전히 사용자 정의 위젯을 만드는 매우 복잡한 방법이므로 신중하게 사용해야합니다.
Use JavaScript and wrap it in a widget using JSNI− 이는 일반적으로 최후의 수단으로 만 수행해야합니다. 네이티브 메서드의 브라우저 간 의미를 고려하면 매우 복잡해지고 디버깅도 더 어려워집니다.

복합 클래스로 사용자 정의 위젯 만들기

이 예제는 GWT에서 사용자 정의 위젯 생성을 보여주는 간단한 단계를 안내합니다. 다음 단계에 따라 GWT에서 만든 GWT 애플리케이션을 업데이트합니다 .-기본 위젯 장-

여기에서는 사용자 정의 위젯을 빌드하는 가장 쉬운 방법 인 Composite 클래스를 확장하여 사용자 정의 위젯을 만들 것입니다.

단계	기술
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;
}

다음은 수정 된 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>
      <h1>Custom Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Java 파일의 다음 내용을 갖도록합시다 src/com.tutorialspoint/HelloWorld.java 사용자 정의 위젯 생성을 보여줍니다.

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.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

public class HelloWorld implements EntryPoint {

   /**
    * A composite of a TextBox and a CheckBox that optionally enables it.
    */
   private static class OptionalTextBox extends Composite implements
   ClickHandler {

      private TextBox textBox = new TextBox();
      private CheckBox checkBox = new CheckBox();
      private boolean enabled = true;

      public boolean isEnabled() {
         return enabled;
      }

      public void setEnabled(boolean enabled) {
         this.enabled = enabled;
      }

      /**
       * Style this widget using .optionalTextWidget CSS class.<br/>
       * Style textbox using .optionalTextBox CSS class.<br/>
       * Style checkbox using .optionalCheckBox CSS class.<br/>
       * Constructs an OptionalTextBox with the given caption 
       * on the check.
       * @param caption the caption to be displayed with the check box
       */
      public OptionalTextBox(String caption) {
         // place the check above the text box using a vertical panel.
         HorizontalPanel panel = new HorizontalPanel();
         // panel.setBorderWidth(1);
         panel.setSpacing(10);
         panel.add(checkBox);
         panel.add(textBox);

         // all composites must call initWidget() in their constructors.
         initWidget(panel);
         
         //set style name for entire widget
         setStyleName("optionalTextWidget");
         
         //set style name for text box
         textBox.setStyleName("optionalTextBox");
         
         //set style name for check box
         checkBox.setStyleName("optionalCheckBox");
         textBox.setWidth("200");
         
         // Set the check box's caption, and check it by default.
         checkBox.setText(caption);
         checkBox.setValue(enabled);
         checkBox.addClickHandler(this);
         enableTextBox(enabled,checkBox.getValue());
      }

      public void onClick(ClickEvent event) {
         if (event.getSource() == checkBox) {
            // When the check box is clicked,
            //update the text box's enabled state.
            enableTextBox(enabled,checkBox.getValue());
         }
      }

      private void enableTextBox(boolean enable,boolean isChecked){
         enable = (enable && isChecked) || (!enable && !isChecked);
         textBox.setStyleDependentName("disabled", !enable);
         textBox.setEnabled(enable);	  
      }
   }

   public void onModuleLoad() {
      // Create an optional text box and add it to the root panel.
      OptionalTextBox otb = new OptionalTextBox(
         "Want to explain the solution?");
      otb.setEnabled(true);
      RootPanel.get().add(otb);
   }    
}

모든 변경이 완료되면 GWT-Create Application 장 에서했던 것처럼 개발 모드에서 애플리케이션을 컴파일하고 실행 해 보겠습니다 . 응용 프로그램에 문제가 없으면 다음과 같은 결과가 생성됩니다.

You can notice following points

Composite 위젯을 확장하여 Custom Widget을 생성하는 것은 매우 쉽습니다.
재사용 성의 개념을 사용하여 GWT 내장 위젯, TextBox 및 CheckBox로 위젯을 만들었습니다.
확인란 상태에 따라 TextBox가 비활성화 / 활성화됩니다. 컨트롤을 활성화 / 비활성화하는 API를 제공했습니다.
문서화 된 CSS 스타일을 통해 내부 위젯 스타일을 공개했습니다.