GWT Widget 소개 및 테스트

#title GWT Widget 소개 및 테스트
[[TableOfContents]]
[[tag(google,GWT,eclipse)]]
=== 기본제공 Widget ===
GWT는 '''웹 사용자 인터페이스'''를 위한 몇개의 위젯을 제공한다. 이들 위젯은 Swing이나 SWT(:12)와 비슷한 프레임워크 구조를 가진다. 즉 위젯을 포함할 수 있는 위젯인 Layout위에 버튼, Box, Tree 등을 놓는 구조다.
다음은 GWT에서 제공하는 위젯들이다.
{{{#!html

Button	RadioButton
CheckBox	TextBox
PasswordTextBox	TextArea
Hyperlink	ListBox
MenuBar	Tree
Table	TabBar
DialogBox	PopupPanel
StackPanel	HorizontalPanel
VerticalPanel	FlowPanel
DockPanel	TabPanel

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

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 테스트 ===
외부 위젯라이브러리를 어떻게 추가시킬 수 있는지 확인하기 위해서, [http://code.google.com/p/gwt-html-editor gwt-html-editor]의 RitchEditor를 받아서 테스트해보기로 했다.
우선 위 사이트에 가서 '''editor'''의 최신버전을 얻어오도록 하자. 현재 (2006-12-23)최신버젼은 editor-0.1.1-preview.jar 이다. 얻어온 jar 파일은 적당한 클래스 경로에 두도록 한다.
다음과 같은 방법으로 프로젝트를 생성하자. 프로젝트의 이름은 '''RitchTest'''로 했다.
{{{#!plain
# ./projectCreator -eclipse RitchTest
# ./applicationCreator -eclipse RitchTest com.joinc.client.RitchTest
}}}
이제 eclipse(:12)를 실행시킨다음 RitchTest를 import해와서, RitchTest를 다음과 같이 수정한다.
{{{#!plain
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 onModuleLoad().
*/
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 파일을 열어서, 모듈을 추가시켜 준다.
{{{#!plain









}}}
마지막으로 '''RitchTest-compile'''에 editor-0.1.1-preview.jar 의 경로를 추가시키도록 한다.
{{{#!plain
#!/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에서 호스트모드 브라우저를 통해서 디버깅한 모습이다.
{{{#!html

보내는 사람 Google

}}}
'''java-to-javascript'''를 이용해서 컴파일 한 후, 사이트에 올린 결과다. [http://www.joinc.co.kr/GWT/RitchTest/RitchTest.html 테스트]해보기 바란다.
=== 맺음말 ===
GWT가 Java기술을 사용함으로 개발자는 다음과 같은 이득을 얻을 수 있다.
* 객체지향적인 재사용가능한 코드 생성
* 손쉬운 배포 및 문서화
GWT를 이용하면 브라우저 호환성이 의심되는 관리하기도 까다로운 난잡한 HTML&Javascript 코드를 직접제어 하는 것보다, 깔끔한 환경을 제공해 줌을 알 수 있을 것이다. 웹응용 개발도, 윈도우응용 처럼 각각의 컴포넌트를 가져다 붙이는 식의 개발이 가능할 때가 도래하지 않을까 싶다.
이미 GWT를 이용한 비쥬얼한 개발이 가능한 eclipse 플러그인도 제공되고 있다. 아직 완성도가 떨어지긴 하지만 관심이 있다면 아래의 사이트를 방문해 보기 바란다.
* http://download.instantiations.com/DesignerDoc/integration/latest/docs/html/gwt/rich_editing_experience.html
=== 할일 ===
* 사용자 정의 위젯의 생성및 등록
* GWT 기본제공 위젯을 사용한 복잡한 UI구성
=== 참고문헌 ===
* [http://google.wikia.com/wiki/Google_Web_Toolkit wikipedia Google Web Toolkit]
* [http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.UserInterface.WidgetGallery.html code.google.com Gwt Widget 갤러리]
'''문서가 도움이 되었나요?'''
[[Vote(아주 많이 3, 많이 1, 그럭저럭 1, 별로 0, 전혀 1)]]
[[tag(google,GWT,eclipse)]]

Button	RadioButton
	<img class='gallery' src='http://code.google.com/webtoolkit/documentation/RadioButton.png'"