Vaadin 8 in Kotlin: Data model changes — ComboBox, Grid …

David Marko  8 February 2017 05:11:00
There are many nice features promised to come with Vaadin version 8. You probably know that Vaadin 8 is JDK 1.8 optimized version and many related simplifications are available in API now. Lets look at some nice features related to data model closely. All examples below are created using Kotlin syntax.

ComboBox Items

Data source for ComboBox can be defined as a simple list of beans using setItems methods. Caption for ComboBox items displayed in browser can be defined as generator using setItemCaptionGenerator method. Its a real simplification as we can define lambda for caption computation from bean properties.

Kotlin language also brings some simplification by using ‘.apply’ method. We have less and more compact code.

val c = ComboBox().apply {

   setItems(

        listOf(

           Person("John", "2"), Person("Matt", "1"),

           Person("Jane", "3"), Person("Joe", "5")

        )

   )

   setItemCaptionGenerator { it.name + " - " + it.id }

   addValueChangeListener { println("Item selected ...") }

}


Grid — data providers

To set items for Grid component we can call setItems(listOf()) the same way we did for ComboBox above. But Grid component usually requires dynamic data, where we can add , remove or modify items and see Grid to refresh content  by following our changes. For this purpose we can define DataProvider that loads our data from list. Now, whenever we update our gridData list, we can then call grid.dataProvider.refreshAll() to let Grid refresh items on screen. So simple and straightforward.  

With Kotlin we used mutableListOf(…) to create list of beans quickly and ‘.apply’ to define Grid properties in one closed code block. The code looks quite nice and is easy to understand.

val gridData= mutableListOf(

       Person("Mark", "2"), Person("John", "1"),

       Person("Joe", "3"), Person("Dan", "4")

)


val grid = Grid().apply {

   dataProvider = DataProvider.create(gridData)

   addColumn { it.id }.setCaption("Id").setSortable(false)

   addColumn { it.name }.setCaption("Name")

   addSelectionListener {      
      Notification.show(it.firstSelected.get().name)

   }

}


You can find original blog post here.


Comments

1usps tracking  18.02.2017 17:03:17  Vaadin 8 in Kotlin: Data model changes — ComboBox, Grid …

{ Link }

2ups courier tracking  06.03.2017 15:47:35  Vaadin 8 in Kotlin: Data model changes — ComboBox, Grid …

{ Link }

3usps tracking  09.03.2017 13:55:27  Vaadin 8 in Kotlin: Data model changes — ComboBox, Grid …

To set items for Grid component we can call setItems(listOf()) the same way we did for ComboBox above. But Grid component usually requires dynamic data, where we can add , remove or modify items and see Grid to refresh content by following our changes. For this purpose we can define DataProvider that loads our data from list. Now, whenever we update our gridData list, we can then call grid.dataProvider.refreshAll() to let Grid refresh items on screen. So simple and straightforward.

{ Link }

4nelnet  12.03.2017 22:31:03  Vaadin 8 in Kotlin: Data model changes — ComboBox, Grid …

{ Link }

5skull mp3  24.03.2017 23:03:51  Vaadin 8 in Kotlin: Data model changes — ComboBox, Grid …

{ Link }

TOPlist