Eclipse Plug-in - How to use SashForm, FormData to create FormLayout

今天要探討的是如何利用SashForm來分割SWT Widgets達到做調整splitter(橫桿 or 直桿)動作,

再加上設定FormData來處理FormLayout內SWT Widgets排版。這次的範例將使用上一篇提到

的Graph example來修改!

首先,上一篇使用的排版為GridLayout,左側的List及右側的Graph之間的splitter是不可調整

的!  當使用SashForm包進這兩個widgets後,此splitter就可以自由移動調整大小,再加上設定

FormData進行排版!




相關程式碼修改如下:
  //1. split Layout to two columns
  parent.setLayout(new FormLayout());
  
  Text statusTxt = new Text(parent, SWT.LEFT | SWT.READ_ONLY);
  statusTxt.setText("Hello!!");
  
  FormData form = new FormData();
  form.left   = new FormAttachment(0,0);
  form.right  = new FormAttachment(100,0);
  form.top    = new FormAttachment(statusTxt,0);
  form.bottom = new FormAttachment(100,0);
  
  SashForm composite = new SashForm(parent, SWT.HORIZONTAL);
  composite.setLayoutData(form);

  //2. create SWT List and set layout
  .....

  composite.setWeights(new int[]{1,4});

首先,請將上一篇範例的註解//1. split Layout to two columns該區塊的code註解掉

只須set FormLayout(),再來加上Text來新增一狀態列

接著,為了SashForm的排版需定義FormData

SashForm設定為水平排版,因此還需設定左側的List與右側的Graph各占多少比例

由composite.setWidgets(...)表示,若為兩個元件就定義初始化int塞入兩個數值,以此類推

FormData部分屆時會set進SashForm的Layout內,因此請以它的角度去思考,即

form.top => new FormAttachment(statusTxt, 0)
上方是狀態列

form.right => new FormAttachment(100, 0)
右方自動延伸至底

form.right => new FormAttachment(0, 0)
左方不動

form.bottom => new FormAttachment(100, 0)
下方自動延伸至底

至於為何了解要定義這些FormAttachment,除了參考官方範例外,另外參數怎知要塞什麼?

因為假設SashForm最後沒做setLayoutData的動作,UI會變成這樣


由上圖可知,SashForm與Text狀態列將重疊在一起,且SashForm並沒有自動放大

由官方API可以得知

FormAttachment(int numerator, int offset)

在這邊使用的第一個參數為分子,而查了一下底層code其分母預設是帶100

可以理解成這是一放大比例,在這邊我填入右側及下側皆為100,因此為放大比率對照整

個Layout為100%大小

PS. 在List及Graph內setLayoutData請註解掉,本來是set GridData的設定

留言