Developing OPML Editor Tools – Part 7

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!

Series Table of Contents:

  • 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

Developing OPML Editor Tools – Part 6

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:

createcommandprompt.jpg

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 + MyDeliciousToolData.userdata.password
   s = s + "@api.del.icio.us/v1/posts/recent?count="
   s = s + MyDeliciousToolData.userdata.bookmarks
   result = com.callScript (scriptCode, "VBScript", "Main", {s})
   s1 = file.readWholeFile("C:\test.txt")
   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:

deliciousbookmarks.jpg

Further reading

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.

Series Table of Contents:

  • 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

Developing OPML Editor Tools – Part 5

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 enter username/password for Delicious account
  • 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 username/password
  • Page to confirm that username/password has been updated
  • 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:

  • Delicious username
  • Delicious password
  • 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:

mydelicioustool.jpg

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:

mydelicioustoolwebsite.jpg

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:

mydelicioustoolindexpage.jpg

Replace the text in the window with the following text:

#title "MyDeliciousTool Home Page"
<center>My Delicious Tool Menu</center><br>
<br>

<ul>
<li><a href="updatepw.html">Update Passwords</a> - Enter your Delicious account username and password</li>
<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:

apphomepage.jpg

The login page from part 4 of this series will be used as a starting point for the username/password and bookmark pages. Open the MyTestTool Tool database by going to the Window menu and select the “MyTestTool.root” menu option. A window will open showing the tables in the MyTestTool Tool database. Hold down the Apple or Control key and double-click on the black triangle next to the “MyTestToolWebsite” table entry. This will open the MyTestToolWebsite table in a new window. Next, click on the login 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. Now, switch back to the MyDeliciousToolWebsite window. You can do this by clicking on the window if it is visible, or you can bring it to the front by going to the Window menu and selecting the “MyDeliciousToolWebsite” entry. When you have selected the window, click on the “index” item in the table, then go to the Edit menu and select Paste. You should see the “login” 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 login entry, which will be called “login #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 “updatepw” and “updatebk” (without quotes) to match the links in the home page. The table should appear as follows:

mydelicioustoolwebsitea.jpg

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"
<p>Please update the MyDeliciousTool database with your Delicious username and password.</p>
<form method="post" action="confirmpw">
<p>
<INPUT TYPE=text NAME="username" SIZE=50>
</p>
<p>
<INPUT TYPE=text NAME="password" 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, 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:

updateusernamepage.jpg

updatebookmarkspage.jpg

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:

confirmationpages.jpg

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^.title = "Confirm Password Updates";
pta^.flShowTitle = true; //the page looks better with a title
return (MyDeliciousToolSuite.passwordConfirmation ())

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^.title = "Confirm Bookmark Updates";
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:

newconfirmationscripts.jpg

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 (pta = html.getpagetableaddress ())
   local (s1, s2, s3)
   new (tabletype, @pta^.searchArgTable)
   new (tableType, @MyDeliciousToolData.userdata)
   new (stringType, @MyDeliciousToolData.userdata.username)
   new (stringType, @MyDeliciousToolData.userdata.password)
   webserver.parseargs (pta^.searchargs, @pta^.searchArgTable)
   if pta^.method == "POST"
      new (tabletype, @pta^.postArgs)
      webserver.parseArgs (pta^.requestBody, @pta^.postArgs)
   s1 = pta^.postArgs.username
   s2 = pta^.postArgs.password
   MyDeliciousToolData.userdata.username = s1
   MyDeliciousToolData.userdata.password = s2
   s3 = "The username is " + MyDeliciousToolData.userdata.username + " and the password is " + MyDeliciousToolData.userdata.password
   s3 = s3 + "<br><br>Return to the <a href=" + "\"" + "http://127.0.0.1:5335/MyDeliciousTool/"+ "\""
   s3 = s3 + ">home page</a><br>"
   return (s3)
