接触GWT

入门和实践： http://www.ibm.com/developerworks/cn/opensource/os-ad-gwt/

Eclipse GWT Plugin -- Cypal
Home page: http://code.google.com/p/cypal-studio/
Guide document: http://www.cypal.in/studiodocs
Guide animation: http://www.cypal.in/Cypal_Studio_Screencast1.html


我的第一个GWT example （开发环境：Eclipse + Cypal）:
1. Create new " Dynamic Web Project". Remember that you MUST set " Configuration" as " Cypal Studio for GWT"
2. Create a GWT module: Right click "src" node, select " New -> Others -> GWT module", input package name (such as "gwt.example") and class name (such as "MyModule")
    It will generate following files and folders:
    

MyModule.gwt.xml codes:

1. <module>
2.     <!-- Inherit the core Web Toolkit stuff.                  -->
3.     <inherits name='com.google.gwt.user.User'/>
5.     <!-- Specify the app entry point class.                   -->
6.     <entry-point class='gwt.example.client.MyModule'/>
7.   
8.     <inherits name="com.google.gwt.user.theme.standard.Standard"/>      
9. </module>

MyModule.java codes:

1. public class MyModule implements EntryPoint {
2.     public void onModuleLoad() {
3.     }
4. }

3. Add following codes to onModuleLoad method:

1.         Button button =new Button("Click me!");     
2.         button.addClickListener(new ClickListener(){
3.             public void onClick(Widget arg0){
4.                 Window.alert("Hello World!");
5.             }
6.         });     
7.         RootPanel.get().add(button);

4. Run the GWT app: Right click "MyModule.gwt.xml", select "Run As -> Gwt Hosted Mode Application"

5. Add RPC function
     1) Create GWT Remote Service: Right click "src" node, select " New -> Others -> GWT Remote Service",  and then input info like following:
      

       It will generate 3 files:
       MyRpcService class in gwt.example. client package
       MyRpcServiceAsync class in gwt.example. client package
       MyRpcServiceImpl class in gwt.example. server package

      

         MyRpcService.java codes:
        

1. package gwt.example.client;
3. @RemoteServiceRelativePath("myrpc")
4. public interface MyRpcService extends RemoteService {
5.     public static class Util {
6.         public static MyRpcServiceAsync getInstance() {
7.             return GWT.create(MyRpcService.class);
8.         }
9.     }
10. }

         MyRpcServiceAsync.java codes:
 

1. package gwt.example.client;
3. public interface MyRpcServiceAsync {
4. }

                
         MyRpcServiceImpl.java codes:

1. package gwt.example.server;
2. public class MyRpcServiceImpl extends RemoteServiceServlet implements MyRpcService {
3. }

     
     另外MyModule.gwt.xml 也 自动添加了一行代码：

1. <servlet class="gwt.example.server.MyRpcServiceImpl" path="/myrpc"/></module>

     WEB-INF/web.xml也 自动生成下列代码：

1.     <servlet>
2.         <servlet-name>MyRpcService</servlet-name>
3.         <servlet-class>
4.         gwt.example.server.MyRpcServiceImpl</servlet-class>
5.     </servlet>
6.     <servlet-mapping>
7.         <servlet-name>MyRpcService</servlet-name>
8.         <url-pattern>/myrpc</url-pattern>
9.     </servlet-mapping>

  
     2)  Add a method to MyService for being called by GWT client
      * Add following line to MyService.java:

1.     public String getButtonName();

      
       When you save, the MyRpcServiceAsync.java 自动生成对应的下列代码：

1.     public void getButtonName(AsyncCallback<String> callback);

       * Add following line to MyServiceImpl.java:

1.     public String getButtonName() {
2.         return "YoYo";
3.     }

       3) Add call rpc method in the client side: 在MyModule.java的onModuleLoad method的最后添加下列代码

1.         //update button name
2.         MyRpcServiceAsync rpcService = MyRpcService.Util.getInstance();
3.         ServiceDefTarget target = (ServiceDefTarget) rpcService;
4.         String relativeUrl = GWT.getModuleBaseURL() + "myrpc";
5.         target.setServiceEntryPoint(relativeUrl);
6.         rpcService.getButtonName(new AsyncCallback(){
7.             public void onFailure(Throwable caught) {
8.                 GWT.log("Error ", caught);
9.                 caught.printStackTrace();
10.             }
12.             public void onSuccess(Object result) {
13.                 button.setText(result.toString());
14.             }
15.             
16.         });

      4) Run the GWT app again. You can see the button name is changed to "YoYo"