Memakai SwingXBuilder Di Griffon: Part 2


JXHeader

JXHeader adalah sebuah komponen untuk menampilkan judul, keterangan dan icon. Berikut ini adalah contoh kode program yang memakai JXHeader:

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

  	flowLayout()
  	jxheader(title: "The Solid Snake", description: "Catatan Harian Seorang Developer")
}

Tampilannya akan terlihat seperti pada gambar berikut ini:

JXHeader

JXHeader

JXImageView

JXImageView dapat dipakai untuk menampilkan gambar dimana pengguna bisa men-drag gambar yang berada di dalam JXImageView. JXImageView juga menyediakan method setScale() untuk zooming gambar. Berikut ini adalah contoh kode program yang memakai JXImageView:

def zoom = 0.2

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

  	borderLayout()
	jximageView(constraints: CENTER, id: "imageView").with {
		setImage(new File("C:/Users/Public/Pictures/Sample Pictures/Koala.jpg"))
		setScale(zoom)
  	}		
  	jxpanel(constraints: PAGE_START) {
	  	jxbutton(text: "Perbesar",  actionPerformed: { 
			  zoom = [10, zoom+0.01].min(); 
			  imageView.setScale(zoom); 
		})
		jxbutton(text: "Perkecil", actionPerformed: { 
			  zoom = [-10, zoom-0.01].max();
			  imageView.setScale(zoom);
		})
	}

}

Tampilannya akan terlihat seperti pada gambar berikut ini:

JXImageView

JXImageView

JXList

Pada dasarnya JXList adalah sebuah JList yang ditambah dengan berbagai fitur SwingX seperti rollover, highlighter dan searchable. Berikut ini adalah contoh kode program yang memakai JXList:

import java.awt.Color
import javax.swing.border.TitledBorder
import org.jdesktop.swingx.*
import org.jdesktop.swingx.decorator.*

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

  	borderLayout()

  	jxlist(new JXList(['The', 'Solid', 'Snake', 'Blog'].toArray()), id: 'list', 
		  constraints: CENTER, border: new TitledBorder("Pilih:")).with {
	  setRolloverEnabled(true)
	  addHighlighter(new ColorHighlighter(HighlightPredicate.ROLLOVER_ROW,
	  	null, Color.GREEN))
	}

	jxfindBar(new JXFindBar(list.getSearchable()), constraints: PAGE_START)

}

Tampilan kode program di atas akan terlihat seperti pada gambar berikut ini:

JXList

JXList

JXLoginPane

Sesuai dengan namanya, JXLoginPane dipakai untuk menampilkan dialog login. Berikut ini adalah contoh kode program yang menampilkan dialog login:

import org.jdesktop.swingx.*
import org.jdesktop.swingx.auth.LoginService
import org.jdesktop.swingx.decorator.*

JXLoginPane panel = new JXLoginPane(controller)
JFrame frame = JXLoginPane.showLoginFrame(panel)
frame.setVisible(true)

JXLoginPane akan secara otomatis memanggil kode yang memeriksa apakah data login yang dimasukkan pengguna benar atau salah. Oleh sebab itu, saya perlu memberikan kode program seperti berikut ini di controller:

import org.jdesktop.swingx.auth.LoginService

class LatihanController extends LoginService {
    def view

	@Override
	public boolean authenticate(String name, char[] password, String server)
			throws Exception {

		println "Login Info: name = [$name] password = [$password] " +
			"server = [$server]"
		if (name=="solid" && password.toString()=="snake")
			return true
		else
			return false
	}

}

Tampilkan kode program di atas akan terlihat seperti pada gambar berikut ini:

JXLoginPane

JXLoginPane

JXMonthView

JXMonthView adalah sebuah kalendar yang ditampilkan saat user memilih sebuah JXDatePicker. Dengan JXMonthView, pengguna bisa tidak hanya terbatas memilih 1 tanggal, tetapi juga range tanggal, seperti yang diperlihatkan pada kode program berikut ini:

