incubator-adffaces-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Pavitra Subramaniam" <pavitra.subraman...@oracle.com>
Subject RE: ProcessTrain enhancement
Date Sat, 29 Jul 2006 01:28:13 GMT
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 <jeanne.waldman@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
> 
>




Mime
  • Unnamed multipart/mixed (inline, None, 0 bytes)
View raw message