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.
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.
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.
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!!!
This first tutorial shows how to download the axel-run application which is used for all the tutorials.
Hello World!!! ${current.time}
Hello World!!! 15:50
How to import components into a html page.
These instructions follow on from the previous example.
<h5>This is an Axel Framework Component Page</h5>
<axel:insert page="comp.html"/>
Hello World!!! 15:50
This is an Axel Framework Component Page
How to access the parameters from the browser using axel
<h5>Hello ${request:title} ${request:surname}</h5>
Hello Mr Flinstone
The http action will make a http call and return the result.
<axel:http href="http://axelframework.org/data/people.json" method="get"/>
[
{
"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 json presentation action will map selected content of a JSON feed to a presentation form.
<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>
1 Main Street
York
Yorkshire
UK
555-5551
1 Main Street
York
Yorkshire
UK
555-5552
2 Main Street
York
Yorkshire
UK
555-5553
2 Main Street
York
Yorkshire
UK
555-5554
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.
<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>
<?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>
The xml presentation action will map selected content of an XML feed to a presentation form.
<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>
1 Lower Street
York
Yorkshire
UK
555-5551
1 Lower Street
York
Yorkshire
UK
555-5552
2 Lower Street
York
Yorkshire
UK
555-5553
2 Lower Street
York
Yorkshire
UK
555-5554
How to get an object/s from a json document.
name: <axel:json_get json_data="${people_json}" json_path="name"/>
name: Fred Flinstone
The code action invokes java bean methods.
<axel:code call="axel.AxelCodeExample.getProjectTitle"/>
<axel:code call="axel.AxelCodeExample.hello">
<axel:param value="Fred"/>
</axel:code>
<axel:code call="axel.AxelCodeExample.getListOf10Beans" key="beans10"/>
${beans10}
How to put, get and remove content from execContext.
<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"/>"
"This is the value stored for a_key"
"null"
How to add conditional logic if, else and elseif.
<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>
1. if - a_number: 20
2.2. else - a_number = 20
3.3. elseif - elseif - a_number: 20
Numeric range values that increase or decrease each time they are accessed.
<axel:range name="axel-index" from="1" to="100"/>
axel-index:1
axel-index:2
axel-index:3
axel-index:4
axel-index:5
axel-index:6
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.
<axel:escape>
<xml>
<name>Fred</name>
<phone>555 5555</phone>
<secret>${secret}</secret>
</xml>
</axel:escape>
<xml>
<name>Fred</name>
<phone>555 5555</phone>
<secret>${secret}</secret>
</xml>
<axel:escape format="html">
<xml>
<name>Fred</name>
<phone>555 5555</phone>
<secret>${secret}</secret>
</xml>
</axel:escape>
<xml>
<name>Fred</name>
<phone>555 5555</phone>
<secret>This is the secret</secret>
</xml>
The eval "evaluate" action uses javascript evaluations. As an example eval(10*10/2) = 50
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}
eval1:50
eval2:55
eval3:50 textcontent more textcontent
eval4:10.204081632653061
Date Formatting converts dates and times to different formats.
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"/>
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
The script action will make a javascript call and return the result.
<axel:script>
var message = 'Hello World!!!';
message;
</axel:script>
var message = 'Hello World!!! from msg.js';
message;
<axel:script fileName="js/msg.js"/>
var pname = name; // name comes from the script action
var message = 'Hello ' + pname + ' from msg.js';
message;
<axel:script fileName="js/msgparam.js">
<axel:param key="name" value="Fred"/>
</axel:script>