BUILDING THE CONNECTR USER INTERFACE WITH GWT

목차

AJAX AJAX란? 장점 단점

GWT AJAX 의 단점을 해결 GWT의 기능들

Connectr만들기 개요 Uibinder ResourceBundle RPC

Asynchronous JavaScript + XML

AJAX

AJAX 란?

대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 웹 개발 기법이다

표현 정보를 위한 HTML (또는 XHTML) 과 CSS

동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트

웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest

전통적인 웹의 구조

AJAX 의 구조

AJAX 와 전통적인 웹의 작업 패턴

브라우저

서버

브라우저

서버

사용자 요청

작업 프로세스

AJAX의 장점

페이지의 이동 없이 고속으로 화면 전환

서버 처리를 기다리지 않고 비동기 요청이 가능

수신하는 데이터량을 줄일 수 있다

클라이언트에게 처리를 위임할 수도 있다.

AJAX의 단점

AJAX를 쓸 수 없는 브라우저가 있다.

HTTP클라이언트의 기능이 한정되어 있다.

페이지 이동없는 통신으로 인한 보안상의 문제

지원하는 문자셋이 한정되어 있다.

스크립트로 작성되므로 디버깅이 어려움

요청을 남발하면 역으로 서버부하가 늘 수 있음

모든 브라우저가 지원하지 않는다

XSS(Cross Site Scripting)

웹 애플리케이션에서 많이 나타나는 취약점의 하나 웹사이트관리자가 아닌 이가 웹 페이지에 클라이언트 사이드 스크립트를 삽입하여 다른 사용자가 이를 실행하게끔 허용하는 취약점이다. 여러 사용자가 공유하여 이용하는 게시판형태의 웹 애플리케이션이 사이트 간 스크립팅 취약점을 가질 경우 특히 공격 대상이 되기 쉽다.

CSRF(Cross-site request forgery)

사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 하는 공격을 말한다. 사이트 간 스크립팅(XSS)을 이용한 공격이 사용자가 특정 웹사이트를 신용하는 점을 노린 것이라면, 사이트간 요청 위조는 특정 웹사이트가 사용자의 웹 브라우저를 신용하는 상태를 노린 것이다.

JavaScript를 배워야한다.

웹 어플리케이션은 대부분 PHP, Java, Python으로 작성되는데 Ajax는 JavaScript를 새로 배워야한다.

JavaScript는 Java와 이름만 비슷하고 나머지는 모두 다르다.

Google Web Toolkit

GWT

AJAX 의 단점을 해결

AJAX의 문제점 GWT가 해결하는법

JavaScript를 배워야 한다

JavaScript에서 메모리 누수가 발생하기 쉽다

즐겨찾기 추가하기가 힘듬

XSS와 Requests forging에 취약

디버깅하기 어려움

앱의 덩치가 커서 시작하는데 오래걸린다

JavaScript의 문법에러를 실행시에만 알수 있다.

각 브라우저 마다 조금씩 다른 CSS, JavaScript를 사용한다

그런거 없고 Java

그런거 없고 최적화

잘해줌

깔끔한 JavaScript를 생성해줌

eclipse 플러그인으로 쉽게 해결

Client에서 필요한 만큼만 분할해서 다운하기 떄문에 빠르다

자바다

GWT가 알아서 브라우저를 확인하고 알맞은 코드를 생성해서 전달한다.

는 아니고 GWT 컴파일러가 검사해줍니다

GWT 구성

GWT Java-to-JavaScript Compiler

GWT Development Mode

JRE emulation library

Java에서 일반적으로 사용되는 Java.lang 패키지의 대부분과 java.util 일부를 자바스크립트로 구현

GWT Web UI class library

Widget 등

GWT의 기능들

인터페이스 작성

Cross-browser 을 지원함.

내장된 위젯, 테이블, 패널등을 사용

Event handling

keyboard, mouse 이벤트뿐만 아니라 개수 제한 없이 타이머를 만드는 것이 가능하다.

Internationalization 국제화 다양한 언어를 지원할 수 있는 툴을 제공함.

GWT의 기능들

Accessibility 접근성 시각장애인을 위한 프로그램과 호환할 수 있는 인터

페이스 작성을 도와줌

Testing JUnit를 지원한다.

Optimization ClientBundle 에 JavaScript와 Image, CSS 파일을 넣어

효과적으로 다운로드 가능하게한다. Code Splitting은 큰 App을 작게 쪼개서 실행시간을

단축시킨다.

Remote Procedure Calls(RPC) 서버와 클라이언트간에 쉽게 통신하도록함.

GWT 위젯

Connectr 만들기

개요

친구의 연락처 정보를 저장하고 추가로 RSS, ATOM, Twitter 같은 정보를 가져온다.

로딩중에 “로딩”이라고 표시한다.

로그인/아웃 을 위한 몇 가지의 인증 방법을 제공한다.

