Posts Tagged gxt
ITworks Design Journal: GWT-RPC it is!
Posted by BinaryMuse in Technology on May 26th, 2009
This post is part of the “ITworks Design Journal” series.
In a prior post, I mused about the advantages and disadvantages of using GWT’s RPC implementaion for server-side communication versus something like another server-side technology with JSON. I went and found some folks more experienced with GWT than I, did some reading, talked with some fellow programmers, and generally just absorbed information.
One thing someone advised me that really stuck in my mind was the following (keep in mind I use GXT’s widget library for GWT):
With GWT you give up the flexibility and the instant “make-change-hit-refresh” development workflow of dynamic languages like PHP and JavaScript in exchange for Java’s static type checking, reliable code refactoring, mature IDE support, and end-to-end debugging. If you aren’t going to benefit from Java on the server and GWT RPC functionality then you might be better off sticking to PHP and straight Ext JS. If you are using GWT just for GXT’s sake then you should definitely consider this.
Emphasis mine.
One of the things I don’t like about creating rich web apps is figuring out how the server will talk to the client. Everything has to be serialized, one way or another, and sent to the client, where it is reassembled. JSON is a popular choice because it is a subset of JavaScript, and thus the response can be eval()’d on the client-side for quick deserialization. GWT RPC does all this for you.
So, I decided to do a bit of tweaking to find out how hard it would be to implement my existing server-side technologies in Java, using RPC for communication. It didn’t take long to get LDAP authentication working, and SQL connectivity was quite easy (though I’m looking into additional libraries now).
I really like the way RPC feels. GWT handles all the serialization for me; I just call a function, pass a callback, and I get the data I want back. It’s quite nice. After some consideration, I decided to use Java for my server-side technology and use RPC for client-server communication. This will also give me an opportunity to learn more about Java and other projects (like Spring) for it.
As a comparison, here is some pseudocode for my user authentication script, before and after.
Before (JSON)
Client side
- Get a new RequestBuilder
- Quote username, password, and domain parameters
- Add username, password, and domain parameters to the request
- Create a new callback that does the following:
- Check the status code of the response
- On "200", parse the response text:
- Check that the JSON is valid
- Retrive the keys "auth", "name", "access" in the case of a successful login
- Retrieve the keys "auth", "message" in the case of an unsuccessful login
- On other statuses or exceptions, create an "error response"
- Send the right event to the controllers responsible for handling login responses
- Send the request to the server
Server side
- Connect to LDAP source, find user, gather information, etc
- Build a set of data with this information
- Transform data into valid JSON
After (RPC)
Client side
- Create an instance of the authentication RPC class
- Create a callback that does the following:
- Set appropriate data based on the User object returned from the RPC method
- Send the right event to the controllers responsible for handling login responses
- Call the method on the RPC class and pass in my current User object, receiving a modified User object in return
Server side
- Create plumbing interfaces, classes, and methods for the remote service
- In the server-side method, connect to LDAP source, find user, gather information, etc
- Put this data into a User object the client already uderstands and return it
GWT has it’s own small set of hoops. For every service, you need (1) an interface MyService that extends RemoteService that defines your methods for your remote service, (2) an interface MyServiceAsync that has a method that takes a second parameter AsyncCallback<MyReturnType> for the actual RPC call itself, and (3) MyServiceImpl, which is the actual server-side implementation of your service. However, the hoops really are pretty small. Here are examples of my code:
AuthenticationService.java
@RemoteServiceRelativePath("authenticateUser")
public interface AuthenticationService extends RemoteService {
User authenticateUser(User user);
}
AuthenticationServiceAsync.java
public interface AuthenticationServiceAsync {
void authenticateUser(User user, AsyncCallback<User> callback);
}
AuthenticationServiceImpl.java
public class AuthenticationServiceImpl extends RemoteServiceServlet implements AuthenticationService
{
@Override
public User authenticateUser(User user)
{
// Actual implementation here
}
}
When you use GWT RPC, your server-side code is Java–so you also get (very large) debugging benefits. For example, I use Eclipse as my IDE of choice and I debug my code using GWT’s HostedMode (which runs an internal Jetty server to serve up your server-side Java). I can add breakpoints at any point in my client or server-code and debug it right from the IDE (this was actually a huge help when learning to connect to LDAP from Java).
I’m excited about learning more about Java and frameworks like Spring (which I think I will use for my database connectivity). More to come later!
ITworks Design Journal: GWT RPC vs JSON
Posted by BinaryMuse in Technology on May 15th, 2009
This post is part of the “ITworks Design Journal” series.
Currently, ITworks uses JSON generated via PHP for client-server communication. This decision was made for several reasons:
- I am not extremely familiar with Java servlets or serving them (ie, Tomcat, etc)
- I am not familiar with accessing SQL databases from Java code
- I am experienced in PHP and quickly wrote code to convert SQL result sets into JSON responses
- I already had code to authenticate via LDAP written in PHP that could be reused for this application
- The university already has servers set up to serve PHP scripts
However, after reading more about GWT RPC and how it works, I decided to try my hand at setting up my first Tomcat instance. When the university’s web developer asked for a new Apache server, I figured it was an opportune time.
So, after a lot of experimentation and a lot of reading documentation, I installed my first Tomcat server, and even got the GWT "Hello World" demo app (the one that gets created when you use webAppCreator) to run by using mod_proxy and ProxyPass (I’m still having issues getting mod_jk to do what I want it to, but I think I’m close). So, now using GWT RPC is a real possibility.
GWT’s RPC sheme is very nice; you can call server-side methods, and your input parameters and the server’s return are all automatically serialized and sent acorss the wire–you don’t have to worry about it at all. This is certainly a very nice feature. I also feel confident that I can get LDAP authentication and SQL connectivity down fairly quickly.
The one downside is connection other non-GWT applications to the server-side code. If I want, say, an iPhone app, or a desktop widget, to be able to connect to the server to retrieve information I have to either (1) figure out how GWT RPC sends and receives information, or (2) code the server-side logic again in another language.
It’s still up in the air for me. Thoughts?
ITworks Design Journal: GWT 1.6 and GXT 2.0
Posted by BinaryMuse in Technology on April 23rd, 2009
This post is part of the “ITworks Design Journal” series.
ExtJS has been working on version 2.x of GXT, built upon GWT version 1.6. Recently, ExtJS released the milestone 1 "release" of GXT, and I decided to upgrade and see what all the fuss was about.
Before I could test anything, some changes needed to be made to my environent. GWTShell has been deprecated in leu of the new hotness, HostedMode. The "public" directory, used for storing static content such as images and stylesheets, has been migrated to a directory called "war."
Some changes were made to the API in general. For example, EventType is now a class; that means all your code that look like this:
public class AppEvents
{
public static final int Init = 1;
/** trimmed **/
public static final int BuildContainers = 20;
public static final int BuildUI = 21;
/** trimmed **/
}
and this
public void handleEvent(AppEvent<?> event)
{
switch(event.type)
{
case AppEvents.Init:
this.onInit(event);
break;
case AppEvents.BuildContainers:
this.onBuildContainers(event);
break;
case AppEvents.BuildUI:
this.onBuildUI(event);
break;
}
}
Now need to be changed to this
public class AppEvents
{
public static final EventType Init = new EventType();
/** trimmed **/
public static final EventType BuildContainers = new EventType();
public static final EventType BuildUI = new EventType();
/** trimmed **/
}
and this
public void handleEvent(AppEvent event)
{
if(event.type == AppEvents.Init)
this.onInit(event);
if(event.type == AppEvents.BuildContainers)
this.onBuildContainers(event);
if(event.type == AppEvents.BuildUI)
this.onBuildUI(event);
}
A good change, in my opinion.
I was also surprised to see that the look and feel had changed just a tiny bit. Compare the last version’s dialog (including borders, shadows, buttons, and the title bar) to the new version’s:


