Component Binding On Swing Framework

Dear readers, its been a long time for me not update this blog. Please forgive me, if you find there’s no new article every time you back to this blog. Well, a short story about my activity, now I’m work at an IT Consultant company, and now we are doing a government IT project. This project is using Swing framework for it’s interface. Well, I didn’t have much understanding about swing framework, finally have to meet this framework too.
As a reminder, it will be better to share what I’ve got within my new job. one of which is Component Binding on Swing Framework. Component binding on Swing Framework is an easy way to develop a swing application using Netbeans IDE. And now for this practice, we will try to implement a component binding on Swing Framework. Ok, let’s straight to the point, create a new project using netbeans, and then create 3 package as shown as below:SwingTutorial-1.0

And then, create a class in a model package as code-snippet below:

public class Users {

    private Long id;
    private String sureName;
    private String nickName;
    private Integer age;
    private String sex;
    private String phoneNumber;
    private String address;

    //constructor below
    //getter setter below
    //toString below
}

And then, create a dummy data class based on Users class in a data package like below example:

/**
 *
 * @author Josescalia
 */
public class UsersData {

    Users u1,u2,u3,u4;

    private void init(){
        u1 = new Users();
        u1.setId((long) 1);
        u1.setNickName("Syarif");
        u1.setSureName("Ahmad Syarif");
        u1.setAge(28);
        u1.setAddress("Surabaya");
        u1.setSex("male");
        u1.setPhoneNumber("0815468912");

        u2 = new Users();
        u2.setId((long) 2);
        u2.setNickName("Dian");
        u2.setSureName("Dian Sari Puspita");
        u2.setAge(20);
        u2.setAddress("Semarang");
        u2.setSex("female");
        u2.setPhoneNumber("0813657125");

        u3 = new Users();
        u3.setId((long) 3);
        u3.setNickName("Atika");
        u3.setSureName("Purwatika Lestari");
        u3.setAge(23);
        u3.setAddress("Medan");
        u3.setSex("female");
        u3.setPhoneNumber("0813987909");

        u4 = new Users();
        u4.setId((long) 4);
        u4.setNickName("Dodi");
        u4.setSureName("Dodi Sukma");
        u4.setAge(34);
        u4.setAddress("Palangkaraya");
        u4.setSex("male");
        u4.setPhoneNumber("08179809759");
    }

    public UsersData() {
        init();
    }

    public List<Users> getUserList(){
        List<Users> result = new ArrayList<Users>();
        result.add(u1);
        result.add(u2);
        result.add(u3);
        result.add(u4);
        return result;
    }
}

And the next step is design a form using JFrame or JPanel in a gui package just like this below picture :SwingTutorial-1.1

Give a name for each component as you like, in this tutorial I gave a tblUsers as a name for JTable component. And the type a few code like this example:

.....
//import a few standard library, auto generate will be execute by netbeans here

public class FormExampleJTable extends javax.swing.JFrame {

    private UsersData data = new UsersData();
    private List<Users> usersList = new ArrayList<Users>();
    /**
     * Creates new form FormExampleJTable
     */
    public FormExampleJTable() {
        initialize();
        initComponents();
    }

    private void initialize() {
        usersList = data.getUserList();
    }

    public List<Users> getUsersList() {
        return usersList;
    }

    public void setUsersList(List<Users> usersList) {
        this.usersList = usersList;
    }

   ....
   //a few code will be generated by netbeans here
}

Notes : the code that I wrote above is only the main code, others are automatically generated by netbeans. Now let’s understand these codes before we move to the next steps.
There’s a few variable declarations, one of which is a data variable which has UsersData object data type, and the usersList variable which has an object List data type.  And then in the constructor of the class, we have a statement which call initialize method, while the initComponent method, is a method which netbeans auto generated method by default. And we can see getter and setter method for a userList variable also. In this initialize method is a core of our practice for this tutorial, please pay attention at a initialize block method, we call data.getUserList and then we patch the result to userList variable:

private void initialize() {
   usersList = data.getUserList();
}

By finishing this step, actually we finished the coding part, and the next steps are bind the component which in the form that we already created before. Let’s go to the main purpose this article which is Component Binding.
For the first bind we will do it in a JTable, right click the JTable component and the click properties. In the properties window, choose binding tab, and then click a small button which located horizontally to the element row, when the bind window appear, choose Binding Source to Form, and the Binding Expression to a userList variable, as shown to below picture.
SwingTutorial-1.2
If the userList variable is not show up on the list, it’s because we don’t create a getter and setter method.
After that, we can run the form and you can see the data which we created in a UsersData class contained in JTable. If we want to change the JTable looks, we can do it by right click the JTable component and choose Table Content, and then choose Column tab, at that window we can change the header, field size and other JTable settings.
Now, let’s try to bind a JTextField component, which already created on the form. The steps is exactly same with the JTable binding above, but the binding source is not Form anymore, but the JTable its self, and the Binding Expression  is selectedElement_IGNORE_ADJUSTING.[a property name of user class]. What we should noted here is property name of User class. I mean if we want to bind a JTextField to hold a sureName data from the Users class, then the binding expression must point to the selectedElement_IGNORE_ADJUSTING.sureName . As shown as below picture:

SwingTutorial-1.3Ok now, please bind all the JTextField component which exist on the Form by repeating above steps,  and then run the form. And click one of the row on a JTable, the each JTextField should contains the each data according to the row we have clicked on JTable.
That’s all for the practice now, this link is a project source code of our practice that you are free to use, develop and try by your self.
Have good day, and I hope it useful.

Thanks

Josescalia

Leave a Reply

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

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