Search

Edition: Futurama Website

Module: Futurama Web

User: Developer

Prerequisites

- Futurama version 5.3+

 

Description

The webpages that are created with Futurama consists of two parts: a

section and a

section. The design of those web applications, which are created with the Futurama Editor, are rendered within the

of a webpage. Within the

section of a HTML page objects Metatags, Doctype and Scripts files can be defined. From Futurama version 5.3.0 there is a possibility to edit/add these objects. At this page is explained how these headers could be added/adjusted using the FICO functionality. 

Scope

Within this example a step by step guide is given on how header objects (Scripts, Metatags, Doctype) could be added/adjusted. The first two steps, explained below, are the basic setup steps to use the FICO functionality.

Configuration – STEP 1

Before adding and/or adjusting HTML headers, a configuration within the web.config is needed.  The following settings must be added to the web.config:

Settings

Within the configuration element the next code has to be included:

<configSections>
    <sectionGroup name="futuramaSettings">
        <section name="render" type="ActuIT.Futurama.Config.RenderingSection, ActuIT.Futurama.Engine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null"/>
    </sectionGroup>
</configSections>

Next to this code, also within the configuration element the following code should be included:

<futuramaSettings>
    <render transformationFilename="extension.xsl"/>
</futuramaSettings>

For a more detailed explanation about these configurations see page: Configuration – Rendering.

Configuration – STEP 2

Creating an extension XSL file

First an empty extension XSLT file should be created. For a detailed explanation on how this should be implemented see paragraph ‘Creating customized XSLT’ at the FICO support page.

Configuration – STEP 3

The last step is actually change or add new HTML header objects. A division is been made into three subparts where each parts is explained individually.

The modifications should be done within the following section:

<xsl:template priority="2" match="/ren:RenderInput"></xsl:template>

A more detailed explanation of the "RenderInput" section can be found in the paragraph ‘Structure FICO XML’ at the FICO support page.

IMPORTANT: It is important to note that each adjustment within this RenderInput on node level, should be added in alphabetical order (e.q. root level -> Doctype before Metatags || MetaTag level -> Content before HttpEquiv etc.).

Metatags

It is possible to add new Metatags. To add new Metatags the following code should be added to the RenderOutput of the extension file:

<MetaTags>
	<MetaTag>
		<Content>SampleContent</Content>    
		<HttpEquiv>TestMeta</HttpEquiv>                         
	</MetaTag>
	<xsl:copy-of select="./ren:MetaTags/ren:*"/>
</MetaTags>

There are also metatags available which contains a name instead of a HttpEquiv. For example the viewport metatag. Which is a commonly used metatag for optimize a website for mobile devices. From Futurama version 17.2 it is possible to configure these metatags within the extension XSLT:

<MetaTag>   
    <Content>width=device-width, initial-scale=1.0</Content>    
    <Name>viewport</Name>                         
</MetaTag>

HTML Result

When adding the above XML example to the extension file the output within the HTML website will be:

<meta http-equiv="TestMeta" content="SampleContent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

As explained earlier, it is important to note that when defining the above XML the alphabetical order is important. Therefore, the "content" node should be defined before the "httpequiv" or the "name" node. In addition, a XSL copy statement is needed otherwise all the other metatags are not rendered.

An implementation example

Adding a new metatag without changing other parts of the RenderOuput should be implemented like this:

<xsl:template match="/ren:RenderInput" priority="2">
    <xsl:choose>
        <!--HTML-->
        <xsl:when test="$retrievalMode = 'html'"><xsl:apply-templates select="ren:FICO/*"></xsl:apply-templates></xsl:when>
        <!--Headers-->
        <xsl:when test="$retrievalMode = 'headers'">
            <RenderOutput xmlns="http://www.actuit.nl/futurama/render/2015/08">
                <!--Define the doctype-->                      
                <DocType><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></DocType>                                    
                <!--Define javascripts  -->
                <MetaTags>
                    <MetaTag>
                        <Content>SampleContent</Content>    
                        <HttpEquiv>TestMeta</HttpEquiv>                         
                    </MetaTag>
                    <MetaTag>   
                        <Content>width=device-width, initial-scale=1.0</Content>    
                        <Name>viewport</Name>                         
                    </MetaTag>
                    <xsl:copy-of select="./ren:MetaTags/ren:*">
                </xsl:copy-of></MetaTags>           
                <Scripts><xsl:copy-of select="./ren:Scripts/ren:*"></xsl:copy-of></Scripts>
            </RenderOutput>
        </xsl:when>
        <!--Unknown retrieval mode-->
        <xsl:otherwise></xsl:otherwise>
    </xsl:choose>
