Learn and Earn: GWT 1.5.2 + GWT-EXT 2.0.5 + extjs 2.0.2 + Netbeans 6.1

This tutorial is similar with what Dariusz Borowski create login script but i use netbeans 6.1.
First, you need to prepare all stuff

1. JDK 6 update 5 http://java.sun.com/
2. netbeans 6.1 http://www.netbeans.org/ . i use netbeans DVD that include point 1 and 2
3. gwt4nb https://gwt4nb.dev.java.net/
4. GWT-ext 2.05 or later http://code.google.com/p/gwt-ext/
5. EXTJS 2.02 http://yogurtearl.com/ext-2.0.2.zip

after your ammo is ready then
1. install JDK... very clear path

2. install netbeans... very clear path

3. install gwt4nb
you can follow this step https://gwt4nb.dev.java.net/manual/quickstart.html

4. install GWT-ext
just extract to d:\ . it's my way you can extract anywhere you like.

Start with

creating new project ->Web -> Web Application

Click Next, i put on d:\myprojects then put "gwtext"

click Next,

Click Next,

Pick Google Web Toolkit as frame work then point GWT Installation to your GWT installation directory. i put GWT module's name as default.

then you can see the project is ready. You need to create GWT RPC service. by right click on "Source Packages" -> New -> GWT RPC Service....

Then Click Next,

After you have done, now time to add GWT-ext library by right click on project "gwtext"
then choose properties. Window will show like picture bellow. Then choose Libraries, add Jar
then point to file gwtext.jar

Now, it's happy codding...

open welcomeGWT.html under Web Pages.

change into this code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="'gwt:module'" content="'org.yournamehere.Main=" main="">
<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css">
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script language="javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
<title>Main</title>
<div id="login_widget">
</body>
</html>

Next is copying extjs library. Create directory js under Web Pages then put extjs into it.
Please take look picture bellow.

now move to Main.gwt.xml you can find under org.yournamehere packages

add this text
<inherits name="com.gwtext.GwtExt" />

after this line
<inherits name="com.google.gwt.user.User"/>

change your GWTservice.java under client package


package org.yournamehere.client;
import java.util.Map;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
public interface GWTService extends RemoteService  {
public static final String SERVICE_URI = "/gwtservice";
   public static class Util {
      public static GWTServiceAsync getInstance() {
         GWTServiceAsync instance = (GWTServiceAsync) GWT.create(GWTService.class);
         ServiceDefTarget target = (ServiceDefTarget) instance;
         target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);
         return instance;
      }
   }
   public boolean userIsValid( Map loginData );
}

GWTserviceAsync


package org.yournamehere.client;
import java.util.Map;
import com.google.gwt.user.client.rpc.AsyncCallback;
public interface GWTServiceAsync {
   public void userIsValid( Map loginData, AsyncCallback callback );
}

MainEntryPoint.java


package org.yournamehere.client;

import java.util.HashMap;
import java.util.Map;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.core.EventObject;
import com.gwtext.client.widgets.Button;
import com.gwtext.client.widgets.MessageBox;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.event.ButtonListenerAdapter;
import com.gwtext.client.widgets.form.Form;
import com.gwtext.client.widgets.form.FormPanel;
import com.gwtext.client.widgets.form.TextField;


public class MainEntryPoint implements EntryPoint {
private TextField fName = null;
   private TextField passWord = null;
   private Button loginButton = null;
   private Panel loginPanel = new Panel();
   private FormPanel formPanel = new FormPanel();
   public void onModuleLoad() {
      // call the async login service
      final GWTServiceAsync loginService = ( GWTServiceAsync )GWT
                              .create( GWTService.class );
      ServiceDefTarget endpoint = ( ServiceDefTarget )loginService;
      String moduleRelativeURL = GWT.getModuleBaseURL()+"gwtservice";
      endpoint.setServiceEntryPoint( moduleRelativeURL );
      this.setLoginPanel();
      final AsyncCallback callback = new AsyncCallback()
      {
         public void onSuccess( Object result ) {
            // take the result coming from the server
            boolean ok = Boolean.valueOf( result.toString() ).booleanValue();
            if( ok )
            {
               MessageBox.alert( "Success", "Successfully logged in!");
            }
            else
            {
               MessageBox.alert( "Invalid", "Wrong username or password");
            }
         }

         public void onFailure( Throwable caught ) {
            MessageBox.alert( "Error", "Error while logging in" );
         }
      };

      loginButton = new Button( "Login" );
      loginButton.addListener( new ButtonListenerAdapter() {
         public void onClick( Button button, EventObject e ) {
            Map loginData = getUserData( formPanel.getForm() );
            loginService.userIsValid( loginData, callback );
         }
      });
      formPanel.addButton( loginButton );
      loginPanel.setBorder( false );
      loginPanel.setPaddings( 5 );
      loginPanel.add( formPanel );
      RootPanel.get("login_widget").add( loginPanel );
   }
   // setup login panel
   private void setLoginPanel()
   {
      formPanel.setFrame(true);
      formPanel.setTitle( "Simple Login Form" );
      formPanel.setWidth(350);
      formPanel.setLabelWidth(75);
      formPanel.setUrl( "save-form.php" );
      fName = new TextField( "Username", "userName", 230 );
      fName.setAllowBlank( false );
      fName.focus();
      formPanel.add( fName ); 
      passWord = new TextField( "Password", "pswd", 230 );
      passWord.setInputType( "password" );
      formPanel.add( passWord );
   }
  // prepare data for sending to the server
   private Map getUserData( Form form )
   {
      String formValues = form.getValues();
      Map loginData = new HashMap();
      String[] nameValuePairs = formValues.split( "&" );
      for (int i = 0; i < nameValuePairs.length; i++) {
        String[] oneItem = nameValuePairs[i].split( "=" );
         loginData.put( oneItem[0], oneItem[1] );

      }
      return loginData;
   }
}

GWTServiceImpl.java


package org.yournamehere.server;
import java.util.Map;
import org.yournamehere.client.GWTService;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;

public class GWTServiceImpl extends RemoteServiceServlet implements GWTService {
// Here it should be something more useful e.g. sending
// a request to LDAP server
   public boolean userIsValid( Map loginData )
   {
      boolean accepted = false;
      String name = loginData.get( "userName" ).toString();
      String pswd = loginData.get( "pswd" ).toString();
      if( name.equals( "guest" ) && pswd.equals( "guest" ) )
      {
         accepted = true;
      }
      return accepted;
   }
}

now try to clean and build then run.....

try using username guest and password guest

you will get this picture

Problem found on netbeans 6.1

after you install please update plugins especially plugin with category "base".

then when you try to build using default configuration error with "Exception in thread "main" java.lang.OutOfMemoryError: Java heap space"

you can fix temporary by add
this text
<jvmarg value="-Xmx512m" />

after
<arg value="${gwt.module}"/>

inside build-gwt.xml inside nbproject directory

or you can download org-netbeans-modulesgwt4nb modules to replace your current gwt4nb inside .netbeans/6.1/modules/

Learn and Earn

Minggu, 21 September 2008

GWT 1.5.2 + GWT-EXT 2.0.5 + extjs 2.0.2 + Netbeans 6.1

0 Komentar:

Mengenai Saya

Postingan Sebelumnya