## My Google Chrome app book is now available!

I have recently completed a new book titled “Building Browser Apps with Google Chrome”. The book focuses on how to develop packaged apps, one of several types of applications that can be used by the Google Chrome browser. For more information, see the book announcement post, or go ahead and checkout the HTML version of the book (it’s free!).

## Sort Your Data Using Javascript

Introduction

Javascript has basic sorting built into the language, but it also has the flexibility to do any kind of sorting you want. Read on and find out more about how you can customize your sorting tasks with Javascript.

Basic sorting

The Javascript array sort method performs an alphabetic sort of an array. Here are some examples:

var wordList = new Array( "red", "green", "blue");
wordList.sort();

Printing wordList gives the list {“blue, “green”, “red”} (see Example 1 web page).

var wordList2 = new Array("tiger", "cat", "dog");
wordList2.sort();

Printing wordList2 gives the list “cat”, “dog”, “tiger” (see Example 2 web page).

Sorting using comparison functions

To perform sorting of an array using some other method besides alphabetical sorting, a comparison function must be passed to the sort method. This function can be included in the sort method as an unnamed function, or it can be a separate named function which can be called by the sort method. Here is an example of a template for a separate function:

function numberTest (a, b) {

}
var numberList = {5, 4444, 333, 22222, 11};

numberList.sort(numberTest);

The sort method calls the function numberTest, working through all of the elements in the array. The arguments a and b in the function represent two elements in the array. The body of the function should return one of three values:

1. a goes before b = return a negative number
2. a goes after b = return a positive number
3. a is the same as b = return a zero

A simple comparison function for a numeric sort would be:

function numberTest (a, b) {
return a - b;
}

This function will perform a numeric sort in increasing order. Printing the numberList array after sorting will display the following:

5 11 333 4444 22222 (see Example 3 web page).

To perform a numeric sort in decreasing order, the line within the function should be changed to the following:

return b - a;

Printing the numberList array after sorting will display the following:

22222 4444 3333 11 5 (see Example 4 web page).

To perform a reverse alphabetic sort, the comparison function must explicitly return a -1, 0, or 1 depending on the alphabetic order. Returning the value of the direct comparison as for numeric sorting will not work. An example comparison function is shown below:

function reverseAlphabeticTest(a, b) {
if (a < b) return 1;
if (a > b) return -1;
return 0;
}

(see Example 5 web page).

Sorting lists of objects

Next, let us examine sorting an array of objects, where each object has two fields. A set of objects could be as follows:

var testObject1 = {item: 5, note: "aaa"};
var testObject2 = {item: 4, note: "bbb"};
var testObject3 = {item: 3, note: "ccc"};
var testObject4 = {item: 2, note: "ddd"};
var testObject5 = {item: 1, note: "eee"};

These object can then be added to an array as follows:

var testArray = new Array();  // Create a test array

testArray[testArray.length] = testObject1;
testArray[testArray.length] = testObject2;
testArray[testArray.length] = testObject3;
testArray[testArray.length] = testObject4;
testArray[testArray.length] = testObject5;

where the length property of the array is used as the index (it increases as more objects are added to the array).

The numeric sort comparison function used for examples 3 and 4 can be reused for sorting on any field in the object, but the field must be specified using a dot structure as shown below:

function compareItems (a, b) {
return a.item - b.item;
}
testArray.sort(compareItems);

Printing the list of items and notes in the array after sorting gives the following:

Items: 1 2 3 4 5
Notes: eee ddd ccc bbb aaa
(see Example 6 web page).

As shown before, the order can be reversed by reversing the order of the elements in the comparison function.

Finally, let us look at how a comparison function can be more complex. This example will assume that Javascript is being used to read RSS feeds using the XMLHttpRequest function, and that the news items in the RSS feed need to be sorted by the pubDate element for use in a “River of News” RSS reader application. The application has already extracted the news items from RSS feeds as individual objects in an array with the following fields for each RSS item: title, link, description, pubDate, and guid. An example object could be as follows:

var testObject1 = {title: "Star City",
description: "How do Americans get ready to work with Russians aboard the space station?",
pubDate: "Tue, 03 Jun 2003 09:39:21 GMT",
guid: "http://liftoff.msfc.nasa.gov/2003/06/03.html#item573"};

To perform a sort on pubDate, the text string describing the publication date of the item needs to be converted to a number for comparison. We can use the parse method included with the Javascript Date object to create the following comparison function:

function comparepubDates(a, b) {
var pubDateValue1 = Date.parse(a.pubDate); // Get milliseconds for date/time string
var pubDateValue2 = Date.parse(b.pubDate); // Get milliseconds for date/time string
return pubDateValue1 - pubDateValue2;
}

This function will parse the pubDate field and convert the date string to a value in milliseconds, then use that value for the comparison to sort the objects.

(see Example 7 web page).

Summary

Javascript can sort arrays of data and arrays of objects in flexible ways. Use these examples to start sorting your data today!

References

RSS specification – hosted at Harvard University

Stack Overflow – discussion on sorting of Javascript objects

## Getting started with Javascript

When I start to learn a new language or framework, creating a small application really helps accelerate the learning process. Using the work I did for a MacTech article on test-driven development, I created a simple number guessing game as a Javascript web application (game page is here). I also used the YUI 2 YUITest testing framework to check out my Javascript functions as I developed them (test page is here). My next steps with this will be to try creating some browser extensions using this game as a starting point.

## Part 7 – Conclusion

This series has provided an introduction to developing Tools for the OPML Editor. However, the topics covered in this series have not even scratched the surface of the capabilities within the OPML Editor. Dave Winer has compiled a list of resources on the OPML Editor HowTo web site, but here are some additional pointers and guidance for learning the OPML Editor development environment:

I hope this series will “whet your appetite” to explore the power and possibilities of the OPML Editor. Feel free to leave comments on these weblog posts if you have questions or problems, or consult the About page for contact information. Good luck!

• Part 1 – Installing the OPML Editor and creating a “Hello World” Tool
• Part 2 – Creating web pages and scripts
• Part 3 – Running a script from a web page
• Part 4 – Saving data in the tool database
• Part 5 – Creating an application
• Part 6 – Creating an application – Windows updates
• Part 7 – Conclusion

## Part 6 – Creating an application – Windows Updates

As mentioned in the previous part of this series, some additional applications and Tool changes are required to support calling the Delicious API for Windows users. The following steps were followed on a ASUS EeePC 1000HD running Windows XP.

