Posted by: tonyteaching | July 15, 2009

NetBeans: dasar-dasar bikin GUI/Interface

1. Definisikan/buat dulu Projectnya:

  1. Choose File > New Project. Alternatively, you can click the New Project icon in the IDE toolbar.
  2. In the Categories pane, select the Java node. In the Projects pane, choose Java Application. Click Next.
  3. Type obm in the Project Name field and specify a path e.g. in your home directory as the project location.
  4. (Optional) Select the Use Dedicated Folder for Storing Libraries checkbox and specify the location for the libraries folder. See Sharing Project Libraries for more information on this option.
  5. Ensure that the Set as Main Project checkbox is selected.
  6. Deselect the Create Main Class checkbox if it is selected.
  7. Click Finish.

Tahapan membuat project ini dalam NetBeans meng-create kerangka sebuah folder dengan nama sesuai nama project dan di dalamnya terdapat 3 folder (nbproject, src, test) dan 2 files (build.xml, manifest.mf)

Ingat, karena kita belum bikin object apa2 di dalam project ini maka di dalam folder src pastilah masih kosong.

———–

2. bikin Container/wadah/tempat untuk Graphical User Interface yakni dengan JFrame Form

  1. In the Projects window, right-click the obm node and choose New > JFrame Form.
  2. Enter obmUI as the Class Name. (silahkan namanya terserah)
  3. Enter my.contacteditor as the package. (terserah juga, ini masalah penempatan file obmUI.java nantinya, kalo seperti ini berarti didalam forder ‘src’ akan dibikin 1 sub-folder lagi ‘my’. Dalam kasus saya, saya lebih suka folder ‘src’ hanya punya 1 level, jadi semua file ngumpul bareng di folder ‘src’ (nggak ada sub-folder) biar mudah nyarinya dan packet-nya –> jadi di bagian packet ini saya kosongi.🙂
  4. Click Finish.Sebagai hasilnya:  IDE akan meng-create the obmUI form (obmUI.form) and the obmUI class yang ada di dalam script the ContactEditorUI.java application (obmUI.java) and membuka the obmUI form dalam GUI Builder.

————————

3. Kalo container/papan dasar (JFrame) udah dibikin, saatnya bikin container blok-blok object yang biasanya kita sebut “panel” (JPanel)

Ingat: biasakan men-desain layout interface kita dulu di atas kertas sebelum membikinnya di NetBeans biar tampilannya bener-bener fix dan udah mencakup semua fungsi2 yang dibutuhkan oleh sistem!

  1. In the Palette window, select the Panel component from the Swing Containers category by clicking and releasing the mouse button.
  2. Move the cursor to the upper left corner of the form in the GUI Builder. When the component is located near the container’s top and left edges, horizontal and vertical alignment guidelines appear indicating the preferred margins. Click in the form to place the JPanel in this location.

Nah..panel tersebut selanjutnya dapat kita atur posisi dan ukurannya dengan click-drag.

Biasanya dalam 1 Frame kita membikin lebih dari 1 Panel untuk mengelompokkan objek-objek yang berbeda (Panel = blok objek untuk fungsi yang sama)

3.a Bikin Border untuk tiap Panel

agar tiap Panel kelihatan batasnya maka sebaiknya kita bikin border untuk setiap panel.

caranya:

  1. Select the top JPanel in the GUI Builder atau Right click Panel yang akan kita bikinin bordernya
  2. In the Properties window, click the ellipsis button (…) next to the Border property.
  3. In the JPanel Border editor that appears, select the TitledBorder node (bebas milih) in the Available Borders pane.
  4. In the Properties pane below, enter Client Detail for the Title property.
  5. Click the ellipsis (…) next to the Font property, select Bold for the Font Style, and enter 12 for the Size. Click OK to exit the dialogs.
  6. Select the bottom JPanel and repeat steps 2 through 5, but this time right-click the JPanel and access the Properties window using the pop-up menu. Enter Client Summary for the Title property.Titled borders are added to both JPanel components.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: