I have a Grid component with Indexed container where data is sorted initially into two columns (the data comes from Elasticsearch). How can I tell Grid to know about this sorting and then show proper sorting icons in column headings when Grid is loaded?
EDIT #1
I tried to redefine Grids public List<SortOrder> getSortOrder() method to return proper sorting data, but it doesnt work ...
You haven't shown much code so I'll have to assume you're using the default Indexed container and then add columns like grid.addColumn("c1", String.class);. If that's true, then it looks like you can't supply your own container implementation because vaadin will throw an exception when providing a different container and adding columns (haven't had the time to figure out why):
protected void addColumnProperty(Object propertyId, Class<?> type, Object defaultValue) throws IllegalStateException {
if(!this.defaultContainer) {
throw new IllegalStateException("Container for this Grid is not a default container from Grid() constructor");
In this case, you can probably create your own Grid implementation which bypasses the issue, or you could use a bean item container like in the example below, where you overwrite the doSort method to do nothing:
BeanItemContainer<MyBean> dataSource = new BeanItemContainer<MyBean>(MyBean.class) {
#Override
protected void doSort() {
// nop, data is already sorted
}
};
Grid grid = new Grid(dataSource);
Then simply call the setSortOrder method on the grid.
import com.vaadin.data.sort.Sort;
import com.vaadin.shared.data.sort.SortDirection;
...
grid.setSortOrder(Sort.by("c3", SortDirection.ASCENDING).then("c2", SortDirection.DESCENDING).build());
Which results in column c3 being sorted ascending first, and then c2 descending (see the numbers near the sorting icon):
Please note that the column headers will still be clickable so the sorting icons will change and events will be triggered, but nothing will happen because the doSort was overwritten. You will probably need to react to this so you can add a sortListener and request a new batch of data, sorted according to the user selection:
grid.addSortListener(new SortEvent.SortListener() {
#Override
public void sort(SortEvent sortEvent) {
// request data sorted according to the user selection
}
});
Related
I am not sure if this is even possible but here's my setup:
I have basically 2 Maps holding a special identifier to get some objects.
these identifier is like a versioning number, i may have data in version 8 that belongs to meta version 5. But at the same time, Meta versions up to 10 may exist and not every meta version holds information about every data, so here's where the _filter kicks in.
The filter is able to find to any given value the correct object. So far so good.
My question belongs to the following: (last codeline)
how am i able to say "if you have no matching candidate, generate me a default value"
For this purpose, i tried to force a named constructor with a super class for "Data" and "Meta" called "BasicInformation".
But even if i implement this, how do i call something like T.namedConstructor(); ?
class Repo{
Map<int, Data> mapData;
Map<int, Meta> mapMeta;
Data getData(int value)
{
return _filter<Data>(mapData, value);
}
Meta getMeta(int value)
{
return _filter<Data>(mapMeta, value);
}
T _filter<T extends BasicInformation>(Map<int, T>, int value)
{
//fancy filtering technique
//....
//speudo code
if (found) return map[found]; //speudo code
else return T.generateDefault();
}
}
I've found the following stackoverflow entry: Calling method on generic type Dart
which says, this is not possible without adding a function call.
I have a widget to represent list of stores sorted by nearest to the user current locations also filtering should be applied.
Data in:
Stores data coming from stream of Firestore collection
Current user location from geolacator.
Filtering options from shared preferences
(can be changed any time)
List sorting mode selected by user
Data out: Filtered, sorted, list of stores.
What pattern is best practice in this case?
rxdart : https://pub.dartlang.org/packages/rxdart
if you wanna combine data together you can use
var myObservable = Observable.combineLatest3(
myFirstStream,
mySecondStream,
myThirdStream,
(firstData, secondData, thirdData) => print("$firstData $secondData $thirdData"));
you can combine from ( combineLatest2, combineLatest... combineLatest9 )
or
CombineLatestStream
like this example
CombineLatestStream.list<String>([
Stream.fromIterable(["a"]),
Stream.fromIterable(["b"]),
Stream.fromIterable(["C", "D"])])
.listen(print);
Numbers 2, 3 and 4 are inputs to the bloc that you'd send in through sinks. The bloc listens on those sinks and updates the Firestore query accordingly. This alone might be enough to make Firestore send the appropriate snapshots to the output stream the widget is listening to.
If you can't sort or filter how you want directly with Firestore's APIs, you can use stream.map or apply a StreamTransformer on it. The transformer gives you a lot of flexibility to listen to a stream and change or ignore events on the fly by implementing its bind method.
So you can do something like:
Stream<Store> get stores => _firestoreStream
.transform(filter)
.transform(sort);
Have a look at this page for streams in dart in general, and look into rxdart for more complex stream manipulations.
From personal experience I found having multiple inputs to a block leads to hard to test code. The implicit concurrency concerns inside the block lead to confusing scenarios.
The way I built it out in my Adding testing to a Flutter app post was to create a single input stream, but add markers to the messages notating which data stream the message was a part of. It made testing sane.
In this situation, I think there are multiple asynchronous processing. This implementation can be complicated. And there is a possibility of race condition.
I will implement as follows.
Separate streams of Model from Firestore and user-visible ViewModel in Bloc. Widgets listen to only ViewModel.(eg. with StreamBuilder)
Limit Business logic processing only in Bloc. First, relocate processing with SharedPreferences into Bloc.
Create UserControl class just for user input.
Branch processing depends on user input type of extended UserControl
I hope you this will help you.
For example:
import 'dart:async';
import 'package:rxdart/rxdart.dart';
class ViewModel {}
class DataFromFirestoreModel {}
abstract class UserControl {}
class UserRequest extends UserControl {}
class UserFilter extends UserControl {
final String keyWord;
UserFilter(this.keyWord);
}
enum SortType { ascending, descending }
class UserSort extends UserControl {
final SortType sortType;
UserSort(this.sortType);
}
class Bloc {
final controller = StreamController<UserControl>();
final viewModel = BehaviorSubject<ViewModel>();
final collection = StreamController<DataFromFirestoreModel>();
Bloc() {
controller.stream.listen(_handleControl);
}
_handleControl(UserControl control) {
if (control is UserRequest) {
_handleRequest();
} else if (control is UserFilter) {
handleFilter(control.keyWord);
} else if (control is UserSort) {
handleSort(control.sortType);
}
}
_handleRequest() {
//get location
//get data from sharedPreferences
//get data from firestore
ViewModel modifiedViewModel; // input modifiedViewModel
viewModel.add(modifiedViewModel);
}
handleSort(SortType sortType) {
final oldViewModel = viewModel.value;
//sorting oldViewModel
ViewModel newViewModel; // input sorted oldViewModel
viewModel.add(newViewModel);
}
handleFilter(String keyWord) {
//store data to sharedPreferences
//get data from Firestore
ViewModel modifiedViewModel; // input modifiedViewModel
viewModel.add(modifiedViewModel);
}
}
In Vaadin, when you scroll down or up in tables (com.vaadin.ui.Table) there is no event that will be fired to tell you that user is now scrolling.
Why would we need scroll event in table?
Let's first take a look at this example of Vaadin (Dashboard Demo) after you open the link just click sign in, and you'll be automatically redirected to the transactions page, this page shows a table of financial transactions, these transactions will show a batch after another while you are scrolling, what actually happened is that the data was loaded on UI initiation (all the transactions).
Now, let's assume that we have thousands or say millions of transactions. Is it logic to load them all together when the UI is initiated? isn't it of wisdom to load them bit by bit to prevent slowing down the UI while it waits for all transactions to load?.
The best solution to this problem is to get the first (say 100 transactions) then get more transactions while scrolling down, but this solution have only one problem, that is Vaadin does not support Scroll Event Handling in com.vaadin.ui.Table !!
According to your question you are looking for lazy loading.
If you connect your table with a container which supports lazy loading your items are loaded from it's data source lazily. This means when you scroll and get out of the buffered items the table "asks" the container for more items. The container then loads more items from it's data source.
For example the JPAContainer from Vaadin supports that feature. This container connects to a data source using JPA. More information here.
Vaadin Table's Scrolling Event
The Dashboard Demo (GitHub repo) project actually depends on Vaadin tables as you see in the code in this file in line 53, what we are going to do is to extend com.vaadin.ui.Table and implement our own behavior that will support scrolling Vaadin tables from now on.
First of all, let's create new simple interface ScrollingTableScrollListener this interface will be responsible for implementing scroll events and its code will look like this:
package com.vaadin.demo.dashboard.scrolling;
public interface ScrollingTableScrollListener {
public void doTableScroll();
}
This interface should be implemented whenever you have a table in your view and you want to add a scroll event handler for it. But wait a minute this is not applicable to any kind of tables, this is only applicable to our own table.
Now, let's create our table, our table's name is (ScrollingTable) and it extends (com.vaadin.ui.Table) this class code is:
package com.vaadin.demo.dashboard.scrolling;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import com.vaadin.ui.Table;
public class ScrollingTable extends Table {
private static final long serialVersionUID = 5007124121625961567L;
List listeners = new ArrayList();
private void fireSrollEvent() {
for (ScrollingTableScrollListener listener : listeners) {
listener.doTableScroll();
}
}
public void addScrollListener(ScrollingTableScrollListener listener) {
listeners.add(listener);
}
#Override
public void changeVariables(Object source, Map variables) {
super.changeVariables(source, variables);
fireSrollEvent();
}
}
Actually, this table is the same as Vaadin's one, but it has the following differences:
It overrides the method changeVariables() of the super class (Vaadin Table : com.vaadin.ui.Table), actually here lays our core business that will initiate the Scrolling Behavior. What we did here is that we invoked the changeVariables() of the super class and then we invoked the fireSrollEvent() method.
Another difference is that it has two more members:
public void addScrollListener(ScrollingTableScrollListener listener) this method will take care of adding new listeners to table's scrolling event.
private void fireSrollEvent() this method is the one that will be invoked by changeVariables() method and will invoke the method doTableScroll() on every registered listener that this table has added by invoking the method addScrollListener().
Now to make use of the new stuff that we have added, we will change the original code of the aforementioned Dashboard demo (specifically the file TransactionsView.java). In this file there are only few lines to add and modify.
First, we will modify the line 49 by adding new interface that this class will implement, which is our new interface (ScrollingTableScrollListener) and implement its single method by adding the following lines in the end of this class:
#Override
public void doTableScroll() {
// TODO Auto-generated method stub
Notification.show("You are scrolling!\nYou can add your own behavior here!");
}
Then, we will change both lines 53 and 66 to use the new inherited class (ScrollingTable) rather than the super class (Table):
//Line 53 in the original class
Table t;
//Line 55 in our class
ScrollingTable t;
....
....
....
//line 66 in the original class
t = new Table() {
//line 68 in our class
t = new ScrollingTable() {
Finally, we should add the listener to our ScrollingTable's scrolls :) , this is done by invoking the method addScrollListener on the table (t) after defining the table (line 89 of our new class):
t.addScrollListener(this);
this line means that this class (TransactionView) is listening on the ScrollingTable (t) scroll event, and it will invoke the method doTableScroll whenever the user scrolls down/up the ScrollingTable (t).
Here you go, you have now a table that will tell you whenever the user is scrolling, your task now is to do what you want when the table fires scrolling event and put your stuff between the curly brackets {} of the method that we defined in the first step:
#Override
public void doTableScroll() {
// Put your own code here ...
}
Here is the link of the new Dashboard on GitHub.
The answer on my blog
Hm, event fires on EVERY action with table (such as row select, etc.). More appropricate solution is additional checking variable changing in table state.
Here example:
public class ScrollingTable extends Table {
// ...
#Override
public void changeVariables(Object source, Map<String, Object> variables) {
super.changeVariables(source, variables);
handleScrollEvent(variables);
}
private void handleScrollEvent(Map<String, Object> variables) {
if (variables.containsKey("firstvisible")) {
for (TableScrollListener listener : listeners) {
listener.doTableScroll();
}
}
}
I'm doing a project in Vaadin 7.
In my project, I need to disable column reordering feature for particular columns in Treetable?
I'm really searching for function like this 'setColumnReorderIds()'.
Is it possible to do it in Vaadin 7.
Or else I need to write some code with 'ColumnReorderListener()'?
Update
This code is to set the first column fixed in a TreeTable. I want to disable reordering in Hierarchy column in the tree table.
public class CustomTreeTable extends TreeTable {
private static final long serialVersionUID = 1L;
private Object[] visibleColumns;
private KeyMapper<Object> columnIdMap = new KeyMapper<Object>();
#Override
public void paintContent(PaintTarget target) throws PaintException {
super.paintContent(target);
paintColumnOrder(target);
}
private void paintColumnOrder(PaintTarget target) throws PaintException {
visibleColumns = this.getVisibleColumns();
final String[] colorder = new String[visibleColumns.length];
int i = 0;
colorder[i++] = columnIdMap.key("Column 1"); // Logic to keep the first column fixed
for (Object colId : visibleColumns) {
if(!colId.equals("Column 1")) {
colorder[i++] = columnIdMap.key(colId);
}
}
target.addVariable(this, "columnorder", colorder);
}
}
Update 2
I tried what Oskar said..
In addition to
paintColumnOrder(target).
I'm calling
paintVisibleColumnOrder(target),
paintAvailableColumns(target),
paintVisibleColumns(target).
i'm able to stop reordering only for the table headers. But, the body is still reordering. Any guesses on this issue?
In the documentation there is only setColumnReorderingAllowed() which allows to control reordering of all columns. So if your case is to control particular ones it looks to me as a very custom behaviour and I would go with own implementation. Also ColumnReorderEvent is generated after processing the action itself therefore implementing own ColumnReorederListener won't help us here I think.
All actual magic which we want to change happens in private Table.paintColumnOrder() called from public Table.paintContent(), called from public TreeTable.paintContent() (see sources of Table and TreeTable). The solution would be:
extend TreeTable
override paintContent() with merged copies of Table.paintContent() and TreeTable.paintContent()
replace paintColumnOrder() call with your custom logic.
Update
Ok, now I see it's more tricky then I thought at the beginnig, since there is no easy way to access most of required fields and methods after subclassing TreeTable... Moreover, columns are reorered on the client side and only the change event status is sent to inform the server. I don't know how to handle custom reordering without creating custom gwt widget :(
With the code below I am having an issue where not all the columns are return data in the data.results array. For example if col4 is null in the database for row 1 then data.results[0] does not contain an element for col4, but row 2 has a value then data.results[1] will contain the value for col4. I would like each return item in the array to contain all items with the database value or null. If null can't be returned then an empty string would do.
var query = new breeze.EntityQuery()
.from('mytable')
.where('col1', 'substringof', '2')
.select('col1,col2,col3,col4')
.orderBy('col1')
.take(200);
return _manager
.executeQuery(query)
.then(function (data) {
return data.results;
})
.fail(queryFailed);
}
By default breeze does not serialize null values in its JSON results. This was a deliberate choice to reduce the breeze payload over the wire. And.. this is not typically an issue with queries that return "entities". i.e. data for which breeze metadata exists. Because the properties are already defined on such entities.
But if you are returning an anonymous result as you are, then this can be a problem. You can obviously work around it because you know the properties that you are requesting and can update them after the query if they are not in the result.
But you can also change breeze's default configuration to accommodate this via the "BreezeConfig" class.
BreezeConfig enables customization of components supporting Breeze-related operations in the Web API. BreezeConfig defines default behaviors; you can substitute your own behaviors by deriving from it and overriding its virtual methods. Breeze.NET will discover your subclass among the assemblies referenced by your project and use it instead of BreezeConfig.
To use BreezeConfig to configure the Json.Net serializer with specific settings. You can replace those settings by writing a subclass of BreezeConfig that overrides the 'CreateJsonSerializerSettings' method as shown in this example:
public class CustomBreezeConfig : Breeze.WebApi.BreezeConfig {
protected override JsonSerializerSettings CreateJsonSerializerSettings() {
var baseSettings = base.CreateJsonSerializerSettings();
baseSettings.NullValueHandling = NullValueHandling.Include;
return baseSettings;
}
Hope this helps.