1 에서 정한 정보를 실시간으로 가져온다.

이후 몇 챕터는 친구의 정보를 추가/수정 할 것이고 그 후에 기능을 추가 할 것임.

디자인

UiBinder

GWT에서 사용하는 UI를 XML 형식을 이용해서 정의함.

CSS 를 추가하는데 HTML 을 이용하듯이 할 수 있음.

UI와 Java 코드를 분할

디자이너와 프로그래머가 따로 작업 할 수 있게 해줌.

순수 Java 로 작성

public class LoginWidget extends Composite { Button login = new Button("Login"); Button cancel = new Button("Cancel"); public LoginWidget() { final DialogBox dialogBox = new DialogBox(); dialogBox.setText("Please login"); initWidget(dialogBox); VerticalPanel container = new VerticalPanel(); container.add(new Label("Username:")); container.add(new TextBox()); container.add(new Label("Password:")); container.add(new PasswordTextBox()); HorizontalPanel Buttons = new HorizontalPanel(); Buttons.add(login); Buttons.add(cancel); container.add(Buttons); // add user cl ick handler login.addClickHandler(new ClickHandler() { @Override public void onClick(ClickEvent event) { Window.alert("You are logged in!"); } }); dialogBox.setWidget(container); } }

UiBinder - Design

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style> buttonsDiv { float: right; margin-top: 5px; } </ui:style> <g:DialogBox text="Please login"> <g:HTMLPanel> <g:Label>Username:</g:Label> <g:TextBox></g:TextBox> <g:Label>Password:</g:Label> <g:PasswordTextBox></g:PasswordTextBox> <g:HTMLPanel styleName='buttonsDiv'> <g:Button ui:field="loginButton">Login</g:Button> <g:Button ui:field="button">Cancel</g:Button> </g:HTMLPanel> </g:HTMLPanel> </g:DialogBox> </ui:UiBinder>

UiBinder - EventHandle

public class LoginWidget2 extends Composite { private static LoginWidget2UBUiBinder uiBinder = GWT .create(LoginWidget2UBUiBinder.class); interface LoginWidget2UBUiBinder extends UiBinder<Widget, LoginWidget2> { } public LoginWidget2() { initWidget(uiBinder.createAndBindUi(this)); } @UiHandler("loginButton") void onLoginButtonClick(ClickEvent event) { Window.alert("You are logged in!"); } }

Designer

ClientBundle

요청

응답 요청

응답

요청

응답

요청

응답

기존방식

ClientBundle

요청

응답

ClientBundle 을 사용

ClientBundle

항상 *.client.Resources 페키지여야 한다.

ClientBundle

새로 작성(New) > ClientBundle

ClientBundle

Bundle에 포함시킬 파일을 선택 Add.. 한개씩 Add Multiple... 여러개

ClientBundle

ClientBundle

public interface GlobalResources extends ClientBundle { public static final GlobalResources RESOURCE = GWT .create(GlobalResources.class); GlobalStyles globalStyles(); ImageResource logo_small(); ImageResource logo(); ImageResource logo2(); ImageResource propertyButton(); }

ClientBundle

public interface GlobalStyles extends CssResource { String contentColumn(); String footerPanel(); String link(); String boxBorder(); String alignTextRight(); String boxPadding(); ... ... }

DataResource

interface Resources extends ClientBundle { Resources INSTANCE = GWT.create(Resources.class); @Source("mycursor.cur") DataResource customCursor(); } // Elsewhere someDiv.getStyle().setProperty("cursor", "url(" + Resources.INSTANCE.customCursor().getUrl() + ")");

TextResource

interface Resources extends ClientBundle { Resources INSTANCE = GWT.create(Resources.class); @Source("a.txt") TextResource synchronous(); @Source("b.txt") ExternalTextResource asynchronous(); } // Using a TextResource myTextArea.setInnerText(Resources.INSTANCE.synchronous().getText()); // Using an ExternalTextResource Resources.INSTANCE.asynchronous().getText(new ResourceCallback<TextResource>() { public void onError(ResourceException e) { ... } public void onSuccess(TextResource r) { myTextArea.setInnerText(r.getText()); } });

ImageResource

interface Resources extends ClientBundle { @Source("logo.png") ImageResource logo(); @Source("arrow.png") @ImageOptions(flipRtl = true) ImageResource pointer(); } Resources resources = GWT.create(Resources.class); Image img = new Image(resources.logo());

UiBinder에서 ClientBundle

<ui :style src="Resources/GlobalStyles.css" /> <ui : image field= ‘logo’ src= ‘Resources/logo_small.png’/> <ui :style> @sprite .logo_small { margin-left : 10px; gwt-image: ‘logo’ ; position: absolute; } … </ui :style> <div class= ‘{style. logo_small}’ />

Remote Procedure Call

RPC

질문 및 토론