update for 2.4.0

Css tutorial#

This tutorial shows how to create css-stylesheets for your templates.

Prepare#

All files following will be created in WEB-INF/classes/org/ztemplates/tutorial/helloworld/css

The view#


package org.ztemplates.tutorial.helloworld.css;

import org.ztemplates.render.ZExpose;
import org.ztemplates.render.ZRenderer;
import org.ztemplates.render.velocity.ZVelocityRenderer;

@ZRenderer(ZVelocityRenderer.class)
public class HelloWorldCss
{
  @ZExpose
  final String message;
  
  public HelloWorldCss()
  {
    message = "Hello World!";
  }
}

The action#


package org.ztemplates.tutorial.helloworld.css;

import org.ztemplates.actions.ZMatch;
import org.ztemplates.web.ZTemplates;

@ZMatch("/helloworld/css")
public class HelloWorldCssAction
{
  public void after() throws Exception
  {
    ZTemplates.getServletService().render(new HelloWorldCss());
  }
}

The stylesheet fragment#

Create a file HelloWorldCss.css


.${cssId}-mystyle {
   font-style: italic;
   color: blue;
}

Access the style as ztemplates.css. All css styles found in the classpath corresponding to classes annotated with @ZRenderer are aggregated into one stylesheet: ztemplates.css

To avoid name collisions, you could use ${cssId} in the stylename. This is replaced at runtime with a unique identifier, so the style does not collide with styles from other css-fragments. You could of course also just define the style the usual way.

The template#

Create a file HelloWorldCss.vm


<html>
<head>
   <link rel="stylesheet" type="text/css" href="../ztemplates.css">
</head>
<body>

From css styled Velocity template:

<h1 class="${cssId}-mystyle">${message}</h1>
</body>
</html>

Build#

  • open a command window and change to the tutorial/WEB-INF/classes directory
  • compile
javac -cp ../lib/ztemplates.jar org/ztemplates/tutorial/helloworld/css/*.java

Run#

Neuen Anhang hinzuf�gen

Du bist nicht autorisiert, Anh�nge zu dieser Seite hochzuladen.
« Diese Seite (Version-) wurde zuletzt am 19-Dez-2011 08:37 von gerdziegler.de ge�ndert.