Jayanga Dissanayake's Blog: January 2014

This post shows how to create a Maven project from command line. Creating a Maven project from command line is note a difficult task. Following are the steps.

Create a directory "testApp" and move into that directory
Run the following command, which will do some downloading from the repository
```
mvn archetype:generate
```
Then you will be asked to select a preferred configuration from the given list. It will prompt with a default archetype "org.apache.maven.archetypes:maven-archetype-quickstart" selected. No need to enter a value. Just press enter for the moment.
It will prompt you to select the version of the archetype. By default the latest is selected. No need to enter a value. Just press enter.
It will prompt you for several other inputs

Define value for property 'groupId': : com.example.testapp

This will be the package id

Define value for property 'artifactId': : mytestapp

This will be the name of the final .jar file and whole project will be created inside a directory having this name

Define value for property 'version':  1.0-SNAPSHOT: :

No need to give any input, just press enter

Define value for property 'package':&nbsp; com.example.testapp: :

No need to give any input, just press enter

Confirm properties configuration:
groupId: com.example.testapp
artifactId: mytestapp
version: 1.0-SNAPSHOT
package: com.example.testapp
 Y: : Y

Confirm the given information by entering 'Y'

You will see the following out put or similar

[INFO] ----------------------------------------------------------------------------
[INFO] Using following parameters for creating project from Old (1.x) Archetype: maven-archetype-quickstart:1.1
[INFO] ----------------------------------------------------------------------------
[INFO] Parameter: groupId, Value: com.example.testapp
[INFO] Parameter: packageName, Value: com.example.testapp
[INFO] Parameter: package, Value: com.example.testapp
[INFO] Parameter: artifactId, Value: mytestapp
[INFO] Parameter: basedir, Value: /home/<custom-path>/testApp
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] project created from Old (1.x) Archetype in dir: /home/<custom-path>/testApp/mytestapp
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 2:58.495s
[INFO] Finished at: Wed Jan 22 01:29:20 IST 2014
[INFO] Final Memory: 13M/981M
[INFO] ------------------------------------------------------------------------

A new directory structure along with a pom.xml file is now created. This directory structure and the configurations inside the pom.xml is selected by the archetype. As we didn't specify any archetype, the default "org.apache.maven.archetypes:maven-archetype-quickstart" is used and project is configured according to that.
At this stage you have success fully created a new Maven project using command line.

This is a very simple application written in Jaggery. It is basically a address book which supports adding new record to the book and deleting records from the book. This application is purposely restricted to those functionalities to keep the code simple to make it easier for the newbies.

Prerequisites
Jaggery should be downloaded and the server should be running. http://jaggeryjs.org/howto.jag

Step 1
Create directory “addressbook”, inside the 'apps' directory. ({JAGGERY_HOME}/apps/)
So your new directory should look like, {JAGGERY_HOME}/apps/addressbook

Step 2
Create a file called “index.jag” inside the directory “addressbook”

Add the following code snippet to the file “index.jag”
NOTE: This is not a part of the Address Book application. But this will help you to see that your application is working.

1
2
3

<%
    print(“Address Book”);
%>

Wait a while until the server automatically deploy your new application.
Goto the below link via your web browser. It should show “Address Book” in the page.
Link http://localhost:9763/addressbook/index.jag

Step 3
Create a file called “jaggery.conf” inside the directory “addressbook”
This one of the most important files in the Jaggery application. It contains application level configurations. For more information please refer http://jaggeryjs.org/apidocs/jagconf.jag
Add the following basic configurations to the jaggery.conf file.

{
    "displayName":"Address Book", 
    "welcomeFiles":["index.jag"],
    "urlMappings":[       
        {
            "url":"/records/*",
            "path":"/controller/records.jag"
        }
    ]
}

This is need to see the correct display name in the management console. To see please follow the link below
https://192.168.184.1:9443/admin/carbon/

Step 4
Add the following code to the index.jag file

<html>
    <head>
        <title>
            AddressBook
        </title>
        <link href="css/styles.css" rel="stylesheet"></link>
  
    </head>
    <body onload="AddressBook.viewAllRecords()">
        <div class="main_container">
            <div class="row">
                <div class="header">
                    <span class="title">Address Book</span>
                </div>
            </div>
            <div class="row">
                <div class="inputForm">
                    <form action="" id="addNewRecordForm" name="addNewRecordForm">
                        <table>
                            <tr>
                                <td>Name</td>
                                <td>: <input id="name" type="text" /></td>
                            </tr>
                            <tr>
                                <td>Address</td>
                                <td>: <input id="address" type="text" /></td>
                            </tr>
                            <tr>
                                <td>Telephone</td>
                                <td>: <input id="telephone" type="text" /></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td class="add_record_button"><a class="#" onclick="AddressBook.addNewRecord();">Add Record</a></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="row">
                <div id="records">
                </div>
            </div>
            <div class="footer">
                JD&copy
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/mustache.js"></script>
        <script src="js/addressbook.js"></script>
    </body>
</html>

Step 5
Create a directory called "js", and a file called "addressbook.js" inside it. And copy latest versions of "jquery.min.js" and "mustache.js"

