SXSW2 Screenbook Maker
  • Overview /SXSW_2007/A1_Overview/Books/A1_Overview/sbook.htm Why XSLT should be part of your toolkit:

    • Unlike CSS, add new elements, or rearrange
    • Easy to learn and program, if you take a functional, and not a procedural approach.
    • Fast processor is built into all major browsers, use Sarissa to get the same syntax for each.
    • XML isn't going away - browsers convert HTML to XML. The new technologies of the Semantic Web. XSLT is the easiest way to convert one to the other.
    ]]>         What is XSLT /SXSW_2007/C2_XSLT/Books/A0_What_is_XSLT/sbook.htm XSLT is a programming language with an XML syntax.

    For example:

    <xsl:if test="book">
      <xsl:value-of select="."/>
    </xsl:if>

    ]]>         An XSLT Example /SXSW_2007/C2_XSLT/Books/A2_An_XSLT_Example/sbook.htm This tutorial will present a very simple XSLT stylesheet example.

    This tutorial is being created with a program called Screenbook Maker. Screenbook Maker creates and xml file for each tutorial. The tutorial will use this xml file as an example.

    The xml file is here.

    ]]>         XSLT - Promise and Problems /SXSW_2007/C2_XSLT/Books/A2_XSLT_-_Promise_and_Problems/sbook.htm The power of XSLT:

    • Template based, so procedural code is not needed to traverse the input. Modular.
    • XML, so can be generated easily.
    • Fast - built into major browsers.
    • Powerful XPath expression language
    • XSLT 2.0
    ]]>         XSLT and Leo /SXSW_2007/C2_XSLT/Books/B2_XSLT_and_Leo/sbook.htm In this tutorial we'll look at using Leo to make an existing stylesheet easy to understand.

    ]]>         The MyTimes Site /SXSW_2007/C4_MyTimes/Books/A2_The_MyTimes_Site/sbook.htm MyTimes.com is a site that you can customize with the content that you choose. This is the existing (Feb 2007) beta site. ]]> MyTimes New Site /SXSW_2007/C4_MyTimes/Books/A4_MyTimes_New_Site/sbook.htm Editing with LEO /SXSW_2007/C4_MyTimes/Books/A6_Editing_with_LEO/sbook.htm Ajax projects can be hard to manage:

    1. Many files
    2. Unstructured languages
    3. "Unreadable" languages like HTML and XSLT
    ]]>         Widget Basics /SXSW_2007/C4_MyTimes/Books/B2_Widget_Basics/sbook.htm MyTimes widgets consist of folders containing files:

    1. A property file called props.js
    2. An XSLT or HTML template (optional)
    3. A code file called code.js (optional)
    4. Optional other resource files such as JPG, FLV or other files.
    ]]>         Adding Code to Widgets /SXSW_2007/C4_MyTimes/Books/B6_Adding_Code_to_Widgets/sbook.htm Many widgets do more than simply present data. For example the movie widget shows sections that open and close when clicked.

    ]]>         XSLT Widgets /SXSW_2007/C4_MyTimes/Books/C2_XSLT_Widgets/sbook.htm The widgets shown in the preceding examples used JSON data. The JSON data can then be read into an HTML template using the syntax $widget.data.etc. Simple control structures like {section} and {if} can be used to loop through the data or conditionally display data based on user preferences.

    However, many sources deliver data via XML. In this case, converting to the data to JSON and using the same template technology would be not beneficial, since a powerful language for manipulating XML already exists: XSLT.

    MyTimes widgets that receive data in XML use XSLT templates.

    ]]>