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 ProcessTrain Skin Selectors
Date Tue, 01 Aug 2006 19:30:47 GMT
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 <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
View raw message