Recommanded Free YOUTUBE Lecture: <% selectedImage[1] %>

Contents

기본제공 Widget

GWT는 웹 사용자 인터페이스를 위한 몇개의 위젯을 제공한다. 이들 위젯은 Swing이나 SWT(:12)와 비슷한 프레임워크 구조를 가진다. 즉 위젯을 포함할 수 있는 위젯인 Layout위에 버튼, Box, Tree 등을 놓는 구조다.

다음은 GWT에서 제공하는 위젯들이다.

확장 Widget

GWT는 20개 정도만의 위젯을 제공하고 있는데, 웹 유저 인터페이스의 구성을 위해서는 턱없이 적은 숫자다. 그러나 다행히도 GWT는 쉽게 사용자 정의 위젯을 추가할 수 있는 방법을 제공하고 있다. 실제로 이미 많은 수의 위젯들이 공개되어 있다. 공개된 위젯 중 일부를 소개한다.

Widget Description Library / Homepage License
Login Panel A widgets that provides controls relevant to a login prompt GWT-Stuff Apache License
Rich Text Area Another WYSIWYG HTML Editor with font, color, link ... features GWT Widgets LGPL
Rich Text Editor A WYSIWYG HTML Editor. GWT Addons LGPL or Apache 2.0
HTML (Rich Text) Editor WYSIWYG HTML (Rich Text) Editor Widget HTML (Rich Text) Editor Widget Apache 2.0
Image Button A Image Button with Tooltip. CSS L&F for default, roll over and pressed. GWT Addons LGPL or Apache 2.0
Tooltip A real tooltip that show after a second on the mouse position. GWT Addons LGPL or Apache 2.0
FileUploadField A file upload form field widget. GWT Widget Library LGPL
FormPanel An HTML form widget. GWT Widget Library LGPL
ImageButton Use an image as a button. GWT Widget Library LGPL
OptionList A ListBox extension. GWT Widget Library LGPL
PNGImage Image widget that overcomes PNG browser incompatabilities. GWT Widget Library LGPL
RoundedPanel Rounded corners like GMail gwt.bouwkamp.com Apache License 2.0
Canvas Widget A Graphics Widget GWT Component Library LGPL 2.1
Round Corners Border with round corners GWT Component Library LGPL 2.1
Simple Calendar A embedded calendar GWT Component Library LGPL 2.1
RateIt Control RateIt widget similar to netflix.com, and amazon.com star ratings. You can use mouse and keyboard (left, right, and number keys) to select rating. GWT Component Library LGPL 2.1
Script.aculo.us Effects Integration This component allows you to use Script.aculo.us effects from GWT. GWT Component Library LGPL 2.1
Auto-Completion Textbox A textbox that has a list of string values that will be automatic completed on edit the text. GWT Component Library LGPL 2.1
Simple XML Parser Allows to parse XML with GWT GWT Component Library LGPL 2.1
Hyperlink with Image Hyperlink which allows you to specify Image object as its content. Go ahead, implement your favority rollover effects with it. GWT Component Library LGPL 2.1
Tooltip Listener Allows you to add tooltips (small help messages) to any component that support SourcesMouseEvents interface. GWT Component Library LGPL 2.1
Simple Date Picker A text box and a popup calendar. Parvinder Thapar LGPL 2.1
Sortable Table Widget Client-side sorting of the Table Parvinder Thapar LGPL 2.1
GoogleMaps A widgets that support the Google Map API GWT - Custom Components Apache License
FlashPlayer A widget to play flash movies. GWanTed LGPL
LegendPanel A widget to layout widgets in a legend way. GWanTed LGPL
HttpRequestExt To do sync HTTPRequest downloads. GWanTed LGPL
Navigator A simple wrapper for the navigator DOM object. GWanTed LGPL
ExternalHyperlink Allow you to use external hyperlinks. GWanTed LGPL
AbstractJavascriptClass This class is a base class that let wrap a javascript object in an external javascript file in a GWT class. GWanTed LGPL
ToolItem An ImageButton widget alternative. GWanTed LGPL
RowPanel Think VerticalPanel with more layout flexibilty. GWT Tk Apache 2.0
ColumnPanel Think HorizontalPanel with more layout flexibilty. GWT Tk Apache 2.0
DropDownPanel An expandable panel with a header like "Labels" in Gmail. GWT Tk Apache 2.0
SimpleHyperLink A simple anchor widget. No DIV messing up text flow, no history tokens added to the location field. GWT Tk Apache 2.0
GlassPanel A stylable panel which preventa interaction with the entire document ("light box" effect). GWT Tk Apache 2.0
ModalDialog A modal dialog featuring focus containment, "light box" effect, automatic centering and more. GWT Tk Apache 2.0
AlertDialog A modal dialog tailored to conveniently displaying alert messages. GWT Tk Apache 2.0


