Posts tagged: Vaadin

Switch button for Vaadin 7.1

Post to Twitter

There's a nice AddOn in the Vaadin Directory. It's a switch button/checkbox. There's an older version for vaadin 6.6+ and the current version for 7.2+.

But the 7.2+ version is not compatible with vaadin 7.1+. We checked the source code and made a version for 7.1.

If you need a 7.1 compatible switch AddOn, simply use this archive. It's a zip archive which contains the pre-compiled class files and changed source files. Simply use the zip (or rename it to jar) to rebuild your widgetset.

Don't use the 7.1 version for 7.2 because the API is different and it won't work. Simply use the original version for 7.2 and newer.

Page Navigation

Post to Twitter

Plain JVx Vaadin applications don't have page navigation as known from e.g. JSF applications. If you press "back" in your browser, the whole application is lost and "forward" will create a new application. Same problem with "reload".

It has nothing to to with JVx because it's a technology restriction. Isn't it?
Not necessarily!

You should know that vaadin has support for Browser Navigation, but this feature has no standard implementation because every application is different and has different requirements. If you create your own Vaadin application, you'll have to implement your own Navigation. It's not tricky but you should know how it works. A good starting point can be found in the book of vaadin. The main thing is that you should create your application with different views. A view is more or less a page. The navigator supports navigation between views. If you have different views, it's easy to use the Navigator.

But our generic application is a little bit different to plain Vaadin applications because JVx has work-screens. A work-screen is like a View or a page, but technology independent. A work-screen can be used for desktop applications and web applications without code changes. A desktop application usually doesn't offer Navigation as known from web browsers. So it's a good idea to have work-screens because it's independent of the used GUI technology and platform features.

If you use a JVx application as web application with Vaadin UI, you'll miss page navigation - for sure. We made some experiments with vaadin' page Navigation and are happy to present an awesome solution for this problem.

We did a generic implementation in our application frame and now it's possible to navigate between work-screens - out-of-the-box. It's implemented once in our application frame. Simply use it and page navigation works!

Here's a short demonstration:

Browser Navigation


Responsive Web Application

Post to Twitter

We have a great new feature in our generic web application. It's now responsive and supports big and small devices like smartphones, without additional coding. Everything will work out-of-the-box.

The application is generic which means that it's an application frame that can be used for you own requirements. We have a simple demo application for our internal tests.

Have a look:

JVx application with Vaadin UI


The menu changes the position and size. Also padding and margin are different if there's not enough space.

VaadinUI 1.2 released

Post to Twitter

Our VaadinUI 1.2 is available!
It's a feature release with some bugfixes.

The biggest change was the update to vaadin 7.1.15 and we've already 7.3.3 in our development branch (welcome Valo theme).

What's new?

  • Download extension

    Download dynamic content on-demand or whenever you want via WebSockets. More information and an example project for this extension.

  • Configuration of preserveOnUIRefresh

    Simply use preserveOnRefresh as init-param (true | false) in your web.xml or as URL parameter to preserve the application on browser refresh.

  • Use external CSS

    Use an external CSS file to configure your application style. There's no need to change genereated styles.css for simple tasks. Simply configure the init-param externalCss, e.g.

    <init-param>
      <param-name>externalCss</param-name>
      <param-value>../demoapp.css</param-value>
    </init-param>

    Place the demoapp.css in the root directory of your application (not application server ROOT).

    The css will be placed at the end of the stylesheet links in the generated index.html page.

  • Mobile check

    We check if the UI is running on mobile browsers and set parameters for your application: Web.mobile (= VaadinUI.PROP_MOBILE) and Web.mobile.tablet(only for iPad at the moment) (= VaadinUI.PROP_TABLET). Simply check the parameter in your application.

  • Cache for dynamic images

    If you use images from your classpath, vaadin generates internal URLs for you. This URLs are different per image and the browser cache doesn't work. This handling produces unnecessary requests. We solved the problem with an image cache on server side and custom Image resources. With this changes, the browser cache works as expected.

  • IDs for menu items

    We have an experimental solution for setting IDs on menu items. It's experimental because it's possible that vaadin implements support for that. In that case we won't need our solution anymore. But till then, it works. More information...

  • Responsive support

    It's now possible to register a resize event on the application launcher. Use this event to change your application on-demand. We have some impressions for you.

  • Self-contained packages for Portlets

    We have built-in support for self-contained portlets. It's possible to toggle between global and self-contained mode. Simply set the init-param vaadin.shared (true | false) in your web.xml to use vaadin shared from your application server or the self-contained vaadin.

    General information about self-contained packages.

  • invokeLater and WebSockets

    We've completely changed our invokeLater mechanism because it didn't work in previous versions.

Please check the changelog for a complete list.

Responsive Web Design

Post to Twitter

Hurray, we have a new buzzword: Responsive.

It's not brand new, but nowadays it's important because we use applications on different devices and the same application should work on different screen sizes/resolutions.

What does responsive mean?

Wikipedia:

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).

My opinion:

Don't waste space for unnecessary information.

If you have big menus and toolbars in your application, you should reduce the used space dependent of the available space.

We did some experiments with our vaadin UI and have some impressions for you:

App full space

App full space

 
App with limited space

App with limited space

The application on the right has a small menu without additional text and with small padding. All gaps are smaller than in the orginal application on the left.

We used custom css and source code to change the UI because not everything was possible with CSS e.g. set tooltips instead of button text. A set of instructions was posted from Matti Tahvonen.

We made some smaller changes in our Vaadin UI to support technology independent handling of resize changes.

It will be possible to do following:

launcher.eventComponentResized().addListener(this, "doLauncherResized");

...

