This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information

Posts tagged: Vaadin

Vaadin UI application frame and windows

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

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.

Vaadin push and JVx callback

We fully support Vaadin' push support with current JVx *nightly* builds (see JVx with vaadin UI and server-side push). We had some problems with manual push mode because of some strange implementations of atmosphere in vaadin. We found a better solution to be independent of vaadin changes (should work with 7.1.8 and later).

No we automatically push if you use standard threads or threads, created via VaadinFactory. It's also possible to use JVx' callback mechanism for push operations. If you won't use threads in your client application, simply make an async server call. The server implementation automatically starts a new thread and executes the task. The server will notify the client after the task is finished. This is a little bit strange because client and server run on the application server, if you use our vaadin UI. If your JVx client retrieves the result of an async call, it will automatically push the results to the vaadin client. This makes the whole application very smart and live.

It's very easy to work with async calls in JVx. Simply use a callback listener:

getConnection().callAction(new ICallBackListener()
{
    @Override
    public void callBack(CallBackEvent pEvent)
    {
        butCallBack.setImage(IMAGE_YESNO);
    }
},
"asyncServerAction");

The server method in Session LCO:

public int asyncServerAction() throws Exception
{
    Thread.sleep(5000);

    return ++count;
}

We didn't change JVx' APIs to support vaadin push. It works behind the scenes and we simply love it.

Use our nightly builds to see how it works.

Our brand NEW Demo application is online

Our good old showcase application was the first JVx application, developed in 2008. It showed some features of JVx but wasn't a real-world application. And of course, it was a small application :)

Some month ago, we decided to create a new real-world application. And what's better for JVx as an ERP system?
So we developed an ERP application :) It's not too feature-rich but demonstrates the full power of JVx.

It's the first application that contains all projects around JVx. The application runs as Java Applet, Webstart (applet or application mode), HTML5 (based on vaadin 7.1), mobile REST server for mobile clients (native iOS and Android) and our rewritten Online Help. Oh, and the built-in JVx REST interface. The application is a multi-user application with a user/role management.

The ERP system demonstrates a real-world Single Sourcing approach. A fat backend with a smart frontend and it supports mobility strategies.

If you want more information about JVx and UI independent application development, visit our talk at W-JAX (Tuesday, 10:15 to 11:30, room Lillehammer)

Thanks Stefan for your great work!

Try out our new application:

http://demo.sibvisions.org/demoerp/ (Applet)
http://demo.sibvisions.org/demoerp/web/ui (vaadin based)
http://demo.sibvisions.org/demoerp/help/ (vaadin based)

Use following credentials (Username = Password):

Manager: manager
Sales person: sales

The whole source code of the application is online and available on SourceForge.

Feel free to send us your feedback!

VaadinUI 1.0 with JVx Archetype

If you want to use VaadinUI 1.0 with your maven project it's not an easy task because VaadinUI is not available via maven repositories - right now. But I want to show you an easy way to use VaadinUI 1.0 together with JVx Archetype 1.2.0.

Simply create a new maven project (my IDE is Eclipse) based on JVx Archetype 1.2.0. This archetype references JVx 1.2. Older versions are not compatible with Vaadin UI 1.0 - because of new features in JVx' launcher interface. In order to use Vaadin for JVx applications, add following dependencies to the pom.xml of your server project:

<dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-server</artifactId>
        <version>${vaadin.version}</version>
</dependency>
<dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-client-compiled</artifactId>
        <version>${vaadin.version}</version>
</dependency>
<dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-client</artifactId>
        <version>${vaadin.version}</version>
        <scope>provided</scope>
</dependency>
<dependency>
        <groupId>com.vaadin</groupId>
        <artifactId>vaadin-themes</artifactId>
        <version>${vaadin.version}</version>
</dependency>
<dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.4</version>
        <scope>provided</scope>
</dependency>

Set the global property in parent project pom.xml:

