Chat Tutorial in NetBeans/GUI Client: Difference between revisions

These instructions are a continuation of the reworking of the Chat Tutorial. As the client requires the creation of a new screen, we can use the GUI editor in NetBeans instead of writing that code manually. Be careful of which parts of the code you do manually edit, as the GUI section is edited in the GUI window and it can be corrupted if you are not careful.

Open the Client'''client''' Project; close any other Projects. Right click on the project and select '''Properties'''. In the '''Run''' section, change the '''Main Class''' to '''client.Chat'''.

Right click on the client package and select new'''New''' and '''Java Class'''. CreateEnter '''Class Name''' as '''Chat''' and click '''Finish'''.

Delete the '''Test.java''' entry (right click, select delete).

Ignore errors for the moment (we have not defined the '''View''' object).

Right-click on the '''client package''' and addselect a'''New''', '''JFrame Form'''. Give the class'''Class nameName''' as '''View''', and click '''Finish'''. WaitYou may have to wait a while; NetBeans will open '''View.java''' in the edit window. This window now shows a blank grey box that will be your window layout and additional panes on the right.

Click the '''Source''' button on the top of the editor window. Modify the class line so that it shows '''...extends JFrame implements ActionListener'''. The top of the code should now be:

The last line is shown as a box of '''"Generated Code"''', which can be expanded using the + on the left but MUST NOT be changed in this screen, only in the GUI editor. Delete the code belonging to the '''main''' method, up to the line showing the '''Variables Declarationdeclaration'''. Again DO NOT delete these last two lines.

If you have edited this correctly, you can save the file, close it and open it again. It will still show as the form you had before. If you look at the files it has created, using the files explorer, there is a '''View.java''' and a '''View.form''' and these two files must be consistent for the View class to show correctly in NetBeans. If it does not, delete the View class and start again; it is too difficult to try to edit both files manually.

* Click on the blank window. In the '''Properties''' list, change the '''title''' to '''Chat 0.51''' and the Name'''name''' to '''main'''.

* Add a '''Label''' from the AWT'''Swing Controls''' section of the '''Palette.''', by Clickclicking on '''Label''' in the Palette, and dragdragging it to the top left of the form, leaving a suitable margin to the edge. In the '''Properties''', change the '''text''' to '''Username'''.

* Add a second label (select and drag) below the first. Change the '''text''' to '''Password'''.

* Add a third label (select and drag) below the second. Change the '''text''' to '''eMail'''.

* Add a '''Text Field''' ('''Palette''', '''Swing Controls''' section), to the right of the Username label. In the '''Code''' list change the '''variable''' to '''jUsername'''. In the '''Properties''', clear the '''text''' value and change the '''horizontal size''' to '''210'''.

* Add a second Text Field below the first field and to the right of the Password label. In the '''Code''' list change the '''variable''' to '''jPassword'''. In the '''Properties''', clear the '''text''' value and change the '''horizontal size''' to '''210'''.

* Add a third Text Field below the second field. In the '''Code''' list change the '''variable''' to '''jEmail'''. In the '''Properties''', clear the '''text''' value and change the '''horizontal size''' to '''210'''.

* Add a '''Button''' ('''Swing Controls''' section) below these fields, aligned to the right. In the '''Code''' list change the '''variable''' to '''jConnectButton'''. In the '''Properties''', change the '''text''' to '''Connect'''.

* Add a '''Scroll Pane''' ('''Swing Containers''') positioned below the previous elements. Scroll down the '''Properties''' list and change the '''horizontal size''' to '''280''' and the '''vertical size''' to '''200'''.

* Add a '''Text Area''' (Controls), dragged into the Scroll Pane. In the '''Code''' list change the '''variable''' to '''jChatArea'''. In the '''Properties''', untick '''editable'''.

* Add a '''Text Field''' (Controls), below the Text Area. In the '''Code''' list change the '''variable''' to '''jInputField'''. In the '''Properties''', untick '''enabled''', clear the '''text''' value and change the '''horizontal size''' to '''210'''.

* Add a '''Button''' (Controls) to the right of the Text Field. In the '''Code''' list change the '''variable''' to '''jSayButton'''. In the '''Properties''', untick '''enabled''' and change the '''text''' to '''Say'''. You could drag the right hand side to align with the text area.

Click the '''Source''' button. Below the class definition line, add the following code to create the action controls for the form. Note the the first and last lines already exist.

The '''Client.java''' file that existed previously is used in this part of the tutorial. It remains the same.

If there are no errors in the package, select '''Run''', '''Build Project''' from the NetBeans menu bar. This will create '''client.jar''' in the '''dist''' directory. That file is required for the deployment.