public void doLauncherResized(UIComponentEvent pEvent)
{
    IDimension dim = ((ILauncher)pEvent.getSource()).getSize();
   
    if (dim != null)
    {
        int iWidth = dim.getWidth();
       
        if (iWidth < 800)
        {
            layoutMode = LayoutMode.Small;
        }
        else
        {
            layoutMode = LayoutMode.Full;
        }

        resizeMenu();
    }
}

One application, different styles

Post to Twitter

Impressions

The first image shows the legacy mode of our standard application style (check last image). It turns a SDI application to MDI - without coding or re-deployment. Simply awesome :)

The second image doesn't use a toolbar and the third one is without a menubar. Not all applications need multiple navigation elements, known from desktop applications.

The fourth image shows, what we prefer.

Legacy mode (MDI)

Legacy mode (MDI)

 
Legacy mode (no toolbar)

Legacy mode (no toolbar)

Legacy mode (no menubar)

Legacy mode (no menubar)

Modern mode (SDI with popups)

Modern mode (SDI with popups)

One more ;-)

Modern style (menu right)

Modern style (menu right)

[Update]

The same application with Swing UI

Swing UI

Swing UI

Add IDs to your Vaadin Menu items

Post to Twitter

It's a shame :) but Vaadin doesn't have built-in support for setting an ID on menu items. There are several tickets about this problem: http://dev.vaadin.com/ticket/3873, http://dev.vaadin.com/ticket/11307, http://dev.vaadin.com/ticket/14294

BTW, the whole menu solution is a little bit tricky and wrapped.

There are no excuses - a web technology should fully support web concepts. We tried to touch menu items, by ID, during our UI test automation efforts. It wasn't a problem to find an xpath for accessing menu items, but... it's a principle thing.

It was a nice task to implement ID support for menu items. We found a "general" solution - it's still a workaround, but as long as vaadin doesn't support it, it might help you.

Summarized

Extend server-side MenuBar and add a map for menuitem ids. Send the map to the client and add the id to the matching menu item. The client-side needs an extended VMenuBar and an extended MenuBarConnector.

We've used MenuBar for caching ids because it wasn't possible to extend menu item handling and MenuBar already has a connector.

An example

Menuitem IDs

Menuitem IDs

Details

The implementation is available in our Vaadin UI implementation. Simply use following classes:

MenuBar
VMenuBar
MenuBarConnector

And don't forget the replacement mappings for your widgetset before you start the compiler:

Widgetset replacements

The solution was built with vaadin 7.1 but we checked the implementation in 7.3.0 and it didn't change. So our workaround should work without problems.

We didn't need a lot LoC to solve the problem and it should be easy for you to understand what we did. If you want to know more details - simply ask.

Usage

A short code snippet:

MenuBar bar = new MenuBar();

MenuItem miInsert = bar.addItem("Insert");
MenuItem miUpdate = bar.addItem("Update");

bar.setId(miInsert, "mi_insert");
bar.setId(miUpdate, "mi_update");

As written before, it's not possible to set the ID on the item because of original implementation in vaadin. Don't use getId of menu item because this will return the "internal" id.

Keep coding :)

New application frame feature - No menu

Post to Twitter

All our applications have a menu and a toolbar. This is great for backend applications but not always good for web frontends. Our web UIs have a different menubar, styled for web, but it's always visible. If you have simple web forms, you won't use a menu. We did some changes and have new options for applications without menu and toolbar :)

Some impressions with standard (backend) Desktop application and as (frontend) web application:

Backend application (Swing)

Backend application

 
Frontend application (Vaadin)

Frontend application

It's very simple to hide the menu. Simply set an application property via application.xml or directly via launcher - that's it. We changed our web menu and allow access to internal panels and components. It will be possible to hide buttons, change layouts, etc.

It's still possible to create your own, custom, application frame or extend our pre-defined frame. The new feature will be available in the next VisionX update.

Vaadin UI application frame and windows

Post to Twitter

Our custom Vaadin application frame isn't a MDI. It's "web SDI" . We didn't show popup windows aka internal frames with work-screen content. We did embedd the content directly into the web page. But we changed the default implementation a little bit because it makes sense to show popup windows for modal work-screens. Modal frames are important for database applications. Such frames could be used for showing record details, for creating new records, ...

So it makes sense that our application frame supports such specific work-screens. And the good news is that we've support for this.

It could look like following screenshot:

Modal frame

Modal frame


It's a screenshot from one of our test applications. The feature isn't generally available yet, but it will be part of the next VisionX release.

Vaadin and generic downloads in Portlets

Post to Twitter

Do you use a Vaadin application as portlet with e.g. Liferay and does your application create generic downloads (e.g. reports)?

If you want to download generic/dynamically created files from a portlet, you don't have too many options. You could use the FileDownloader extension or you could open a new window with the file resource. But both options are not perfect. The FileDownloader has to be connected to a clickable component e.g. a button and the new window won't be closed automatically (browser dependent). The FileDownloader is a good solution (see recommendations) but it triggers the download from the browser via user interaction. If you have dynamic UIs or if you can't use a FileDownloader because you need a more generic solution, then you could have a problem?

Our JVx Vaadin UI implementation is very dynamic and a developer doesn't use native vaadin components (until he needs to do). The FileDownloader didn't work for us because of UI abstraction. But we have a solution that might help you as well. Its comparable to FileDownloader but it's not user driven.

Simply use our extension with your UI:

//only once in init
DownloaderExtension downloader = new DownloaderExtension();
downloader.extend(this);

//start the download
downloader.setDownloadResource(resource);

The extension is not limited to UI but one Downloader per application is enough.

The source code is available in our repository.