Corporate Design

The ad hoc reporting feature of i-net Clear Reports supports the customization of the Remote Interface module.

Frameworks

The Remote Interface uses different frameworks, of which each is used for special purposes to achieve the best user experience.

The Remote Interface modules are created with the Nextapp Echo Web Framework (Version 2). It ensures that only these components are loaded, which are needed for the active module.

The HTML Prompt Dialog is based on the Google Web Toolkit. Once the dialog is loaded, the user can configure the prompts without waiting for further content to be loaded.

Style definition for the Ad Hoc Reporting

The Echo Web Framework uses styles and stylesheets to configure the visual appearance of all components. The styles are defined in a special XML format, defined by the framework.

That results in the following limitations:

  • It is not possible to change the design of the application with CSS. The Echo Web Framework has a defined set of properties that can be customized.
  • Due to the possibility to create custom components and therefore the definition of custom properties, there is no detailed documentation on how to create the Stylesheet file and which tags and attributes can be used.

In chapter Example you'll find a complex example for the ad hoc reporting module. In this example the colors and images of the module are replaced by another color scheme.

If then whole appearance of the ad hoc reporting module shall be changed, the available properties can be found in the source code of the Echo Web Framework (version (2.1)), located at: http://echo.nextapp.com/site/echo2.html.

The Remote Interface defines a default set of styles for a unique visual appearance. Each single property can be replaced by overriding them with a new value. If a property, e.g. "background", shall be removed, it must be set to "null" with the following attribute:

<property name="background" setNull="true" />

If there is an error in the XML Stylesheet file, i-net Clear Reports will write the Exception into the log file at the time the Remote Interface is opened.

Errors that occur often:

  • The specified resource does not exists: The ZIP file with the corporate design has to contain each image that is referenced in the stylesheet.
  • No such attribute: The Echo Web Framework only accepts properties and attributes that are defined by the component. The source code of the framework contains the components class, e.g. Label.java and their peer LabelPeer.java, where all properties can be found.

Important: Please do not use the type "nextapp.echo2.app.ResourceImageReference" to reference images. The type "com.inet.remote.gui.StaticImageReference" should be used instead to ensure that all images can be located by the i-net Clear Reports server.

Overview of the layout

To modify the design of the ad hoc web interface you'll need to know how the GUI is structured and which style name references which components on the screen.

The following image shows the main areas of the ad hoc remote interface.

Figure 1: Basic web GUI components of ad hoc

An good entry point into changing the styles of the interface is to modify the background colors and images of the four areas shown in this image. This will set the base color scheme for the overall layout. The second step should be to set the appearance of the tables in the content area and the default buttons.

Available style names

The following table contains the available style names and component types that can be customized. A short description helps to find the component that shall be changed.

In order to set a style for all components of a special type, set an empty "name" attribute.

