Monday, May 30, 2016

Membuat Kolom JTable Format Rupiah



Membuat kolom JTable format rupiah
Halo guys,, rehat sejenak dari bahasan JavaFX  sekarang kita akan belajar cara membuat format rupiah pada JTable. Banyak yang bertanya bagaimana caranya format textfield pada kolomnya. Coba kita ubah sudut pandang itu. Ada beberapa fitur pada JTable yang bisa kita manfaatkan tanpa perlu memformat String yang ribet. Salah satunya adalah render. Oke tak perlu berlama-lama lagi, pertama-tama kita buka Netbeans dan buat projek bernama ManipulasiJTable. 

Kemudian buat file java bernama HargaRender seperti di bawah ini : 


public class HargaRender implements TableCellRenderer{
    
    @Override
    public Component getTableCellRendererComponent(JTable table, Object value, boolean isSelected, boolean hasFocus, int row, int column) {
        JPanel panel = new JPanel(new BorderLayout());
        JLabel labelRp = new JLabel("Rp. ");
        JLabel labelHarga = new JLabel(String.valueOf(value));
        labelHarga.setHorizontalAlignment(RIGHT);
        panel.add(labelRp, BorderLayout.WEST);
        panel.add(labelHarga, BorderLayout.CENTER);
        
        if(isSelected){
            panel.setBackground(table.getSelectionBackground());;
        }else{
            panel.setBackground(table.getBackground());
        }
        
        return panel;
    }
}


1.       Kelas HargaRender kita implementasikan dengan TableCellRenderer dan override
method getTableCellRendererComponent yang dapat digunakan untuk memanipulasi kolom dari cell Jtable.
Secara default getTableCellRenderer ini akan mereturn Label. Berhubung label tidak bisa digunakan untuk menampung dua komponen secara bersamaan, kita ganti dengan JPanel dan mengesetLayoutnya menjadi BorderLayout. Kemudian kita buat 2 buah Label, LabelRp dan labelHarga. Pada labelHarga kita setHorizontalAlignmentnya menjadi RIGHT agar teks yang ada di dalamnya diawali dari kanan. Setelah itu kita tambahkan kedua label tersebut dimana labelRp diset ke sebelah kiri dengan BorderLayout.WEST dan labelHarga di sebelah Tengah dengan BorderLayout.CENTER.
JPanel panel = new JPanel(new BorderLayout());
JLabel labelRp = new JLabel("Rp. ");
JLabel labelHarga = new JLabel(String.valueOf(value));
labelHarga.setHorizontalAlignment(RIGHT);
panel.add(labelRp, BorderLayout.WEST);
panel.add(labelHarga, BorderLayout.CENTER);

Kemudian kita atur agar background dari cellnya mengikuti dengan Jtable nya. Kemudian return nilainya sebagai panel.
if(isSelected){
panel.setBackground(table.getSelectionBackground());
}else{
panel.setBackground(table.getBackground());
}
return panel;
Sekarang buat sebuah JFrame untuk menampung tabel yang kita buat dan isikan data defaultnya menjadi seperti gambar di bawah ini :
Kemudian pada constructor JFrame tambahkan perintah seperti ini
public FrameTabel() {
        initComponents();
        jTable1.getColumnModel().getColumn(2).setCellRenderer(new HargaRender());
    }



Kemudian pada kelas main ManipulasiJTable tambahkan perintah seprti ini

public class ManipulasiJTable extends JFrame{

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        FrameTabel frame = new FrameTabel();
        frame.setVisible(true);
    }
    
}

 
coba Run Programnya maka akan menjadi seperti ini 


Bagaimana mudah bukan?? tak perlu susah susah untuk memformat string. Source codenya dapat didownload di sini.

Sekian tutorial kali ini. Semoga bermanfaat.

Saturday, May 28, 2016

Running Text dengan Thread JavaFX



Ok guys kali ini kita saya akan membagikan cara membuat running teks. Caranya simple aja dengan mengunakan thread di java. Untuk memulai ikuti langkah berikut ini : 
1.       Buka Netbeans

2.       Buat project baru bernama RunningText
3.       Buka file RunningText.java kemudian ketik kode di bawah ini.
public class RunningText extends Application {

