You are viewing a plain text version of this content. The canonical link for it is here.
Posted to adffaces-user@incubator.apache.org by Pavitra Subramaniam <pa...@oracle.com> on 2006/08/01 19:30:47 UTC
ProcessTrain Skin Selectors
Hello all,
It looks like the attachments I sent never really made it. I am proposing that we rename the skin selectors for the train component, from "af|processTrain" to "af|train" and the element "step" to "stop". This is to keep the skin selectors in synch with the renaming and also to reinforce that trains need not necessarily be tied to a multi-step process.
Please also see my email below, from last week explaining the new skin selectors I have introduced for this component.
------------------------------------------------------------------------------------
SKIN SELECTORS
------------------------------------------------------------------------------------
/***********************************
Train Styles
***********************************/
/* top level style class for the train component */
af|train
/***********************************
Joins
***********************************/
/* for joins between the overflow icons and the stops */
af|train::join-overflow
/* join (between overflow and stop icons) in disabled state */
af|train::join-overflow:disabled
/* join (between overflow and stop icons) in visited state */
af|train::join-overflow:visited
/* join (between overflow and stop icons) in unvisited state */
af|train::join-overflow:unvisited
/* for joins between stops */
af|train::join
/* join in visited state */
af|train::join:visited
/* join in unvisited state */
af|train::join:unvisited
/* join in disabled state */
af|train::join:disabled
/***********************************
Spacers
***********************************/
/* spacer used between stops */
af|train::stop-spacer
/* spacer used between parent train and stops */
af|train::parent-spacer
/* spacer used for margins in the beginning and end of the train */
af|train::margin-start
af|train::margin-end
/*********************************************************
Icons blocks and icons: Parent Train, Stop & Overflow
*********************************************************/
/* block that displays the parent start icon*/
af|train::parent-start-icon-block
/* block that displays the parent start icon*/
af|train::parent-end-icon-block
/* icon to indicate a parent process in the beginning of a sub train */
af|train::parent-start-icon
/* icon to indicate a parent process in the end of a sub train */
af|train::parent-end-icon
/* block that displays the overflow image */
af|train::overflow-icon-block
/* overflow start icon in visited state (indicates presence of previous stops) */
af|train::overflow-start-visited-icon
/* overflow start icon in disabled state (indicates presence of previous stops) */
af|train::overflow-start-disabled-icon
/* overflow end icon in disabled state (indicates presence of more stops) */
af|train::overflow-end-disabled-icon
/* overflow end icon in unvisited state (indicates presence of more stops) */
af|train::overflow-end-unvisited-icon
/* block that displays a stop icon (active/disabled/visited/unvisited) */
af|train::stop-icon-block
/* stop icon in visited state */
af|train::stop-visited-icon
/* stop icon in active state */
af|train::stop-active-icon
/* stop icon in unvisited state */
af|train::stop-unvisited-icon
/* stop icon in disabled state */
af|train::stop-disabled-icon
/************************************************
Labels and Links: parentTrain, overflow & stop
************************************************/
/*
content area in the beginning of the train, to display the parent process
name
*/
af|train::parent-start-content
/* content area in the end of the train, to display the parent process name */
af|train::parent-end-content
/*
content area to display the overflow label in the beginning and end of the
train
*/
af|train::overflow-start-content
af|train::overflow-end-content
/* content area to display the stop name */
af|train::stop-content
/* content area that displays the name of the stop in visited state */
af|train::stop-content:visited
/* block that displays the name of the stop in disabled state */
af|train::stop-content:disabled
/* block that displays the name of the stop in unvisited state */
af|train::stop-content:unvisited
/* block that displays the name of the stop in active state */
af|train::stop-content:active
/* link for a stop */
af|train::stop-link
/* link for an unvisited stop */
af|train::stop-link:unvisited
/* link for an visited stop */
af|train::stop-link:visited
/* link for an active stop */
af|train::stop-link:active
/* link for an disabled stop */
af|train::stop-link:disabled
/* link for an overflow in disabled state */
af|train::overflow-link:disabled
/* link for an overflow in visited state */
af|train::overflow-link:visited
/* link for an overflow in unvisited state */
af|train::overflow-link:unvisited
------------------------------------------------------------------------------------
SAMPLE TRAIN HTML PAGE
- Shows how the skin selectors will be used in the HTML page
------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Line example</title>
<link rel="stylesheet" charset="UTF-8" type="text/css" href="css/trinidadStyles.css"/>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="af|train">
<tbody>
<tr>
<!-- MARGIN -->
<td rowspan="2"><div class="af|train::margin-start"><span></span></div></td>
<!-- PARENT START -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>
<div class="af|train::parent-start-icon-block">
<img src="af|train::parent-start-icon"/>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::parent-spacer"><span></span></div></td>
<!-- OVERFLOW START -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join-overflow"><span></span></div>
</td>
<td>
<div class="af|train::overflow-icon-block">
<img src="af|train::overflow-start-icon:visited"/>
</div>
</td>
<td width="50%">
<div class="af|train::join-overflow af|train::join-overflow:visited">
<span></span></div></td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::stop-spacer af|train::join-overflow:visited"><span></span></div></td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join-overflow:visited">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:visited"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:visited">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- spacer -->
<td>
<div class="af|train::stop-spacer af|train::join:visited">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:visited">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:active"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:unvisited">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer af|train::join:unvisited">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:unvisited">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:unvisited"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::stop-spacer af|train::join:disabled"><span></span></div></td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer af|train::join:disabled">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer af|train::join:disabled">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join-overflow:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer af|train::join-overflow:disabled">
<span></span>
</div>
</td>
<!-- OVERFLOW END -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join-overflow:disabled">
<span></span></div></td>
<td style="width:1px;">
<div class="af|train::overflow-icon-block">
<img src="af|train::overflow-end-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join-overflow">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::parent-spacer"><span></span></div></td>
<!-- PARENT END -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>
<div class="af|train::parent-end-icon-block">
<img src="af|train::parent-end-icon"/>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td rowspan="2"><div class="af|train::margin-end"><span></span></div></td>
</tr>
<tr>
<td>
<div class="af|train::parent-start-content"></div>
</td>
<td></td>
<td>
<div class="af|train::overflow-start-content">
<a href="" class="af|train::overflow-link:visited">Previous</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content af|train::stop-content:visited">
<a href="" class="af|train::stop-link
af|train::stop-link:visited">stop 1</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content af|train::stop-content:active">
<a href="" class="af|train::stop-link
af|train::stop-link:active">stopstopstop 2</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content af|train::stop-content:unvisited">
<a href="" class="af|train::stop-link
af|train::stop-link:unvisited">stop 3</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content af|train::stop-content:disabled">
<a href="" class="af|train::stop-link
af|train::stop-link:disabled">stop 4</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content af|train::stop-content:disabled">
<a href="" class="af|train::stop-link
af|train::stop-link:disabled">stopstopstop 5</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content af|train::stop-content:disabled">
<a href="" class="af|train::stop-link
af|train::stop-link:disabled">stopstop 6</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::overflow-end-content">
<a href="" class="af|train::overflow-link:disabled">More</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::parent-end-content"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
- Pavitra
-----Original Message-----
From: Pavitra Subramaniam [mailto:pavitra.subramaniam@oracle.com]
Sent: Friday, July 28, 2006 6:28 PM
To: adffaces-user@incubator.apache.org
Cc: Simon_Lessard@DMR.CA
Subject: RE: ProcessTrain enhancement
Hello,
I would like to propose an updated set of skin selectors for the processTrain component. Basically I have removed the use of start and end icons for stops and overflows. I also had to introduce new skin hooks for parent process.
Please review the attached train-skin-selector.rtf and let me know if these hooks are fine. I have not added the rtl cases, but will add them once we agree on the basic ltr list.
I have also attached a sample HTML page (train_trinidad.html) and CSS file (trinidadStyles.css) to demonstrate how these styles will be used. (style names in HTML file has been modified to be compliant with CSS2).
- the joins are now background-colors rather than images. This makes it simpler.
- the only icons are the stops, overflows and parent train. If the icons are the same dimensions then the HTML works best (otherwise some tweaking is required in CSS).
Thanks
- Pavitra
-----Original Message-----
From: Simon_Lessard@DMR.CA [mailto:Simon_Lessard@DMR.CA]
Sent: Thursday, July 06, 2006 10:32 AM
To: adffaces-user@incubator.apache.org
Subject: Re: ProcessTrain enhancement
next/prev terminology sounds good enough for me.
The hard part using a whole icon for the station is the visual link between the stations around the active station. If you want the link to be of a different color on the visited side than on the unvisited side, splitting the icon become mandatory as the visual link is rendered as a background-image. Of course, it would be possible to use a whole icon for all but the active one. Would that be better?
As for pseudo-class, I'm totally for it.
Finally, for the background-image in the style class instead of the background attribute, it's relatively complex because of the outer edges of the process train since those should not use the background image. Of course I could keep both selector I have currently, that is the base and the -icon. (for example af|processTrain::join-icon:visited and
af|processTrain::station:visited ) and apply both classes when the
background image is required. Does that sounds good to you?
Regards,
Simon Lessard
Fujitsu Consulting
Jeanne Waldman <je...@oracle.com>
2006-07-06 13:20
Please respond to adffaces-user
To: adffaces-user@incubator.apache.org
cc:
Subject: Re: ProcessTrain enhancement
What are 'joints'? I think I had been calling them 'joins'.
I also use the 'next'/'prev' terminology instead of backwards and forwards.
Also, I'd recommend rewriting the simple renderer so that you can use a whole visited icon, a disabled icon, etc, instead of a start visited, an end visited. I know this is how it was in the oracle renderer, which I suspect you are looking at, but I always thought that was ugly.
You could simplify the skinning api a lot if you didn't worry about making it exactly like the oracle skin, where we colored the joining line to the icons. I'd just keep those the same.
A direction we are heading towards is to use pseudo-classes for 'state'.
We have implemented this for the form controls. For example, when the af:inputText component is in the disabled state, the new skinning key is
this:
af|inputText:disabled {} and the html we render is <span
class="af_inputText p_AFDisabled">
and the css rule is:
af_inputText.p_AFDisabled {}.
This is a fairly new convention, and only the form controls are implemented this way so far, but we want to move in this direction.
So you'd have
af|processTrain::joint-icon:visited, and we'd parse this to be the
af_processTrain_joint-icon_visited, or something like that.
Also, we don't render style classes on the background attribute, as far as
I know. Instead we render it on the class attribute, and in the style
class definition, they could set the background-image attribute.
Simon_Lessard@DMR.CA wrote:
>Hello,
>
>I'm currently working to modify the processTrain to accept more skin
>selectors in order to open all icons provided by Oracle skin. The
>selectors I plan to add are:
>
> // processTrain styles used for the disabled links
> public static final String AF_PROCESS_TRAIN_TEXT_STYLE_CLASS =
> "af|processTrain::text";
>
> // For outer margins
> public static final String AF_PROCESS_TRAIN_MARGIN_START_STYLE_CLASS =
> "af|processTrain::margin-start";
> public static final String AF_PROCESS_TRAIN_MARGIN_END_STYLE_CLASS =
> "af|processTrain::margin-end";
>
> // For inner spacing
> public static final String AF_PROCESS_TRAIN_SPACING_STYLE_CLASS =
> "af|processTrain::step-spacing";
>
> // For active steps
> public static final String AF_PROCESS_TRAIN_ACTIVE_START_ICON_NAME =
> "af|processTrain::step-active-start-icon";
> public static final String AF_PROCESS_TRAIN_ACTIVE_END_ICON_NAME =
> "af|processTrain::step-active-end-icon";
>
> // For visited steps
> public static final String AF_PROCESS_TRAIN_VISITED_START_ICON_NAME =
> "af|processTrain::step-visited-start-icon";
> public static final String AF_PROCESS_TRAIN_VISITED_END_ICON_NAME =
> "af|processTrain::step-visited-end-icon";
>
> // For unvisited steps
> public static final String AF_PROCESS_TRAIN_UNVISITED_START_ICON_NAME =
> "af|processTrain::step-unvisited-start-icon";
> public static final String AF_PROCESS_TRAIN_UNVISITED_END_ICON_NAME =
> "af|processTrain::step-unvisited-end-icon";
>
> // For disabled steps
> public static final String AF_PROCESS_TRAIN_DISABLED_START_ICON_NAME =
> "af|processTrain::step-disabled-start-icon";
> public static final String AF_PROCESS_TRAIN_DISABLED_END_ICON_NAME =
> "af|processTrain::step-disabled-end-icon";
>
> // For joints
> public static final String AF_PROCESS_TRAIN_JOINT_VISITED_ICON_NAME =
> "af|processTrain::joint-visited-icon";
> public static final String AF_PROCESS_TRAIN_JOINT_UNVISITED_ICON_NAME =
> "af|processTrain::joint-unvisited-icon";
>
> // For backward overflows
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_STYLE_CLASS =
> "af|processTrain::overflow-backward";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_START_ICON_NAME =
> "af|processTrain::overflow-backward-start-icon";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_END_ICON_NAME =
> "af|processTrain::overflow-backward-end-icon";
>
> // For forward overflows
> public static final String
AF_PROCESS_TRAIN_OVERFLOW_FORWARD_STYLE_CLASS
>=
> "af|processTrain::overflow-forward";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_FORWARD_START_ICON_NAME =
> "af|processTrain::overflow-forward-start-icon";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_FORWARD_END_ICON_NAME =
> "af|processTrain::overflow-forward-end-icon";
>
>The target HTML structure for the process train in LtR mode is:
>
><table align="center" border="0" cellpadding="0" cellspacing="0"
>class="af|processTrain">
> <tbody>
> <tr>
> <td class="af|processTrain::margin-start" rowspan="2"></td>
>
> <td align="right" class="af|processTrain::overflow-backward">
> <img src="af|processTrain::overflow-backward-start-icon"
>title="%step-label%" alt="%step-label% : previous set"/>
> </td>
> <td background="af|processTrain::joint-visited-icon" align="left"
>class="af|processTrain::overflow-backward>
> <img src="af|processTrain::overflow-backward-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-visited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-visited-icon" align="right"
>class="af|processTrain::step-visited">
> <img src="af|processTrain::step-visited-start-icon"
>title="%step-label%" alt="%step-label% : previous step"/>
> </td>
> <td background="af|processTrain::joint-visited-icon" align="left"
>class="af|processTrain::step-visited">
> <img src="af|processTrain::step-visited-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-visited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-visited-icon" align="right"
>class="af|processTrain::step-active">
> <img src="af|processTrain::step-active-start-icon"
>title="%step-label%" alt="%step-label% : active step"/>
> </td>
> <td background="af|processTrain::joint-unvisited-icon" align="left"
>class="af|processTrain::step-active">
> <img src="af|processTrain::step-active-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-unvisited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-unvisited-icon"
align="right"
>class="af|processTrain::step-unvisited">
> <img src="af|processTrain::step-unvisited-start-icon"
>title="%step-label%" alt="%step-label% : next step"/>
> </td>
> <td background="af|processTrain::joint-unvisited-icon" align="left"
>class="af|processTrain::step-unvisited">
> <img src="af|processTrain::step-unvisited-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-unvisited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-unvisited-icon"
align="right"
>class="af|processTrain::overflow-forward">
> <img src="af|processTrain::overflow-forward-start-icon"
>title="%step-label%" alt="%step-label% : next set"/>
> </td>
> <td align="left" class="af|processTrain::overflow-forward">
> <img src="af|processTrain::overflow-forward-end-icon" alt="">
> </td>
>
> <td class="af|processTrain::margin-end" rowspan="2"></td>
> </tr>
> <tr>
> <td colspan="2" class="af|processTrain::overflow-backward">
> <a class="af|processTrain::link">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::step-visited">
> <a class="af|processTrain::link">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::step-active">
> <a class="af|processTrain::link">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::step-unvisited">
> <a class="af|processTrain::text">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::overflow-forward">
> <a class="af|processTrain::text">%step-label%</a>
> </td>
> </tr>
> </tbody>
></table>
>
>Is that ok with you?
>
>Simon Lessard
>DMR Conseil Inc. (http://www.dmrconseil.ca)
>Téléphone : (418) 653-6881
>
>Sun Certified Programmer for Java 2 Platform 1.4
>
>
RE: ProcessTrain Skin Selectors
Posted by Pavitra Subramaniam <pa...@oracle.com>.
Not yet. Will attach these to issue 60.
Thanks
- Pavitra
-----Original Message-----
From: Adam Winer [mailto:awiner@gmail.com]
Sent: Tuesday, August 01, 2006 3:34 PM
To: adffaces-user@incubator.apache.org
Subject: Re: ProcessTrain Skin Selectors
+1 to these changes. Pavitra, have these been attached
to a JIRA issue?
-- Adam
On 8/1/06, Simon_Lessard@dmr.ca <Si...@dmr.ca> wrote:
>
> Looks great to me! Thank Pavitra.
>
> Simon Lessard
> Fujitsu Consulting
>
>
>
>
> "Pavitra Subramaniam" <pa...@oracle.com>
> 2006-08-01 15:30
> Please respond to adffaces-user
>
> To: "adffaces-user@incubator.apache.org"
> <ad...@incubator.apache.org>
> cc: "Simon_Lessard@DMR.CA" <Si...@DMR.CA>
> Subject: ProcessTrain Skin Selectors
>
>
> Hello all,
>
> It looks like the attachments I sent never really made it. I am
> proposing that we rename the skin selectors for the train component,
> from "af|processTrain" to "af|train" and the element "step" to "stop".
> This is to keep the skin selectors in synch with the renaming and also
> to reinforce that trains need not necessarily be tied to a multi-step
> process.
>
> Please also see my email below, from last week explaining the new skin
> selectors I have introduced for this component.
>
>
> ------------------------------------------------------------------------------------
> SKIN SELECTORS
>
> ----------------------------------------------------------------------
> --------------
> /***********************************
> Train Styles
> ***********************************/
> /* top level style class for the train component */
> af|train
>
> /***********************************
> Joins
> ***********************************/
> /* for joins between the overflow icons and the stops */
> af|train::join-overflow
>
> /* join (between overflow and stop icons) in disabled state */
> af|train::join-overflow:disabled
>
> /* join (between overflow and stop icons) in visited state */
> af|train::join-overflow:visited
>
> /* join (between overflow and stop icons) in unvisited state */
> af|train::join-overflow:unvisited
>
> /* for joins between stops */
> af|train::join
>
> /* join in visited state */
> af|train::join:visited
>
> /* join in unvisited state */
> af|train::join:unvisited
>
> /* join in disabled state */
> af|train::join:disabled
>
> /***********************************
> Spacers
> ***********************************/
> /* spacer used between stops */
> af|train::stop-spacer
>
> /* spacer used between parent train and stops */
> af|train::parent-spacer
>
> /* spacer used for margins in the beginning and end of the train */
> af|train::margin-start
> af|train::margin-end
>
> /*********************************************************
> Icons blocks and icons: Parent Train, Stop & Overflow
> *********************************************************/
> /* block that displays the parent start icon*/
> af|train::parent-start-icon-block
>
> /* block that displays the parent start icon*/
> af|train::parent-end-icon-block
>
> /* icon to indicate a parent process in the beginning of a sub train
> */
> af|train::parent-start-icon
>
> /* icon to indicate a parent process in the end of a sub train */
> af|train::parent-end-icon
>
> /* block that displays the overflow image */
> af|train::overflow-icon-block
>
> /* overflow start icon in visited state (indicates presence of
> previous
> stops) */
> af|train::overflow-start-visited-icon
>
> /* overflow start icon in disabled state (indicates presence of
> previous
> stops) */
> af|train::overflow-start-disabled-icon
>
> /* overflow end icon in disabled state (indicates presence of more
> stops) */
> af|train::overflow-end-disabled-icon
>
> /* overflow end icon in unvisited state (indicates presence of more
> stops) */
> af|train::overflow-end-unvisited-icon
>
> /* block that displays a stop icon (active/disabled/visited/unvisited)
> */
> af|train::stop-icon-block
>
> /* stop icon in visited state */
> af|train::stop-visited-icon
>
> /* stop icon in active state */
> af|train::stop-active-icon
>
> /* stop icon in unvisited state */
> af|train::stop-unvisited-icon
>
> /* stop icon in disabled state */
> af|train::stop-disabled-icon
>
> /************************************************
> Labels and Links: parentTrain, overflow & stop
> ************************************************/
> /*
> content area in the beginning of the train, to display the parent
> process
> name
> */
> af|train::parent-start-content
>
> /* content area in the end of the train, to display the parent process
> name */
> af|train::parent-end-content
>
> /*
> content area to display the overflow label in the beginning and end
> of the
> train
> */
> af|train::overflow-start-content
> af|train::overflow-end-content
>
> /* content area to display the stop name */
> af|train::stop-content
>
> /* content area that displays the name of the stop in visited state */
> af|train::stop-content:visited
>
> /* block that displays the name of the stop in disabled state */
> af|train::stop-content:disabled
>
> /* block that displays the name of the stop in unvisited state */
> af|train::stop-content:unvisited
>
> /* block that displays the name of the stop in active state */
> af|train::stop-content:active
>
> /* link for a stop */
> af|train::stop-link
>
> /* link for an unvisited stop */
> af|train::stop-link:unvisited
>
> /* link for an visited stop */
> af|train::stop-link:visited
>
> /* link for an active stop */
> af|train::stop-link:active
>
> /* link for an disabled stop */
> af|train::stop-link:disabled
>
> /* link for an overflow in disabled state */
> af|train::overflow-link:disabled
>
> /* link for an overflow in visited state */
> af|train::overflow-link:visited
>
> /* link for an overflow in unvisited state */
> af|train::overflow-link:unvisited
>
>
> ------------------------------------------------------------------------------------
> SAMPLE TRAIN HTML PAGE
> - Shows how the skin selectors will be used in the HTML
> page
>
> ----------------------------------------------------------------------
> --------------
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
> http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>Line example</title>
> <link rel="stylesheet" charset="UTF-8" type="text/css"
> href="css/trinidadStyles.css"/>
> </head>
> <body>
>
> <table cellpadding="0" cellspacing="0" border="0" class="af|train">
> <tbody>
> <tr>
> <!-- MARGIN -->
> <td rowspan="2"><div
> class="af|train::margin-start"><span></span></div></td>
>
> <!-- PARENT START -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td>
> <div class="af|train::parent-start-icon-block">
> <img src="af|train::parent-start-icon"/>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div
> class="af|train::parent-spacer"><span></span></div></td>
>
> <!-- OVERFLOW START -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join-overflow"><span></span></div>
> </td>
> <td>
> <div class="af|train::overflow-icon-block">
> <img src="af|train::overflow-start-icon:visited"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join-overflow
> af|train::join-overflow:visited">
> <span></span></div></td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af|train::stop-spacer
> af|train::join-overflow:visited"><span></span></div></td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join
> af|train::join-overflow:visited">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:visited"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:visited">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <!-- spacer -->
> <td>
> <div class="af|train::stop-spacer af|train::join:visited">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:visited">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:active"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:unvisited">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer af|train::join:unvisited">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:unvisited">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:unvisited"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af|train::stop-spacer
> af|train::join:disabled"><span></span></div></td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer af|train::join:disabled">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer af|train::join:disabled">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join
> af|train::join-overflow:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer
> af|train::join-overflow:disabled">
> <span></span>
> </div>
> </td>
>
> <!-- OVERFLOW END -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join
> af|train::join-overflow:disabled">
> <span></span></div></td>
> <td style="width:1px;">
> <div class="af|train::overflow-icon-block">
> <img src="af|train::overflow-end-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join-overflow">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div
> class="af|train::parent-spacer"><span></span></div></td>
>
> <!-- PARENT END -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td>
> <div class="af|train::parent-end-icon-block">
> <img src="af|train::parent-end-icon"/>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td rowspan="2"><div
> class="af|train::margin-end"><span></span></div></td>
> </tr>
>
> <tr>
> <td>
> <div class="af|train::parent-start-content"></div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::overflow-start-content">
> <a href="" class="af|train::overflow-link:visited">Previous</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:visited">
> <a href="" class="af|train::stop-link
> af|train::stop-link:visited">stop 1</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content af|train::stop-content:active">
> <a href="" class="af|train::stop-link
> af|train::stop-link:active">stopstopstop 2</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:unvisited">
> <a href="" class="af|train::stop-link
> af|train::stop-link:unvisited">stop 3</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:disabled">
> <a href="" class="af|train::stop-link
> af|train::stop-link:disabled">stop 4</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:disabled">
> <a href="" class="af|train::stop-link
> af|train::stop-link:disabled">stopstopstop 5</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:disabled">
> <a href="" class="af|train::stop-link
> af|train::stop-link:disabled">stopstop 6</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::overflow-end-content">
> <a href="" class="af|train::overflow-link:disabled">More</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::parent-end-content"></div>
> </td>
>
> </tr>
> </tbody>
> </table>
>
> </body>
> </html>
>
>
>
>
> - Pavitra
>
> -----Original Message-----
> From: Pavitra Subramaniam [mailto:pavitra.subramaniam@oracle.com]
> Sent: Friday, July 28, 2006 6:28 PM
> To: adffaces-user@incubator.apache.org
> Cc: Simon_Lessard@DMR.CA
> Subject: RE: ProcessTrain enhancement
>
> Hello,
>
> I would like to propose an updated set of skin selectors for the
> processTrain component. Basically I have removed the use of start and
> end icons for stops and overflows. I also had to introduce new skin
> hooks for parent process.
>
> Please review the attached train-skin-selector.rtf and let me know if
> these hooks are fine. I have not added the rtl cases, but will add
> them once we agree on the basic ltr list.
>
> I have also attached a sample HTML page (train_trinidad.html) and CSS
> file
> (trinidadStyles.css) to demonstrate how these styles will be used.
> (style names in HTML file has been modified to be compliant with CSS2).
>
> - the joins are now background-colors rather than images. This makes
> it simpler.
> - the only icons are the stops, overflows and parent train. If the
> icons are the same dimensions then the HTML works best (otherwise some
> tweaking is required in CSS).
>
> Thanks
> - Pavitra
>
> -----Original Message-----
> From: Simon_Lessard@DMR.CA [mailto:Simon_Lessard@DMR.CA]
> Sent: Thursday, July 06, 2006 10:32 AM
> To: adffaces-user@incubator.apache.org
> Subject: Re: ProcessTrain enhancement
>
> next/prev terminology sounds good enough for me.
>
> The hard part using a whole icon for the station is the visual link
> between the stations around the active station. If you want the link
> to be of a different color on the visited side than on the unvisited
> side, splitting the icon become mandatory as the visual link is
> rendered as a background-image. Of course, it would be possible to use
> a whole icon for all but the active one. Would that be better?
>
> As for pseudo-class, I'm totally for it.
>
> Finally, for the background-image in the style class instead of the
> background attribute, it's relatively complex because of the outer
> edges of the process train since those should not use the background
> image. Of course I could keep both selector I have currently, that is
> the base and the -icon. (for example
> af|processTrain::join-icon:visited and
> af|processTrain::station:visited ) and apply both classes when the
> background image is required. Does that sounds good to you?
>
> Regards,
>
> Simon Lessard
> Fujitsu Consulting
>
>
>
>
>
> Jeanne Waldman <je...@oracle.com>
> 2006-07-06 13:20
> Please respond to adffaces-user
>
> To: adffaces-user@incubator.apache.org
> cc:
> Subject: Re: ProcessTrain enhancement
>
>
> What are 'joints'? I think I had been calling them 'joins'.
> I also use the 'next'/'prev' terminology instead of backwards and
> forwards.
>
> Also, I'd recommend rewriting the simple renderer so that you can use
> a whole visited icon, a disabled icon, etc, instead of a start
> visited, an end visited. I know this is how it was in the oracle
> renderer, which I suspect you are looking at, but I always thought that was ugly.
> You could simplify the skinning api a lot if you didn't worry about
> making it exactly like the oracle skin, where we colored the joining
> line to the icons. I'd just keep those the same.
>
> A direction we are heading towards is to use pseudo-classes for 'state'.
> We have implemented this for the form controls. For example, when the
> af:inputText component is in the disabled state, the new skinning key
> is
> this:
>
> af|inputText:disabled {} and the html we render is <span
> class="af_inputText p_AFDisabled">
> and the css rule is:
> af_inputText.p_AFDisabled {}.
>
> This is a fairly new convention, and only the form controls are
> implemented this way so far, but we want to move in this direction.
>
> So you'd have
>
> af|processTrain::joint-icon:visited, and we'd parse this to be the
> af_processTrain_joint-icon_visited, or something like that.
>
>
> Also, we don't render style classes on the background attribute, as
> far as
>
> I know. Instead we render it on the class attribute, and in the style
> class definition, they could set the background-image attribute.
>
>
>
> Simon_Lessard@DMR.CA wrote:
>
> >Hello,
> >
> >I'm currently working to modify the processTrain to accept more skin
> >selectors in order to open all icons provided by Oracle skin. The
> >selectors I plan to add are:
> >
> > // processTrain styles used for the disabled links public static
> > final String AF_PROCESS_TRAIN_TEXT_STYLE_CLASS =
> > "af|processTrain::text";
> >
> > // For outer margins
> > public static final String AF_PROCESS_TRAIN_MARGIN_START_STYLE_CLASS =
> > "af|processTrain::margin-start";
> > public static final String AF_PROCESS_TRAIN_MARGIN_END_STYLE_CLASS =
> > "af|processTrain::margin-end";
> >
> > // For inner spacing
> > public static final String AF_PROCESS_TRAIN_SPACING_STYLE_CLASS =
> > "af|processTrain::step-spacing";
> >
> > // For active steps
> > public static final String AF_PROCESS_TRAIN_ACTIVE_START_ICON_NAME =
> > "af|processTrain::step-active-start-icon";
> > public static final String AF_PROCESS_TRAIN_ACTIVE_END_ICON_NAME =
> > "af|processTrain::step-active-end-icon";
> >
> > // For visited steps
> > public static final String AF_PROCESS_TRAIN_VISITED_START_ICON_NAME =
> > "af|processTrain::step-visited-start-icon";
> > public static final String AF_PROCESS_TRAIN_VISITED_END_ICON_NAME =
> > "af|processTrain::step-visited-end-icon";
> >
> > // For unvisited steps
> > public static final String
> > AF_PROCESS_TRAIN_UNVISITED_START_ICON_NAME =
>
>
> > "af|processTrain::step-unvisited-start-icon";
> > public static final String AF_PROCESS_TRAIN_UNVISITED_END_ICON_NAME =
> > "af|processTrain::step-unvisited-end-icon";
> >
> > // For disabled steps
> > public static final String AF_PROCESS_TRAIN_DISABLED_START_ICON_NAME =
> > "af|processTrain::step-disabled-start-icon";
> > public static final String AF_PROCESS_TRAIN_DISABLED_END_ICON_NAME =
> > "af|processTrain::step-disabled-end-icon";
> >
> > // For joints
> > public static final String AF_PROCESS_TRAIN_JOINT_VISITED_ICON_NAME =
> > "af|processTrain::joint-visited-icon";
> > public static final String
> > AF_PROCESS_TRAIN_JOINT_UNVISITED_ICON_NAME =
>
>
> > "af|processTrain::joint-unvisited-icon";
> >
> > // For backward overflows
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_STYLE_CLASS =
> > "af|processTrain::overflow-backward";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_START_ICON_NAME =
> > "af|processTrain::overflow-backward-start-icon";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_END_ICON_NAME =
> > "af|processTrain::overflow-backward-end-icon";
> >
> > // For forward overflows
> > public static final String
> AF_PROCESS_TRAIN_OVERFLOW_FORWARD_STYLE_CLASS
> >=
> > "af|processTrain::overflow-forward";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_FORWARD_START_ICON_NAME =
> > "af|processTrain::overflow-forward-start-icon";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_FORWARD_END_ICON_NAME =
> > "af|processTrain::overflow-forward-end-icon";
> >
> >The target HTML structure for the process train in LtR mode is:
> >
> ><table align="center" border="0" cellpadding="0" cellspacing="0"
> >class="af|processTrain">
> > <tbody>
> > <tr>
> > <td class="af|processTrain::margin-start" rowspan="2"></td>
> >
> > <td align="right" class="af|processTrain::overflow-backward">
> > <img src="af|processTrain::overflow-backward-start-icon"
> >title="%step-label%" alt="%step-label% : previous set"/>
> > </td>
> > <td background="af|processTrain::joint-visited-icon" align="left"
> >class="af|processTrain::overflow-backward>
> > <img src="af|processTrain::overflow-backward-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-visited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-visited-icon" align="right"
> >class="af|processTrain::step-visited">
> > <img src="af|processTrain::step-visited-start-icon"
> >title="%step-label%" alt="%step-label% : previous step"/>
> > </td>
> > <td background="af|processTrain::joint-visited-icon" align="left"
> >class="af|processTrain::step-visited">
> > <img src="af|processTrain::step-visited-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-visited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-visited-icon" align="right"
> >class="af|processTrain::step-active">
> > <img src="af|processTrain::step-active-start-icon"
> >title="%step-label%" alt="%step-label% : active step"/>
> > </td>
> > <td background="af|processTrain::joint-unvisited-icon" align="left"
>
>
> >class="af|processTrain::step-active">
> > <img src="af|processTrain::step-active-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-unvisited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-unvisited-icon"
> align="right"
> >class="af|processTrain::step-unvisited">
> > <img src="af|processTrain::step-unvisited-start-icon"
> >title="%step-label%" alt="%step-label% : next step"/>
> > </td>
> > <td background="af|processTrain::joint-unvisited-icon" align="left"
>
>
> >class="af|processTrain::step-unvisited">
> > <img src="af|processTrain::step-unvisited-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-unvisited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-unvisited-icon"
> align="right"
> >class="af|processTrain::overflow-forward">
> > <img src="af|processTrain::overflow-forward-start-icon"
> >title="%step-label%" alt="%step-label% : next set"/>
> > </td>
> > <td align="left" class="af|processTrain::overflow-forward">
> > <img src="af|processTrain::overflow-forward-end-icon" alt="">
> > </td>
> >
> > <td class="af|processTrain::margin-end" rowspan="2"></td>
> > </tr>
> > <tr>
> > <td colspan="2" class="af|processTrain::overflow-backward">
> > <a class="af|processTrain::link">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::step-visited">
> > <a class="af|processTrain::link">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::step-active">
> > <a class="af|processTrain::link">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::step-unvisited">
> > <a class="af|processTrain::text">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::overflow-forward">
> > <a class="af|processTrain::text">%step-label%</a>
> > </td>
> > </tr>
> > </tbody>
> ></table>
> >
> >Is that ok with you?
> >
> >Simon Lessard
> >DMR Conseil Inc. (http://www.dmrconseil.ca) Tlphone : (418) 653-6881
> >
> >Sun Certified Programmer for Java 2 Platform 1.4
> >
> >
>
>
>
>
>
>
>
>
Re: ProcessTrain Skin Selectors
Posted by Adam Winer <aw...@gmail.com>.
+1 to these changes. Pavitra, have these been attached
to a JIRA issue?
-- Adam
On 8/1/06, Simon_Lessard@dmr.ca <Si...@dmr.ca> wrote:
>
> Looks great to me! Thank Pavitra.
>
> Simon Lessard
> Fujitsu Consulting
>
>
>
>
> "Pavitra Subramaniam" <pa...@oracle.com>
> 2006-08-01 15:30
> Please respond to adffaces-user
>
> To: "adffaces-user@incubator.apache.org"
> <ad...@incubator.apache.org>
> cc: "Simon_Lessard@DMR.CA" <Si...@DMR.CA>
> Subject: ProcessTrain Skin Selectors
>
>
> Hello all,
>
> It looks like the attachments I sent never really made it. I am proposing
> that we rename the skin selectors for the train component, from
> "af|processTrain" to "af|train" and the element "step" to "stop". This is
> to keep the skin selectors in synch with the renaming and also to
> reinforce that trains need not necessarily be tied to a multi-step
> process.
>
> Please also see my email below, from last week explaining the new skin
> selectors I have introduced for this component.
>
>
> ------------------------------------------------------------------------------------
> SKIN SELECTORS
>
> ------------------------------------------------------------------------------------
> /***********************************
> Train Styles
> ***********************************/
> /* top level style class for the train component */
> af|train
>
> /***********************************
> Joins
> ***********************************/
> /* for joins between the overflow icons and the stops */
> af|train::join-overflow
>
> /* join (between overflow and stop icons) in disabled state */
> af|train::join-overflow:disabled
>
> /* join (between overflow and stop icons) in visited state */
> af|train::join-overflow:visited
>
> /* join (between overflow and stop icons) in unvisited state */
> af|train::join-overflow:unvisited
>
> /* for joins between stops */
> af|train::join
>
> /* join in visited state */
> af|train::join:visited
>
> /* join in unvisited state */
> af|train::join:unvisited
>
> /* join in disabled state */
> af|train::join:disabled
>
> /***********************************
> Spacers
> ***********************************/
> /* spacer used between stops */
> af|train::stop-spacer
>
> /* spacer used between parent train and stops */
> af|train::parent-spacer
>
> /* spacer used for margins in the beginning and end of the train */
> af|train::margin-start
> af|train::margin-end
>
> /*********************************************************
> Icons blocks and icons: Parent Train, Stop & Overflow
> *********************************************************/
> /* block that displays the parent start icon*/
> af|train::parent-start-icon-block
>
> /* block that displays the parent start icon*/
> af|train::parent-end-icon-block
>
> /* icon to indicate a parent process in the beginning of a sub train */
> af|train::parent-start-icon
>
> /* icon to indicate a parent process in the end of a sub train */
> af|train::parent-end-icon
>
> /* block that displays the overflow image */
> af|train::overflow-icon-block
>
> /* overflow start icon in visited state (indicates presence of previous
> stops) */
> af|train::overflow-start-visited-icon
>
> /* overflow start icon in disabled state (indicates presence of previous
> stops) */
> af|train::overflow-start-disabled-icon
>
> /* overflow end icon in disabled state (indicates presence of more stops)
> */
> af|train::overflow-end-disabled-icon
>
> /* overflow end icon in unvisited state (indicates presence of more stops)
> */
> af|train::overflow-end-unvisited-icon
>
> /* block that displays a stop icon (active/disabled/visited/unvisited) */
> af|train::stop-icon-block
>
> /* stop icon in visited state */
> af|train::stop-visited-icon
>
> /* stop icon in active state */
> af|train::stop-active-icon
>
> /* stop icon in unvisited state */
> af|train::stop-unvisited-icon
>
> /* stop icon in disabled state */
> af|train::stop-disabled-icon
>
> /************************************************
> Labels and Links: parentTrain, overflow & stop
> ************************************************/
> /*
> content area in the beginning of the train, to display the parent
> process
> name
> */
> af|train::parent-start-content
>
> /* content area in the end of the train, to display the parent process
> name */
> af|train::parent-end-content
>
> /*
> content area to display the overflow label in the beginning and end of
> the
> train
> */
> af|train::overflow-start-content
> af|train::overflow-end-content
>
> /* content area to display the stop name */
> af|train::stop-content
>
> /* content area that displays the name of the stop in visited state */
> af|train::stop-content:visited
>
> /* block that displays the name of the stop in disabled state */
> af|train::stop-content:disabled
>
> /* block that displays the name of the stop in unvisited state */
> af|train::stop-content:unvisited
>
> /* block that displays the name of the stop in active state */
> af|train::stop-content:active
>
> /* link for a stop */
> af|train::stop-link
>
> /* link for an unvisited stop */
> af|train::stop-link:unvisited
>
> /* link for an visited stop */
> af|train::stop-link:visited
>
> /* link for an active stop */
> af|train::stop-link:active
>
> /* link for an disabled stop */
> af|train::stop-link:disabled
>
> /* link for an overflow in disabled state */
> af|train::overflow-link:disabled
>
> /* link for an overflow in visited state */
> af|train::overflow-link:visited
>
> /* link for an overflow in unvisited state */
> af|train::overflow-link:unvisited
>
>
> ------------------------------------------------------------------------------------
> SAMPLE TRAIN HTML PAGE
> - Shows how the skin selectors will be used in the HTML page
>
> ------------------------------------------------------------------------------------
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
> http://www.w3.org/TR/html4/strict.dtd">
> <html>
> <head>
> <title>Line example</title>
> <link rel="stylesheet" charset="UTF-8" type="text/css"
> href="css/trinidadStyles.css"/>
> </head>
> <body>
>
> <table cellpadding="0" cellspacing="0" border="0" class="af|train">
> <tbody>
> <tr>
> <!-- MARGIN -->
> <td rowspan="2"><div
> class="af|train::margin-start"><span></span></div></td>
>
> <!-- PARENT START -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td>
> <div class="af|train::parent-start-icon-block">
> <img src="af|train::parent-start-icon"/>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af|train::parent-spacer"><span></span></div></td>
>
> <!-- OVERFLOW START -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join-overflow"><span></span></div>
> </td>
> <td>
> <div class="af|train::overflow-icon-block">
> <img src="af|train::overflow-start-icon:visited"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join-overflow
> af|train::join-overflow:visited">
> <span></span></div></td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af|train::stop-spacer
> af|train::join-overflow:visited"><span></span></div></td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join
> af|train::join-overflow:visited">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:visited"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:visited">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <!-- spacer -->
> <td>
> <div class="af|train::stop-spacer af|train::join:visited">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:visited">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:active"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:unvisited">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer af|train::join:unvisited">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:unvisited">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:unvisited"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af|train::stop-spacer
> af|train::join:disabled"><span></span></div></td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer af|train::join:disabled">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer af|train::join:disabled">
> <span></span>
> </div>
> </td>
>
> <!-- stop -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join af|train::join:disabled">
> <span></span></div></td>
> <td>
> <div class="af|train::stop-icon-block">
> <img src="af|train::stop-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join
> af|train::join-overflow:disabled">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td>
> <div class="af|train::stop-spacer
> af|train::join-overflow:disabled">
> <span></span>
> </div>
> </td>
>
> <!-- OVERFLOW END -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td width="50%">
> <div class="af|train::join
> af|train::join-overflow:disabled">
> <span></span></div></td>
> <td style="width:1px;">
> <div class="af|train::overflow-icon-block">
> <img src="af|train::overflow-end-icon:disabled"/>
> </div>
> </td>
> <td width="50%">
> <div class="af|train::join-overflow">
> <span></span>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td><div class="af|train::parent-spacer"><span></span></div></td>
>
> <!-- PARENT END -->
> <td>
> <table cellpadding="0" cellspacing="0" border="0" width="100%">
> <tbody>
> <tr>
> <td>
> <div class="af|train::parent-end-icon-block">
> <img src="af|train::parent-end-icon"/>
> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
>
> <td rowspan="2"><div
> class="af|train::margin-end"><span></span></div></td>
> </tr>
>
> <tr>
> <td>
> <div class="af|train::parent-start-content"></div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::overflow-start-content">
> <a href="" class="af|train::overflow-link:visited">Previous</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:visited">
> <a href="" class="af|train::stop-link
> af|train::stop-link:visited">stop 1</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content af|train::stop-content:active">
> <a href="" class="af|train::stop-link
> af|train::stop-link:active">stopstopstop 2</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:unvisited">
> <a href="" class="af|train::stop-link
> af|train::stop-link:unvisited">stop 3</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:disabled">
> <a href="" class="af|train::stop-link
> af|train::stop-link:disabled">stop 4</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:disabled">
> <a href="" class="af|train::stop-link
> af|train::stop-link:disabled">stopstopstop 5</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::stop-content
> af|train::stop-content:disabled">
> <a href="" class="af|train::stop-link
> af|train::stop-link:disabled">stopstop 6</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::overflow-end-content">
> <a href="" class="af|train::overflow-link:disabled">More</a>
> </div>
> </td>
> <td></td>
>
> <td>
> <div class="af|train::parent-end-content"></div>
> </td>
>
> </tr>
> </tbody>
> </table>
>
> </body>
> </html>
>
>
>
>
> - Pavitra
>
> -----Original Message-----
> From: Pavitra Subramaniam [mailto:pavitra.subramaniam@oracle.com]
> Sent: Friday, July 28, 2006 6:28 PM
> To: adffaces-user@incubator.apache.org
> Cc: Simon_Lessard@DMR.CA
> Subject: RE: ProcessTrain enhancement
>
> Hello,
>
> I would like to propose an updated set of skin selectors for the
> processTrain component. Basically I have removed the use of start and end
> icons for stops and overflows. I also had to introduce new skin hooks for
> parent process.
>
> Please review the attached train-skin-selector.rtf and let me know if
> these hooks are fine. I have not added the rtl cases, but will add them
> once we agree on the basic ltr list.
>
> I have also attached a sample HTML page (train_trinidad.html) and CSS file
> (trinidadStyles.css) to demonstrate how these styles will be used. (style
> names in HTML file has been modified to be compliant with CSS2).
>
> - the joins are now background-colors rather than images. This makes it
> simpler.
> - the only icons are the stops, overflows and parent train. If the icons
> are the same dimensions then the HTML works best (otherwise some tweaking
> is required in CSS).
>
> Thanks
> - Pavitra
>
> -----Original Message-----
> From: Simon_Lessard@DMR.CA [mailto:Simon_Lessard@DMR.CA]
> Sent: Thursday, July 06, 2006 10:32 AM
> To: adffaces-user@incubator.apache.org
> Subject: Re: ProcessTrain enhancement
>
> next/prev terminology sounds good enough for me.
>
> The hard part using a whole icon for the station is the visual link
> between the stations around the active station. If you want the link to be
> of a different color on the visited side than on the unvisited side,
> splitting the icon become mandatory as the visual link is rendered as a
> background-image. Of course, it would be possible to use a whole icon for
> all but the active one. Would that be better?
>
> As for pseudo-class, I'm totally for it.
>
> Finally, for the background-image in the style class instead of the
> background attribute, it's relatively complex because of the outer edges
> of the process train since those should not use the background image. Of
> course I could keep both selector I have currently, that is the base and
> the -icon. (for example af|processTrain::join-icon:visited and
> af|processTrain::station:visited ) and apply both classes when the
> background image is required. Does that sounds good to you?
>
> Regards,
>
> Simon Lessard
> Fujitsu Consulting
>
>
>
>
>
> Jeanne Waldman <je...@oracle.com>
> 2006-07-06 13:20
> Please respond to adffaces-user
>
> To: adffaces-user@incubator.apache.org
> cc:
> Subject: Re: ProcessTrain enhancement
>
>
> What are 'joints'? I think I had been calling them 'joins'.
> I also use the 'next'/'prev' terminology instead of backwards and
> forwards.
>
> Also, I'd recommend rewriting the simple renderer so that you can use a
> whole visited icon, a disabled icon, etc, instead of a start visited, an
> end visited. I know this is how it was in the oracle renderer, which I
> suspect you are looking at, but I always thought that was ugly.
> You could simplify the skinning api a lot if you didn't worry about making
> it exactly like the oracle skin, where we colored the joining line to the
> icons. I'd just keep those the same.
>
> A direction we are heading towards is to use pseudo-classes for 'state'.
> We have implemented this for the form controls. For example, when the
> af:inputText component is in the disabled state, the new skinning key is
> this:
>
> af|inputText:disabled {} and the html we render is <span
> class="af_inputText p_AFDisabled">
> and the css rule is:
> af_inputText.p_AFDisabled {}.
>
> This is a fairly new convention, and only the form controls are
> implemented this way so far, but we want to move in this direction.
>
> So you'd have
>
> af|processTrain::joint-icon:visited, and we'd parse this to be the
> af_processTrain_joint-icon_visited, or something like that.
>
>
> Also, we don't render style classes on the background attribute, as far as
>
> I know. Instead we render it on the class attribute, and in the style
> class definition, they could set the background-image attribute.
>
>
>
> Simon_Lessard@DMR.CA wrote:
>
> >Hello,
> >
> >I'm currently working to modify the processTrain to accept more skin
> >selectors in order to open all icons provided by Oracle skin. The
> >selectors I plan to add are:
> >
> > // processTrain styles used for the disabled links
> > public static final String AF_PROCESS_TRAIN_TEXT_STYLE_CLASS =
> > "af|processTrain::text";
> >
> > // For outer margins
> > public static final String AF_PROCESS_TRAIN_MARGIN_START_STYLE_CLASS =
> > "af|processTrain::margin-start";
> > public static final String AF_PROCESS_TRAIN_MARGIN_END_STYLE_CLASS =
> > "af|processTrain::margin-end";
> >
> > // For inner spacing
> > public static final String AF_PROCESS_TRAIN_SPACING_STYLE_CLASS =
> > "af|processTrain::step-spacing";
> >
> > // For active steps
> > public static final String AF_PROCESS_TRAIN_ACTIVE_START_ICON_NAME =
> > "af|processTrain::step-active-start-icon";
> > public static final String AF_PROCESS_TRAIN_ACTIVE_END_ICON_NAME =
> > "af|processTrain::step-active-end-icon";
> >
> > // For visited steps
> > public static final String AF_PROCESS_TRAIN_VISITED_START_ICON_NAME =
> > "af|processTrain::step-visited-start-icon";
> > public static final String AF_PROCESS_TRAIN_VISITED_END_ICON_NAME =
> > "af|processTrain::step-visited-end-icon";
> >
> > // For unvisited steps
> > public static final String AF_PROCESS_TRAIN_UNVISITED_START_ICON_NAME =
>
>
> > "af|processTrain::step-unvisited-start-icon";
> > public static final String AF_PROCESS_TRAIN_UNVISITED_END_ICON_NAME =
> > "af|processTrain::step-unvisited-end-icon";
> >
> > // For disabled steps
> > public static final String AF_PROCESS_TRAIN_DISABLED_START_ICON_NAME =
> > "af|processTrain::step-disabled-start-icon";
> > public static final String AF_PROCESS_TRAIN_DISABLED_END_ICON_NAME =
> > "af|processTrain::step-disabled-end-icon";
> >
> > // For joints
> > public static final String AF_PROCESS_TRAIN_JOINT_VISITED_ICON_NAME =
> > "af|processTrain::joint-visited-icon";
> > public static final String AF_PROCESS_TRAIN_JOINT_UNVISITED_ICON_NAME =
>
>
> > "af|processTrain::joint-unvisited-icon";
> >
> > // For backward overflows
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_STYLE_CLASS =
> > "af|processTrain::overflow-backward";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_START_ICON_NAME =
> > "af|processTrain::overflow-backward-start-icon";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_END_ICON_NAME =
> > "af|processTrain::overflow-backward-end-icon";
> >
> > // For forward overflows
> > public static final String
> AF_PROCESS_TRAIN_OVERFLOW_FORWARD_STYLE_CLASS
> >=
> > "af|processTrain::overflow-forward";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_FORWARD_START_ICON_NAME =
> > "af|processTrain::overflow-forward-start-icon";
> > public static final String
> >AF_PROCESS_TRAIN_OVERFLOW_FORWARD_END_ICON_NAME =
> > "af|processTrain::overflow-forward-end-icon";
> >
> >The target HTML structure for the process train in LtR mode is:
> >
> ><table align="center" border="0" cellpadding="0" cellspacing="0"
> >class="af|processTrain">
> > <tbody>
> > <tr>
> > <td class="af|processTrain::margin-start" rowspan="2"></td>
> >
> > <td align="right" class="af|processTrain::overflow-backward">
> > <img src="af|processTrain::overflow-backward-start-icon"
> >title="%step-label%" alt="%step-label% : previous set"/>
> > </td>
> > <td background="af|processTrain::joint-visited-icon" align="left"
> >class="af|processTrain::overflow-backward>
> > <img src="af|processTrain::overflow-backward-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-visited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-visited-icon" align="right"
> >class="af|processTrain::step-visited">
> > <img src="af|processTrain::step-visited-start-icon"
> >title="%step-label%" alt="%step-label% : previous step"/>
> > </td>
> > <td background="af|processTrain::joint-visited-icon" align="left"
> >class="af|processTrain::step-visited">
> > <img src="af|processTrain::step-visited-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-visited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-visited-icon" align="right"
> >class="af|processTrain::step-active">
> > <img src="af|processTrain::step-active-start-icon"
> >title="%step-label%" alt="%step-label% : active step"/>
> > </td>
> > <td background="af|processTrain::joint-unvisited-icon" align="left"
>
>
> >class="af|processTrain::step-active">
> > <img src="af|processTrain::step-active-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-unvisited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-unvisited-icon"
> align="right"
> >class="af|processTrain::step-unvisited">
> > <img src="af|processTrain::step-unvisited-start-icon"
> >title="%step-label%" alt="%step-label% : next step"/>
> > </td>
> > <td background="af|processTrain::joint-unvisited-icon" align="left"
>
>
> >class="af|processTrain::step-unvisited">
> > <img src="af|processTrain::step-unvisited-end-icon" alt="">
> > </td>
> >
> > <td background="af|processTrain::joint-unvisited-icon" class="
> >af|processTrain::step-spacing"></td>
> >
> > <td background="af|processTrain::joint-unvisited-icon"
> align="right"
> >class="af|processTrain::overflow-forward">
> > <img src="af|processTrain::overflow-forward-start-icon"
> >title="%step-label%" alt="%step-label% : next set"/>
> > </td>
> > <td align="left" class="af|processTrain::overflow-forward">
> > <img src="af|processTrain::overflow-forward-end-icon" alt="">
> > </td>
> >
> > <td class="af|processTrain::margin-end" rowspan="2"></td>
> > </tr>
> > <tr>
> > <td colspan="2" class="af|processTrain::overflow-backward">
> > <a class="af|processTrain::link">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::step-visited">
> > <a class="af|processTrain::link">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::step-active">
> > <a class="af|processTrain::link">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::step-unvisited">
> > <a class="af|processTrain::text">%step-label%</a>
> > </td>
> > <td colspan="2" class="af|processTrain::overflow-forward">
> > <a class="af|processTrain::text">%step-label%</a>
> > </td>
> > </tr>
> > </tbody>
> ></table>
> >
> >Is that ok with you?
> >
> >Simon Lessard
> >DMR Conseil Inc. (http://www.dmrconseil.ca)
> >T�l�phone : (418) 653-6881
> >
> >Sun Certified Programmer for Java 2 Platform 1.4
> >
> >
>
>
>
>
>
>
>
>
Re: ProcessTrain Skin Selectors
Posted by Si...@DMR.CA.
Looks great to me! Thank Pavitra.
Simon Lessard
Fujitsu Consulting
"Pavitra Subramaniam" <pa...@oracle.com>
2006-08-01 15:30
Please respond to adffaces-user
To: "adffaces-user@incubator.apache.org"
<ad...@incubator.apache.org>
cc: "Simon_Lessard@DMR.CA" <Si...@DMR.CA>
Subject: ProcessTrain Skin Selectors
Hello all,
It looks like the attachments I sent never really made it. I am proposing
that we rename the skin selectors for the train component, from
"af|processTrain" to "af|train" and the element "step" to "stop". This is
to keep the skin selectors in synch with the renaming and also to
reinforce that trains need not necessarily be tied to a multi-step
process.
Please also see my email below, from last week explaining the new skin
selectors I have introduced for this component.
------------------------------------------------------------------------------------
SKIN SELECTORS
------------------------------------------------------------------------------------
/***********************************
Train Styles
***********************************/
/* top level style class for the train component */
af|train
/***********************************
Joins
***********************************/
/* for joins between the overflow icons and the stops */
af|train::join-overflow
/* join (between overflow and stop icons) in disabled state */
af|train::join-overflow:disabled
/* join (between overflow and stop icons) in visited state */
af|train::join-overflow:visited
/* join (between overflow and stop icons) in unvisited state */
af|train::join-overflow:unvisited
/* for joins between stops */
af|train::join
/* join in visited state */
af|train::join:visited
/* join in unvisited state */
af|train::join:unvisited
/* join in disabled state */
af|train::join:disabled
/***********************************
Spacers
***********************************/
/* spacer used between stops */
af|train::stop-spacer
/* spacer used between parent train and stops */
af|train::parent-spacer
/* spacer used for margins in the beginning and end of the train */
af|train::margin-start
af|train::margin-end
/*********************************************************
Icons blocks and icons: Parent Train, Stop & Overflow
*********************************************************/
/* block that displays the parent start icon*/
af|train::parent-start-icon-block
/* block that displays the parent start icon*/
af|train::parent-end-icon-block
/* icon to indicate a parent process in the beginning of a sub train */
af|train::parent-start-icon
/* icon to indicate a parent process in the end of a sub train */
af|train::parent-end-icon
/* block that displays the overflow image */
af|train::overflow-icon-block
/* overflow start icon in visited state (indicates presence of previous
stops) */
af|train::overflow-start-visited-icon
/* overflow start icon in disabled state (indicates presence of previous
stops) */
af|train::overflow-start-disabled-icon
/* overflow end icon in disabled state (indicates presence of more stops)
*/
af|train::overflow-end-disabled-icon
/* overflow end icon in unvisited state (indicates presence of more stops)
*/
af|train::overflow-end-unvisited-icon
/* block that displays a stop icon (active/disabled/visited/unvisited) */
af|train::stop-icon-block
/* stop icon in visited state */
af|train::stop-visited-icon
/* stop icon in active state */
af|train::stop-active-icon
/* stop icon in unvisited state */
af|train::stop-unvisited-icon
/* stop icon in disabled state */
af|train::stop-disabled-icon
/************************************************
Labels and Links: parentTrain, overflow & stop
************************************************/
/*
content area in the beginning of the train, to display the parent
process
name
*/
af|train::parent-start-content
/* content area in the end of the train, to display the parent process
name */
af|train::parent-end-content
/*
content area to display the overflow label in the beginning and end of
the
train
*/
af|train::overflow-start-content
af|train::overflow-end-content
/* content area to display the stop name */
af|train::stop-content
/* content area that displays the name of the stop in visited state */
af|train::stop-content:visited
/* block that displays the name of the stop in disabled state */
af|train::stop-content:disabled
/* block that displays the name of the stop in unvisited state */
af|train::stop-content:unvisited
/* block that displays the name of the stop in active state */
af|train::stop-content:active
/* link for a stop */
af|train::stop-link
/* link for an unvisited stop */
af|train::stop-link:unvisited
/* link for an visited stop */
af|train::stop-link:visited
/* link for an active stop */
af|train::stop-link:active
/* link for an disabled stop */
af|train::stop-link:disabled
/* link for an overflow in disabled state */
af|train::overflow-link:disabled
/* link for an overflow in visited state */
af|train::overflow-link:visited
/* link for an overflow in unvisited state */
af|train::overflow-link:unvisited
------------------------------------------------------------------------------------
SAMPLE TRAIN HTML PAGE
- Shows how the skin selectors will be used in the HTML page
------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Line example</title>
<link rel="stylesheet" charset="UTF-8" type="text/css"
href="css/trinidadStyles.css"/>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="af|train">
<tbody>
<tr>
<!-- MARGIN -->
<td rowspan="2"><div
class="af|train::margin-start"><span></span></div></td>
<!-- PARENT START -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>
<div class="af|train::parent-start-icon-block">
<img src="af|train::parent-start-icon"/>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::parent-spacer"><span></span></div></td>
<!-- OVERFLOW START -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join-overflow"><span></span></div>
</td>
<td>
<div class="af|train::overflow-icon-block">
<img src="af|train::overflow-start-icon:visited"/>
</div>
</td>
<td width="50%">
<div class="af|train::join-overflow
af|train::join-overflow:visited">
<span></span></div></td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::stop-spacer
af|train::join-overflow:visited"><span></span></div></td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join
af|train::join-overflow:visited">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:visited"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:visited">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- spacer -->
<td>
<div class="af|train::stop-spacer af|train::join:visited">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:visited">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:active"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:unvisited">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer af|train::join:unvisited">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:unvisited">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:unvisited"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::stop-spacer
af|train::join:disabled"><span></span></div></td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer af|train::join:disabled">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer af|train::join:disabled">
<span></span>
</div>
</td>
<!-- stop -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join af|train::join:disabled">
<span></span></div></td>
<td>
<div class="af|train::stop-icon-block">
<img src="af|train::stop-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join
af|train::join-overflow:disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af|train::stop-spacer
af|train::join-overflow:disabled">
<span></span>
</div>
</td>
<!-- OVERFLOW END -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join
af|train::join-overflow:disabled">
<span></span></div></td>
<td style="width:1px;">
<div class="af|train::overflow-icon-block">
<img src="af|train::overflow-end-icon:disabled"/>
</div>
</td>
<td width="50%">
<div class="af|train::join-overflow">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::parent-spacer"><span></span></div></td>
<!-- PARENT END -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>
<div class="af|train::parent-end-icon-block">
<img src="af|train::parent-end-icon"/>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td rowspan="2"><div
class="af|train::margin-end"><span></span></div></td>
</tr>
<tr>
<td>
<div class="af|train::parent-start-content"></div>
</td>
<td></td>
<td>
<div class="af|train::overflow-start-content">
<a href="" class="af|train::overflow-link:visited">Previous</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content
af|train::stop-content:visited">
<a href="" class="af|train::stop-link
af|train::stop-link:visited">stop 1</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content af|train::stop-content:active">
<a href="" class="af|train::stop-link
af|train::stop-link:active">stopstopstop 2</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content
af|train::stop-content:unvisited">
<a href="" class="af|train::stop-link
af|train::stop-link:unvisited">stop 3</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content
af|train::stop-content:disabled">
<a href="" class="af|train::stop-link
af|train::stop-link:disabled">stop 4</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content
af|train::stop-content:disabled">
<a href="" class="af|train::stop-link
af|train::stop-link:disabled">stopstopstop 5</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::stop-content
af|train::stop-content:disabled">
<a href="" class="af|train::stop-link
af|train::stop-link:disabled">stopstop 6</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::overflow-end-content">
<a href="" class="af|train::overflow-link:disabled">More</a>
</div>
</td>
<td></td>
<td>
<div class="af|train::parent-end-content"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
- Pavitra
-----Original Message-----
From: Pavitra Subramaniam [mailto:pavitra.subramaniam@oracle.com]
Sent: Friday, July 28, 2006 6:28 PM
To: adffaces-user@incubator.apache.org
Cc: Simon_Lessard@DMR.CA
Subject: RE: ProcessTrain enhancement
Hello,
I would like to propose an updated set of skin selectors for the
processTrain component. Basically I have removed the use of start and end
icons for stops and overflows. I also had to introduce new skin hooks for
parent process.
Please review the attached train-skin-selector.rtf and let me know if
these hooks are fine. I have not added the rtl cases, but will add them
once we agree on the basic ltr list.
I have also attached a sample HTML page (train_trinidad.html) and CSS file
(trinidadStyles.css) to demonstrate how these styles will be used. (style
names in HTML file has been modified to be compliant with CSS2).
- the joins are now background-colors rather than images. This makes it
simpler.
- the only icons are the stops, overflows and parent train. If the icons
are the same dimensions then the HTML works best (otherwise some tweaking
is required in CSS).
Thanks
- Pavitra
-----Original Message-----
From: Simon_Lessard@DMR.CA [mailto:Simon_Lessard@DMR.CA]
Sent: Thursday, July 06, 2006 10:32 AM
To: adffaces-user@incubator.apache.org
Subject: Re: ProcessTrain enhancement
next/prev terminology sounds good enough for me.
The hard part using a whole icon for the station is the visual link
between the stations around the active station. If you want the link to be
of a different color on the visited side than on the unvisited side,
splitting the icon become mandatory as the visual link is rendered as a
background-image. Of course, it would be possible to use a whole icon for
all but the active one. Would that be better?
As for pseudo-class, I'm totally for it.
Finally, for the background-image in the style class instead of the
background attribute, it's relatively complex because of the outer edges
of the process train since those should not use the background image. Of
course I could keep both selector I have currently, that is the base and
the -icon. (for example af|processTrain::join-icon:visited and
af|processTrain::station:visited ) and apply both classes when the
background image is required. Does that sounds good to you?
Regards,
Simon Lessard
Fujitsu Consulting
Jeanne Waldman <je...@oracle.com>
2006-07-06 13:20
Please respond to adffaces-user
To: adffaces-user@incubator.apache.org
cc:
Subject: Re: ProcessTrain enhancement
What are 'joints'? I think I had been calling them 'joins'.
I also use the 'next'/'prev' terminology instead of backwards and
forwards.
Also, I'd recommend rewriting the simple renderer so that you can use a
whole visited icon, a disabled icon, etc, instead of a start visited, an
end visited. I know this is how it was in the oracle renderer, which I
suspect you are looking at, but I always thought that was ugly.
You could simplify the skinning api a lot if you didn't worry about making
it exactly like the oracle skin, where we colored the joining line to the
icons. I'd just keep those the same.
A direction we are heading towards is to use pseudo-classes for 'state'.
We have implemented this for the form controls. For example, when the
af:inputText component is in the disabled state, the new skinning key is
this:
af|inputText:disabled {} and the html we render is <span
class="af_inputText p_AFDisabled">
and the css rule is:
af_inputText.p_AFDisabled {}.
This is a fairly new convention, and only the form controls are
implemented this way so far, but we want to move in this direction.
So you'd have
af|processTrain::joint-icon:visited, and we'd parse this to be the
af_processTrain_joint-icon_visited, or something like that.
Also, we don't render style classes on the background attribute, as far as
I know. Instead we render it on the class attribute, and in the style
class definition, they could set the background-image attribute.
Simon_Lessard@DMR.CA wrote:
>Hello,
>
>I'm currently working to modify the processTrain to accept more skin
>selectors in order to open all icons provided by Oracle skin. The
>selectors I plan to add are:
>
> // processTrain styles used for the disabled links
> public static final String AF_PROCESS_TRAIN_TEXT_STYLE_CLASS =
> "af|processTrain::text";
>
> // For outer margins
> public static final String AF_PROCESS_TRAIN_MARGIN_START_STYLE_CLASS =
> "af|processTrain::margin-start";
> public static final String AF_PROCESS_TRAIN_MARGIN_END_STYLE_CLASS =
> "af|processTrain::margin-end";
>
> // For inner spacing
> public static final String AF_PROCESS_TRAIN_SPACING_STYLE_CLASS =
> "af|processTrain::step-spacing";
>
> // For active steps
> public static final String AF_PROCESS_TRAIN_ACTIVE_START_ICON_NAME =
> "af|processTrain::step-active-start-icon";
> public static final String AF_PROCESS_TRAIN_ACTIVE_END_ICON_NAME =
> "af|processTrain::step-active-end-icon";
>
> // For visited steps
> public static final String AF_PROCESS_TRAIN_VISITED_START_ICON_NAME =
> "af|processTrain::step-visited-start-icon";
> public static final String AF_PROCESS_TRAIN_VISITED_END_ICON_NAME =
> "af|processTrain::step-visited-end-icon";
>
> // For unvisited steps
> public static final String AF_PROCESS_TRAIN_UNVISITED_START_ICON_NAME =
> "af|processTrain::step-unvisited-start-icon";
> public static final String AF_PROCESS_TRAIN_UNVISITED_END_ICON_NAME =
> "af|processTrain::step-unvisited-end-icon";
>
> // For disabled steps
> public static final String AF_PROCESS_TRAIN_DISABLED_START_ICON_NAME =
> "af|processTrain::step-disabled-start-icon";
> public static final String AF_PROCESS_TRAIN_DISABLED_END_ICON_NAME =
> "af|processTrain::step-disabled-end-icon";
>
> // For joints
> public static final String AF_PROCESS_TRAIN_JOINT_VISITED_ICON_NAME =
> "af|processTrain::joint-visited-icon";
> public static final String AF_PROCESS_TRAIN_JOINT_UNVISITED_ICON_NAME =
> "af|processTrain::joint-unvisited-icon";
>
> // For backward overflows
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_STYLE_CLASS =
> "af|processTrain::overflow-backward";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_START_ICON_NAME =
> "af|processTrain::overflow-backward-start-icon";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_BACKWARD_END_ICON_NAME =
> "af|processTrain::overflow-backward-end-icon";
>
> // For forward overflows
> public static final String
AF_PROCESS_TRAIN_OVERFLOW_FORWARD_STYLE_CLASS
>=
> "af|processTrain::overflow-forward";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_FORWARD_START_ICON_NAME =
> "af|processTrain::overflow-forward-start-icon";
> public static final String
>AF_PROCESS_TRAIN_OVERFLOW_FORWARD_END_ICON_NAME =
> "af|processTrain::overflow-forward-end-icon";
>
>The target HTML structure for the process train in LtR mode is:
>
><table align="center" border="0" cellpadding="0" cellspacing="0"
>class="af|processTrain">
> <tbody>
> <tr>
> <td class="af|processTrain::margin-start" rowspan="2"></td>
>
> <td align="right" class="af|processTrain::overflow-backward">
> <img src="af|processTrain::overflow-backward-start-icon"
>title="%step-label%" alt="%step-label% : previous set"/>
> </td>
> <td background="af|processTrain::joint-visited-icon" align="left"
>class="af|processTrain::overflow-backward>
> <img src="af|processTrain::overflow-backward-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-visited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-visited-icon" align="right"
>class="af|processTrain::step-visited">
> <img src="af|processTrain::step-visited-start-icon"
>title="%step-label%" alt="%step-label% : previous step"/>
> </td>
> <td background="af|processTrain::joint-visited-icon" align="left"
>class="af|processTrain::step-visited">
> <img src="af|processTrain::step-visited-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-visited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-visited-icon" align="right"
>class="af|processTrain::step-active">
> <img src="af|processTrain::step-active-start-icon"
>title="%step-label%" alt="%step-label% : active step"/>
> </td>
> <td background="af|processTrain::joint-unvisited-icon" align="left"
>class="af|processTrain::step-active">
> <img src="af|processTrain::step-active-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-unvisited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-unvisited-icon"
align="right"
>class="af|processTrain::step-unvisited">
> <img src="af|processTrain::step-unvisited-start-icon"
>title="%step-label%" alt="%step-label% : next step"/>
> </td>
> <td background="af|processTrain::joint-unvisited-icon" align="left"
>class="af|processTrain::step-unvisited">
> <img src="af|processTrain::step-unvisited-end-icon" alt="">
> </td>
>
> <td background="af|processTrain::joint-unvisited-icon" class="
>af|processTrain::step-spacing"></td>
>
> <td background="af|processTrain::joint-unvisited-icon"
align="right"
>class="af|processTrain::overflow-forward">
> <img src="af|processTrain::overflow-forward-start-icon"
>title="%step-label%" alt="%step-label% : next set"/>
> </td>
> <td align="left" class="af|processTrain::overflow-forward">
> <img src="af|processTrain::overflow-forward-end-icon" alt="">
> </td>
>
> <td class="af|processTrain::margin-end" rowspan="2"></td>
> </tr>
> <tr>
> <td colspan="2" class="af|processTrain::overflow-backward">
> <a class="af|processTrain::link">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::step-visited">
> <a class="af|processTrain::link">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::step-active">
> <a class="af|processTrain::link">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::step-unvisited">
> <a class="af|processTrain::text">%step-label%</a>
> </td>
> <td colspan="2" class="af|processTrain::overflow-forward">
> <a class="af|processTrain::text">%step-label%</a>
> </td>
> </tr>
> </tbody>
></table>
>
>Is that ok with you?
>
>Simon Lessard
>DMR Conseil Inc. (http://www.dmrconseil.ca)
>Téléphone : (418) 653-6881
>
>Sun Certified Programmer for Java 2 Platform 1.4
>
>