Introduction to Vaadin Webinar - 2014-09-04 10am PT

embedyoutube=jjj8mwiVyLU

Vaadin is a popular web framework that allows you to write web based user interface in Java 8 or any other JVM based language directly. Writing an application that lazily loads large amounts of data from the server, includes drag-and-drop and compelling visualizations does not require one to write any HTML or JavaScript. The framework is based on a server centric development model that provides the best productivity, but it also supports client-side development with the built-in GWT Java to JavaScript compiler. It also allows you to go through the abstractions and write JavaScript directly. The looks of the application is customized with SASS language using powerful Valo theme. The end result can be run in any HTML5 capable browser and deployed to any Java based server or cloud.

This webinar gives an overview to Vaadin and explains how it works. Joonas Lehtinen and Marcus Hellberg from Vaadin US offices will show you everything you need to get started building your own apps with the free Apache-licensed Vaadin.

Feel free to ask any questions during the session by tweeting with #vaadin tag or writing questions on Vaadin Forum thread

Good Morning,
I have following questions on this introductory webinar,

  1. How do we implement MenuItem Shortcut Keys in Vaadin 7.3 application? why it is not officially included like Button Shortcut?

  2. Is there any way of using HTML Caption in Tabsheet instead of Image icon, i want to use HTML.

  3. How do we use silent Printing in Vaadin, like GWT.print(), also Page wise (A4) printing?

The printing matter it’s interesting also to me.
Thanks

I am new to Vaadin…and I need float fields, int fields, currency etc that are standard to an application. I see there are some addons for it, but most are not compatible with version 7. Is implementing a custom widget the way to go? What are the other options?

How much of CSS/SASS do I need to know to use the new Valo theme?

How to architect big applications with back button support. I have what has worked for me to date that is a left panel with available options per current role, and a content pane on the right where all the available options opens in. I am trying to use Vaadin CDI, but I am not sure If I am using it well in my design. So, all in all, we need more examples of how to architect big enterprise applications. I am also using JPAContainer and JEE 7 with wildfly.

Thanks
16401.png

Say that you have a menu with File → Save, like

final MenuBar menu = new MenuBar(); MenuItem file = menu.addItem("File", null); final MenuItem save = file.addItem("Save", new Command() { @Override public void menuSelected(MenuItem selectedItem) { Notification.show("Saved!"); } }); You can attach a shortcut to save e.g. as

menu.addShortcutListener(new ShortcutListener("", KeyCode.S, new int[] { ModifierKey.ALT }) { @Override public void handleAction(Object sender, Object target) { save.getCommand().menuSelected(save); } }); A cleaner solution would be to extract the save action to a save method and end up with

        final MenuBar menu = new MenuBar();
        MenuItem file = menu.addItem("File", null);
        final MenuItem save = file.addItem("Save", new Command() {
            @Override
            public void menuSelected(MenuItem selectedItem) {
                save();
            }
        });
        menu.addShortcutListener(new ShortcutListener("", KeyCode.S,
                new int[] { ModifierKey.ALT }) {
            @Override
            public void handleAction(Object sender, Object target) {
                save();
            }
        });

Of course you can also make your own MenuItemShortcut by encapsulating the above in a separate class. This would be similar to the existing Button.ClickShortcut.

All over the internet, the same type of question about Vaadin is doing its round. I am posting it here to see if it could be answered in today’s webinar? The questions are:

  1. How does Vaadin perform, when compared to a conventional Spring MVC + Javascript framework like Angular JS at the fron end? In order for a Vaadin app to be as performant as a Spring MVC app, does the hardward requirement increase?
  2. Since all events are handled at the server side, doesn’t this mean that the client will be extremely chatty with the server? Will that diminish the user experience in any way? Would that impose a bandwidth requirement and latency issue on the server where the app is deployed?
  3. In order to make a Vaadin app scale, will more hardware need to be thrown at it when compared to a Spring MVC app. If so whats the ratio like? If a spring MVC app performs well with 1 AWS small server, will a Vaadin app need 2 and a load balancer in order to provide a similar performance?

Sethuraman,