on bookmarkConfirmation()
   local (pta = html.getpagetableaddress ())
   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/"+ "\""
   s2 = s2 + ">home page</a><br>"
   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:

updateusernamepage.jpg

Enter a username and password, then click the Submit button. The web page will clear and display a text message echoing the username and password that you have entered. Click on the “Return to the home page” link to return to the tool home page. Next, click on the “Update Password” link. You should see the following web page:

updatebookmarkspage.jpg

Enter a value for the number of bookmarks to retrieve from your Delicious account, then click the Submit button. The web page will clear and display a text message echoing the number of bookmarks that you have entered. Click on the “Return to the home page” link to return to the tool home 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):

updatedusernametable.jpg

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:

mydelicioustoolsuitetable.jpg

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:

curldelicious.jpg

Enter the following text into the script window:

on curlDelicious ()
   local (s, curlCommand)
   s = "curl -u " + MyDeliciousToolData.userdata.username + ":"
   s = s + MyDeliciousToolData.userdata.password
   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:

apiresponsecompile.jpg

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:

displaybookmarkswindow.jpg

Enter the following text into the script window:

on displayBookmarks ()
   local (adr=html.table.new(border:3, cellspacing:6, cellpadding:8))
   html.table.addColumn(adr, "Description")
   html.table.addColumn(adr, "Link")
   MyDeliciousToolSuite.curlDelicious()
   myPosts = xml.getAddress(@MyDeliciousToolData.userdata.apiResponseCompile, "posts")
   myList = xml.getAddressList(myPosts, "post")
   for x = 1 to MyDeliciousToolData.userdata.bookmarks
      description = xml.getAttributeValue(myList[x], "description")
      link = xml.getAttributeValue(myList[x], "href")
      html.table.addRow(adr)^.cells={description, link}
   html.table.render (adr)

This script makes use of several OPML Editor commands to create an HTML table and display the results. The first three lines create an address to render the table and some attributes of the table. Next, the curlDelicious script is called to get the Delicious bookmark data. After that, an OPML Editor command is used to get the table address for the “posts” sub-table within the apiResponseCompile table. In the example XML response given earlier, the bookmark information is enclosed within a <posts> tag. The OPML Editor creates a table with the information enclosed within this tag. The xml.getAddress command retrieves the address of this table. Next, the address of the posts table is used to get a list of all of the entries within that table that have the value of “post”. In the Delicious XML data, each bookmark is separated by a <post> tag. When the XML is compiled into a table, a sub-table is created for each bookmark with its attributes stored in the subtable. The xml.getAddressList command creates a list of the table addresses for each of the bookmark entries. Finally, the script runs a loop in which the description and link for each bookmark entry is retrieved from the table and added to the rows in the table. The last step in the script is to render the table, which appears in the web browser.

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:

mydelicioustoolwebsiteb.jpg

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:

deliciousbookmarks.jpg

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.

Further Reading

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.

Series Table of Contents:

  • 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

Developing OPML Editor Tools – Part 4

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:

websitetablea.jpg

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:

login.jpg

Enter the following text to create the form web page:

#title "Sign In"
<p>Please provide your username and password.</p>
<form method="post" action="confirm">
<p>
<INPUT TYPE=text NAME="username" SIZE=50>
</p>
<p>
<INPUT TYPE=text NAME="password" 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>

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

loginform.jpg

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 (pta = html.getpagetableaddress ())
   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)
   s1 = pta^.postArgs.username
   s2 = pta^.postArgs.password
   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:

loginform.jpg

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:

confirmation.jpg

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 (pta = html.getpagetableaddress ())
   local (s1, s2)
   new (tabletype, @pta^.searchArgTable)
   new (tableType, @MyTestToolData.userdata)
   new (stringType, @MyTestToolData.userdata.username)
   new (stringType, @MyTestToolData.userdata.password)
   webserver.parseargs (pta^.searchargs, @pta^.searchArgTable)
   if pta^.method == "POST"
      new (tabletype, @pta^.postArgs)
      webserver.parseArgs (pta^.requestBody, @pta^.postArgs)
   s1 = pta^.postArgs.username
   s2 = pta^.postArgs.password
   MyTestToolData.userdata.username = s1
   MyTestToolData.userdata.password = s2
   return ("The username is " + MyTestToolData.userdata.username + " and the password is " + MyTestToolData.userdata.password)

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:

