FX

With the JavaFX technology it is easy to build your own customized JavaFX Address Book.

JavaFX Address Book sample manages a contact list to make a call, send an email, or locate a contact on a real Yahoo map. Thumbnail images are also supported in the contact list.

This sample uses JavaFX UI controls such as ListView for the contact list and ScrollView for the yahoo map.

This JavaFX Address Book can be used as a front end client application for integrating any mail and phone backend system. The interface is provided in Interface.fx, and the JavaFX AddressBook container provides a simple animation for dialing and sending an email. The animation is triggered by clicking on the phone number or the email address.

Understanding the Code

The code shown in Figure 1 creates JavaFX Address Book, which enables the user to easily manage all contact details. ContactNode is a CustomNode creating a detail contact information.

public class ContactNode extends CustomNode {
    public var name:String;
    public var phone:String;
    public var email:String;
    public var location:String;
    public var imageurl:String;
    ...

Figure 1: ContactNode.fx Class

Changing data member information such as a phone number or a location (zip code) is easy in Details.fx. By constructing a ContactNode with details, one can create a new contact row in FXAddressBook.

CONTACT_INFO is a sequence of ContactNode and holds the contact information for FXAddressBook.

package def CONTACT_INFO = [
    ContactNode {
        name: "Rakesh Menon"
        phone: "9123231"
        email: "rakesh@email.com"
        location: "31315"
        imageurl: "rakesh.png"
    },
    ContactNode {
        name: "Arun Kumawat"
        phone: "1122334"
        email: "arun@email.com"
        location: "94085"
        imageurl: "arun.png"
    },
    ...
]

Figure 2: Changing Contact Details: Details.fx

In Main.fx, scene contains ListView control for the contacts, each items in ListView is bound with CONTACT_INFO sequence.

	bodyList = ListView {
		layoutInfo: LayoutInfo {
			width: STAGE_WIDTH
			height: STAGE_HEIGHT - Header_Height - Footer_Height
		}
		items: bind [CONTACT_INFO]
	}

Figure 3: ListView UI Control to manage CONTACT_INFO sequence: Main.fx

The following image shows the ListView item to display contact information details. One can expand each item by clicking the "+" icon, or shrink the details by clicking the "-" icon.

Figure 4: FXAddressBook contact detail

In Main.fx, scene contains ScrollView UI control for the Yahoo Location Map. The node attribute of ScrollView contains the image which is bound to the URL of ContactNode.loc.location variable.

	ScrollView {
		layoutY: 40
		layoutInfo: LayoutInfo {
			width: STAGE_WIDTH
			height: STAGE_HEIGHT - Header_Height - Footer_Height
		}
		visible: bind visible
		pannable: true
		cursor: Cursor.MOVE
		hbarPolicy: ScrollBarPolicy.NEVER
		vbarPolicy: ScrollBarPolicy.NEVER
		node: ImageView {
			cache: true
			image: bind Image {
				url: ContactNode.loc.location
			}
		}
	}				

Figure 5: ScrollView UI Control to Yahoo Location Map: Main.fx

The Map is retrieved with the URL of contact location, and rendered using ScrollView UI control. The Map can be navigated by scrolling the mouse around.

Figure 6: Yahoo Map navigation with ScrollView UI Control