GWT 및 Connectr 소개

  • View
    123

  • Download
    0

Embed Size (px)

DESCRIPTION

Uploaded from Google Docs

Transcript

BUILDING THE CONNECTR USER INTERFACE WITH GWT

AJAX

GWT

AJAX? AJAX GWT

Connectr

Uibinder ResourceBundle RPC

AJAXAsynchronous JavaScript + XML

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 .

GWTGoogle Web Toolkit

AJAX AJAX JavaScript JavaScript XSS Requests forging GWT Java JavaScript eclipse

JavaScript .

Client GWT GWT .

CSS, JavaScript

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

Remote Procedure Calls(RPC)

ClientBundle JavaScript Image, CSS . Code Splitting App . .

GWT

Connectr

RSS, A TOM, 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 buttonsDiv { float: right; margin-top: 5px; } Username: Password: Login Cancel

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

Designer

ClientBundle

ClientBundleClientBundle

ClientBundle *.client.Resources .

ClientBundle (New) > ClientBundle

ClientBundle

Bundle Add.. Add Multiple...

ClientBundle

ClientBundlepublic interface GlobalResources extends ClientBundle { public static final GlobalResources RESOURCE = GWT .create(GlobalResources.class); GlobalStyles globalStyles();

ImageResource logo_small();ImageResource logo(); ImageResource logo2();

ImageResource propertyButton();}

ClientBundlepublic interface GlobalStyles extends CssResource { String contentColumn(); String footerPanel();

String link();String boxBorder(); String alignTextRight();

String boxPadding();... ...

}

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

TextResourceinterface 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() { public void onError(ResourceException e) { ... } public void onSuccess(TextResource r) { myTextArea.setInnerText(r.getText()); } });

ImageResourceinterface 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 @sprite .logo_small { margin-left : 10px; gwt-image: logo ; position: absolute; }

RPCRemote Procedure Call