Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

VaadinBuilder, sample

Abiel Hakeem
1 decade ago Apr 29, 2010 11:59pm


I have created an extension from Groovy's NodeBuilder for defining Vaadin UI in VGrails. Actually I made this after reading about SwingBuilder and anticipation for development/conversion of a micro banking application in Jakarta where (my PM said) it will involves about 130+ pages (JSP/Struts pages). Anyway the schedule is so tight..

So here is an alpha version of VaadinBuilder, it's so simple now for defining UI in Vaadin for Groovy/Grails developer, create a VaadinBuilder instance, define your UI, render then add to a layout/panel.. for accessing a desired component just put "name" parameter on a component node then you can access it by calling a Map named "components" in the builder instance

def vaadinBuilder = new VaadinBuilder()

def data = vaadinBuilder.panel(width:"100%", caption:"Vaadin Builder by Zhakimel",spacing:true){
     vlayout(style:"sidebar-menu", width:"200px"){
       label(caption:"My Hello Menu")
       nativebutton(caption:"First Menu")
       nativebutton(caption:"Second Menu")
       nativebutton(caption:"Third Menu")
       nativebutton(caption:"Fourth Menu")
       nativebutton(caption:"Fifth Menu")
       nativebutton(caption:"Sixth Menu")
       nativebutton(caption:"Seventh Menu")
       label(caption:"""The sidebar menu control is just a set of labels and buttons inside a CssLayout
                     or a VerticalLayout. Use the structure shown on the right,
                     and remember that you need to implement all logic yourself. :)

     panel(name:"panel",caption:'Internal Panel',spacing:true, style:"bubble"){
         textfield(caption:"The Text Field", width:"200px", value:"Vaadin")
         textfield(caption:"The Text Field", width:"200px", value:"Builder")
         select(caption:"The Select",width:"150px")
       label(name:"label1",caption:'My', addstyle:"h2 color")
       label(name:"label2",caption:'world',addstyle:"h3 color")
       component(ref:btnMyComp, style:"small")
      gridlayout(columns:2,rows:2, spacing:true){
        datefield(caption:'One Date')
        datefield(caption:'Two Date')
        datefield(caption:'Three Date')
        datefield(caption:'Four Date')
      hlayout(spacing:true, margin:true, width:"100%"){
        label(caption:" ",expandratio:1)
        button(name:"btnSave",caption:"Save",aligment:Alignment.MIDDLE_RIGHT, icon:AppConstant.ICON_OK)
        button(name:"btnCancel", caption:"Cancel",aligment:Alignment.MIDDLE_RIGHT,icon:SapIcon.GENERAL_CANCEL)

    addComponent vaadinBuilder.render(data)
    btnSave=(Button) vaadinBuilder.components["btnSave"]
    def onSave={Button.ClickEvent event->
        getWindow().showNotification "Clicked SAVE"
    } as Button.ClickListener

    btnSave.addListener onSave    
    btnCancel=(Button) vaadinBuilder.components["btnCancel"]

so here is the result

and the codes:

another test, a bit more complex panel:

oops dont forget you can also define your button ClickListener like this

button(caption:"Click Me", onclick: your Button.ClickListener )


Abiel Hakeem
@Bandung, Java

Last updated on May, 12th 2010
Joonas Lehtinen
1 decade ago May 02, 2010 6:06pm
Abiel Hakeem
1 decade ago May 12, 2010 9:14pm
Rix Beck
1 decade ago Sep 20, 2010 8:08am
Abiel Hakeem
1 decade ago Sep 21, 2010 8:12am
Kirk Rasmussen
9 years ago Jun 21, 2012 4:02pm