Wednesday, March 17, 2010
Google Web Toolkit



Wednesday, March 17, 2010
Google Web Toolkit
                                   GWT




Wednesday, March 17, 2010
Úvod




Wednesday, March 17, 2010
Úvod
                   • GWT je javascriptový framework




Wednesday, March 17, 2010
Úvod
                   • GWT je javascriptový framework
                   • Vývoj v JAVE (kompilátor preloží do JS)




...
Úvod
                   • GWT je javascriptový framework
                   • Vývoj v JAVE (kompilátor preloží do JS)
    ...
Úvod
                   • GWT je javascriptový framework
                   • Vývoj v JAVE (kompilátor preloží do JS)
    ...
Úvod
                   • GWT je javascriptový framework
                   • Vývoj v JAVE (kompilátor preloží do JS)
    ...
Úvod
                   • GWT je javascriptový framework
                   • Vývoj v JAVE (kompilátor preloží do JS)
    ...
Úvod




Wednesday, March 17, 2010
Úvod

                            • debug kódu v prehliadači




Wednesday, March 17, 2010
Úvod

                            • debug kódu v prehliadači
                            • kompatibilita



Wednesday, Mar...
Úvod

                            • debug kódu v prehliadači
                            • kompatibilita
                 ...
Hello world!
                        public class HelloApp implements EntryPoint {
                                public ...
Wednesday, March 17, 2010
Widgets
Wednesday, March 17, 2010
Panels
Wednesday, March 17, 2010
Project Layout
                   •        module base

                   •        .client - kód ktorý sa
               ...
Module
                   • XML súbor MyApp.gwt.xml
                   • source
                   • super source
        ...
Module XML
               <module>
                 <inherits name="com.google.gwt.user.User" />
                 <inherit...
Module - source
                   • <source src=”client” />
                   • com.app.Module.gwt.xml
                 ...
Module - super-source

                   • <super-source src=”jre” />
                   • com.app.Module.gwt.xml
       ...
Module - deferred
                   <!-- Fall through to this rule is the browser isn't IE or Mozilla -->
               ...
Module - deferred
                        public class HelloApp implements EntryPoint {
                                pu...
Index.html
               <html>
                 <head>
                    <meta http-equiv="content-type" content="text...
Hello world!
                        public class HelloApp implements EntryPoint {
                                public ...
Index.html
                   <body>
                     <h1>GWT content</h1>
                        <div id=”gwt-main-c...
Debug




Wednesday, March 17, 2010
Request Response




Wednesday, March 17, 2010
AJAX




                   •        AJAX (Asynchronous JavaScript and XML) mení obsah
                            stránky...
AJAX v podani GWT




Wednesday, March 17, 2010
AJAX v podani GWT
               / some code flow
                /

               / GWT.create(YourService.class);
      ...
Client Bundles

                   • obrázky - multi-obrázok (jeden request)
                   • minimalizuje chyby medzi...
Client Bundles
               <inherits name="com.google.gwt.resources.Resources" />

               public interface MyRe...
Client Bundles
               / Inject the contents of the CSS file
                /
               MyResources.INSTANCE.c...
Client Bundles
               @Source("logo.png")
               ImageResource logo();

               @Source("arrow.png"...
Client Bundles
               / Using a TextResource
                /
               myTextArea.setInnerText(Resources.IN...
Vlastne komponenty

                   • extends Widget
                    • setElement()
                   • extends Co...
JSNI

                   • JavaScript Native Interface
                   • ľahko kombinovateľný JavaScript kód do
       ...
JSNI Syntax

                   • /*-{ JavaScript code here }-*/;
                   • native void nativeJsCall()/*-{alert...
JSNI - JS call do GWT

                   • [instance-expr.]@class-name::method-name
                            (param-si...
JSNI - JS call do GWT
               [instance-expr.]@class-name::method-name(param-signature)(arguments)
               /...
JSNI - JS call do GWT
                Type Signature   Java Type   long f (int n, String s, int[] arr);
                  ...
JavaScript overlay types

                   • JS objekt ako Java objekt
                   • protected konštruktor - bez ...
JavaScript overlay types
               var jsonData = [
                 { "FirstName" :   "Jimmy", "LastName" : "Webber"...
JavaScript overlay types
               class Customer extends JavaScriptObject {
                 / Overlay types always ...
JavaScript overlay types
               class MyModuleEntryPoint implements EntryPoint {
                 public void onMo...
JavaScript overlay types
               function $onModuleLoad(){
                 var cs, i, n;
                 cs = $wn...
Wednesday, March 17, 2010
Wednesday, March 17, 2010
Dovidenia
Wednesday, March 17, 2010
Upcoming SlideShare
Loading in …5
×

Základy GWT

4,995 views
4,924 views

Published on

Přednáška Matěje Zachara na téma GWT

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,995
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Základy GWT

  1. 1. Wednesday, March 17, 2010
  2. 2. Google Web Toolkit Wednesday, March 17, 2010
  3. 3. Google Web Toolkit GWT Wednesday, March 17, 2010
  4. 4. Úvod Wednesday, March 17, 2010
  5. 5. Úvod • GWT je javascriptový framework Wednesday, March 17, 2010
  6. 6. Úvod • GWT je javascriptový framework • Vývoj v JAVE (kompilátor preloží do JS) Wednesday, March 17, 2010
  7. 7. Úvod • GWT je javascriptový framework • Vývoj v JAVE (kompilátor preloží do JS) • silné IDE - refaktor, code completion Wednesday, March 17, 2010
  8. 8. Úvod • GWT je javascriptový framework • Vývoj v JAVE (kompilátor preloží do JS) • silné IDE - refaktor, code completion • unit testovanie, moznosť TDD Wednesday, March 17, 2010
  9. 9. Úvod • GWT je javascriptový framework • Vývoj v JAVE (kompilátor preloží do JS) • silné IDE - refaktor, code completion • unit testovanie, moznosť TDD • integrácia s backendami (Spring, Hibernate, JSF a ďalšie) Wednesday, March 17, 2010
  10. 10. Úvod • GWT je javascriptový framework • Vývoj v JAVE (kompilátor preloží do JS) • silné IDE - refaktor, code completion • unit testovanie, moznosť TDD • integrácia s backendami (Spring, Hibernate, JSF a ďalšie) Wednesday, March 17, 2010
  11. 11. Úvod Wednesday, March 17, 2010
  12. 12. Úvod • debug kódu v prehliadači Wednesday, March 17, 2010
  13. 13. Úvod • debug kódu v prehliadači • kompatibilita Wednesday, March 17, 2010
  14. 14. Úvod • debug kódu v prehliadači • kompatibilita • IE 6+, FF 1.x+, Opera 8.5+, Safari 2.0.x Wednesday, March 17, 2010
  15. 15. Hello world! public class HelloApp implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickListener() { public void onClick(Widget sender) { Window.alert("Hello world!"); } } RootPanel.get().add(b); } } Wednesday, March 17, 2010
  16. 16. Wednesday, March 17, 2010
  17. 17. Widgets Wednesday, March 17, 2010
  18. 18. Panels Wednesday, March 17, 2010
  19. 19. Project Layout • module base • .client - kód ktorý sa kompiluje do JS • .server - java kód ktorý nebude kompilovaný do JS (ale bude pristupný iba na serveri) • .public - resources Wednesday, March 17, 2010
  20. 20. Module • XML súbor MyApp.gwt.xml • source • super source • deferred binding • inherited modules • entry point Wednesday, March 17, 2010
  21. 21. Module XML <module> <inherits name="com.google.gwt.user.User" /> <inherits name="com.google.gwt.user.theme.standard.Standard" /> <entry-point class="com.your.application.client.HelloApp" /> <script src=”someScript_inside_PublicFolder.js” /> <stylesheet src=”publicFolderRelativeURL_OR_HttpFullPath.css”/> <source path=”shared” /> <super-source path=”jre” /> <module> Wednesday, March 17, 2010
  22. 22. Module - source • <source src=”client” /> • com.app.Module.gwt.xml • com.app.client.* - kód ktorý sa bude kompilovať • com.app.other* alebo com.other.*- na tento kód gwt neuvidí a nebude sa kompilovať do JS Wednesday, March 17, 2010
  23. 23. Module - super-source • <super-source src=”jre” /> • com.app.Module.gwt.xml • com.app.jre.java.util.UUID.java - kompilátor to uvidí ako java.util.UUID.java Wednesday, March 17, 2010
  24. 24. Module - deferred <!-- Fall through to this rule is the browser isn't IE or Mozilla -->   <replace-with class="com.google.gwt.user.client.ui.impl.PopupImpl">     <when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl"/>   </replace-with>   <!-- Mozilla needs a different implementation due to issue #410 -->   <replace-with class="com.google.gwt.user.client.ui.impl.PopupImplMozilla">     <when-type-is class="com.google.gwt.user.client.ui.impl.PopupImpl" />     <any>       <when-property-is name="user.agent" value="gecko"/>       <when-property-is name="user.agent" value="gecko1_8" />     </any>   </replace-with> Wednesday, March 17, 2010
  25. 25. Module - deferred public class HelloApp implements EntryPoint { public void onModuleLoad() { PopupImpl impl = GWT.create(PopupImpl.class); impl.callSomeMethod(); } } Wednesday, March 17, 2010
  26. 26. Index.html <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <title>Web Application Starter Project</title> <script type="text/javascript" language="javascript" src="com.your.application.client.HelloApp.nocache.js"></script> </head> <body> <h1>GWT content</h1> <div id=”gwt-main-container”></div> <div id=”gwt-sub-container”></div> </body> </html> Wednesday, March 17, 2010
  27. 27. Hello world! public class HelloApp implements EntryPoint { public void onModuleLoad() { Button b = new Button("Click me", new ClickListener() { public void onClick(Widget sender) { Window.alert("Hello world!"); } } RootPanel.get(“gwt-main-container”).add(b); } } Wednesday, March 17, 2010
  28. 28. Index.html <body> <h1>GWT content</h1> <div id=”gwt-main-container”> <button type=”button” tabindex=”0” class=”gwt-Button”>Click me</button> </div> <div id=”gwt-sub-container”></di </body> Wednesday, March 17, 2010
  29. 29. Debug Wednesday, March 17, 2010
  30. 30. Request Response Wednesday, March 17, 2010
  31. 31. AJAX • AJAX (Asynchronous JavaScript and XML) mení obsah stránky bez nutnosti znovunačítania • RIA (desktop-like Rich Internet Application) aka WEB 2.0 Wednesday, March 17, 2010
  32. 32. AJAX v podani GWT Wednesday, March 17, 2010
  33. 33. AJAX v podani GWT / some code flow / / GWT.create(YourService.class); / YourService.Util.getInstance().method(param, new AsyncCallback() { public void onFailure(Throwable e) { Window.alertError(“error occured”); } public void onSuccess(Object result) { / and more logic continues / / process the result / } }); Wednesday, March 17, 2010
  34. 34. Client Bundles • obrázky - multi-obrázok (jeden request) • minimalizuje chyby medzi filename-om a konštantou • rozširiteľný design pre nové resource typy Wednesday, March 17, 2010
  35. 35. Client Bundles <inherits name="com.google.gwt.resources.Resources" /> public interface MyResources extends ClientBundle { public static final MyResources INSTANCE = GWT.create (MyResources.class);   @Source("my.css")   public CssResource css();   @Source("config.xml")   public TextResource initialConfiguration();   @Source("manual.pdf")   public DataResource ownersManual(); Wednesday, March 17, 2010
  36. 36. Client Bundles / Inject the contents of the CSS file / MyResources.INSTANCE.css().ensureInjected(); / Display the manual file in an iframe / new Frame(MyResources.INSTANCE.ownersManual().getURL()); Wednesday, March 17, 2010
  37. 37. Client Bundles @Source("logo.png") ImageResource logo(); @Source("arrow.png") @ImageOptions(flipRtl = true) ImageResource pointer(); @Source("a.txt") TextResource synchronous(); @Source("b.txt") ExternalTextResource asynchronous(); Wednesday, March 17, 2010
  38. 38. Client Bundles / 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());  } }); Wednesday, March 17, 2010
  39. 39. Vlastne komponenty • extends Widget • setElement() • extends Composite • initWidget() • extends Button, Panel, .... Wednesday, March 17, 2010
  40. 40. JSNI • JavaScript Native Interface • ľahko kombinovateľný JavaScript kód do GWT • volanie metód z GWT v JS • volanie metód z JS v GWT Wednesday, March 17, 2010
  41. 41. JSNI Syntax • /*-{ JavaScript code here }-*/; • native void nativeJsCall()/*-{alert(“JS”);}-*/; • $wnd - pointer na window (ale preco?) Wednesday, March 17, 2010
  42. 42. JSNI - JS call do GWT • [instance-expr.]@class-name::method-name (param-signature)(arguments) • [instance-expr.]@class-name::field-name Wednesday, March 17, 2010
  43. 43. JSNI - JS call do GWT [instance-expr.]@class-name::method-name(param-signature)(arguments) / method calls / this.@com.example.client.MyClass::setStringValue(Ljava/lang/String;)(s); x.@com.example.client.MyClass::setStringValue(Ljava/lang/String;)(s); @com.example.client.MyClass::setStaticValue(Ljava/lang/String;)(s); / fields / var val = this.@com.example.client.MyClass::valueStringFiled x.@com.example.client.MyClass::valueStringField = val + " and stuff"; Wednesday, March 17, 2010
  44. 44. JSNI - JS call do GWT Type Signature Java Type long f (int n, String s, int[] arr); Z boolean = B byte (ILjava/lang/String;[I)J C char S short I int J long F float D double L class ; class [ type type[] Wednesday, March 17, 2010
  45. 45. JavaScript overlay types • JS objekt ako Java objekt • protected konštruktor - bez arg • mžnosť písť natívne aj nenatívne metódy • nesmie obsahovať fieldy Wednesday, March 17, 2010
  46. 46. JavaScript overlay types var jsonData = [   { "FirstName" : "Jimmy", "LastName" : "Webber" },   { "FirstName" : "Alan",  "LastName" : "Dayal" },   { "FirstName" : "Keanu", "LastName" : "Spoon" },   { "FirstName" : "Emily", "LastName" : "Rudnick" } ]; Wednesday, March 17, 2010
  47. 47. JavaScript overlay types class Customer extends JavaScriptObject {   / Overlay types always have protected, zero-arg ctors /   protected Customer() { }   / Typically, methods on overlay types are JSNI / public final native String getFirstName() /*-{return this.FirstName; }-*/; public final native String getLastName()  /*-{return this.LastName; }-*/; / Note, though, that methods aren't required to be JSNI / public final String getFullName() {   return getFirstName() + " " + getLastName(); } } Wednesday, March 17, 2010
  48. 48. JavaScript overlay types class MyModuleEntryPoint implements EntryPoint {   public void onModuleLoad() {     JsArray<Customer> cs = getCustomers();     for (int i = 0, n = cs.length(); i < n; ++i) {       Window.alert("Hello, " + cs.get(i).getFullName());   }  }   / Return the whole JSON array, as is /   private final native JsArray<Customer> getCustomers() /*-{     return $wnd.jsonData;   }-*/; } Wednesday, March 17, 2010
  49. 49. JavaScript overlay types function $onModuleLoad(){   var cs, i, n;   cs = $wnd.jsonData;   for (i = 0, n = cs.length; i < n; ++i) {     $wnd.alert('Hello, ' + (cs[i].FirstName + ' ' + cs[i].LastName));  } } //--------------------------------------------------------------------- function B(){var a,b,c;a=$wnd.jsonData;for(b=0,c=a.length;b<c;++b) {$wnd.alert(l+(a[b].FirstName+m+a[b].LastName))}} Wednesday, March 17, 2010
  50. 50. Wednesday, March 17, 2010
  51. 51. Wednesday, March 17, 2010
  52. 52. Dovidenia Wednesday, March 17, 2010

×