    Task runningTextWorker;

    String message = "Halo semua ini adalah running text untuk menampilkan tulisan berjalan yang akan bergerak dari sebelah kiri ke kanan secara terus-menerus sehingga membuat tampilan menjadi lebih menarik";

    Text runningText = new Text(message);

    HBox hBox = new HBox();

    Scene scene;

   

    @Override

    public void start(Stage primaryStage) {

        BorderPane root = new BorderPane(); 

        scene = new Scene(root, 300, 250);

       

        hBox.getChildren().add(runningText);       

        hBox.setTranslateX(scene.getWidth());

        runningTextWorker = createWorkerRunning(true);


        root.setTop(hBox);


        primaryStage.setTitle("Hello World!");

        primaryStage.setScene(scene);

        primaryStage.show();

       

        new Thread(runningTextWorker).start();

    }

   

    private Task createWorkerRunning(final boolean running) {

        return new Task() {

            @Override

            protected Object call() throws Exception {

                int batas = hBox.widthProperty().intValue()+scene.widthProperty().intValue();

                while (running) {

                    for (int i = 1; i <= batas; i++) {

                        if (batas == i) {

                            hBox.setTranslateX(scene.widthProperty().intValue());

                        } else {

                            hBox.setTranslateX(hBox.getTranslateX() - 1);

                            Thread.sleep(50);

                            System.out.println(i);

                        }

                    }

                }

                return true;

            }

        };

    }


    @Override

    public void stop() throws Exception {

        super.stop();

        runningTextWorker.cancel();

    }

   

   


    /**

     * @param args the command line arguments

     */

    public static void main(String[] args) {

        launch(args);

    }

   

}

Mari kita bahas kode di atas, pertama-tama kita buat 4 variabel. Sebuah objek dari kelas Task bernama runningTextWorker yang digunakan untuk membuat perintah yang akan dijalankan oleh thread. String message digunakan untuk menampung data yang akan ditampilkan lewat running text. Kemudian kita buat sebuah objek Text bernama runningText yang digunakan sebagai container untuk menampilkan pesan. Sebuah objek HBox disini digunakan sebagai container untuk objek Text dikarenakan objek Text tidak mempunyai property widthProperty yang digunakan dalam proses running nantinya. Sebuah scene digunakan untuk menampung dan menampilkan hasil dari running tadi yang akan ditampilkan pada objek Text.

Task runningTextWorker;
String message = "Halo semua ini adalah running text untuk menampilkan tulisan berjalan yang akan bergerak dari sebelah kiri ke kanan secara terus-menerus sehingga membuat tampilan menjadi lebih menarik";
Text runningText = new Text(message);
HBox hBox = new HBox();
Scene scene;

Langkah selanjutnya adalah hapus semua perintah yang ada dalam method start(). Kemudian buat root yang merupakan objek dari BorderPane dan inisialisasikan scene yang kita buat di atas tadi dan tambahkan pada root. Kemudian tambahkan runningText yang kita buat tadi ke dalam hBox agar runningText yang kita buat tadi dapat diubah letaknya, mengingat node Text tidak mempunyai method widthProperty yang digunakan dalam thread nantinya. Setelah itu ubah setTranslateX dari HBox yang kita buat tadi sesuai dengan ukuran lebar scene agar runningText tidak tampak dan berada di sebelah kanan dari scene.
BorderPane root = new BorderPane();
scene = new Scene(root, 300, 250);
hBox.getChildren().add(runningText);
hBox.setTranslateX(scene.getWidth());
Kemudian kita inisialisasikan runningTextWorker yang kita buat tadi menggunakan method createWorkerRunning(true) agar task selalu dieksekusi. Di dalam method createWorkerRunning kita membuat looping yang akan mengeksekusi dimana ketika property dari translateX telah mencapai batas maka setTranslateX akan dikembalikan pada posisi awal, jika tidak maka property translateX akan dikurangi 1.
private Task createWorkerRunning(final boolean running) {
return new Task() {
@Override
protected Object call() throws Exception {
   int batas = hBox.widthProperty().intValue()+scene.widthProperty().intValue();
  while (running) {
    for (int i = 1; i <= batas; i++) {
      if (batas == i) {
        hBox.setTranslateX(scene.widthProperty().intValue());
      } else {
        hBox.setTranslateX(hBox.getTranslateX() - 1);
        Thread.sleep(50);
        System.out.println(i);
     }
    }
  }
  return true;
}
};
}
Kemudian kita tambahkan hBox yang kita buat tadi ke dalam root dengan mengaturnya kepada bagian atas dari layar. Kita ubah judul dari primaryStagenya, set scennenya dan menampilkanya.
                root.setTop(hBox);

                primaryStage.setTitle("Running Text");
                primaryStage.setScene(scene);
                primaryStage.show();
