ICEfaces
  1. ICEfaces
  2. ICE-1621

The <ice:inputFile/> "styleClass" property getting rendered with the word "Text" appended to the end

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Won't Fix
    • Affects Version/s: 1.6DR#4
    • Fix Version/s: 1.6DR#6, 1.6
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Win XP / Tomcat 5.5.17 / Liferay 4.3.0 (pre-release)

      Description

      In the attached sample portlet, the following code in View.jspx:

                          <ice:inputFile
                              id="inputFile1" actionListener="#{ResumeUploader.actionListener}"
                              binding="#{ResumeUploader.inputFile}" buttonClass="portlet-form-button" file="#{JobApplication.file}"
                              label="#{JobApplicationMsgs.uploadResume}"
                              progressListener="#{ResumeUploader.progressListener}" styleClass="portlet-form-input-field"/>

      Is causing the class attribute of the <input type="file"/> element within the IFRAME to be rendered like this:

      class="iceFileUploadText portlet-form-input-fieldText"/>

      Note that the word "Text" should not be at the end of "portlet-form-input-fieldText"

        Issue Links

          Activity

          Hide
          Adnan Durrani added a comment -

          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

          { background-color:red; }

          //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>

          Show
          Adnan Durrani added a comment - 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 { background-color:red; } //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>
          Hide
          Neil Griffin added a comment -

          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

          Show
          Neil Griffin added a comment - 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
          Hide
          Adnan Durrani added a comment -

          Neil,

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

          Show
          Adnan Durrani added a comment - Neil, Thanks to bring this into my consideration. I will talk to Deryk about it.

            People

            • Assignee:
              Unassigned
              Reporter:
              Neil Griffin
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: