| SimpleClientServer

Building the SimpleClientServer Components

The purpose of this sample is to illustrate how a set of related components can be packaged together (along with icons and documentation) in a single JAR. A single batch file is used to refresh the documentation (built using JavaDoc, or -- in this case -- JSBDoc for JavaScript Beans), and to place everything into a single JAR with a manifest that notes which files are Components:

>     Manifest-Version: 1.0

>     Name: netscape/samples/simple/LayerController.jsb
>     Java-Bean: True

>     Name: netscape/samples/simple/ServerEcho.jsb
>     Java-Bean: True

Individual components can also specify icons to be displayed in the design-time environment. For example, the following line in `netscape/samples/simple/LayerController.jsb` associates "n_s_s_LayerController32.gif" as the large (32x32) icon to be displayed, and "n_s_s_LayerController.gif" / "n_s_s_LayerControllerSelected.gif" as the small (16x16) regular and selected icons:

       /**
        * n_s_s_ stands for netscape/samples/simple...
        * allows icon to sit in root of jar
        * while providing reasonable namespace-collision protection
        */
       <JSB_ICON ICONNAME="n_s_s_LayerController">

ICONNAME="n_s_s_LayerController"
n_s_s_LayerController32.gif | n_s_s_LayerController.gif | n_s_s_LayerControllerSelected.gif

In addition, Components allow the specification of a Help URL (see CustomProperty for an example of a Java component with a BeanInfo that specifies a Help URL). The following JSB Descriptor in the LayerController component provides a Help URL (which, in this case, is simply the automatically generated documentation created by the JSBDoc tool).

       /**
        * The LayerController can show and hide a layer,
        * and supports multiple layer controller instances per page...
        */
       <JSB_DESCRIPTOR
            NAME="netscape.samples.simple.LayerController"
            DISPLAYNAME="Layer Controller"
            HELP_URL="netscape/samples/simple/LayerController_jsb.html">

Since the component is packaged in a JAR file, it can include everything the components need, including documentation and icons:

- netscape/samples/simple/LayerController_jsb.html
  Documentation for the LayerController Component
- netscape/samples/simple/LayerController.jsb
  Source for the LayerController Component
- netscape/samples/simple/ServerEcho_jsb.html
  Documentation for the ServerEcho Component
- netscape/samples/simple/ServerEcho.jsb
  Source for the ServerEcho Component
- netscape/samples/simple/pagelet.html
  A Pagelet with a form for display in LayerController, to be processed by ServerEcho.
- n_s_s_LayerController32.gif
  32x32 icon
- n_s_s_LayerController.gif
  16x16 icon
- n_s_s_LayerControllerSelected.gif
  16x16 Selected icon

The Component's pieces are assembled into a JAR file using a batch file / shell script (depending on your platform):

- BuildSimple Script

Wiring the SimpleClientServer Sample

Open up Visual JavaScript (VJS). Create a new project named "SimpleClientServer". Import the jar `SimpleClientServer.jar` from the `CDK_INSTALLDIR/samples/SimpleClientServer/` directory to the palette (see the ShowText example and the VJS documentation for more information about importing components from JAR files).

- Create a new blank page; which will be called "Page1.html" by default. Open the page, and drag a LayerController object onto the page.
- Press enter and then add two buttons from the "Form" Palette Tab (a form will be created automatically the first time a button is added).
- By double-clicking on the first button, use the Inspector to set the Change the first button's Label to Show.
- Do the same for the second button, this time using a label of Hide.

- Drag the connection point for the first button to the layer controller component. This brings up the Connection Builder.
- Wire a connection to the LayerController's Show() method using the Script Builder, which is brought up by pressing the "Script Builder" button.
- Press the "Apply" then the "Done" buttons in the Connection Builder after pressing OK in the Script Builder.
- Do the same thing for the other button, wiring it to the LayerController's Hide() method.

- Notice that when the LayerController or ServerEcho components are added to a page, several new files are added to your project. Under Pages in the Project window, open the page labelled "`netscape/samples/simple/pagelet.html`".
- This page contains a pre-built form. Drag the connection point from the form to the body of Page1.html. This allows the form response elements to be available to Server components on Page1.html through the request object.

- Place the cursor just after the form containing the buttons and hit "enter". Add a ServerEcho component to the page; this is a server-side JavaScript Bean.
- Double click on the ServerEcho component on the page to bring up the Inspector, and use the "=" button to bring up the Expression Editor window.
- Set the userAge property and userName property to their equivalents in the "request" object which contains attributes from the form located in "netscape/samples/simple/pagelet.html".

- Double click on the form and set its "Action" to "/NAMEOFPROJECT/Page1.html" (for example, "`/SimpleClientServer/Page1.html`"). This causes the Form's Submit to redirect the results to Page1.html within the application after the application is deployed.

- To make the LayerController work even after the browser is resized, add a Client-JavaScript component (from the HTML Palette Tab) to Page1.html.
- Double click on the component, and click on the "..." button in the Inspector to bring up the Property Editor Window. Paste in the following code:

      // Add this code to any page with layers
      window.captureEvents(Event.RESIZE);
      window.onResize = resetLocation;

      function resetLocation () {
      	window.location.reload();
      }

- Deploy the application to a server (see Visual JavaScript documentation -- make sure the default page is set to Page1.html), and run the application.
- A copy of the completed project is located in the `project` directory under `CDKINSTALL/samples/SimpleClientServer`

Congratulations! This example shows how easy it is to build a client / server Web Application using pre-built (or custom) re-usable components!.

Note: For more sample components that use Layers, take a look at the Dialog Widget example.

( return to the top of the page )