Add the following code in to addressbook.js

AddressBook = new function() {

this.addNewRecord = function () {
    console.log("Function called addNewRecord");

    var name = $("#name").val();
    var address = $("#address").val();
    var telephone = $("#telephone").val();

    if(name == null || name == ""){
        alert("Name is null");
        return false;
    } else if(address == null || address == ""){
        alert("Address is null");
        return false;
    } else if (telephone == null || telephone == ""){
        alert("Telephone is null");
        return false;
    }

    if(!AddressBook.validateTelephone(telephone)){
        return false;
    }

    AddressBook.resetInptForm();

    //console.log("Name:" + name);
    //console.log("Address:" + address);
    //console.log("Telepone:" + telephone);

    var data = {"name":name, "address":address, "telephone":telephone};

    AddressBook.makeRequest("POST", "/addressbook/records/", data, function(hmtl){AddressBook.viewAllRecords();});
}

this.resetInptForm = function(){
    $("#name").val('');
    $("#address").val('');
    $("#telephone").val('');
}

this.validateTelephone = function(telephone){
    var stripped = telephone.replace(/[\(\)\.\-\ ]/g, '');
    if(isNaN(parseInt(stripped))){
        alert("Invalid telephone number");
        return false;
    }else{
        return true;
    }
}

this.makeRequest = function (type, url, data, callback){
    console.log("Function called makeRequest");

    $.ajax({
        type: type,
        url: url,
        data: data,
        dataType: "json",
        success: callback
    });
}

this.viewAllRecords = function () {
    console.log("Function called viewAllRecords");

    // Requsting all the records
    AddressBook.makeRequest("GET", "/addressbook/records/", null, function(html){AddressBook.loadRecords(html);});
}

this.loadRecords = function(data) {
    console.log("Function called loadRecords");

    // Updating the display with new records
    $.get('template/record.html', function(templete) {var html = Mustache.to_html(templete, data); $("#records").html(html);});
}

this.deleteRecord = function(id){

    var answer = confirm("Are you really want to delete?");

    if(answer){
        var data = {"id":id};
        AddressBook.makeRequest("POST", "/addressbook/records/", data, function(hmtl){AddressBook.viewAllRecords();});
    }
}

}

Step 6
Create a directory called "controller", and a file called "records.jag" inside it.

<%
include("../model/recordQuery.jag");

var verb = request.getMethod();
var name = request.getParameter('name');
var address = request.getParameter('address');
var telephone = request.getParameter('telephone');
var id = request.getParameter('id');

if(verb == "POST" && name != null && address != null && telephone != null) {

    var log = new Log();
    log.debug("Adding new record. [Name=" + name + ", Address=" + address + ", Telephone=" + telephone + "]");

    addRecord(name, address, telephone);

} else if(verb == "POST" && id != null ) {
    var log = new Log();
    log.debug("Deleting record. [Id=" + id + "]");

    deleteRecord(id);

} else if(verb == "GET") {
    listAllRecords();
}

%>

Step 7
Create a directory called "model", and a file called "recordQuery.jag" inside it.

<%

function addRecord(name, address, telephone){

    var records = session.get("records");
    if (records == null){
        records = new Array();
        session.put("records", records);
        session.put("id", 0);
    }
    
    var id = session.get("id") + 1;
    session.put("id", id);

    var record = {"id":id, "name":name, "address":address, "telephone":telephone};
    records.push(record);

    //var log = new Log();
    //log.info(session.get("records"));
}

function listAllRecords(){
    var records = session.get("records");

    //var log = new Log();
    //log.info(records);

    if (records != null){
        records.sort(sortRecords);
        print({"records" : records});
    }else {
        print("No records");
    }
}

function sortRecords(first, second){
    if (first.name < second.name){
        return -1;
    }
    else if(first.name > second.name){
        return 1;
    }
    else {
        return 0
    }
}

function deleteRecord(id){
    var records = session.get("records");

    for (var index = 0; index < records.length; index++){
        var record = records[index];
        if(record.id == id){
            var temp_record = records[records.length - 1];
            records[records.length - 1] = records[index];
            records[index] = temp_record;

            records.pop();

            break;
        }
    }
}

%>

Step 8
Create a directory called "template", and a file called "record.html" inside it.

<div>
<table class="record_table">
    <tr class="table_header">
        <td>
            Name
        </td>
        <td>
            Address
        </td>
        <td>
            Telephone
        </td>
        <td>
        </td>
    </tr>
{{#records}}
    <tr class="table_row">
        <td class="column_name">
            {{name}}
        </td>

        <td class="column_address">
            {{address}}
        </td>

        <td class="column_telephone">
            {{telephone}}
        </td>

        <td class="column_delete">
            <a href="#" class="delete" onclick="AddressBook.deleteRecord({{id}})">Delete</a>
        </td>
    </tr>

{{/records}}
</table>
</div>

The AddressBook is now ready with adding records and deleting records.
Try yourself to add the update functionality to this.

Jayanga Dissanayake's Blog

Wednesday, January 22, 2014

Create Maven project from command line

How to Install Maven (Apache Maven)

Thursday, January 16, 2014

Address Book (Jaggery Application)