D-Blog

Gwt-Ext “Login” example

Jun 29th, 2008 by Dariusz

After my post of how to setup a proper Gwt-Ext application in Eclipse, I would like to show how to develop a simple “Login” application using CypalStudio plugin.

Instead of showing a basic HelloWorld, I would like to do a more realistic example. I decided to do a Login functionality, but If you are interested in a simple HelloWorld, here is good example.

Allright…

First, we click on our project with the right mouse and select New->Other->Cypal Studio->Module

Now, type in your package name and the Module name, which will be your entry point in the application.

Now Cypal plugin does everything for you and you should have something similar as this:

As you can see, a structure of your application has been changed and some other files has been created automatically.

Now, it’s time to clean it up a little bit. It’s up to you, but I prefer to have it as simple as possible.

Lets open the Login.html and copy the following html code in:

<html>
<head>
<title>Wrapper HTML for Login</title>
<script language=‘javascript’ src=‘org.mypackage.Login.nocache.js’></script>
</head>
<body>
<!– OPTIONAL: include this if you want history support –>
<iframe src="javascript:”" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
<div id="login_widget"></div>
</body>
</html>

The only thing what is needed to present the widget, you are going to develop in java, is the div tag. Of course, if you want to do it a little bit more complex, you can structure your page with more than one widget.

The first step is (almost) done. To see the result, you need to do the following. Go to Run->Open Run Dialog and then click with the right mouse on “GWT Hosted Mode Application” and then on New.

It’s required to set some Java VM Option to be able to run the application.

And underneath the Run dialog you should be able to run the app.

So far, we can’t see a lot. Now it’s time to create the widget. Therefore lets open the Login.java and write some modules.

Before we do that, we need to modify our Login.gwt.xml to be able to use the ExtJS functionlities.

<module>
<!– Inherit the core Web Toolkit stuff. –>
<inherits name=‘com.google.gwt.user.User’/>
<!– Inherit the GWTExt Toolkit library configuration. –>
<inherits name=‘com.gwtext.GwtExt’ />
<!– Specify the app entry point class. –>
<entry-point class=‘org.mypackage.client.Login’/>
<stylesheet src="js/ext/resources/css/ext-all.css" />
<script src="js/ext/adapter/ext/ext-base.js" />
<script src="js/ext/ext-all.js" />
</module>

Now, we need to copy the files mentioned above from your Gwt-Ext folder to src/org/mypackage/public so we can use them.

The following structure should be similar to yours:

Now, lets go back to the Login.java file and copy this simple example into it and you should be able to see the first output, but without any functionality yet.

package org.mypackage.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.gwtext.client.widgets.Button;
import com.gwtext.client.widgets.Panel;
import com.gwtext.client.widgets.form.FormPanel;
import com.gwtext.client.widgets.form.TextField;
public class Login implements EntryPoint {
private Panel loginPanel = new Panel();
private FormPanel formPanel = new FormPanel();
public void onModuleLoad() {
formPanel.setFrame(true);
formPanel.setTitle( "Simple Login Form" );
formPanel.setWidth(350);
formPanel.setLabelWidth(75);
TextField fName = new TextField( "Username", "userName", 230 );
fName.setAllowBlank( false );
fName.focus();
formPanel.add( fName );
TextField passWord = new TextField( "Password", "pswd", 230 );
passWord.setInputType( "password" );
formPanel.add( passWord );
Button loginButton = new Button( "Login" );
formPanel.addButton( loginButton );
loginPanel.setBorder( false );
loginPanel.setPaddings( 5 );
loginPanel.add( formPanel );
RootPanel.get("login_widget").add( loginPanel );
}
}

Run the application…

Since the Graphical User Interface is now up and running, lets implement some service into the application.

Now select “Remote Service” and click next.

Here, it’s required to choose a name for the service and define the mapping name, which will be included in our web.xml and the Login.gwt.xml automatic.

Once clicked on finish, you can see that some more classes has been created in our application.

And here are the changes made in my web.xml

<web-app id="WebApp_ID">
<display-name>MyGWTApplication</display-name>
<servlet>
<servlet-name>LoginService</servlet-name>
<servlet-class>
org.mypackage.server.LoginServiceImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>LoginService</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>

And the same changes for the Login.gwt.xml

<servlet class=‘org.mypackage.server.LoginServiceImpl’ path=‘/login’/>
</module>

Now, lets open Login.java and implement some logic in. As you can see in the code, I made some changes to have a better overview.

package org.mypackage.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 Login 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 LoginServiceAsync loginService = ( LoginServiceAsync )GWT
.create( LoginService.class );
ServiceDefTarget endpoint = ( ServiceDefTarget )loginService;
String moduleRelativeURL = GWT.getModuleBaseURL()+"login";
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;
}
}

The other classes look like that:

LoginService.java

package org.mypackage.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 LoginService extends RemoteService {
public static final String SERVICE_URI = "/login";
public static class Util {
public static LoginServiceAsync getInstance() {
LoginServiceAsync instance = (LoginServiceAsync) GWT
.create(LoginService.class);
ServiceDefTarget target = (ServiceDefTarget) instance;
target.setServiceEntryPoint(GWT.getModuleBaseURL() + SERVICE_URI);
return instance;
}
}
public boolean userIsValid( Map loginData );
}

LoginServiceAsync.java

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

LoginServiceImpl.java

package org.mypackage.server;
import java.util.Map;
import org.mypackage.client.LoginService;
import com.google.gwt.user.server.rpc.RemoteServiceServlet;
public class LoginServiceImpl extends RemoteServiceServlet implements LoginService {
// 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;
}
}

The result should look like this:

If you want to start the application without calling Login.html, just rename the application to Index.html and that’s it.

I hope this helps a little bit, how to send a request to the server and retrieve some result.

I used the following sources for this example:

Dariusz

Posted in Eclipse, Software, gwt-ext, java | 32 Comments

32 Responses to “Gwt-Ext “Login” example”

on 16 Jul 2008 at 2:09 pm1Matt

In the source code of Login.java in the function getUserData you split values on “&” and not on “&”. I guess its some problem with the blog, because the same happens in the sourcecode of LoginServiceImpl.java where you check whether userName and password is “guest”, “&” should be “&”.

Regards Matt
on 16 Jul 2008 at 4:30 pm2Dariusz

Matt, thanks a lot. You are right, of course it should be “&” and not ” & a m p ;”. I changed the source code but can’t guarantee if this will stay so. Either it’s an editor thing or the “code highlighter” plugin.

Thanks,
Dariusz
on 11 Sep 2008 at 5:18 pm3Mick

Fine
This is a very good job! thanks to you dude! \o/
on 27 Sep 2008 at 7:53 am4ryan

I publish your tutorial using netbeans. Thank you bro for your great example
on 26 Jan 2009 at 11:41 pm5Rugger

Great tutorial! Exactly what I was looking for!
on 05 Apr 2009 at 10:14 pm6Yossi

Does it support browser auto complete?
on 06 Apr 2009 at 6:56 am7Dariusz

Hmm…. good question. I would say yes. You just need to exchange the TextField with a ComboBox and it should work.
http://www.gwt-ext.com/demo/#compactComboBox
I didn’t try it out myself, but seems to work like that.
on 22 Apr 2009 at 8:50 pm8Joksa

Thank you, thank you, thank you !
on 19 May 2009 at 12:18 am9Am's

Thank you man. Very nice stuff! Thank you for your tutorial.
on 28 May 2009 at 11:29 am10Fonsini

Many many Thanks from POrtugal!
on 21 Jun 2009 at 3:31 pm11Kosmo

hi there. I’m newbie so forgive me for such questions.
Perhaps you know how to make this dialog as it would appear as a MessageBox?
I would like to centralize it and make the whole stuff behinde not accesible.
on 13 Jul 2009 at 8:30 pm12bravedave

