Episode 9: Real World GWT with Alex Moffat

Posted in Drunk On Software on February 9th, 2009 by admin

admin originally posted this on Drunk on Software.

This is the 9th episode of Drunk On Software, where we sit down with Alex Moffat of Lombardi Software to discuss their usage of Google Web Toolkit (GWT). Alex shares an overview of GWT, and discuss his hands-on experience of using GWT on the development of Lombardi Blueprint product.

Additional Resources:

  1. Alex and others discussing their usage of GWT.
  2. Lombardi Developers Blog
  3. Alex’s Blog

Note: This is our last interview shot with our old microphone … we do promise to do better with the audio quality in the future. Thanks for hanging in there with us.

Executable Design

Posted in Jerry Andrews on February 8th, 2009 by admin

When I first “noticed” architecture, I found it pretty much irrelevant.  At that time, designers generally talked rather than drew, or they drew flowcharts. Design documents were either 1000-page tomes or they didn’t exist at all. The architect with whom I worked generated block diagrams at such a high level they weren’t useful to me at all, or worse, they were misleading, because the actual system didn’t match the architecture in anything but name.

At some point, I finally started saying “architecture must be executable.” At the time, I meant that a designer/developer should be able to take an architectural description, code to it, and though it would be a skeleton, it should execute.  It should be possible to mock all the key system functions using nothing but the architectural description.

If feel the same way about design: if you can’t use the design as an actual blueprint, it isn’t a design–it’s a concept.  Concepts are good, but they must be refined into architecture and designs.  That’s what designers and architects get paid to do.  It’s hard work.  It’s boring sometimes. And it’s very very difficult to do well, which is why there are so few good designers, and even fewer architects.

I’m trained as a nuclear engineer, and I worked in power plants as such for 15 years before moving to software development full-time. Power engineers would laugh at what usually passes for a software design.  When you design a building, you aren’t done until you can predict the construction cost and schedule to within 5%.  Same thing goes for an engine, or a CD player, or chemical dye. In other industries, you’re working with real materials, which cost a lot, and whole teams of people, who also cost a lot.  You can’t do most of the work yourself, so you must explain exactly what you want done.

The same thing is true of large software projects (agile ones included–I’ll get to that in future postings).

As software developers, designers, and architects, we have a huge advantage over engineers: our cost of implementation is very low. As a result, sometimes it really is cheaper just to throw code at the wall and see what sticks.  In medium and large projects, though, it is seldom the case that this approach will work more than occasionally. As a result, we build design documents.  Designers and architects make UML descriptions (hey!  we have our own design language!) and associated text, which we then hand to developers to turn into code.

Which is incredibly wasteful (and now I’m getting to the point).

UML is a succinct, precise way to specify a design.  Why do we have to translate it into code to get it to execute?  Wouldn’t it be a great test of a design if you could run it before you lobbed it at developers to flesh out?  I’m not talking about code generation here; I’m talking about directly executing the design components to see how they work together.

The model-driven architecture (MDA) folks are running down that idea.  I’m not sure I like where they’re going with it, though. I do not think it’s a good idea to turn designs into complete applications. Designs are abstractions, and the whole point of that abstraction, and the ability to separate architecture, design, and development, is to allow people to think at different levels of detail, so they have the capacity to grok the whole application.  Divide and conquer. I do think, though, that recoding the design from UML into some other language is wasteful. Wouldn’t it be a lot more productive to give developers an executing design and let them flesh out the details in their language of choice?

The rise of virtual machines–Java and .NET specifically, but I’m sure there are others–makes me think we can build executable designs, and code to them rather than recoding them. I’m currently working on “how”. I’d like to know what you think of the idea.

Designing in Flex

Posted in Justin Shacklette on February 7th, 2009 by admin

admin originally posted this on Saturnboy.

Flex is awesome. In many ways, it’s the right tool for the job of bringing beautiful design to the web. I use flex every day at work, and also at home on my own fun projects. Today’s challenge is to take a very simple blog design and re-implement it in flex.

In The Red Corner

I’ll start with my simple two-column blog design that I like to call Circles of Doom. The original design was done in Inkscape, and assembled for the web using Blueprint CSS. You can read all the gory details of the design and assembly in a series of earlier posts: part 1, part 2, part 3, part 4.

