mozilla
Your Search Results

    XUL:Template Guide:Simple Example

    Let's look a more useful example, this time for a template that will show a list of photos. In this situation, an RDF container will be used to hold the list of images.

    <?xml version="1.0"?>
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:dc="http://purl.org/dc/elements/1.1/">
    
      <rdf:Seq rdf:about="http://www.xulplanet.com/rdf/myphotos">
        <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"/>
        <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"/>
        <rdf:li rdf:resource="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"/>
      </rdf:Seq>
    
      <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"
                       dc:title="Palace from Above"/>
      <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/canal.jpg"
                       dc:title="Canal"/>
      <rdf:Description rdf:about="http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg"
                       dc:title="Obelisk"/>
    
    </rdf:RDF>
    

    In this example, we have three images, which can be identified by urls. The resource uris correspond to their actual urls although this isn't necessary. Each image also has one property, the image's title. A template which displays this information is very simple to create. Unlike previous examples where we iterated over a property to navigate the graph, here we want to iterate over the children of an RDF container. The container, an RDF Seq, has the uri 'http://www.xulplanet.com/rdf/myphotos'. This will be the starting point of the navigation. We want the endpoints to be the three images. First, we set the datasources and ref attributes as needed:

    <vbox datasources="template-guide-ex2.rdf"
          ref="http://www.xulplanet.com/rdf/myphotos">
    

    This time, we need to use a new statement, the member condition as well as a triple.

    <query>
      <content uri="?start"/>
      <member container="?start" child="?photo"/>
      <triple subject="?photo"
              predicate="http://purl.org/dc/elements/1.1/title"
              object="?title"/>
    </query>
    

    The seed is set in a similar manner as the previous examples, effectively creating a single result with the ?start variable set to the reference resource 'http://www.xulplanet.com/rdf/myphotos'. The same starting variable is used in this example, but you can of course use any variable you wish.

    (?start = http://www.xulplanet.com/rdf/myphotos)
    

    The member element is used to iterate over the children of a container (or the reverse). First, any known variables are filled into the member statement for the current result. There's only one result so far; the member element's container attribute is set to value of the ?start variable of this result. This will result in the following:

    <member container="http://www.xulplanet.com/rdf/myphotos" child="?photo"/>
    

    As with processing a triple, the builder will now try to find as many values for the ?photo variable as possible and create potential results using them. The container attribute specifies the container and the child attribute specifies the children. In the RDF data, the container 'http://www.xulplanet.com/rdf/myphotos has three children, so there are three possible values for the ?photo variable. If that node had no children or wasn't a container, there would be no possible results. The data network will now look like this:

    (?start = http://www.xulplanet.com/rdf/myphotos,
     ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg)
    (?start = http://www.xulplanet.com/rdf/myphotos,
     ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg)
    (?start = http://www.xulplanet.com/rdf/myphotos,
     ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg)
    

    The triple is evaluated next, and it will be examined for each potential result found so far. The builder will first fill in as many variables as it can. For the first result, the value of the ?photo variable is known, so the triple will be evaluated like so:

    <triple subject="http://www.xulplanet.com/ndeakin/images/t/palace.jpg"
            predicate="http://purl.org/dc/elements/1.1/title"
            object="?title"/>
    

    The builder next calculates the value for ?title using the predicate 'http://purl.org/dc/elements/1.1/title'. In the RDF, the 'palace' resource has a value 'Palace from Above', so it will be added to the data network, assigned to the ?title variable. Note that this value is a literal rather than a resource.

    (?start = http://www.xulplanet.com/rdf/myphotos,
     ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg,
     ?title = 'Palace from Above')
    

    The process continues in a similar manner for the other two results. In the end, the network will contain the following data:

    (?start = http://www.xulplanet.com/rdf/myphotos,
     ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg,
     ?title = 'Palace from Above')
    (?start = http://www.xulplanet.com/rdf/myphotos,
     ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg,
     ?title = 'Canal')
    (?start = http://www.xulplanet.com/rdf/myphotos,
     ?photo = http://www.xulplanet.com/ndeakin/images/t/obelisk.jpg,
     ?title = 'Obelisk')
    

    Since the triple is the last statement, three matches total have been found. The action body might look like the following, which displays the image using its url and title in a label. You might note that the image's src attribute uses the member variable ?photo

    <action>
      <vbox uri="?photo" align="start">
        <image src="?photo"/>
        <label value="?title"/>
      </vbox>
    </action>
    

    It shouldn't be too difficult to tell what would appear in the window in this example. You can see if you guessed correctly by viewing the example.

    Document Tags and Contributors

    Contributors to this page: Anonymous
    Last updated by: Anonymous,