Membuat Wizard Menggunakan Netbeans Platform (+Create Data)

Wizard Dialog di Netbeans Platform bisa kamu liat hasilnya pas waktu bikin project baru. Ada Next, ada Back, de el el, de es be. Itulah Wizard!

Sekarang, gw bakal liatin pemanfaatan Wizard buat masukin data ke tabel. Yap! Ini lanjutan dari tulisan gw yang terakhir tentang Netbeans Platform. Artinya, ngelanjutin modul yang kemarin… dan gak ada modul baru untuk tulisan kali ini. Bukannya kenapa2, malas ajah c yah. Lagian pengelompokannya menurut gw udah tepat. Sama2 buat ngakses data. Jadi sekalian ajah 😀

Jadi, di modul kemaren, yang bernama “AksesDatabase”, tempat ngeletakin “DataMemberTopComponent”, bikin satu hal baru… yaitu “Wizard”! Wizard di sini, kita manfaatin buat minta input data. Biasanya, wizard ini gunanya buat ngebikin suatu pembaharuan atau penambahan hal baru di aplikasi, bisa file baru, folder baru atau aksesori lainnya. Dan sekarang, biar agak beda, gw gabungin wizard ama pengaksesan database.

Lanjut ke langkah yang tadi, bikin wizard-nya gini:

Selection_012

Registration Type itu maksutnya cara ngeregistrasiin menu dari c wizard. Pilih ajah “Custom”, coz gw gak ngerti cara gunain yang “New File”. Untuk wizard step sequence, pilihnya “Static” ajah. Ini maksutnya bukan c wizard bisa diakses tanpa ngebentuk objek dari kelas-nya kayak make keyword “static”. Maksutnya, window yang dimunculkan urutannya itu2 ajah. Gak pake suatu skenario pemilihan. Terus kalo “Number of Wizard Panel”, jelas maksutnya jumlah panel dari wizard itu.

Lanjut!

Tekan “Next”, masukin nama class sesuai yang kamu mau. Kalo gw, gini:

Selection_013

Perhatikan file2 yang bakal terbentuk. Ini penting yah… Biar kamu tau kamu musti ngutak-ngatik bagian mana. Di sini, bakal terbentuk 4 file:

  1. MemberMasukVisualPanel1 (.form & .java): ini analoginya kayak window (top component) gitu. Tempat desain2 button, teks, label dan logika (kalo ada).
  2. MemberMasukWizardAction.java: file ini gunanya buat ngatur config (terutama action—buat ngatur muncul menu) dari c Wizard secara keseluruhan. Plus, mau ngedaftarin wizard di menu yang mana… letaknya ya di sini. Kalo kamu pilih bagian “Dynamic” pas awal bikin wizard, di sini kamu nentuin skenario window yang muncul (tapi kalo gak salah namanya bedaan gitu…ada “iterator”2 gitu).
  3. MemberMasukWizardPanel1.java: file terakhir ini merupakan file yang mengatur config khusus “MemberMasukVisualPanel1”. Jadi, di sini bakal ada method “store” atau “load” yang gunanya mirip sama “store” dan “load” dari option panel.

Yap! Itulah 4 file dengan tugasnya masing2.

Lanjut!! Di sini, sebenernya kamu udah bisa ngejalanin c wizard dengan nge-run c NPA. Tapi, kamu pasti gak nemu menu buat munculin c wizard. Alasannya, karena kita belum nge-registrasiin c menu itu bakal muncul di mana…

Buat munculin menu-nya, buka file “MemberMasukWizardAction”, ada 3 baris yang dikomen kan… yang ada tanda “@”-nya:

// @ActionID(category="...", id="org.akses.data.MemberMasukWizardAction")
// @ActionRegistration(displayName="Open MemberMasuk Wizard")
// @ActionReference(path="Menu/Tools", position=...)

Selection_014

Kode di atas gunanya buat nge-daftarin kemunculan menu buat ngakses c wizard. Jadi, kode di atas bisa kamu uncomment, atau bikin baru. Kalo gw, gw bikin baru ajah.

@ActionID(category = "File", id="org.akses.data.MemberMasukWizardAction")
@ActionRegistration(displayName = "Input Member")
@ActionReference(path="Menu/File", position = 1)

Dan… buat ngelengkapin kode di atas, ada import package yang harus kamu lakukan:

