How was it built ?Simple HTML

What is this view ?This view explains how to create simple static views.

Exercices step 3 : Static view

Static views are HTML views that can be displayed in a browser. To create a new static view, use the "V" button, or open a tree view, an right-click on the "View" subhierarchy. Once asked, choose "HTML template" as view type, and give it an id and a name. A view editor will open.

To help you building your static view, you can use this template as a base page: copy the content and paste it in the view editor. The following consists in defining an HTML file which includes TAL syntax.

If we want to create a view summarizing the appearances of an actor (say Greta Schröder), we need to take the annotation that defines this actress as a starting point. Then, we need to consider all its outgoing relations of type "Appearance", and their destination annotations, which will be shots into which she appears. It is then possible, for each of these shots, to present several informations, such as its number, and an snapshot.

We'll try to present her appearances in the same way we presented the mirrors, each appearance will be represented by its snapshot, with a link to the video and its timestamp. To do so, the first thing to do is to make a div element which will contain the snapshot. This div element will have tal expression (tal:repeat) embedded to repeat it for each of the relations going out from the annotation with id a3265 (the id of the Actor annotation corresponding to Greta Schröder).

It should look somewhat like that :

 
 <div  class="screenshot_container"  
      tal:repeat="a here/annotations/a3265/typedOutgoingRelations/Appearance">. 

a will then be a variable that loops on "Appearance" relation.

We then need to create the link to the player. This is a HTML link element with an attribute (members/last select the annotation pointed by the relation):

  <a tal:attributes="href a/members/last/player_url> ... </>

The link element contains an image:

  <img tal:attributes="src a/members/last/snapshot_url" />

The result should be:

<a title="Jump to this appearance" tal:attributes="href a/members/last/player_url">
<img class="screenshot" alt="" tal:attributes="src a/members/last/snapshot_url" />
</a>

Finaly, we need to put below the screenshot its timestamps. We can do that with span elements and the tal:content expression, which replace the content of an element.

<span style="font-size: 0.8em">
(<span tal:content="a/members/last/fragment/formatted/begin">Debut</span>
 - <span tal:content="a/members/last/fragment/formatted/end">Fin</span>)
</span>