incubator-adffaces-user mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Simon_Less...@DMR.CA
Subject Re: ProcessTrain enhancement
Date Thu, 06 Jul 2006 17:32:14 GMT
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/alternative (inline, None, 0 bytes)
View raw message