Great tutorial! Just started with Java due to these amazing gwt and yours was the one example out of many many examples that functionally gives an example of gwt-ext.
Word, brother!
on 14 Sep 2009 at 11:29 pm13NewToGWT

Hey Pretty cool!

Now here\’s the step I\’m missing: Whether I use GWT or GWT-EXT to implement such a login page… what do I do once he\’s logged in?…

I mean… now I want to \’forward\’ the request to my actual GWT-Ext panel. Do I need to create this login panel as a complete seperate application, and if so, how do I forward the session ID to my actual application?

Of course, I could just use another panel to host my application and do show/hide, but that would mean the user downloading the full app regardless of if he\’s logged in or not (slow and security risk as you are offloading the presentation rules)?
on 15 Sep 2009 at 7:25 am14Dariusz

Hi!
It’s up to your scenario how you want to implement your login panel/form. I can not tell you what’s the best solution for it.
If you want to forward the page after a successful login, you can use JNDI. What I do is for example this:

public static native void forwardToAccountPage() /*-{ return $wnd.location = '../account'; }-*/;

To save your session id, you need to do it in your Impl implemention (e.g.LoginServiceImpl). You need to extend your Impl to ‘RemoteServiceServlet’. And then you are free to use/store a session ID like this:

HttpServletRequest request = this.getThreadLocalRequest(); HttpSession httpSession = request.getSession( true ); //.... after successful login do this where user is your object you want to store httpSession.setAttribute( "user", user );

I hope it helps a bit.
on 15 Sep 2009 at 1:08 pm15NewToGWT

Thanks, That will possibly help

I’m still trying to figure the tie-in senario to the gwt apps. e.g. I’ve got a 6 panel GWT (looking into GWT-EXT) app. I can easily make a static HTML page for the login, and use a standard servlet or JSP at the other end to recieve the request and then in the response include the HTML for my application.

That allows me quick Static/traditional JEE->gwt. I can also see how, using your example above, I could get gwt->static/traditional JEE .

The problem that I’m facing is that from my understanding to have gwt (Login) -> gwt (myApp), I would then need 2 entry points, two module.xml, and thus 2 seperate project? Since I want to create 2 GWT apps, that implies 4 projects, two of which would only handle login?

I seem to be missing an important piece of information, or have a misconception about GWT (and EXT) app segmentation…
on 15 Sep 2009 at 1:24 pm16Dariusz

Oh damn, I think I got your point! I was struggling with it as well until I finally (hopefully) got it to work as I wanted.

The problem is, that you have different panels written in different modules and now you would like to combine them, right? Well, if this is the case maybe it’s time to write about it, because it was difficult for me to understand it too. To bring you on the right path, maybe you should take a look how to inherit different modules.
on 15 Sep 2009 at 1:36 pm17NewToGWT

Thanks! I’ll definitely have a look. You’ve been a good help. I don’t feel as bad about my question as I did yesterday

Thanks Again.
on 13 Dec 2009 at 5:29 pm18Mayank

Where have we declared the list of resources (/account is protected by /www is not, for example) to be protected? The web.xml does not seem to have the restriction.

Please advise.
on 13 Dec 2009 at 5:42 pm19Dariusz

What do you mean?
If you want to implement a protection filter, then please google for authentication frameworks for Tomcat. An authentication framework in this example is not implemented.

Sorry for that…
on 16 Dec 2009 at 5:01 pm20fabtar

Quite a nice example. Gwt-ext functionalities looks great!
I’m a java and gwt newbie and I have a question/note about your example (hope I am right).
You have used a FormPanel in order to provide interoperability with already deployed php site (I suppose), but in this scenario your example lacks the submit(), making the usage of the formpanel useless.
In fact you pass all the communications thru the RPC webservice.
In this case accessing the getForm() string and splitting in order to extract user and password, introduces an overhead which could be avoided by simply using TextBox.getText() method.
Perhaps I have not got the point cause my quick-and-dirty-newbie nature but I ‘ll appreciate hints in order to understand your example deeply.
Thanks
on 16 Dec 2009 at 5:19 pm21Dariusz

