axel framework

The framework builds web pages using instructions, commonly known as actions, placed inside each page.

Details on how to use each action are shown in the tutorials. You'll also learn how to build and deploy web applications. How to connect to backend and external resources such as databases and json feeds.

To get started you need some knowledge on command line such as windows cmd, using a browser and a basic understanding of html.

Navigation

Want to get involved

If you're interested and would like to get involved - join our team on github

Introduction

The framework is designed to build web pages for presentation on the web browser.

Under the hood it has java, spring framework, tools for building presentations layers from xml and json and services that can reach out to other resources.

On top of this, larger teams can add java and javascript developers to build more complex backend and frontend systems.

The framework encourages component page development, making it easier to build and manage large projects. It also fits in with other front end frameworks such as Angular, React and NodeJs - building json feeds from the server and standardising and normalising the data content from the backend.

How It Works

Axel works by calling actions it finds on a web page. These actions are added to the web page by the web site developer. When the action is called it replaces the action content on the web page with the result of the action.

An action looks like 

                <axel:insert page="title.html"/>

The result of this action will replace the action content with the content of the page named title.html.

Now we have html components - on any page where you want to show the title you simply add this action. The inserted page may also have axel actions which will be processed before the page is inserted.

There are many actions that perform different tasks, the insert action is a simple instruction yet introduces the powerfull concept of html components in their native form. The examples on this page show how to use the other actions and their benifits.

Tutorials

To help with building the examples in this tutorial we use an application that runs on your workstation to replicate a web server. The instructions for downloading and running this application are shown in the first example Hello World!!!

1 example - hello world!!!

This first tutorial shows how to download the axel-run application which is used for all the tutorials.

Show "Hello World!!! time" in your browser.
1. Download the latest version of axel-run jar file from this link axel-run-3.1.13.jar
2. From the command line type java -jar axel-run-3.1.13.jar
3. When the application has started open your web browser and enter localhost - you'll see an error "Whitelabel Error Page"
4. In the same location, create a new file called index.html and edit the file adding
                
                    
Hello World!!! ${current.time}
5. In your web browser now type localhost/index.html and you'll see. The time show here will have changed to show your time.
                
Hello World!!! 15:50
You've just created your first html page with axel that shows Hello World!!! with your local time.

2 example - insert a component page

How to import components into a html page.
These instructions follow on from the previous example.

Inserting a component into the index.html
1. Create a new file called comp.html and add the following content
                
                    
<h5>This is an Axel Framework Component Page</h5>
You've just created a simple html component.
2. Edit the index.html page and add the following content
                
                    
<axel:insert page="comp.html"/>
You've added the axel instruction for inserting a component into the index.html page
3. Refresh the browser and now you see
                
Hello World!!! 15:50


This is an Axel Framework Component Page
The new component has been inserted into the indexl.html page

3 example - capture browser parameters

How to access the parameters from the browser using axel

Accessing parameters from a browser request.
1. Edit the index.html page and add the following content
                
                    
<h5>Hello ${request:title} ${request:surname}</h5>
Shows Hello with two request parameters named "title" and "surname"
2. In your browser type localhost/index.html?title=Mr&surname=Flinstone
                

Hello Mr Flinstone
Now you can the two paraameters on screen instead of the replacement markers ${request:title} ${request:surname}

4 example - http call

The http action will make a http call and return the result.

How to get data from an external site.
1. Edit the index.html page and add the following content
                
                    
<axel:http href="http://axelframework.org/data/people.json" method="get"/>
Calls a rest service http://axelframework.org/data/people.json that returns a json object.
2. Refresh the browser and now you see the new content from the http response.
                
[
    {
        "name": "Fred Flinstone",
        "age": 40,
        "phone": "555-5551",
        "address": "1 Main Street",
        "city": "York",
        "state": "Yorkshire",
        "country": "UK"
    },
    {
        "name": "Wilma Flinstone",
        "age": 39,
        "phone": "555-5552",
        "address": "1 Main Street",
        "city": "York",
        "state": "Yorkshire",
        "country": "UK"
    },
    {
        "name": "Barney Rubble",
        "age": 38,
        "phone": "555-5553",
        "address": "2 Main Street",
        "city": "York",
        "state": "Yorkshire",
        "country": "UK"
    },
    {
        "name": "Betty Rubble",
        "age": 37,
        "phone": "555-5554",
        "address": "2 Main Street",
        "city": "York",
        "state": "Yorkshire",
        "country": "UK"
    }
]
The people_json that was returned from the call to http://axelframework.org/data/people.json.

5 example - json presentation

The json presentation action will map selected content of a JSON feed to a presentation form.

