\r\n

51Degrees API Documentation  4.4

Search

Documentation

• Examples
• Examples with a custom flow element
• Custom Engine Using Client-Side Evidence

Custom Engine Using Client-Side Evidence

Introduction

This example takes the very simple flow element described in the simple flow element example, and adds a JavaScript property to use client-side evidence.

Instead of using evidence which is already available, as the simple flow element example did, this example will send JavaScript to the a client to get the evidence.

Download example

The source code used in this example is available here:

• C# Visual Studio project
• Java project
• Node.js project

Dependencies

The flow element will need a dependency on the Pipeline core package

C# Java Node.js

Select a tab to view language specific dependencies.

The only dependency needed for .NET is the FiftyOne.Pipeline.Core NuGet package.

The only dependency needed for Java is the pipeline.core Maven package from com.51degrees. To include this, add the following to the <dependencies> section of the project's pom.xml:

<dependency>

<groupId>com.51degrees</groupId>

<artifactId>pipeline.core</artifactId>

<version>4.2.0</version>

</dependency>

Add a dependency to the fiftyone.pipeline.core NPM package to the package.json, and required it in the source with require("fiftyone.pipeline.core").

Data

The element data being added to the flow data by this flow element is a star sign. So this should have its own 'getter' in its element data. The additional property containing the JavaScript to get the date of birth is also added using the appropriate type.

C# Java Node.js

Select a tab to view language specific element data implementation.

.NET supports interfaces, so the element data should have a public interface and an internal concrete implementation with easy 'setters'.

In this example, values for star sign and JavaScript are populated. So an interface IStarSign will extend IElementData to add a 'getter' for it.

Now the internal implementation of it will implement this 'getter' and add a 'setter' for the flow element to use.

Java supports interfaces, so the element data should have a public interface and a package private concrete implementation with easy 'setters'.

In this example, values for star sign and JavaScript are populated. So an interface StarSignData will extend ElementData to add a 'getter' for it.

Now the internal implementation of it will implement this 'getter' and add a 'setter' for the flow element to use.

Note that this concrete implementation of StarSignData sits in the same package as the flow element, not the StarSignData interface, as it only needs to be accessible by the flow element.

Node's implementation of element data does not require concrete getters for IDE autocompletion, so elementDataDictionary can be used.

JavaScript

The client-side JavaScript for this example will be fairly simple. It will create a popup asking the user to enter their date of birth. It will then store the date of birth in a cookie named 'date-of-birth' and reload the page with the new cookie present.

The JavaScript to do this looks like:

// Ask the user for their data of birth.

var dob = window.prompt('Enter your date of birth.','dd/mm/yyyy');

if (dob != null) {

// Store it in a cookie.

document.cookie='date-of-birth='+dob;

// Reload the page with the new cookie.

location.reload();

}

Flow element

Now the actual flow element needs to be implemented. For this, the flow element's base class can be used which deals with most of the logic. The element properties, evidence keys and the processing are all that need implementing.

C# Java Node.js

Select a tab to view language specific flow element implementation.

First let's define a class which extends FlowElementBase (and partially implements IFlowElement). This has the type arguments of IStarSignData - the interface extending element data which will be added to the flow data, and IElementPropertyMetaData - as we only need the standard metadata for element properties.

This needs a constructor matching the FlowElementBase class. So it takes a logger, and an element data factory which will be used to construct an IStarSignData:

The Init method in this example will simply initialize a list of star signs with the start and end dates of each star sign and add each to a list of a new class named StarSign which has the following simple implementation:

Note that the year of the start and end date are both set to 1, as the year should be ignored, but the year 0 cannot be used in a DateTime.

The new Init method looks like this:

Now the abstract methods can be implemented to create a functional flow element.

First let's define a class which extends FlowElementBase (which partially implements FlowElement). This has the type arguments of StarSignData - the interface extending element data which will be added to the flow data, and ElementPropertyMetaData - as we only need the standard metadata for element properties.

This needs a constructor matching the FlowElementBase class. So it takes a logger, and an element data factory which will be used to construct a StarSignData:

The init method in this example will simply initialize a list of star signs with the start and end dates of each star sign and add each to a list of a new class named StarSign which has the following simple implementation:

Note that the year of the start and end date are both set to 0, as the year should be ignored.

The new init method looks like this:

Now the abstract methods can be implemented to create a functional flow element.

First let's define a class which extends flowElement.

This needs a constructor matching the flowElement class:

Now the abstract methods can be implemented to create a functional flow element.

Builder

Now the flow element needs one final thing, an element builder to construct it. This only needs to provide the flow element with a logger and an element data factory - as this example has no extra configuration options.

C# Java Node.js

Select a tab to view language specific element builder implementation.

The element builder has one important method, and that is Build. This returns a new flow element which the element builder provides with a logger and an element data factory.

The element data factory is implemented in the element builder class to make use of the same logger factory.

The element builder has one important method, and that is build. This returns a new flow element which the element builder provides with a logger and an element data factory.

The element data factory is implemented in the element builder class to make use of the same logger factory.

The Node implementation does not use separate builder classes. Instead the options are provided by optional constructor parameters.

Usage

As this example gathers its evidence using client-side JavaScript, it will need to be run in a web environment. Using a web integration will mean that the flow element can be added, and the client-side JavaScript automatically run.

C# Java Node.js

Select a tab to view language specific usage.

Using a ASP.NET Core project (full example included in the source), a pipeline configuration file can be added to the 'appsettings.json' to load the new flow element and a 'JavaScriptBuilderElement' to include the client-side JavaScript:

{

...

"PipelineOptions": {

"Elements": [

{

"BuilderName": "SimpleClientSideElement"

},

{

"BuilderName": "JavaScriptBuilderElement"

}

]

}

}

Then a simple view can be added which includes '51Degrees.core.js' to run the JavaScript, and displays the message which is passed from the controller:

@{

ViewData["Title"] = "Home Page";

}

<script type="application/javascript" src="~/51Degrees.core.js"></script>

<div class="row">

@ViewData["message"]

</div>

The message is constructed in the controller in the same way as in the previous example:

Using a Spring MVC project (full example included in the source), a pipeline configuration file can be added to load the new flow element and a 'JavaScriptBuilderElement' to include the client-side JavaScript:

<PipelineOptions>

<Elements>

<Element>

<BuilderName>SimpleClientSideElement</BuilderName>

</Element>

<Element>

<BuilderName>JavaScriptBuilderElement</BuilderName>

</Element>

</Elements>

</PipelineOptions>

Then a simple view can be added which includes '51Degrees.core.js' to run the JavaScript, and displays the star sign which is passed from the controller:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>Example page</title>

<script src="/simple-clientside-element-mvc/51Degrees.core.js"></script>

</head>

<body>

<p>${message}</p>

</body>

</html>

The message is constructed in the controller in the same way as in the previous example:

Using a simple HTTP server, a pipeline can created containing the new flow element.

let pipeline = new FiftyOnePipelineCore.pipelineBuilder()

.add(astrology)

.build();

Then a simple view can be added which includes the JavaScript to run, and displays the star sign which is passed from the controller:

<h1>Starsigns</h1>

${flowData.astrology.starSign ? "<p>Your starsign is " + flowData.astrology.starSign + " </p>" : "<p>Add your date of birth to get your starsign</p>"}

${flowData.astrology.hemisphere ? "<p>Look at the " + flowData.astrology.hemisphere + " hemisphere stars tonight</p>" : ""}

<form><label for='dateOfBirth'>Date of birth</label><input type='date' name='dateOfBirth' id='dateOfBirth'><input type='submit'></form>

<script>

${js}

</script>

The message is constructed and returned:

Generated by doxygen 1.8.15