Na przyk\u0142adzie grida \u2013 w Vaadinie 7 wymagane by\u0142o najpierw utworzenie kontenera, kt\u00f3ry nale\u017ca\u0142o wype\u0142ni\u0107 obiektami a nast\u0119pnie przekaza\u0107 go do Grida. W Vaadinie 8 obiekty mo\u017cna przekaza\u0107 bezpo\u015brednio do Grida. Listing 2.2. oraz Listing 2.3. przedstawiaj\u0105 te r\u00f3\u017cnice.<\/p>\n\n\n
\nGrid grid = new Grid();\nList<MyObject> objects = new ArrayList<>();\nBeanItemContainer<MyObject> container = new BeanItemContainer<>(MyObject.class,objects);\ngrid.setContainerDataSource(container);\n<\/pre><\/div>\n\n\nListing 2.2. Dodanie obiekt\u00f3w do Grida w Vaadinie 7<\/em><\/p>\n\n\n\n<\/div>\n\n\n
\nGrid<MyObject> grid = new Grid<>();\nList<MyObject> objects = new ArrayList<>();\ngrid.setItems(objects);\n<\/pre><\/div>\n\n\nListing 2.3. Dodanie obiekt\u00f3w do Grida w Vaadinie 8<\/em><\/p>\n\n\n\n<\/div>\n\n\n\n
- Uproszczenie sposobu pobierania warto\u015bci z komponent\u00f3w podczas ich zmiany warto\u015bci<\/li><\/ul>\n\n\n\n
W Vaadinie 7 dodaj\u0105c listener wywo\u0142ywany podczas zmiany warto\u015bci np. comoboxa, procedura pobrania nowo ustawionej warto\u015bci by\u0142a nieco wyd\u0142u\u017cona, nale\u017ca\u0142o pos\u0142u\u017cy\u0107 si\u0119 interfejsem Property, w Vaadinie 8 warto\u015b\u0107 t\u0105 mo\u017cna pobra\u0107 bezpo\u015brednio z eventu. Wynika to ze zmiany modelu danych w Vaadinie 8.<\/p>\n\n\n
\nComboBox combobox = new ComboBox();\ncombobox.addValueChangeListener(event -> {\nProperty<String> property = event.getProperty();\nString value = property.getValue();\nSystem.out.println("Value : " + value);\n});\n<\/pre><\/div>\n\n\nListing 2.4. Pobranie zmienianej warto\u015bci comboboxa w Vaadinie 7<\/em><\/p>\n\n\n\n<\/div>\n\n\n
\nComboBox<String> combobox = new ComboBox<>();\ncombobox.addValueChangeListener(event -> {\nString value = event.getValue();\nSystem.out.println("Value : " + value);\n});\n<\/pre><\/div>\n\n\nListing 2.5. Pobranie zmienianej warto\u015bci comboboxa w Vaadinie 8<\/em><\/p>\n\n\n\n<\/div>\n\n\n\n
- Uproszenie Lazy loadingu<\/li><\/ul>\n\n\n\n
W Vaadinie 7 w celu otrzymania efektu lazy loading np. w Gridzie, nale\u017ca\u0142o utworzy\u0107 w\u0142asn\u0105 implementacj\u0119 kontenera obs\u0142uguj\u0105cego ten przypadek. W Vaadinie 8 zosta\u0142o to maksymalnie uproszczone. Wystarczy u\u017cy\u0107 metody Grida setDataProvider() przedstawionej poni\u017cej:<\/p>\n\n\n
\npublic void setDataProvider(FetchItemsCallback<T> fetchItems, SerializableSupplier<Integer> sizeCallback)\n<\/pre><\/div>\n\n\nListing 2.6 Metoda setDataProvider<\/em><\/p>\n\n\n\n<\/div>\n\n\n\n
Interfejs FetchItemsCallback posiada jedn\u0105 metod\u0119 przyjmuj\u0105c\u0105 3 parametry:<\/p>\n\n\n\n
- List<QuerySortOrder> \u2013 list\u0119 okre\u015blaj\u0105c\u0105 spos\u00f3b sortowania<\/li>
- Int offset \u2013 index pocz\u0105tkowy obiekt\u00f3w do pobrania<\/li>
- Int limit \u2013 liczba obiekt\u00f3w do pobrania<\/li><\/ul>\n\n\n\n
Interfejs SerializableSupplier ma za zadanie zwr\u00f3ci\u0107 liczb\u0119 wszystkich docelowych element\u00f3w do wy\u015bwietlenia. Poni\u017cej zosta\u0142a przyk\u0142adowa implementacja serwisu, spe\u0142niaj\u0105cego oba warunki implementacji interfejs\u00f3w FetchItemsCallback (metoda findAll()) i SerializableSupplier (metoda count()).<\/p>\n\n\n
\npublic class MyService {\n \nList<MyObject> data = new ArrayList<>();\n \npublic MyService() {\n \nfillData();\n}\n \nprivate void fillData() {\n \nfor (int i = 0; i < 100; i++) {\ndata.add(new MyObject(i));\n}\n}\n \npublic Stream<MyObject> findAll(List sortOrder, int offset, int limit) {\n \nList<MyObject> result = IntStream.range(offset, offset + limit).mapToObj(i -> data.get(i))\n.collect(Collectors.toList());\nreturn result.stream();\n}\n \npublic int count() {\n \nreturn data.size();\n}\n \n}\n<\/pre><\/div>\n\n\nListing 2.7. Klasa MyService<\/em><\/p>\n\n\n\n<\/div>\n\n\n\n
Obiekt MyObject \u2013 do wy\u015bwietlenia w gridzie:<\/p>\n\n\n
\npublic class MyObject {\n \nprivate int value;\n \npublic MyObject(int value) {\n \nthis.value = value;\n}\n \npublic int getValue() {\n \nreturn value;\n}\n \npublic void setValue(int value) {\n \nthis.value = value;\n}\n}\n<\/pre><\/div>\n\n\nListing 2.8. Klasa MyObject<\/em><\/p>\n\n\n\n<\/div>\n\n\n
\nMyService service = new MyService();\nGrid<MyObject> grid = new Grid<>(MyObject.class);\ngrid.setDataProvider(service::findAll, service::count);\n<\/pre><\/div>\n\n\nListing 2.9. Zastosowanie lazy loading w Gridzie<\/em><\/p>\n\n\n\n<\/div>\n\n\n\n
Opr\u00f3cz powy\u017cszych korzy\u015bci, dodatkowym atutem w Vaadinie 8 jest znacznie lepszy performance. Na przyk\u0142ad wy\u015bwietlaj\u0105c 100 000 obiekt\u00f3w w gridzie czas generowania takiego grida w starej wersji Vaadina trwa\u0142 oko\u0142o 233ms a w przypadku Vaadina 8 tylko 9ms, r\u00f3\u017cnica zatem jest bardzo du\u017ca. Vaadin 8 posiada tak\u017ce lepsz\u0105 optymalizacj\u0119 strony klienckiej np. poprzez zastosowanie technologii flexbox, wi\u0105\u017ce si\u0119 to jednak z wsparciem przez nowsze wersje przegl\u0105darek (Firefox minimum wersja 28, Chrome minimum 21), IE tylko cz\u0119\u015bciowo wspiera t\u0105 technologi\u0119, dlatego nie jest zalecany.<\/p>\n\n\n\n
Migracja Vaadina 7 do Vaadina 8<\/h3>\n\n\n\n
Tw\u00f3rcy Vaadina 8 dostrzegli problem w rozbie\u017cno\u015bci mi\u0119dzy Vaadinem 7 a Vaadinem 8, dlatego przygotowali specjalne compatilibity packages, zawieraj\u0105ce elementy starego API. W projekcie maven u\u017cycie compability packages jest bardzo proste, wystarczy podmieni\u0107 odpowiednie zale\u017cno\u015bci w pliku pom.xml. Na listingu 3.1 znajduje si\u0119 zale\u017cno\u015b\u0107 wykorzystywana w Vaadinie 7, na listingu 3.2. znajduje si\u0119 zale\u017cno\u015b\u0107 wykorzystywana w Vaadinie 8 przy migracji:<\/p>\n\n\n
\n<dependency>\n<groupId>com.vaadin<\/groupId>\n<artifactId>vaadin-server<\/artifactId>\n<version>7.7.6<\/version>\n<\/dependency>\n<\/pre><\/div>\n\n\nListing 3.1. Zale\u017cno\u015b\u0107 o artefakcie vaadin-server w Vaadinie 7<\/em><\/p>\n\n\n\n<\/div>\n\n\n
\n<dependency>\n<groupId>com.vaadin<\/groupId>\n<artifactId>vaadin-compatibility-server<\/artifactId>\n<version>8.0.0<\/version>\n<\/dependency>\n<\/pre><\/div>\n\n\nListing 3.2. Zale\u017cno\u015b\u0107 o artefakcie vaadin-compatibility-server w Vaadinie 8<\/em><\/p>\n\n\n\n<\/div>\n\n\n\n
Dzi\u0119ki temu zabiegowi, wszystkie klasy u\u017cyte w ramach artefaktu vaadin-server w vaadinie 7, b\u0119d\u0105 mog\u0142y zosta\u0107 u\u017cyte po migracji do Vaadina 8. Poni\u017cej spis wszystkich compatibility artefakt\u00f3w dost\u0119pnych w Vaadinie 8:<\/p>\n\n\n\n
- vaadin-compatibility-server<\/li>
- vaadin-compatibility-client<\/li>
- vaadin-compatibility-client-compiled<\/li>
- vaadin-compatibility-shared<\/li>
- vaadin-compatibility-themes<\/li><\/ul>\n\n\n\n
Po podmianie zale\u017cno\u015bci nale\u017cy pami\u0119ta\u0107 o zaktualizowaniu import\u00f3w i widgetset\u00f3w, aby nie robi\u0107 tego r\u0119cznie powsta\u0142 migration tool \u2013 Vaadin Maven plugin mo\u017ce wykona\u0107 t\u0105 prac\u0119 przy u\u017cyciu targetu vaadin:upgrade8<\/em>. Po wykonaniu tej operacji migracja powinna zako\u0144czy\u0107 si\u0119 sukcesem. Warto podkre\u015bli\u0107, \u017ce powy\u017csza migracja pozwala nam u\u017cy\u0107 Vaadina 7 w Vaadinie 8. Chc\u0105c u\u017cywa\u0107 komponent\u00f3w Vaadina 8 nale\u017cy przepisa\u0107 stare komponenty na nowe, niestety jest to nieuniknione gdy\u017c Vaadin 8 stosuje zupe\u0142nie inny model danych od Vaadina 7.<\/p>\n\n\n\n \n
\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n \n
\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n
\n \n\n
<\/div>\n <\/div>\n <\/div>\n<\/div>\n \n\n
\n 4.4\/5 ( votes: 8) <\/div>\n <\/div>\n","protected":false},"excerpt":{"rendered":"
W tym artykule przedstawi\u0119 w spos\u00f3b og\u00f3lny technologi\u0119 Vaadin \u2013 framework w j\u0119zyku Java, a nast\u0119pnie om\u00f3wi\u0119 kilka r\u00f3\u017cnic wyst\u0119puj\u0105cych … Continued<\/a><\/p>\n","protected":false},"author":207,"featured_media":7658,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1314],"tags":[330,791,111],"class_list":["post-7614","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development-na-twardo","tag-java","tag-vaadin","tag-web-development"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/06\/vaadin.jpg","category_names":["Development na twardo"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/7614"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/users\/207"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/comments?post=7614"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/7614\/revisions"}],"predecessor-version":[{"id":18730,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/posts\/7614\/revisions\/18730"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media\/7658"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/media?parent=7614"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/categories?post=7614"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/wp-json\/wp\/v2\/tags?post=7614"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"rys1.1](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2019\/06\/rys1.1-1.png\")
<\/a>