Not yet. Will attach these to issue 60. Thanks - Pavitra
-----Original Message----- From: Adam Winer [mailto:[EMAIL PROTECTED] 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, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote: > > Looks great to me! Thank Pavitra. > > Simon Lessard > Fujitsu Consulting > > > > > "Pavitra Subramaniam" <[EMAIL PROTECTED]> > 2006-08-01 15:30 > Please respond to adffaces-user > > To: "adffaces-user@incubator.apache.org" > <adffaces-user@incubator.apache.org> > cc: "[EMAIL PROTECTED]" <[EMAIL PROTECTED]> > 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:[EMAIL PROTECTED] > Sent: Friday, July 28, 2006 6:28 PM > To: adffaces-user@incubator.apache.org > Cc: [EMAIL PROTECTED] > 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: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] > 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 <[EMAIL PROTECTED]> > 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. > > > > [EMAIL PROTECTED] 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 > > > > > > > > > > > >
