Hi Neil,

This is part of the ICEfaces theme mechanism. As all of the custom components renders more then one html elements. So the developer might want to style more then one element on the component, in order to accomplish that a JSF component need to be defined number of styleClass attributes which makes the TLD bigger.

Let say inputFile component renders the following html:

<iframe>
<form>
<input type="file"/>
<input type="submit"/>
</form>
</iframe>

As we can see above, there are 3 important elements that can be styled:
1- iframe
Allow to set style on the root element (e.g.)height, width, bgcolor, padding etc

2- input(file)
Allow to set style on text field of file upload (e.g.) color, font, gbcolor etc

3- input(button).
Allow to set style for the upload button

As we already discussed that one way to style every element is to, have number of styleClass attributes on the component. However ICEfaces strategy is to use styleClass attribute to get the base class and generate rest of the classes using the base.

All ICEfaces extended and custom components have a default/base styleClass. For example the default class of inputFile is "iceFileUpload", We render the base class on the root element of the component and suffix the base class for other elements accordingly( e.g.)

.Jsp
//the style class has not defined, so the default will be used
<ice:inputFile />

Rendered Html

//the default class is "iceFileUpload"
<iframe class="iceFileUpload">
<form>
//we suffixed the base class with "Text"
<input type="file" class="iceFileUploadText"/>

//we suffixed the base class with "Button"
<input type="submit" class=""iceFileUploadButton"/>
</form>
</iframe>

As css allows to extend style classes, so it nice to get the benefit of overriding a style class. So the developer do not need to write style class from scratch. Suppose if I want to change the background color of the inputText only and keep the other default style intact. I can do the following:

*.jsp
<ice:inputFile styleClass="portletForm"/>

*.css
//I just need to define one class
.portletFormText

//We always render out the default classes so the user defined style class can extend it.
<iframe class="iceFileUpload portletForm">
<form>
<input type="file" class="iceFileUploadText portletFormText"/>
<input type="submit" class=""iceFileUploadButton portletFormButton"/>
</form>
</iframe>

Adnan,

Thank you for the very detailed explanation. I understand why you want to stick with "styleClass" being the only attribute, rather than adding more and more attributes to the component.

However, the current implementation is incompatible with portlet themes.

At this point, I'd like to direct your attention to this issue in general:
http://jira.icefaces.org/browse/ICE-1408

And in particular, my comment here:
http://jira.icefaces.org/browse/ICE-1408#action_18144

And Deryk's comment here:
http://jira.icefaces.org/browse/ICE-1408#action_18176

I think that if you detect the portlet environment, and automatically do this:

<input type"text" style="portlet-form-input-field"/>
<input type="submit" style="portlet-form-button"/>

And also, if portlet is detected, andthe styleClass attribute is specified like <ice:inputFile styleClass="yadayada"/>, then the styleClass attribute could be applied only to the <div> element only, then this would fix the whole component altogether.

I would appreciate it if you would please talk with Deryk about this.

Thanks so much,

Neil

Neil,

Thanks to bring this into my consideration. I will talk to Deryk about it.