Style name Type Description
adhoc.button.columnSource nextapp.echo2.app.Button The button to add a column to a component (the drag&drop shortcut)
adhoc.button.chartSelect nextapp.echo2.app.Button The button to select a chart type
adhoc.button.chartSelect.selected nextapp.echo2.app.Button The button to select a chart type in selected state
adhoc.button.csvUpload nextapp.echo2.app.Button The CSV upload button on the dataview page
adhoc.button.export nextapp.echo2.app.Button (Viewer) Button for export of the current report
adhoc.button.first nextapp.echo2.app.Button (Viewer) Button, go to first page
adhoc.button.inTable nextapp.echo2.app.Button The default of buttons which are displayed as a table cell
adhoc.button.inTableHeader nextapp.echo2.app.Button The default of buttons which are displayed as a table header
adhoc.button.last nextapp.echo2.app.Button (Viewer) Button, go to last page
adhoc.button.next nextapp.echo2.app.Button (Viewer) Button, go to next page
adhoc.button.pictogram nextapp.echo2.app.Button Report page, the report preview&selection button
adhoc.button.pictogram.selected nextapp.echo2.app.Button Report page, the report preview & selection button, selected state
adhoc.button.prev nextapp.echo2.app.Button (Viewer) Button, go to previous page
adhoc.button.small nextapp.echo2.app.Button (Viewer) Toolbar default buttons style
adhoc.button.snapshot nextapp.echo2.app.Button (Viewer) Button to create a snapshot
adhoc.button.sort nextapp.echo2.app.Button Base style for the sort buttons displayed to the upper right of each table
adhoc.button.sort.down nextapp.echo2.app.Button Style of the "move entry downwards” button
adhoc.button.sort.up nextapp.echo2.app.Button Style of the "move entry upwards” button
adhoc.toolbar.button nextapp.echo2.app.Button Button, page selection toolbar
adhoc.toolbar.button.active nextapp.echo2.app.Button Button, page selection toolbar, if this page is currently active
adhoc.button.toolbarDefault nextapp.echo2.app.Button (Viewer) Toolbar default button style
adhoc.button.verify nextapp.echo2.app.Button Ruler, the button to verify the current columns
adhoc.button.warning nextapp.echo2.app.Button Viewer, the button which displays the render-warning
adhoc.checkbox nextapp.echo2.app.CheckBox Base style for all checkboxes
adhoc.column.pagecount nextapp.echo2.app.Column Viewer, page count box
adhoc.column.pagecount.inactive nextapp.echo2.app.Column Viewer, page count box, inactive
adHoc.default.contentBackground nextapp.echo2.app.Component The default background for all tables and lists
adHoc.default.contrastBackground nextapp.echo2.app.Component The background to contrast the default, e.g. used on the reports page
adhoc.dropDown.default echopointng.MenuItem Default for menu items in drop downs and the visual linking tables
adhoc.dropDown.default.button echopointng.Menu Default for buttons which open a drop down menu
adhoc.dropDown.default.button echopointng.MenuButton Default for buttons which open a drop down menu
adhoc.select.default nextapp.echo2.app.SelectField Default for all select fields (native drop downs)
adhoc.dropDown.chartSelect echopointng.DropDown The button to open the chart selection drop down
adhoc.dropDown.chartSelect.active nextapp.echo2.app.DropDown The button to open the chart selection drop down, active
adhoc.panel.error nextapp.echo2.app.ContentPane The background of the ruler if verify fails
adhoc.export.group nextapp.echo2.app.Label The group label line of the export dialog
adhoc.export.group echopointng.LabelEx The group label line of the export dialog
adhoc.default.foreground.active nextapp.echo2.app.Component Default foreground(font) color for active components
adhoc.default.foreground.inactive nextapp.echo2.app.Component Default foreground(font) color for inactive components
adhoc.grid.pictograms nextapp.echo2.app.Grid Report page, pictogram selection grid
adhoc.grid.spacer nextapp.echo2.app.Grid Report page, spacer to fill up the first row of pictograms
adhoc.grid.tablewrapper nextapp.echo2.app.Grid The wrapper box for the tables on the chart and crosstab page
adhoc.grid.tablewrapper.disabled nextapp.echo2.app.Grid The wrapper box for the tables on the chart and crosstab page, state disabled
adhoc.label.hint nextapp.echo2.app.Label The hint label which can be displayed instead of the columns list
adhoc.label.hint.small nextapp.echo2.app.Label The hint label to the bottom of the tables
adhoc.label.hint.small.error nextapp.echo2.app.Label The hint label to the bottom of the tables in case of an error
adhoc.label.pageBG nextapp.echo2.app.Label Styles for labels displayed on page background color
adhoc.label.pageBG.bold nextapp.echo2.app.Label Styles for labels displayed on page background color, bold
adhoc.label.pageBG.H1 nextapp.echo2.app.Label Styles for labels displayed on page background color, H1
adhoc.chart.selectMenu nextapp.echo2.app.SelectField The select field to select the chart type
adHoc.default.pageBackground nextapp.echo2.app.Component The default component for the page background
adhoc.panel.page nextapp.echo2.app.ContentPane The base panel of all pages
adhoc.pane.ruler.inch nextapp.echo2.app.ContentPane The ruler image in inch scale
adhoc.pane.ruler.mm nextapp.echo2.app.ContentPane The ruler image in mm scale
adhoc.panel.reportSelect nextapp.echo2.app.ContentPane The report preview & selection panel
adhoc.panel.rulerMarker nextapp.echo2.app.ContentPane The background of the ruler markers
adhoc.ruler.units nextapp.echo2.app.Label The label which displays the mm or inch label
adhoc.split nextapp.echo2.app.SplitPane The default split used by Ad Hoc with default background and 5px separator
adhoc.split.header nextapp.echo2.app.SplitPane The default split used by Ad Hoc in white with default background and 5px separator
adhoc.split.reportSelect nextapp.echo2.app.SplitPane Split on the Report page between the path list and the previews
adhoc.split.rulerMarker.image nextapp.echo2.app.SplitPane Ruler, Marker split with marker image
adhoc.split.rulerMarker.noimage nextapp.echo2.app.SplitPane Ruler, Marker split without marker image
adhoc.split.viewer nextapp.echo2.app.SplitPane Split between the wizard and the viewer
adhoc.table.chartCrosstab nextapp.echo2.app.Table The data tables of the chart and crosstab page
adhoc.table.chartCrosstab echopointng.TableEx The data tables of the chart and crosstab page
adhoc.table.list nextapp.echo2.app.Table Style for tables which appear like a list
adhoc.table.rollover nextapp.echo2.app.Table The default for all tables which should use the rollover effect
adhoc.table.rollover echopointng.TableEx The default for all tables which should use the rollover effect
adhoc.default.table nextapp.echo2.app.Table The default for all tables
adhoc.table.upload echopointng.TableEx The columns tables of the CSV upload dialog
adhoc.table.wrapper.base nextapp.echo2.app.ContentPane Table wrapper, default insets
adhoc.table.wrapper.header nextapp.echo2.app.Label Table wrapper, header label
adhoc.table.wrapper.inner nextapp.echo2.app.ContentPane Table wrapper, inner content pane
adhoc.table.wrapper.inner.disabled nextapp.echo2.app.ContentPane Table wrapper, inner content pane, disabled
adhoc.table.wrapper.outer nextapp.echo2.app.ContentPane Table wrapper, border background and size, don't set borders here, set insets and bg-color
adhoc.table.wrapper.split nextapp.echo2.app.SplitPane The default split used by Ad Hoc in white with default background and 5px separator
adhoc.textarea.default nextapp.echo2.app.TextArea The default for all textarea components
adhoc.textfield.default nextapp.echo2.app.TextField The default for all textfield components
adhoc.toolbar.bgImage nextapp.echo2.app.ContentPane Toolbar background of the page selection
adhoc.toolbar.bgImageSmall nextapp.echo2.app.ContentPane Toolbar background of the viewer toolbar
adhoc.toolbar.helperRow nextapp.echo2.app.Row The small row to the right of the page selection toolbar
adhoc.toolbar.helperSplit nextapp.echo2.app.SplitPane Split between page buttons and help buttons
adhoc.panel.viewer nextapp.echo2.app.ContentPane The viewer content area
adhoc.window.dialog nextapp.echo2.app.WindowPane Default for all dialog windows. Can be used to change the dialog borders as well
adhoc.window.visualLinking nextapp.echo2.app.WindowPane The table windows of the visual linking page
adhoc.panel.wizard nextapp.echo2.app.ContentPane The overall background panel of ad hoc