</xsl:template>

Please keep in mind that the metatags containing the name attribute are only available from Futurama version 17.2 and higher

SCRIPT

It is possible to add or edit Script files which are rendered within the header of a HTML page. To add a new Script file the following code should be added to the RenderOutput:

Add Script files

Within the "Scripts" RenderOutput a new script could be added by adding a Script node:

<Script>                            
    <File>source/to/file.js</File>
    <Type>text/javascript</Type>
</Script>
<xsl:copy-of select="./ren:Scripts/ren:*"></xsl:copy-of>

To ensure that all the other scripts (that Futurama automatically generates) are loaded the last line of the above XML code should be added. With this setting all the standard Javascript files (as FuturamaScripts.js etc.) are loaded.

Edit Script files

To modify an existing Script as, for example: jQuery, a filter could be added to replace the current script:

<Scripts>                   
	<Script>
		<File>Scripts/jquery-1.8.1.min.js</File>
		<Type>text/javaScript</Type>                            
	</Script>                                           
	<xsl:copy-of select="./ren:Scripts/ren:*[not(contains(ren:File,'jquery-1.4.1.min.js'))]"></xsl:copy-of>
</Scripts>

Important to note is that whenever the jQuery version is changed, the new version should be placed within the folder that the XML is pointing to. In the above example, within the Scripts map of the Futurama application there must be a jQuery version 1.8.1.min.js available to use.

HTML Result

Using these modifications will result in the following HTML:

<Script src="/portals/0/Scripts/jquery-1.8.1.min.js" type="text/javaScript"></Script>
<Script src="/portals/0/source/to/file.js" type="text/javaScript"></Script>

As explained earlier, it is important to note that when defining the above XML the alphabetical order is important. Therefore, the "file" node should be defined before the "type" node.

DOCTYPE

The DocType of the application can also be adjusted within the RenderOutput. To adjust the standard DocType, to for example a new HTML5 doctype, the following adjustment is needed:

<DocType><!DOCTYPE html></DocType>

This modification make it possible to change the DocType to a HTML5 DocType. Within the newest version of Futurama (17.2 + ) HTML5 is fully supported. NOTE: To setup an application which should be within a HTML5 format please have a look at the following support page on how to set it up: HTML5 Template

HTML Result

When the Doctype is adjusted the following HTML is visible within the source of the page:

<!DOCTYPE html>

As explained earlier, it is important to note that when defining the above XML the alphabetical order is important. Therefore, the "doctype" node should be defined before the "metatags" and the "metatags" node should be defined before the "scripts" node.

Final code