Step 1 – cURL installation and setup

Download a Windows version of cURL with SSL support. You can use the Download Wizard or pick one of the Win32 – Generic versions with SSL (this version was used in development of this tutorial). Once you have downloaded a version, unzip the file and copy the curl.exe file to a directory for use. In testing of this tutorial, curl.exe was copied to C:\bin. Next, the path C:\bin was added to the PATH environment variable. To do this, perform the following steps:

• Click Start, then double-click on Control Panel, then double-click on System (opens System Properties window)
• Click on Advanced tab, then click on Environment Variables button (opens Environment Variables window)
• In System variables area of window, scroll down and click on the Path variable entry, then click on the Edit button (opens Edit System Variable window)
• Click in the Variable value text box, press the End button to move the cursor to the end of the field, then enter ;C:\bin
• Click OK (closes Edit System Variable window)
• Click OK (closes Environment Variables window)
• Click OK (closes System Properties window)
• You may have to perform a restart of the PC for the change to take effect.

Step 2 – Other SSL support installation and setup

As mentioned at the bottom of the cURL download page, the OpenSSL binaries/DLLs are required for the cURL versions with SSL support. The OpenSSL binary and Visual C++ Executables from Shining Light Software should be installed (the versions installed for this series were Win32OpenSSL_Light-0_9_8k.exe and vcredits_x86.exe). Next, copy cacert.pem from C:\Program Files\OpenSSL\bin to C:\bin where the cURL executable file was copied, and then copy cacert.pem to curl-ca-bundle.crt in that directory. The Windows version of cURL will automatically look for a CA certs file named ‘curl-ca-bundle.crt’, either in the same directory as curl.exe, or in the Current Working Directory, or in any folder along your PATH. This is why cacert.pem needs to be copied and renamed as curl-ca-bundle.crt (see this reference for more information). As mentioned in step 1 above, a restart of the PC may be required.

Step 3 – Windows updates for MyDeliciousTool

After installing the cURL and SSL tools, the MyDeliciousTool Tool needs some modifications to be able to call the Delicious API using cURL. The Windows version of the OPML Editor supports the Windows Component Object Model (COM) interface. The curlDelicious script from part 5 will be modified to call cURL using a COM command shell object. In the Macintosh version of the MyDeliciousTool, the OPML Editor was able to receive the response from the cURL application and assign it directly to a string. In the Windows version, the output from cURL will be written to a file. The contents of the file will then be read and assigned to the string.

To be able to create the COM command shell object, a Visual Basic script will be used. This will be created using the outline object type. From the Window menu, select the “MyDeliciousTool.root” menu item. Next, press the Control key and double-click on the black triangle next to the MyDeliciousToolSuite entry in the table. A new window will open with the MyDeliciousToolSuite table. Click in the table, then go to the Table menu and select the New Outline menu item. A dialog box will appear asking for the name of the new outline. Type the name “createCommandPrompt” without quotes and click OK. A new window will open that looks similar to a script. Enter the following text into the outline:

```Sub Main (myCommand)
Dim shell

Set shell = CreateObject ("Wscript.Shell")

shell.run "curl " & myCommand

Set shell = Nothing
End Sub```

The script should appear as follows:

Next, update the curlDelicious script in the MyDeliciousToolSuite table as follows:

```on curlDelicious ()
local (s, s1, curlCommand)
local (scriptCode = string (MyDeliciousToolSuite.createCommandPrompt))
new (tableType, @MyDeliciousToolData.userdata.apiResponseCompile)
s = "-o C:\test.txt https://" + MyDeliciousToolData.userdata.username + ":"
s = s + "@api.del.icio.us/v1/posts/recent?count="
s = s + MyDeliciousToolData.userdata.bookmarks
result = com.callScript (scriptCode, "VBScript", "Main", {s})
wp.newTextObject (s1, @MyDeliciousToolData.userdata.apiResponse)
xml.compile (s1, @MyDeliciousToolData.userdata.apiResponseCompile)```

The rest of the logic from part 5 of this series remains the same.