Setelah itu kita buat sebuah thread dan tambahkan runningTextWorker yang kita buat tadi kemudian panggil method start() dari Thread untuk memulainya. Dan setelah itu jangan lupa panggil method requestFocus() pada primaryStage agar runningText tampak, karena saat thread dieksekusi maka focus akan berpindah pada thread yang berjalan di background dari aplikasi.
new Thread(runningTextWorker).start();
primaryStage.requestFocus();
Coba run dan akan tampil seperti di bawah ini:

 
Sekian tutorial cara membuat runningText dari saya, semoga bermanfat bagi agan2 semua. Sekian dan Terima Kasih

Friday, May 27, 2016

Drag N Drop Gambar dalam scene



Hello guys, kali ini kita akan membahas tentang cara mendrag gambar agar dapat digerak-gerakkan pada scene.
Baiklah, langsung kita mulai saja, ikuti langkah di bawah ini :
1.       Buka Netbeans
2.       Buat project baru bernama “DragNDropGambar”.
3.       Setelah itu unduh gambar yang dengan resolusi 48 ke atas.
4.       Ketikkan kode di bawah ini:

public class DragNDropGambar extends Application {
    private double startDragX;
    private double startDragY;
    private Point2D dragAnchor;

    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();

        Image gambar = new Image(getClass().getResourceAsStream("gambar.png"));
        ImageView imageView = new ImageView(gambar);   
        imageView.setFitWidth(100);
        imageView.setFitHeight(100);

        // menambahkan listeners kepada imageView agar support dragging
        imageView.setOnMousePressed(new EventHandler() {
            public void handle(MouseEvent me) {
                imageView.toFront();
                startDragX = imageView.getTranslateX();
                startDragY = imageView.getTranslateY();
                dragAnchor = new Point2D(me.getSceneX(), me.getSceneY());
            }
        });

        imageView.setOnMouseDragged(new EventHandler() {
            public void handle(MouseEvent me) {
                System.out.println(imageView.getTranslateX());
                double newTranslateX = startDragX
                        + me.getSceneX() - dragAnchor.getX();
                double newTranslateY = startDragY
                        + me.getSceneY() - dragAnchor.getY();

                imageView.setTranslateX(newTranslateX);
                imageView.setTranslateY(newTranslateY);

            }
        });

        root.getChildren().add(imageView);

        Scene scene = new Scene(root, 300, 300);