Thanks fabtar!
I’m not using php at all. FormPanel here is only used to make the submit call. Of course, you don’t need to FormPanel, you can also use any of the available Panels and add your textbox and password box in there.
on 16 Dec 2009 at 5:36 pm22fabtar

Ok,
I think I have understood now. I was confused by the 83th row which stated: ” formPanel.setUrl( “save-form.php” );”
I suppose this URL is used only in case the submit() method is call which is not the case here.
Keep doing! Great Blog
on 09 Apr 2010 at 7:29 am23Ankit

Respected Sir,
I am very Happy after running my first application with the this wonderful tutorial.
Sir I want to say your thanks for this lovely tutorial.

thank you
Ankit
on 28 Apr 2010 at 8:27 am24Andrea

Why should loginService be final ?

Thank you
on 30 Apr 2010 at 11:11 am25Aditi

Hello,
I need to add images to my Application. I am very new to GWT-Ext…
I try with it in this way -
final Image image = new Image();
image.setUrl(”D:/MORIA Desktop/logo_telekom.png”);
RootPanel.get().add(image);
But i am unable to load it…Plz some9body help me……
on 30 Apr 2010 at 11:26 am26Selva

Hai, I’m getting following error while running the application.
java.lang.NoClassDefFoundError: com/google/gwt/dev/GWTShell
Caused by: java.lang.ClassNotFoundException: com.google.gwt.dev.GWTShell
at java.net.URLClassLoader$1.run(Unknown Source)
at java.security.AccessController.doPrivileged(Native Method)
at java.net.URLClassLoader.findClass(Unknown Source)
at java.lang.ClassLoader.loadClass(Unknown Source)
at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
at java.lang.ClassLoader.loadClass(Unknown Source)
at java.lang.ClassLoader.loadClassInternal(Unknown Source)
Exception in thread “main”
How to solve this issue?
Thank you.
on 10 May 2010 at 9:44 am27Dariusz

Aditi, sorry for the late response, but I’m quite busy these days.

Did you try to set the URL rather to an image inside your public folder? Let’s say you have a structure like this:

- public
|- images
|- logo_telekom.png
- client
- server

then you would point to your public/images folder:
final Image image = new Image( “images/logo_telekom.png” );

It should work. Let me know if it’s not working.
on 05 Jul 2010 at 2:28 pm28subhransu

hey,
i got a problem while linking the servlet into the implementation class. it says
com.google.gwt.user.client.rpc.StatusCodeException: Unable to find/load mapped servlet class ‘com.wisdom.test.server.LoginSericeImpl’
on 05 Jul 2010 at 2:31 pm29Dariusz

Are you running it in development mode?
Anyway, how does your web.xml look like?
on 13 Aug 2010 at 12:59 pm30rafal

Great tutorial for GXT newbies. Good Job.

Look on my tutorial obout how to change default GXT themes http://touk.pl/blog/2010/08/13/how-to-change-theme-in-ext-gwt-gxt-application/

greetings from Poland
on 25 Aug 2010 at 5:09 pm31Khchine

Great tutos .thx
but i have some problems .when i code the file login.java , i have some error in the import started by \"com.gwtext\" and tell me that \’The import com.gwtext cannot be resolved\’
thx
on 25 Aug 2010 at 5:26 pm32Dariusz

Did you import the GWT-Ext modules in your *.gwt.xml like this?

< !– Inherit the GWTExt Toolkit library configuration. –>

D.

Trackback URI | Comments RSS

Help yourself, help others!

Gwt-Ext “Login” example

32 Responses to “Gwt-Ext “Login” example”

Leave a Reply

About

Recent Posts

InfoQ

Categories

Meta

Security Code: