vaadin - Vaadinを使用してメニューを非表示にして折りたたむ

Question

vaadinapiを使用して非表示および折りたたみコンテンツを作成する方法を知っている人はいますか。

Answer 1

すべてのコンポーネントは、可視性のオンとオフをトリガーできるsetVisible（）メソッドを継承します。これは、少なくともすべてのコンポーネントとコンポーネントコンテナを意味します。ただし、これはアニメーションなしで発生します。一部のアニメーションが好きな場合は、アドオンに依存する必要があります。たとえば、HenrikPaulのDrawerはある種のアニメーションの非表示と表示を行います。

これはあなたが考えていたものですか？

Answer 2

vaadinのTabSheet機能を使用して実現しました。ユーザーが「-」タブをクリックするたびに「+」と「-」の2つのタブを作成しました。TabSheetの高さを100％に設定し、ユーザーが「+」タブをクリックするたびに作成しました。 TabSheetの高さを20％（タブシートの表示されている高さ）に設定しているため、TabSheetのコンテンツはすべてユーザーの視点で非表示になります。

     // Create an empty tab sheet.
    TabSheet tabsheet = new TabSheet();


    // Defining Vertical Layout for Tab 1 content
    final VerticalLayout verLayout1 = new VerticalLayout();


       // Tab 2 content
    VerticalLayout verLayout2 = new VerticalLayout();
    verLayout2.setSizeUndefined();
    verLayout2.setMargin(true);

    tabsheet.addTab(verLayout1, "+", null);
    tabsheet.addTab(verLayout2, "-", null);
    tabsheet.addListener(listenerForTab());




      /**
   * Method to handle tab sheet hide/show event
   * 
   * @return TabSheet.SelectedTabChangeListener
   */
  public TabSheet.SelectedTabChangeListener listenerForTab() {
    _logger.info("Entering in to tabChangeListener of WizardUtil");
    // Instance of TabSheet.SelectedTabChangeListener
    TabSheet.SelectedTabChangeListener listener = new TabSheet.SelectedTabChangeListener() {
      public void selectedTabChange(SelectedTabChangeEvent event) {
        TabSheet tabsheet = event.getTabSheet();
        Tab tab = tabsheet.getTab(tabsheet.getSelectedTab());
        // Tab content displayed on setting height to the tab sheet
        if(tab.getCaption().equals("+")) {
          tabsheet.setHeight("100%");
        } else {
          tabsheet.setHeight("33px");
        }
      }
    };
    _logger.info("Exiting from tabChangeListener of WizardUtil");
    return listener;
  }