Search

Edition: Futurama Website

Module: Futurama Web

User: Developer

Prerequisites

- Futurama version 17.02+

- Knowledge on how to setup FICO

- The desired (DOCTYPE) format of an HTML5 page

 

Description

On this page a tutorial is given on how FICO could be used for changing the current HTML output from XHTML to HTML5. Following this tutorial will result in a fully functional and valid HTML5 web application.

Scope

This tutorial can be used when the XHTML format of an application is to be changed to HTML5.

Introduction: HTML 5 Template

From Futurama version 17.02 and higher it is possible and recommended to use HTML5 as the rendered DOCTYPE. In order to make it possible to have a valid HTML5 page a couple of adjustment are needed to make Futurama render valid HTML5 code. Without adjustments, validation of the datebox and webslider objects would return invalid HTML5 code. Therefore those objects are replaced by a commonly used library: jQuery UI. Futurama now supports the use of the jQuery UI slider and jQuery UI datepicker. Within the Futurama 17.02 release the jQuery UI library is included and ready to be used. The jQuery version is also updated to the latest version, jQuery 1.12.1. In order to enable the HTML5 template a reference should be added within the web.config. In the next section a more detailed explanation is given on how this is done.

Enable HTML5 template

In order to upgrade the website to the HTML5 standard an upgrade extension file should be created. This can be placed on the top level of the application. The same level where the web.config is stated. Within the upgrade file the following XSLT should be created:




  

  

  
    
      
      
        
      
      
      
        
          
          
            
              FuturamaModules/1702/jqueryui.min.css
            
          
          
          <!DOCTYPE html>
          
          
            
			
             
            
            
            
          
        
      
      
      
    
  
  
    		
        
		  		  
			
			"_blank"
			"_blank" rel="noopener noreferrer"
		  
		
    
  
  
  
        
		  		  
			
			"_blank"
			"_blank" rel="noopener noreferrer"
		  
		
    
  

  
    
    
    	
    
              
        
      
      
        
        
          
          
          
        
      
      
        
      
    
   
  

A few remarks on the upgrade extension stated as above:

jQuery Migrate file

It is important to note that there is also a reference made towards the jquery-migrate-1.3.0.min file within the above XSLT code. This file is needed in order to make sure that upgrade to a more recent version of jQuery will not break the application and other JavaScript libraries. To include this in the application the following steps should be taken:

  1. Download the migration file from the following location: https://code.jquery.com/jquery-migrate-1.3.0.min.js. (Right click on the hyperlink -> link save as
  2. Create a folder within the application called: "Upgrade". Same level as the web.config
  3. Place the migration file of jQuery in the new created folder called: "Upgrade"

The created upgrade extension file, for example: extension_upgrade.xsl is now ready to be used. To enable it a reference to it must be added to the FuturamaSettings section of the web.config:

	
		   
		
	

Safe Hyperlinks

Everything below the RenderInput node is used for modifying existing hyperlinks with the parameter: target="_blank" . If the rel="noopener noreferrer" parameters are not used then the application could be vulnerable to phishing attacks.

Render Config web.config

Please keep in mind that also within the Futurama ConfigSections in the web.config the render plugin should be enabled. Information how this can be done can be found on the following page: Configuration - Rendering. Make sure that all the settings have been correctly set.

When a reference is made to the extension file then Futurama will render the application in HTML5 code. This implies that when a datebox or webslider is used it is rendered based on the jQuery UI library. Please also note that it is still possible to implement your own definition of a datebox, a webslider or any other object. Please have a look at these other pages in order to find out how to implement a different webslider or datebox or any other object.

Troubleshooting

If for some reason the page is looking odd or does not function well please follow the following steps to find out if everything is set correctly:

  1. Open the website and verify in the source code whether the DOCTYPE has been changed:
    
    By pressing the key combination CTRL + U the source code of the application will be shown. 
  2. Open the developer tools of your browser and check if there are any errors within the console window tab of your developer tool
  3. Execute this in your browser:
    • Navigate within the developer tool (press F12 to view the developer tools within Chrome, Firefox and IE) to the tab "Resources" within Chrome, "Scripts" within Firefox and "Debugger" within IE
    • Check if the following Javascript and CSS Files are loaded:
      • jquery.ui.min.js
      • jquery-ui-slider-pips.js
      • jqueryui.min.css

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