import static org.jdesktop.swingx.calendar.DateSelectionModel.SelectionMode.*
import org.jdesktop.swingx.calendar.*

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

  	borderLayout()
  	jxmonthView(constraints: CENTER, id: "monthView", 
		  selectionMode: SINGLE_INTERVAL_SELECTION).with {		
		getSelectionModel().valueChanged = { e ->
			terpilih.setText(monthView.getFirstSelectionDate()?.format("dd/MM/yyyy") +
				" s/d " + monthView.getLastSelectionDate()?.format("dd/MM/yyyy"))
		}
	}
	panel(constraints: PAGE_END) {
		label(text: 'Anda memilih: ')
		label(id: 'terpilih')	
	}
}

Tampilan program diatas diperlihatkan oleh gambar berikut ini:

JXMonthView

JXMonthView

JXSearchField

JXSearchField adalah turunan dari JXTextField yang dilengkapi dengan icon untuk pencarian. Sebagai contoh, berikut ini adalah kode program yang menggunakan JXSearchField:

import org.jdesktop.swingx.JXSearchField

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

  	borderLayout()
  	widget(new JXSearchField("Cari:"), constraints: PAGE_START, 
		 actionPerformed: { e ->
			 txtOutput.append("Mencari [${e.getActionCommand()}]\n")
		 })
	textArea(constraints: CENTER, id: "txtOutput")
}

Tampilan program diatas diperlihatkan oleh gambar berikut ini:

JXSearchField

JXSearchField

JXSearchPanel

JXSearchPanel adalah panel untuk pencarian kompleks. Kode program berikut ini akan menampilkan JXSearchPanel:

import org.jdesktop.swingx.JXSearchField
application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

  	borderLayout()
    jxsearchPanel(constraints: PAGE_START)
	textArea(constraints: CENTER)
}

Tampilan JXSearchPanel dapat dilihat pada gambar berikut ini:

JXSearchPanel

JXSearchPanel

Perihal Solid Snake
I'm nothing...