import org.openide.awt.ActionID;
import org.openide.awt.ActionReference;
import org.openide.awt.ActionRegistration;

Untuk isi category, kamu bisa masukin macam2. Untuk id, harus ngacu ke WizardAction, trus buat path, itu harus ngikut kamu mau munculin menu-nya di bagian mana dan ada di posisi berapa buat position.

Kode di atas, defaultnya di-comment, coz memang kemunculan wizard bagusnya diaturnya di “Action” buat module netbeans platform (bayangin ajah kamu punya banyak wizard yang mau dimunculin.. Bakal repot buka WizardAction atu2 cuma buat ngatur kemunculannya). Tapi, sebagai fleksibilitas, registrasi Action bisa dilakukan di Wizard-nya langsung.

Di sini, kamu bisa explore beberapa hal setelah pendeklarasian “WizardDescriptor”. Di sana, bilangnya kan ada setTitle… ada juga setTitleFormat… Bisa kamu ubah2. Terus kalo mau nambahin gambar, juga bisa di sini. Contohnya, gw mau nambahin gambar gini di wizard (sorry, alay-nya gw muncul lagi.. harap maklum dengan gambarnya :p):

HaeHyung

Selection_024

Gw bisa pake kode:

String alamat ="/pic/HaeHyung.jpg";
wiz.putProperty(WizardDescriptor.PROP_IMAGE, ImageUtilities.loadImage(alamat));

Dan… untuk property apapun, itu sifatnya static, jadi bisa kamu akses dari nama kelas asal diikutin nama property-nya. Contohnya ajah yang di atas, gw panggil PROP_IMAGE dari kelas WizardDescriptor. Dan kalo kamu nanya ukuran tinggi ideal, jawabannya adalah “tergantung tinggi wizard yang nanti ditampilin”. Berhubung wizard gw tampilnya standar, tinggi idealnya 400 piksel.

Terus, saatnya men-desain! Buka “MemberMasukVisualPanel1”, pilih bagian “Design”, dan desain panel sebagai berikut (bebas c yah, sesuaiin ajah ama database kamu):

Selection_015

Dan… wizard ini udah bisa kamu jalanin. Jalanin NPA-nya, buka “File → Input Member” (Ini tergantung path yang kamu atur di atas sama title-nya), dan bakal muncul gini:

Selection_016

Sekarang, kita coba fungsi store-nya.

Buka file “MemberMasukVisualPanel1.java”, di sini (di bagian source), tambahkan suatu get untuk nilai yang dimasukkan ke textfield “nama”. Kamu bisa jugak nambahin yang lain, tapi kalo gw cukup nama ajah.

    public String getNamaMember(){
        return jTextField2.getText();
    }

Buka file “MemberMasukWizardPanel1.java”, di method “storeSettings”, kita bikin gini:

wiz.putProperty("nama member", component.getNamaMember());

Untuk component sendiri, itu udah dideklarasikan dulu dengan tipe “MemberMasukVisualPanel1”. Pendekatan ini bisa kamu lakuin kalo kamu make Netbeans seenggaknya 7.2 ke atas—sampe 7.4 (gw gak nyoba 7.1 ke bawah sama 7.4 ke atas).

Kalo udah, coba jalanin wizard kamu, masukin suatu nama, terus tekan “Finish”!

Seharusnya, ada satu variabel global kesimpan dengan nilai sesuai dengan hal yang udah diinputin di textfield nama. Dan ini, bisa dipanggil pake “getProperty”. Jadi kita balik ke “MemberMasukWizardAction.java”, di kelas ini, kita bakal panggil c wizard property tadi. Dengan kode:

String x = (String) wiz.getProperty("nama member");

Dan nantinya, si “x” bisa ditampilin pake option pane. Kode di atas, diletakin di bagian kondisi if ketika udah finish ajah. Jadi pas tekan finish, bakal keluar si “x” itu

        wiz.setTitleFormat(new MessageFormat("{0}"));
        wiz.setTitle("Masukkan Member");
        String alamat ="/pic/HaeHyung.jpg";
        wiz.putProperty(WizardDescriptor.PROP_IMAGE, ImageUtilities.loadImage(alamat));
        if (DialogDisplayer.getDefault().notify(wiz) == WizardDescriptor.FINISH_OPTION) {
            // do something
            String x = (String) wiz.getProperty("nama member");
            JOptionPane.showMessageDialog(null, x);
        }

Selection_017

Selection_018

