Fat-Client-Development - Create and code the class for the 'Task-Frame' to maintain 'Projects'

Generally, an 'Application' contains of one 'Start-Frame' – which contains mainly code to perform the technical backgraound like connecting to a database – and serveral 'Task-Frame's.
Aim of a 'Task-Frame' is, to process 'Business-Data'; e.g. the maintenance of data the 'Application' is designed for.

In this step, a frame will be created that allows the maintenance (create, change, delete data) of 'Projects'.
A 'Project' is a group of error messages that belong to a single 'Application'.
An 'Application' is an entity of frames (usually packed within one JAR-file) that belong together.

The aim of this tutorial (the whole set of documents – not just this document) is, to create an 'Application' to maintain Error-Messages for several 'Projects' – i.e. 'Applications' that you might create for the use of the organisation you are working for or 'Applications' you create by the order of one of your clients.

In fact, at the time of writing this documentation this documented 'Application' was already extended to maintain the language-dependant text-elements too.

Preface:

The code written in this tutorial is far away from being optimized.
Emphasis of this tutorial is to develop the application in small steps where the completion of each step allows the application to be run eror-free and showing the result aimed by the step.
Therefore the code is written to be understandable in favor of being optimized.

Credits:

A reference of the elements for the GUI in JAVA can be found under http://java.sun.com/docs/books/tutorial/uiswing/layout/gridbag.html .

Prerequisites:

• JS_FC01h - Setting the properties of the GUI-Elements, Part 2 completed - and its prerequisites too.

Create the base-class for the Task-Frame (with no code for now):

Code that can be inherited

This class contains code for variables and methods that can be reused for all individual developments.
The class created now can the be inhereted (therefore it is called base-class) by 'Task-Frames' of individual projects.

• Right click onto the project 'JS_Base' and select >New>Class



• Enter the Package (js_base.frame), the (Class-)Name (JSBS_TaskFrame), check that no checkbox is selected; then click the [Finish] button.



• Eclipse has already generated a template and the individual code can be entered.

• For now, the only code entered is the comment and the reference to the 'StartFrame' (referred as CommandCenter here).
Pieces of code going into this class are developed step by step in the next steps of this tutorial.

• Just the inherited class (JFrame) and comment is entered now:
package js_base.frame;

import javax.swing.*;

/**
 *
 * @author kurt@javascout.biz
 * @date 2006-06-06
 *
 * @description
 * Frame to be inherited by 'Task-Frame's.
 * A 'Task-Frame' is a frame with code to handle the processing of business-data.
 * 
 * This class contains variables for
 * * Connection to the 'Start-Frame' to have access to variables kept there,
 *   e.g. database-access or access to a Java-Application-Server.
 * * A structure containing date and user-information.
 *   This structure is derived from the JSBS_UniversalParameters held in the
 *   StartFrame.
 *   A some variables from there are addressed pretty often, the variables are copied
 *   at the creation time of this class.
 *
 * @change-log
 * when      who          why
 * --------------------------------------------------------
 *
 */
public class JSBS_TaskFrame extends JFrame {
/*
 * Reference to the 'Start-Frame', also referred as 'Command-Center' or 'CC'.
 * The 'CC' helds general values. */
    public JSBS_StartFrame frmCC = null;
    
}

top.

Create and code the Class for the GUI to maintain 'Projects':

The procedure to create a class for the GUI was fully documented at the step JS_FC01d - Create and code the class for the GUI..
To shorten this document, screenshots are reduced.
If you feel insecure what has to be done and need a more detailed explanation please refer to JS_FC01d - Create and code the class for the GUI.

• Right click onto the project 'JS_FC01' and select >New>Other...

• In the following window expand 'Java' (if not alredy done), select >Visual Class and click the [ Next > ] button.

• Enter the Package (js_errdb.clientframes), the (Class-)Name (JS_ErrDB_Project) and the Superclass (js_base.frame.JSBS_TaskFrame).
Verify that no checkbox is marked and click the [ Finish ] button.



• Eclipse has already generated a template and the individual code can be entered.

As the detailed way to create a GUI was already shown in JS_FC01d – Create and code the class for the GUI,
only new types of GUI-elements (e.g. List-Boxes) are discussed in detail.

For a more detailed explanation how to develop a GUI, please refer to the tutorial
JS_Base02 - DataBase-Loader with a GUI.

The complete code for this class is in JS_ErrDB_Project.

• First the comment is entered - so a stranger knows what this class is for.

package js_errdb.clientframes;

import js_base.frame.JSBS_StartFrame;

/**
 *
 * @author kurt@javascout.biz
 * @date 2006-06-07
 *
 * @description
 * Task to maintain data about 'Projects'
 *
 *
 * @change-log
 * when     who          why
 * --------------------------------------------------------
 *
*/

public class JS_ErrDB_Project extends JSBS_TaskFrame {


}

  
  

• As next step, a constructor-method is implemented.
The Constructor of a Task-Frame differs from the one for the 'Command-Center'.
For a Task-Frame it is neccessary to keep the reference to the 'Command-Center' by storing
is called from the main-method and may contains further calls of methods that have to be performed at the time when the object is 'constructed'.
The only method that is called now is , which is a reserved word in Java and calls the 'constructor' in the inherited object (i.e. JSBS_StartFrame in this example).

package js_errdb.clientframes;

import js_base.frame.*;

