Please Help me to fire JS vaadin.forceSync it is not working

Hi,

I am new to Vaadin. It is wonderful framework to work on.

But I am stuck a problem please help me.

From a Main UI I am running a thread that after some time (5 sec) updates one row data in a table in main window.

I want it to happen asynchronously . But caling

application.getMainWindow().executeJavaScript(“javascript:vaadin.forceSync();”); /

application.getMainWindow().executeJavaScript(“vaadin.forceSync();”);

from thread table is not updated is happening.

But putting it as a link and firing that UI is rerendered.

Please find the code

Main Application Class

package com.ui;

import com.vaadin.Application;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Table;
import com.vaadin.ui.Window;

@SuppressWarnings("serial")
public class TestVaadinApplication extends Application {

	public Panel mainPanel=null;
	public AbsoluteLayout layout=null;
	public Table urDBTable=null;
	public Label syncLabel=null;

	@Override
	public void init() {
		buildMainLayout();
		startSeperateUIThread();

	}

	private void startSeperateUIThread() {
		try{
			new UIStateChangeThread(this).start();
		}catch(Exception e){
			e.printStackTrace();
		}
		
	}

	private void buildMainLayout() {
		setMainWindow(new Window("Test Vaadin Application"));
		layout = new AbsoluteLayout();
		layout.setSizeFull();
		//layout.setImmediate(true);
		setMainPanel(getMainPanelComponent());
		layout.addComponent(getMainPanel(),"top:8%; left:25%;");
		setSyncLabel(new Label(
                "<a href=\"javascript:vaadin.forceSync();\">javascript: vaadin.forceSync();</a>",
                Label.CONTENT_XHTML));
		getMainWindow().setContent(layout);
	}

	private Panel getMainPanelComponent() {
		final Panel panel=new Panel("Server Status");
		panel.setHeight("700px");
		panel.setWidth("890px");
		panel.setScrollable(false);
		//panel.setImmediate(true);
		panel.addComponent(getTableGridStructureForDBInfo());
		
		return panel;
	}
	
	private GridLayout getTableGridStructureForDBInfo() {
		GridLayout grid=new GridLayout(1,2);
		grid.setSpacing(false);
		grid.setWidth("800px");
		grid.setHeight("325px");
		//grid.setImmediate(true);

		Label urDBLabel = new Label("<h1>UR DB INFORMATION</h1>");
		urDBLabel.setContentMode(Label.CONTENT_XHTML);
				
		setUrDBTable(getURDBTable());
		grid.addComponent(urDBLabel,0,0);
		grid.addComponent(getUrDBTable(), 0,1);
		return grid;
	}
	
	private Table getURDBTable() {
		Table table = new Table();
		//table.setImmediate(true);
		table.addContainerProperty("Parameters",String.class,null);
		table.addContainerProperty("Value",Label.class,null);
		//table.addContainerProperty("Button",Button.class,null);
		table.addItem(new Object[]{"Database Server Name:","localhost:50001"},new Integer(1));
		table.addItem(new Object[]{"Schema Name :","UR;"},new Integer(2));
		table.addItem(new Object[]{"Database Name :","UR_DEV"},new Integer(3));
		table.addItem(new Object[]{"Datasource Name :","superPnrDB2DS "},new Integer(4));
		table.addItem(new Object[]{"Available DB Connections :","50"},new Integer(5));

		Label activeOrInactiveLabel=new Label("<b style=\"color: #009933\">ACTIVE</b>",Label.CONTENT_XHTML);
		table.addItem(new Object[]{"Database Status :",activeOrInactiveLabel},new Integer(6));
		table.setHeight("210px");
		table.setWidth("400px");
		table.setEditable(false);
		table.setColumnReorderingAllowed(false);
		table.setColumnCollapsingAllowed(false);
		return table;
	}

	public Panel getMainPanel() {
		return mainPanel;
	}

	public void setMainPanel(Panel mainPanel) {
		this.mainPanel = mainPanel;
	}

	public AbsoluteLayout getLayout() {
		return layout;
	}

	public void setLayout(AbsoluteLayout layout) {
		this.layout = layout;
	}

	public Table getUrDBTable() {
		return urDBTable;
	}

	public void setUrDBTable(Table urDBTable) {
		this.urDBTable = urDBTable;
	}

	public Label getSyncLabel() {
		return syncLabel;
	}

	public void setSyncLabel(Label syncLabel) {
		this.syncLabel = syncLabel;
	}




}

Thread code



package com.ui;

import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.ui.Table;


public class UIStateChangeThread extends Thread {

	private TestVaadinApplication  application;
	
	public UIStateChangeThread(TestVaadinApplication application) {
		this.application=application;
	}

	@Override
	public void run(){
		try{
			Thread.sleep(5000);
			Table urDBTable = this.application.getUrDBTable();
			Item item = urDBTable.getItem(new Integer(1));
			Property itemProperty = item.getItemProperty("Parameters");
			itemProperty.setValue("Indraneel");
			urDBTable.requestRepaint();
			application.getMainWindow().executeJavaScript("javascript:vaadin.forceSync();");
			
		}catch (Exception e) {
			e.printStackTrace();
		}
	}
}

