macdevcenter.com
oreilly.comSafari Books Online.Conferences.

advertisement

AddThis Social Bookmark Button

Applying "Digital Hub" Concepts to Enterprise Software Design, Part 4
Pages: 1, 2, 3, 4, 5, 6

Create a User Interface with HTML

Next, we are going to create a web page interface that will contain a link to download the XML and will later contain an interface for uploading XML. WebObjects has already created a page called "Main" for our default web page. We are going to edit the HTML as follows:

  1. Open Main.html in Xcode. You can find it in the following location in the left panel of Xcode: WeatherHub -> Web Components -> Main -> Main.wo -> Main.html.

  2. Replace the existing contents of Main.html with the following:


<!DOCTYPE html PUBLIC "-//W3C//DTD html 3.2//EN">
<html>
    <head>
        <title>WeatherHub</title>
    </head>
    <body bgcolor="#FFFFFF">
        <h1>Weather Hub</h1>
        <h3>Download Weather Data</h3>
        <ul>
            <li>Right click to save XML to a local disk</li>
        </ul>
    </body>
</html>
  1. Save Main.html.

This is just standard HTML. We will need to add a dynamic element in order to create a link to our displayXml component. Notice that we did not add a WEBOBJECT tag yet. Unlike the displayXml component, we are going to use the WebObjects Builder application to create the dynamic component this time. As a developer, it is up to you to either use the GUI tools supplied with WebObjects or edit the code by hand. I use both methods, depending on the specific work that I am doing.

Here are the steps for adding the dynamic link:

  1. From Xcode, launch WebObjects Builder by double clicking the Main.wo folder icon in the left panel.

  2. Highlight the text "Right click to save XML to a local disk" in WebObjects Builder. Make sure to just get the text and not the bullet point.

  3. Choose WOHyperlink from the WebObjects menu. The highlighted text will turn blue and will get a link icon at either side.

  4. Now we need to create a method that will be triggered by the link. Do this by choosing Add Action... in the Edit Source menu (it is at the lower left corner of the WebObjects Builder window).

    Now we need to create a method that will be triggered by the link. Do this by choosing Add Action... in the Edit Source menu (it is at the lower left corner of the WebObjects Builder window).
  5. In the pop-up window that's displayed, enter displayXml as the name and choose DisplayXml as the page returned. Click Add. We've just added a method to Main.java that will load the DisplayXml component in the user's browser when the method is called.

  6. To connect this new method with our WOHyperlink, drag a line from the displayXml method (in the lower left panel of WebObjects Builder) to the link icon next to the WOHyperlink that we created. A pop-up menu will appear when you release the mouse. Choose "action" to indicate that the displayXml method should be called when the hyperlink is clicked.

    To connect this new method with our WOHyperlink, drag a line from the <code>displayXml</code> method (in the lower left panel of WebObjects Builder) to the link icon next to the WOHyperlink that we created. A pop-up menu will appear when you release the mouse. Choose "action" to indicate that the <code>displayXml</code> method should be called when the hyperlink is clicked.
  7. Save your changes and go back to Xcode. Examine the Main.java, Main.wod, and Main.html files to see the changes that WebObjects Builder made to these files.

Save, build, and run your project (Apple-R). After the application compiles, WebObjects will launch a window in your browser with Main.html. You may click the link to see the XML. Please note that Safari does not display XML, so you will have to "view source" to see it, or you may right-click the link and save the file to disk. If you run your application in Internet Explorer or Firefox, it will nicely display your XML in the browser window. If there are any errors in your code, you can determine what line cause the problem by reading the stack trace.

Screenshots of Internet Explorer displaying our user interface and XML:
Screenshots of Internet Explorer displaying our user interface and XML:

Pages: 1, 2, 3, 4, 5, 6

Next Pagearrow