Vaadin 7 to Vaadin 8 issues

You other question was about getting items updated in Grid after you modify them.

There are to methods in DataProvider, refreshItem(…) and refreshAll(). If you are adding and/or removing items, you should allways use the later one. If you modify specific item which is already in dataset, you can refresh it with the first one.

Also note, that you cannot use UI.getCurrent() in background thread in Vaadin 8. You need to first get the UI in some thread safe place, e.g. constructor of the presenter class or something like that. There is small change between Vaadin 7 & 8. Vaadin 7 allowed to do that, which worked in some scenarios, but was very prone to errors, thus better pattern to use it is enforced in Vaadin 8.

Hi Anna and Tatu!

Thank you both for the [quote=Tatu Lund]
You other question was about getting items updated in Grid after you modify them.

There are to methods in DataProvider, refreshItem(…) and refreshAll(). If you are adding and/or removing items, you should allways use the later one. If you modify specific item which is already in dataset, you can refresh it with the first one.

Also note, that you cannot use UI.getCurrent() in background thread in Vaadin 8. You need to first get the UI in some thread safe place, e.g. constructor of the presenter class or something like that. There is small change between Vaadin 7 & 8. Vaadin 7 allowed to do that, which worked in some scenarios, but was very prone to errors, thus better pattern to use it is enforced in Vaadin 8.

[/quote]

Hi Anna and Tatu!

Thank you both for the answers. I was able to solve my “CheckBox” issue using VaadinIcons as the simplest solution in this case.

According to Grid updating I have solved in some way this problem, but I don’t know if this is the correct solution. Namelly, calling

formProductList.refreshGridProductos(false, “”, “”);

before

close();

the Grid does refresh. But I don’t like this approach calling “refresh” method from formProduct after adding or editing product’s data but I don’t know how to do it another way.

First I call my form
FormListProducts
(a Window object) from the main page (VerticalLayout) and then from

FormListProducts

another Window object

FormProduct

. I haven’t found an example of how to refresh grid in my case. Also I don’t know how to do it without

UI.getCurrent()

and “in some thread safe place” as you mentioned. Can you show me how to do this with an short example?

Besides, I don’t know when and/or why should I use

ListDataProvider

instead of .setItems. I haven’t found anything in Vaadin documentation about it.

Issue with the Footer:
I want to know how to update this line of code after updating the grid:


footer.join(“col1”, “col2”, “col3”).setText("Products: " + listOfProducts.size());

I hope I was clear enough in my explanation. I have even more cuestions.
I think this kind of situations should be described in Vaadin documentation.

Regards,
Aleksander

