Displaying Lists – Part 1

As has been discussed at length on the FaceSpan 5 Beta mailing list, the current Alpha builds lack table and outline views. However, FaceSpan does contain an HTML view which can be used to display lists of information to the user. This may be enough to keep you going until real tables/outlines/browsers are introduced into the product.

There are several ways to approach the problem of displaying tables in HTML. In this first installment, I’ll display XML data in an HTML view using a CSS stylesheet to transform the XML into HTML. In the next installment, I’ll use XSLT to perform the conversion from XML into HTML.

The first thing you have to do is convert the data you want to display into XML. You can using my XML Tools scripting addition or simply construct a string in AppleScript. In this example, I am generating a list of the files in the top Finder window. The XML that I’m creating looks like this:

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="foo.css"?>
<doc>
  <row>
    <name>AbstractConnection.h</name>
    <path>file://localhost/Users/mall/Desktop/connection/trunk/AbstractConnection.h</path>
    <date>Friday, July 13, 2007 4:59:01 PM</date>
  </row>
  <row>
    <name>AbstractConnection.m</name>
    <path>file://localhost/Users/mall/Desktop/connection/trunk/AbstractConnection.m</path>
    <date>Friday, July 13, 2007 4:59:01 PM</date>
  </row>
  ...
</doc>

A critical part of this XML fragment is the <?xml-stylesheet type=”text/css” href=”foo.css”> line which links the XML to a CSS stylesheet (foo.css). When the HTML View is asked to display this XML data, it will apply the CSS stylesheet for us.

The stylesheet looks like this:

doc {
    display: table;
    font-family: Lucida, Verdana, Arial, sans-serif;
    font-size: 11px;
    background: white;
    border-collapse: collapse;
    width: 100%;
}
row {
    display: table-row-group;
}
name {
    display: table-cell;
    border: 1px solid #c8c8c8;
    padding: 3px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}
date {
    display: table-cell;
    border: 1px solid #c8c8c8;
    padding: 3px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
}
path {
    display: table-cell;
    border: 1px solid #c8c8c8;
    padding: 3px;
}

It contains styles that convert the various XML elements (doc, row, name, date, path) into HTML tables, rows and columns.

When you put it all togehter in FaceSpan, it looks like this:

Here’s the FaceSpan code that makes this happen. First, it gets the names, dates and URLs of the files in the top Finder window. Next, it generates an XML string from this infromation. Finally, it displays the XML in an HTML view.

on didInvokeListFinderFiles(theObject)
    local rsrcsFolder, theNames, theURLs, theDates, theXML

    set rsrcsFolder to POSIX path of (get my application's resources folder)

    try
        --  Generate XML listing the files in the top Finder window
        tell application "Finder" to ¬
            set {theNames, theURLs, theDates} to {name, URL, modification date} of items of first window

        set theXML to {"<?xml version="1.0"?>"}
        set end of theXML to "<?xml-stylesheet type="text/css" href="foo.css"?>" -- associated a XSL stylesheet with this XML document
        set end of theXML to "<doc>"
        repeat with i from 1 to length of theNames
            set end of theXML to "  <row>"
            set end of theXML to "    <name>" & (item i of theNames) & "</name>"
            set end of theXML to "    <date>" & (item i of theDates) & "</date>"
            set end of theXML to "    <path>" & (item i of theURLs) & "</path>"
            set end of theXML to "  </row>"
        end repeat
        set end of theXML to "</doc>"

        --  Convert the list of strings we have accumulated into one long string that we can display
        set AppleScript's text item delimiters to {return}
        set theXML to theXML as string

        --  A this point we end up with an XML document looking something like this:
        --
        --  <?xml version="1.0"?>
        --  <?xml-stylesheet type="text/css" href="foo.css"?>
        --  <doc>
        --    <row>
        --      <name>AbstractConnection.h</name>
        --      <path>file://localhost/Users/mall/Desktop/connection/trunk/AbstractConnection.h</path>
        --      <date>Friday, July 13, 2007 4:59:01 PM</date>
        --    </row>
        --    <row>
        --      <name>AbstractConnection.m</name>
        --      <path>file://localhost/Users/mall/Desktop/connection/trunk/AbstractConnection.m</path>
        --      <date>Friday, July 13, 2007 4:59:01 PM</date>
        --    </row>
        --    ...
        --  </doc>

        --  Display the XML in an HTML view using an XSL stylesheet to make it look like a nice pretty table.
        tell my htmlView
            set value MIME type to "text/xml" -- makes the HTML view treat the string as XML rather then HTML
            set value base url to "file://" & rsrcsFolder & "foo.css" -- tells the HTML view where the resources are (CSS & gifs)
            set value to theXML -- display the XML data as HTML
        end tell
    on error errMsg
        display alert "No Finder Window" message "Please open a Finder window to list." buttons "OK" over my window
    end try
end didInvokeListFinderFiles

Display XML (CSS) Example Project