Please help me ASAP I need it urgent

This will not work the way you intended. Because the client doesn’t know, there is a change on the server.
You need an (invisible) ProgressIndicator on your page for the client to poll from the server.
Then the refresh of your table should be done automaticly.
As an alternative to the ProgressIndicator you could use the
Refresher AddOn
.

Or you can use server push - see
this thread
.
You should never need to call forceSync() from a Vaadin program, only in some special cases from other JavaScript.

Note also that your background thread needs to synchronize (also indirect via properties etc.) updates to UI components to the Application - see the above mentioned thread.


Sascha Broich:

Hi,

Thanks for the reply

But implementing Refresher I am getting this error is browser

please wait while the database is queried
Widgetset does not contain implementation for com.github.wolfie.refresher.Refresher. Check its @ClientWidget mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions. Unrendered UIDL: (with web.xml v1)

or

This popup message

Failed to load the widgetset: /vaadinserverpush/VAADIN/widgetsets/com.github.wolfie.refresher.RefresherApplicationWidgetset/com.github.wolfie.refresher.RefresherApplicationWidgetset.nocache.js?1305838718951

com.github.wolfie.refresher.Refresher(NO CLIENT IMPLEMENTATION FOUND) (with web.xml v2)


web.xml (v1)



<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>serverstatus</display-name>

	<servlet>
		<servlet-name>VaadinApplicationRunner</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationRunnerServlet</servlet-class>
	</servlet>

	<servlet>
		<servlet-name>ServerStatus</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
		<!--servlet-class>org.vaadin.artur.icepush.ICEPushServlet</servlet-class-->
		<init-param>
			<param-name>application</param-name>
			<param-value>com.ui.ServerStatusApplication</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>ServerStatus</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>
	
	<context-param>
		<description>Vaadin production mode</description>
		<param-name>productionMode</param-name>
		<param-value>true</param-value>
	</context-param>

</web-app> 


web.xml (v2)



<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>ServerPushApplication</display-name>

	<servlet>
		<servlet-name>VaadinApplicationRunner</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationRunnerServlet</servlet-class>
	</servlet>

	<servlet>
		<servlet-name>ServerPushApplication</servlet-name>
		<servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class>
		<!--servlet-class>org.vaadin.artur.icepush.ICEPushServlet</servlet-class -->
		<init-param>
			<param-name>application</param-name>
			<param-value>com.ui.RefresherApplication</param-value>
		</init-param>
		<!--init-param> <description>Application widgetset</description> <param-name>widgetset</param-name> 
			<param-value>org.vaadin.artur.icepush.ICEPush</param-value> </init-param -->
		<init-param>
			<description>Application widgetset</description>
			<param-name>widgetset</param-name>
			<param-value>com.github.wolfie.refresher.RefresherApplicationWidgetset</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>ServerPushApplication</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>

	<context-param>
		<description>Vaadin production mode</description>
		<param-name>productionMode</param-name>
		<param-value>true</param-value>
	</context-param>

</web-app> 

I am using Runo theme

My project Directory structure is

Please help

Linking to an image on your local disk does not really help…

You should create your own widgetset (.gwt.xml file) which inherits DefaultWidgetset and as well as the Refresher widgetset and the ICEPush widgetset. Then refer to your own widgetset in web.xml.

The Eclipse plugin “Compile widgetset” button can do some of the steps automatically. See
this book chapter
or
Directory help
(whether using the Eclipse plugin or not).

Note also that the VaadinApplicationRunner servlet is unnecessary and useless in your case.

Hi Henri,

Many thanks for suggestion . I am able to implement Refresher and ICEPush (in jboss 4.2.2) both.

But in case of ICEPush when I put the code in my application I am getting this exception in jboss 4.2.2 console



14:34:11,286 ERROR [STDERR]
 java.lang.RuntimeException: Must be attached to an a
pplication to push
14:34:11,286 ERROR [STDERR]
     at org.vaadin.artur.icepush.ICEPush.push(ICEPush
.java:55)
14:34:11,286 ERROR [STDERR]
     at com.ui.UIStateChangeThread.run(UIStateChangeT
hread.java:30)

I am giving my entire code below


TestVaadinApplication.java



package com.ui;

import org.vaadin.artur.icepush.ICEPush;

import com.vaadin.Application;
import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.GridLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.Table;
import com.vaadin.ui.Window;

@SuppressWarnings("serial")
public class TestVaadinApplication extends Application {

	public Panel mainPanel = null;
	public AbsoluteLayout layout = null;
	public Table urDBTable = null;
	public Label syncLabel = null;
	public ICEPush push = new ICEPush();

	@Override
	public void init() {
		buildMainLayout();
		startSeperateUIThread();

	}

	private void startSeperateUIThread() {
		try {
			new UIStateChangeThread(this, push).start();
		} catch (Exception e) {
			e.printStackTrace();
		}

	}