Hi Aleksander!
Sorry to intrude, but maybe I could give a hand with your last post.
If I understood you correctly, you have a window (named
FormListProducts
), and then, from that window you’re opening another one (named
FormProduct
). In that one you’re modifying some item of a grid that belongs to the other window (
FormListProducts
) and you want to see that change in the grid, after you close the window "
FormProduct
". For doing that, you have a reference to that window and you’re invoking a method named
refreshGridProductos
, inside that method (I’m guessing here) you’re calling the method
refreshItem
of the grid component. If you’re calling that method (
refreshGridProductos
) from a listener of a button (maybe a close button on the
FormProduct
screen, you don’t need to enclose that in
UI.getCurrent().access()
because you are already in the context of the UI. You said that you don’t like that approach, another one, would be to use lambda expressions, and send a callback to the
FormProduct
window (maybe in the constructor?), so that can be called after you hit the close button, and in that callback you could execute the
refreshItem
method of the grid.

ListDataProvider
is the most common implementation of DataProvider, you don’t need to cast to that class if you want just to execute the
refreshItem
method.
Remember that if you have modified the contents of a single object represented by a single row of the grid, you should call
grid.getDataProvider().refreshItem(item)
, and if you have added or deleted an item of the underlying collection, you should call
grid.getDataProvider().refreshAll()
.
Regarding your last question about the footer, you should first obtain a footer row (using
getFooterRow
) and then obtain a specific cell of it using
getCell
, and then invoke the
setText
method.
Hope this can be helpfull to you!
Regards.

Hola Martín,

thank you for your answer.

If this aproach is OK where
formA
calls
formB
and then
formA
is called from
formB
to do some work in the very the same form (
formA
) then I will let like this without complaining. Especially because is working and I don’t know how to do it the other way.
In fact I do the refresh like this

grid.setItems(listOfProducts);

after retriving the product list from backend.

Acording to

grid.getDataProvider()

can yo send me an example, “plis”? I haven’t found anything it.

UI
I don’t use any more

UI.getCurrent().access().

For accesing and showing a Window object from another Window form I use

UI.getCurrent().addWindow(formProduct);

Footer:
I have FooterRow like this


FooterRow footer = grid.appendFooterRow();
footer.join(“col1”, “col2”).setText("Products: " + listofProducts.size());

how to know what is the name of the cell now:

footerRow.getCell(???);

Thanks in advance.
Regards,
Aleksander

You could save the merged cell (that the footer.join returns) to a variable so you’ll have the reference ready. In my opinion getCell with either column id
should
return the merged cell, but it doesn’t – should probably make a
new issue
about it.

Thank you, I’ll forward the feedback, and hopefully we’ll get these issues fixed :slight_smile:

Hi Anna,

I did exactly this.
And yes, the behaviour of this feature is little bit weird. The FooterCell should have
setCell_id(xx) or something like this where one would be able to save joined cell to a new cell.

Finally, I don’t have further issues for now.

But I repeat my constructive critics, all this issues I consider trivial, but in Vaadin they became complicated and without good explanation.
For example, HeaderRow and FooterRow are not totally the same, nevertheless only HeaderRow is explained (with the code) satisfactorily.
The same situation is with SingleSelect and MultiSelect Grid Mode.

Thank you all for all the support,
Regards,
Aleksander

Vaadin ver.: 8.1.5

Hi!

I will continue in this post because the cuestions are similar to the posts already posted.

[u]
[i]

  1. RadioButtonGroup
    [/i]
    [/u]
  • how to change the color of this component?
    I managed to change the colr of the label but not of the control it self.
    I thought that is the same as for
    CheckBox

    So, for Check Box I did it like this: . v-checkbox { color: $barvaModra; @include valo-checkbox-style($selection-color: $barvaModra); } For RadioButton this style does not work:. v-radiobutton { color: $barvaModra; @include valo-radiobutton-style($selection-color: $barvaModra); } [u]

  1. Panel’s Caption color and backgroud color
    [/u]
  • how to change both of them without ValoTheme internal calculations?


3) CheckBox and Required Field Indicator

  • the indicator doesn’t appear beside the label and I added it with the help of “::after”
  • but when the error ocurr I got the situation showed at the snapshot (“CheckBoxReuiered.jpg”)


4) I have a grid where by clicking a row a window opens.

  • everything fine so far.
  • But I want that the window opens bellow the clicked row. (snapshot “RowAndOpenedWindow”)
  • Is there a way to know which row of the visibles Grid rows was clicked?
  • I hope that the issue is understandable.

Thanks!
Aleksander
39419.jpg
39420.jpg

Hi,

Almost 2 weeks has past since my post and I haven’t recived any answer yet of any point.
Please can you help me out with posted issues.

Thanks!
Mary Christmas & New Year 2018!

Aleksander

Hi,

I’m still waiting for some answers…

Aleksander

  1. The stylename for RadioButtonGroup seems to be “v-select-optiongroup” and “v-select-option” is used for individual RadioButtons

  2. This is tricky. I can figure out couple of ways to determine row index of the given item. However I think you need the relative row index of the visible rows, which is different thing. That is the tricky part. I think you should reconsider to use details generator for this, since it opens right below. Would be easier to implement. If you really need window, one approach would be to use click coordinates, something like:

     grid.addItemClickListener(event -> {
         event.getMouseEventDetails().getClientY();
     });
    

Hi,
I don’t want to bother to much, but I’m still waiting for some answers…
Thanks.

Aleksander

Hi Tatu,

issues 1) and 4) had been resolved. Thanks.
And when you will have time, can you take a look at issue
2) Panel’s Caption color and backgroud color

and especially at
3) CheckBox and Required Field Indicator.

Aleksander

Hi,

Me again.

To “my list” I have to add another “issue”.

  1. I want to know, if
    TwinColSelect
    is not ment to be bind with “Binder”
    I recive the error that the source code can’t be compiled.
    I solved this binding to the Binder the “unattached” TextField to be able that way to run

    binder.validate()
    and to get my error message.

Still waiting for the answers 2) and 4)

Aleksander

HI,

I’m still waiting for the aswers 2), 4) and 5). Especially, I want to know how to use ComboBox and TwinColSelect with the Binder, or, with something else, if Binder is not to ment to use with this two Components.

Thanks,
Aleksander

Hi Aleksander!