If all the adjustments, described above, are executed then the extension file will contain the following sections:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fut="http://www.actuit.nl/futurama/fico/2015/06" xmlns:ren="http://www.actuit.nl/futurama/render/2015/08" exclude-result-prefixes="fut ren">

	<xsl:import href="xhtml1.0.xsl">

		<xsl:output method="xml" indent="yes" omit-xml-declaration="yes">
			<!--RenderInput-->
			<xsl:template match="/ren:RenderInput" priority="2">
				<xsl:choose>
					<!--HTML-->
					<xsl:when test="$retrievalMode ='html'">
						<xsl:apply-templates select="ren:FICO/*">
						</xsl:apply-templates>
					</xsl:when>
					<!--Headers-->
					<xsl:when test="$retrievalMode ='headers'">
						<RenderOutput xmlns="http://www.actuit.nl/futurama/render/2015/08">
							<!--Define the doctype-->
							<DocType><!DOCTYPE html></DocType>
							<MetaTags>
								<MetaTag>
									<Content>SampleContent</Content>    
									<HttpEquiv>TestMeta</HttpEquiv>                         
								</MetaTag>
								<xsl:copy-of select="./ren:MetaTags/ren:*"></xsl:copy-of>
							</MetaTags>                 
						<!--Define javaScripts-->        
							<Scripts>       
								<Script>
									<File>Source/to/file.js</File>
									<Type>text/javaScript</Type>                            
								</Script>                       
								<Script>
									<File>Scripts/jquery-1.8.1.min.js</File>
									<Type>text/javaScript</Type>                            
								</Script>                       
								<xsl:copy-of select="./ren:Scripts/ren:*[not(contains(ren:File,'jquery-1.4.1.min.js'))]"></xsl:copy-of>
							</Scripts>
						</RenderOutput>
				</xsl:when>
				<!--Unknown retrieval mode-->
				<xsl:otherwise/>
			</xsl:choose>
		</xsl:template>
	</xsl:output>
</xsl:import>
</xsl:stylesheet>

In this segment, it can be seen that this template can be targeted in two modes. One mode where the variable retrievalmode is set to 'html' (this is the default value). The other mode is 'headers', which produces the RenderOutput element, containing the Scripts, MetaTags and DocType information that is included in the headers of a Futurama webpage.

Load external CSS files

From Futurama version 17.2 and higher it is possible to include CSS files within the extension file. A new section within the RenderInput can be created in order to state a reference towards a CSS file:

<CssFiles>
    <CssFile>
      <FileName>FuturamaModules/1702/jqueryui.min.css</FileName>
    </CssFile>
</CssFiles>

As stated earlier within this support page, the alphabetic order is very important. As a result, the CSS section should be created before the DocType section:

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fut="http://www.actuit.nl/futurama/fico/2015/06" xmlns:ren="http://www.actuit.nl/futurama/render/2015/08" exclude-result-prefixes="fut ren">

	<xsl:import href="xhtml1.0.xsl">

		<xsl:output method="xml" indent="yes" omit-xml-declaration="yes">
			<!--RenderInput-->
			<xsl:template match="/ren:RenderInput" priority="2">
				<xsl:choose>
					<!--HTML-->
					<xsl:when test="$retrievalMode ='html'">
						<xsl:apply-templates select="ren:FICO/*">
						</xsl:apply-templates>
					</xsl:when>
					<!--Headers-->
					<xsl:when test="$retrievalMode ='headers'">
						<RenderOutput xmlns="http://www.actuit.nl/futurama/render/2015/08">
							<!--Define css files-->
							<CssFiles>
								<CssFile>
									<FileName>FuturamaModules/1702/jqueryui.min.css</FileName>
								</CssFile>
							</CssFiles>
							<!--Define the doctype-->
							<DocType><!DOCTYPE html></DocType>
							<MetaTags>
								<MetaTag>
									<Content>SampleContent</Content>    
									<HttpEquiv>TestMeta</HttpEquiv>                         
								</MetaTag>
								<xsl:copy-of select="./ren:MetaTags/ren:*"></xsl:copy-of>
							</MetaTags>                 
						<!--Define javaScripts-->        
							<Scripts>       
								<Script>
									<File>Source/to/file.js</File>
									<Type>text/javaScript</Type>                            
								</Script>                       
								<Script>
									<File>Scripts/jquery-1.8.1.min.js</File>
									<Type>text/javaScript</Type>                            
								</Script>                       
								<xsl:copy-of select="./ren:Scripts/ren:*[not(contains(ren:File,'jquery-1.4.1.min.js'))]"></xsl:copy-of>
							</Scripts>
						</RenderOutput>
				</xsl:when>
				<!--Unknown retrieval mode-->
				<xsl:otherwise/>
			</xsl:choose>
		</xsl:template>
	</xsl:output>
</xsl:import>
</xsl:stylesheet>

Related Topics

- WebAPI Overview: This document explains the WebAPI architecture.

Feedback

If you have any questions about this subject or if you want to provide us feedback please send us an e-mail.

Updated: 2017-02-06