4 Responses to Memakai SwingXBuilder Di Griffon: Part 2

  1. Tolhah Hamzah mengatakan:

    Permisi mas, saya sedang mencoba mengimplementasikan login panel di atas untuk aplikasi griffon saya. Saya sudah membuat sebuah mvcGroup baru bernama login.
    Kemudian saya masukkan kode di atas (yg contoh login panel)
    sehingga kode saya menjadi sperti di bawah ini:

    View nya:

    package projectName01

    import org.jdesktop.swingx.*
    import org.jdesktop.swingx.auth.LoginService
    import org.jdesktop.swingx.decorator.*

    application(title: ‘Login’,
    preferredSize: [320, 240],
    pack: true,
    //location: [50,50],
    locationByPlatform: true,
    iconImage: imageIcon(‘/griffon-icon-48×48.png’).image,
    iconImages: [imageIcon(‘/griffon-icon-48×48.png’).image,
    imageIcon(‘/griffon-icon-32×32.png’).image,
    imageIcon(‘/griffon-icon-16×16.png’).image]) {
    // add content here

    JXLoginPane panel = new JXLoginPane(controller)
    JFrame frame = JXLoginPane.showLoginFrame(panel)
    frame.setVisible(true)
    }

    Controller:

    package projectName01

    import org.jdesktop.swingx.auth.LoginService

    class LoginController extends LoginService {
    def view

    @Override
    public boolean authenticate(String name, char[] password, String server) throws Exception 
    {
    
        println "Login Info: name = [$name] password = [$password] " + "server = [$server]"
        if (name=="solid" && password.toString()=="snake")
            return true
        else
            return false
    }
    

    }

    Model:

    package projectName01

    import groovy.beans.Bindable

    class LoginModel {
    // @Bindable String propName
    }

    Saya set startupGroups nya ke mvcGroup login pada Application.groovy, seperti ini:
    startupGroups = [‘login’]

    Namun, setelah aplikasi saya jalankan, saya mendapatkan error seperti ini:

    [griffonc] org.codehaus.groovy.control.MultipleCompilationErrorsException: star
    tup failed:
    [griffonc] C:\Users\XXX\GriffonProjects\projectName01\griffon-app\controllers\projectName01\LoginController.groovy: -1: The field ‘this$resourceLocator’ is declared
    multiple times.
    [griffonc] @ line -1, column -1.
    [griffonc] 1 error
    Compilation error: Compilation Failed

    Kenapa ya mas? Mohon bantuannya mas ): , saya sedang membuat sebuah mekanisme login sederhana pada aplikasi griffon saya.
    Terima kasih mas….

    • Solid Snake mengatakan:

      Kode program saya, menurunkan controller dari class lain, tidak dapat dipakai lagi.

      Cara tersebut harus diganti dengan membuat sebuah class baru di src\main, misalnya di package services dengan nama MyLoginService. Isi class ini bisa berupa:

      package services
      
      import org.jdesktop.swingx.auth.LoginService
      
      class MyLoginService extends LoginService {
      
          boolean authenticate(String name, char[] password, String server) throws Exception {
                // isinya sama seperti yang sudah ada di contoh sebelumnya
          }
      
      }
      

      Sebagai informasi, bila memakai simple-jpa, sejak versi 0.6, annotation @Transaction dapat diberikan pada class selain controller dengan syarat class tersebut berada di dalam domain package, misalnya domain\services. Dengan demikian, bila class domain.services.MyLoginService diberi @Transaction, maka dynamic finders atau query ke database dapat dilakukan pada class tersebut.

      Kemudian, pada view, ganti:

      JXLoginPane panel = new JXLoginPane(controller)
      

      menjadi:

      JXLoginPane panel = new JXLoginPane(new MyLoginService())
      

      Bila dijalankan, seharusnya tidak ada pesan kesalahan lagi.

      Agar lebih rapi, kode program yang saya sisipkan pada view tersebut dapat dimasukkan ke dalam mvcGroupInit() di controller seperti berikut ini:

      class LatihanController {
      
         def view
      
         void mvcGroupInit(Map args) {
             execInsideUISync {
                 JXLoginPane panel = new JXLoginPane(new MyLoginService())
                 JXLoginPane.Status status = JXLoginPane.showLoginDialog(
                       app.windowManager.getStartingWindow(), panel)
                 if (status != JXLoginPane.Status.SUCCEEDED) {
                       app.shutdown()
                 }
             }
         }
      
      }
      

      Pada contoh kode program di atas, view tidak akan muncul terlebih dahulu melainkan JXLoginPane untuk memasukkan informasi login. Setelah login sukses, maka view akan ditampilkan dan aplikasi akan berjalan seperti biasa. Bila login tidak sukses (misalnya dibatalkan), maka aplikasi akan ditutup.

  2. Tolhah Hamzah mengatakan:

    terima kasih banyak mas atas jawabannya, kini saya dapat mengimplementasikan login pada aplikasi saya. ;D

    tapi bagaimana ya mas kalau saya ingin mengecek data pada table pengguna untuk melakukan autentikasinya?

    bagian mana ya mas yg perlu di ubah?

    ini MyLoginService.groovy saya ditaruh di folder domain

    package domain

    import org.jdesktop.swingx.auth.LoginService

    class MyLoginService extends LoginService {

    boolean authenticate(String name, char[] password, String server) throws Exception {
        // isinya sama seperti yang sudah ada di contoh sebelumnya
        println "Login Info: name = [$name] password = [$password] " + "server = [$server]"
        if (name=="admin" && password.toString()=="admin")
            return true
        else
            return false
    }
    

    }

    berikut ini domain pengguna.groovy saya

    package domain

    import groovy.transform.*
    import simplejpa.DomainClass
    import javax.persistence.*
    import org.hibernate.annotations.Type
    import javax.validation.constraints.*
    import org.hibernate.validator.constraints.*
    import org.joda.time.*

    @DomainClass @Entity @Canonical(excludes=’level’)
    class Pengguna {

    @NotEmpty @Size(min=4, max=20)
    String username
    
    @NotEmpty @Size(min=5, max=100)
    String password
    
    @NotEmpty @Size(min=4, max=20)
    String kode
    
    @ManyToOne
    Level level
    

    }

    terima kasih atas jawabannya (:

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: