Class CssStyle

  • All Implemented Interfaces:
    Serializable

    public class CssStyle
    extends ResourceElement
    Provides a Css HEAD element for including inline Cascading Stylesheets using the <style> tag.

    Example usage:

     public class MyPage extends Page {
    
         public List getHeadElements() {
             // We use lazy loading to ensure the CSS import is only added the
             // first time this method is called.
             if (headElements == null) {
                 // Get the header entries from the super implementation
                 headElements = super.getHeadElements();
    
                 CssStyle cssStyle = new CssStyle("body { font: 12px arial; }");
                 headElements.add(cssStyle);
             }
             return headElements;
         }
     } 
    The cssStyle instance will render as follows:
     <style type="text/css">
     body { font: 12px arial; }
     </style> 
    Below is an example showing how to render inline CSS from a Velocity template.

    First we create a Velocity template (/css/style-template.css) which contains the variable $context that must be replaced at runtime with the application context path:

     .blue {
         background: #00ff00 url('$context/css/blue.png') no-repeat fixed center;
     } 
    Next is the Page implementation:
     public class MyPage extends Page {
    
         public List getHeadElements() {
             // We use lazy loading to ensure the CSS is only added the first time
             // this method is called.
             if (headElements == null) {
                 // Get the head elements from the super implementation
                 headElements = super.getHeadElements();
    
                 Context context = getContext();
    
                 // Create a default template model to pass to the template
                 Map model = ClickUtils.createTemplateModel(this, context);
    
                 // Specify the path to CSS template
                 String templatePath = "/css/style-template.css";
    
                 // Create the inline Css for the given template path and model
                 CssStyle cssStyle = new CssStyle(templatePath, model);
                 headElements.add(cssStyle);
             }
             return headElements;
         }
     } 
    The Css above will render as follows (assuming the context path is myApp):
     <style type="text/css">
     .blue {
         background: #00ff00 url('/myApp/css/blue.png') no-repeat fixed center;
     }
     </style> 

    Character data (CDATA) support

    Sometimes it is necessary to wrap inline Css in CDATA tags. Two use cases are common for doing this:
    • For XML parsing: When using Ajax one often send back partial XML snippets to the browser, which is parsed as valid XML. However the XML parser will throw an error if the content contains reserved XML characters such as '&', '<' and '>'. For these situations it is recommended to wrap the style content inside CDATA tags.
    • XHTML validation: if you want to validate your site using an XHTML validator e.g: http://validator.w3.org/.
    To wrap the CSS Style content in CDATA tags, set setCharacterData(boolean) to true. Below is shown how the Css content would be rendered:
     <style type="text/css">
      /∗<![CDATA[∗/
    
      div > p {
        border: 1px solid black;
      }
    
      /∗]]>∗/
     </style> 
    Notice the CDATA tags are commented out which ensures older browsers that don't understand the CDATA tag, will ignore it and only process the actual content.

    For an overview of XHTML validation and CDATA tags please see http://javascript.about.com/library/blxhtml.htm.

    See Also:
    Serialized Form
    • Constructor Detail

      • CssStyle

        public CssStyle()
        Construct a new Css style element.
      • CssStyle

        public CssStyle​(String content)
        Construct a new Css style element with the given content.
        Parameters:
        content - the Css content
      • CssStyle

        public CssStyle​(String template,
                        Map<String,​Object> model)
        Construct a new Css style element for the given template path and template model.

        When the CssStyle is rendered the template and model will be merged and the result will be rendered together with any CssStyle content.

        For example:

         public class MyPage extends Page {
             public void onInit() {
                 Context context = getContext();
        
                 // Create a default template model
                 Map model = ClickUtils.createTemplateModel(this, context);
        
                 // Create CssStyle for the given template path and model
                 CssStyle style = new CssStyle("/mypage-template.css", model);
        
                 // Add style to the Page Head elements
                 getHeadElements().add(style);
             }
         } 
        Parameters:
        template - the path of the template to render
        model - the template model
    • Method Detail

      • getTag

        public String getTag()
        Returns the Css HTML tag: <style>.
        Overrides:
        getTag in class Element
        Returns:
        the Css HTML tag: <style>
      • getContent

        public String getContent()
        Return the CssStyle content.
        Returns:
        the CssStyle content
      • setContent

        public void setContent​(String content)
        Set the CssStyle content.
        Parameters:
        content - the CssStyle content
      • isCharacterData

        public boolean isCharacterData()
        Return true if the CssStyle's content should be wrapped in CDATA tags, false otherwise.
        Returns:
        true if the CssStyle's content should be wrapped in CDATA tags, false otherwise
      • setCharacterData

        public void setCharacterData​(boolean characterData)
        Sets whether the CssStyle's content should be wrapped in CDATA tags or not.
        Parameters:
        characterData - true indicates that the CssStyle's content should be wrapped in CDATA tags, false otherwise
      • getTemplate

        public String getTemplate()
        Return the path of the template to render.
        Returns:
        the path of the template to render
        See Also:
        setTemplate(String)
      • setTemplate

        public void setTemplate​(String template)
        Set the path of the template to render.

        If the template property is set, the template and model will be merged and the result will be rendered together with any CssStyle content.

        Parameters:
        template - the path of the template to render
      • setModel

        public void setModel​(Map<String,​Object> model)
        Set the model of the template to render.

        If the template property is set, the template and model will be merged and the result will be rendered together with any CssStyle content.

        Parameters:
        model - the model of the template to render
      • render

        public void render​(HtmlStringBuffer buffer)
        Render the HTML representation of the CssStyle element to the specified buffer.
        Overrides:
        render in class ResourceElement
        Parameters:
        buffer - the buffer to render output to
      • equals

        public boolean equals​(Object o)
        Overrides:
        equals in class Object
        Parameters:
        o - the object with which to compare this instance with
        Returns:
        true if the specified object is the same as this object
        See Also:
        Object.equals(Object)
      • renderContent

        protected void renderContent​(HtmlStringBuffer buffer)
        Render the CssStyle content to the specified buffer.

        Please note: if the template property is set, this method will merge the template and model and the result will be rendered, together with the CssStyle content, to the specified buffer.

        Parameters:
        buffer - the buffer to append the output to