Creating a Dynamic HTML Application

See Also

WFC wraps the Dynamic HTML (DHTML) object model that is implemented in Internet Explorer 4.0. When you use the Code-Behind HTML template to create a DHTML application, your Java class extends com.ms.wfc.html.DhDocument, and is hosted on an HTML page as a COM object. Using the other classes in the com.ms.wfc.html package, you can manipulate elements on the HTML page.

Note   Before you use the following procedure to create a DHTML application, close any projects that you may already have open. (On the File menu, click Close All.)

To create a DHTML application

1. On the File menu, click New Project.
   
   
2. On the New tab, expand the Visual J++ Projects folder and click Web Pages. Then select the Code-Behind HTML icon.
   
   
3. In the Name box, enter a name for your project.
   
   
4. In the Location box, enter the path where you want to save your project, or click Browse to navigate to the folder.
   
   
5. Click Open. A collapsed view of your project appears in Project Explorer.
   
   
6. In Project Explorer, expand the project node. A Java source file with the default name of Class1.java has been added to your project, as well as an HTML page named Page1.htm.

Note   Renaming the Class1.java file does not rename the associated class in the source code, and vice versa. You must manually change all instances of the old name. (Note that you can create an empty project and then add a class with the Class template. This two-step process allows you to name the class before it is created; however, the Class template does not provide the basic code framework for a DHTML class.)

Viewing Code in the Text Editor

The Code-Behind HTML template already provides some sample functionality. You can view this sample code in the Text editor.

To view the sample code in your DHTML class

• To view the source code, double-click Class1.java in Project Explorer.

  The initForm method is used for initializing your code, including binding elements in your class to existing elements on the HTML page, and creating new elements. The sample implementation binds a DhText object called boundText to an existing element on Page1.htm (<SPAN id=bindText>Bound Text</SPAN>). This is accomplished by first calling boundText.setID("bindText") and then calling setBoundElements. The sample implementation also adds a new DhText object to the document using the setNewElements method.

For information about modifying your code in the development environment, see Editing Code.

Building and Running the DHTML Application

Because Class1 is to be hosted as a COM object on an HTML page, your project must be packaged into a .cab file. By using the Code-Behind HTML template, a .cab file named ProjectName.cab is automatically created when you build your project.

Once you have built your project, you can launch the associated HTML page from the development environment or simply open the HTML page in your browser.

To build and run your DHTML application

1. On the Build menu, click Build. Any compilation errors or messages appear in the Task List. (Double-clicking an error in the Task List moves the insertion point in the Text editor to the error.) Correct the errors and rebuild your application.
   
   
2. To run the applet from the development environment, click Start on the Debug menu. Internet Explorer is launched and Page1.htm displays the elements from your DHTML class.

For more information about using DHTML, see Programming Dynamic HTML in Java.