        primaryStage.setTitle("DragNDropGambar");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Pertama-tama deklarasikan variable bertipe double yaitu startDragX dan startDragY . Variabel ini digunakan untuk menyimpan posisi awal X danY gambar sewaktu akan didrag. Kemudian deklarasikan variabel bertipe Point2D yaitu dragAnchor. Variabel ini digunakan untuk menyimpan posisi awal mouse waktu melakukan drag.
Kemudian kita buat objek Stackpane bernama root. StackPane adalah sebuah pane dimana menyusun childnya dengan menumpuk, mirip seperti CardLayout pada Swing. Kemudian buat objek Image dan ImageView untuk menampung gambar.
StackPane root = new StackPane();
Image gambar = new Image(getClass().getResourceAsStream("sum48.png"));
ImageView imageView = new ImageView(gambar);
Kemudian tambahkan EventHandler MousePressed pada imageView, dimana didalamnya terdapat perintah untuk menyimpan nilai ke variable yang kita deklarasikan di awal tadi.
imageView.setOnMousePressed(new EventHandler<MouseEvent>() {
public void handle(MouseEvent me) {
imageView.toFront();
startDragX = imageView.getTranslateX();
startDragY = imageView.getTranslateY();
dragAnchor = new Point2D(me.getSceneX(), me.getSceneY());
}
});
Kemudian tambahkan EventHandler MouseDragged pada imageView, dimana di dalamnya terdapat perintah untuk mendapatkan lokasi translateX dan Y sekarang
imageView.setOnMouseDragged(new EventHandler<MouseEvent>() {
public void handle(MouseEvent me) {
System.out.println(imageView.getTranslateX());
double newTranslateX = startDragX + me.getSceneX() - dragAnchor.getX();
double newTranslateY = startDragY + me.getSceneY() - dragAnchor.getY();
imageView.setTranslateX(newTranslateX);
imageView.setTranslateY(newTranslateY);
}
});
Kemudian tambahkan mouse ke root dan run, coba klik gambar dan pindahkan lokasinya.



Gimana??

Perbesar Gambar dengan Binding dan Thread



Hello guys,, melanjutkan artikel sebelumnya, kali ini saya akan membagikan cara membuat aplikasi perbesar dan perkecil gambar dengan memanfaatkan Binding dan thread di JavaFX. Mungkin agan sudah mencoba dan menemukan kekurangan pada aplikasi sebelumnya. Yap, benar, coba buka kembali aplikasi perbesar gambar sebelumnya, kemudian coba tekan tombol “-“ atau “+” dan tahan, lihat tidak ada yang terjadi kan? Maka dari itu sekarang kita akan membuatnya menjadi dapat melakukan zoom out atau zoom in saat tombol ditekan lama. Mungkin agan2 sekalian masih asing dan bertanya-tanya apa itu Thread. Thread adalah .Untuk lebih jelasnya nanti akan agan pahami setelah menjalankan aplikasinya.
Baiklah, langsung kita mulai saja, ikuti langkah di bawah ini :
1.       Buka Netbeans
2.       Buat project baru bernama “PerbesarGambarBindingAndThread”
3.       Setelah itu unduh gambar yang dengan resolusi 512x512 kalo bisa,,
4.       Hapus perintah yang ada dalam method start dan ganti dengan yang baru dibawah ini
5.       Coba jalankan, dan perbesar dan perkecil gambar dengan slider yang ada di bawah, atau klik tombol “-“ dan “+”.
public class PerbesarGambar extends Application {
    Task zoomWorker;
    boolean mousePressed;
    Slider slider = new Slider(1, 512, 256);
    
