【Vaadin7 to 14】Addon常用元件整理

tags: Vaadin

Common 前言

舊版的Addon皆無法使用

• 舊版元件package：com.vaadin.ui.*;
• 新版元件package：com.vaadin.flow.component.*;

已內建的Addon

有些Addon在V14已經正式成為Official Component

• NumberField
• ContextMenu

尚未找到替代方案Addon

• IndeterminateCheckbox
• PopupButton

推薦使用Addon

TextField

• 該元件其實已經有很多內建Official Component
  例如：NumberField, EmailField, PasswordField…
• 若還有其他需求，可以自己決定formatter或參考
  Cleave.js：https://vaadin.com/directory/component/textfield-formatter

Tooltip

• HTML：用html屬性的title撰寫

getElement().setAttribute("title", tooltip);

• Tippy.js：https://vaadin.com/directory/component/tooltips4vaadin

BreadCrumb

• 一般：https://vaadin.com/directory/component/breadcrumb-component/
• 可與側邊選單結合：https://vaadin.com/directory/component/hybridmenu/

起訖時間

• https://vaadin.com/directory/component/daterange-picker
• 個人比較推薦這個
  https://vaadin.com/directory/component/daterangepicker-for-vaadin/
  

簡易報表 Jasper Reports

• https://vaadin.com/directory/component/report-ui
  

輪播 Carousel

• https://vaadin.com/directory/component/carousel-addon
• 個人比較推薦這個
  https://vaadin.com/directory/component/swiper

Fullscreen

• https://vaadin.com/directory/component/fullscreen/

步驟/流程控制 Stepper

• https://vaadin.com/directory/component/vstepper/
  

DistributionBar

• https://vaadin.com/directory/component/vstackbarflow/
• 其實上面這個addon，可以改的地方不多，後來只好利用MenuBar改寫

趨勢圖

• https://vaadin.com/directory/component/grid-sparklinerenderer-flow
• 個人還是比較習慣使用PlotlyJS

其他Addon

Animator

• https://vaadin.com/directory/component/compani

ComboBoxMultiselect

• https://vaadin.com/directory/component/multiple-select
• 與原始元件功能相同：https://vaadin.com/directory/component/multiselectcombobox
• 個人覺得這個比較好(功能較多)： https://vaadin.com/directory/component/multicombobox-component
  

MessageBox

• https://vaadin.com/directory/component/confirm-dialog
• 個人推薦這個addon
  https://vaadin.com/directory/component/messagedialog-for-vaadin-flow
  

OpenLayers

GIS圖資相關

• 沒有找到addon，以下為解決方案
  https://github.com/jcgueriaud1/vaadin-openlayers-demo
  https://stackoverflow.com/questions/59250823/openlayers-and-vaadin-14
• 或者放棄OpenLayers，改用其他圖資
  • (需要key) Google Map
    https://vaadin.com/directory/component/google-maps-addon/
  • LeafletMap
    https://vaadin.com/directory/component/leafletmap-for-vaadin/
    推薦使用(範例多)：https://vaadin.com/directory/component/leaflet4vaadin/
    

SliderPanel

改用SlideTab
https://vaadin.com/directory/component/slidetab

Switch

改用ToggleButton
https://vaadin.com/directory/component/togglebutton-for-flow

VizComponent

• 原先只使用其中的ZoomSettings
• Cytoscape.js
  https://vaadin.com/directory/component/cytoscape-addon/