Since this is probably going to be the last post in the Schlüsselmeister series, I'd like to start with a quick overview of what has been covered so far. The original goal had been to kick the tires of the newly releases Java version of Google's App Engine. I wanted to taste the Kool Aid and build an application using the newly released tools (GWT + Integrated Eclipse tool). Overall it has been a great experience and I surely learned a lot. Things that were covered in previous posts included:
- My first attempts at GWT programming and how it almost felt like being back in desktop software development.
- How coding against interfaces made almost my entire Javascript client testable through regular JUnit tests.
- How tools like EasyMock helped me test my classes in isolation, even if I had not coded all the components they depended on yet.
- How serialization that worked even across language barriers (from Java to Javascript and vice versa) made client-server communication almost trivial.
- How it is possible for apps with only small chunks of data (like Schlüsselmeister) to build a server that does not need a lot of complex JDO/JPA setup.
- How I used protocol buffers on the server and to build a backend that is easily unit-testable.
- How I was able to use a native Javascript crypto library in GWT.
- How I replaced my html landing page with JSP to turn the application off if no user was logged in.
It was a lot of fun -- until today, where I faced my ultimate enemy: Cascading Style Sheets! It is sad, but I think I could not come up with a good looking page on my own if my life depended on it. I needed something to get started with. I needed a template!
A few google searches later, I found this link on mycelly.com. I'm certainly not an artist or expert in usability, but I know what I like when I see it. The site seemed simple (not too many flashy colors), clutter-free, and the designer explicitely allowed people to use the stuff for one's own page (I don't want to rip anyone off after all!). It even had a little extra area at the top that I could use to add a tipjoy button ;-).
With the foundation for my site found, I adapted the JSP to fit the mold:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@page import="com.google.appengine.api.users.UserServiceFactory"%>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="Schluesselmeister.css">
<title>App Engine Fan's "Schlüsselmeister"</title>
<script type="text/javascript" language="javascript"
src="schluesselmeister/schluesselmeister.nocache.js"></script>
</head>
<body>
<div id="content">
<div id="navi">
<!-- TIPJOY BUTTON GOES HERE -->
</div>
<h1>App Engine Fan's <i>Schlüsselmeister</i></h1>
<h2>Password management software for the internets</h2>
<div id="about">
<!-- THIS IS WHERE I DESCRIBE HOW AWESOME MY SOFTWARE IS ;-) -->
<!-- IF A USER IS LOGGED ON, SHOW THE PROGRAM -->
<% if (UserServiceFactory.getUserService().getCurrentUser() != null) { %>
</div>
<div id="program" />
<!-- OTHERWISE, FILL THE VOID WITH A LITTLE BIT OF ADS -->
<% } else { %>
<p><b>To use this program, you have to <a
href="<%= UserServiceFactory.getUserService().createLoginURL("/") %>">log
in with your Google account.</a></b></p>
</div>
<div id="ad">
<i>(The following add will not be displayed once you are logged in.)</i><br/>
<!-- INSERT ADSENSE HERE -->
</div>
<% } %>
<!-- THAT's IT -->
</div>
</body>
</html>
I added the template to my stylesheet and fire up the application in Eclipse. So far, so good, but the program itself was still pretty bland! My solution to the problem is probably not the greates in the world, and if you have better ideas, please post them to the blog. What I did in this situation was: I opened up firebug.
Firebug is an awesome browser plugin that serves as a Javascript debugger, dom explorer and much more. One of the many cool things it does is its inspect functionality: it lets you select any section of a web page and shows its origin in the dom tree. I had just used GWT for the first time, and I had no idea (and no motivation to learn) how the web toolkit actually renders the UI Widgets into physical html. With Firebug, I could simply click and see what kind of element I had (was it a DIV? an INPUT? a SPAN?). Even better, the tool showed me exactly what the current style was, where the element "got" its style from (which css rules apply in which order? which are overwritten?). Last but not least, it also allowed me to change the style locally in the browser, which made it easy to try out how certain ideas look.
Back to styling my app. The first thing I did not like were how my dialogs looked. They did not have any borders, and their background was transparent (whatever text was behind the dialog would shine through). That had to be fixed! Fortunately, I had given both dialogs a style name in my GWT code, so I could easily address them in the dom tree:
.scramblerDialog, .editDialog {
border-style: ridge;
padding:1em;
background:white;
}
Next stop was the split panel. I wanted the splitter itself and the left hand side (the list of categories) to be in the same color, so that it would look like one coherent unit. The color should be a gray tone, since it seemed to fit well into the overall theme of the template. Unlike the previous example, I had not really set any style names in the code, so I had to do a little digging using Firebug:
.hsplitter, .splitPanel > div > div:first-child {
background:lightgrey;
}
I also realized that the list of categories was placed just a little bit too high (it was on the same level as the buttons), thus I needed to add a little bit of extra padding:
.gwt-Tree {
padding-top:1.5em;
}
Last but not least, I wanted to give certain UI elements a little bit of extra pizzaz. The headers in my table (named
header in my GWT code) were to get a little background color and padding. Similar styles should apply to the action elements (links a user would click on to edit a password entry or make a hidden password text readable). Here is the resulting set of rules:.header {
background: lightgrey;
padding-left:2px;
padding-right: 2px;
padding-bottom: 1px;
}
.action {
padding-left:0.2em;
padding-right:0.2em;
background:lightgrey;
color:blue;
}
So much for styling my app :-) It's probably not the most beautiful page in the world, but it was relatively painless and I can see myself using the password store in everyday life without getting annoyed by flashing colors and useless special effects.
No matter what one thinks of the quality of my UI design, it does show one thing though: using GWT makes building an ajaxy frontend as easy as building a scalable backend using App Engine. They are a great combination for building Apps, and I am looking forward to seeing what great applications others will release over the next couple of months!
2 comments:
Thanks for the article.
I need one help reg Google App Engine.
Lets say I have a domain named www.example.com in netfirms. My application gets hosted in google app engine http://example.appspot.com
When we access www.example.com, we get the pages pointed to the application hosted in http://example.appspot.com
But when we access example.com , I am getting 404 Error response
How to handle the application hosted in google apps for handling the "naked domain urls" (urls without www) i.e example.com
I am developing the application in the Java environment.
How can i solve this issue ?
Thanks
Hi,
As far as I know, naked domains are not directly supported in the Google Apps Control panel. Take a look at this thread with some workarounds that might solve your problem.Cheers,
Jens
Post a Comment