I actually meant extending com.vaadin.ui.renderers.ButtonRenderer
I actually don’t know how to extend com.vaadin.client.renderers.ButtonRenderer and make a ui.renderer to display it.
You need to extend each of:
- com.vaadin.client.renderers.ButtonRenderer - implement your style logic in the render() method here
- com.vaadin.ui.renderers.ButtonRenderer - mostly just extend as is, nothing else is needed but the constructors
- com.vaadin.client.connectors.ButtonRendererConnector - create your renderer instead of ButtonRenderer and have @Connect bind to your server-side renderer class
Thank you - I shall try my best
How do I get the connector picked up? I have done the work, the app compiles but the buttons do not show…
OK, I think I got it - I need to compile the widget set
Wish me luck - never done a new component before
Actually I’m at a loss. I have added the extended classes just in my normal source code - should I have created a separate module for them?
Yes. The package structure must be like in
regular client-server integration
. The client-side code (the client-side renderer and the connector) must be under the “client” package under the package of the widgetset descriptor. The server-side renderer class must be with your other server-side code.
You probably won’t need the shared state or other classes, only the three mentioned classes, which should be fairly simple.
There’s also
here
some general stuff about component extensions (the Grid renderers are one kind of extensions).
Thank you for your help Marko.
I think this is really increasing my Vaadin knowledge in a good way.
So Marko,
very cool. I have my new button renderer extension compiling and applying a fixed style.
Can you suggest what the correct mechanism is for rendering the button in a different colour (i.e. styling) based on the item in the row. This item will never change and so once rendered the button does not need to change.
Would shared state be the correct way forward with this? Or is there another mechanism for dynamically styling each renderer based on the row?
Thanks
Its OK
worked it out
I can use the render method and pass through something other than a String 
Seems very powerful.
Yes, at least if you extend ClickableRenderer instead of ButtonRenderer, you can use other data types than the String for values, and can get the style attribute or whatever from the property value.
Or, if you extend ButtonRenderer, which was my original suggestion, you can just encode necessary stuff (such as a style) in the String value, which is usually used for the caption, and decode that in the render() method and use however you like. It’s maybe a bit hacky that way, but anyhow.
As my buttons always have the same lable, but different colours depending on the status, I am passing the status through as a string and using that to set the style whilst setting a constant lable. Works very well, and isn’t hacky at all
Thanks for all your help
Good Morning,
I could not understand very well how to put ButtonRenderer style.
Could you provide me an example?
Thank you
I need to do this as well. Nothing complicated, just something equivalent to say doing an .addStyleName(BUTTON_LINK) to the button created by the renderer.
Conrad, could you please provide us with a working example on how to implement my own ButtonRenderer in order to add custom styles, such as icons, to a Button? I’ve been stuck on this for days. Thanks.
Felix,
Have you looked at other Renderers ?
There’s the
GridActionRenderer Add-on
which was made by a Vaadin employee. You can see some screenshots
here
.
In principle you could also use
ClickableTextRenderer Add-on
by making sure the content of your cell is some HTML text like the result of
FontAwesome.TRASH.getHtml()That will give you a “delete” icon which can perform some action when clicked upon. However I’m guessing GridActionRenderer Add-on is the most appropriate for your case.
Finally there’s the
Context Menu Add-on
by Vaadin Ltd, which isn’t a renderer at all but a feature by which you can add a right-click menu to rows in a grid. It is an alternative to ‘action buttons’ in the grid itself.
Thanx, Peter. I’m already givin’ it a try. It seems this is just what I was lookin’ for.
I’m pretty new to Vaadin, hit this problem and thought I would share a CSS only solution that also provides the ability to add icons.
.grid {
table {
td:nth-child(2) {
button {
height: 24px;
color: #ecf2f8;
border-radius: 4px;
border: 1px solid #1362b1;
border-top-color: #156ab3;
border-bottom-color: #1156a8;
background-color: #197de1;
background-image: -webkit-linear-gradient(top, #1b87e3 2%, #166ed5 98%);
background-image: linear-gradient(to bottom,#1b87e3 2%, #166ed5 98%);
-webkit-box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 #4d98e6, inset 0 -1px 0 #166bca, 0 2px 3px rgba(0, 0, 0, 0.05);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
padding: 0 11px;
font-weight: normal;
font-size: 11px;
&:before {
content: "\f06e\00a0";
font-family: FontAwesome;
font-weight: normal;
}
}
}
}
}
Using td:nth-child(2) you can target any given button within that column. Feels a little easier than messing with extending an new renderer.
Another way of doing it is adding a style generator to a grid column like .setStyleGenerator(c → “some-style”)
and then in CSS adding .v-grid-cell.some-style button {}.
Hi, how can i add a button hover a Grid? Like a Circle which will open a Create Item dialog?