Skipping right to the end result, you can view the final results here:

 

In The Blue Corner

Flex provides a lot of design leverage with its support for fills & strokes, gradients, rounded corners, and filters like drop shadow and glow. The original html design required the use of images to handle these features, but Flex’s CSS is powerful enough to handle everything with the exception of the blood red background circles.

The design architecture can be thought of as a simple three layer structure show here:

flex layers diagram

The bottom layer has the blood red background circle image. It is absolutely positioned vertically (y="-65") and horizontally centered (x="{(this.width - 950)/2}"). Like this:

<mx:Image source="@Embed(source='assets/circ.png')"
        x="{(this.width - 950)/2}" y="-65" />

The middle layer has the main box with rounded corners and a black glow. Like this:

<mx:VBox width="870" x="{(this.width - 870)/2}" y="130" styleName="body">
    <mx:filters>
        <mx:GlowFilter blurX="22" blurY="22" color="#111111" alpha="0.6" />
    </mx:filters>
</mx:VBox>

And the Flex CSS:

VBox.body {
	horizontalAlign: center;
	backgroundColor: #ffffff;
	borderStyle: solid;
	borderThickness: 10;
	borderColor: #886655;
	cornerRadius: 28;
	verticalGap: 10;
	paddingTop: 20; paddingBottom: 4;
}

And the top layer has the main content, sidebar & sidebar content, and footer. Like this:

<mx:Canvas width="790">
    <mx:Text text="main" width="590" styleName="contentTxt" />
 
    <mx:VBox width="190" x="600" styleName="sidebar">
        <mx:Text text="sidebar" width="100%" styleName="sidebarTxt" />
    </mx:VBox>
</mx:Canvas>
 
<mx:Text textg="footer" styleName="footerTxt" />

And the associated Flex CSS:

Text.contentTxt {
	fontFamily: Arial;
	fontSize: 12;
	fontWeight: normal;
	color: #000000;
}
 
VBox.sidebar {
	backgroundColor: #aa1100;
	borderStyle: solid;
	borderThickness: 2;
	borderColor: #ff2200;
	cornerRadius: 12;
	paddingLeft: 10; paddingRight: 10;
	paddingTop: 10; paddingBottom: 10;
}
 
Text.sidebarTxt {
	fontFamily: Arial;
	fontSize: 12;
	fontWeight: normal;
	color: #ffffff;
}
 
Text.footerTxt {
	fontFamily: Arial;
	fontSize: 10;
	fontWeight: normal;
	color: #886655;
}
The Result

Put it all together with some dummy Lorem ipsum text and you get a decent looking Flex blog design (just right-click, and select “view source” to see the code). It compares favorably to the original html design. The only obvious difference is the browser font rendering versus Flex’s font rendering.

The Files

Understanding Hibernate Delete Orphan issues

Posted in Bob Hedlund on February 5th, 2009 by admin

admin originally posted this on Eldorado Software.

Ever wonder how Hibernate knows to follow the annotation "CascadeType.DELETE_ORPHAN"?

The short answer is that Hibernate keeps track of removals from these collections. When you remove an object from the collection, the status of that object is set to Status.DELETED or Status.GONE if the object is still in the persistence context. When hibernate saves the object tree that contained these ex-collection objects, it sees that the object has been dereferenced, marked for deletion, and is then removed from persistent storage and the persistence context.

Thats how it is supposed to happen.

Ever wonder why you are getting the error :
org.hibernate.HibernateException: A collection with cascade="all-delete-orphan" was no longer referenced by the owning entity ?

Lets say that you have an object with a collection that is cascade type delete orphan, and it has some child entities in it. And lets say that you change this collection simply by calling the setter on the parent object:

parent.setChildren(someDifferentSet);

or

parent.setChildren(null);

The children that were in the collection are still in the persistent context. However, they are no longer referenced by the parent object, and Hibernate never said goodbye to them. In the Collections class (org.hibernate.engine.Collections) , the method processDereferencedCollection(Collection, Session) throws a hibernate exception when it finds these items in the persistence context, and their Status is not set to GONE or DELETED. The ensuing error message: 'A collection with cascade="all-delete-orphan" was no longer referenced by the owning entity: ' followed by the parent entity name is shown.

