Contact me Screenshots of examples Manuals for using the designer All downloads Home

Sourceforge Summary

SourceForge.net Logo

Manuals:


The following manuals are available:

  1. Integrating the EMP Form Designer into your Java software
    Shows you step by step how you can integrate the EMP Form Designer into your already existing Java software to give it the capability of designing forms.

  2. Using the Demo Application
    The demo application has a lot of features that a normal GUI developer could use. This manual shows how you could use it to design forms and generate GUI code for more than one programming language or toolkit.

  3. Using the Tool Creation Wizard
    The wizard application is used to create new EMPCodeGen XML files. Each EMPCodeGen XML file can be used with the form designer to configure its interface and to specify the code it generates. This manual shows you how to use the wizard.


Integrating the EMP Form Designer into your Java software

If you are a Java developer you are already familiar with including jar files in your classpath in order to use it. You will need the empfd_0.1.1beta_base.jar file from the EMPFormDesigner_beta0.1.1.zip archive available for download. Include it in the classpath when running your program. Within your program add the following import statements:

        import com.jkp.emp.gui.EMPPanel;
        import com.jkp.emp.utilities.*;
        import com.jkp.emp.resources.*;

Create an instance of the form designer where you like by calling the constructor of the EMPPanel class:

        EMPPanel theFormDesignerPanel = new EMPPanel();

The EMPPanel class extends from JPanel, so you can insert it into any Swing container you like. It is also possible to insert it into an AWT container, but this has not been tested. Following is the method summary of all the public methods available for use with the EMPPanel object created.

Method Summary

 java.lang.String

generateCode()
          Generates the resulting source code for the designed form using the specified EMPCodeGen XML file.

 java.lang.String

getCodeGenTitle()
          Returns the title of the CodeGen XML file.

 java.lang.String

getFormXML()
          Returns the current form and its contents as an XML file.

 void

resetForm()
          Resets the EMP Form Designer by removing all modifications that might have been made to it.

 void

setEMPCodeGenXML(java.lang.String XMLFile)
          Sets the EMP Form Designer to use the specified XMLFile as the EMPCodeGen XML file.

 void

setFormXML(java.lang.String theXML)
          Sets the current form and its contents to the given XML description.


Please note that when reading the EMPCodeGen XML files in the XMLFiles.zip file included in the EMPFormDesigner_beta0.1.1.zip archive, the XML files are saved in UTF16 format. If you are using the java.io package classes to read the XML files, then do the following:

   String xmlDoc = "";
   File theFile = new File("C:\\emp_awt_UTF16.xml");

   try {
      FileInputStream fileIn = new FileInputStream(theFile);
      InputStreamReader isr = new InputStreamReader( fileIn, "UTF16" );
      Reader in = new BufferedReader(isr);
      StringBuffer buffer = new StringBuffer();
      while( in.ready() )
         buffer.append( (char) in.read() );
      in.close();
      xmlDoc = buffer.toString();

      theFormDesignerPanel.setEMPCodeGenXML( xmlDoc );

   } catch(Exception ex) { 
      ex.printStackTrace();
   }



Using the Demo Application

The demo application can be used to design forms, save a designed form, open a previously saved form, generate code for the form designed and loading different GUI toolkit files for generating source code in multiple languages or toolkits.




The application has three main menus. The File menu has an option for reseting the form designer to its default settings using “Load Default EMPCodeGen”. The “Load EMPCodeGen...” options allows a user to load an external EMPCodeGen XML file. These are configuration files created using the Toolkit Creation Wizard application. Examples of these files are provided in the XMLFiles.zip file included in the EMPFormDesigner_beta0.1.1.zip archive. You may close the application using the “Exit” option.




The “Project” menu has options for opening a form file, saving a designed form to the file system, reseting the form and saving generated GUI source code to the file system. Please note that no options have been provided for viewing the generated source code. Take special care using the “File Encoding” options. By default all form files and source code files are set to be save as ASCII files. However there might be a situation when a form is designed using Unicode characters, e.g. when designing an Arabic form. For this case you will have to set the file encoding to Unicode (UTF16) in order to save the files properly. When you wish to open the files up at a later time, you will again have to set the file encoding to Unicode before opening the files.




The “Look & Feel” menu allows you to change the look and feel setting of the application at runtime. By default you will only see the “SystemDefault”, “Metal” and “Motif” options only. If you are running the demo applications that include the SLAF library, you will get all the options shown in the acreenshot above. Changing the look & feel only changes the look of the application, it does not make any difference to the functionality of the program.




Use the toolbar to add new widgets to the form. You can drag a widget around the form and you can resize a widget by dragging it from one of its corners. The values in the properties panel on the right is automatically updated as you drag or resize a widget on the form. The properties panel offers a combo box that can be used to select a widget on the form or the form itself. It has two tab panes to display the properties of the currently selected widget, one shows them in categorized format while the other shows all the properties in alphabetical order. The text boxes can be used to input property values that will show their effect on the form designer.




Using the Toolkit Creation Wizard

The prime feature of the form designer is its ability to add new GUI tookit support by just using plain XML files. In order to add support for new toolkits and programming languages, this wizard was created. It takes you step by step to create a completed XML file.




The application has two menus. The File menu has options for creating a new toolkit project, opening a toolkit project (i.e. an EMPCodeGen XML file), save the currently open project, save it under a different name, closing a project file and exiting the application.





The Project menu has a “Test Project” option that is used to test the currently open toolkit project. It pops up a window with the form designer in it.


Most of the wizard is straight forward. You need to fill in the values in the given text fields. Tooltips have been added in all the text fields to explain what the input is about. The panel on the left displays your overall progress in completing the XML file. The buttons given at the bottom of the window are for moving to the previous form, saving the changes made to the current form, reseting the current form and moving to the next form respectively.




One of the options that might seem confusing at first is the the “Property: Extra” section given in most of the forms. The objective of this option is to allow you to specify any properties for a widget in addition to the default properties. For example, the enabled property for a button is not provided by default; it may be added using the “Property: Extras” option. Select “New Property” from the combo box and set all the values. The datatype for the enabled property will be boolean.




The “Base Code” form might also seem a little confusing. This form allows you to specify skeleton code used for source code generation. The source code generation process might be generating one or more files. Use the list box along with the “New File” option to create and edit multiple skeleton files. Remember to use the “Save” option before you decide to edit another file. When you select a file in the list box, its souce code appears in the text area below. Use the “Insert Property” combo box to insert the available properties into the source code. The properties show up as tags, e.g. The name of the EMPFrame will show up as <EMPFrame:name> in the source code.




When entering source code generated by a widget, source code might be generated in diferent parts of a skeleton file or in different files altogether for the same widget. Each source code genration is called an entry. For each entry you must select a skeleton file that the entry is made in, i.e. the “Base Code File”. You must also choose a line number in the chosen base code file after which the generated source code is to be inserted. This is done visually using the choose line dialog box. For each entry you can insert tags representing the properties of the widget by selecting an option from the “Insert Property” combo box.


Once you have entered all the required values for the XML file, you may test the project. Please study the example XML files in the XMLFiles.zip file included in the EMPFormDesigner_beta0.1.1.zip archive to get a feel for how source code is supposed to be formatted.