[TRINIDAD] How do I use the selector af|train::join to draw a line between two statons?

[Paul Spencer <pa...@apache.org>]

I am using <tr:train> in Trinidad v1.2.12.  Per the documentation [1],  
the selector af|train::join defines the style between stop icons.   
Using the selector below, the appearance is different on Safari vs  
other browser, although none of the browsers display the expected  
result.  The differences are either the join image is NOT displayed,  
or it is displayed to many times.

  Safari 4.0.4 - Displays the image 4 time between stations, with the  
middle two are stacked so the four dashes look like "-=-".

  IE7, IE6, Firefox 3.5.5(Mac), Firefox 3.0.7 (Windows), Nokia E61i  
browser - The join image is not displayed.

I expected to see the following for a train with three stations.

    -selected----unvisited----unvisited-

***
* From the Style Sheet
***
af|train::stop {
	text-align: center;
}

af|train::join {
	content: url("/adf/images/tree-line-middle.gif");
}
af|train::stop-icon-cell {
	background-color: blue;
}

af|train::stop:selected-icon {
	content:"selected";
}

af|train::stop:unvisited-icon {
	content: "unvisited" ;
}

af|train::stop:visited-icon {
	content: "visted");
}

af|train::stop:read-only-icon {
	content: "read-only");
}


Paul Spencer

[1] http://myfaces.apache.org/trinidad/skin-selectors.html

Re: [TRINIDAD] How do I use the selector af|train::join to draw a line between two statons?

[Jeanne Waldman <je...@oracle.com>]

In the trinidad-demo, check out the suede.css file. It renders the train 
nicely.
I copied this from the file:
/*train */
af|train::stop:selected-icon {
  content:url('/skins/suede/images/trVisStop.png');
}
af|train::join:unvisited,
af|train::join:disabled,
af|train::join-overflow {
  background-image:url('/skins/suede/images/ctruj.gif');
 
}

af|train::stop:unvisited-icon {
  content:url('/skins/suede/images/trUnVisStop.png');
}

af|train::link {
  -tr-rule-ref:selector(".AFDefaultFont:alias");
  padding:0px 4px;
}
af|train::stop-content:selected a,
af|train::stop-content:read-only a,
af|train::overflow-end a {
  -tr-rule-ref:selector(".TextForegroundDarkBackground:alias");
}

af|train::overflow-end:unvisited-icon {
 content:url('/skins/suede/images/ctrumore.gif');
}

af|train {
  -tr-render-parent-train:true
}
af|train::join:Visited,
af|train::join-overflow:Visited {
  background-image:url('/skins/suede/images/trvj.gif');
}
af|train::stop:visited-icon {
  content:url('/skins/suede/images/trVisStopA.png');
}
af|train::overflow-end:visited-icon {
 content:url('/skins/suede/images/trvmore.gif');
}
af|train::overflow-start:visited-icon {
 content:url('/skins/suede/images/trprev.gif');
}
af|train::parent-start-icon {
  content:url('/skins/suede/images/trsubl.gif');
}

af|train::parent-end-icon {
  content:url('/skins/suede/images/trsubr.gif');
}

/*train */

Paul Spencer wrote, On 11/19/2009 8:25 AM PT:
> I am using <tr:train> in Trinidad v1.2.12.  Per the documentation [1], 
> the selector af|train::join defines the style between stop icons.  
> Using the selector below, the appearance is different on Safari vs 
> other browser, although none of the browsers display the expected 
> result.  The differences are either the join image is NOT displayed, 
> or it is displayed to many times.
>
>  Safari 4.0.4 - Displays the image 4 time between stations, with the 
> middle two are stacked so the four dashes look like "-=-".
>
>  IE7, IE6, Firefox 3.5.5(Mac), Firefox 3.0.7 (Windows), Nokia E61i 
> browser - The join image is not displayed.
>
> I expected to see the following for a train with three stations.
>
>    -selected----unvisited----unvisited-
>
> ***
> * From the Style Sheet
> ***
> af|train::stop {
>     text-align: center;
> }
>
> af|train::join {
>     content: url("/adf/images/tree-line-middle.gif");
> }
> af|train::stop-icon-cell {
>     background-color: blue;
> }
>
> af|train::stop:selected-icon {
>     content:"selected";
> }
>
> af|train::stop:unvisited-icon {
>     content: "unvisited" ;
> }
>
> af|train::stop:visited-icon {
>     content: "visted");
> }
>
> af|train::stop:read-only-icon {
>     content: "read-only");
> }
>
>
> Paul Spencer
>
> [1] http://myfaces.apache.org/trinidad/skin-selectors.html
>