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 Skin Selectors
Date Tue, 01 Aug 2006 19:41:52 GMT
Looks great to me! Thank Pavitra.

Simon Lessard
Fujitsu Consulting




"Pavitra Subramaniam" <pavitra.subramaniam@oracle.com>
2006-08-01 15:30
Please respond to adffaces-user
 
        To:     "adffaces-user@incubator.apache.org" 
<adffaces-user@incubator.apache.org>
        cc:     "Simon_Lessard@DMR.CA" <Simon_Lessard@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 <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