05. Ukuran dan Lokasi Widget / Control SWT

posted Nov 5, 2011, 6:03 AM by Editor KursusInternet   [ updated Nov 5, 2011, 6:45 PM ]

Pendahuluan

Setelah mengenal penggunaan dasar SWT terutama widget, maka tidak kalah pentingnya adalah pengaturan posisi dan ukuran widget maupun control (subclass dari widget) yang kita tampilkan. 

Ini penting karena terkait dengan user experience dalam menggunakan interface kita, jika pengaturan letak maupun ukurannya tidak friendly tentunya bisa berakibat user akan enggan menggunakan aplikasi kita lebih jauh.

Pada artikel ini akan dibahas penggunaan berbagai method dan atribut yang terkait dengan pengaturan kedua hal tersebut.

Pengaturan Lokasi


Gambar 1. Lokasi Widget terhadap Container

Seperti standar penentuan titik lokasi pada teknologi komputer, maka sistem koordinat dengan acuan awal pada sudut kiri atas layar juga digunakan oleh SWT. 

Pada SWT, lokasi widget adalah relatif terhadap sudut kiri atas dari container atau parent dimana widget itu berada. Hal ini juga berlaku untuk control maupun composite lainnya. Satuan ukuran yang digunakan adalah pixel.

Sebagai contoh pada Gambar 1 terlihat bahwa suatu widget terletak 15 pixel ke kanan dan 20 pixel ke bawah dari sudut kiri atas container-nya. Dengan acuan koordinat (0, 0) yang diambil dari sudut kiri atas container, maka koordinat widget ini relatif terhadap container-nya tersebut adalah (20, 15).

Untuk mengatur lokasi koordinat pada widget SWT kita gunakan method setLocation() yang memiliki dua variasi syntax :

        setLocation(Point point)
        setLocation(int x, int y)

Contoh penggunaan dari kedua syntax tersebut adalah sebagai berikut :

        labelSatu.setLocation(new Point(15,20));

atau

        labelSatu.setLocation(15,20);


Untuk mengambil lokasi dari widget itu sendiri, kita gunakan method  getLocation() yang mengembalikan objek berupa Point. 

Pengaturan Ukuran

Setiap widget harus ditentukan ukurannya agar bisa "terlihat" dan dapat digunakan. Jika tidak, maka widget tersebut seakan tersembunyi dari container-nya.


Gambar 2. Ukuran Widget dalam dimensi lebar dan tinggi

Penentuan ukuran adalah dari dimensi lebar dan tinggi dari suatu widget. Seperti widget yang terlihat pada Gambar 2, memiliki dimensi lebar 400 pixel dan tinggi 80 pixel.

Method yang digunakan untuk menentukan ukuran adalah setSize() dengan variasi syntax berikut :

        setSize(Point point)
        setSize(int width, int height)

Contoh penggunaan dari kedua syntax tersebut adalah sebagai berikut :

        labelSatu.Size(new Point(400,80));

atau

        labelSatu.setLocation(400, 80);

Untuk mengambil ukuran dari widget itu sendiri, kita gunakan method  getSize() yang mengembalikan objek berupa Point. 

Contoh Penggunaan "setLocation()" dan "setSize()"

Berikut adalah contoh penggunaan setLocation() dan setSize() dengan control Label.

UkuranDanLokasi1.java

package com.kursusinternet.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

public class UkuranDanLokasi1 {
  Display display;
  Shell shell;
 
  public void tampil()
  {
    display = new Display();
    shell = new Shell(display);
    
    Label labelSatu = new Label(shell, SWT.LEFT);
    labelSatu.setText("Contoh Label Satu");
    labelSatu.setLocation(20,15);
    labelSatu.setSize(40080)
   
    
    Label labelDua = new Label(shell, SWT.LEFT);
    labelDua.setText("Contoh Label Dua");
    labelDua.setLocation(new Point(20,120));
    labelDua.setSize(new Point(20,80))
;    
    
    shell.setText("Contoh Penggunaan Ukuran dan Lokasi !");
    shell.setSize(200200);
    shell.open();
    
    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
        display.sleep();
      }
    }
    display.dispose();     
  }
  
  public static void main(String[] args) {
    new UkuranDanLokasi1().tampil();
  }
}

