<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Robin&#039;s Tech Tips &#187; gwt</title>
	<atom:link href="http://robin.mytechtip.com/tag/gwt/feed/" rel="self" type="application/rss+xml" />
	<link>http://robin.mytechtip.com</link>
	<description>Just another My Tech Tip weblog</description>
	<lastBuildDate>Wed, 06 Jul 2011 02:35:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>GWT CellTable Example (Using AsyncDataProvider)</title>
		<link>http://robin.mytechtip.com/2010/11/17/gwt-celltable-example-using-asyncdataprovider/</link>
		<comments>http://robin.mytechtip.com/2010/11/17/gwt-celltable-example-using-asyncdataprovider/#comments</comments>
		<pubDate>Wed, 17 Nov 2010 05:25:52 +0000</pubDate>
		<dc:creator>robin</dc:creator>
				<category><![CDATA[java]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[web]]></category>
		<category><![CDATA[gwt]]></category>
		<category><![CDATA[pagination]]></category>
		<category><![CDATA[table]]></category>

		<guid isPermaLink="false">http://robin.mytechtip.com/?p=134</guid>
		<description><![CDATA[GWT version 2.1 has finally been released with the anticipated business level data presentation widgets and other interesting features. CellTable is one of the new widgets that supports pagination. Therefore, there no need to use PagingScrollTable in the gwt incubator or implementations in other third-party libraries.
From the Google official document on how to use data [...]]]></description>
			<content:encoded><![CDATA[<p>GWT version 2.1 has finally been released with the anticipated business level data presentation widgets and other interesting features. <code>CellTable</code> is one of the new widgets that supports pagination. Therefore, there no need to <a href="http://robin.mytechtip.com/2010/11/15/how-to-use-pagingscrolltable-in-the-gwt-incubator/" >use <code>PagingScrollTable</code> in the gwt incubator</a> or implementations in other third-party libraries.</p>
<p>From the <a href="http://code.google.com/webtoolkit/doc/latest/DevGuideUiCellWidgets.html" onclick="javascript:pageTracker._trackPageview('/outbound/article/code.google.com');">Google official document on how to use data presentation widgets</a>, you can get some examples of using these cell widgets including <code>CellTable</code>. It also includes a simple example of using <code>CellTable</code> with <code>SimplePager</code> to implement pagination. That example uses <code>ListDataProvider</code> which requires all the data that needs to be paged to be set at the client (browser) side. However, in realty, the common practice is to load only one page of data from the server (mostly pulled from a database) to the browser in order to save the bandwidth and improve the response time.</p>
<p>Of course the document indicates there are ways to implement the asynchronized page data loading from remote server.  It mentions that (at the time of writing of this post) (<strong>Update: the new Google document does not have the following text anymore</strong>):</p>
<blockquote><p><del datetime="2011-01-25T04:37:14+00:00">&#8220;GWT also provides the abstract class <code>AsyncListViewAdapter</code>, which you can  override to connect to an asynchronous data source, such as a database  running on a server.  Just implement the onRangeChanged() method and  request the data in the new Range for the specified cell widget.  When  the data is returned, call updateRowCount() and/or updateRowData() to  push the data to the widgets.&#8221;</del>
</p></blockquote>
<p><del datetime="2011-01-25T04:37:14+00:00">However,  it seems the official GWT 2.1 release does not have the class <code>AsyncListViewAdapter</code>. Instead, <code>AsyncDataProvider</code> is found. (A document bug?)</del></p>
<p>To illustrate how to use <code>AsyncDataProvider</code>, I modified a simple example from GWT below. </p>
<p><strong>Please note the example do not actually calls the server to get the data. It should be quite easy to modify the example to do so as illustrated in the next code snippet.</strong><br />
<script type="text/javascript"><!--
google_ad_client = "pub-3371750151985752";
google_ad_slot = "0950801022";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.util.Arrays</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.util.Date</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">java.util.List</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.cell.client.DateCell</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.core.client.EntryPoint</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.cellview.client.CellTable</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.cellview.client.Column</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.cellview.client.SimplePager</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.cellview.client.TextColumn</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.client.ui.RootPanel</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.user.client.ui.VerticalPanel</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.view.client.AsyncDataProvider</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">com.google.gwt.view.client.HasData</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> CellTableExample <span style="color: #000000; font-weight: bold;">implements</span> EntryPoint <span style="color: #009900;">&#123;</span>
&nbsp;
  <span style="color: #008000; font-style: italic; font-weight: bold;">/**
   * A simple data type that represents a contact.
   */</span>
  <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">class</span> Contact <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399;">String</span> address<span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399;">Date</span> birthday<span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #003399;">String</span> name<span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #003399;">String</span> name, <span style="color: #003399;">Date</span> birthday, <span style="color: #003399;">String</span> address<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">name</span> <span style="color: #339933;">=</span> name<span style="color: #339933;">;</span>
      <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">birthday</span> <span style="color: #339933;">=</span> birthday<span style="color: #339933;">;</span>
      <span style="color: #000000; font-weight: bold;">this</span>.<span style="color: #006633;">address</span> <span style="color: #339933;">=</span> address<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
  <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #008000; font-style: italic; font-weight: bold;">/**
   * The list of data to display.
   */</span>
  @SuppressWarnings<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;deprecation&quot;</span><span style="color: #009900;">&#41;</span>
  <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000000; font-weight: bold;">static</span> <span style="color: #000000; font-weight: bold;">final</span> List<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> CONTACTS <span style="color: #339933;">=</span> <span style="color: #003399;">Arrays</span>.<span style="color: #006633;">asList</span><span style="color: #009900;">&#40;</span>
      <span style="color: #000000; font-weight: bold;">new</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;John&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Date</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">80</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #cc66cc;">12</span><span style="color: #009900;">&#41;</span>, <span style="color: #0000ff;">&quot;123 Abc Avenue&quot;</span><span style="color: #009900;">&#41;</span>, 
      <span style="color: #000000; font-weight: bold;">new</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Joe&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Date</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">85</span>, <span style="color: #cc66cc;">2</span>, <span style="color: #cc66cc;">22</span><span style="color: #009900;">&#41;</span>, <span style="color: #0000ff;">&quot;22 Lance Ln&quot;</span><span style="color: #009900;">&#41;</span>, 
      <span style="color: #000000; font-weight: bold;">new</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Tom&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Date</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">85</span>, <span style="color: #cc66cc;">3</span>, <span style="color: #cc66cc;">22</span><span style="color: #009900;">&#41;</span>, <span style="color: #0000ff;">&quot;33 Lance Ln&quot;</span><span style="color: #009900;">&#41;</span>, 
      <span style="color: #000000; font-weight: bold;">new</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Jack&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Date</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">85</span>, <span style="color: #cc66cc;">4</span>, <span style="color: #cc66cc;">22</span><span style="color: #009900;">&#41;</span>, <span style="color: #0000ff;">&quot;44 Lance Ln&quot;</span><span style="color: #009900;">&#41;</span>, 
      <span style="color: #000000; font-weight: bold;">new</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Tim&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Date</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">85</span>, <span style="color: #cc66cc;">5</span>, <span style="color: #cc66cc;">22</span><span style="color: #009900;">&#41;</span>, <span style="color: #0000ff;">&quot;55 Lance Ln&quot;</span><span style="color: #009900;">&#41;</span>, 
      <span style="color: #000000; font-weight: bold;">new</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Mike&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Date</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">85</span>, <span style="color: #cc66cc;">6</span>, <span style="color: #cc66cc;">22</span><span style="color: #009900;">&#41;</span>, <span style="color: #0000ff;">&quot;66 Lance Ln&quot;</span><span style="color: #009900;">&#41;</span>, 
      <span style="color: #000000; font-weight: bold;">new</span> Contact<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;George&quot;</span>, <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #003399;">Date</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">46</span>, <span style="color: #cc66cc;">6</span>, <span style="color: #cc66cc;">6</span><span style="color: #009900;">&#41;</span>,<span style="color: #0000ff;">&quot;77 Lance Ln&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onModuleLoad<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #666666; font-style: italic;">// Create a CellTable.</span>
    <span style="color: #000000; font-weight: bold;">final</span> CellTable<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> table <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> CellTable<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #666666; font-style: italic;">// Display 3 rows in one page</span>
    table.<span style="color: #006633;">setPageSize</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Add a text column to show the name.</span>
    TextColumn<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> nameColumn <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> TextColumn<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      @Override
      <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> getValue<span style="color: #009900;">&#40;</span>Contact object<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">return</span> object.<span style="color: #006633;">name</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    table.<span style="color: #006633;">addColumn</span><span style="color: #009900;">&#40;</span>nameColumn, <span style="color: #0000ff;">&quot;Name&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Add a date column to show the birthday.</span>
    DateCell dateCell <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> DateCell<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    Column<span style="color: #339933;">&lt;</span>Contact, Date<span style="color: #339933;">&gt;</span> dateColumn <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Column<span style="color: #339933;">&lt;</span>Contact, Date<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span>dateCell<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      @Override
      <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">Date</span> getValue<span style="color: #009900;">&#40;</span>Contact object<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">return</span> object.<span style="color: #006633;">birthday</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    table.<span style="color: #006633;">addColumn</span><span style="color: #009900;">&#40;</span>dateColumn, <span style="color: #0000ff;">&quot;Birthday&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Add a text column to show the address.</span>
    TextColumn<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> addressColumn <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> TextColumn<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      @Override
      <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #003399;">String</span> getValue<span style="color: #009900;">&#40;</span>Contact object<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">return</span> object.<span style="color: #006633;">address</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    table.<span style="color: #006633;">addColumn</span><span style="color: #009900;">&#40;</span>addressColumn, <span style="color: #0000ff;">&quot;Address&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Associate an async data provider to the table</span>
	<span style="color: #666666; font-style: italic;">// XXX: Use AsyncCallback in the method onRangeChanged</span>
	<span style="color: #666666; font-style: italic;">// to actaully get the data from the server side</span>
    AsyncDataProvider<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> provider <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> AsyncDataProvider<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      @Override
      <span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000066; font-weight: bold;">void</span> onRangeChanged<span style="color: #009900;">&#40;</span>HasData<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> display<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">int</span> start <span style="color: #339933;">=</span> display.<span style="color: #006633;">getVisibleRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">getStart</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">int</span> end <span style="color: #339933;">=</span> start <span style="color: #339933;">+</span> display.<span style="color: #006633;">getVisibleRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">getLength</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        end <span style="color: #339933;">=</span> end <span style="color: #339933;">&gt;=</span> CONTACTS.<span style="color: #006633;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">?</span> CONTACTS.<span style="color: #006633;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> end<span style="color: #339933;">;</span>
        List<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> sub <span style="color: #339933;">=</span> CONTACTS.<span style="color: #006633;">subList</span><span style="color: #009900;">&#40;</span>start, end<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        updateRowData<span style="color: #009900;">&#40;</span>start, sub<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
    provider.<span style="color: #006633;">addDataDisplay</span><span style="color: #009900;">&#40;</span>table<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    provider.<span style="color: #006633;">updateRowCount</span><span style="color: #009900;">&#40;</span>CONTACTS.<span style="color: #006633;">size</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>, <span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    SimplePager pager <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> SimplePager<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    pager.<span style="color: #006633;">setDisplay</span><span style="color: #009900;">&#40;</span>table<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    VerticalPanel vp <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> VerticalPanel<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    vp.<span style="color: #006633;">add</span><span style="color: #009900;">&#40;</span>table<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    vp.<span style="color: #006633;">add</span><span style="color: #009900;">&#40;</span>pager<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #666666; font-style: italic;">// Add it to the root panel.</span>
    RootPanel.<span style="color: #006633;">get</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">add</span><span style="color: #009900;">&#40;</span>vp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>To make remote calls to retrieve table data from the server, The code snippet should look like the following.</p>

<div class="wp_syntax"><div class="code"><pre class="java" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">// Associate an async data provider to the table</span>
    AsyncDataProvider<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> provider <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> AsyncDataProvider<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
      @Override
      <span style="color: #000000; font-weight: bold;">protected</span> <span style="color: #000066; font-weight: bold;">void</span> onRangeChanged<span style="color: #009900;">&#40;</span>HasData<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> display<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">final</span> <span style="color: #000066; font-weight: bold;">int</span> start <span style="color: #339933;">=</span> display.<span style="color: #006633;">getVisibleRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">getStart</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000066; font-weight: bold;">int</span> length <span style="color: #339933;">=</span> display.<span style="color: #006633;">getVisibleRange</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #006633;">getLength</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        AsyncCallback<span style="color: #339933;">&lt;</span>List<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;&gt;</span> callback <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> AsyncCallback<span style="color: #339933;">&lt;</span>List<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;&gt;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
          @Override
          <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onFailure<span style="color: #009900;">&#40;</span><span style="color: #003399;">Throwable</span> caught<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #003399;">Window</span>.<span style="color: #006633;">alert</span><span style="color: #009900;">&#40;</span>caught.<span style="color: #006633;">getMessage</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
          @Override
          <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> onSuccess<span style="color: #009900;">&#40;</span>List<span style="color: #339933;">&lt;</span>Contact<span style="color: #339933;">&gt;</span> result<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            updateRowData<span style="color: #009900;">&#40;</span>start, result<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
        <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">// The remote service that should be implemented</span>
        remoteService.<span style="color: #006633;">fetchPage</span><span style="color: #009900;">&#40;</span>start, length, callback<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://robin.mytechtip.com/2010/11/17/gwt-celltable-example-using-asyncdataprovider/feed/</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>How to use PagingScrollTable in the gwt incubator</title>
		<link>http://robin.mytechtip.com/2010/11/15/how-to-use-pagingscrolltable-in-the-gwt-incubator/</link>
		<comments>http://robin.mytechtip.com/2010/11/15/how-to-use-pagingscrolltable-in-the-gwt-incubator/#comments</comments>
		<pubDate>Mon, 15 Nov 2010 06:01:49 +0000</pubDate>
		<dc:creator>robin</dc:creator>
				<category><![CDATA[java]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[gwt]]></category>
		<category><![CDATA[pagination]]></category>
		<category><![CDATA[table]]></category>

		<guid isPermaLink="false">http://robin.mytechtip.com/?p=64</guid>
		<description><![CDATA[The core GWT library (prior to version 2.1) does not provide an official widget that allows for a table with pagination support. Instead, there is a widget in gwt incubator called PagingScrollTable that has the paging functionality.



However, the &#8220;official wiki document&#8221; does not provide enough detailed information to use this widget. Luckily someone has made [...]]]></description>
			<content:encoded><![CDATA[<p>The core GWT library (prior to version 2.1) does not provide an official widget that allows for a table with pagination support. Instead, there is a widget in gwt incubator called PagingScrollTable that has the paging functionality.</p>
<p><script type="text/javascript"><!--
google_ad_client = "pub-3371750151985752";
google_ad_slot = "0950801022";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
<p>However, the &#8220;official wiki document&#8221; does not provide enough detailed information to use this widget. Luckily someone has made an illustrative example with informative documentation on <a href="http://zenoconsulting.wikidot.com/blog:17" onclick="javascript:pageTracker._trackPageview('/outbound/article/zenoconsulting.wikidot.com');">how to implement a table with pagination support using PagingScrollTable in gwt incubator</a>. </p>
]]></content:encoded>
			<wfw:commentRss>http://robin.mytechtip.com/2010/11/15/how-to-use-pagingscrolltable-in-the-gwt-incubator/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>JSP Expression Language in GWT&#8217;s embedded Jetty</title>
		<link>http://robin.mytechtip.com/2009/07/23/jsp-expression-language-in-gwts-embedded-jetty/</link>
		<comments>http://robin.mytechtip.com/2009/07/23/jsp-expression-language-in-gwts-embedded-jetty/#comments</comments>
		<pubDate>Thu, 23 Jul 2009 07:13:04 +0000</pubDate>
		<dc:creator>robin</dc:creator>
				<category><![CDATA[configuration]]></category>
		<category><![CDATA[programming]]></category>
		<category><![CDATA[el]]></category>
		<category><![CDATA[expression language]]></category>
		<category><![CDATA[gwt]]></category>
		<category><![CDATA[jetty]]></category>
		<category><![CDATA[jsp]]></category>

		<guid isPermaLink="false">http://robin.mytechtip.com/?p=39</guid>
		<description><![CDATA[JSP expression language (EL) is quite handy. but it only works when you indicate your web application is using version 2.4 or higher. That means you have the following in your &#60;Your-Web-App&#62;/WEB-INF/web.xml:
&#60;?xml version=&#8221;1.0&#8243; encoding=&#8221;UTF-8&#8243;?&#62;
&#60;web-app id=&#8221;WebApp_ID&#8221; version=&#8221;2.4&#8243; xmlns=&#8221;http://java.sun.com/xml/ns/j2ee&#8221; xmlns:xsi=&#8221;http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:schemaLocation=&#8221;http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd&#8221;&#62;
&#8230;



Google Web Toolkit (GWT) is a handy Ajax Web application development tool. Since version 1.6.4, GWT [...]]]></description>
			<content:encoded><![CDATA[<p>JSP expression language (EL) is quite handy. but it only works when you indicate your web application is using version 2.4 or higher. That means you have the following in your &lt;Your-Web-App&gt;/WEB-INF/web.xml:</p>
<div style="margin-left: 40px">&lt;?xml version=&#8221;1.0&#8243; encoding=&#8221;UTF-8&#8243;?&gt;<br />
&lt;web-app id=&#8221;WebApp_ID&#8221; version=&#8221;2.4&#8243; xmlns=&#8221;http://java.sun.com/xml/ns/j2ee&#8221; xmlns:xsi=&#8221;http://www.w3.org/2001/XMLSchema-instance&#8221; xsi:schemaLocation=&#8221;http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd&#8221;&gt;<br />
&#8230;</div>
<p><script type="text/javascript"><!--
google_ad_client = "pub-3371750151985752";
google_ad_slot = "0950801022";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</p>
<p>Google Web Toolkit (GWT) is a handy Ajax Web application development tool. Since version 1.6.4, GWT uses Jetty instead of Tomcat as the embedded Web application container.</p>
<p>However, when I installed GWT plugin (version 1.6.4) for Eclipse, the default generated web application used the version 2.3. So when i used expression language in the jsp pages, it didn&#8217;t evaluate. Something like &#8220;${title}&#8221; as the output in the hosted mode running on jetty. It should also be the same result even i deployed to a tomcat container, as the web app version is still 2.3. This is understandable, as Expression Language is part of JSP version 2.0 standard, which is bound with Servlet (Web App) version 2.4. So if you want to make the expression language work, make sure your web app is using 2.4 or higher.</p>
<p>However, while using version 2.4 works fine, i&#8217;ve got the same problem when i use version 2.5, which is hard to understand why. This problem seems only in Jetty, not in Tomcat. I don&#8217;t know if anyone else have encountered the same problem as I did, but the following link seems to explain the reason behind: <a id="y4rx" title="http://docs.codehaus.org/display/JETTY/JSP+expression+do+not+evaluate" href="http://docs.codehaus.org/display/JETTY/JSP+expression+do+not+evaluate" onclick="javascript:pageTracker._trackPageview('/outbound/article/docs.codehaus.org');">http://docs.codehaus.org/display/JETTY/JSP+expression+do+not+evaluate</a></p>
<p>Apart from this problem (which can be worked around), the use of GWT plugin seems more convenient than the traditional web app development in eclipse. <img src='http://robin.mytechtip.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://robin.mytechtip.com/2009/07/23/jsp-expression-language-in-gwts-embedded-jetty/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