    @Override
    public void start(Stage primaryStage) {
        BorderPane controlPane = new BorderPane();
        Button zoomOut = new Button("-");
        zoomOut.setOnMousePressed(e->{
            if(slider.getValue()> 1){
                mousePressed = true;
                zoomWorker = createWorkerZoomOut(mousePressed);
                new Thread(zoomWorker).start();
            }
        });
        zoomOut.setOnMouseReleased(e->{
            zoomWorker.cancel(true);
            mousePressed = false;
        });
        Button zoomIn = new Button("+");  
        zoomIn.setOnMousePressed(e->{
            if(slider.getValue() < 512){
                mousePressed = true;
                zoomWorker = createWorkerZoomIn(mousePressed);
                new Thread(zoomWorker).start();
            }
        });
        zoomIn.setOnMouseReleased(e->{
            zoomWorker.cancel(true);
            mousePressed = false;
                });
        controlPane.setLeft(zoomOut);
        controlPane.setCenter(slider);
        controlPane.setRight(zoomIn);
       
        Image gambar = new Image(getClass().getResourceAsStream("stadium.png"));
        ImageView imageView = new ImageView(gambar);        
        imageView.fitWidthProperty().bind(slider.valueProperty());
        imageView.fitHeightProperty().bind(slider.valueProperty());
        
        BorderPane root = new BorderPane();
        root.setCenter(imageView);
        root.setBottom(controlPane);
        
        Scene scene = new Scene(root, 550, 550);
        
        primaryStage.setTitle("Perbesar Gambar Dengan Binding");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    
    private Task createWorkerZoomOut(final boolean pressed) {
        return new Task() {
            @Override
            protected Object call() throws Exception {
                while(pressed) {       
                    slider.setValue(slider.getValue()-10);
                    Thread.sleep(100);
                    System.out.println("zoomOut");

                }
                return true;
            }
        };
    }
    
    private Task createWorkerZoomIn(final boolean pressed) {
        return new Task() {
            @Override
            protected Object call() throws Exception {
                while(pressed) {       
                    slider.setValue(slider.getValue()+10);
                    Thread.sleep(100);
                    System.out.println("zoomIn");

                }
                return true;
            }
        };
    }

Penjelasan :
Pertama-tama deklarasikan objek dari kelas javafx.concurrent.Task bernama zoomWorker, zoomWorker ini digunakan untuk melakukan proses zoom ketika tombol zoomout atau zoomin ditekan lama. Boolean mousePressed digunakan untuk menampung kondisi apakah tombol ditekan atau tidak. Di sini Slider dideklarasikan di luar dari method start agar dapat diakses di semua fungsi yang dimiliki kelas.
Task zoomWorker;
Kemudian kita membuat sebuah objek BorderPane bernama controlPane yang digunakan untuk menampung tombol “-“ disebelah kiri, slider  zoom di tengah dan tombol “+” disebelah kanan. Kemudian membuat 2 buah button zoomout dan zoomin. Sekarang tombol zoomout dan zoomin diberi perintah pada setOnMousePressed dan setOnMouseReleased. Pada saat tombol zoomOut ditekan jika slider > 1 maka Boolean mouse pressed diset menjadi true dan Task zoomWorker tadi diinisialisaasi dan dijalankan beserta perintah- yang ada didalamnya sampai tombol zoomOut selesai diklik, begitu juga sesbaliknya.di. Berikut ini adalah kodenya :
BorderPane controlPane = new BorderPane();
Button zoomOut = new Button("-");
zoomOut.setOnMousePressed(e->{
if(slider.getValue()> 1){
mousePressed = true;
zoomWorker = createWorkerZoomOut(mousePressed);
new Thread(zoomWorker).start();
}
});
zoomOut.setOnMouseReleased(e->{
zoomWorker.cancel(true);
mousePressed = false;
});
Button zoomIn = new Button("+");
zoomIn.setOnMousePressed(e->{
if(slider.getValue() < 512){
mousePressed = true;
zoomWorker = createWorkerZoomIn(mousePressed);
new Thread(zoomWorker).start();
}
});
zoomIn.setOnMouseReleased(e->{
zoomWorker.cancel(true);
mousePressed = false;
});
Pada method createWorkerZoomOut() ini terdapat perintah yang digunakan untuk mengurang value dari slider sehingga memperkecil gambar. Begitu juga sebaliknya pada method createWorkerZoomIn().
Kemudian buat sebuah objek Image dan meletakkannya ke dalam ImageView karena Image bukanlah Node sehingga tidak bisa ditambahkan pada container. Nah kemudian kita membuat binding dimana fitWidthProperty dan fitHeightProperty dari ImageView di bindingkan dengan value dari slider agar ketika value dari slider berubah maka fitWidhProperty dan fitWeightProperty juga ikut berubah. Berikut kodenya :
Image gambar = new Image(getClass().getResourceAsStream("stadium.png"));
ImageView imageView = new ImageView(gambar);
imageView.fitWidthProperty().bind(slider.valueProperty());
imageView.fitHeightProperty().bind(slider.valueProperty());
Sekarang tinggal menambahkannya ke root dan mengubah title aplikasinya dengan kode di bawah ini
BorderPane root = new BorderPane();
root.setTop(imageView);
root.setBottom(controlPane); 
Scene scene = new Scene(root, 550, 550);
primaryStage.setTitle("Perbesar Gambar Dengan Binding");
primaryStage.setScene(scene);
primaryStage.show();

Bagaimana?? Mudah bukan?? Binding merupakan keunngulan dari JavaFX, mempersingkat kita dalam melakukan pengodingan. Sekian artikel dari saya dan sampai ketemu di artikel saya selanjutnya