<properties>
        <jvx.version>1.2</jvx.version>
        <vaadin.version>7.0.6</vaadin.version>
</properties>

Because Vaadin runs on server-side, our client has to be deployed on server-side as well. Change pom.xml of your war project:

<dependency>
        <groupId>${project.parent.groupId}</groupId>
        <artifactId>${project.parent.artifactId}-client</artifactId>
        <version>${project.parent.version}</version>
</dependency>

This is not a perfect solution because jvxclient.jar will be added. This lib is not necessary because jvxall.jar is already available - but also not a problem!

The last step is the integration of JVx' VaadinUI. There are many solutions to integrate external libraries but maven is not a friend of external libraries. Using system scrope is evil and such libraries won't be added to war files. Deploying external jars to a local maven repository works but why should we do that? I did decide to use sort of a local maven repository placed in my project with following file structure in my server project:

mvn_repo_project

The integration in pom.xml of server project:

<repositories>
 ...  
 <repository>
    <id>in-project</id>
    <name>External libs</name>
    <url>file://${project.basedir}/lib</url>
 </repository>
</repositories>

Finally we need additional dependencies (server project):

<dependency>
        <groupId>com.sibvisions</groupId>
        <artifactId>jvxvaadin-client</artifactId>
        <version>1.0</version>
   </dependency>
<dependency>
        <groupId>com.sibvisions</groupId>
        <artifactId>jvxvaadin-server</artifactId>
        <version>1.0</version>
   </dependency>
<dependency>
        <groupId>com.sibvisions</groupId>
        <artifactId>jvxvaadin-themes</artifactId>
        <version>1.0</version>
</dependency>

The last integration step is the modification of web.xml in our war project:

