Create applications using ObjectDb and JPA in NetBeans

Step 3: Design GUI

We have to create a graphical user interface as the front end to allow user to store and retrieve data. In this example, there is a list of cities on the left side and when a city is clicked, the details are displayed on the right side. For the sake of simplicity, the details of the city are limited to the name of the city and the country to which the city belongs. After selecting a city we can click the Edit button so that we can start changing the details of the selected city. We can select a country and then click the Delete button to remove the it from the list. When we click the Add button, we can start entering data to add a new city. Unless we click the Edit or Add button, the details of the city cannot be changed.

While details of a city is being add or changed after clicking the Add or Edit buttons, we cannot select the cities from the lstCity as it disabled(Edit Mode). After editing the details or entering new details of a city, we can click the Save button to save them or the Cancel button to discard the changes. style=’mso-spacerun:yes’> This will again allow us to select any City from the lstCity. (Select Mode)

There is a textbox to enter a new Country and if we click the Add New Country button, the country will be added to the existing list of countries.

The Close button on the lower down corner of the form will terminate the application.

Right click on City node or Source Packages node to get the popup menu and select New. The recent selections are listed and find the Java Package. If not listed in the list, select Other to get the New File window. Select Java from the Categories list and then Java Package from the File Types List. We will then get the New Java Package window. Enter a name like “gui” to the package we are going to store Graphical User Interfaces inside this package. Make sure Source Packages is selected as the location and then click on the Finish Button.

Right Click over the gui package to get the popup menu. Select New and then JFrame. If JFrame is not listed, select Other to get the New File window and select Swing GUI Forms from the categories and then JFrame from the File Types to get New JFrame Form window. Enter a name like frmCity and after making sure gui is selected as the Package, click the Finish button.

The projects window will show the frmCity under gui package. Double click on frmCity or right click on frmCity and then select Open to design the form. Drag and drop the following components from the component palette to the form to design the following look. If the component palette is not visible on the right side choose Window menu and then Reset Windows. To change the text displayed on the controls, right click on the component and then select Edit Text. Right click on the control and select Change Variable Name to change the name of the control which is used in coding to identify the controls.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Component
 
	Name 	Text
JLabel 	lblCities 	Cities
JList 	lstCity 	
JButton 	btnAdd 	Add
JButton 	btnEdit 	Edit
JButton 	btnDelete 	Delete
JTextField 	txtCountry 	
JButton 	btnAddNewCountry 	Add New Country
JLabel 	lblCity 	City
JTextField 	txtCity 	
JComboBox 	cmbCountry 	
JButton 	btnSave 	Save
JButton 	btnCancel 	Cancel
JButton 	btnClose 	Close

Comments

comments