• Templating and Integration Guide
  • Part 1: Concepts
    • The "Everything is Content" Paradigm
      • Content items are objects with properties that correspond to a type
      • Nodes are stored in workspaces, organized in trees
    • The rendering flow
      • To render a node, you need a view
      • To render a page, you need a template
    • Modules are packages used to deploy “code” into Jahia
    • The Jahia actors
      • Content flow
  • Part 2: Modules
    • What is a module?
    • Module type
    • Module creation
    • Anatomy of a module
    • Adding classes and Jars in modules
    • Spring files
  • Part 3: Templates and Studio
    • Introduction to templates
    • Studio
      • Studio overview
    • Creating a template-set
      • Using the Maven archetype
      • Using Eclipse
      • Using Jahia Studio
      • Update the Maven project when templates are modified in the Studio
    • Building templates
      • There are 3 different kind of templates
      • Main Resource and template resolution
      • Areas in detail
      • Content templates in details
      • Bound Components
    • CSS style sheets and design
      • Preparing your stylesheet
      • Including stylesheets in templates
      • Managing different stylesheets depending on the context
      • Print friendly CSS
      • CSS frameworks and handmade XHTML
    • Themes
      • How it works
    • Skins
      • Creating skins
      • Skin rendering
  • Part 4: Content Definitions and Views
    • Definitons
      • NodeType
      • Namespaces
      • Supertypes
      • Options
      • Node Type properties
      • Input masks
      • Default values
      • Initializers
      • Validators
      • Abstract types
      • In practice: create the node type definition for dogs
    • Views
      • NodeType folders
      • Output formats
      • Default view
      • Other views
      • Modules versus Components
      • Module packaging and deployement
    • Managing URLs in scripts
    • Managing lists
      • Summary for a simple list
      • Using list views
    • Managing and customizing navigation menus
      • Menu Rendering
      • Customization
  • Part 5: Advanced Techniques
    • Search and queries
      • Full text queries using search tag libraries
      • Queries
      • In practice: creating a custom search component
    • Forms
      • Principles
      • Form data parameters
      • In practice: Transform a custom HTML form into a Jahia valid form step by step
    • Macros
      • Macro implementation languages
      • Typical usage
    • Caches
  • Part 6: Setting up an integration environment
    • Software Requirements
    • Maven configuration for Eclipse IDE
    • Maven External Configuration
    • Creating a template set
  • Part 7: Step by step integration
    • Cutting of the mockup
    • Integration of the Base
    • CSS / Javascript integration
    • Creating the content zones
  • Further reading and resources

CSS / Javascript integration

We will now start integrating the CSS and Javascript files into the template set. First let’s copy the CSS files into the new module’s css directory, and do the same for the Javascript files into the javascript directory.

We will then use the <template:addResource/> tag to reference these elements from the JSP script. In order to have a solid integration with themes and Jahia’s Edit mode, it is recommended to use the addResource tag instead of using HTML link tags. However if you want to provide CSS files for different render mode such as the print mode, you might want to reference them directly using the link tag.

The next step is to add the bodywrapper class which will protect the rendering in Eidt mode. It is mandatory to either:

• modify the CSS if it modifies the default HTML tags and prefix them with .bodywrapper
• add a CSS for the Edit mode that redefines these tags by prefixing them with .bodywrapper

Example

The original CSS file might look like this:

p {
display:none;
}

And once modified it will look like this:

.bodywrapper p {
display:none;
}

A more complete example
If to start with in the original HTML we had the following header section:

<head>
<link rel="stylesheet" type="text/css" href="css/template1.css" />
<link rel="stylesheet" type="text/css" href="css/template2.css" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
</head>

Once the CSS have been copied into the css directory, the header will then become:

<head>
<link rel="stylesheet" type="text/css" href="<c:url value='${url.currentModule}/css/print.css'/>" media="print" />
</head>
<body>
<div class=”bodywrapper”>
…
</div>
<template:addResources type="css" resources="template1.css,template2.css/>
</body>

Warning: for the template’s view, it is important to add the addResource tag at the end of the file, as the external resources are evaluated in there order of inclusion, which means that the template’s CSS files should be loaded last. Don’t worry about the tags not being in the <head> HTML tag, Jahia will actually insert them in the proper location.

Once the template has been deployed, we now obtain the proper mockup look and feel.