Creating a Static Presentation

This section shows you how to create a simple SMIL presentation that includes a text media object.

Creating the SMIL Project

To create a SMIL presentation, you start by creating a WebObjects Application project in Project Builder.

Launch Project Builder.
Choose File > New Project.
Select WebObjects Application as the project type and click Next.
Name the project, choose a location for it, and click Next.
Add the JavaWOSMIL framework. In the Choose Frameworks pane of the Assistant:
1. Click Add.
2. Navigate to /System/Library/Frameworks/JavaWOSMIL.framework.
3. Click Choose and then click Finish.

Creating a Text File and Adding It to the Project

Using a text editor, create a file containing the text "Hello, World." and save it as hello.txt in your project directory (make sure that the string ends with a space and a return character).

In Project Builder add hello.txt to the Web Server Resources group.

Select Web Server Resources in the Groups & Files list.
Choose Project > Add Files.
Select hello.txt and click Open.
Select the Web Server target and click Add.

Creating a SMIL Component

Add a new WebObjects component to the project.

Select Web Components in the Groups & Files list.
Choose File > New File.
In the New File pane of the Assistant, select Component under WebObjects, and click Next.
In the New Component pane, name the component Hello, ensure the Application Server target is selected, and click Finish.

Now prepare the component so that you can add SMIL elements to it.

Double-click Hello.wo in the Groups & Files list to open the component in WebObjects Builder.
Choose Partial Document from the pop-up menu in the Static Inspector pane of the Page Inspector window. This removes the standard HTML tags from the component.
Display the WOSMIL Palette window by choosing Window > Palette, and select the SMIL palette.
Put a WOSMILDocument element on the layout area. (You accomplish this by dragging the element from the palette onto the layout area.)
Put a WOSMILHead element inside the WOSMILDocument element.
Put a WOSMILHeadLayout element inside the WOSMILHead element.
Put a WOSMILBody element inside the WOSMILDocument element, below the WOSMILHead element.
Put a WOSMILRootLayout element inside the WOSMILHeadLayout element.

Adding the Appropriate SMIL Elements to the Component

Now you're ready to add the SMIL elements that will make up your presentation.

Put a WOSMILRegion element to the right of the WOSMILRootLayout element.
Put a WOSMILMediaObject element inside the WOSMILBody element.

Figure 3-1 shows what the Hello.wo component should look like when you're done.

Figure 3-1 Hello.wo component in WebObjects Builder

Finally, enter values for the bindings that provide information to your presentation viewer, such as the size of the window, the position of the regions within the window, and information on the media objects to be displayed.

Enter information for the WOSMILRootLayout element.
1. Select the WOSMILRootLayout element in the layout area.
2. Choose Window > Inspector to display the WOSMILRootLayout Binding Inspector window (if it's not already displayed).
3. Enter "#FFFFFF" for the bgcolor binding.
4. Enter 200 for the height and width bindings.
Enter information for the WOSMILRegion element.
1. Select the WOSMILRegion element next to the WOSMILRootLayout element.
2. Enter 75 for the height binding.
3. Enter 200 for the width binding.
4. Enter 0 for the top and left bindings.
5. Enter "Region1" for the regionID binding.
6. Enter "meet" for the fit binding.
Enter information for the WOSMILMediaObject element.
1. Select the WOSMILMediaObject element inside the WOSMILBody element.
2. Enter "hello.txt" for the filename binding.
3. Enter "app" for the framework binding.
4. Enter "text" for the mediaObjectName binding.
5. Enter "Region1" for the regionID binding.

Building and Running the Application

Now you're ready to test the application. To make things easier, you should add two build settings to the project: WOPort and WOAutoOpenInBrowser.

Display the Targets pane in Project Builder.
Select Smile in the Targets list.
Display the Executables pane.
Click Add.
Under Launch Arguments, enter the following text:
```
-WOPort 1234 -WOAutoOpenInBrowser false
```

Build and run the application by choosing Build > Build and Run. Copy the application URL to the application from the run pane.

Viewing the Presentation

Now that the application is running, you're ready to view the Hello presentation. Launch QuickTime Player, choose File > Open URL, paste the application's URL in the text field of the Open URL window, add /wo/Hello.wo to it, and click OK. (This points your player to the SMIL component you created in the previous sections instead of the default component, Main.wo.)

You should see a window similar to the one in Figure 3-2.

Figure 3-2 Hello presentation in QuickTime Player

This is the code your viewer receives:

<smil id="0.0">
    <head id="0.0.1.0.0">
        <layout id="0.0.1.0.0.1.0.0">
            <root-layout background-color="#FFFFFF" skip-content="true"
                width="200" height="200" id="0.0.1.0.0.1.0.0.1.0.0">
            </root-layout>
            <region z-index="0" skip-content="true" width="200" height="75"
                left="0" fit="meet" top="0" id="Region1">
            </region>
        </layout>
    </head>
    <body id="0.0.1.1.0">
    <text src="http://ebruce:1234/cgi-bin/WebObjects/Smile.woa/ wr?wodata=%2FUsers%2Fernest%2FWebObjects%2FProjects%2FSMIL%2FSmile%2Fhello.txt"
        region="Region1" id="0.0.1.1.0.1.0.0">
    </text>
    </body>
</smil>

Notice that WebObjects generates id attributes and their corresponding values for the SMIL tags so that you don't have to come up with them. In some cases, however, you have to add an elementID binding to SMIL elements in WebObjects Builder. For example, event-based presentations may require references between media objects. In that case, you should add elementID bindings with values that can be understood at a glance. See "Creating an Event-Based Presentation" for an example of this.