/**
. . . . . .
. . . . . .
public class JS_ErrDB_Project extends JSBS_TaskFrame {

    public JS_ErrDB_Project(JSBS_StartFrame parmCC){
      super();
      frmCC = parmCC;
      initialize_before_frame();
      initialize_frame();
      initialize_after_frame();
    }

}

Do not worry if the call of methods initialize_before_frame(), initialize_frame() and initialize_after_frame() are marked as in error; this methods will be implemented next.

• As mentioned earlier, the coding of this class will not be documented in every step.
Finally, the frame should look like this.

• If you are impatient - as it is a long way to get all GUI-elements coded – I recommend to code only the following GUI-elements / methods
pnl_Main / get_pnl_Main(),
pnl_Maintain / get_pnl_Maintain(),
lbl_ProjectCode / get_lbl_ProjectCode(),
txt_ProjectCode / get_txt_ProjectCode(),
lbl_LanguageCode / get_lbl_LanguageCode(),
txt_LanguageCode / get_txt_LanguageCode(),
lbl_TargetDirectory / get_lbl_TargetDirectory(),
txt_ TargetDirectory / get_txt_TargetDirectory(),
btn_Store / get_btn_Store(),
btn_Copy / get_btn_Copy(),
btn_ChooseDirectory / get_btn_ChooseDirectory()
and modify the method get_pnl_Main() to include only the method get_pnl_Maintain() (and skip the method get_pnl_Selection()).

• As this class does not have a main-method, the frame can not be started directly.
That is not the intention anyway – it should be 'constructed' when the button "Maintain 'Projects'" on the 'CommandCenter' is clicked.
The code to do this is shown in the following paragraphs.

top.

React to a button-click:

The code for reacting to a button-click was described in detail in the tutorial Base lesson 2, step 2: Adding an action: selecting the file with the SQL-commands,
Therefore, the following description contains only catchwords what part of code has to be added.
The new code is placed into the classes JS_ErrDB_CommandCenter and JS_ErrDB_CommandCenter__ActionHandler.

• Add the Interface ActionListener, the package javax.awt.event.* (that contains ActionListener) and code the method actionPerformed().

• That a button can react to 'Actions',
the ActionListener has to be added to the button: btn_Maintain.addActionListener(this)
and the button has to be given an ActionCommand: btn_Maintain.setActionCommand("btn_Maintain").
Do this within the method get_btn_Maintain().

• A little bit of theory:
When a GUI-element - where an ActionListener is added - is clicked, the method actionPerformed(ActionEvent e) is called.
This is done completely by the JAVA-runtime-environment and does not need any further coding.

• The following 'hand-over' to another class (JS_ErrDB_Project) is done, to avoid overloading one class with code.
As all the methods that are performed after any kind of 'event' do not have to keep variables after the method ended, the opportunity presents itself to design all the methods as static.
That allows to call the methods without 'construct'ing the class first.

top.

Open the Task-Frame:

• In the previous paragraph, coding ended with an error, as the class JS_ErrDB_CommandCenter__ActionHandler was not found.
Right click onto the project 'JS_FC01' and select >New>Class .

• Enter the Package (js_errdb.clientframes), the (Class-)Name (JS_ErrDB_CommandCenter__ActionHandler), check that no checkbox is selected; then click the [Finish] button.



• The code for the created class is not voluminous now; please see the class JS_ErrDB_CommandCenter__ActionHandler
and implement the method protected static void handleEvent(. . .) .

• .As all the methods that are performed after any kind of 'event' do not have to keep variables after the method ended, the opportunity presents itself to design all the methods as static.
That allows to call the methods without 'construct'ing the class first

• To see the result of the just typed code, select 'JS_ErrDB_CommandCenter.java' within the editor,
run the application by selecting >Run>Run As>Java Application.

• After clicking the button "Maintain 'Projects'", the application should look like this:



The appearance depends on the number of GUI-elements already coded.

• The missing text is due to the missing entrances in the file 'DisplayStrings.xml'.
Please follow the link in the line above and define all text for the frame with
<FrameClass>js_errdb.clientframes.JS_ErrDB_Project</FrameClass>.

• If you have some time try to understand the system of the JScrollPane (variable pnl_SelectionListScroll) and its sub-elements.
This is the system how a table can be displayed within JAVA.

• After finishing coding all GUI-elements the frame should appear like this:



And – yes I know – the look is not pretty sexy.
Till now only a few methods to 'style' GUI-elements were used. This was done to avoid an overloading of the code as I just wanted to show the essential methods that have to be applied to GUI-elements.
Please see the document Advanced descriptions to create a Fat-Client for code-snippets to style GUIs.

top.

Next Steps:

• As a preparation to save data onto a database (or get it from there), the variables to be stored are brought into the structure of a Business-Object:
JS_FC01j - Develop the Base Class for Business Objects,
JS_FC01k - Develop the General Class for the Business Object 'Project',
JS_FC01l - Develop the Client-Side Class for the Business Object 'Project' and
JS_FC01o - Develop the Server-Side Class for the Business Object 'Project',
As a low-level interface to a database-table, a DataBase-Access (DBA-)Object is established:
JS_FC01m - Develop the Data-Base-Access (DBA) Object for the table 'Project',

• After that, as a reaction to clicking the button 'Store', the variables within the structure of the Business-Object will be written to the database and read from it later on.
JS_FC01q – React to the 'Store' button and save the data in the database.