VaadinBuilder, sample

General
1

Guys,

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){
     hlayout(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"){
       vlayout(name:"hlayout2",spacing:true){
         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")
     }
      hlayout{
      gridlayout(columns:2,rows:2, spacing:true){
        datefield(caption:'One Date')
        datefield(caption:'Two Date')
        datefield(caption:'Three Date')
        datefield(caption:'Four Date')
      }
      }
     }
      vlayout{
      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:
http://vgrails.googlecode.com/svn/trunk/src/groovy/org/zhakimel/vgrails/builder/

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
 )

regards

Abiel Hakeem
@Bandung, Java

2

Notation looks compact and readable. (note to self: must really learn Groovy …)

3

thanks Joonas,

Groovy/Grails is a really time-saver when our projects require a very tight deadlines

vaadinbuilder is only a quick solution

:slight_smile:

4

Hello,
I think it is a very important feature. I working with ExtJs javscript framework and I can say the main power of is in the compact UI component definition and the little coding needed for displaying interfaces.
All java based UI struggles with required API coding, and redundant object referencing in coding during object initialization. I love Vaadin’s concept and I will take a try with your builder 'cause it takes me closer to JS coding style with Java platform’s and Vaadin power.
Without knowing details of vaadinbuilder could you tell me why do you labeled it as ‘only quick solution’? Any drawbacks maybe?

5

@Rix

Well, I made this to speedup prototyping process, about the drawbacks I didn’t find any significant problem in using NodeBuilder feature from Groovy… since this only have been made for prototyping simple UI.

regards

6

We actually came up with a similar VaadinBuilder solution independently. One word of caution with Groovy. If you use metaprogramming to store dynamic properties you will encounter serious memory usage issues at high volume. This is due to how Groovy stores dynamic properties in a weak hash table that outlives the life time of the owning object. And it created an enormous amount of objects in short order.

For example a simple page with a combobox and few buttons would consume 2GB in less than 20 seconds in a tight loop. Since the objects are weakly referenced they are eligible for collection so you won’t get OOM exceptions but your GC will be working overtime: 85% of the time it is fine but 10-15% of the time resulted in severe GC pauses (20 seconds in one case)

We experimented with changing GC settings which did help but the best solution we came up with was to use CGLIB/Javassit to store dynamic properties in the owning object itself which helped dramatically!