I’ve made this quick and dirty example that shows how to use Binder with ComboBox, you could do something similar with TwinColSelect:

    public static class City {
        private Integer id;
        private String name;
        public City() {
            id = new Double(Math.random()*100).intValue();
            name = new Double(Math.random()*100).toString();
        }
        public Integer getId() {
            return id;
        }
        public void setId(Integer id) {
            this.id = id;
        }
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
    }
    
    public static class Customer {
        private String name;
        private City city;
        public String getName() {
            return name;
        }
        public void setName(String name) {
            this.name = name;
        }
        public City getCity() {
            return city;
        }
        public void setCity(City city) {
            this.city = city;
        }
    }

    private void addBinderWithCombo(VerticalLayout vl) {
        Binder<Customer> binder = new Binder<>(Customer.class);
        ComboBox<City> cities = new ComboBox<>("Select City");
        cities.setItems(new City(),new City(),new City());
        cities.setItemCaptionGenerator(city->"City " + city.getName());
        binder.bind(cities, "city");
        Customer c = new Customer();
        binder.setBean(c);
        Button b = new Button("Show city");
        b.addClickListener(e->Notification.show("Selected City: " + c.getCity().getName()));
        vl.addComponents(cities,b);
    }

Regarding point 2), what do you mean with “without ValoTheme internal calculations”? … you should use the method
addStyleName()
and then just create a css class and style the panel with properties such as color and background color.
Regarding your issue 4), I think you’re referring to 3) (
“issues 1) and 4) had been resolved. Thanks”
). It’s strange that the indicator is shown different than other fields, can you try upgrading to a newer Vaadin version? … maybe that’s resolved …
Regards!

Hi Martin,


thanks for your answer. Let’s go to the issues. By the way, I now use the latest version of Vaadin, 8.3.0.

  1. I revisited yor code (and tried also) and, if I understand it the right way, it is not what I need or do.
    I need Binder to work with Validator

[code]

[code]
Now I use hidden TextField as "workaround" to be able to pass the "missing
[/code][font=Arial]
[code]
 
[/code]field" situation from ComboGroup to Binder/Validator and .forField  excepts only TextField.
[/font]
[/code]

permissionBinder.forField(txtGroupHidden)
 .withValidator(
 group -> !group.equals(""),
 setMessageError("Name of the Group", MessageError.FIELD_MANDATORY))
 .bind(Security::getGroup, Security::setGroup);
[/code]

.
.
[code]
BinderValidationStatus status = permissionBinder.validate();
[/code]
.  

 
2) If I understand the Valo Theme documentation,Valo maintain the contrast ration in panel's caption.
    if I put the caption font darker, the background become more clearer. 
    I was able to do only this like I wanted.

.[code]
v-panel-caption-mypanelstyle {   
    font-weight: bold;
    text-align: center;              
  }

Panel panel = new Panel("Title");
panel.addStyleName("mypanelstyle");
  1. Here I refer my self to 3) CheckBox Component where “RequiredIndicatorVisible(true)” has
    no efect. I don’t know, why. Therefore I added my style (::after …)

That’s all for now. I hope you understand what I want to achieve.

Regards,
Aleksander

Hi Aleksander!

  1. It seems that there was a problem with the markup, and I don’t understand this part. You “need Binder to work with Validator”, but Binder indeed works correctly with validator. I don’t understand what you want to achieve in this part.
  2. Yes, you’re right in this, there are some Valo calculations taking place, but you should be able to overwrite that by creating a custom css class, and using addStyleName(). It’s not clear to me if you were able to overcome this.
  3. This could be a bug, the best would be to
    create an issue
    with a snippet or simple test project that reproduces the problem so it could be fixed.

Regards!

Java 8
Vaadin 8.3.1

Hi Martin,

  1. As you can see in the attached snapshot (formPermisosInit) I made a simple Permition Form where
    every field is disabled if no “Usuario” is selected. When I choose one, appear the situation like
    shown in the snapshot (formPermisosUserNoPermitions).
    If, for example, the chosen user does not have any permition, clicking “Guardar” Button the error
    message appears (snapshot “formPermisosErrorMessage”). But as Binder only works with Field
    types, I did it a “workaround” using hidden textfield fox each combobox and TwinColSelect which I pass it to the Binder. I hope that now is clearer what I want to do.

1b) And I have another problem with Binder. When the user is saved or I select “No user”, the form is being cleaned. The side efect I get is that Binder is triggered and of course the textfields are marked as if there wouldn’t be any data, what is true, but I don’t want the evaluation to ocurr at this point. Only when I want to save the data. (see “formPermisosErrorIndicatorNoData”)

  1. I posponed this for now, first I want to finish the programm.
  2. I made a test in another small Vaadin project and I can confirm that the “Indicator” does not appear.
    It works with CheckBoxGroup where the Caption and the items are separated.

Regards,
Aleksander

42601.jpg
42602.jpg
42603.jpg
42604.jpg