【Vaadin】將標題及必填*設置在元件左側

目標

• 元件的標題改設置在左側

測試環境

• Vaadin 7
• Java 8

方法1: FormLayout

1. 將元件全數add進FormLayout
2. FormLayout自動劃分成2個column
• 標題
• 元件
3. FormLayout可能要 setMargin(false)
4. 可以發現沒有標題的Button也被置於元件的column中
5. 標題column的寬度則由最長的標題決定
6. 範例

   sample = new FormLayout();
    
   final Component child1 = new DateField("Child 1");
   child1.setWidth(100.0f, Unit.PERCENTAGE);
   
   final TextField child2 = new TextField("Child 2");
   child2.setWidth(100.0f, Unit.PERCENTAGE); 
   sample.addComponents(child1, child2, new CheckBox("Child 3"), new Button("Child 4"));

方法2: HorizontalLayout + Label

1. 利用Label作為其他元件的標題
• 但可能會遇到，如果該元件要必填(required)時，該如何產生 * ? 解法
2. 再將Label及元件一起add進HorizontalLayout
3. 範例

   sample = new HorizontalLayout();
    
   Label caption = new Label("元件標題");
   final TextField child = new TextField();
   sample.addComponents(caption, child);

比較

• 方法1
  
  
  
  
• 方法2
  
  
  

補充: 自定義必填提示

new Label("元件標題 <span class="v-required-field-indicator">*</span>
", ContentMode.HTML)

參考資料

• Label that looks like "required"
• FormLayout Demo