websitetablea.jpg

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:

login.jpg

Enter the following text to create the form web page:

#title "Sign In"
<p>Please provide your username and password.</p>
<form method="post" action="confirm">
<p>
<INPUT TYPE=text NAME="username" SIZE=50>
</p>
<p>
<INPUT TYPE=text NAME="password" 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>

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

loginform.jpg

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 (pta = html.getpagetableaddress ())
   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)
   s1 = pta^.postArgs.username
   s2 = pta^.postArgs.password
   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:

loginform.jpg

Enter “ghi” for the username and “jkl” for the password (without quotes). When you click on the Submit button, you should see the following appear in your web browser:

confirmationa.jpg

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:

mytesttooldata.jpg

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:

userdata.JPG

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.

Further Reading

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.

Series Table of Contents:

  • 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

Developing OPML Editor Tools – Part 3

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:

website.jpg

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:

newindex.jpg

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:

suitewindow.jpg

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:

toolstable.jpg

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:

testscriptc.jpg

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:

testscriptd.jpg

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:

indexmacro.jpg

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:

webpageresult.jpg

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:

river2indexpage.jpg

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:

suitewindow.jpg

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:

newindexa.jpg

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:

newindexoutline.jpg

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

newindexc.jpg

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

Further Reading

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

  • Includes and Macros – This page from Matt Neuberg’s Frontier Web Tutorial talks about how to add calls to Frontier scripts (macros) within web pages (see download link for full tutorial).

Series Table of Contents:

  • 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

Developing OPML Editor Tools – Part 2

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:

website.jpg

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:

indexpage.jpg

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:

suitetable.jpg

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:

testscript.jpg

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:

testscripta.jpg

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:

testscriptb.jpg

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.

Further reading

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).

Series Table of Contents:

  • 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

Developing OPML Editor Tools – Part 1

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.

toolcatalogpage.jpg

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:

river2homepage.jpg

To use the River2 newsreader, follow the instructions in the “After installing” section of the home page.

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:

river2tool.jpg

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:

mytesttool.jpg

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:

mytesttooloutline.jpg

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:

mytesttooltable.jpg

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.

Application Menu

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”.

menuwindow.jpg

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

helloworldscript.jpg

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:

newmenuitem.jpg

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:

newmenuscript.jpg

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.

Further reading

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).

Series Table of Contents:

  • 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

Developing OPML Editor Tools

Introduction – what is the OPML Editor?

The OPML Editor is an application based on the open source version of the Frontier kernel, originally developed by UserLand Software. The Frontier kernel site states that Frontier “provides high-performance web content management, an object database, and a system-level and Internet scripting environment, including source code editing and debugging”. These features provide a rich environment for developing web-based applications that run on your desktop. The OPML Editor has Macintosh and Windows versions.

Applications can be created to run within the OPML Editor. These applications are called “Tools”. A Tool is a combination of data and scripts that allows the user to access the capabilities of the Frontier kernel within the OPML Editor and create applications that can be accessed through a web browser. These applications run on the user’s local machine. The OPML Editor renders the web pages which comprise the application user interface and uses its internal web server to display the pages. This simplifies the environment for the application developer, since a web server does not have to be set up to support the application itself.

Several Tools have been released for the OPML Editor by Dave Winer, but there is little documentation available on creating a functional Tool. This series will cover basic information on how to write scripts, create user interfaces, and store data in a Tool. The series will conclude by developing a simple Tool to collect user login information, call a web service API, and display the results.

This series will cover the following topics:

  • 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