| Package | com.ithaca.timeline |
| Class | public class Layout |
| Inheritance | Layout  Object |
The XML descriptor is referenced by the _timeline property (_timeline.layoutXML[LAYOUT]) which is also the root of the tree (as a LayoutNode).
In addition to this definition, the _timeline.layoutXML xml contains a second section to define obsels selectors (_timeline.layoutXML[OBSELS_SELECTORS]). These selectors are used both to create CSS selector for ObselSkins (in order to use different skins) and to define traceline selectors.
The following XML element names are defined in this class:
name of the tracelinegroup name of the traceline autohide property for the created tracelines Important When a new trace is dynamically added to a timeline (with a given stylename), the Layout is searched for a matching stylename. If no matching stylename is found, the last TimelineGroup definition is used. It is thus a good practice to always put a generic TimelineGroup definition at the end of the Layout.
Besides the XML driven creation, the Layout class can also be used to modify the tree with low level methods. For example:
timeline.timelineLayout.addTraceline(traceline, parentLayoutNode);
| Property | Defined By | ||
|---|---|---|---|
| _timeline : Timeline
The timeline is the root of the tree structure (this is the timeline where the nodes will be created). | Layout | ||
| Method | Defined By | ||
|---|---|---|---|
Constructor
| Layout | ||
Add a traceline as a child to a LayoutNode
| Layout | ||
createModifierNode(xmlLayout:XML):LayoutModifier
Create a LayoutModifier from an xml descriptor
| Layout | ||
createTraceLineGroupNode(xmlLayout:XML, trac:Trace):TraceLineGroup
Create a TracelineGroupNode from a xml descriptor and a trace
| Layout | ||
createTracelineGroupTree(trac:Trace, style:String = null):TraceLineGroup
Create a new TracelineGroup matching the given trace (URI) or style. | Layout | ||
createTraceLineNode(xmlLayout:XML):TraceLine
Create a Traceline from an xml descriptor
| Layout | ||
createTree(xmlLayout:XML, trac:Trace):LayoutNode
Create a tree structure of LayoutNode (TraceLineGroup,
Traceline, ModifierNode) from an xml descriptor and a
trace. | Layout | ||
getCurrentXmlLayout():XML
Get the current XML Layout
| Layout | ||
loadObselsSelectors(xmlSelectors:XMLList):void
Load a set of obsels skins selectors from a XML descriptor. | Layout | ||
| Method | Defined By | ||
|---|---|---|---|
layoutTreeToXml():XML | Layout | ||
modifierTreeToXml(modifier:LayoutModifier):XML | Layout | ||
obselsSelectorsToXml():XML | Layout | ||
tracelineTreeToXml(tl:TraceLine):XML | Layout | ||
| Constant | Defined By | ||
|---|---|---|---|
| BACKGROUND_TRACELINE : String = background [static]
the stylename ('style' property) to indcate that a Traceline must be used as a TracelineGroup background traceline
| Layout | ||
| CONTEXT_PREVIEW_TRACELINE : String = contextPreview [static]
the stylename ('style' property) to indcate that a Traceline must be used as a preview (in the zoomContext preview zone)
| Layout | ||
| LAYOUT : String = layout [static]
the keyword to define the layout section in the xml descriptor
| Layout | ||
| MODIFIER : String = modifier [static]
the keyword to define a ModifierNode in the xml descriptor
| Layout | ||
| OBSELS_SELECTOR : String = obselsSelector [static]
the keyword to define an obsel skin selector in the xml descriptor
| Layout | ||
| OBSELS_SELECTORS : String = obselsSelectors [static]
the keyword to define the obsels skins selectors section in the xml descriptor
| Layout | ||
| ROOT : String = root [static]
the keyword to define the root of the xml document
| Layout | ||
| TRACELINE : String = tl [static]
the keyword to define a TraceLine in the xml descriptor
| Layout | ||
| TRACELINEGROUP : String = tlg [static]
the keyword to define a TraceLineGroup in the xml descriptor
| Layout | ||
| _timeline | property |
public var _timeline:TimelineThe timeline is the root of the tree structure (this is the timeline where the nodes will be created). The timeline also contains the xml descriptor (_timeline.layoutXML[LAYOUT])
| Layout | () | Constructor |
public function Layout(tl:Timeline)Constructor
Parameterstl:Timeline — The Timeline managed by the Layout class.
|
| addTraceline | () | method |
public function addTraceline(traceline:TraceLine, parentNode:LayoutNode, xmlLayout:XML = null):LayoutNodeAdd a traceline as a child to a LayoutNode
Parameters
traceline:TraceLine — The traceline to add
| |
parentNode:LayoutNode — the LayoutNode where you want to add the traceline
| |
xmlLayout:XML (default = null) |
LayoutNode — the traceline
|
| createModifierNode | () | method |
public function createModifierNode(xmlLayout:XML):LayoutModifierCreate a LayoutModifier from an xml descriptor
Parameters
xmlLayout:XML — an xml descriptor of the LayoutModifier
|
LayoutModifier — the created LayoutModifier
|
| createTraceLineGroupNode | () | method |
public function createTraceLineGroupNode(xmlLayout:XML, trac:Trace):TraceLineGroupCreate a TracelineGroupNode from a xml descriptor and a trace
Parameters
xmlLayout:XML — The XML descriptor of the TraceLineGroup
| |
trac:Trace — The trace used to create the TraceLineGroup
|
TraceLineGroup — the TraceLineGroup node
|
| createTracelineGroupTree | () | method |
public function createTracelineGroupTree(trac:Trace, style:String = null):TraceLineGroup
Create a new TracelineGroup matching the given trace (URI) or style.
Select an XML descriptor of TraceLineGroup tree in the list
of descriptors stored in the _timeline and
create the tree structure.
Select the first TraceLineGroup descriptor whose
property 'source' is equal to the URI of trac
or whose 'style' property is equal to the (optional)
style parameter.
If no such descriptor exists, the last descriptor of the
list is used by default. // FIXME: or should we create a generic one?
Parameters
trac:Trace — the Trace for which the tree is created
| |
style:String (default = null) |
TraceLineGroup — the created TraceLineGroup tree
|
| createTraceLineNode | () | method |
public function createTraceLineNode(xmlLayout:XML):TraceLineCreate a Traceline from an xml descriptor
Parameters
xmlLayout:XML — an xml descriptor of the traceline
|
TraceLine — the created traceline
|
| createTree | () | method |
public function createTree(xmlLayout:XML, trac:Trace):LayoutNodeCreate a tree structure of LayoutNode (TraceLineGroup, Traceline, ModifierNode) from an xml descriptor and a trace. This is a recursive method. It uses the createTraceLineGroupNode, createTraceLineNode and createModifierNode methods.
Parameters
xmlLayout:XML — the xml descriptor of the tree
| |
trac:Trace — the trace for which the tree is created
|
LayoutNode — the root of the tree structure as a LayoutNode
|
| getCurrentXmlLayout | () | method |
public function getCurrentXmlLayout():XMLGet the current XML Layout
ReturnsXML — the xml descriptor of the current tree structure
|
| layoutTreeToXml | () | method |
protected function layoutTreeToXml():XMLReturns
XML — the XML descriptor of the current timeline tree structure.
|
| loadObselsSelectors | () | method |
public function loadObselsSelectors(xmlSelectors:XMLList):voidLoad a set of obsels skins selectors from a XML descriptor. It overwrites the current set if one exists.
Parameters
xmlSelectors:XMLList — xml descriptor of a set of obsels skins selectors
|
| modifierTreeToXml | () | method |
protected function modifierTreeToXml(modifier:LayoutModifier):XML
Parameters
modifier:LayoutModifier — a modifier tree
|
XML — the xml descriptor of a given modifier tree structure.
|
| obselsSelectorsToXml | () | method |
protected function obselsSelectorsToXml():XMLReturns
XML — the XML descriptor of the current timeline set of obsels skins selectors.
|
| tracelineTreeToXml | () | method |
protected function tracelineTreeToXml(tl:TraceLine):XML
Parameters
tl:TraceLine — a traceline tree
|
XML — the xml descriptor of a given traceline tree structure.
|
| BACKGROUND_TRACELINE | Constant |
public static const BACKGROUND_TRACELINE:String = backgroundthe stylename ('style' property) to indcate that a Traceline must be used as a TracelineGroup background traceline
| CONTEXT_PREVIEW_TRACELINE | Constant |
public static const CONTEXT_PREVIEW_TRACELINE:String = contextPreviewthe stylename ('style' property) to indcate that a Traceline must be used as a preview (in the zoomContext preview zone)
| LAYOUT | Constant |
public static const LAYOUT:String = layoutthe keyword to define the layout section in the xml descriptor
| MODIFIER | Constant |
public static const MODIFIER:String = modifierthe keyword to define a ModifierNode in the xml descriptor
| OBSELS_SELECTOR | Constant |
public static const OBSELS_SELECTOR:String = obselsSelectorthe keyword to define an obsel skin selector in the xml descriptor
| OBSELS_SELECTORS | Constant |
public static const OBSELS_SELECTORS:String = obselsSelectorsthe keyword to define the obsels skins selectors section in the xml descriptor
| ROOT | Constant |
public static const ROOT:String = rootthe keyword to define the root of the xml document
| TRACELINE | Constant |
public static const TRACELINE:String = tlthe keyword to define a TraceLine in the xml descriptor
| TRACELINEGROUP | Constant |
public static const TRACELINEGROUP:String = tlgthe keyword to define a TraceLineGroup in the xml descriptor
<root>
<!-- this is the minimal layout definition that allows to see something-->
<!--there is no ObselsSelectors definition. That means that all obsels will be rendered with the default obselSkin skin -->
<!-- the layout definition -->
<layout>
<!-- Default and only traceLineGroup definition. Each Trace will use this definition -->
<tlg >
<!-- One traceLine with no selector (every obsel will match) -->
<tl />
<!-- there is no traceLine tagged with the 'preview' attribute. Then, this Tracelinegroup preview (in the zoomContext part) is a traceline that renders the whole trace -->
</tlg >
</layout>
</root>
<root>
<!-- A second version of mini layout. This one contains an ObselsSelectors section -->
<!-- The ObselsSelectors section defines selectors that are used to set a 'stylename' to obselSkins which match.
This stylename can be used as obselSkins selectors in the CSS file
For example:
timeline|ObselSkin.Message
{
...
}
The 'selector' attribute is the class name of a ISelector implementaion.
The 'selectorParams' is the serialisation of parameters needed to initialize the selector class in the order defined by the getParameters/setParameters functions
The obsels that don't match any selectors will be rendered with the default ObselSkin.
-->
<obselsSelectors>
<obselSelector id='Message' selector="SelectorRegexp" selectorParams="type,Message" />
<obselSelector id='Document' selector="SelectorRegexp" selectorParams="type,Document" />
<obselSelector id='Instructions' selector="SelectorRegexp" selectorParams="type,Instructions" />
<obselSelector id='Marker' selector="SelectorRegexp" selectorParams="type,Marker" />
<obselSelector id='Keyword' selector="SelectorRegexp" selectorParams="type,Keyword" />
<obselSelector id='Comment' selector="SelectorRegexp" selectorParams="type,omment" />
</obselsSelectors>
<!-- the layout definition -->
<layout>
<!-- Default and only traceLineGroup definition. Each Trace will use this definition -->
<tlg >
<!-- One traceLine with no selector (every obsel will match) -->
<tl />
<!-- there is no traceLine tagged with the 'preview' attribute. Then, this Tracelinegroup preview (in the zoomContext part) is a traceline that renders the whole trace -->
</tlg >
</layout>
</root>
<root>
<!-- A last version of mini layout. This one contains an ObselsSelectors section and uses a LayoutModifier to create Traceline -->
<!-- The ObselsSelectors section defines selectors that are used to set a 'stylename' to obselSkins which match.
This stylename can be used as obselSkins selectors in the CSS file
For example:
timeline|ObselSkin.Message
{
...
}
The 'selector' attribute is the class name of a ISelector implementaion.
The 'selectorParams' is the serialisation of parameters needed to initialize the selector class in the order defined by the getPrameters/setParameters functions
Obsels that don't match any selectors will be rendered with the default ObselSkin.
-->
<obselsSelectors>
<obselSelector id='Message' selector="SelectorRegexp" selectorParams="type,Message" />
<obselSelector id='Document' selector="SelectorRegexp" selectorParams="type,Document" />
<obselSelector id='Instructions' selector="SelectorRegexp" selectorParams="type,Instructions" />
<obselSelector id='Marker' selector="SelectorRegexp" selectorParams="type,Marker" />
<obselSelector id='Keyword' selector="SelectorRegexp" selectorParams="type,Keyword" />
<obselSelector id='Comment' selector="SelectorRegexp" selectorParams="type,omment" />
</obselsSelectors>
<!-- the layout definition -->
<layout>
<!-- Default and only traceLineGroup definition. Each Trace will use this definition -->
<tlg >
<!-- Instead of a static traceline, a LayoutModifier node could be used.
Then, tracelines will be dynamicaly generated when needed.
At the moment, the only implemented LayoutModifier is the splitter one that creates a new traceline for each value of the obsels property defined by the splitter attribute.
In this example, a new traceline will be created for each different type of Obsel. (see obsel.type)
-->
<modifier splitter="type" />
<!-- there is no traceLine tagged with the 'preview' attribute. Then, this Tracelinegroup preview (in the zoomContext part) is a traceline that renders the whole trace -->
</tlg >
</layout>
</root>
<root>
<!-- A basic layout definition of the old version of Visu2 with a static definition of the tree structure.
We want something like that:
Summary view (according to user settings)
|____ Message
|____ Document
|____ Marker
|____ Instructions
|____ Keyword
-->
<!-- The ObselsSelectors section -->
<obselsSelectors>
<obselSelector id='Message' selector="SelectorRegexp" selectorParams="type,Message" />
<obselSelector id='Document' selector="SelectorRegexp" selectorParams="type,Document" />
<obselSelector id='Instructions' selector="SelectorRegexp" selectorParams="type,Instructions" />
<obselSelector id='Marker' selector="SelectorRegexp" selectorParams="type,Marker" />
<obselSelector id='Keyword' selector="SelectorRegexp" selectorParams="type,Keyword" />
<obselSelector id='Comment' selector="SelectorRegexp" selectorParams="type,omment" />
</obselsSelectors>
<!-- the layout definition -->
<layout>
<tlg>
<!-- Tracelines can create their own selector in the same way as in the obselsSelectors section
Note: this selector should be changed at runtime to let the user select what he wants
=> traceline.selector = new SelectorRegexp("type," + listOfTypes);
The 'title' attribute defines the default traceline.title property and the traceline.name too. -->
<tl title="Synthesis" selector="SelectorRegexp" selectorParams="type,Message|Document|Marker|Instructions|Keyword" >
<!-- Tracelines can also use selector ID of already created obselSelector
Note: We cannot use a layoutModifier to split obsels by type because the Message selector, for example, select obsels with the 'Message' in the obsel.type string
but SendMessage and ReceiveMessage types exist, then the splitter would create two differents Tracelines -->
<tl title="Message" selectorID="Message" />
<tl title="Document" selectorID="Document" />
<tl title="Marker" selectorID="Marker" />
<tl title="Instructions" selectorID="Instructions" />
<tl title="Keyword" selectorID="Keyword" />
</tl>
</tlg>
</layout>
</root>
<root>
<!-- An enhanced layout definition of the old version of Visu2. (see classicVisu2Layout.xml)
In this enhanced version, we create a special tracelinegroup for Comments
We add a traceline in the background of the users traceLineGroup
We change the default preview traceLine in the zoomContext (remember that if not defined the preview traceline is the whole trace)
And we use the autohide attribute to automaticlay hide or show a traceline when it is empty or not.
We want something like that:
Comments
Summary view (according to user settings)
|____ Message
|____ Document
|____ Marker
|____ Instructions
|____ Keyword
Summary view (according to user settings)
|____ Message
|____ Document
|____ Marker
|____ Instructions
|____ Keyword
(... for each user ...)
-->
<!-- The ObselsSelectors section -->
<obselsSelectors>
<obselSelector id='Message' selector="SelectorRegexp" selectorParams="type,Message" />
<obselSelector id='Document' selector="SelectorRegexp" selectorParams="type,Document" />
<obselSelector id='Instructions' selector="SelectorRegexp" selectorParams="type,Instructions" />
<obselSelector id='Marker' selector="SelectorRegexp" selectorParams="type,Marker" />
<obselSelector id='Keyword' selector="SelectorRegexp" selectorParams="type,Keyword" />
<obselSelector id='Comment' selector="SelectorRegexp" selectorParams="type,omment" />
<obselSelector id='Activity' selector="SelectorRegexp" selectorParams="type,ActivityStart" />
</obselsSelectors>
<!-- the layout definition -->
<layout>
<!-- This is the TraceLineGroup definition used when the stylename of the TraceLineGroup is "comments".
The stylename can be set when using the timeline.addTrace (trace, index, stylename) function.
Of course the stylename could be used to create a CSS selector:
timeline|TraceLineGroup.comments
{
....
}
The other way to select a TraceLineGroup definition is to use the URI of the trace as the 'source' attribute.
Example: To use a special definition when trace.uri is 'trace-20110112105114-0.ttl'
<tlg source="trace-20110112105114-0.ttl" >
... special tree structure...
</tlg>
-->
<tlg style="comments" >
<!-- A "style" attribute in a TraceLine definition is also used to set the stylename and then to create a CSS selector. -->
<tl title="" style="comments">
</tl>
</tlg>
<!-- This is the default TraceLineGroup definition because this is the last TraceLineGroup definition -->
<tlg>
<!--
The 'style="background"' attribute is used to define the traceline to be shown in the background of the traceLineGroup.
-->
<tl style="background" selectorID="Activity" />
<!--
The 'preview=true' attribute is used to define the previewed traceline in the zoomContext.
Note: if more than one traceline has a 'preview=true' attribute, only the last one will be taken into account.
Note 2: if the wanted traceline does not exist in the tree structure, it can be created with a 'style="contextPreview"' attribute (in the same way of the background traceline)
example: <tl style="contextPreview" selector="SelectorRegexp" selectorParams="type,Message|Document|Marker|Instructions|Keyword|Activity" />
-->
<tl title="Synthesis" selector="SelectorRegexp" selectorParams="type,Message|Document|Marker|Instructions|Keyword" >
<!--
the autohide='true' attribute is used to automaticaly show/hide tracelines if the traceline is empty or not.
-->
<tl title="Message" selectorID="Message" autohide='true'/>
<tl title="Document" selectorID="Document" autohide='true'/>
<tl title="Marker" selectorID="Marker" autohide='true' />
<tl title="Instructions" selectorID="Instructions" autohide='true' />
<tl title="Keyword" selectorID="Keyword" autohide='true' />
</tl>
</tlg>
</layout>
</root>
<root>
<!-- The obselsSelectors section defines the selectors used to create ObselSkin CSS selectors to use different skins.-->
<!-- The selectors defined in this section can also be used in the layout section as selector for Tracelines -->
<obselsSelectors>
<obselSelector id='Message' selector="SelectorRegexp" selectorParams="type,Message" />
<obselSelector id='PlayDocumentVideo' selector="SelectorRegexp" selectorParams="type,PlayDocumentVideo" />
<obselSelector id='Document' selector="SelectorRegexp" selectorParams="type,Document" />
<obselSelector id='Instructions' selector="SelectorRegexp" selectorParams="type,Instructions" />
<obselSelector id='Marker' selector="SelectorRegexp" selectorParams="type,Marker" />
<obselSelector id='Keyword' selector="SelectorRegexp" selectorParams="type,Keyword" />
<obselSelector id='Activity' selector="SelectorRegexp" selectorParams="type,ActivityStart" />
<obselSelector id='Comment' selector="SelectorRegexp" selectorParams="type,omment" />
</obselsSelectors>
<!-- The layout section defines the tree structure of the timeline. -->
<layout>
<!-- This TracelineGroup definition is used when the stylename of the TracelineGroup is 'comments'
(the stylename of TracelineGroup can be set when calling the timeline.addTrace(..) function.) -->
<!-- the stylename is used to create CSS selectors -->
<tlg style="comments" >
<tl title="" style="comments" preview="true" >
<!-- a layoutModifier is used to create one traceline by document (split when an obsel with new value obsel.props['commentforuserid'] is added -->
<!-- the autohide attribute will set for each traceline created -->
<modifier name="commentsGenerator" style="comments" splitter="commentforuserid" source="parent" autohide="true" />
</tl>
</tlg>
<!--
The default tracelinegroup definition of this layout (because this is the last tracelinegroup definition.
Used for the traces of users.
-->
<tlg>
<!-- definition of the traceline in the background of the tracelinegroup -->
<!-- the selector is already defined in the obselsSelectors setion -->
<tl style="background" selectorID="Activity" />
<!-- autohide='true' is used to automaticaly hide or show the traceline when it is empty or not -->
<tl title="Marqueurs" selectorID="Marker" autohide="true" />
<!-- A new selector must be created -->
<tl title="Messages" selector="SelectorRegexp" selectorParams="type,Instructions|Keyword|Message" autohide="true"/>
<tl title="Documents" selectorID="Document" autohide="true">
<!-- the selector is not for the classic 'type' property but for 'typedocument' -->
<tl title="Images" selector="SelectorRegexp" selectorParams="typedocument,image" autohide="true">
<!-- a layoutModifier is used to create one traceline by document (split when an obsel with new value obsel.props['iddocument'] is added -->
<!-- the autohide attribute will set for each traceline created -->
<!-- the source attribute is set to 'parent' to use the parent traceline ('Images') as obsels source instead of the trace -->
<modifier name="imagesGenerator" splitter="iddocument" source="parent" autohide="true" />
</tl>
<tl title="Videos" selector="SelectorRegexp" selectorParams="typedocument,video" autohide="true">
<modifier name="videosGenerator" splitter="iddocument" source="parent" autohide="true" />
</tl>
</tl>
<!-- Note: There is no preview attribute in this tracelinegroup, then the preview traceline is the not filtered whole trace -->
</tlg>
</layout>
</root>