tags: Vaadin
New API
HTML attribute
- 直接控制該元件HTML的參數
nameField.setAttribute("id", "nameField");
nameField.setAttribute("placeholder", "John Doe");
nameField.setAttribute("autofocus", "");
CSS style
- addThemeVariant 加入 Theme
- Theme的class name通常為：元件 + Variant
- 例如：NotificationVariant, GridVariant, ButtonVariant
- getClassList, getStyle
element.addClassName("critical");
element.removeClassName("primary");
element.getStyle().set("font-weight", "bold");
element.getStyle().remove("background-color");
element.getStyle().has("cursor");
已移除元件1
AbsoluteLayout
- <div> elements and CSS positioning
ColorPicker
<input type="color">- 替代addon：https://vaadin.com/directory/component/color-picker-field-for-flow
FileDownloader
- 利用html attribute：https://vaadin.com/forum/thread/17909506/vaadin-14-let-user-to-download-a-file-by-clicking-on-menu-item
download.getElement().setAttribute("download", true);
- 替代addon
https://vaadin.com/directory/component/file-download-wrapper
https://vaadin.com/directory/component/lazy-download-button
GridLayout
- 內建的FlexLayout, VerticalLayout, HorizontalLayout已堪用
Link
- 改用Anchor
List: OptionGroup, NativeSelect
- OptionGroup
- 改為CheckBox, CheckboxGroup
含Indeterminate功能 - 改為RadioButtonGroup
- 改為CheckBox, CheckboxGroup
- NativeSelect改為Select
- 這類元件都已改為集合的概念，請參考範例
// Select後面直接有泛型
Select<String> labelSelect = new Select<>();
labelSelect.setItems("Option one", "Option two");
// caption已改為label
labelSelect.setLabel("Label");
Login Page
- 登入畫面改用Login元件
Panel
- 內建元件：Scroller
- 目前尚未使用到
PopupView
- Can be made by combining Button and ContextMenu
- 替代addon：https://vaadin.com/directory/component/popup
Slider
<input type="range">- 目前找到的addon於Production Mode皆有問題，故暫時改用NumberField或IntegerField
TabSheet
- 改用Tabs
Toolbar
- 改用MenuBar
Tree
Window
- 改用Dialog
添加Header and Footer或參考Message Box - 若還是希望用Window的形式，則參考插件：https://vaadin.com/directory/component/subwindowdesktop-and-subwindow-component
其他常用Official Component
Binder
- Binding Data to Components
- 利用Binder控制data的檢查、get、set，用來管理CRUD
- 檢查後，invalid的錯誤訊息
- input data型態轉換，例如：Strint to Integer
Button
- click event 區分，Server or Client side
- EventListener 改為直接在建構子加入
- 可定義icon要在文字前或後：setIconAfterText(boolean iconAfterText)
Button rightButton = new Button("Right", new Icon(VaadinIcon.ARROW_RIGHT));
rightButton.setIconAfterText(true);
DatePicker
- 新增Localization功能，可針對不同語系呈現不同的日曆
Grid
- 有新增不少Renderer
- NativeButtonRenderer：create a clickable button in the cells
- TemplateRenderer
- ComponentRenderer：可以直接在建構子中new component
// 語法請參考 Generic Methods
// [[item.name]] is Polymer syntax
grid.addColumn(TemplateRenderer.<Person>of("<b>[[item.name]]</b>").withProperty("name", Person::getName)).setHeader("Name");
- 排序有2種
- In-memory sorting
Grid.Column 內建排序
setComparator(Comparator<T> comparator) - Backend sorting
資料search後，塞給grid
- In-memory sorting
- 新增Drag and Drop
可用來取代或輔助過去的功能，例如：“光纖” 地理節點的排序、“告警轉發” 人員及時間的設定 - Filtering
針對特定Column進行Filtering，可放在Grid Header或放在Grid外 - 移除mouse over的相關功能，改用title的方式
- 單點item：針對item顯示更多詳細資訊
setItemDetailsRenderer(Renderer<T> renderer) - cell右鍵點擊：新增ContextMenu的功能與操作
- 推薦插件 Grid Pagination
https://vaadin.com/directory/component/paginator
https://vaadin.com/directory/component/grid-pagination
HTML
- 根據Vaadin 14 Reference Card，Vaadin已提供常見的HTML元件
Div, Span, Section, Header, Footer, Article, H1, H2, H3,
H4, H5, H6, Paragraph, Label, Anchor, OrderedList, ListItem,
Image, DescriptionList, Emphasis, Hr, IFrame, Input, Main,
NativeButton, Nav, Pre, Section, UnorderedList - 或者使用Html
new Html("<b>Name</b>")
Icon
- 有內建Vaadin Icon，不需要再使用FontAwesome icon
- 還有Lumo Icon
- 有2種建立方式
Icon edit = new Icon(VaadinIcon.EDIT);
Icon close = VaadinIcon.CLOSE.create();
Icon icon = new Icon("lumo", "clock");
icon.setSize("100px");
icon.setColor("orange");
Notification
- 樣式
- 已移除 Notification.Type，改為 NotificationVariant
- 且不可於建構子中加入，改用
addThemeVariants(NotificationVariant... variants)
- 純文字或html
- 已移除 htmlContentAllowed 相關API及設定
- 因為有"加入元件"的API，直接將HTML的元件加入Notification即可
- 顯示位置
Notification.Position - 持續時間
- 加入元件
- 控制顯示、關閉 by code
Notification.show("程式錯誤").addThemeVariants(NotificationVariant.LUMO_ERROR);
Upload
- 取代MultiFileUpload Addon
- 不論單一檔案、複數檔案皆改為 Upload(Receiver receiver)
- Receiver：控制單一檔案、複數檔案
- FileBuffer
- MemoryBuffer
- MultiFileBuffer
- MultiFileMemoryBuffer
- 新增功能
- 拖曳檔案上傳
- 限制檔案大小
Components in Vaadin platform：https://vaadin.com/docs/v14/flow/migration/5-components.html ↩︎
沒有留言:
張貼留言