To view Delicious bookmarks, make sure that you have entered the username and password for your Delicious account and that you have set the number of bookmarks to retrieve (it must be less than 100). Go to the main page of the application (http://127.0.0.1:5335/MyDeliciousTool/) and click on the Get Bookmarks link. Within a few seconds you should see a display of the bookmarks you have retrieved. Here is the bookmark display from the example XML shown in part 5 of this series:

The following links go into more detail on this part of this series.

• COM Client – Describes COM client support built into Frontier, which is the kernal of the OPML Editor.

• Part 1 – Installing the OPML Editor and creating a “Hello World” Tool
• Part 2 – Creating web pages and scripts
• Part 3 – Running a script from a web page
• Part 4 – Saving data in the tool database
• Part 5 – Creating an application
• Part 6 – Creating an application – Windows updates
• Part 7 – Conclusion

## Part 5 – Creating an application

In this part of this series, an OPML Editor Tool will be developed to interact with the Delicious social bookmarking service. You will need to have an active Delicious account with several entries to be able to use this application.

Delicious supports an Application Program Interface (API) which allows users of the service to get information on their bookmarks. Here are some requirements for a simple use of the recent bookmarks API.

Requirements

• Ability to change default number of bookmarks to retrieve
• Ability to call Delicious API and retrieve bookmarks
• Ability to display retrieved bookmarks

From these requirements, a user interface, data design, and logic design for the application could be as follows:

User Interface Design

• Welcome page introducing the application and providing links to pages for viewing last x bookmarks, for updating username/password, and for updating default number of bookmarks to retrieve
• Page for updating default number of bookmarks to retrieve
• Page for confirming that default number of bookmarks has been updated
• Page for viewing last x bookmarks

Data Design

The application needs to save the following data:

• Number of bookmarks to retrieve
• Data received from call to Delicious API

Logic Design

The application should be able to call the Delicious API for recent bookmarks, get the bookmark data, save the data to the Tool database, and process the data to show the description for the bookmark and the URL. This logic should be activated by the web page that allows the user to view the number of recent bookmarks.

Creating the User Interface

To begin, create a new Tool database for the application. As covered in part 1 of this series, to create a new Tool, click on the Tools menu in the OPML Editor application, then select “New Tool…”. A dialog box will appear asking you to name the tool, and suggesting the name “untitled.root”. Enter the name “MyDeliciousTool.root” in the dialog box and click the OK button. The OPML Editor will then create a new tool and store it in the Guest Databases/apps/Tools folder within the OPML folder. After several seconds, a new window will then open:

This example will start with the initial web pages for the user interface. As mentioned in part 1 of this series, the website table contains the web page data for the Tool. To view the website table for MyDeliciousTool, go to the Window menu and select the “MyDeliciousTool.root” menu option. After selecting the Tool, a window will open showing a list of tables making up the Tool. Hold down the Apple or Control key and double-click on the black triangle next to the text “MyDeliciousToolWebsite”. The following window will appear:

The table element “index” will be used to display the welcome page for our application. Double-click on the gray triangle to open the wp text object. The following window will appear:

Replace the text in the window with the following text:

```#title "MyDeliciousTool Home Page"
<br>

<ul>
<li><a href="updatebk.html">Update Bookmarks</a> - Change the number of Delicious bookmarks to retrieve</li>
<li><a href="bookmarks.html">Get Bookmarks</a> - Get bookmarks from your Delicious account and display them.</li>
</ul>```

Close the window, then go to http://127.0.0.1:5335/MyDeliciousTool/ in a browser window. The home page should appear as follows:

Open the “updatepw” wp text object in the MyDeliciousToolWebsite table to view the text. You can open the entry by double-clicking on the black triangle next to the entry name. Edit the text to match the following text:

```#title "Update Username and Password"
<form method="post" action="confirmpw">
<p>
</p>
<p>
</p>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100" cols=2>
<TR ALIGN="CENTER">
<TD><INPUT TYPE="submit" VALUE="Submit"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD>
</TR>
</TABLE>
</form>```

The main changes from the login entry are the title text, the first sentence of the page, and the action attribute in the form line (changing “confirm” to “confirmpw”). Next, open the “updatebk” entry and edit the text as follows:

```#title "Update Number of Bookmarks"
<p>Enter the number of bookmarks to retrieve from your Delicious account.</p>
<form method="post" action="confirmbk">
<p>
<INPUT TYPE=text NAME="bookmarks" SIZE=50>
</p>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100" cols=2>
<TR ALIGN="CENTER">
<TD><INPUT TYPE="submit" VALUE="Submit"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD>
</TR>
</TABLE>
</form>```

The main changes from the login entry are the title text, the first sentence of the page, the action attribute in the form line (changing “confirm” to “confirmbk”), changing the first field from “username” to “bookmarks”, and deleting the field for “password”.

To test these entries, go to http://127.0.0.1:5335/MyDeliciousTool/ in a browser window, then click on the links for updating the username/password and updating the number of bookmarks. You should see the following web pages:

As in part 4 of this series, when the user enters the information in the text fields for these pages and clicks the “Submit” button, a confirmation page will appear to let the user know that the data has been updated. The confirmation page script from part 4 will be reused to create the confirmation pages for the MyDeliciousTool application. Bring the MyTestToolWebsite window to the front, select the “confirm” entry, then go to the Edit menu and select the Copy menu item. Bring the My DeliciousToolWebsite window to the front, then go to the Edit menu and select the Paste menu item. You should see the “confirm” entry appear in the table. Go to the Edit menu and select Paste again to make another copy. A dialog box will appear saying “An item named confirm already exists in this location”. Click on the “Duplicate” button to create a copy of the confirm entry, which will be called “confirm #1″. To rename the entries, click on the name, which will highlight the name of the table entry, then type the new name. The names should be changed to “confirmpw” and “confirmbk” (without quotes) to match the links in the web pages that were just created. The website table should appear as follows:

Open the “confirmpw” entry in the MyDeliciousToolWebsite table to view the script. You can open the entry by double-clicking on the black triangle next to the entry name. Edit the script to match the following text:

```local (pta = html.getpagetableaddress ());
pta^.flShowTitle = true; //the page looks better with a title

The main change from the confirm entry is the name of the script being called. Next, open the “confirmbk” script and edit the text as follows:

```local (pta = html.getpagetableaddress ());
pta^.flShowTitle = true; //the page looks better with a title
return (MyDeliciousToolSuite.bookmarkConfirmation ())```

The main changes from the confirm entry are the title text and the name of the script being called.

The confirmation script from part 4 of this series will be reused to complete the confirmation pages for the MyDeliciousTool application. Bring the MyTestTool window to the front, Hold down the Apple or Control key and double-click on the black triangle next to the text “MyTestToolSuite”. This will open the MyTestToolSuite table in a new window. Next, click on the ConfirmationScript entry in the table to select it (scroll down to find the entry if you need to), then go to the Edit menu and select Copy. Bring the MyDeliciousTool window to the front and double-click on the black triangle next to the “MyDeliciousToolSuite” entry. This will open the MyDeliciousToolSuite window. When you have selected the window, click on an item in the table, then go to the Edit menu and select Paste. You should see the “ConfirmationScript” entry appear in the table. Go to the Edit menu and select Paste again to make another copy. A dialog box will appear saying “An item named login already exists in this location”. Click on the “Duplicate” button to create a copy of the ConfirmationScript entry, which will be called “ConfirmationScript #1″. To rename the entries, click on the name, which will highlight the name of the table entry, then type the new name. For our application, the names should be changed to “passwordConfirmation” and “bookmarkConfirmation” (without quotes) to match the script names given above. The MyDeliciousSuite window should appear as follows:

Next, the scripts need to be updated to change the script names and to access data in the MyDeliciousTool data tables. Make the following updates to the passwordConfirmation and bookmarkConfirmation scripts:

```on passwordConfirmation()
local (s1, s2, s3)
new (tabletype, @pta^.searchArgTable)
new (tableType, @MyDeliciousToolData.userdata)
webserver.parseargs (pta^.searchargs, @pta^.searchArgTable)
if pta^.method == "POST"
new (tabletype, @pta^.postArgs)
webserver.parseArgs (pta^.requestBody, @pta^.postArgs)
s3 = s3 + "<br><br>Return to the <a href=" + "\"" + "http://127.0.0.1:5335/MyDeliciousTool/"+ "\""
return (s3)```
```on bookmarkConfirmation()
local (s1, s2)
new (tabletype, @pta^.searchArgTable)
new (stringType, @MyDeliciousToolData.userdata.bookmarks)
webserver.parseargs (pta^.searchargs, @pta^.searchArgTable)
if pta^.method == "POST"
new (tabletype, @pta^.postArgs)
webserver.parseArgs (pta^.requestBody, @pta^.postArgs)
s1 = pta^.postArgs.bookmarks
MyDeliciousToolData.userdata.bookmarks = s1
s2 = "The number of bookmarks is " + MyDeliciousToolData.userdata.bookmarks
s2 = s2 + "<br><br>Return to the <a href=" + "\"" + "http://127.0.0.1:5335/MyDeliciousTool/"+ "\""
return (s2)```

As in the MyTestTool tool, these scripts will parse data from the OPML Editor web server when the user clicks on the button to enter the username/password combination or the number of bookmarks to retrieve. The scripts will then clear the table entries in the database, store the new values, then echo those values to the web browser. To test these updates, go to http://127.0.0.1:5335/MyDeliciousTool/ in a browser window, then click on the “Update Passwords” link. You should see the following web page:

Now, check to see that the values entered on the web pages are in the tool data table. Bring the MyDeliciousToolData window to the front, then select the username entry in the table and double-click on the black triangle. You should see the new entries for your username, password, and number of bookmarks to be retrieved (the following picture is an example):

The final function to implement is to retrieve some bookmarks from your Delicious account. To do this, the OPML Editor will need to make a call to the Delicious API. This API requires a HTTPS call, which is not supported natively in the OPML Editor. However, the OPML Editor can call other programs or system functions to perform tasks. The cURL application will be used to perform the HTTPS call. The OPML Editor will parse the XML response from the API and display the bookmarks in the web browser. On the Macintosh, this can be accessed using a system command. On Windows, the cURL application will need to be installed if it is not present. Both Macintosh and Windows users should follow the rest of the instructions in this part of the series, but Windows users will need to wait to implement the changes in part 6 of this series before testing.

First, a script is needed to call the Delicious API and store the response. This script will be stored in the MyDeliciousTool Suite sub-table, and the response from the API will be stored in the MyDeliciousToolData sub table. To create the script, bring the MyDeliciousTool.root window to the front, then click on the triangle next to the MyDeliciousToolSuite entry in the tool table to select the sub-table. Next, hold down the Apple or Control key and double-click on the entry to open the MyDeliciousToolSuite table in another window. The following window should appear:

To add a script to the table, click in the table, then go to the Table menu and select the “New Script” entry. A dialog box will appear asking for the name of the script. Enter the text “curlDelicious” without quotes and click the OK button. A new script window will open as shown below:

Enter the following text into the script window:

```on curlDelicious ()
local (s, curlCommand)
s = "curl -u " + MyDeliciousToolData.userdata.username + ":"
s = s + " https://api.del.icio.us/v1/posts/recent?count="
s = s + MyDeliciousToolData.userdata.bookmarks
curlCommand = s
s = sys.unixShellCommand (curlCommand)
wp.newTextObject (s, @MyDeliciousToolData.userdata.apiResponse)
xml.compile (s, @MyDeliciousToolData.userdata.apiResponseCompile)```

This script first creates a text string with the command for cURL. Notice how the data from the MyDeliciousToolData table can be retrieved by simply giving the name of the table path down to the cell containing the data. Next, the command string is passed to the cURL application using an OPML Editor command to tell the Macintosh to treat this as a command being entered at the command line. The response from cURL is stored as a string in the variable s. The response from the Delicious API is then stored in a new element in the MyDeliciousToolData table. Again, notice how the new element’s name is defined by a path in the table. Finally, an OPML Editor command is used to read the XML response from the Delicious API and store it in a table for further processing.

If you have completed entering the earlier scripts for adding your Delicious username and password, and have entered the username/password for your account, and have entered the number of bookmarks to retrieve, you can test this script in a standalone way. To do this test, double-click on the triangle next to the “on curlDelicious()” line to collapse the outline. Next, add another line with the text “curlDelicious()”. Click on the Compile button, then click on the Run button in the script window, then go to the userdata table and look at the apiResponse and apiResponseCompile entries. Make sure to remove the call to curlDelicious before moving on with this example.

Here is an example of the XML received from the Delicious API that was stored in the apiResponse entry in the table:

```<?;xml version="1.0" encoding="UTF-8"?>
<posts user="andysylvester" tag="">
<post href="http://www.frontierkernel.org/" hash="07aaaacf8d979a61f5d4cfecd4813f18" description="Frontier Kernel Project" tag="userland frontier" time="2007-11-28T07:14:39Z" extended="Home page for the open-source version of the Frontier scripting/development environment originally developed by UserLand Software."/>
<post href="http://www.shinywhitebox.com/home/home.html" hash="5f8975874dfb433b4ee8cedbb0610fc7" description="iShowU Home Page" tag="mac software screencast screencasting" time="2007-11-28T07:12:33Z" extended="This is a new Mac OS X application for capturing on-screen video for screencasts and other applications."/>
</posts>
<!-- fe02.api.del.ac4.yahoo.net uncompressed/chunked Tue Jul 14 06:38:59 PDT 2009 -->```

When the xml.compile command is executed by the OPML Editor, it structures the XML into a table as follows:

Next, the results from this script need to be displayed. To do this, another script will call the curlDelicious script and create a web page displaying the bookmarks within an HTML table. As before, this script will be in the MyDeliciousToolSuite table. Bring this table to the front, click within the table, then go to the Table menu and select the “New Script” item. At the dialog box prompt, enter “displayBookmarks” without quotes, then click the OK button. A new script window will appear as follows:

Enter the following text into the script window:

```on displayBookmarks ()
MyDeliciousToolSuite.curlDelicious()
for x = 1 to MyDeliciousToolData.userdata.bookmarks
description = xml.getAttributeValue(myList[x], "description")

The final step in adding this feature is to connect the web page link to these scripts. As was done for the username/password and bookmark functions, the web page will call a script to display the data from the Delicious API call. The confirmpw script willl be used as a starting point for this script. Bring the MyDeliciousTool.root window to the front, select the MyDeliciousToolWebsite entry, then hold the Apple or Control key down and double-click on the black triangle for the MyDeliciousToolWebsite entry. A window will open containing the MyDeliciousToolWebsite table as follows:

Select the confirmpw script entry, then go to the Edit menu and select Copy, then go to the Edit menu and select Paste. A dialog box will appear saying “An item named confirmpw already exists in this location”. Click on the “Duplicate” button to create a copy of the confirmpw script, which will be called “confirmpw #1″. To rename the entry, click on the name, which will highlight the name of the table entry, then type “bookmarks” without quotes. Double-click on the bookmarks item to open the script, then edit it to appear as follows:

```local (pta = html.getpagetableaddress ())
pta^.title = "Display Delicious Bookmarks"
pta^.flShowTitle = true; //the page looks better with a title
return (MyDeliciousToolSuite.displayBookmarks ())```

To view the bookmarks, make sure that you have entered the username and password for your Delicious account and that you have set the number of bookmarks to retrieve (it must be less than 100). Go to the main page of the application (http://127.0.0.1:5335/MyDeliciousTool/) and click on the Get Bookmarks link. Within a few seconds you should see a display of the bookmarks you have retrieved. Here is the bookmark display from the example XML shown earlier:

For Windows users of the OPML Editor, some additional steps are needed to be able to complete the MyDelicious Tool. First, cURL and several additional applications and files need to be installed on your computer. Next, some setup is required to support https transfers. Finally, some changes will be required for the scripts used in the Tool. These steps will be covered in the next part of this series.

The following links go into more detail on this part of this series.

• XML-Database – This page walks you thru techniques for managing XML-structured information in the OPML Editor object database.

• Part 1 – Installing the OPML Editor and creating a “Hello World” Tool
• Part 2 – Creating web pages and scripts
• Part 3 – Running a script from a web page
• Part 4 – Saving data in the tool database
• Part 5 – Creating an application
• Part 6 – Creating an application – Windows updates
• Part 7 – Conclusion

## Part 4 – Saving data in the tool database

The earlier parts of this series demonstrated how to create a Tool (mini-application) for the OPML Editor, how to create a web page display within the Tool, and how to use scripts to create content within web pages. This part of the series will show how to collect data entered into a web page and save it in the Tool database for later use. This example will show how to create a web page form asking for a username and password, how to save the form data in the Tool database, then extract the data from the Tool database for display.

To begin, create a new wp text object in the MyTestToolWebsite table for the text of the web page form. To view the website table, go to the Window menu and select the “MyTestTool.root” menu option. If you have not created this Tool, go back to part 1 of this series and create the MyTestTool Tool. After the Tool is selected, a window will open showing a list of tables making up the Tool. Hold down the Apple or Control key and double-click on the black triangle next to the text “MyTestToolWebsite”. The following window will appear:

Click in the table, then go to the Table menu item and select the New Text item. A dialog box will appear asking for the name of the new wp text table entry. Enter the name “login” without quotes and click the OK button. A new window will appear as follows:

Enter the following text to create the form web page:

```#title "Sign In"
<form method="post" action="confirm">
<p>
</p>
<p>
</p>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100" cols=2>
<TR ALIGN="CENTER">
<TD><INPUT TYPE="submit" VALUE="Submit"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD>
</TR>
</TABLE>
</form>```

Close the window, then go to http://127.0.0.1:5335/MyTestTool/login in your browser. You should see the following web page:

Now that the web form has been created, how can the data in the form be accessed? When the OPML Editor web server serves a web page that contains a POST operation with arguments, those arguments are stored in a table that can be accessed via a script. In the HTML code given above, the action in the form code was “confirm”. When the web server within the OPML Editor receives the “Submit” button click, it will look for an entry in the website table with the name “confirm” and try to render the text and/or HTML code in that table entry. Part 3 in this series showed how a script could be executed to create a web page. That script will be used as a starting point to create a script to be called that can access the arguments from the HTML POST command.

In the MyTestTool.root window, click on the black triangle for the MyTestToolWebsite entry to select the table, then hold the Apple or Control key down and double-click on the triangle. This will open the MyTestToolWebsite table in a new window. Next, click on the newIndex entry in the table to select it, then go to the Edit menu and select Copy, then go back to the Edit menu and select Paste. A dialog box will appear saying “An item named newIndex already exists in this location”. Click on the “Duplicate” button to create a copy of the newIndex script, which will be called “newIndex #1″. To rename the entry, click on the name, which will highlight the name of the table entry, then type “confirm” without quotes.

Next, edit the script to read as follows:

```local (pta = html.getpagetableaddress ())
pta^.title = "Confirmation Page"
pta^.flShowTitle = true //the page looks better with a title
return (MyTestToolSuite.ConfirmationScript ())```

Now, a script named ConfirmationScript needs to be created. This script will get the arguments from the POST command (the username and password). Go to the MyTestToolSuite table, copy the TestScript entry, rename it as ConfirmationScript, and edit the script to appear as follows:

```on ConfirmationScript ()
local (s1, s2)
new (tabletype, @pta^.searchArgTable)
webserver.parseargs (pta^.searchargs, @pta^.searchArgTable)
if pta^.method == "POST"
new (tabletype, @pta^.postArgs)
webserver.parseArgs (pta^.requestBody, @pta^.postArgs)
return ("The username is " + s1 + " and the password is " + s2)```

This script gets the address where the OPML Editor web server is creating the web page for the confirm command, puts the POST argument data into a table called postArgs, assigns the values for the username and password to two strings, and returns a string with the data to be displayed in a web page.

Now go again to http://127.0.0.1:5335/MyTestTool/login in your browser. You should see the following web page:

Enter “abc” for the username and “def” for the password (without quotes). After clicking on the Submit button, the following should appear in the web browser:

The final step in this example is to save data from the POST command in the Tool database. To do this, we will add code to ConfirmationScript to create a subtable within the MyTestToolData table and store the POST arguments. Update the script as follows:

```on ConfirmationScript ()
local (s1, s2)
new (tabletype, @pta^.searchArgTable)
new (tableType, @MyTestToolData.userdata)
webserver.parseargs (pta^.searchargs, @pta^.searchArgTable)
if pta^.method == "POST"
new (tabletype, @pta^.postArgs)
webserver.parseArgs (pta^.requestBody, @pta^.postArgs)

Now go again to http://127.0.0.1:5335/MyTestTool/login in your browser. The following web page should appear:

The earlier parts of this series demonstrated how to create a Tool (mini-application) for the OPML Editor, how to create a web page display within the Tool, and how to use scripts to create content within web pages. This part of the series will show how to collect data entered into a web page and save it in the Tool database for later use. This example will show how to create a web page form asking for a username and password, how to save the form data in the Tool database, then extract the data from the Tool database for display.

To begin, create a new wp text object in the MyTestToolWebsite table for the text of the web page form. To view the website table, go to the Window menu and select the “MyTestTool.root” menu option. If you have not created this Tool, go back to part 1 of this series and create the MyTestTool Tool. After the Tool is selected, a window will open showing a list of tables making up the Tool. Hold down the Apple or Control key and double-click on the black triangle next to the text “MyTestToolWebsite”. The following window will appear:

Click in the table, then go to the Table menu item and select the New Text item. A dialog box will appear asking for the name of the new wp text table entry. Enter the name “login” without quotes and click the OK button. A new window will appear as follows:

Enter the following text to create the form web page:

```#title "Sign In"
<form method="post" action="confirm">
<p>
</p>
<p>
</p>

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="100" cols=2>
<TR ALIGN="CENTER">
<TD><INPUT TYPE="submit" VALUE="Submit"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD>
</TR>
</TABLE>
</form>```

Close the window, then go to http://127.0.0.1:5335/MyTestTool/login in your browser. You should see the following web page:

Now that the web form has been created, how can the data in the form be accessed? When the OPML Editor web server serves a web page that contains a POST operation with arguments, those arguments are stored in a table that can be accessed via a script. In the HTML code given above, the action in the form code was “confirm”. When the web server within the OPML Editor receives the “Submit” button click, it will look for an entry in the website table with the name “confirm” and try to render the text and/or HTML code in that table entry. Part 3 in this series showed how a script could be executed to create a web page. That script will be used as a starting point to create a script to be called that can access the arguments from the HTML POST command.

In the MyTestTool.root window, click on the black triangle for the MyTestToolWebsite entry to select the table, then hold the Apple or Control key down and double-click on the triangle. This will open the MyTestToolWebsite table in a new window. Next, click on the newIndex entry in the table to select it, then go to the Edit menu and select Copy, then go back to the Edit menu and select Paste. A dialog box will appear saying “An item named newIndex already exists in this location”. Click on the “Duplicate” button to create a copy of the newIndex script, which will be called “newIndex #1″. To rename the entry, click on the name, which will highlight the name of the table entry, then type “confirm” without quotes.

Next, edit the script to read as follows:

```local (pta = html.getpagetableaddress ())
pta^.title = "Confirmation Page"
pta^.flShowTitle = true //the page looks better with a title
return (MyTestToolSuite.ConfirmationScript ())```

Now, a script named ConfirmationScript needs to be created. This script will get the arguments from the POST command (the username and password). Go to the MyTestToolSuite table, copy the TestScript entry, rename it as ConfirmationScript, and edit the script to appear as follows:

```on ConfirmationScript ()
local (s1, s2)
new (tabletype, @pta^.searchArgTable)
webserver.parseargs (pta^.searchargs, @pta^.searchArgTable)
if pta^.method == "POST"
new (tabletype, @pta^.postArgs)
webserver.parseArgs (pta^.requestBody, @pta^.postArgs)
return ("The username is " + s1 + " and the password is " + s2)```

This script gets the address where the OPML Editor web server is creating the web page for the confirm command, puts the POST argument data into a table called postArgs, assigns the values for the username and password to two strings, and returns a string with the data to be displayed in a web page.

Now go again to http://127.0.0.1:5335/MyTestTool/login in your browser. You should see the following web page:

To check the entries in the Tool database, go to the Window menu and select the MyTestTool.root menu item, click on the MyTestTool window, then press the Apple or Control key and double-click on the triangle next to the MyTestToolData table entry. A new window will open as follows:

Finally, press the Apple or Control key and double-click on the triangle next to the userdata entry. A new window showing the data elements will open as follows:

The first four parts of this series covered running scripts in the OPML Editor, creating a user interface, and storage and retrieval of data within a Tool. The final part of this series will develop an example application with the OPML Editor to interact with the Delicious social bookmarking service.

The following links go into more detail on parts of this tutorial.

• Referring to Database Entries – Chapter 6 in “Frontier: The Definitive Guide” by Matt Neuberg discusses the use of database entries in various contexts.
• Addresses – Chapter 8 in “Frontier: The Definitive Guide” by Matt Neuberg discusses using and manipulating addresses in a database.
• A Genuine Dynamic Site – From Matt Neuberg’s “Dr. Matt” pages, this shows the basics of using forms and the Frontier web server, which is part of the OPML Editor.
• Web Site Framework – A list of resources on understanding how the OPML Editor renders web pages.

• Part 1 – Installing the OPML Editor and creating a “Hello World” Tool
• Part 2 – Creating web pages and scripts
• Part 3 – Running a script from a web page
• Part 4 – Saving data in the tool database
• Part 5 – Creating an application
• Part 6 – Creating an application – Windows updates
• Part 7 – Conclusion

## Part 3 – Running a script from a web page

Part 2 of this series showed how to write a short script and display the results in a dialog box. This part of the series will show how to display the results in a web page in two different ways The first is through the use of “macros”. Part 1 of this series looked at the website table within our test tool (MyTestToolWebsite) and at the index text object for the tool website. When the OPML Editor renders the content of any wp text objects, it can execute scripts whose names are included in the wp text object. This is done using open braces ({) and close braces (}) around the script name to indicate that the text is the name of a script. Here is an example of the technique.

To view the website table, go to the Window menu and select the “MyTestTool.root” menu option. If you have not created this Tool, go back to part 1 of this series and create the MyTestTool Tool. After you select the Tool, a window will open showing a list of tables making up the Tool. Hold down the Apple or Control key and double-click on the black triangle next to the text “MyTestToolWebsite”. The following window will appear:

For this example, a macro reference in a script will be added to the table object “index”. The script from part 2 of this series will be used. To add a macro reference in the index wp object, click in the MyTestToolWebsite table, then double-click on the gray triangle next to the index wp text object in the table. The following window will open:

The “Hello World” text is still there from part 1 of this series.

When the index page is rendered, the OPML Editor looks at the tables within the website table for macros or scripts that should be executed as part of the rendering process. The typical place for these scripts is in the #tools table within the website table. For this example, the test script from part 2 of this series will be copied and pasted it into the #tools table within the MyTestToolWebsite table. To do this, select the MyTestTool.root window, then hold the Apple or Control key down while double-clicking on the black triangle next to the MyTestToolSuite text entry in the table. A window will open showing the contents of the MyTestToolSuite table:

To copy the TestScript object, click on the gray triangle next to the TestScript text entry in the table. It should be highlighted as in the figure above. Next, go to the Edit menu and select the Copy menu item. To open the #tools table in the MyTestToolWebsite table, go to the Window menu, then select the MyTestToolWebsite entry to bring that window to the foreground. Hold the Apple or Control key down while double-clicking on the black triangle next to the #tools text entry in the table. This will open the #tools table as shown below:

Click in the table, select the Edit menu, then select the Paste menu item. The TestScript object will appear in the table. To edit the script, double-click on the gray triangle next to the TestScript object. The script will open as shown below:

First, the call to the script handler at the end of the script needs to be deleted, as it will not be needed for executing the script from a web page. To delete the call, click on the gray triangle at the bottom of the script to select the line, then go to the File menu and select the Cut menu item. The line will be removed from the script. Next, the line with the dialog.notify command needs to be modified, since the results will be displayed in a web page instead of a dialog box. Change the text of the line from “dialog.notify (“The total is ” + n)” to “return (“The result is ” + n)”. The final result should look like this:

The script will now return the text in the parentheses, which will be included in the web page to be rendered. To set up a call to the script in a web page, the index wp text object in the website table needs to be edited. Since this object was opened earlier, go to the Window menu and select the “MyTestToolWebsite.index” menu item. Click in the window and type the text “{TestScript()}” without the quotes. The window should look like the following:

A script included in a web page through the use of the braces is called a “macro”. To view the results of your work, go to the home page for the MyTestTool website (http://127.0.0.1:5335/MyTestTool/). The following text should appear in the browser window:

In addition to calling scripts using macros, an outline can be used to contain the content within a tool web page and have calls to scripts within the outline. The River2 Tool does this for its index page, shown below:

This technique can be used with the modified test script used for the macro example. First, the script in the MyTestToolSuite table needs the same changes as the macro example script. Go to the Window menu, then select the MyTestToolSuite menu item. The window will appear as follows:

Double-click on the TestScript entry and make the same changes as for the macro example. Next,
a script similar to the River2 index page script needs to be added to the MyTestTool website table. Go to the Window menu and select the MyTestToolWebsite menu item. Click in the window, select the Table menu, then select the New Script menu item. A dialog box will appear asking for a name for the new script. Enter the name “newIndex” and press the OK button. A new script window will open as follows:

Double-click on the triangle next to the newIndex text. This will collapse the outline elements. Next, enter the following text in the script:

```local (pta = html.getpagetableaddress())
pta^.title = "Home"
pta^.flShowTitle = true // show the title
return(MyTestToolSuite.TestScript())```

Click on the black triangle next to the newIndex handler to select the line, then go to the Edit menu and select the Cut menu item. The top item will be deleted from the outline. Your window should appear as follows:

Close the window, then go to http://127.0.0.1:5335/MyTestTool/newIndex. You should see the following web page in your browser.

The next part of this series will build on the previous examples, showing how to call scripts and save data in the Tool database.

The following links go into more detail on parts of this tutorial.

• Part 1 – Installing the OPML Editor and creating a “Hello World” Tool
• Part 2 – Creating web pages and scripts
• Part 3 – Running a script from a web page
• Part 4 – Saving data in the tool database
• Part 5 – Creating an application
• Part 6 – Creating an application – Windows updates
• Part 7 – Conclusion

## Part 2 – Creating web pages and scripts

Web pages

Another method that can be used to display a “Hello World” message is through the Tool website. Each Tool contains a table containing elements which the OPML Editor can render into a website. These elements can present information (like help pages for the Tool), but it can also be the user interface for a web application (as will be shown at the end of this series). In this example Tool, the table is called MyTestToolWebsite. To view this table, go to the Window menu and select the “MyTestTool.root” menu option. If you have not created this Tool, go back to part 1 of this series and create the MyTestTool Tool. After you select the Tool, a window will open showing a list of tables making up the Tool. Hold down the Apple or Control key and double-click on the black triangle next to the text “MyTestToolWebsite”. The following window will appear:

The table contains various tables, scripts and text objects that are used to create the Tool website. This example will work with the table element “index” to display a “Hello World” message.

The website for a Tool can be viewed while the OPML Editor is running. Use the base URL http://127.0.0.1:5335/, followed by the name of the Tool to view the web site. In our example, the tool name is MyTestTool, which makes the URL http://127.0.0.1:5335/MyTestTool/. Enter this URL in a browser window or click on the link in the previous sentence if the OPML Editor is running. A blank page with the title “Home” will appear in the browser window.

The OPML Editor uses the elements within the website table to create the website. Individual website pages can be created with simple wp text objects. In the default website table, there is a wp text object called “index”. To create a “Hello World” message on the Tool home page, add text to the index text object. Double-click on the gray triangle to open the text onject. You will see the following window:

Click in the window at the end of the first line, then press Return and enter the text “Hello, world!” without the quotation marks. Close the window, then go to http://127.0.0.1:5335/MyTestTool/ in a browser window. The “Hello, world!” message will appear in the browser window.

Scripts

Part 1 of this series used a simple one line script used as part of an application menu. The next example will show how to create a script and display the results from running a script in a dialog box.

For this example, a script will be created in the MyTestToolSuite table. If you have not yet created the MyTestTool Tool, go back to part 1 of this series and create the Tool.

To open the MyTestToolSuite table, go to the Window menu and select the “MyTestTool.root” menu option. Press the Apple or Control key and double-click on the black triangle next to the text “MyTestToolSuite” entry in the MyTestTool.root window. A new window will open as follows:

To create a new script object, click on the window shown above, then select the Table menu item, then select the New Script sub-menu item. A dialog box will appear, asking for the name of the script. For this example, enter “TestScript” and click the OK button. A new window will open as shown below:

The OPML Editor creates a handler as the first line of the script. The handler includes the name that you entered when you created the script object. Below the handler is an indented triangle. This is the first line of the script, and it is blank. To begin writing the script, click next to the triangle and type the following lines, pressing the Return key at the end of each line:

```local (m = 0)
local (n = 0)
for m = 1 to 10
n = n + m
dialog.notify ("The total is " + n)```

To indent the code to the right, press the Tab key. To indent the code back to the left, hold the Shift key down while pressing the Tab key. Your code should look like the following:

Finally, a call needs to be added outside the main script so that the script can be run. After the last line, press the Return key, then hold down the Shift key and press the Tab key. The gray triangle will move left to be at the same level as the handler. Type the name of the handler on the line as follows:

`TestScript()`

The final result should look like the following:

To run the script, click on the “Run” button at the top of the window. A dialog box should appear with the text “The total is 55″. Click on the OK button to close the dialog box.

The next part of this series will show how to take the script from this example and use it to display the results of the script in a web page.

The following links goes into more detail on the concepts discussed in this part of the series.

• Keywords, Handlers, Verbs, and Calls – This section from Matt Neuberg’s tutorial “Serious First Steps in UserTalk Scripting” reviews more of the basics of scripting in the UserTalk language (see download link for full tutorial).
• Menus and Suites – Chapter 26 in “Frontier: The Definitive Guide” by Matt Neuberg discusses editing of menus in Frontier, much of which is applicable to editing menus in an OPML Editor Tool.
• Websites in Frontier – Matt Neuberg’s tutorial “Up and Running with Frontier Web Site Management” discusses a number of topics that apply to creating a website in an OPML Editor Tool, including creating a basic website and how Frontier uses directives to control the rendering of web pages (see download link for full tutorial).

• Part 1 – Installing the OPML Editor and creating a “Hello World” Tool
• Part 2 – Creating web pages and scripts
• Part 3 – Running a script from a web page
• Part 4 – Saving data in the tool database
• Part 5 – Creating an application
• Part 6 – Creating an application – Windows updates
• Part 7 – Conclusion
Posted in OPML Editor | 1 Response

## Part 1 – Installing the OPML Editor and creating a “Hello World” Tool

To get started, download the OPML Editor from the OPML Editor website and follow the instructions in the “Downloading a fresh install” section. After following the two install steps for your computer, the OPML Editor should be up and running.

As the OPML Editor website states, the basic installation supports editing of OPML documents, but nothing else. Adding features to the OPML Editor involves installing or creating a Tool, which is an application that runs within the OPML Editor. To see a list of available Tools, make sure a web browser is running, then start the OPML Editor, go to the Misc menu, and select the Tool Catalog menu item. A window or tab will open in the web browser with a list of Tools available for download.

As an example to use in this series, click on the “Install” link for river2, a RSS newsreader set up in a River of News format. After a few seconds, the River2 home page should appear:

When you use River2, you only need to interact with the web browser. However, the OPML Editor is running in the background, running the actual application. To bring the OPML Editor to the foreground, click on the OPML icon in the Dock. To see the River2 application, click on the Window menu, then select river2.root. A new window will open as shown below:

All of the elements of the River2 Tool are shown at a high level. This file contains all of the data and scripts for the Tool. In the Frontier development environment (which is the basis of the OPML Editor), Tools are a type of guest database. In this series, we will focus on how to create a Tool within the OPML Editor development environment and how to create an application.

To create a new Tool, click on the Tools menu in the OPML Editor application, then select “New Tool…”. A dialog box will appear asking for a name for the Tool, and suggesting the name “untitled.root”. In choosing a name, keep the .root extension, as that tells the OPML Editor that this file is a Tool. Enter the name “MyTestTool.root” without quotes in the dialog box and click the OK button. The OPML Editor will then create a new tool and store it in the Guest Databases/apps/Tools folder within the OPML folder. After several seconds, a new window will then open:

As shown in the screen shot, the MyTestTool Tool contains a number of elements called tables. These tables contain data and scripts for the tool functionality. You can create additional tables and elements within a tool, but this series will work with the default Tool setup. To look at the contents of a table within the Tool, you can double-click on the black arrow next to the name of a table. The contents of the table will then appear in the window below that item:

Another way to look at the contents of a table is to hold down the Apple key (for Macintosh) or Control key (for Windows) while double-clicking on the black triangle. This will open a new window with the contents of the table:

We will be working with the following tables in this series:

• MyTestToolData – Any data for the application will be stored here. There is a sub-table called “prefs” which can be used for preference data.
• MyTestToolSuite – This table contains scripts that perform the functions of the Tool.
• MyTestToolWebsite – This table contains the web pages that serve as the user interface of the Tool.

When the OPML Editor starts up, it scans the Tools folder and installs any Tools that are present. Each Tool has an application menu which is added to the Tools menu of the OPML Editor. To see an example of this, go to the Tools menu and select the MyTestTool item. You will see an arrow pointing to the right, indicating that there are additional menu selections available. If you follow the arrow to the right, you will find “Hello World” as a menu option. When you select this item, a dialog box will appear with the text “Hello, World.” Click on the OK button to close the dialog box.

To see how this works, go to the Window menu and select the “MyTestTool.root” menu option. If you have not created this Tool, go back and create the MyTestTool Tool. After you select the Tool from the Window menu, a window will open showing a list of tables making up the Tool. Double-click on the black triangle next to the text “MyTestToolSuite”. This will display an element under that text titled “menu”. When you double-click on that text, another window will open, displaying an outline with the text “My Test Tool” and the text “Hello World”.

Double-click on the black triangle next to the “Hello World” text. Another window will open showing a script:

The script has one line: a command to display a text string within a dialog box. When the Tools | MyTestTool | Hello World menu item is selected in the OPML Editor application, this script is called.

To create a new menu, click within the MyTestToolSuite.menu window at the end of the “Hello World” text, then press the Return key. A blank outline element will be created below the “Hello World” outline element. Enter the text “Another Message”. The window should now look like this:

Double-click on the gray triangle next to the “Another Message” text. A script window will open with a blank script framework. To complete this example, click next to the gray triangle, then type the text “dialog.notify (“Here’s my new message!”)”. The window should appear as follows:

Click on the close button in the corner to close the window. The final step is to re-install the Tool, since a change was made to the Tool menu. Select the Tools | Re-install Front Tool… menu option. A dialog window will open asking if you want to re-install MyTestTool.root. Click the OK button and wait about 10 seconds. To test the new script, select the Tools | MyTestTool | Another Message menu item. A dialog box will appear displaying the message.

The next part of this series will show how to set up web pages and write scripts within a Tool.

The following links go into more detail on the concepts discussed in this part of the tutorial.

• Tools – Gives an overview of the Tools framework in Frontier
• Getting Comfortable with Tables – From Matt Neuberg’s tutorial “Up and Running with Frontier Web Site Management”, this gives an overview of how tables are set up in Frontier, how to navigate tables, and how to edit elements in a table (see download link for full tutorial).