OASIS Mailing List ArchivesView the OASIS mailing list archive below
or browse/search using MarkMail.


Help: OASIS Mailing Lists Help | MarkMail Help

wsrp message

[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]

Subject: Re: [wsrp-comment] CSS classes

Here is my take on your questions:

1. Switching a link's font class on mouseover/out: I would suggest the mouseover is the special state and therefore use the dim class for it. I would note however that most browsers already provide some indication to the user that they are over a link and would therefore urge caution in making such a switch.

2. Fonts: It is expected that a number of the CSS classes will impact fonts. The portlet-font and portlet-font-dim are restricted to only impacting font attributes, while the other classes (msg, section, etc) can choose whether to specify font and other attributes. Reasonable examples include the msg classes specifying the font color and weight, but inheriting the font face and size. Overall, the definitions should use the CSS definitions for composing the styling rather than requiring a particular nesting.

3. I think realistic examples include:
portlet-msg-status: Most examples I can think of here are rather simplistic and therefore likely to be done in some other manner.

portlet-msg-info: Reasonable choice for highlighting to the user that they are about to cross some threshold (e.g. frequent flier miles are near qualifying for a roundtrip ticket)

portlet-msg-error: Notice that a form validation error happened and that a resubmit is needed after correction.

portlet-msg-alert: An example might be when submitted data has violated some policy and the user is being prompted to verify they want to proceed (e.g. travel itinerary violates company policy, but such violations are allowed under limited conditions)

portlet-msg-success: Notice that a transaction request (e.g. placing a order) has succeeded.

4. Sections are actually the more general purpose classes. When we began to examine their usage within a table structure, the table set was also introduced. Which are used will primarily be a question of how layout of the Portlet's markup is achieved.

5. portlet-table-text: This is designed to be an alternate textual style for information that does not want to be confused with the content of the table. People often put such things in a different font-face and style, but use of this class allows that to be standardized across the page.

6.D. portlet-icon-label:  This is for use labeling standard icons.

6.E. portlet-dlg-icon-label:  This is for use labeling icons appearing in dialogs. We found systems often specialize this labeling of an icon.

6.F. portlet-form-field-label:  This is for labeling form fields, both input fields and checkboxes ... the text is unfortunate.

6.F. portlet-form-field:  This is for noon-input type form fields.

7.A. I would encourage Consumers to set their base styles for things such as menus so that all the CSS attributes are set at the top level (menu, table or section) rather than have each portlet's rendition of these types of things differ simply because they chose different containment hierarchies.

7.D. The selected, hover and hover-selected classes provide a rich set of choices as to the user experience. Basically the hover and hover-selected classes relate to the mouse being over a menu item. While not all systems would want to style these differently, the choice is being put into the hands of the person designing the active CSS classes. The selected and hover-selected classes apply to the selected menu item, differing only in whether or not the mouse is over the menu item.

7.E. Your question about when a cascaded menu item shows up mixes changing visibility of a control with the styling issues of the control's appearance when it is visible. While hovering over a menu item with a cascaded submenu is often when it should be shown, it is not until the mouse leaves both the menu item and the cascaded menu that one wants to rehide the cascaded menu. This tends to be a bit more complicated than what is easily solved in CSS ...

7.G. portlet-menu-cascade-item-selected: This is used for a selected item in the submenu (it is likely the menu item also shows as selected).

7.I. No one made a case for a portlet menu caption being selected as this tends to be basic help info for the user.

I hope this has been helpful and would encourage other TC members to comment on any points where this is too explicitly my viewpoint.

Rich Thompson
IBM T.J. Watson Research Center / Yorktown Heights, NY


04/08/05 01:16 PM
Please respond to

[wsrp-comment] Public Comment

Comment from: kramirez@thejavathinktank.org

I'm in the middle of writing a book on Portlets and Portals for Addison Wesley and would like to cover the CSS class styles and am having some issues with some of the classes and I would like to see if you could please provide me with some feedback.

Perhaps it would be better if I gave you my understanding of where these classes would be used and let you know which ones don't make sense to me. Let's go through them one at a time:

1. Links (Anchors) - since no class is provided for this, I'm assuming that portlet-font or portlet-font-dim could be used here. If the developer or designer wishes to provide mouse over, both font classes could be used. One for mouse-out and one for mouse-over. However, the question on most developers minds will be "which one should I used for what".