Present the json data from an external site.
1. Edit the index.html page and add the following content
                
                    
<axel:http href="http://axelframework.org/data/people.json" method="get" key="people_json"/>
<axel:map_json_to_presentation json_data="${people_json}" json_path="/">
    <axel:form>
        <div>
            <h5>${row:name} age:${row:age}</h5>
            <p style="padding-left:20px;">
                ${row:address}<br/>
                ${row:city}<br/>
                ${row:state}<br/>
                ${row:country}<br/>
                ${row:phone}
            </p>
        </div>
    </axel:form>
</axel:map_json_to_presentation>
Calls a rest service http://axelframework.org/data/people.json that returns a json object and presents the object using axel:map_json_to_presentation.
2. Refresh the browser and now you see the new content from the http response.
Fred Flinstone age:40

1 Main Street
York
Yorkshire
UK
555-5551

Wilma Flinstone age:39

1 Main Street
York
Yorkshire
UK
555-5552

Barney Rubble age:38

2 Main Street
York
Yorkshire
UK
555-5553

Betty Rubble age:37

2 Main Street
York
Yorkshire
UK
555-5554

The people_json that was returned from the call to http://axelframework.org/data/people.json.

6 example - http call xml

The http action will make a http call and return the result. The response may also be stored in the exceContext using the key attribute which can then be retrieved for use by a presentation action.

How to get data from an external site.
1. Edit the index.html page and add the following content
                
                    
<axel:http href="http://axelframework.org/data/people.xml" method="get" key="people_xml"/>
<pre><code><axel:escape format="xml" ref_key="people_xml"/></code></pre>
The first line calls a rest service http://axelframework.org/data/people.xml that returns an xml object. The second line presents the xml on the page using axel:escape to convert the xml to a presentable format.
2. Refresh the browser and now you see the new content from the http response.
<?xml version="1.0" encoding="UTF-8"?>
<root>
   <element>
      <address>1 Lower Street</address>
      <age>40</age>
      <city>York</city>
      <country>UK</country>
      <name>Fred Flinstone</name>
      <phone>555-5551</phone>
      <state>Yorkshire</state>
   </element>
   <element>
      <address>1 Lower Street</address>
      <age>39</age>
      <city>York</city>
      <country>UK</country>
      <name>Wilma Flinstone</name>
      <phone>555-5552</phone>
      <state>Yorkshire</state>
   </element>
   <element>
      <address>2 Lower Street</address>
      <age>38</age>
      <city>York</city>
      <country>UK</country>
      <name>Barney Rubble</name>
      <phone>555-5553</phone>
      <state>Yorkshire</state>
   </element>
   <element>
      <address>2 Lower Street</address>
      <age>37</age>
      <city>York</city>
      <country>UK</country>
      <name>Betty Rubble</name>
      <phone>555-5554</phone>
      <state>Yorkshire</state>
   </element>
</root>
Shows the people_xml that was returned from the call to http://axelframework.org/data/people.xml.

7 example - xml presentation

The xml presentation action will map selected content of an XML feed to a presentation form.

Present the xml data retrieved from an external site.
1. Edit the index.html page and add the following content
                
                    
<axel:http href="http://axelframework.org/data/people.xml" method="get" key="people_xml"/>
<axel:map_xml_to_presentation xml_data="${people_xml}" xml_path="/root/element">
    <axel:form>
        <div>
            <h5>${row:name} age:${row:age}</h5>
            <p style="padding-left:20px;">
                ${row:address}<br/>
                ${row:city}<br/>
                ${row:state}<br/>
                ${row:country}<br/>
                ${row:phone}
            </p>
        </div>
    </axel:form>
</axel:map_xml_to_presentation>
Calls a rest service http://axelframework.org/data/people.xml that returns an xml object that is stored in the execContext with key "people_xml"
2. Refresh the browser and now you see the new content showing the results.
Fred Flinstone age:40

1 Lower Street
York
Yorkshire
UK
555-5551

Wilma Flinstone age:39

1 Lower Street
York
Yorkshire
UK
555-5552

Barney Rubble age:38

2 Lower Street
York
Yorkshire
UK
555-5553

Betty Rubble age:37

2 Lower Street
York
Yorkshire
UK
555-5554

Loops through each object in the people_xml and presents the response.

8 example - json get

How to get an object/s from a json document.

Get an object/s from a json document that already exists in the execContext.
1. Edit the index.html page and add the following content
                
                    
name: <axel:json_get json_data="${people_json}" json_path="name"/>
Gets an object called "name" from a json object stored in the execContext with key "people_json"
2. Refresh the browser and now you see the new content showing the results.
                
name: Fred Flinstone
The "person_json" was stored in the execContext in a previous tutorial and this was used to get the "name" object from the "people_json" object.

9 example - execute java code

The code action invokes java bean methods.

