sbolla
sbolla

Reputation: 711

How to build a Vaadin demo sampler type of page

I have a simple question, I am trying to build something similar to whats in this URL Visit: http://demo.vaadin.com/sampler-for-vaadin6

Specifically, I want to know how to create those boxes , which can be clicked on ? I am not sure what these are? whether they are links or images or buttons?

I also what the box around it when a mouse is moved over these boxes. Any sample code is highly appreciated.

Upvotes: 0

Views: 678

Answers (2)

Lundahl
Lundahl

Reputation: 6562

You can find the code for a "relatively" recent version of the Vaadin 6 Sampler here.

At least this version (which I believe to be 6.7.4) should give you some examples of what you're looking for.

Upvotes: 0

nexus
nexus

Reputation: 2937

The sampler page is created with Vaadin. According to FireBug it's made with a CSSLayout and those boxes are made with links. The hover effect is made with the following css attribute:

.v-csslayout-grid .screenshot a:hover span {
    background: url("screenshot-frame-hover.png") no-repeat scroll 1px 0px transparent;
}

Upvotes: 1

Related Questions