2. Font - The description for these two classes states that "The font style definitions affect the font attributes only". However, it is difficult to define the other classes using some kind of inheritance on this class. In other words, say we define a class named portlet-font, how would we define portlet-msg-status to use the font specified in portlet-font? The only way that I can think of, would be to have nested div tags. The outer tag uses a class of portlet-font and the inner uses whatever else it needs (like portlet-msg-status). Would this work?

Is this how it was meant to be used?

Can you provide me with two realistic examples where it would make sense to use portlet-font and portlet-font-dim?

3. Messages - I can't think of a real-world example when I would just throw a message (such as the ones used in the spec example) on the current page being viewed by the user. The only thing I can come up with is perhaps providing some kind of message under each input control as the user enters the focus of the control (perhaps explaining what is expected in the input control, e.g. telephone number and format). Another example is when you popup a new window to let the user know what is happening, e.g. "Please wait while those flights are checked...".

Can you provide some realistic examples for:


4. Sections - This one threw me bit because it seems to be so close to Tables. The only thing I could imagine that you guys meant for their use is the classic example of a news story. A news story has a Headline, a possible subheader, body, and possibly a footer (containing the author's information and background). However, I can't see what purpose the alternate class would serve and I can't see the use for portlet-section-text (this one sounds like it should be the same as portlet-section-body). As for the portlet-section-selected, I could see this being used on a page that offers input selection for copy and paste operations (like a CMS input page). Am I right about my assumptions?

What other purposes would these classes serve?

5. Tables - the only one that wouldn't make sense to me is portlet-table-text. All of the rest make sense. Can you provide me with an explanation for portlet-table-text?

Where would you use it?

6. Forms - This one I want to make sure that I get right. So here's the classes and my thoughts or questions on them:

A. portlet-form-label - this is used for the Text that appears above or to the side of the form, which is used to introduce the form or perhaps name the form, e.g. "Customer Information".

B. portlet-form-input-field - this one is pretty obvious. The is the style for the input field.

C. portlet-form-button - again, pretty obvious. This could be used for the "Submit" or "Clear" buttons.

D. portlet-icon-label - "Text that appears beside a context dependent action icon." This makes no sense to me. Can you explain it in more detail please?

E. portlet-dlg-icon-label - "Text that appears beside a 'standard' icon". There is no such thing as a "standard" icon. Please explain.

F. portlet-form-field-label - I understand that this one is used for the text that appears next to a field. So, if you have an input box to collect someone's last name, the text "Last Name:" would use this class. Is this correct? What is mean by "Text for a separator of fields"? What is a separator of fields?

G. portlet-form-field - Not sure about this one. Is this used for the text that appears next to a radio button or check box? What about the text inside of listboxes or combo boxes? What class style do they use?

7. Menus - again, let's go through each one:

A. portlet-menu - General menu settings. Again, how would you inherit these general settings for use in the other class styles? Would you use nested div or spans (as described above)?

B. portlet-menu-item - this is the text that all non-selected items in the menu appear as by default (except for the caption, which uses menu caption class).

C. portlet-menu-item-selected - currently highlighted menu item (unless the mouse is over the highlight item, in which case the hover--selected is used).

D. portlet-menu-item-hover - this is used in the case of the mouse being inside of the item, but it is not selected? I'm not sure what the difference is when it is selected or hover or hover-selected, since most menus use them interchangeably.

E. portlet-menu-item-hover-selected - mouse is inside the area of the item and it is selected. However, wouldn't the menu disappear once you select something? Is this meant to be used when you select an item pressing the mouse button down but haven't released the button back up yet?

F. portlet-menu-cascade-item - this is used for the item that has a cascading submenu. Do you simply have to hover over the item to show this class or do non-selected or hovered items with submenus automatically appear with this class?

G. portlet-menu-cascade-item-selected - this is used to represent the selected item that has a submenu once you have physically selected and shown that item's submenu.

H. portlet-menu-description -  this could be used on the text in a pop-up bubble that would appear next to the item or on the window below the menu item.

I. portlet-menu-caption - this is used for the caption of the menu. What about the selected caption?  There doesn't appear to be a style class for that.

Thanks for all of your help...


[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]