【Vaadin14】TreeComboBox Improvement，如何將元件改得更好?

tags: Vaadin

¹

Common

TreeComboBox

查看TreeComboBox，原始碼會發現其實是用數個元件組合而成

• TextField
• Button
• Tree²

• Popup³

改善項目

1. 元件的title沒有靠左對齊，直接放在TextField上方，而不是Button上方? >>> link
2. 若動態增加Tree的項目，Tree本身的高度會自動調整，但Tree卻無法完整顯示所有項目 >>> link
3. 若Tree的內容超過元件預設寬度，則該內容直接被隱藏，竟不會產生水平scoller? >>> link
4. popup會出現在其他位置或不該出現的時候出現 >>> link

原始程式碼

Github

Title靠左對齊

這個最好改了，只要將Button丟進TextField即可

// 原程式碼 #138
getContent().add(filterField, popup);
// 將Button丟進TextField即可
filterField.setPrefixComponent(openButton);

Result

垂直Scoller

// 原程式碼 #132
// 這個方法的功能是為了避免Tree產生垂直scoller，而動態調整Tree元件的高度
tree.setHeightByRows(true);

Bug說明

• 僅出現於動態增加Tree的項目，反之移除項目不會發生
• 因為setHeightByRows這個方法的關係，故Tree本身會自動調整高度
• 但Tree卻無法完整顯示所有項目
• 例如：原有2個項目，動態新增為3個，如下圖
  • Tree知道項目變為3個，Tree實體也存3個項目，高度也調整成3個項目的高度
  • 但動態新增後，Tree只會顯示2個項目
  • 重複開啟popup數次後，Tree才又會顯示3個項目 (但這不是辦法)

Resolution

• 寧願有垂直scoller，也不應該用了setHeightByRows而無法顯示

// tree.setHeightByRows(true);
tree.setHeight("400px");

Result

水平Scoller

• 如上圖，可以發現當內容超過元件預設寬度，則該內容直接被隱藏
• 且元件並未產生水平scoller
• 官方人員在issue #471中已經回答

The column width is not explicitly defined, so it is using the default 100px width. By default all columns also have “flex=1”, so here when there’s only one column all the remaining space of the grid (after reducing 100px) is allocated to it. So the one column effectively takes the full width of the grid, but not more. If you shrink the grid below 100px, then you’ll get a horizontal scrollbar.

Potential solutions:

1. Approximate the width of the longest text and use em based width for the column. E.g. if the longest text is 40 characters long, set the column width to 40em.
2. Utilize the recently added column "auto width” feature. It won’t work out-of-the-box if the longer texts are loaded after expanding a node, and you will need to call the recalculateColumnWidths() JS method on the grid after a node has been expanded.

Resolution

方法1

• 自行預估內容最大寬度，去設定Tree元件寬度
• 若又不希望popup寬度太大，則於Tree外層再加個container

private Div treeContainer = new Div();

...
public TreeComboBox(ValueProvider<T, String> valueProvider) {

    ...
    // setWidth("300px"); treeContainer跟popup都設定成300px
    // tree設定成800px
    tree.setWidth("800px");
    treeContainer.setWidth(getWidth());
    treeContainer.add(tree);
    popup.add(treeContainer);
}

Result

方法2

參考上一篇解法⁴

Recurring Click Event

• popup會出現在其他位置或不該出現的時候出現
• issue：https://github.com/vaadin-component-factory/tree-combo-box/issues/2

Resolution

• 參考Popup的範例
• 修改原程式碼 126-130

openButton.setId("open-button");
openButton.setId("open-button");
//重複註冊click event
//openButton.addClickListener(event -> { popup.setOpened(true); });
popup.setFor("open-button");

---

1. TreeComboBox Addon
   https://vaadin.com/directory/component/treecombobox ↩︎

2. Tree Addon
   https://vaadin.com/directory/component/tree ↩︎

3. Popup Addon
   https://vaadin.com/directory/component/popup ↩︎

4. 【Vaadin14】如何替TreeGrid加上水平的Scroll Bar
   https://spicyboyd.blogspot.com/2021/03/vaadin14treegridscroll-bar.html ↩︎