Building an email client with Vaadin Designer

vaadin.com/designer
github.com/vaadin/designer-tu...
In this video tutorial Ville Ingman and Marc Englund will show how to build a beautiful email client from scratch with the Vaadin Designer.

[@im-a-trailblazer]

this looks so much better and easier than plain Java UI's

[@dayworks9100]

Excellent tutorial - thank you very much!

[@DirkBarchmann]

Great tutorial. Thanks

[@e11y1985]

this is so awesome

[@grupogama2]

Make more videos like this please ......

[@andreashohmann5994]

Awesome!

[@mariuszcwika4420]

What scss editor are they using?

[@Henorek]

Hi there, when I change StyleName under lets say User button or when I paste some css styling from valo templates my project won't update, it just looks totally the same regardless what I do. I also got a lot Unknown tag (vaadin-button) errors. I create project via Eclipse Plugin

[@AndrasJanurik]

Great demo, thanks a lot! I have two questions: 1) If you click the star button of a message a border appears, how can you avoid that? 2) If you make the browser very narrow (phone size) the menu hides and a menu button appears. But the menu button does not open the menu. How can you do that? Thanks

[@mmu200]

+Andras Janurik That is a good question. please share the ans if you got one.

[@kaiuwepel3021]

Excellent tutorial !!! .... wished you could make a Vaadin Designer Plugin for NetBeans IDE

[@CenturionDobrius]

+Kai Uwe Pel That's right !! Is there any chance in the future that NB will have support for it ?

[@kaiuwepel3021]

+Centurion Dobrius - I guess, its depending only on Marc Englund, if he and his team wants to move forward for a NB support. Basically, if our NetBeans community are requesting and pushing Vaadin to make a NB plugin asap... that would be an option :)

[@kaiuwepel3021]

+Joonas Lehtinen Thank you for your reply and consideration, in case your team would develop a NetBeans version. Much appreciated.

[@CenturionDobrius]

+Joonas Lehtinen Big thanks anyway for existence of Vaadin, as it really has huge impact on my professional career, and I suppose on others as well !

[@kriskb3]

In the theme drop down in your example (that paint roller symbol) one can see "designerdemo". When I run the example with the responsive application theme I get "mytheme" there. Why did you choose "designerdemo", where does it come from or where is it defined? Why didn't you take "valo" in this example? Just curious.

[@johanneshayry8498]

Selecting Valo theme would mean no customisations in the theme colors and stuff. In this project the custom theme seems to be named designerdemo. The default project created with the Maven archetype (or Vaadin Eclipse plugin) has by default theme name mytheme.

[@tenderpie82]

I cant installing any templates. couse I got a demo license? I using Windows OS and I don't have idea where have to. I can see myownproject/WebContent/VAADIN in eclipse Project Exlorer

[@kriskb3]

I don't have WebContent and build in my project tree as in 16:44 . (?)

[@Santhoshk.chakka]

Hi I Am getting internal error occurred during Design Opening What can i do now?

[@aaa-vn8pv]

I had this video as an ad

[@aaa-vn8pv]

I like it a lot and now have subscribed!

[@arrhangel]

Where did you get the "Responsive Application"-Template? I dont find it.

[@willherrin8311]

+arrhangel They're at the very bottom of this page vaadin.com/designer#

[@arrhangel]

Thanks.

[@AlexCDeBaca]

You can download it from the Vaadin designer templates GitHub repo at: github.com/vaadin/vaadin-designer-templates/tree/master/dist Download the ResponsiveApplication.html file into .vaadin/designer/templates in your home directory.

[@Kolatz]

Guys, the audio of your video is clipping! Please check that out...

[@kriskb3]

How do you get from the valo-menu-item to v-button at 9:13? Where do you know that there is a v-button?

[@johanneshayry8498]

It's a com.vaadin.ui.Button component so the default primary style name is v-button. vaadin.com/docs/-/part/framework/components/components-button.html or check source of com.vaadin.shared.ui.button.ButtonState

[@kriskb3]

OK, I understand. But in the course of the video you select valo-menu-item, delete it, and suddenly v-button appears. From where? where did you choose it? Did it come from some shortcut or list? At least it isn't obvious to me where - out of the blue - v-button suddenly comes into the picture.

[@johanneshayry8498]

Either Marc had the style name in clipboard and pasted it or 1.0 version of Designer replaced empty primary style name with the default one. (I don't think 1.1 does it anymore)

[@kriskb3]

You mean, 1.1 doesn't do anymore? You are right. When I empty the field PrimaryStyleName (select-delete), no default style appears. So one gotta know this beforehand.That was my point. Not a great issue, but I just was wondering.

[@johanneshayry8498]

I filed an issue about it: github.com/vaadin/designer-issues/issues/1194

[@luxiling]

56 minute long ad lmao nice

[@Voodoo8648]

I thought Vaadin designer was for people who don't know code 0_o

[@refeez3700]

+Voodoo8648 it is if you only want to design the UI.

[@e11y1985]

Dude...start work as a programmer and then comment

[@benerridge9901]

What scss editor are they using?