How to Develop Vaadin Portlet

Vaadin Portlet

The core piece of the Vaadin Framework is the Java library that is designed to make creation and maintenance of high quality web-based user interfaces easy. Here We are going to develop Vaadin portlet Using Eclips With liferay.

If you are already install ide in your eclips then only you have to add Vaadin.jar file in your plugin-packeg.properties

Other wise you have to install ide in our eclips and then add Vaadin.jar file in your plugin- packeg.properties.

Step to create vaadin portlet in liferay 6.1 :

Step 1:
Open eclips => file => new => liferay project =>Enter your project name(like demo_vaadin)=>next=>select radio button for vaadin portlet =>finish
Step 2 :
Now go to the rootfolder=>WEB-INF=>plugin-packeg.property=>add vaadin.jar file.



Step 3 :
Go to the sdk folder =>portlets=>open build.xml file now go the line 138
you will find the line......
<replacetoken><![CDATA[<name>view-jsp</name>]]></replacetoken>
replace this line by
<replacetoken><![CDATA[<name>view-template</name>]]></replacetoken>
and go to the line 129 and put following code
speed-filters-enabled=false
Step 4 :
Start your server if not already started and go to the ant build and deploy your project
now go the dock bar menu =>add=>more=>click on your demo_vaadin portlet your portlet will say Hello DemoVaadin!
Note :
In Vaadin portlet there is no use of jsp page .you will do every thing in action file which is find under docroot/WEB-INF/src/demo_vaadin. In this file init() is already created if you want to display any control(like imput box ,button ,form etc)then you have to write code under init()

Now lets Add imput box and button in our portlet

Wire following code under init() and deploy
public class DemoVaadinApplication extends Application {
@Override

public void init() {

final Window window = new Window(); //making object of main window

Label label = new Label("Hello DemoVaadin!");

window.addComponent(label);

final TextField tf = new TextField("Enter Name :");

tf.setValue("Initial content");

window.addComponent(tf);

setMainWindow(window); //this line set main window

}

}

1. if you want to display any message on your portlet then write following code under init()

Label label = new Label("Hello DemoVaadin!");

window.addComponent(label);

until you will not write window.addComponent(label) your message will not visible on your portlet.

2. for adding text box write following code

final TextField tf = new TextField("Enter Name :");

tf.setValue("Initial content");

window.addComponent(tf);

3. adding button in portlet

Button okbutton = new Button("OK");

window.addcomponent(okbutton);

Handling input box with button:

Here are code for handling input box using button:
Button show = new Button("Show", new Button.ClickListener() {

final TextField md = new TextField("Enter Name :");

md.setValue("Initial content");

window.addComponent(md);

public void buttonClick(ClickEvent event) {

String valu=(String)md.getValue();//getting value of input box

System.out.println(value);//when you click on show button you will get input value of your input box on comsole

window.addComponent(show);

How date and time will display whwn you click on display time button

Here is complete code for this:

new Button("What is the time?",

new Button.ClickListener() {

//@Override

public void buttonClick(ClickEvent event) {

// TODO Auto-generated method stub

window.showNotification(

"The time is " + new Date());

}

}));