Bundled Templates :: Message Box

This extensions displays a message box like this one, using a built-in velocity template and a registered request parameter transformer.

Reference

The message box extension is implemented as a RequestParameterTransformer that is triggered when the parameter "message-box" is set with the macro call. When "message-box=text to display" is present, the transformer sets "source" to a bundled velocity template that performs the actual rendering.

Note: Message boxes are rendered as pure HTML and will only work if a XhtmlSink or derived class is used for rendering the output (=> any HTML render target should be fine, including the standard Maven site generation). Furthermore all built-in icons are rendered using embedded SVG graphics, which is currently supported in: IE 9+, FF 4+, Chrome, Safari and Opera.

Parameters:

Parameter Name Description
Input Parameters (set with the macro call)
"message-box" Enables this extension and sets the text to display inside the message box.

Note: Setting this property has no effect in case of "source" or "source-class" were specified with the macro call. This behaviour ensures that the parameter "message-box" can still be used with ordinary macro calls where a source or source-class was set.

Markup: The message box is rendered as pure HTML and text is added to the box as-is. As a consequence HTML can be used as markup inside the given message and it is also the only valid markup that may be used here.
E.g. %{include|message-box=Hello <b>World!</b>} can be used with the APT format, to have "World!" formatted in strong text style.
"type" Optional parameter specifying the type of message box to display.
  • info: displays a message box with an information icon (= default).
  • warning: displays a message box showing the given warning with a corresponding icon.
  • alert: displays a message box showing the given alert with a corresponding icon.
"text-color" Optional parameter overriding the text color of the message box.
"color" Optional parameter overriding the border color of the message box.
"background-color" Optional parameter overriding the color of the message box background.
"icon" Optional parameter setting a site resource path to the image that is used with the message box instead of the built-in SVG graphics.

Supported formats include GIF, PNG, JPG and SVG. The path has to be chosen relative to the site's web root, e.g.:
%{include|icon=images/alert.png|message-box=This is an alert message}

Note: If no type is specified, it will be set accordingly when the image path contains one of the keywords "alert" or "warn(ing)" ("info" remains the default message box type).
Implementation "org.tinyjee.maven.dim.extensions.MessageBoxParameterTransformer": ApiDoc | Source

Usage & Template Source

Overview