	private void buildMainLayout() {
		Window mainWindow = new Window("Test Vaadin Application");
		setMainWindow(mainWindow);
		mainWindow.addComponent(push);
		layout = new AbsoluteLayout();

		layout.setSizeFull();
		// layout.setImmediate(true);
		setMainPanel(getMainPanelComponent());
		layout.addComponent(getMainPanel(), "top:8%; left:25%;");

		getMainWindow().setContent(layout);
	}

	private Panel getMainPanelComponent() {
		final Panel panel = new Panel("Server Status");
		panel.setHeight("700px");
		panel.setWidth("890px");
		panel.setScrollable(false);
		// panel.setImmediate(true);
		panel.addComponent(getTableGridStructureForDBInfo());

		return panel;
	}

	private GridLayout getTableGridStructureForDBInfo() {
		GridLayout grid = new GridLayout(1, 2);
		grid.setSpacing(false);
		grid.setWidth("800px");
		grid.setHeight("325px");
		// grid.setImmediate(true);

		Label urDBLabel = new Label("<h1>UR DB INFORMATION</h1>");
		urDBLabel.setContentMode(Label.CONTENT_XHTML);

		setUrDBTable(getURDBTable());
		grid.addComponent(urDBLabel, 0, 0);
		grid.addComponent(getUrDBTable(), 0, 1);
		return grid;
	}

	private Table getURDBTable() {
		Table table = new Table();
		// table.setImmediate(true);
		table.addContainerProperty("Parameters", String.class, null);
		table.addContainerProperty("Value", Label.class, null);
		// table.addContainerProperty("Button",Button.class,null);
		table.addItem(
				new Object[] { "Database Server Name:", "localhost:50001" },
				new Integer(1));
		table.addItem(new Object[] { "Schema Name :", "UR;" }, new Integer(2));
		table.addItem(new Object[] { "Database Name :", "UR_DEV" },
				new Integer(3));
		table.addItem(new Object[] { "Datasource Name :", "superPnrDB2DS " },
				new Integer(4));
		table.addItem(new Object[] { "Available DB Connections :", "50" },
				new Integer(5));

		Label activeOrInactiveLabel = new Label(
				"<b style=\"color: #009933\">ACTIVE</b>", Label.CONTENT_XHTML);
		table.addItem(
				new Object[] { "Database Status :", activeOrInactiveLabel },
				new Integer(6));
		table.setHeight("210px");
		table.setWidth("400px");
		table.setEditable(false);
		table.setColumnReorderingAllowed(false);
		table.setColumnCollapsingAllowed(false);
		return table;
	}

	public Panel getMainPanel() {
		return mainPanel;
	}

	public void setMainPanel(Panel mainPanel) {
		this.mainPanel = mainPanel;
	}

	public AbsoluteLayout getLayout() {
		return layout;
	}

	public void setLayout(AbsoluteLayout layout) {
		this.layout = layout;
	}

	public Table getUrDBTable() {
		return urDBTable;
	}

	public void setUrDBTable(Table urDBTable) {
		this.urDBTable = urDBTable;
	}

	public Label getSyncLabel() {
		return syncLabel;
	}

}


and


UIStateChangeThread.java



package com.ui;

import org.vaadin.artur.icepush.ICEPush;

import com.vaadin.data.Item;
import com.vaadin.data.Property;
import com.vaadin.ui.Table;

public class UIStateChangeThread extends Thread {

	private TestVaadinApplication application;
	private ICEPush push;

	public UIStateChangeThread(TestVaadinApplication application, ICEPush push) {
		this.application = application;
		this.push = push;
	}

	@Override
	public void run() {
		try {
			Thread.sleep(5000);
			synchronized (this.application) {
				Table urDBTable = this.application.getUrDBTable();
				Item item = urDBTable.getItem(new Integer(1));
				Property itemProperty = item.getItemProperty("Parameters");
				itemProperty.setValue("Indraneel");
				urDBTable.requestRepaint();
			}
			this.push.push();

		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

Also contents of web.xml is



<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<display-name>vaadinrefresh</display-name>
	
	<servlet>
		<servlet-name>vaadinrefresh</servlet-name>
		<!--servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet</servlet-class-->
		<servlet-class>org.vaadin.artur.icepush.ICEPushServlet</servlet-class>
		
		<init-param>
			<param-name>application</param-name>
			<!--param-value>com.ui.RefresherApplication</param-value-->
			<param-value>com.ui.TestVaadinApplication</param-value>
		</init-param>
		
		<init-param>
  				<description>Application widgetset</description>
  				<param-name>widgetset</param-name>
  				<param-value>com.ui.widgetset.VaadinrefresherWidgetset</param-value>
		</init-param>
	</servlet>
	
	<servlet-mapping>
		<servlet-name>vaadinrefresh</servlet-name>
		<url-pattern>/*</url-pattern>
	</servlet-mapping>
	
</web-app>


using both refresh and ice push as widget

Many thanx to Henri Sara & Sascha Broich for guiding me.

I have fixed the issue having with refresher & ICEpush.

I was wrong attaching refresher/ICEPush to mainwindow rather than the mainlayout.

Vaadin is great!!!