Quick Start

To help you get up and running using the com.ms.wfc.html package to implement Java and DHTML, here are the basic steps you can perform to create a simple DHTML project and add your own dynamic behavior to it. While this is by no means the entire story, it sets the stage for the rest of this topic and for the samples. There are five basic steps when using the com.ms.wfc.html package:

  1. Create a new project by choosing New Project from the File menu and selecting Code-behind HTML from the Web Pages category.

    This generates a project containing a class called Class1, which extends DhDocument. This class represents the dynamic HTML document. You add initialization code to its initForm method to control the document’s contents and behavior.

    You can now extend the behavior of your document by doing the following:

  2. Create new elements (such as DhButton) or create element objects that represent existing elements in the document (on the HTML page).

  3. Hook event handlers into some of your elements.

  4. In your Class1.initForm method, add the new elements using the setNewElements method, and bind any existing elements using the setBoundElements method.

  5. Write the event handler methods you hooked up in step 3.

Your document class will look something like this:

import com.ms.wfc.html.*;
import com.ms.wfc.core.*;
import com.ms.wfc.ui.*;

public class Class1 extends DhDocument
{
   public Class1()
   {
       initForm();
   }


   // Step 2: create objects to represent a new elements…
   DhButton newElem = new DhButton();
   // … as well as elements that already exist in the HTML page.
   DhText existElem = new DhText();
        
   private void initForm( )
   {
      // Set properties to existing elements and newly added elements.
      newElem.setText(“hello world”);
      existElem.setBackColor(Color.BLUE);

      // Step 3: hook up an event handler to your object
      newElem.addOnClick(new EventHandler(this.onClickButton));

      // Step 2: create an object to represent an existing element
      existElem = new DhText();

      // Step 4: call setNewElements with an array of new elements
      setNewElements(new Component[] { newElem });

      // Step 4: call bindNewElements with an array of existing elements
      setBoundElements(new DhElement[]{ existElem.setBindID("Sample") });
   }
        
   // Step 5: implement your event handler
   private void onClickButton(Object sender, Event e) {
           existElem.setText("Hello, world");
   }
}

The Java portion of the exercise is complete. The other part is the HTML code. The following example shows a simplified version of the HTML document generated by the Code-behind HTML project template. There are two HTML elements that connect this HTML to the code in your project:

<HTML>
<BODY>
<OBJECT classid="java:com.ms.wfc.html.DhModule" 
        height=0 width=0 ... VIEWASTEXT>
<PARAM NAME=CABBASE VALUE=MyProject>
<PARAM NAME=CODECLASS VALUE=Class1>
</OBJECT>

<span id=Sample></span>
<!-- Insert your own HTML here -->

</BODY>
</HTML>

Open Internet Explorer 4.0, point it at your HTML file, and you can see your application run.