New Component: SpaceWrapper

Hello all!

I haven’t had much time for developing components, since all time has gone to other projects. Though, this morning, I wanted to test the Vaadin eclipse plugin, so I made the SpaceWrapper (maybe a little bit stupid name, since it doesn’t wrap space - in fact it maybe should have been called SpaceAdder in the first place :slight_smile: ). However, using the wrapper, it should be unnecessary to add paddings or margins to your css file, and you do not need to add style names for this.

A demo can be found here:
SpaceWrapper demo
The red background is the wrapper. I had to hilight it with something to make it easier distinguishable - in case you do not use Firebug. Inside this wrapper, I have added a layout. Feel free to play aroound with different values. I guess there may be some bugs, since I haven’t tested it much yet.

The source code can be found here
SVN

Let’s take a look at an example:


[b]
// Create your nice layout, or any AbstractComponent you may wish
[/b]
HorizontalLayout toBeWrapped = new HorizontalLayout();
toBeWrapped.addComponent(new Label ("Label in a wrapped layout"));
toBeWrapped.addComponent(new Button("Button inside a wrapped layout"));

[b]
// Then just create the wrapper, and add the layout
[/b]
SpaceWrapper sw = new SpaceWrapper(toBeWrapped);

[b]
// If you want to change size to your layout, do it via the SpaceWrapper's API:
[/b]
sw.setWidth("100px"); [b]
// This also changes the layout to 100px wide (and of course, any common size unit is ok).
[/b]
[b]

// Lets add some margins
[/b]
sw.setMarginLeft("5em"); 

[b]
// Just for fun, let's add a button that adds more margin to the left
// Note that the space wrapper knows the user has been using
// the size unit [i]
em
[/i], so it will continue using it.
// (Default size unit is [i]
px
[/i], and you can use different size units for different directions)
[/b]
Button b = new Button("Add yet another 1em to left margin");
b.addListener(new Button.ClickListener(){
	public void buttonClick(ClickEvent event) {
		sw.addMarginLeft(1); [b]
//Note!
[/b]
	}
});

[b]
// Finally, add to main layout
[/b]
myMainLayout.addComponent(sw);
myMainLayout.addComponent(b);

(Disclaimer: This code has just been written on the fly, so it might not compile)