WIth vaadin it’s not about how much of CPU can it save VS other frameworks. Specially unfair to compare with angular or GWT because you load the server a lot less. But then ask yourself what is more expensive. A couple of man days/weeks optimizing the architecture so that you use less ram, or a couple more of Gigs of RAM and Hhz of CPU ?

You will rarelly have twitter or facebook scale needs to worry about hardware. So your main costs will be developer time, so improving developer productivity is all about it. And Vaadin is all programmer productivity. If you feel Spring + MVC or AngularJS makes you more productive, then go for it. Vaadin attracts Java developers who wants to build enterprise apps. And latelly really looking good enterprise apps.

Artur Signell
Thank you

We were trying to run our company Maven repository on Apache Archiva but didn’t have luck with Vaadin repo only.
Any suggestions?
Thx in advance.

David,
There is no denying the productivity of a progammer and all the benefits that vaadin brings in. Thats the reason I am drawn to it. Being a java programmer myself, I don’t want to make it as easy as possible for me to create wonderful web apps.

But the development of a vaadin app is done once, but the app will live on forever. Some amount of maintenance for sure, but not as much as your initial expenditure on development. Hence if an app needs expensive hardware for the rest of its life, as opposed to developing on less hardware hungry technologies initially and then deploying it might save costs in the end?

I am not saying this just for the sake of an argument, but it was a tough decision I had to take initially. For my startup and poc a spring mvc app on a micro instance would perform well enough for 2-3 simulaneous users, but the same implemented using vaadin might need a small instance at least?

From an architectural point of view, as fas as my knowledge of vaadin version 6 goes, the overhead the framework puts in the presentation layer in terms of CPU and RAM is no more (if not less) than standard JSF. Which is the foundation for Spring+MVC I guress.

But of course, if you compare it to AngularJS then Vaadin looses there. Because the server doesn’t even need to keep session state, there goes your (really cheap) RAM. And also the server won’t be busy rendering templates, where the (cheap) CPU goes :smiley:

There is not but I got interested and implemented it. Currently waiting for review and with a little bit of luck it just might end up in Vaadin 7.4

There is a reason you do not see many Vaadin 7 add-ons for this, and this is that you don’t need any. The built in converters will handle this for you and all you need to do is either

Bind a TextField (or other field) to a property with the correct type, e.g.

BeanItem<Person> item = new BeanItem<Person>(new Person("Mr Somebody", 37)); TextField tf = new TextField("Age", item.getItemProperty("age")); or manually set a converter to the field

TextField tf2 = new TextField(); tf2.setConverter(Float.class); You can then access the converted value using

tf2.getConvertedValue() Read more about converters in the book:
https://vaadin.com/book/-/page/datamodel.properties.html#datamodel.properties.converter

To get started - none.

There are global variables available for you to tweak to make the theme look the way you want it.
Want a larger font size? Set

$v-font-size: 30px; and you are done.
Want to change the color? Set

$v-background-color: rgb(50,0,250); and all the components will be colored according to that. Valo will even recalculate highlight, focus and other colors based on that color to make everything look nice. Of course you can tweak all the colors yourself if you so like.

To get started, create a new Vaadin 7 project in Eclipse (use the latest plug-in version) or use the 7.3.0 Maven archetype (vaadin-archetype-application). Both create an example Valo theme for you with the basic variables already defined for you to tweak.

You can use Valo without any CSS or SASS skills. Just add @Theme(“valo”) to your UI class.

If you want to customize, archetype or IDE plugin has probably generated you an empty theme stub. You can do some simple changes by uncommenting some of the parameters or cut-n-pasting example parameters there. Still practicly zero CSS/SASS skills required.

If you want start making some larger changes, there is a quick
CSS, SASS and Valo intros in Book of Vaadin
. One should be able to get started with them quite fast with little background in CSS/SASS.

You should not need a custom widget for that. Instead you could just set a
converter
to a field. If “while you type” formatting is needed, you could implement that with
AbstractJavaScriptExtension
.

Thank you, i will wait for 7.4

Hi,

I am new to vaadin framwork please help me out how to implement spring security with hibernate using vaadin,please share me any example project or any idea,

thank you , i will wait for yours reply