Example

The following example shows how to manipulate some styles (in this case colors and background images) to get a fast visual change of the ad hoc reporting module.

<?xml version="1.0" encoding="UTF-8"?>
<stylesheet>
	<!-- A toolbar with a blue background -->
	<style name="adhoc.toolbar.bgImage" type="nextapp.echo2.app.ContentPane">
		<properties>
			<property name="background" value="#123456" />
			<property name="backgroundImage" setNull="true" />
		</properties>
	</style>
	<!-- The viewer toolbar also in blue -->
	<style name="adhoc.toolbar.bgImageSmall" type="nextapp.echo2.app.ContentPane">
		<properties>
			<property name="background" value="#123456" />
			<property name="backgroundImage" setNull="true" />
		</properties>
	</style>
 
	<!-- The toolbar buttons get a blue border (rolloverBorder and 				pressedBorder stay unchanged) -->
	<style 	name="adhoc.button.toolbarDefault"
				type="nextapp.echo2.app.Button">
		<properties>
			<property name="border">
				<border style="solid" size="1px" color="#123456" />
			</property>
		</properties>
	</style>
	<!-- The activated toolbar button gets a lighter background color -->
	<style 	name="adhoc.toolbar.button.active"
				type="nextapp.echo2.app.Button">
		<properties>
			<property name="background" value="#dce6f1" />
			<property name="backgroundImage" setNull="true" />
		</properties>
	</style>
 
 
	<!-- Define the background colors for the layers in the pages -->
	<style 	name="adHoc.default.contrastBackground"
				type="nextapp.echo2.app.Component">
		<properties>
			<property name="background" value="#becddc" />
		</properties>
	</style>
	<style 	name="adHoc.default.pageBackground"
				type="nextapp.echo2.app.Component">
		<properties>
			<property name="background" value="#dce6f1" />
		</properties>
	</style>
	<style 	name="adHoc.default.contentBackground"
				type="nextapp.echo2.app.Component">
		<properties>
			<property name="background" value="#eff4f9" />
		</properties>
	</style>
 
	<!--	The separators between the tables shall have the same color like the
			page background -->
	<style name="adhoc.split" type="nextapp.echo2.app.SplitPane">
		<properties>
			<property name="separatorColor" value="#dce6f1" />
		</properties>
	</style>
 
	<!--	All buttons (except the toolbar buttons) with bold font, blue 
			background and image and white foreground. The rollover changes the 
			background image -->
	<style name="" type="nextapp.echo2.app.Button">
		<properties>
			<property name="font">
				<font bold="true" />
			</property>
			<property name="foreground" value="#ffffff" />
			<property name="rolloverForeground" value="#ffffff" />
			<property name="pressedForeground" value="#ffffff" />
			<property name="disabledForeground" value="#999999" />
 
			<property name="background" value="#123456" />
			<property name="rolloverBackground" value="#123456" />
			<property name="pressedBackground" value="#123456" />
			<property name="disabledBackground" value="#123456" />
 
			<property name="border">
				<border style="solid" size="1px" color="#dce6f1" />
			</property>
			<property name="rolloverBorder">
				<border style="solid" size="1px" color="#eff4f9" />
			</property>
			<property name="backgroundImage">
				<fill-image>
					<image type="com.inet.remote.gui.StaticImageReference">
						<resource-image-reference 
								resource="example/buttonSmall.png" />
					</image>
				</fill-image>
			</property>
			<property name="rolloverBackgroundImage">
				<fill-image>
					<image type="com.inet.remote.gui.StaticImageReference">
						<resource-image-reference 
								resource="example/buttonSmallRollover.png" />
					</image>
				</fill-image>
			</property>
			<property name="pressedBackgroundImage">
				<fill-image>
					<image type="com.inet.remote.gui.StaticImageReference">
						<resource-image-reference 
								resource="example/buttonSmallPressed.png" />
					</image>
				</fill-image>
			</property>
		</properties>
	</style>
 
	<!-- The report layout selection gets blue borders -->
	<style name="adhoc.button.pictogram" type="nextapp.echo2.app.Button">
		<properties>
			<property name="border">
				<border style="solid" size="2px" color="#becddc" />
			</property>
			<property name="rolloverBorder">
				<border style="solid" size="2px" color="#123465" />
			</property>
			<property name="pressedBorder">
				<border style="solid" size="2px" color="#000000" />
			</property>
		</properties>
	</style>
	<!-- The selected report layout has an orange border -->
	<style	name="adhoc.button.pictogram.selected"
				type="nextapp.echo2.app.Button">
		<properties>
			<property name="border">
				<border style="solid" size="2px" color="#f9b41e" />
			</property>
			<property name="rolloverBorder">
				<border style="solid" size="2px" color="#123465" />
			</property>
			<property name="pressedBorder">
				<border style="solid" size="2px" color="#000000" />
			</property>
		</properties>
	</style>
 
	<!-- The selection color in tables with blue and orange -->
	<style name="adhoc.default.table" type="nextapp.echo2.app.Table">
		<properties>
			<property name="rolloverForeground" value="#ffffff" />
			<property name="rolloverBackground" value="#123465" />
			<property name="selectionForeground" value="#000000" />
			<property name="selectionBackground" value="#f9b41e" />
		</properties>
	</style>
 
	<!--	The DropDown menus and the buttons in the tables also with the blue
			and orange selection -->
	<style name="adhoc.dropDown.default" type="echopointng.MenuItem">
		<properties>
			<property name="rolloverEnabled" value="true" />
			<property name="pressedEnabled" value="true" />
			<property name="foreground" value="#000000" />
			<property name="rolloverForeground" value="#ffffff" />
			<property name="pressedForeground" value="#666666" />
			<property name="disabledForeground" value="#AAAAAA" />
			<property name="rolloverBackground" value="#123465" />
			<property name="pressedBackground" value="#f9b41e" />
			<property name="disabledBackground" value="#ffffff" />
		</properties>
	</style>
	<style name="adhoc.button.inTable" type="nextapp.echo2.app.Button">
		<properties>
			<property name="border">
				<border style="solid" size="1px" color="#becddc" />
			</property>
			<property name="rolloverBorder">
				<border style="solid" size="1px" color="#123465" />
			</property>
		</properties>
	</style>
	<!-- The border of the dialogs are generated out of 8 graphics -->
	<style name="" type="nextapp.echo2.app.WindowPane">
		<properties>
			<property name="titleBackground" setNull="true" />
			<property name="titleForeground" value="#123465" />
			<property name="titleBackgroundImage">
				<fill-image>
					<image type="com.inet.remote.gui.StaticImageReference">
						<resource-image-reference
								resource="example/window_title.png" />
					</image>
				</fill-image>
			</property>
			<property name="border">
				<fill-image-border	content-insets="18px 18px 18px 18px" 
									border-insets="18px 18px 18px 18px">
					<border-part position="top-left">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_tl.png" />
							</image>
						</fill-image>
					</border-part>
					<border-part position="top">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_t.png" />
							</image>
						</fill-image>
					</border-part>
					<border-part position="top-right">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_tr.png" />
							</image>
						</fill-image>
					</border-part>
					<border-part position="right">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_r.png" />
							</image>
						</fill-image>
					</border-part>
					<border-part position="bottom-right">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_br.png" />
							</image>
						</fill-image>
					</border-part>
					<border-part position="bottom">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_b.png" />
							</image>
						</fill-image>
					</border-part>
					<border-part position="bottom-left">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_bl.png" />
							</image>
						</fill-image>
					</border-part>
					<border-part position="left">
						<fill-image>
							<image type="com.inet.remote.gui.StaticImageReference">
								<resource-image-reference
									resource="example/window_l.png" />
							</image>
						</fill-image>
					</border-part>
				</fill-image-border>
			</property>
		</properties>
	</style>
	<!--	The table windows in the Visual Linking Page shall have a blue 
			window frame which is 2px wide -->
	<style	name="adhoc.window.visualLinking"
				type="nextapp.echo2.app.WindowPane">
		<properties>
			<property name="titleBackground" value="#123456" />
			<property name="titleForeground" value="#ffffff" />
			<property name="titleFont">
				<font bold="true" size="10pt" />
			</property>
			<property name="titleBackgroundImage" setNull="true" />
			<property name="border">
				<fill-image-border content-insets="2px 2px 2px 2px" 
								border-insets="2px 2px 2px 2px" color="#123456">
				</fill-image-border>
			</property>
		</properties>
	</style>
