JavaFX : Konsep MVC

Konsep MVC
MVC singkatan dari Model-View-Controller, konsep ini bertujuan untuk memudahkan pemrograman dengan mengelompokan source code berdasarkan fungsinya.

Model
Biasanya untuk source code yang berfungsi untuk menampung data-data saat aplikasi sedang berjalan.

View
Biasanya untuk source code yang berfungsi untuk menangani tampilan (user interface) pada aplikasi.

Controller
Biasanya untuk source code yang berfungsi untuk mengatur fungsi-fungsi yang ada pada tampilan (user interface) dengan menggunakan Model sebagai penampung datanya.

JavaFX 
Untuk tahu lebih banyak tentang JavaFX bisa melihat di http://www.oracle.com/technetwork/java/javase/overview/javafx-overview-2158620.html.

Singkat kata JavaFX merupakan pengganti Swing untuk pemrograman Java pada aplikasi desktop, yang katanya juga bisa berjalan diatas Android OS dan iOS.

Kemudian saya mencoba menerapkan konsep MVC pada pemrograman dengan JavaFX dengan bantuan Maven.

Berikut merupakan screen capture untuk mengelompokan source code sesuai dengan konsep MVC :

Mengelompokan Model pada 1 package

Mengelompokan Controller pada 1 package

Mengelompokan View (FXML) pada 1 folder

Untuk source code-nya bisa didownload di https://bitbucket.org/agus3winarno/blog.

Class Model
Model diimplementasi dengan POJO. seperti class User yang digunakan pada

public class User implements Serializable {

    private Integer id;
    private String username;
    private String password;
    private String keterangan;
    private String email;

    public User() {
    }

    //fungsi setter & getter

Desain UI pada JavaFX
Untuk mendesain UI bisa menggunakan Scene Builder dari http://www.oracle.com/technetwork/java/javase/downloads/javafxscenebuilder-info-2157684.html. Saat ini saya masih menggunakan versi 1.1.

Scene Builder 1.1

Integrasi dengan IDE
Saat ini saya menggunakan IntelliJ IDEA, untuk mengintegrasikan dengan Scene Builder dapat mengikuti screen capture dengan membuka Preferences -> IDE Settings :

Integrasi dengan IntelliJ IDEA

Setelah terintegrasi, akan muncul menu saat klik kanan pada file UI (FXML) :

Menu klik kanan Scene Builder

Untuk menghubungkan antara UI (FXML) dengan Controller tambahkan attribute

fx:controller

pada file FXML-nya. Contohnya untuk menghubungkan UI userManagement.fxml tambahkan attribute

fx:controller="org.controller.UserManagementController"

Class Controller
Controller diimplementasikan dengan contoh sbb :

public class UserManagementController extends BaseController {

    @FXML
    private TableView<User> userTable;
    @FXML
    private TableColumn<User,String> userName;
    @FXML
    private TableColumn<User,String> email;
    @FXML
    private TableColumn<User,String> keterangan;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        super.initialize(url, rb);

        userName.setCellValueFactory(new PropertyValueFactory<User,String>("username"));
        email.setCellValueFactory(new PropertyValueFactory<User,String>("email"));
        keterangan.setCellValueFactory(new PropertyValueFactory<User,String>("keterangan"));

        // Auto resize columns
        userTable.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);

    }

    @Override
    protected void init() {
        super.init();
        userTable.setItems(UserService.getInstance().findAllEntity());
    }

    @Override
    public void setApp(Main application) {
        super.setApp(application);
    }

    public void create(ActionEvent actionEvent) {
        getApplication().addPageParameter(Constants.Parameter.ACTION, Constants.Parameter.ACTION_NEW);
        getApplication().translateToWithDefaultScreen(Layout.INPUT_PROFILE);
    }

    public void edit(ActionEvent actionEvent) {

        if(userTable.getSelectionModel().getSelectedItem() == null){
            Dialogs.showInformationDialog(getApplication().getStage(), "Belum ada data yang dipilih");
            return;
        }

        getApplication().addPageParameter(Constants.Parameter.ACTION, Constants.Parameter.ACTION_EDIT);
        getApplication().addPageParameter(Constants.Parameter.OBJECT, userTable.getSelectionModel().getSelectedItem());
        getApplication().translateToWithDefaultScreen(Layout.INPUT_PROFILE);
    }

    public void delete(ActionEvent actionEvent) {

        if(userTable.getSelectionModel().getSelectedItem() == null){
            Dialogs.showInformationDialog(getApplication().getStage(), "Belum ada data yang dipilih");
            return;
        }

        Integer id = userTable.getSelectionModel().getSelectedItem().getId();
        UserService.getInstance().remove(id);
        init();
        Dialogs.showInformationDialog(getApplication().getStage(), "Hapus data berhasil");
    }

    public void close(ActionEvent actionEvent) {
        getApplication().translateToWithDefaultScreen(Layout.MAIN);
    }

}

Untuk setiap property yang memiliki @FXML akan di-binding dengan komponen yang ada pada file FXML sesuai dengan fx:id nya.

Dan untuk setiap method action dari button yang ada pada file FXML akan di-binding menggunakan attribute onAction="#{nama_method}".

Ok. sekian dulu javafx-nya. semoga bermanfaat.