This document discusses two examples of using Google Web Toolkit (GWT) to build user interfaces for large amounts of data: 1) a table of employees that allows searching, sorting, and paging of employee data; and 2) a suggest box for autocompleting employee names from a remote data source. It provides details on the client-side and server-side components needed to implement filtering, sorting, paging and querying of large data sets to display relevant results efficiently.

1. UI Components for Large
Amounts of Data
Two examples using GWT
andreas.hubmer@cenarion.com
18.10.2014

2. 2

3. How do we select
an employee among thousands?
3

4. 1) Table of Employees
[Demo]
4

5. What do we have?
• GWT‘s CellTable
• GWT‘s client-side paging component
5

6. What do we want?
get employees
• where a field matches some value
• ordered by some field
• limited to X results, starting with Y
6

7. What do we need?
• Searching/Filtering
• Sorting
• Paging
fast  within the data base
7

8. 8

9. Client side
Needs to know
• Table Definition: captions,
searchable/filterable rows
• Table Data
9

10. Client Table Definition
new ClientTableDefinition(
new TextColumnDefinition("firstName", SORTABLE,
!FILTERABLE, SEARCHABLE, !HIDDEN),
new TextColumnDefinition("gender", SORTABLE,
FILTERABLE, !SEARCHABLE, !HIDDEN),
…
);
10

11. TableResult
class InitialResult {
TableDefinition def;
List<String> captions;
List<String> searchValues;
List<List<String>> availableFilters;
}
class TableResult {
InitialResult initialResult;
List<TableRow> tableRows;
String sortColumn; SortOrder sortOrder;
int pageSize; int startIndex; int totalCount;
}
11

12. Server side
Needs to know
• Table Definition: captions, filterable
rows, technical field names
• Mapping of search/filter/order to
query
• Mapping of database results to table
rows
12

13. Server side sequence
• loadSaveSettings
• if (firstRequest)
captions, search/filter values
• createQuery: search, filter, order
• executeQuery: with paging
• mapQueryResults
• executeCountQuery: no „order“
• setPagerData
13
Request
Response

14. Server Table Definition
new TableDefinition<Employee>(
new EmployeeQueryCreator(),
new TextColumn("firstName",
e -> e.getFirstName()),
new FilterColumn("gender",
e -> e.getGender(), GENDER.values()),
…
);
14

15. Usability: LIKE
Query:
SELECT e FROM Employee e where e.firstName LIKE
:searchValue
Case-insensitive collation:
@Column(columnDefinition=
"VARCHAR(255) COLLATE "English UCC"")
private String firstName;
15

16. Usability: search = rendering
Rendered string for supervisor:
firstName + " " + lastName
Search string: „and“
 where firstName like 'and%'
or lastName like 'and%'
Search string: „andreas hu“
 where firstName like 'andreas%'
and lastName like 'hu%'
16

17. How do we select an employee
in a small widget by name?
17

18. 2) Suggest Box
[Demo]
18

19. What do we have?
• GWT‘s SuggestBox
relying on a SuggestOracle:
query  List<Suggestion>
19

20. What do we need?
• Remote oracle for filtering, sorting,
paging (in the data base)
• Timer
• Highlighting
20

21. SuggestOracle
class SuggestOracle {
void requestSuggestions(Request request,
Callback callback);
}
class Request { int limit = 20; String query; }
class Response {
Collection<Suggestion> suggestions;
}
class Suggestion {
String displayString; String replacement;
}
21

22. 3) Performance
Indices
Count query too expensive?
-> „more results“ instead of exact count
22

23. 23

24. 24

25. Thanks
www.cenarion.com

26. GWT
• Single Page
• Only Java code
– easy client-side unit tests
– rich clients
• GWT 2.6 supports Maps
• Wire transport
– RPC
– RequestFactory
26