CODEWITHSUNDEEP
csstemplateswicketwicket-6wicket-1.6
Jacek Cz
Jacek Cz

Reputation: 1906

Small CSS substitutions in Wicket pages and templates

Since years I develop Wicket pages in such way: when themat new, small, page markup (html) contains small CSS pieces. <wicket:head> local css </wicket:head> Method is comfortable when design has dynamic changes, is all-in-one.

when page grows, css block is extracted to separate Wicket resource. Can be better cached in browsers (in controlled way) etc.

Now I need to have optional color for example Button (link made with to Button CSS too), a inactive button. Wicket documentation is prepared to substitution in resources (a class designed to substitutions)`

.button 
{ color: ${forecolor} 
font-size: ${font} } ...
}`

I want similar substitutions on young CSS fragments in page markup, main Wicket tradition use it as constant. Suppose when interception of markup and replace, no one will criticize.

Application is for working people in firm, intranet, doesn't competitive with big media portal. I want to build "skin" concept but only in small range. Only few basic colours, font size in 3 places and that's all. Color non breakig to eyes, comfort to work.

I want to have (in future) 2-3, no more then 4 skins with color/font sets. Nobody will test "what to to, when all fonts we give 3x bigger", font range +/-20% only. Function "reset to fabricate setting" is the basis.

Questions: replacing within two places (html & css) is political correct in Wicket? Some technical ideas? Maybe exist ready library to keep parameters with session (for user) or global for all.

Customization will have moving small "gadget" Panels (like portlets but lighter) left margin / right or hide, ans that's all

BTW. I'w never been a graphic, but with few Myers books my skills in CSS is growing.

Upvotes: 0

Views: 278

Answers (2)

Robert Niestroj
Robert Niestroj

Reputation: 16131

If your application is an SPA then i would extract the varying classes into seperate CSS files adn then load them conditionally in your Page in renderHead()

We for example do it like this to conditionally load js depending on browser:

   public static JavaScriptHeaderItem getJqueryNumericJsHeaderItem() {
      ClientProperties browser = WebSession.get().getClientInfo().getProperties();
      if (browser.isBrowserInternetExplorer() && browser.getBrowserVersionMajor() <= 9) {
         return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.ie8.js"));
      }
      if (browser.isBrowserInternetExplorer() && browser.getBrowserVersionMajor() >= 10) {
         return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.ie11.js"));
      }
      return JavaScriptHeaderItem.forReference(jqNumericReference("numeric.js"));
   }

Alternative approach, which we use, is attach an CSS class to the <body> tag an then depend in CSS on this class. The Code:

  WebMarkupContainer body = new WebMarkupContainer("bodyElement") {
     @Override
     protected void onConfigure() {
        super.onConfigure();
        add(AttributeModifier.replace("class", getSkinBasedOnCondition()));
     }
  };

and then in CSS:

.skinA .button{
 color: red;
 font-size: 20px;
}

.skinB .button{
 color: blue;
 font-size: 30px;
}

Then you dont have conditional CSS loading. Just conditional adding one CSS class to the <body>.

Upvotes: 1

martin-g
martin-g

Reputation: 17513

Just use in the Page or in a Component/Behavior that is in the Page:

@Override public void renderHead(IHeaderResponse response) {
    super.renderHead(response);
    response.render(CssHeaderItem.forCss(yourDynamicCssAsString, "some-unique-id"));
}

Upvotes: 1

Related Questions