Simple Bug Tracking – Creating the GUI

So as part 3 of the Simple Bug Tracking project, we develop the GUI. This is simply going to be the GUI, there will be no functionality at this stage. Once this stage is past though, we’ll consider the first story to implement.

1. In NetBeans we need to create a new project. So File->New Project. Select Java and then Java Application. (At this stage I did consider selecting Java Desktop Application, but decided against. Hopefully I’ll get some time in the future to experiment with that).

2. Give the project a name ‘SimpleBugTracker’. Deselect the ‘Create Main Class’ option, and ensure ‘Set as Main Project’ is selected.

3. Right click on the project, and select New->JFrame Form.

4. Give the JFrame the following properties:

Class Name: MainFrame
Package: gb.frames

Click finish and the MainFrame will appear.

5. With the frame selected (an orange border will be displayed), go to the Properties dialog and set the title to ‘Simple Bug Tracker’.

6. Next select the ‘Menu Bar’ control from the Swing Menus from the Palette dialog. Drop this control into the top left hand corner of the Frame.

7. Double click on the ‘Edit’ menu item, and enter ‘Admin’ and press Enter to save the changes.

8. Select the ‘File’ menu item, right click and select Add From Palette->Menu Item. Double click the new menu item, and set the text to ‘Exit’.

9. Thats the menu complete for now. We’ll come back add some extra options towards the end of the project.

10. Next select the ‘Panel’ control, and drop this onto the form, aligning it with the Menu Bar. Stretch this control width wise to align with the right of the frame control.

11. Right click in the Panel control and select Properties. On the border property, click the (elipse) and from the pop-up select Titled Border. Enter ‘Filter Bugs’ for the title, and then set the titleFont to have bold properties.

12. Close the 3 dialogs.

13. Drop a Radio Button control into the top left hand corner of the Filter Bugs panel. Add 2 more, and add them to the right of the 1st radio button. Then add a combo box.

14. Rename the radio buttons text to ‘Status’, ‘Owner’, and ‘Area’.

15. Finally, move the bottom of the panel control to resize it to move towards to bottom of the combo boxes and labels.

16. The form should now look like this:

17. Add a new panel below the ‘Filter Bugs’ panel. Again, make it a titled border, set the title to ‘Bug List’ and its font properties to bold. Again close all the dialogs.

18. Within this panel, we’re going to add a List control and then 2 buttons. Start with the List, and place it into the top left of the panel control. Drag its right-hand side to align with the panel control.

19. Next select a button control and drop it into the top right-hand corner of the list control. The list control will alter its size to accomodate the new button. Add a second button below the 1st button.

20. Change the 1st buttons text to ‘Create’, and the 2nd buttons text to ‘Update’.

21. Finally, add a button below the second panel, in the bottom right hand corner. Alter the text to ‘Exit’.

Thats us done. The preview of the form should look like this:

There is 1 thing I’m unhappy about and thats the lay-out of the 3 radio buttons and the combo box. I’d rather have them on 2 serperate lines, with the combo box and radio buttons centralised. However I could get this working. I’ll see if I can revisit this at some point.

Finally – a quick reference to an excellent tutorial from NetBeans for generating Swing Interface.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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