</stylesheet>

Style definition for the HTML Prompt Dialog

The prompt dialog is shown when a data view contains parameter fields that are required. To customize the colors of this prompt dialog, you'll need to customize the CSS file "colors.css" which can be found in the "client/prompt" folder of your installation.

There are three parts to this CSS, divided by comments. The colors in the first part are intended to be the primary color in three various shades from dark to light. The second part contains the secondary background color, and the third contains the borders' colors.

Deploying the Corporate Design

The easiest way to deploy a corporate design is to create a ZIP file that contains the stylesheet XML file in the root (no sub folders) and the images (in the folders that are referenced in the XML file).

Example of the structure:

  • remoteInterfaceStyles.xml
  • my_images
  • toolbar_bg.png
  • button_bg.png
  • ...

Now the ZIP file can be copied into the lib folder of the i-net Clear Reports installation. With the next restart of the server, the ZIP file is loaded automatically.

Starting Ad Hoc Reporting with the new design

After deploying the corporate design ZIP file and restarting the i-net Clear Reports server, the template can be chosen.

If the stylesheet file is named "remoteInterfaceStyles.xml", it is applied automatically.

If the file is named differently, the template can be set using the "template" URL parameter. For example if the file is named "myDesign.xml", the following URL opens the ad hoc reporting module wit the specified template:

  http://host/context/adhoc/?template=myDesign.xml
or
  http://host/context/adhoc/?template=myDesign

Setting a template that does not exist, will result in the style that is provided by i-net Clear Reports.