| CustomDisplay

Building the CustomDisplay Component

The CustomDisplay JSB makes use of the image file, Circle.gif; demonstrating how a JSB can make use of supporting image files (including icons) packaged within a JAR. In addition, CustomDisplay illustrates the power of Hybrid Components that make use of both Java and JavaScript.

Note: For additional information on using Icons for JavaScript Beans, see the SimpleClientServer sample. For more information on using both Java and JavaScript together in a component, see CustomJSB which illustrates how to build a JavaScript component with a Java customizer used at design-time.

The JavaScript Bean is very short, and is used simply to write a reference to an image onto an HTML page (and specify an icon for the component to display):

`netscape/samples/simple/CustomDisplay.jsb`

    <JSB>
        <JSB_DESCRIPTOR NAME="netscape.samples.simple.CustomDisplay" DISPLAY_NAME="Circle"
                    ENV="client" VISUAL="netscape.samples.simple.CircleVisual">

        <JSB_ICON ICONNAME="n_s_s_Circle">

        <JSB_CONSTRUCTOR>

        function netscape_samples_simple_CustomDisplay(params) {
      		document.write( "<img src=netscape/samples/simple/images/Circle.gif border=0>");
        }

        </JSB_CONSTRUCTOR>
    </JSB>

The Java Class used to provide the look of the component at design-time is equally simple, and simply requires that a JavaScript programmer have a Java Compiler (like the one found in the JDK) installed in order to compile it:

`netscape/samples/simple/CircleVisual.java`

    package netscape.samples.simple;

    import java.awt.*;

    public class CircleVisual extends Component {

         public void paint(Graphics g) {
            Dimension size = getSize();
            int width = size.width - 1;
            int height = size.height - 1;

            g.setFont(getFont());
            g.setColor(Color.red);

            g.fillOval(0,0,width,height);
         }

        public Dimension preferredSize() {
            return _preferredSize;
        }

        private Dimension _preferredSize = new Dimension(30,30);
    }

Using a script (.bat or .sh, depending on your system), the `.class` file is compiled from the `.class` file using javac. Next, the JAR file is constructed which references a manifest file which simply notes which file(s) in the JAR are JavaBeans or JavaScript Beans.

- BuildCustom.bat
  (or on Unix, type `sh BuildCustomDisplay.sh`)
- CustomDisplay.mf

Create `CustomDisplay.jar` by running `BuildCustomDisplay.bat` (or `BuildCustomDisplay.sh` on Unix) from the `(install dir)/samples/CustomDisplay/` directory.

Simply install the resulting JAR file into Visual JavaScript, and drag the component to the page; Visual JavaScript will use the CircleVisual component to draw a custom appearance for the component as it appears on the page within Visual JavaScript.

When the page is previewed, the JSB adds HTML to the page which makes reference to Circle.gif (which is a snapshot of the image drawn by CircleVisual, in this simple example).

( return to the top of the page )