User: andreas
Date: 00/10/24 23:21:06
Added: . EJX.HowTo.GUI-Basics.html
Log:
Add the second part of the EJX/AWT How To dealing
with EJX/AWT GUI and GUI components.
Revision Changes Path
1.1 jbossweb/EJX.HowTo.GUI-Basics.html
Index: EJX.HowTo.GUI-Basics.html
===================================================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>EJX/AWT GUI Basics How To</TITLE>
<LINK REL="stylesheet" type="text/css" href="HowTo.css" >
</HEAD>
<BODY>
<DIV class="page">
<H1>EJX/AWT GUI Basics HowTo</H1>
<H2>Introduction</H2>
<DIV class="para" ALIGN="left">
In this How To I will discuss the use of the BeanContext und AWT
to create GUIs and GUI components within EJX but you can also use
AWT outside of EJX.<B>Attention:</B> please note that I always
mean Rickard Öberg's AWT and not the Java AWT!
</DIV>
<DIV class="para" ALIGN="left">
The AWT provides you with the following opportunities:
<OL>
<LI>
Customizers for your Beans
</LI>
<LI>
Property Editors to edit or select properties
</LI>
</OL>
This seems to be simple but combining them together with the Java
Bean Support and ordinary Swing coding leads to advanced GUIs like
the actual version of EJX used in jBoss (I am not taking about the
lack of User guidance but about the abilities of the GUI to display
and edit the data).
</DIV>
<DIV class="para" ALIGN="left">
My biggest problem to understand EJX/AWT was that you have to deal
with EJX, AWT, Java Bean Support, XML and Swing coding. Therefore I
started from the simplest example to understand each component, its
function and how to use it. In the "Getting-Started" How To
I showed how to create an EJX plugin and then create a basic Bean GUI.
Now I go a step further to dynamically manage GUI components, use of
more BeanInfo features and to edit properties with the AWT property
editors. So let's start it!
</DIV>
<H2>Tabbed Panes and Editors</H2>
<H3>Goals</H3>
<DIV class="para" ALIGN="left">
From the last example of the first How To create and remove GUI
Components (Tabbed Panes) dynamically and edit the properties of the
data instance with the AWT editors.
</DIV>
<H3>Design</H3>
<DIV class="para" ALIGN="left">
First of all I want correct I mistake in the previous example. In
the MainPane class it is said that <I>getComponent()</I> is implemented
because of <I>BeanContextChildComponentProxy</I> which is not
implemented in the class but it works because the caller does not
relay on this fact. But in this example I fixed this. The question
but still remains why it should (will maybe be explained later).
</DIV>
<DIV class="para" ALIGN="left">
This example is really not a good example how to use EJX but it
shows how to use EJX/AWT. The idea is to use a tabbed pane to
display different views in our EJX frame. In addition the user
can create and remove the tabbed pane as long as there is at
least one left. And last but not least the user should be able
to select a value through an editor instead of a plain input field.
</DIV>
<DIV class="para" ALIGN="left">
As we saw in the last example the initial GUI component to show
the plugin is created in the ResourceManager on the
<I>getComponent()</I> call which is called by the BeanContext structure
we use. But instead of create a Panel which just keeps the GUI of the
plugin we create now a viewer of the plugin to display itself. This
makes the design more flexible because it is now defined in the Viewer
instead of the ResourceManager where it does not belong. Now the
viewer is an inner class because it is so closely related to its outer
component that it makes sense to be there.
</DIV>
<DIV class="para" ALIGN="left">
The construct following is a little bit ugly and should not be MADE this
way but it is enough for us.
</DIV>
<DIV class="para" ALIGN="left">
The ResourceManager <I>getComponent()</I> now calls the MainPane's
<I>getComponent()</I> method and this instantiate its viewer and returns
this Viewer as the GUI component to be shown.
</DIV>
<DIV class="para" ALIGN="left">
When the users now hits the <B>create a new Tab</B> or <B>remove this tab</B>
the appropriate method is called (by the BeanContext) and it will create a
new MainPane instance and adds its also created Viewer instance as a new Tab
to the tabbed pan or remove the actual shown tab from the tabbed pane.
</DIV>
<DIV class="para" ALIGN="left">
As you can see above the buttons we have a text input field and a drop down
box letting the user select between two items. Both are AWT editors.
</DIV>
<H3>Implementation</H3>
<DIV class="para" ALIGN="left">
First lets have a look at the changes in the ResourceManager where the
getComponent() just instanciate the MainPane and returns its GUI component.
<PRE class="code" ALIGN="left">
public Component getComponent() {
// Create the Property Container and return its GUI component
return new MainPane().getComponent();
}
</PRE>
</DIV>
<DIV class="para" ALIGN="left">
Now let's look at the new BeanInfo description of the MainPane:
<PRE class="code" ALIGN="left">
<bean
class="com.madplanet.tabbedEditor.MainPane"
displayname="Tab Pane and Editor's Main Pane"
iconcolor16="/images/container.gif">
<property
name="FirstProperty" class="java.lang.String"
displayname="First Property"
propertyeditor="com.dreambean.awt.editors.TextEditor"/>
<property
name="SecondProperty" class="java.lang.String"
displayname="Second Property"
propertyeditor="com.madplanet.tabbedEditor.editors.SecondPropertyEditor"/>
<method name="createTab" displayname="Create a new
Tab">
<parameter displayname="Title"/>
</method>
<method name="removeTab" displayname="Remove this
Tab">
</method>
</bean>
</PRE>
As you can see there are property editors settings for the first and second property
and
the second property uses its own editors. In addition you have methods listed which
appears
as buttons in the GUI because we use the GenericCustomizer.
</DIV>
<DIV class="para" ALIGN="left">
The new editor is just a simple subclass of the AWT TagsEditor defining what items
it has
to show and to what value the item relate to (you can use any Java Object you like):
<PRE class="code" ALIGN="left">
package com.madplanet.tabbedEditor.editors;
import com.dreambean.awt.editors.TagsEditor;
/**
* Editor to select the Second Property in a DD - editor
*/
public class SecondPropertyEditor
extends TagsEditor
{
// Constructors --------------------------------------------------
public SecondPropertyEditor()
{
super(new String[] {"First Selection","Second Selection"},
new Object[] {"First", "Second"});
}
}
</PRE>
</DIV>
<DIV class="para" ALIGN="left">
And as "Grande Finale" we come to the heart of the plugin to the MainPane
class.
<UL>
<LI>
The new viewer class is an inner class to the MainPane and creates a GUI to display
the
instance of its outer class instance. It keeps a list of outer class instances to
find
the index of the tab to be removed. The <I>setObject()</I> creates a new tab and
memorize
the given outer class. The <I>removeTab()</I> looks for the given outer instance and
removes
its related tab (by this index).
<PRE class="code" ALIGN="left">
public class Viewer
extends JTabbedPane
implements Customizer
{
// Attributes ---------------------------------------------------
private Vector mDataObjectList = new Vector();
// Customizer implementation ------------------------------------
public void setObject( Object pDataObject ) {
// Init UI
addTab(
"Main",
new GenericCustomizer( pDataObject )
);
mDataObjectList.addElement( pDataObject );
}
/**
* Removes the given Tab with the given Data Object
* from the Tabbed Pane
*
* @param pDataObject Tab with this Data Object has to be removed if found
**/
public void removeTab( Object pDataObject ) {
int lIndex = mDataObjectList.indexOf( pDataObject );
if( lIndex >= 0 ) {
remove( lIndex );
mDataObjectList.removeElementAt( lIndex );
}
}
}
</PRE>
</LI>
<LI>
These are the new methods (already defined in the BeanInfo see above) which
are called if the appropriate button is pressed.
<PRE class="code" ALIGN="left">
public void createTab( String pTitle )
throws Exception
{
System.out.println( "Create new Tab with title: " + pTitle );
MainPane lNewPane = new MainPane();
lNewPane.mCustomizer = mCustomizer;
lNewPane.mCustomizer.setObject( lNewPane );
}
public void removeTab() {
System.out.println( "Remove this tab" );
( (Viewer) mCustomizer ).removeTab( this );
}
</PRE>
</LI>
</UL>
</DIV>
<H3>Remarks</H3>
<DIV class="para" ALIGN="left">
This is more ore less EJX and AWT. But it does not end here. The power of EJX
lays in the BeanContext and how you combine EJX, BeanContext and AWT. You maybe
think what's about XML and we will come to XML soon but (in my opinion) this is
not a core part of EJX and AWT just use it but just as the name of the EJX base
classes said they manage resources (or earlier just files). Therefore it must be
a way do deal with resources and especially with XML resources.
</DIV>
</BODY>
</HTML>