Information Box
%{include|message-box=Hello World}
Hello World
Customized Information Box
%{include|message-box=Custom Style|color=#eeeeee|text-color=#000066|background-color=#f5f5f5}
Custom Style
Warning Box
%{include|type=warning|message-box=This is a warning.}
This is a warning.
Alert Box
%{include|type=alert|message-box=This is an alert.}
This is an alert.

Custom Wrapper Template

While creating message boxes adhoc is simple, it may easily become unhandy (and un-DRY) when similar content is used in the alerts, warnings, etc.
One option that can simplify the message box creation is using a wapper template that provides common content as shown below:

Example:
%{include|source=disclaimers.xdoc.vm|dependsOn=the 'disclaimers.xdoc.vm' template to show warnings like this}
Disclaimer: This extension depends on the 'disclaimers.xdoc.vm' template to show warnings like this.
Source of 'disclaimers.xdoc.vm':
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?xml version="1.0"?>
  
#macro(messageBox $type $text)
<macro name="include">
    <param name="message-box" value="$esc.xml($text)"/>
    <param name="type" value="$type"/>
</macro>
#end
  
<document>
<body>
    #if($experimentalThing)
        #messageBox("warning", "
            <b>Experimental Warning:</b>
            This '$experimentalThing' is currently experimental.
            Behaviour and interfaces may change without any prior notice.")
    #end
  
    #if($clientSideJavaScript)
        #messageBox("warning", "
            <b>Disclaimer:</b>
            This extension depends on <b>client-side javascript</b> and
            attaches $clientSideJavaScript to documents that use it.")
    #end
  
    #if($dependsOn)
        #messageBox("warning", "
            <b>Disclaimer:</b>
            This extension depends on $dependsOn.")
    #end
</body>
</document>

Template Source

"classpath:/templates/dim/message-box.html.vm"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
#*
    Creates a message box with the given 'text'.
    Supports the 'type' values: info, warning, alert.
*#
#if(!$idSequence) #set($idSequence = "0") #end
#if(!$type)
    #if($icon)
        #if($icon.contains("alert")) #set($type = "info")
        #elseif($icon.contains("warn")) #set($type = "warning")
        #else #set($type = "info") #end
    #else
        #set($type = "info")
    #end
#end
  
#if($type == "alert")
    #if(!$backgroundColor) #set($backgroundColor="#FFDDCC") #end
    #if(!$color) #set($color = "#FF3333") #end
#elseif($type == "warning")
    #if(!$backgroundColor) #set($backgroundColor="#FFFFCC") #end
    #if(!$color) #set($color = "#FFEE66") #end
#else
    #if(!$backgroundColor) #set($backgroundColor="#F1F8FB") #end
    #if(!$color) #set($color = "#C5E5F5") #end
#end
  
<div class="dimMessageBox" style="border: 1px solid $color; background-color: $backgroundColor;
        padding: 4pt; padding-left: 8pt; margin-top: 6pt; margin-bottom: 6pt;">
    <table style="border: 0;" border="0" cellpadding="0" cellspacing="0">
        <tr style="border: 0;">
            <td width="32" valign="top" style="border: 0; vertical-align: top;">
                #if(!$icon)
                    #if($type == "alert")
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1.1">
                            <defs>
                                <linearGradient id="strokeGradient-$idSequence"
                                                gradientUnits="objectBoundingBox" x1="0%" x2="0%" y1="0%" y2="100%">
                                    <stop offset="15%" style="stop-color:#F50;"/>
                                    <stop offset="50%" style="stop-color:#E00;"/>
                                    <stop offset="72%" style="stop-color:#700;"/>
                                    <stop offset="110%" style="stop-color:#D33;"/>
                                </linearGradient>
                                <linearGradient id="innerGradient-$idSequence"
                                                gradientUnits="objectBoundingBox" x1="0%" x2="0%" y1="0%" y2="100%">
                                    <stop offset="66%" style="stop-color:#ffffff;"/>
                                    <stop offset="100%" style="stop-color:#dddddd;"/>
                                </linearGradient>
                                <filter id="dropShadow-$idSequence" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
                                    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
                                </filter>
                            </defs>
  
                            <polygon style="fill:black;" opacity="1" filter="url(#dropShadow-$idSequence)" points="3,27 16,4 29,27"/>
                            <polygon style="fill:url(#innerGradient-$idSequence); stroke: url(#strokeGradient-$idSequence);"
                                     stroke-width="3.5" stroke-linejoin="round" points="3,27 16,4 29,27"/>
                            <polygon style="fill:black;" stroke-linejoin="round" points="14,10 18,10 17,18.5 15,18.5"/>
                            <circle style="fill:black; stroke:none" cx="16" cy="22" r="2"/>
                        </svg>
                    #elseif($type == "warning")
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1.1">
                            <defs>
                                <linearGradient id="strokeGradient-$idSequence"
                                                gradientUnits="objectBoundingBox" x1="0%" x2="0%" y1="0%" y2="100%">
                                    <stop offset="15%" style="stop-color:#FD0;"/>
                                    <stop offset="50%" style="stop-color:#D73;"/>
                                    <stop offset="72%" style="stop-color:#720;"/>
                                    <stop offset="110%" style="stop-color:#B60;"/>
                                </linearGradient>
                                <linearGradient id="innerGradient-$idSequence"
                                                gradientUnits="objectBoundingBox" x1="0%" x2="0%" y1="0%" y2="100%">
                                    <stop offset="66%" style="stop-color:#ffffff;"/>
                                    <stop offset="100%" style="stop-color:#dddddd;"/>
                                </linearGradient>
                                <filter id="dropShadow-$idSequence" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
                                    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
                                </filter>
                            </defs>
  
                            <polygon style="fill:black;" opacity="0.75" filter="url(#dropShadow-$idSequence)" points="3,27 16,4 29,27"/>
                            <polygon style="fill:url(#innerGradient-$idSequence); stroke: url(#strokeGradient-$idSequence);"
                                     stroke-width="3.5" stroke-linejoin="round" points="3,27 16,4 29,27"/>
                            <polygon style="fill:black;" stroke-linejoin="round" points="14,10 18,10 17,18.5 15,18.5"/>
                            <circle style="fill:black; stroke:none" cx="16" cy="22" r="2"/>
                        </svg>
                    #else
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" version="1.1">
                            <defs>
                                <linearGradient id="backgroundGradient-$idSequence"
                                                gradientUnits="objectBoundingBox" x1="0%" x2="0%" y1="0%" y2="100%">
                                    <stop offset="5%" style="stop-color:#95d4f5;"/>
                                    <stop offset="35%" style="stop-color:#5186b3;"/>
                                    <stop offset="72%" style="stop-color:#002348;"/>
                                    <stop offset="95%" style="stop-color:#3e68a1;"/>
                                </linearGradient>
                                <filter id="dropShadow-$idSequence" filterUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
                                    <feGaussianBlur in="SourceAlpha" stdDeviation="2.5" result="blur"/>
                                </filter>
                            </defs>
  
                            <circle style="fill:black;" opacity="1" filter="url(#dropShadow-$idSequence)" cx="16" cy="16" r="12"/>
                            <circle style="fill:url(#backgroundGradient-$idSequence); stroke:none" cx="16" cy="16" r="14.5"/>
                            <circle style="fill:#ffffff; stroke:none" cx="16" cy="9" r="2"/>
                            <rect style="fill:#ffffff; stroke:none" width="4" height="11.5" x="14" y="13.5"/>
                        </svg>
                    #end
                #elseif($icon.endsWith(".svg") || $icon.endsWith(".svgz"))
                    <object data="$icon" type="image/svg+xml"></object>
                #else
                    <img src="$icon" alt="$type"/>
                #end
            </td>
            <td style="border: 0; padding-left: 6pt; vertical-align: middle;">
                #if($textColor) <span style="color:$textColor"> #end
                $text
                #if($textColor) </span> #end
            </td>
        </tr>
    </table>
</div>