<!-- Vaadin UI -->
 
  <servlet>
    <servlet-name>VaadinServlet</servlet-name>
    <servlet-class>com.sibvisions.rad.ui.vaadin.server.VaadinServlet</servlet-class>
               
    <init-param>
      <param-name>UI</param-name>
      <param-value>com.sibvisions.rad.ui.vaadin.impl.VaadinUI</param-value>
    </init-param>
               
    <init-param>
      <param-name>widgetset</param-name>
      <param-value>com.sibvisions.rad.ui.vaadin.ext.ui.Widgetset</param-value>
    </init-param>
               
    <init-param>
      <param-name>main</param-name>
      <param-value>com.sibvisions.apps.myproject.MainApplication</param-value>
    </init-param>
  </servlet>
       
  <servlet-mapping>
    <servlet-name>VaadinServlet</servlet-name>
    <url-pattern>/vaadinui/*</url-pattern>
  </servlet-mapping>

  <servlet-mapping>
    <servlet-name>VaadinServlet</servlet-name>
    <url-pattern>/VAADIN/*</url-pattern>
  </servlet-mapping>

That's it.

Use the war project together with an application server in Eclipse and enter http://localhost/myproject/vaadinui/ in a web browser to start your application with VaadinUI - with debugging support. Create a war file, deploy it and it will work without problems.

JVx application with Vaadin launcher on iPad mini

For those, who don't know why the world needs single sourcing and only one framework for backend/frontend/mobile, we have a new use-case!

It's a new application that has different user groups. The first group sits in the backoffice and configures/crunches data. This user group needs a powerful backend application that supports fast (mass) data manipulation. The second user group are end users. This group needs a fancy web based application because an application must be cool and browser based (nowadays).

If you'll develop such an application with different UI frameworks and different technologies (Java, HTML, Javascript), different ORM tools, and for different browsers, clients, OS', you'll need time and a lot know how and maybe many developers.

Wouldn't it be great to use one framework that is powerful enough? The framework shouldn't be restrictive because we (software developers) want to be flexible and include our preferred libraries. No worries, JVx is flexible, small and is not restrictive.

If you develop your application with JVx, you have no problem with different platforms and devices. A JVx application runs as desktop application, in your browser as html application, on your mobile devices as html application and on your mobile devices as native application.

But enough advertising, lets look at the application. First, the backend application:

Video Backend

Video Backend

And the frontend, as video (video speed it's a little bit slow because it was recorded via Wi-Fi):


JVx frontend application

(The video shows our new maximize option, because mobile devices have limited space)

Above applications are not two separate applications. It's only one application with different users and roles. It looks different as desktop application than as web application. The only framework you need to know is JVx. It's not needed to be a html/javascript developer.

The framework is still simple and don't code multiple applications for different devices/platforms. Save time and be happy!

JVx Vaadin UI 1.0 is code complete

Our new UI implementation for JVx is code complete. We did implement all necessary JVx interfaces and many cool features. Compared to our old web UI, based on GXT (extJS), the new one is back to the roots - back to Java. We use Vaadin 7 as rendering engine and are happy with the Apache 2.0 license.

The old web UI didn't have a tree implementation and the chart engine was based on Flash. Our new JVx Vaadin UI has a tree implementation and it supports Vaadin charts. Oh and another cool thing is the out-of-the-box support for mobile devices. This wasn't really cool with old web UI.

I wanna show you some screenshots with a really cool JVx application:

Charts

Charts

 
Tree

Tree

The application is a JVx application but with some CSS.
The same application - as desktop version, looks like a standard swing application (started with Swing launcher):

Charts (swing)

Charts (swing)

 
Tree (swing)

Tree (swing)

We didn't change the source code of the application to run it as Vaadin application and as Swing application. The only difference was the configuration via web.xml for Vaadin and start parameters for swing.

The source code of JVx Vaadin UI is available, but we need some time to review the code before we release the binaries.

Liferay Portlets with JVx

Most of you know JVx as a full-stack application framework. You use it for creating backend applications or for your ERP applications. It offers different UI implementations for Desktops, Mobile Devices and Web Browsers. It has so many productivity features and now there is one more:

Run your JVx application as Liferay Portlet

Yes, you read right - a whole application!

How it looks like?

JVx as Vaadin Portlet

JVx as Vaadin Portlet

It's not a fake, it's the well known Contacts screen from our Showcase application. We didn't change the source code to run the screen as Portlet! As you can see, we didn't use menus or toolbars, only one screen. A Portlet should be simple because Liferay offers menus and site navigation.

How it works?

Use your existing application, bundle it together with JVx.vaadin and configure the Portlet Launcher in your deployment descriptor. You need some additional configuration files for liferay, but there's no difference between your current Portlets and a Portlet for a JVx application.

Everything you need is Open Source and released under Apache License 2.0, but we don't have detailed documentation at the moment. Support us with your contribution!

Boost your productivity

If you develop a lot of different Portlets for your customers and won't waste time for XML file creation, simply use VisionX. It has a WYSIWYG UI editor and creates your database model on-the-fly. It is your pain killer!

It offers Liferay Portlet creation with 4 mouse clicks. Don't create everything manually and save time - Use VisionX!

VisionX Screen Design

VisionX Screen Design

We've used VisionX to demonstrate the creation of above contacts screen. We spent 5 minutes to create a complete application, with database model, user management and Liferay Portlet deployment. We were amazingly fast!

A new JVx Application Style with Vaadin

Every Java developer heard "Write once run anywhere" more than once. But exactly this is what JVx stands for.

Write your application only once and run it on your desktop, as Java application in your browser, as Java Webstart application or as HTML5 application in your browser. Oh, and why not... run it as native application on your mobile devices. Everything is possible and was successfully tested with JVx.

As a rule, don't create more than one application for all that platforms. And there's no need to change your source code, to run your application on one or all of those platforms. One code base for all platforms!

If you'll create a simple application, it will look like one of these:

JVx SwingUI (Browser)

JVx SwingUI (Browser)

 
JVx SwingUI (Desktop)

JVx SwingUI (Desktop)

The left screenshot shows a JVx application started as Java application in your Browser. On the right is the same application as desktop version. This was cool some years ago, but isn't nowadays - isn't it?

Nowadays you need a modern web application that runs in your browser without plugins.

Does anybody know what MDI means and do you think MDI is convenient for modern web applications?

We don't think so, because web UIs should be simple and clean.

What do you think about following screenshot:

JVx VaadinUI

JVx VaadinUI

Trust me, it's not a fake. It's the same application as above, but started with JVx' VaadinUI and a different application style. Isn't it amazing?

Are you curious? Interested in other screenshots?
No problem:

Contacts

Contacts

 
Application Login

Application Login

(Thanks to Vaadin Dashboard demo application for the inspiration)

I'm thrilled and what about you?

As I told you, all screenshots were from the same application and without code changes! This is possible because of JVx' single sourcing principle. One great feature and a big advantage of JVx is that it doesn't hide the underlying technology from you. If you want use technology specific components or features, just do it. But be aware, if you use technology dependent things you should check the technology first, to be still technology independent and avoid problems!

Sounds confusing?

A simple example should explain what I meant. In our example we'll show a standard Vaadin window in our application.

//com.vaadin.ui.Window
Window winLogin = new Window();

winLogin.setContent(new CssLayout());
winLogin.setPrimaryStyleName("jvxwindow");
winLogin.setWidth("200px");
winLogin.setHeight("200px");
winLogin.center();

//access the underlying vaadin resource and add the window
((UI)((UILauncher)getApplication().getLauncher()).getResource()).addWindow(winLogin);

We are still technology independent but above code only works with Vaadin! You always have access to the "real" resource via getResource() but the returned object dependes on the used technology. In our example, the UI.

Another example of technology mixing, directly from our Vaadin integration:

VerticalLayout vlayout = new VerticalLayout();

UIMenuBar mbSettings = new UIMenuBar();

UIMenu menSettings = new UIMenu();
menSettings.setImage(UIImage.getImage("/images/gear.png"));

UIMenuItem meniChangePassword = new UIMenuItem("Change password");
meniChangePassword.eventAction().addListener(this, "doShowChangePassword");
       
menSettings.add(meniChangePassword);
       
mbSettings.add(menSettings);
 
vlayout.addComponent(((WrappedMenuBar)mbSettings.getResource()).getMenuBar());

We created a Menu with JVx and added the menu to a standard Vaadin VerctialLayout. The advantage is that we can use JVx' event concept instead of Vaadin' listener concept. How?

Did you see following statement:

meniChangePassword.eventAction().addListener(this, "doShowChangePassword");

This means every click on the menu item calls the method doShowChangePassword of object this. If you want the same result with Vaadin listeners, you have to do following:

MenuBar menubar = new MenuBar();

MenuBar.Command cmdChangePassword = new MenuBar.Command()
{
    public void menuSelected(MenuItem selectedItem)
    {
        doShowChangePassword();
    }  
}

MenuBar.MenuItem miSettings = menubar.addItem("Settings", null, null);

miSettngs.addItem("Change password", null, cmdChangePassword);

Technology mixing works in both directions. It's so great!

One of the best features of JVx with Vaadin is the usage of CSS. It has never been easier to style your application. Set CSS directly via css file or programmatically via Vaadin API.

Expect amazing results!

JVx with JavaFX and Vaadin and Exchange appointments

Wow, what a title :)

Some weeks ago, I blogged about JVx with Exchange servers. The project now supports Appointments and Tasks.

To demonstrate some features, we created an application that integrates powerful frameworks. We took Vaadin with Calendar AddOn, JavaFX' webview and integrated all together in a standard JVx application.

Take a look:

JVx + JavaFX + Vaadin + Exchange

JVx + JavaFX + Vaadin + Exchange



Did you notice that the calendar is a JavaFX WebView?

Our exchange storages still use the EWS Java API but now with some tweaks.
More information will follow in other posts...