Dan… kalo kamu bertanya, kenapa gak ada user variable-nya di bagian “dist” kayak di option panel, yaaaa memang ini tipenya beda yah. Kalo kamu mau keluarin kayak kemaren, bisa pake NbPreferences kayak kemaren.

Okeh, jadi intinya, kamu udah ngerti lhah ya… cara dasar make wizard. Dan sekarang, masuk ke bagian database-nya. Logikanya gini, ambil setiap nilai dari textfield, terus langsung simpan ke database pake JPA pas tekan “finish”! Jadi, sekarang, gw maen2nya di “MemberMasukVisualPanel1”… kalo tadi gw cuma punya nama, sekarang gw jugak punya pengembalian buat id-reg sama umur:

    public String getIdReg(){
        return jTextField1.getText();
    }
    
    public String getUmur(){
        return jTextField3.getText();
    }

Buka WizardPanel, ubah storeSettings jadi:

    @Override
    public void storeSettings(WizardDescriptor wiz) {
        // use wiz.putProperty to remember current panel state
        wiz.putProperty("nama member", component.getNamaMember());
        wiz.putProperty("id reg", component.getIdReg());
        wiz.putProperty("umur", component.getUmur());
    }

Pergi ke “MemberMasukWizardAction.java”, ubah kode pas nekan finish jadi gini:

        if (DialogDisplayer.getDefault().notify(wiz) == WizardDescriptor.FINISH_OPTION) {
            // do something
            String nama = (String) wiz.getProperty("nama member");
            String id = (String) wiz.getProperty("id reg");
            String umur = (String) wiz.getProperty("umur");

//            JOptionPane.showMessageDialog(null, nama+" "+id+" "+umur);
            try {
                EntityManager entityManager = Persistence.createEntityManagerFactory("DataLibraryPU").createEntityManager();
                entityManager.getTransaction().begin();
                MemberC m = new MemberC();
                m.setIdReg(id);
                m.setNama(nama);
                m.setUmur(Integer.parseInt(umur));
                entityManager.persist(m);
                entityManager.getTransaction().commit();
                JOptionPane.showMessageDialog(null, "Data Berhasil Dimasukkan");
                DataMemberTopComponent.refresh();
            } catch (Exception ex) {
                JOptionPane.showMessageDialog(null, "Pesan Kesalahan "+ex);
            }

        }

Yang gw kasi biru muda, kemungkinan bakal menimbulkan error… apus ajah kalo kamu mau nyontoh. Dan jangan lupa import package terkait:

import datalibrary.MemberC;
import java.awt.Component;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.text.MessageFormat;
import java.util.ArrayList;
import java.util.List;
import javax.persistence.EntityManager;
import javax.persistence.Persistence;
import javax.swing.JComponent;
import javax.swing.JOptionPane;
import org.openide.DialogDisplayer;
import org.openide.WizardDescriptor;
import org.openide.awt.ActionID;
import org.openide.awt.ActionReference;
import org.openide.awt.ActionRegistration;
import org.openide.util.ImageUtilities;

Kalo udah, bisa dijalanin gini:

Selection_019

Selection_020

Selection_021

Selection_022

Khusus untuk hasil yang di text area (DataMemberWindow), aslinya gak langsung ngapdet. Itu gw ngubah kodingannya dikit… dan ada hubungannya ama kode biru muda yang ada di wizard action di atas. Kira2 modifikasinya gini:

public DataMemberTopComponent() {
        initComponents();
        setName(Bundle.CTL_DataMemberTopComponent());
        setToolTipText(Bundle.HINT_DataMemberTopComponent());
        entityManager = Persistence.createEntityManagerFactory("DataLibraryPU").createEntityManager();
        refresh();
    }
    
    public static void refresh(){
        Query query = entityManager.createNamedQuery("MemberC.findAll");
        List resultList = query.getResultList();
        jTextArea1.setText("");
        for (MemberC m: resultList) {
            String nama = m.getNama();
            jTextArea1.append(nama+ "\n");
        }
    }

Dan, text area-nya dibikin “static”. Klik kanan di text area, pilih “Customized Code”, silang bagian “static”.

Selection_023

Dan begitulah caranya bagian create…

Sumber: Pribadi ama situs netbeans
Valid: Yap!
Batas Berlaku: Kayaknya cuma Netbeans 7.2-7.4 (Netbeans 8 gak termasuk)

Advertisements

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