Swing Data Binding Example

As an example of how the the data binding tools can be used, consider the following Phone Book example. The phone book manages a set of phone groups. Each phone group in turn holds onto one or more persons. For each person, various e-mail and phone contact information is maintained. Editing a person’s description should update the same data shown in the list. The final code for the Phone Book project is available here.

Use Designer to create the skeleton of the JPhoneBook.java class
Create the following model classes:
- Class Person with properties: name, email, phone, mobilePhone1, mobilePhone2
- Class PhoneGroup with properties: name, persons
- Class PhoneGroups with properties: groups

Add the following to the JPhoneBook class:

private PhoneGroups m_groups = new PhoneGroups();

And add some initial data:

PhoneGroup group1 = new PhoneGroup("Developer Team");
m_groups.addGroup(group1);
group1.addPerson(new Person("Konstantin Scheglov", "kosta@nospam.com", "1234567890", "", ""));
group1.addPerson(new Person("Alexander Mitin", "mitin@nospam.com", "", "0987654321", ""));
group1.addPerson(new Person("Alexander Lobas", "lobas@nospam.com", "", "", "111-222-333-00"));

Set the content for the group viewer. Click the Bindings tab in the editor. Select m_groupList in the Targets (Widgets) list, <Self Object> in the Target Properties list, select m_groups in the Model (Beans) list, and groups in the Model Properties list.
Click the Bind button to open the Create Data Binding dialog. m_groups.group contains elements of type PhoneGroup, so select the type PhoneGroup and its <EL Expression> property. In the EL Expression field, type "${name} (\{$personCount})". Note that selecting the name property would result in just the name of the group being displayed. You can use EL Expressions to create more complex results. In this case, we can show the name plus the number of people in the group.
Click OK to see m_groups.groups bound to m_groupsList in the table. You can also see that the detail binding between m_groupsList and the EL Expression has also been created.
Run the application to see that the list of phone groups is populated and that each group shows its person count.
Next we would like selecting a group to show all of its contained persons. Switch back to the Bindings tab. Select the <Self Object> of the m_personTable in the Target Widget list and m_groupList and selectedElement/persons in the Model Widget list and click the Bind button to open the Create Data Binding dialog.
We need to show the properties of a Person object in m_personTable, so click the Add button to add a table column binding for each property (name, email, phone, mobilePhone1 and mobilePhone2). You can order the Person properties using the << and >> buttons.
Click OK twice and run the application. See that selecting a group now updates the Persons list.
Switch back to the Bindings tab. Next we need to bind selectedElement of the m_personTable (a Person object) into the various text editors.
Select the first Text widget (m_nameTextField) and its text property and the m_personTable and its selectedElement/name property. Click the Bind button to open the Create Data Binding dialog. Leave everything set to the defaults and click the OK button.
Bind each selectedElement property to its associated Text field.
Run the application. See that selecting a group updates the Persons list and selecting a Person now updates each of the Text fields.
Also note that changing any of the data in the text fields immediately updates the data in the table. The magic of data binding!