cocktail d’expérience informatiquesGenève 3 & 4 octobre 2011

Seconde édition

Track

Auteur

Session

Java

Sami EKBLAD

Rich Portlets inLiferay 6 with Vaadin

soft-shake.ch

vaadin.com / sami

Rich Portlets in Liferay 6 with Vaadin

?

Vaadin is a UI framework

for desktop-like web apps

UI components

New configs, taglibs and syntax!?!

JavaScript,DOM, Applet,plugins?

htmljava

This is Java.Nothing else.

How does it work?

• Rich user experience• No plugins needed• Automatic state

synchronization (XHR)

• UI composition• Event handling & Data

Binding• Full Java API

Vaadin UI component architecture

HTTP(S) “Widget”Client-side peer for the component.

“UI Component”Server-side peer with state. (Button, Table, Tree, ...)

Vaadin UI component architecture

• Rich user experience• No plugins needed• Automatic state

synchronization (XHR)

• UI composition• Synchronous event

handling• Full Java API

HTTP(S) “Widget”Client-side peer for the component.

“UI Component”Server-side peer with state. (Button, Table, Tree, ...)

Vaadin UI component architecture

Vaadin Add-onThis is simply a jar

Reuse in any Vaadin application

ServletPortlet GAE

Leverageexisting Java skills

Manage large application projects

Vaadin Component Architecture

Powerful add-on packaging. Puts everything in reuse

Designers can use CSS and web design tools

Full benefit from object oriented language

Designed for development teams

Liferay Portal

!"#$%&'()*+",-./0+1-)•  Cross Promotion •  Categories View

•  Functionality •  Certified •  Price

Liferay IDE

Vaadin Control Panel

Vaadin Plugin for Eclipse

... and more

WSRP support

Liferay IPC plugin

Liferay application theme

Demo:Optimize theCode-Deploy-Test Cycle

Vaadin in Liferay - what you need?

Vaadin Plugin for Eclipse w/ visual editor(get it from vaadin.com/eclipse)

Vaadin Control Panel portlet(get it from vaadin.com/directory)

Liferay IDE 1.3 for portlet development

3 Vaadin: A Familiar Way to Build Web Apps with Java

DZone, Inc. | www.dzone.com

Figure 4: The Class Diagram presents all user interface component classes and the most important interfaces, relationships, and methods.

You are here

...

Developer Productivity

Design, package and reuse UI components as Vaadin Add-ons.

Optimize the deployment cycle using hot-code replacement.

Develop in single programming language as much as possible.

Vaadin Directory

Screen shot 2011-04-14 at 12.46.14.png

Calendar

view and manage events in a monthly or a weekly view.

IE6Crash

make the world more compatible.

Vaadin TouchKit 2.0

building mobile web applications with Vaadin

Visualizations

powerful charts for all data visualization needs

Learn more?

Book ofVaadin

Onlin

e

PDF

Get

Mo

re R

efca

rdz!

Vis

it r

efca

rdz.

com

#148M

aste

ring

Po

rtal

UI

Dev

elo

pm

ent

Wit

h V

aad

in a

nd L

ifer

ay

By Sami Ekblad, James Falkner

Mastering Portal UI Development With Vaadin and Liferay

The open source Liferay Portal has become a popular way of implementing enterprise websites. Providing an integrated platform for application development and deployment, Liferay has also become an environment for running business applications. For application development, Liferay Portal includes Vaadin as a pre-packaged framework for developing attractive, easy-to-use applications.

About this Refcard This Refcard gives a quick overview of the user interface development with Vaadin on Liferay. It covers topics like portlet setup, configuration, inter-portlet communication (IPC), UI composition, and theming. To get a more general understanding of Liferay Portal and Vaadin framework, see the Refcards “Liferay Essentials” and “Vaadin: A Familiar Way to Build Web Apps With Java”.

STARTING THE DEVELOPMENT

Strategies for Portal User Interface Portlets are small web applications written in Java. They run in a piece of a web user interface within a portal. Portal manages the lifecycle and aggregation of portlets to a single visible web page. When designing a user interface for a portal, there are a few strategies based on UI granularity:

JavaServerFaces Server-side user interface component framework based on JSP and tag libraries.

Java, XML, JSP

.

Spring MVC Action oriented Model-View-Controller framework for web pages.

Java, XML, JSP

Struts 2 Action oriented Model-View-Controller framework for web pages.

Java, XML, JSP

Vaadin A rich Java-only component framework based on Ajax/GWT

Java

Apache Wicket Server-side component framework based on Java and HTML.

Java, HTML

Different portlets can use different frameworks to implement the user interface.

PORTLET DEVELOPMENT WITH VAADIN

Vaadin is a server- and component-oriented user interface framework for Java web applications. Vaadin applications can be hosted as standalone web applications as well as portlets in portals like Liferay. Vaadin is a good choice for building complete applications that use Liferay as a platform.

Portlets created with Vaadin are essentially Ajax web applications that can be considered single-page applications. This means that the page is not reloaded after it is opened initially; rather, it communicates user interaction with the server through Ajax communications.

brought to you by...

CONTENTS INCLUDE:Starting the Development

Portlet Development with VaadinTools for Vaadin DevelopmentComposing the User Interface with VaadinTheming Vaadin ApplicationsInter-Portlet Communication (IPC)

Get

Mo

re R

efca

rdz!

Vis

it r

efca

rdz.

com

#85 A

Fam

iliar

Way

to

Bui

ld W

eb A

pp

s w

ith

Java

CONTENTS INCLUDE:

About VaadinCreating an ApplicationComponentsLayout ComponentsThemesData Binding and more... By Marko Grönroos

Vaadin: A Familiar Way to Build Web Apps with Java

ABOUT VAADIN

Vaadin is a server-side Ajax web application development framework that allows you to build web applications just as you would with traditional desktop frameworks, such as AWT or Swing. An application is built from user interface components contained hierarchically in layout components.

In the server-driven model, the application code runs on a server, while the actual user interaction is handled by a client-side engine running in the browser. The client-server communications and any client-side technologies, such as HTML and JavaScript, are invisible to the developer. As the client-side engine runs as JavaScript in the browser, there is no need to install plug-ins.

Figure 1: Vaadin Client-Server Architecture

If the built-in selection of components is not enough, you can develop new components with the Google Web Toolkit (GWT) in Java.

The application can change the components and the layout dynamically according to the user input.

Figure 2: Architecture for Vaadin Applications

You can create a Vaadin application project easily with the Vaadin Plugin for Eclipse, with NetBeans, with Maven or with Spring Roo.

Event ListenersIn the event-driven model, user interaction with user interface components triggers server-side events, which you can handle

brought to you by...

Great Community Forums

Vaadin 6.7is “Geneva”

Today

vaadin.com/download

TreeTable

build hierarchical tables

Chameleon Theme

color theme designer

SQLContainer

quick SQL binding

Liferay ControlPanel 1.0

Manage Vaadin applications in a portal

+ 108 other enhancementsand fixes

Questions?