The differences are relatively minor (except for the buttons, which I will be working on) but definitely noticeable.
There were are few other things I had to change, such as the removal of StatusButtonBar (now you use getButtonBar() on a Dialog and add() a new Status object to it). Overall, I think the changes were mostly positive, and I’m looking forward to checking out some of the other changes.
GWT 1.6
GXT 2.0 M1 (note this link may change as builds are released)
ITworks Design Journal: Authentication
Posted by BinaryMuse in Technology on April 1st, 2009
This post is part of the “ITworks Design Journal” series.
Where I work, we authenticate against an Active Directory server. In an effort to help the consolidation of usernames and passwords, I decided that users of the ITworks app should also authenticate against the AD, and that the user’s role, or permissions, in the app should be determined by groups they are members of in the directory. A bonus advantages of this system is that I don’t have to design any sort of user management piece!
I developed a very simple class, LdapUser, that logs into the AD with a privileged user and search for a user with a sAMAccountName that is the same as what the user entered in the login dialog:
If found, the class attempts to re-bind to the server with that user’s name and the password they entered. If successful, the user entered valid AD credentials. The class then queries the server for an array of groups the user is in, and checks against a known list of valid groups.
If found, the server returns some JSON indicating the user’s proper name, access level, and session-specific API key.
API Key
In order to insure that request for information is coming from a user that has successfully authenticated, every user that logs in is given an API key that is valid until their session ends. Every time the client requests information from the server, the API key must be passed, and is validated against the one the server generated when the user first logged in.
Login Throttling
One thing I was concerned about was brute-force attacks on the site. Since we authenticate against our AD server, it would be a bad thing™ if someone was able to brute-force their way into an IT staff member’s password. Thus, a login throttling system was born.
The system I designed is very simple–it limits unsuccessful login attempts on a specific user. Each time an invalid username and password combination is entered, that username’s "incorrect login count" is incremented in the database. Depending on how many bad login attempts have been recorded, subsequent attempts will issue an error message that the user must wait before logging in again. (I considered making the server thread sleep() for a while, to make it more frustrating, but I feared that the potential to consume a large number of threads was too high, effectively increasing vulnerability to a DoS attack). The time required gets exponentially longer as the number of attempts increases.
Once a user enters a correct username and password (assuming they are not currently in the "wait" period triggered by multiple incorrect combos), their count is reset to zero.
Again, the system is simple, but provides enough security for basic brute-force attacks–which was the goal.
Conclusion
In the end, I ended up with a simple authentication script that authenticates against Active Directory and prevents basic brute-force password hacking. The system works fairly well–if anyone sees any flaws in my logic, or has any comments, please do not hesitate to comment below!
ITworks Design Journal: Spaghetti Code
Posted by BinaryMuse in Technology on March 27th, 2009
This post is part of the “ITworks Design Journal” series.
After deciding on a language and framework for the new inventory/work order application, I started to write some code. I wrote a couple of samples just to get the hang of the widgets and how handlers worked and all that jazz. Before long, I sat down to begin the application proper.
It didn’t take long to realize that something didn’t feel right. My default Application implements EntryPoint object was building my UI, creating the login dialog box, and a bunch of other stuff. I tried to use classes to separate it as much as possible, but it just wasn’t working out like I wanted.
Then, I discovered an overview of the GXT MVC classes, guided by the sample Mail application that comes with GXT. I didn’t even know that GXT had a set of MVC classes. After reading over the tutorial, I set to work rebuilding the application using a MVC pattern.
For the uninitiated, MVC stands for "Model View Controller" and is a way of organizing your code into classes that have specific roles1:
- Models are domain-specific representations of information. Logic attached to your model gives meaning to the raw data it contains.
- Views render the model in a form suitable for interaction (in this case, the rich web UI). A single model may have multiple views for different purposes. Views are responsible for capturing user interaction.
- Controllers are responsible for the business logic–they process commands and events and indirectly make changes to the model.
In GXT, there is a Dispatcher singleton that is used to dispatch events to controllers, which can register themselves to certain event types. Application control is handled by firing events which are handled by controllers, which in turn process business logic, update models, and finally pass events on to the view which then updates the UI and waits for the user to interact with the application in some way.
Using this design pattern really increased code readability and made it much easier to organize my thoughts.
- (Root) The application starts by creating the controllers and firing the "Init" event using the Dispatcher.
- (AppController) The controller for the application, AppController, receives the "Init" event
- (AppController) The application controller creates its view and asks the Dispatcher to fire the "Login" event.
- (Root) The Dispatcher fires the "Login" event.
- (LoginController) The login controller receives the event and initializes its view.
- (LoginView) The login view creates its model (a "User") and its UI (LoginDialog) and waits for the user to entier their credentials.
- (LoginView) The view captures the user’s input and asks the model to authenticate. If successful, the view hides the dialog box and asks the Dispatcher to fire the "BuildUI" event, signalling that the next phase of the application should start.
- (LoginController) The login controller receives the event and initializes its view.
- (Root) The Dispatcher fires the "BuildUI" event.
- (AppController) The application controller also processes this event and simply passes it to its view (nothing to do on the business logic side).
- (AppView) The application’s view builds the basic UI.
- (AppController) The application controller also processes this event and simply passes it to its view (nothing to do on the business logic side).
And so forth and so on. This pattern allows you to keep every piece of the application completely separate, and still provides a way to communicate between them (via the Dispatcher) if necessary.
ITworks Design Journal: Language and Framework
Posted by BinaryMuse in Technology on March 27th, 2009
This post is part of the “ITworks Design Journal” series.
We currently use an enterprise-level application for managing work orders, and an in-house web site for managing assets. After sitting down and looking at these two systems, we came to the conclusions that (1) the work order system was more powerful than we needed, and we were likely paying too much for it, and (2) the asset system was too simple and difficult-to-use (very form-based layout). It didn’t take long to decide the following:
- I wanted the new app to be web based, allowing for use anywhere without installation
- I wanted the new app to use a rich web UI
- I wanted the new app to be exactly as complex as we needed it to be, but no more
- I wanted the new app to be expandable as easily as possible
As the IT sat down and began to brainstorm what features we wanted the app to have, I started thinking about languages and frameworks. PHP has always been my favorite server-side language, and the only web UI framework I had used to any extent was the Yahoo! UI library.
After some research, I discovered the Google Web Toolkit, or GWT. I had actually heard of it before, but passed it up as I didn’t read enough about it to fully understand what it was. It didn’t take me long to find the following on thier site:
With Google Web Toolkit (GWT), you write your AJAX front-end in the Java programming language which GWT then cross-compiles into optimized JavaScript that automatically works across all major browsers.
The very idea intrigued me; I downloaded the toolkit and installed Eclipse (I haven’t written Java in a very long time), and started following along with the sample tutorial.
In the end, I was very impressed with GWT. The ability to debug a web application just like you would a Java application (after all, in the GWT shell, it is technically a Java application!) was a huge boon, and being able to make a change in the Java code and simply refresh the included hosted-mode browser to see the change saved so much time.
The one thing I didn’t like about GWT was the look and feel. What “widgets” it does include are very HTML-ish and don’t feel rich at all. So, some more searching, and I discover Ext JS, a javascript UI library that looks very nice. A little more time spent looking around their site revealed an amazing and very cool piece of information–they have a version of their UI library designed specifically to work with GWT!
After downloading and installing the GXT library, I was sold. The UI was beautiful, and between GWT and GXT, Ajax data loading and display is a breeze.
My decision was made: GWT/GXT would be my front end framework of choice; I decided on PHP for the server-side layer, as it is my favorite server-side scripting language and I am very familiar with it. It was time to write some code.