Execute a java method, the result can be shown on the page or stored in the execContext
1. Edit the index.html page and add the following content
                
                    
<axel:code call="axel.AxelCodeExample.getProjectTitle"/>
Calls the getProjectTitle method that returns the property setting for "project.title"
2. Refresh the browser and now you see the new content showing the results.
The method getProjectTitle in the java class AxelCodeExample returns the project title that came from a execContext property that was set when the application started.
Execute a java method that takes a "name" parameter.
3. Edit the index.html page and add the following content
                
                    
<axel:code call="axel.AxelCodeExample.hello">
    <axel:param value="Fred"/>
</axel:code>
Calls the hello method that takes the name as a parameter and returns "Hello " + name
4. Refresh the browser and now you see the new content showing the results.
The method hello in the java class AxelCodeExample returns a string value "Hello Fred".
Execute a java method that gets a sorted list of the first 10 java beans setup in the spring applicationContext.
5. Edit the index.html page and add the following content
                
                    
<axel:code call="axel.AxelCodeExample.getListOf10Beans" key="beans10"/>
Calls the getListOf10Beans method that returns the sorted names 10 beans stored in the execContext key = "beans10".
6. Refresh the browser and now you see the new content showing the results.
                
${beans10}
The method getListOf10Beans in the java class AxelCodeExample returns a list of the first 10 sorted bean names from the spring applicationContext.

10 example - put, get and remove

How to put, get and remove content from execContext.

Put, Get and Remove some content from execContext
1. Edit the index.html page and add the following content
                
                    
<axel:put key="a_key">This is the value stored for a_key</axel:put>
"<axel:get key="a_key"/>"
<axel:remove key="a_key"/>
"<axel:get key="a_key"/>"
Stores a value for "a_key" into the execContext using axel:put then uses axel:get to retrieve it, then uses axel:remove to remove it.
2. Refresh the browser and now you see the new content showing the results.
                

"This is the value stored for a_key"

"null"
The first axel:get returns "This is the value stored for a_key", then the a_key is removed and the 2nd axel:get returns "null"

11 example - if, else and elseif

How to add conditional logic if, else and elseif.

Use if, else and elseif to apply conditional logic.
1. Edit the index.html page and add the following content
                
                    
<axel:put key="a_number">10*10/5</axel:put>
<axel:if expression="${a_number} == 20">
    1. if - a_number: 20
</axel:if>
<br/>
<axel:if expression="${a_number} == 21">
    2.1. if - a_number: 21
<axel:else>
    2.2. else - a_number = 20
</axel:else>
</axel:if>
<br/>
<axel:if expression="${a_number} == 21">
    3.1. if - a_number: 21
<axel:elseif expression="${a_number} == 19">
    3.2. elseif - a_number: 19
</axel:elseif>
<axel:elseif expression="${a_number} == 20">
    3.3. elseif - elseif - a_number: 20
</axel:elseif>
<axel:else>
    3.4. - elseif - a_number != 21 or 19 it's 20
</axel:else>
</axel:if>
Stores a value 10*10/5 (20) for key "a_number", then shows all usage of if, elseif and else
2. Refresh the browser and now you see the new content from the json document.

            
                1. if - a_number: 20
            
            

            
                2.2. else - a_number = 20
            
            

            
                3.3. elseif - elseif - a_number: 20
The results of conditional combinations for if, else and elseif.

12 example - range

Numeric range values that increase or decrease each time they are accessed.

Use to create incremental/decremental indexing values.
1. Edit the index.html page and add the following content
                
<axel:range name="axel-index" from="1" to="100"/>
axel-index:1
axel-index:2
axel-index:3
Creates an incremental index between 1 and 100 named axel-index
2. Refresh the browser and now you see the new content showing the results.
                
axel-index:4
axel-index:5
axel-index:6
The range changes by 1 each time its shown on the page. In this example it's displayed 1, 2 and 3.

13 example - escape and unescape content

Escape and Unescape actions for java, html, xml, javascript, csv and pre (axel presentation - default) The tutorial shows how the escape action works, the unescape action is the reverse of the escape action.

Escape content for axel pre presentation this is the default.
1. Edit the index.html page and add the following content
                
                    
<axel:escape>
    <xml>
        <name>Fred</name>
        <phone>555 5555</phone>
        <secret>${secret}</secret>
    </xml>
</axel:escape>
Adding the axel:escape action with some xml content
2. Refresh the browser and now you see the new content showing the results.
                
                    
<xml>
    <name>Fred</name>
    <phone>555 5555</phone>
    <secret>${secret}</secret>
</xml>
The escape action with default format of pre converted the xml content for presentation on the page.
Escape content for html presentation.
3. Edit the index.html page and add the following content
            
                
<axel:escape format="html">
<xml>
    <name>Fred</name>
    <phone>555 5555</phone>
    <secret>${secret}</secret>
</xml>
</axel:escape>
Adding the axel:escape action with some xml content and setting the format to "html"
4. Refresh the browser and now you see the new content showing the results.
            
                
<xml>
<name>Fred</name>
<phone>555 5555</phone>
<secret>This is the secret</secret>
</xml>
The escape action with format html converted the xml content for presentation on the page and the ${secret} was replaced with the exceContext for "secret".

14 example - eval

The eval "evaluate" action uses javascript evaluations. As an example eval(10*10/2) = 50

Evaluations of numbers and text content
1. Edit the index.html page and add the following content
                
                    
eval1:<axel:eval expression="10*10/2"/>
eval2:<axel:eval expression="10*10/2+${number}"/>
eval3:<axel:eval expression="10*10/2+' textcontent' + ' more textcontent'"/>
<axel:eval expression="100/9.8" key="eval_result"/> <!-- store the result in the execContext with key "eval_result" -->
eval4:${evel_result}
Adding the axel:escape action with some xml content
2. Refresh the browser and now you see the new content showing the results.
                
eval1:50
eval2:55
eval3:50 textcontent more textcontent
 
eval4:10.204081632653061
Some examples of how axel:eval works. Including number and string combinations. Note the eval_result stored in the execContext and used on the line after the evaluation.

15 example - date formatting

Date Formatting converts dates and times to different formats.

Selection of date and time formatting
1. Edit the index.html page and add the following content
                
                    
          yyyy-MM-dd: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="yyyy-MM-dd"/>
          dd-MM-yyyy: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="dd-MM-yyyy"/>
            dd-MM-yy: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="dd-MM-yy"/>
      E, MMM dd yyyy: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="E, MMM dd yyyy"/>
        dd-MMMM-yyyy: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="dd-MMMM-yyyy"/>
    yyyy-MM-dd hh:mm: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="yyyy-MM-dd hh:mm"/>
E, MMM dd yyyy hh:mm: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="E, MMM dd yyyy hh:mm"/>
    MM-dd-yyyy hh:mm: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="MM-dd-yyyy hh:mm"/>
               hh:mm: <axel:date_formatter date_value="2021-12-25 12:30" origin_format="yyyy-MM-dd hh:mm" destination_format="hh:mm"/>
Adding the axel:date_formatter actions with different destination_formats
2. Refresh the browser and now you see the new content showing the results.
                
          yyyy-MM-dd: 2021-12-25
          dd-MM-yyyy: 25-12-2021
            dd-MM-yy: 25-12-21
      E, MMM dd yyyy: Sat, Dec 25 2021
        dd-MMMM-yyyy: 25-December-2021
    yyyy-MM-dd hh:mm: 2021-12-25 12:30
E, MMM dd yyyy hh:mm: Sat, Dec 25 2021 12:30
    MM-dd-yyyy hh:mm: 12-25-2021 12:30
               hh:mm: 12:30
Some examples of how axel:date_formatter works.

16 example - script call

The script action will make a javascript call and return the result.

How to run simple javascript contained in the script content
1. Edit the index.html page and add the following content
                
                    
<axel:script>
	var message = 'Hello World!!!';
	message;
</axel:script>
Runs the javascript and returns the response 'Hello World!!!' which is displayed on screen.
2. Refresh the browser and now you see the new content from the script response.
How to run javascript from a file
3. Create a new folder called js. We use this as a standard location for javascript files.
4. Create a new file called msg.js. This is the javascript file we will call from the script action.
5. Edit the msg.js file and add the following content
                
                    
var message = 'Hello World!!! from msg.js';
message;
6. Edit the index.html page and add the following content
                
                    
<axel:script fileName="js/msg.js"/>
Runs the javascript file msg.js and returns the response 'Hello World!!! from msg.js' which is displayed on screen.
7. Refresh the browser and now you see the new content from the script response.
How to run javascript from a file and pass parameters
8. Create a new folder called js. We use this a as a standard location for javascript files.
9. Create a new file called msgparam.js. This is the javascript file we will call from the script action.
10. Edit the msgparam.js file and add the following content
                
                    
var pname = name;	// name comes from the script action
var message = 'Hello ' + pname + ' from msg.js';
message;
11. Edit the index.html page and add the following content
                
                    
<axel:script fileName="js/msgparam.js">
	<axel:param key="name" value="Fred"/>
</axel:script>
Runs the javascript file msg.js and returns the response 'Hello Fred from msgparam.js' which is displayed on screen.
12. Refresh the browser and now you see the new content from the script response.
Axel uses nashorn javascript engine shipped with java8 +
Helpful links on nashorn
  • Oracle Nashorn
  • Baeldung Quick Tutorial
  • Winterbe Quick Tutorial
    • The current version of Nashorn is ES5 for those using Typescript

    Terminology


    An axel action that returns a results shown on the html page


    The execution context is a container for storing data content and values. These can then be retrieved on the pages using the ${...} notation. As an example ${current.time} will retrieve the current time.