외부 Wiget Library 테스트

외부 위젯라이브러리를 어떻게 추가시킬 수 있는지 확인하기 위해서, gwt-html-editor의 RitchEditor를 받아서 테스트해보기로 했다.

우선 위 사이트에 가서 editor의 최신버전을 얻어오도록 하자. 현재 (2006-12-23)최신버젼은 editor-0.1.1-preview.jar 이다. 얻어온 jar 파일은 적당한 클래스 경로에 두도록 한다.

다음과 같은 방법으로 프로젝트를 생성하자. 프로젝트의 이름은 RitchTest로 했다.
# ./projectCreator -eclipse RitchTest
# ./applicationCreator -eclipse RitchTest com.joinc.client.RitchTest

이제 eclipse(:12)를 실행시킨다음 RitchTest를 import해와서, RitchTest를 다음과 같이 수정한다.
package com.joinc.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.LoadListener;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.jpavel.gwt.wysiwyg.client.Editor;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class RitchTest implements EntryPoint {
	
	public void onModuleLoad() {
		buildSamplePage();
	}
	
	public void buildSamplePage() {
		final Editor editor = new Editor();
		editor.addLoadListener(new LoadListener() {
			public void onLoad(Widget sender) {
				// 적당한 코드를 입력
			}
			
			public void onError(Widget sender) {
				// 적당한 코드를 입력 
			}
		});
		editor.setWidth("100%");
		editor.setHeight("300px");
		
		editor.load();
		
		Button button = new Button("Get HTML");
		button.addClickListener(new ClickListener() {
			public void onClick(Widget sender) {
				Window.alert(editor.getHTML());
			}
		});
		
		RootPanel.get().add(editor);
	}
}

src/com/joinc/RitchTest.gwt.xml 파일을 열어서, 모듈을 추가시켜 준다.
<module>
        <!-- Specify the app entry point class.                   -->
        <entry-point class='com.joinc.client.RitchTest'/>

        <!-- Inherit the core Web Toolkit stuff.                  -->
        <inherits name='com.google.gwt.user.User'/>

        <!-- Inherit the Editor Library.                          -->
        <inherits name='com.jpavel.gwt.wysiwyg.Editor'/>
        <inherits name='com.joinc.RitchTest'/>
</module>

마지막으로 RitchTest-compile에 editor-0.1.1-preview.jar 의 경로를 추가시키도록 한다.
#!/bin/sh
APPDIR=`dirname $0`;
java  -cp "$APPDIR/src:...:/work/dir/editor-0.1.1-preview.jar" \
com.google.gwt.dev.GWTCompiler -out "$APPDIR/www" "$@" com.joinc.RitchTest;

다음은 eclipse에서 호스트모드 브라우저를 통해서 디버깅한 모습이다.
보내는 사람 Google

java-to-javascript를 이용해서 컴파일 한 후, 사이트에 올린 결과다. 테스트해보기 바란다.

맺음말

GWT가 Java기술을 사용함으로 개발자는 다음과 같은 이득을 얻을 수 있다.
  • 객체지향적인 재사용가능한 코드 생성
  • 손쉬운 배포 및 문서화
GWT를 이용하면 브라우저 호환성이 의심되는 관리하기도 까다로운 난잡한 HTML&Javascript 코드를 직접제어 하는 것보다, 깔끔한 환경을 제공해 줌을 알 수 있을 것이다. 웹응용 개발도, 윈도우응용 처럼 각각의 컴포넌트를 가져다 붙이는 식의 개발이 가능할 때가 도래하지 않을까 싶다.

이미 GWT를 이용한 비쥬얼한 개발이 가능한 eclipse 플러그인도 제공되고 있다. 아직 완성도가 떨어지긴 하지만 관심이 있다면 아래의 사이트를 방문해 보기 바란다.

  • http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/gwt/rich_editing_experience.html

할일

  • 사용자 정의 위젯의 생성및 등록
  • GWT 기본제공 위젯을 사용한 복잡한 UI구성

A B C

참고문헌

문서가 도움이 되었나요?