Screenshot Hasil Eksekusi

Gambar 3 berikut adalah screenshot hasil eksekusi dari contoh di atas. Terlihat untuk label kedua terpotong sehingga teks lengkapnya tidak terlihat, hanya kelihatan teks "Cont". 

Ini disebabkan kita mengatur ukuran lebar yang terlalu sedikit untuk label tersebut.


Gambar 3. Screenshot Hasil Eksekusi UkuranDanLokasi1.java

Pengaturan Ukuran secara Otomatis dengan Method "pack()"

Selain method setSize(), kita dapat menggunakan method pack() yang juga menentukan ukuran dari suatu control / widget tetapi dilakukan secara otomatis. 

Perhitungan tinggi dan lebar akan dilakukan oleh SWT sehingga widget ataupun control tersebut dapat terlihat secara keseluruhan. Kita menggunakan method ini apabila kita tidak memiliki perhitungan ukuran yang pasti.

Contoh Penggunaan

Berikut adalah modifikasi kode dari contoh sebelumnya dengan mengganti method setSize() dengan method pack().

UkuranDanLokasi2.java

package com.kursusinternet.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Point;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

public class UkuranDanLokasi2 {
  Display display;
  Shell shell;
 
  public void tampil()
  {
    display = new Display();
    shell = new Shell(display);
    
    Label labelSatu = new Label(shell, SWT.LEFT);
    labelSatu.setText("Contoh Label Satu");
    labelSatu.setLocation(20,15);
    labelSatu.pack();    
    
    Label labelDua = new Label(shell, SWT.LEFT);
    labelDua.setText("Contoh Label Dua");
    labelDua.setLocation(new Point(20,120));
    labelDua.pack();    
    
    shell.setText("Contoh Penggunaan Ukuran dan Lokasi !");
    shell.setSize(200200);
    shell.open();
    
    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
        display.sleep();
      }
    }
    display.dispose();     
  }
  
  public static void main(String[] args) {
    new UkuranDanLokasi2().tampil();
  }
}

Screenshot Hasil Eksekusi

Gambar 4 berikut adalah hasil eksekusi dari contoh penggunaan pack(). Terlihat kedua label tampil dengan teks lengkap.


Gambar 4. Screenshot Hasil Eksekusi UkuranDanLokasi2.java

Method "setBounds()"

Method setBounds() adalah method yang mengatur lokasi dan ukuran dalam satu method. Bisa disimpulkan bahwa method ini merupakan gabungan dari method setSize() dan setLocation().

Dua variasi dari syntax method setBounds() adalah sebagai berikut :

        setBounds(Rectangle rectangle)
        setBounds(int x, int y, int width, int height)

Contoh Penggunaan

Berikut adalah contoh kode menggunakan setBounds().

UkuranDanLokasi3.java

package com.kursusinternet.swt;

import org.eclipse.swt.SWT;
import org.eclipse.swt.graphics.Rectangle;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Shell;

public class UkuranDanLokasi3 {
  Display display;
  Shell shell;
 
  public void tampil()
  {
    display = new Display();
    shell = new Shell(display);
    
    Label labelSatu = new Label(shell, SWT.LEFT);
    labelSatu.setText("Contoh Label Satu");
    labelSatu.setBounds(20,159020);
    
    Label labelDua = new Label(shell, SWT.LEFT);
    labelDua.setText("Contoh Label Dua");
    labelDua.setBounds(new Rectangle(20558020));
    
    shell.setText("Contoh setBounds !");
    shell.setSize(200200);
    shell.open();
    
    while (!shell.isDisposed()) {
      if (!display.readAndDispatch()) {
        display.sleep();
      }
    }
    display.dispose();     
  }
  
  public static void main(String[] args) {
    new UkuranDanLokasi3().tampil();
  }
}

Screenshot Hasil Eksekusi

Gambar 5 berikut adalah hasil eksekusi dari contoh penggunaan setBounds(). Perhatikan label kedua terpotong sedikit karena ukuran yang digunakan tidak mencukupi untuk menampilkan keseluruhan teks.


Gambar 5. Screenshot Hasil Eksekusi UkuranDanLokasi3.java

~~ Selesai ~~
Comments