The proper way to handle this situation where you want to replace an existing collection would be:

parent.getChildren().clear();
parent.getChildren().addAll(someDifferentSet);

Similiarly, if you just wanted to remove a child from the collection:

parent.getChildren().remove(child);

By calling the collections manipulations, hibernate is kept up to date with the status of the objects within and without the collection. It then manages the objects in the persistence session properly.



NBC delivers “What’s You iCue?” Facebook Application with help from Gorilla Logic..

Posted in Gorilla Logic on February 5th, 2009 by admin

The NBC Today Show unveiled it’s “What’s You iCue?” Facebook application. NBC’s iCue.com site is focused on delivering educational content. iCue is an ackronym for Immerse, Connect, Understand, Excel.

The “What’s Your iCue?” Facebook application is a news trivia game that is supplemented with video footage from the NBC News archives that includes video of current events and of those dating all the back to 1920s. You can run the application right within Facebook and play against your friends.
Below is the footage from the NBC Today Show. What you don’t hear about (quite expectedly) is that Gorilla Logic was the company that NBC chose to build the application. So, if you like what you see, or are looking to tap into the Social Network, give us a shout.

More on Anvil (Flex Enterprise Portal)

Posted in Jon Rose on February 4th, 2009 by jonr

jonr originally posted this on Jon Rose's Blog.

Last month, We posted a Drunk On Software video interview with Anvil project founder, Ryan Knight.  This month Ryan shared more about the project in an InfoQ.com email interview I just posted.  Check it out and let Ryan know what you would like to see in the next release of Anvil.

Optimizing Web Design

Posted in Justin Shacklette on February 1st, 2009 by admin

admin originally posted this on Saturnboy.

Once everything is done (meaning I have a layout, I have a design, and I have it sliced and assembled), I like to make another pass to optimize both the size of the image files, and the number of files. My two favorite techniques are using Sprites to reduce the total number of images, and using OptiPNG to compress the images.

Sprites

It is fairly common to see sprites used in high performance web design. The Gmail team has a great blog post discussing various performance enhancements currently in use, including sprites. But for some reason, almost everyone thinks of sprites for icons and buttons. In my opinion, any time you can fuse two images into one, you’re making a “sprite” and you’re improving performance. Using a grid-based framework like Blueprint CSS tends create a lot of rectangular layout imagery, which are often ideally suited for fusing into a larger sprite.

The current web page has two candidates for spriting: the main header image can be fused to the footer, and the sidebar header to the sidebar footer. Just like this:

fuse diagram

So the original circ-head.png and circ-foot.png are fused to create circ.png. Similarly, the sidebar header and footer are fused to create sidebar.png.

The original circ.css is simply modified with the new image filenames and a negative vertical offsets on the footer backgrounds. Here are the relevant parts of the new circ.css:

#header {
background:#111 url(img/circ.png) 0 0 no-repeat;
height:160px;
min-height:160px;
}
 
#footer {
background:#111 url(img/circ.png) 0 -160px no-repeat;
height:30px;
min-height:30px;
text-align:center;
}
 
#sidehead {
background:transparent url(img/sidebar.png) 0 0 no-repeat;
height:14px;
min-height:14px;
}
 
#sidefoot {
background:transparent url(img/sidebar.png) 0 -14px no-repeat;
height:14px;
min-height:14px;
}
Compression

Using OptiPNG is really easy. Just run it over a folder of PNGs, and it losslessly compresses what it can, and leaves the rest untouched. When I’m not using source control on a design, I’ll often perform the compression step exclusively on the server to keep things simple.

Here is a simple command to perform maximum compression of all the PNGs in a folder:

optipng -o7 *.png

Digging Deeper: I have noticed that OptiPNG, in it’s quest for maximum optimization, will sometimes alter the image type (either by reducing the bit depth or switching from full color to indexed color) in such a way as to make Photoshop very unhappy with the resulting image. In these cases, the GIMP is your friend.

The Results

We fused four images totaling 52552 bytes into two images totaling 52356 bytes. So we saved two whole HTTP requests and a meager 200 bytes. Not much to write home about (or even blog about), but hopefully it serves as a useful demonstration that design optimization is fairly simple. Next up, we’ll take our design and layout into Flex. What fun!

The Files