http://blog.dutchworks.nl/2011/12/13/embedding-rss-in-hippo-using-the-pipelines-feature/

Enough of the fun part, now seriously. JTeam has outgrown it’s name. The past year a lot has changed and a new name is the next logical step. I cannot explain this better than my CEO Steven Schuurman. If you are interested you can read his announcement here:

http://blog.dutchworks.nl/2011/10/10/hot-off-the-press-as-of-today-“jteam”-will-be-known-as-“dutchworks”/

Head over to our new website: http://www.dutchworks.nl. Help us spread the word.

Hope to see you back when we write our next technical blog.

In most of our projects we use Artifactory. It is nice that artifactory comes with a REST based api. The url’s can be a bit better and the content type of the response is not what I would expect. Still the documentation is good and lost of actions are possible. In this blog post I show you the basics of interacting with the REST api using groovy. Now let us shrink the repo.

Introducing the artifactory api

The frog wiki has a wiki page dedicated to the api. This page shows the GET/DELETE/PUT requests that you can execute. It shows the url, the response and the content type. If you click the following link you jump to the definition of Folder Info. After the link an image with the same data at the time of writing.

http://wiki.jfrog.org/confluence/display/RTF/Artifactory%27s+REST+API#Artifactory%27sRESTAPI-FolderInfo

In the image you can also see the JSON response for the specific request. Have a look at the structure of the response. Look at the children. We will use it later on.

Obtaining folder info

Time to show some code. We will first have a look at a function to obtain information about the folder as provided by the caller. Since we group the functions in a class we have to look at configuration of this class as well. The constructor accepts a map that we call config. That way you can provided configuration for the server, the repository and the versions to remove. An example of the config map is.

def config = [
    server: 'http://localhost:8080',
    repository: 'libs-release-local',
    versionsToRemove: ['/3.2.0-build-'],
    dryRun: false]

Than we can ask for information about a folder. The following code block shows two functions, one to obtain information about a folder and the other to ask for a connection with the server.

def JSON folderInfo(path) {
    def binding = [repository: config.repository, path: path]
    def template = engine.createTemplate('''/artifactory/api/storage/$repository/$path''').make(binding)
    def query = template.toString()

    def server = obtainServerConnection()
    def resp = server.get(path: query)
    if (resp.status != 200) {
        println "ERROR: problem obtaining folder info: " + resp.status
        println query
        System.exit(-1)
    }
    return resp.data
}

private RESTClient obtainServerConnection() {
    def server = new RESTClient(config.server)
    server.parser.'application/vnd.org.jfrog.artifactory.storage.FolderInfo+json' = server.parser.'application/json'
    server.parser.'application/vnd.org.jfrog.artifactory.repositories.RepositoryDetailsList+json' = server.parser.'application/json'

    return server
}

We make use of the groovy SimpleTemplateEngine. As you can see we build the query string with placeholders and attach a map with parameters to the template engine. Next step is to generate the query. After obtaining the connection to the server we execute the GET request and obtain the JSON data from the response. Notice the lines in the obtainServerConnection. The last two lines add mappings for the artifactory provided content types. We want them to be treated as normal json responses or else our mapping framework (Jackson) will not be able to process the result.

Removing items

The goal for this blog post is to present a script to clean your artifactory repository. Now that we know how to obtain information about a folder in artifactory, it is time to have a look at cleaning. The idea is to take the provided path as a starting point. Go through all the folders recursively and check if we are in an artifact folder. An artifact folder contains artifacts and should not have other folders. If a folder is not an artifact folder we are dealing with a grouped (maven terms). In our case we could determine an artifact folder by its name. All artifacts have -build- in their name. Hence the following function.

private def isArtifactFolder(child) {
    child.uri.contains("-build-")
}

The next utility function is to actually delete a folder. The next function removes the provided path if we are not doing a dry run. If we did configure a dry run, we only print a message and do not actually do the delete. We again use the groovy template technology to create the query. Notice that the artifactory api uses the DELETE request.

private def removeItem(path, child) {
    println "folder: " + path + child.uri + " DELETE"
    def binding = [repository: config.repository, path: path + child.uri]
    def template = engine.createTemplate('''/artifactory/$repository/$path''').make(binding)
    def query = template.toString()
    if (!config.dryRun) {
        def server = new RESTClient(config.server)
        server.delete(path: query)
    }
}

The last piece of the puzzle is the recursive function to check a folder for subfolders and give the command to remove a folder if it is in the list of folder to be removed. The next code block shows this function.

def cleanArtifactsRecursive(path) {
    def deleteCounter = 0
    JSON json = folderInfo(path)
    json.children.each {child ->
        if (child.folder) {
            if (isArtifactFolder(child)) {
                config.versionsToRemove.each {toRemove ->
                    if (child.uri.startsWith(toRemove)) {
                        removeItem(path, child)
                        deleteCounter++
                    }
                }
            } else {
                if (!child.uri.contains("ro-scripts")) {
                    deleteCounter += cleanArtifactsRecursive(path + child.uri)
                }
            }
        }
    }
    return deleteCounter
}

The code is available online through github, check the references.

References

Cleaning up your maven repository

Other blogpost about groovy and cleaning your local maven repository automatically.

Artifactory

Homepage of the creators of Artifactory, here you can also find commercial support

Artifactory REST api

Documentation for the REST api that is provided by Artifactory

The source code

Sourcecode of the script discussed in this article.

http://blog.jteam.nl/2011/08/01/cleaning-up-your-maven-repository

If you want to find out more about this sample read on.

Introducing the sample

The sample is based on the famous address book from the axonframework project. We reuse the axon sample and create a rest like interface that returns json to the clients. The source code is in the rest-ui project within the axonframework source tree under samples. This project also contains the listener code for the Contact and Address based events. The listeners listen for events and publish content from these events to the redis pub/sub mechanism. More on this in the later sections.

The other part of the sample is a node.js application. This application makes use of the rest api to obtain the data via http requests. Events about data changes are received through redis, using the pub/sub mechanism. The node.js application is available on Github. If you want to follow along, you can find the sources here:

https://github.com/jettro/axon-addressbook-nodejs

http://code.google.com/p/axonframework/source/browse/trunk#trunk%2Fsample%2Faddressbook%2Frest-ui

The following screen dump gives you an idea about the application.

In the screen you see the list of contacts. You can add a new contact, change the name of a contact and add addresses to contacts. On the right you see the messages pane. Here you receive messages about new contacts that have been created, changed or deleted.

Now let us have a look at some of the code. We start with the java backend and then continue with the node.js part.

The java part of the sample

Numerous blogs have been written about rest based clients using spring mvc. Therefore I do not want to lose to much time in that area. Most important spring configuration is within the web.xml and the dispatcher-config.xml. In the web.xml we configure that every request is going to the spring dispatcher. We do not have status resources, only json responses. Within spring we make use of annotation to configure the beans. To be able to respond with json we make us of Jackson to transform beans into json objects. All pretty straightforward spring. Check the config file for yourself if you want to see how it works.

Next step is the controller that handles all the requests.

Handling requests in the Cntroller

The Controller handles the following requests:

• /contacts : GET, returns the list of all contacts
• /contacts : POST, creates a new contact
• /contacts : PUT, changes an existing contact
• /contacts : DELETE, removes a contact
• /contacts/{identifier} : GET, returns the details of a contact
• /contacts/{identifier}/address : PUT, creates a new address or updates an existing one based on address type
• /contacts/{identifier}/address : DELETE, removes the address of provided type

Let us have a look at one of the requests to show the flow. For example we take the request for details. The following code block shows the complete method.

@RequestMapping(value = "{identifier}", method = RequestMethod.GET)
public @ResponseBody Map<String, Object> details(@PathVariable String identifier) {
    List<AddressEntry> addressesForContact = repository.findAllAddressesForContact(identifier);
    String name;
    if (addressesForContact.size() > 0) {
        name = addressesForContact.get(0).getName();
    } else {
        name = repository.loadContactDetails(identifier).getName();
    }
    Map<String, Object> map = new HashMap<String, Object>();
    map.put("addresses", addressesForContact);
    map.put("identifier", identifier);
    map.put("name", name);
    return map;
}

The RequestMapping annotation tells spring which requests need to be mapped to this method. The controller already maps all /contacts to this controller. The {identifier} now maps everything with a url like /contacts/{identifier} to this method, as long as it is a GET request. This identifier is also used as a parameter for the method. With the @PathVariable we tell spring to take the value for this parameter from the url or Path that was requested. The final annotation in the method declaration is the @ResponseBody. This tells spring to use the return value as the response body, so not as the name of the view to use. We have already configured to use jackson to transform the response body into json. In the code of the controller you see we return a map with three objects in it. A list of addresses, an identifier of the contact and the name of the contact. The json coming out of this is:

{
"name":"Jettro",
"addresses":[
{
"name":"Jettro",
"identifier":"82b4fef5-3389-440d-8893-6831a64e200d",
"addressType":"PRIVATE",
"streetAndNumber":"Feyenoordlaan 010",
"zipCode":"3000AA",
"city":"Rotterdam"
}],
"identifier":"82b4fef5-3389-440d-8893-6831a64e200d"
}

That is what you need to know about the rest api that I have created. If you want to have a look at the controller, check here. The next step is about the listeners that listen for axon events related to the contacts and addresses and store information in redis.

Listening for events

We register listeners with axon for the contact related events as well as address related events. This is very easy with the annotations provided by the axonframework. The following code block shows how we register an event listener for the ContactCreatedEvent.

@EventHandler
public void handleContactCreatedEvent(ContactCreatedEvent event) {
    ContactEntry value = new ContactEntry();
    value.setName(event.getName());
    value.setIdentifier(event.getContactIdentifier());
    Message<ContactEntry> message = new Message<ContactEntry>("contact-created", value);
    publisher.publish(message);
}

Notice the @EventHandler annotation. This registers the listener with axon. As you can see we take the information from the provided event and put it in a Message object. The message object contains a type and the content. The type can be used at the receiving side to better understand how to handle the received event. The publisher is auto injected by spring. In my case it is a redis publisher.

Publishing to redis

A library to talk with redis is jedis. Jedis makes use of a pool which is configured in spring. Check the listener-context.xml to see how it works. Jedis does not have the most obvious api but it works. The following code block shows how a message is published to redis.

public void publish(Message<?> message) {
    StringWriter writer = new StringWriter();
    try {
        mapper.writeValue(writer, message);
    } catch (IOException e) {
        logger.warn("Problem while writing ContactEntry to a string writer", e);
        return;
    }

    Jedis jedis;
    try {
        jedis = jedisPool.getResource();
    } catch (JedisConnectionException e) {
        logger.debug("Could not obtain redis connection from the pool");
        return;
    }
    try {
        jedis.publish("nl.axonframework.examples.addressbook", writer.toString());
    } finally {
        jedisPool.returnResource(jedis);
    }
}

The code is not very complicated. The important part here is that we use a jackson provided ObjectMapper to map the provided message to a json representation. Then you can see the nice jedis api at work. As you can see we publish a message to a queue. Our node.js client will subscribe to this queue. That is have the redis publish/subscribe works. Not very hard is it?

That is it for the java side. We now know how to get data using the rest api and we know where to get information about events that take place. Let us move on to the node.js side of the application.

The Node.js part of the sample

I do not want to go in setting up a node.js project. Do not want to explain all the different libraries that I use. I have written other blog posts on node.js that I do not want to copy. The most important one is this:

http://blog.jteam.nl/2011/04/18/learning-node-js/

The node.js project uses 4 libraries:

• express – doing the mvc part of the web application
• jade – view templating
• now – server push to the client (will explain this in a bit more detail)
• redis – for redis interaction




Project layout

The public folder contains all the client related files like javascript, css and images. I will explain one file in here later on when discussing node.js. The test folder contains the test for the ContactRepository. Using this test helped me to verify that the integration between the java backend and the node.js application is working without having to start the application and go through the browser to check all requests. The views folder contains all the jade templates. Check mentioned blog post to find more information on jade. The app.’s initializes the application and maps all possible requests to methods in the ContactController. The controller knows where to get the data from and what page to render. The repository is responsible for obtaining data from the rest api on the java side.

Initializing the node.js application

As mentioned the app.js is the start of the application. Let us have a look at the different parts.

var ContactController = require('./ContactController');
var repository = require('./ContactRepository').createRepo('localhost',8080);
var contactController = new ContactController(repository);

This part initializes our components. We will have a look at the createRepo method later on. But notice that we initialize the controller with an instance of the repository.

app.get('/', contactController.listContacts);
app.get('/contact/new', contactController.newContactShowForm);
app.post('/contact/new', contactController.newContactPostForm);
app.get('/contact/:identifier',contactController.contact);
app.get('/contact/:identifier/edit',contactController.changeContactShowForm);
app.post('/contact/:identifier/edit',contactController.changeContactPostForm);
app.get('/contact/:identifier/delete',contactController.deleteContactShowForm);
app.post('/contact/:identifier/delete',contactController.deleteContactPostForm);
app.get('/contact/:identifier/address/new',contactController.newAddressShowForm);
app.post('/contact/:identifier/address/new',contactController.newAddressPostForm);
app.get('/contact/:identifier/address/:addressType/edit',contactController.changeAddressShowForm);
app.post('/contact/:identifier/address/:addressType/edit',contactController.changeAddressPostForm);
app.get('/contact/:identifier/address/:addressType/delete',contactController.deleteAddressShowForm);
app.post('/contact/:identifier/address/:addressType/delete',contactController.deleteAddressPostForm);

These are all the possible requests. The urls are easy to understand. As you can see, all urls are mapped to a method of the contactController

var Now = require('now');
var everyone = Now.initialize(app);

var redis = require("redis"),
    client = redis.createClient();

client.on("error", function (err) {
    console.log("Error %s", err);
});

client.on("message", function (channel, message) {
    everyone.now.receiveContact(message);
});
client.subscribe("nl.axonframework.examples.addressbook");

This is the harder bit. This has to do with receiving messages using the redis pub/sub mechanism and sending it to all connected clients using the nowjs library. I’ll discuss the now.js part later on.

Request handling

By using the repository object the controller becomes very easy. We only have to obtain the right data and render the right view. The most basic method is showing a list of contacts. The following code block shows the complete method.

ContactController.prototype.listContacts = function(req, res) {
    repository.listContacts(function(contacts) {
        res.render('index', {locals: {contacts: contacts, nowjs: true}});
    });
};

Notice that we use a callback that is provided to the repository listContact method. Check that we provide the list of contacts to the view, together with a second parameter called nowjs. Remember this, on this page we enable nowjs, meaning that we can receive messages when looking at this page. Other methods are similar, have a look at the method that handles submitting a form to create a new contact.

ContactController.prototype.newContactPostForm = function(req, res) {
    repository.newContact(req.body.new_name, function(code, message) {
        if (code == "ok") {
            res.redirect("/");
        } else {
            res.render('newcontact', {locals: {error:message}});
        }
    });
};

In line 2 we obtain the form parameter new_name from the request body. Than we create a new contact. The callback method expects a code indicating whether the submission of the new contact was ok. If not, we render the form again with the error message. This happens when we try to create a contact with a name that already exists. The following image shows the screen with an error message.

Next up is the communication with a rest based application

The Repository as a client to a rest application

During the initialization of the application I already mentioned the createRepo method of the ContactRepository. The following code block shows the method. As you can see it initializes a repository with the default values for host and port.

ContactRepository.createRepo = function(host, port) {
    var repo = new ContactRepository();
    repo.host = host;
    repo.port = port;
    return repo;
};

Again most of the interaction with the backend is the same. Therefore I use the create contact again as an example. I have created tests for all the repository methods. Let us have a look at the test first.

function testNewContact() {
    logTestName("New contact");
    repository.newContact("My Test", function(code, message) {
        assert.equal("ok", code, "This should be no problem and an ok should be returned: " + code);
        // Check if the amount of contacts is increased
        repository.listContacts(function(contacts) {
            assert.equal(numContacts + 1, contacts.length, "Number of contacts is not right, create did not work: " + contacts.length);
            testAddAddress();
        });
    });
}

Notice that we check the return code and that the amount of contacts is increased. The following code block shows the implementation of the method of the repository.

ContactRepository.prototype.newContact = function(name, callback) {
    var opts = createHttpRequestOpts('/contacts', 'POST');

    var req = http.request(opts, function(res) {
        res.setEncoding('utf8');
        res.on('data', function(data) {
            if (res.statusCode != 200) {
                console.log(data);
                callback('error', 'Maybe the name is already taken?');
            } else {
                callback('ok', 'The new contact has been send')
            }
        });
    });

    var contact = {};
    contact.name = name;

    req.write(JSON.stringify(contact));
    req.end();
};

function createHttpRequestOpts(path, method) {
    return {
        host: host,
        port: port,
        path:path,
        headers:{'Accept':'application/json','Content-Type':'application/json'},
        method: method
    };
}

I use the nodejs provided http request. Within the help function the opts object is created with the host, port, path, method and the headers. The headers are important to request json. Of course we provide a callback to handle the http response. Everything not 200 is an error as a response code. Here we call the provided callback to the repository method with the ok or error code. At the end of the method we do the actual request creation with the json request.

The final bit is the server push using the now.js library.

Server push using now.js

Node.js comes with a socket.io library. This makes server push very easy. Still it can be a lot easier. That is when using now.js. Now.js enables you to call methods on the client that are actually on the server and vise versa. Let us have a look at the code for sending messages to the client when a redis event is received again.

var Now = require('now');
var everyone = Now.initialize(app);
client.on("message", function (channel, message) {
    console.log("Received message: %s", message);
    everyone.now.receiveContact(message);
});

The important part here is the initialization of now and the line with everyone.now.receiveContact. Now we will call the connected clients method receiveContact and provide the message. Of course we need some client code for this. This code is available in the local.js file in the public folder.

$(document).ready(function() {
    now.receiveContact = function(data) {
        var message = JSON.parse(data);
        var toWrite;
        switch(message.type) {
            case 'contact-removed':
                toWrite = "Contact removed";
                break;
            case 'contact-created':
                toWrite = "Contact with name " + message.content.name + " created";
                break;
            case 'contact-changed':
                toWrite = "Contact changed name to " + message.content.name;
                break;
            case 'address-created':
                toWrite = "Added address of type " + message.content.addressType + " to contact " + message.content.name;
                break;
            case 'address-removed':
                toWrite = "Removed address of type " + message.content.addressType + " to contact " + message.content.contact.name;
                break;
        }
        $("#messages").prepend("<div>" + toWrite + " </div>");
    };
});

As you can see, we construct the message based on the type of the message and prepend a new div within the #messages div. Really that is all there is to it.

Last remarks

That is it. Again a long blog item. Hope you got some new knowledge out of it. Feel free to post comments if you have questions or even better improvements.

In this blog post I present you an additional sample, focussed on creating presentations as a programmer. I’ll use a few node.js modules: Jade, Express.

On my employers blog I wrote an extensive article about Node.js, you can have a look at the article as well.

http://blog.jteam.nl/2011/04/18/learning-node-js/

Requirements

I want to have a tool that supports multiple presentations that can all be shown in a browser. I do not consider a lot of browsers. I like the css support and the full screen view of chrome on the Mac. Therefore I test my work with Chrome only. I guess most of the features work on other browsers as well, some small issues might arise. A big advantage of using the browser is that you have lots of libraries available to create nice looking slides.

The tool needs to be developer friendly, therefore slides are created with code. No hot deploys, no tools to just enter slides. The slides are within the code. This is not an end user tool, this is a developer tool.

Each presentation consists of a title, should be able to work with a chosen template and contains slides of course.

Giving or presenting the presentation should be easy as well. Therefore I want to be able to choose a slide, go to the next slide, the previous slide and the index of all presentations.

Going to a different presentation means using another url. For each presentation we provide a path and the slide index. A url for a presentation skills presentation than becomes:

http://dev.gridshore.nl:8018/presentation/create-presentation-nodejs

The first slide in that presentation than becomes:

http://dev.gridshore.nl:8018/presentation/create-presentation-nodejs/slide/1

The final feature that would be nice is generating a handout. For now this will be a print view in the browser, maybe a pdf. An overview with all the slides on one page will be here:

http://dev.gridshore.nl:8018/presentation/create-presentation-nodejs/all

Chosen technologies

A slide consists of content, layout and styling. I want to limit the amount of styling information in the content. Still I want to make it simple. Therefore I have chosen to use a template engine for the front-end. I have some experience with Jade, which seems to do the job fine. The styling is done using css and where necessary, with additional components. An example is presenting source code on a slide.

When working with a web application and a browser it is wise to have a way to handle requests. Express.js is a nice node.js framework to use for url handling. I’ll get back with some sample code later on.

Since we are creating a web application, we need style sheets and images. I also use jQuery and a few plugins to position elements, to handle keyboard commands and to show source code. Please refer to the references section if you need more information about one of the technologies.

The solution

Project layout

An express.js application consists of an app.js, a public folder and a views folder. The app.js is the start of the application that you call with the node executable. In the public folder we have the static web resources. It contains the stylesheets, client-side javascripts and other static resources. The views folder contains the layout.jade file and all the jade views. Within the images and the views folder we have a subfolder for each presentation. I prefer to use the same path as the path specified for the url for the presentation. More on this later.

The project now has two dependencies: expressjs and jade. I like to manage my dependencies with npm.

Creating the presentation

The presentation is created as a separate component, have a look at presentation.js. It contains the title of the presentation, the urlIdentifier, a description and the slides. The urlIdentifier is used in the url when requesting the presentation in a browser. The slides are also components. You can find the slide component in slide.js. The slide contains an identifier and a title. The identifier is important, this is used to find the right jade view file. The following code block shows the creation of the sample presentation.

var createPresentationNodejs = [];
createPresentationNodejs.push(new Slide("intro","Creating a presentation with Node.js"));
createPresentationNodejs.push(new Slide("goal","Goal"));
createPresentationNodejs.push(new Slide("requirements","Requirements"));
createPresentationNodejs.push(new Slide("technology","technology"));
createPresentationNodejs.push(new Slide("urlhandling","Configure url handling"));
createPresentationNodejs.push(new Slide("handlerequests","Handle requests"));
createPresentationNodejs.push(new Slide("viewcontent","View content"));
createPresentationNodejs.push(new Slide("thefuture","The Future"));
createPresentationNodejs.push(new Slide("questions","Questions"));

presentationController.addPresentation(new Presentation("Creating a presentation with Node.js","create-presentation-nodejs",
	createPresentationNodejs,
    "For my work I had to prepare a short presentation of around 10 minutes. I decided to create a tool to create presentation " +
            "with and present about it. This is the result, a short presentation showing some of the ideas."));

In the first lines you can see how we create the array of slides. The last few lines show how we add a new presentation to the presentationController. We get back to this presentationController later on. First we have to look at express and url handling.

Express and url handling

Express is a web framework for node.js. You can do lots of things, in this blog post I do not want to give to much basics. Check the blog post I wrote on my employers blog: http://blog.jteam.nl/2011/04/18/learning-node-js.

THe thing I do want to mention is the url mapping for GET and POST requests. These are important for the flow of the application. You can also see the way that the PresentationController is used. Have a look at the following code block

var presentationController = new PresentationController();

app.get('/', presentationController.allPresentations);
app.get('/presentation/:urlIdentifier', presentationController.index);
app.get('/presentation/:urlIdentifier/slide/:id', presentationController.slide);
app.post('/presentation/:urlIdentifier/slide/:id', presentationController.command);
app.get('/presentation/:urlIdentifier/all', presentationController.allSlides);

Going to the root of the application gives a list over presentations. Asking the presentation with the urlIdentifier of the presentation gives an overview of the presentation. You can also ask the /all, this will give all the slides. Check the section about a slide handout for more information on this.

The handling of the POST request is for navigation. Within the slide you can enter n for next, p for previous, a number for a specific slide and enter for the next slide. This will result in a command on the server using the post request. Creating this request can be found in the layout.jade. It is a normal form for the action to the url of the current slide number. Using the command and the current slide number we can determine the slide to select. The next block shows the client code, handling the post request is discussed in the next section.

form(action="/presentation/"+urlIdentifier+"/slide/"+numSlide,method="POST")
    input(type="text", size="100", name="command", id="command")

Now we have seen the url handling, let us move on to the logic in the PresentationController

The presentation controller

The presentation controller contains the logic to handle a request and send the response back to the requestor. The following code block shows the the handling for the request to show all available presentations.

PresentationController.prototype.allPresentations = function(req, res) {
    res.render('index', {locals: {presentations:presentations}});
};

The presentations is an internal array for the presentation controller. They are passed to the ‘index’ view. More on the view with jade in the next section. The following code block is slightly more advanced. It contains the logic to show one slide.

PresentationController.prototype.slide = function(req, res) {
    var id = req.params.id;
    var presentation = obtainPresentation(req.params.urlIdentifier);
    var slide = presentation.slides[id - 1];
    res.render(presentation.urlIdentifier + '/slide/' + slide.identifier,
            {locals: {
                numSlide:req.params.id,
                totalSlide:presentation.slides.length,
                titleSlide:slide.title,
                urlIdentifier:presentation.urlIdentifier
            }});
};

function obtainPresentation(urlIdentifier) {
    var len = presentations.length;
    for (var i = 0; i < len; i++) {
        var presentation = presentations[i];
        if (urlIdentifier == presentation.urlIdentifier) {
            return presentation;
        }
    }
    throw "Could not find the url: " + urlIdentifier;
}

The code contains a helper function to determine the presentation to show a slide for. The presentation is obtained by the url identifier. The page is rendered by using the specific jade template that is stored using the urlIdentifier in the slides folder. The name of the jade template is the same as the identifier as stored in the slide object.

The last bit I want to discuss is the command handling. We have a small form at the bottom of the page. This form accepts commands. We support ‘n’ or ‘next’, ‘enter’, ‘p’ or ‘previous’ and the number of a slide. These all navigate between the slides. We also have the ‘home’ command. This redirects to the root of the application. Handling the different commands is done with a very easy if-the-else structure. The following code block shows the idea.

PresentationController.prototype.command = function(req, res) {
    var id = req.params.id;
    var urlIdentifier = req.params.urlIdentifier;
    var command = req.body.command;
    var presentation = obtainPresentation(urlIdentifier);
    var numSlides = presentation.slides.length;

    if (command == 'next' || command == 'n' || command == '') {
        if (id < numSlides) id++;
    } else if (command == 'previous' || command == 'p' || command == 'prev') {
        if (id > 1) id--;
    } else if (command == 'home') {
        res.redirect('/');
        return;
    } else if (!isNaN(command)) {
        var commandNum = parseInt(command);
        if (commandNum > 0 && commandNum &lt;= numSlides) id = commandNum;
    }

    res.redirect('/presentation/' + urlIdentifier + '/slide/' + id);
};

Enough about logic, let us move on to the view side and discuss templating using Jade.

Little bit of jade

Again I do not want to go into all the details of jade. Jade is a very condensed format for creating html pages. It integrates nicely with express. Data is passed from express to jade. Jade uses a layout file, you can also use partial rendering without a layout file. More on this in a next section. In this case we include the header and the footer in the layout file. Each slide is presented in its own jade template file. The following code block shows the jade template for the intro slide in the sample.

img(src='/images/' + urlIdentifier + '/logo.jpg')
div.heading author
div.heading Jettro Coenradie
img(src='/images/' + urlIdentifier + '/nature.jpg', class="shadow")

Another nice thing about using the web browser as a tool is that you can use nice plugins available for websites to create your slides. A good example is showing source code. This is what the next section is about.

Showing code

To show source code I use a syntax highlighter from alex gorbatchev. The client side library files are included in the public folder. Showing code in a jade template looks like this.

pre(class="brush: js")
    | app.get('/', function(req, res) {
    |     res.render('index',
    |         {locals: {slides:slide.allSlides()}});
    | });
    | app.get('/slide/:id', slide.index);
    | app.post('/slide/:id', slide.command);
script(type="text/JavaScript")
    | SyntaxHighlighter.all()

Creating a slide handout

One of the requirements of a presentation is often to have the slides available as a pdf document or other format that is able to share the slides. The path I am taking is using one page for a presentation that contains the complete presentation. I would love to have a pdf generated from the webpage. But for now this is one step to far. I did have a look at using node.js child processes to run a command line tool called wkhtmltopdf. I want to do some more experimentation here. Will get back when I have a good solution. Beneath are some references if you want to try it out yourself.

• http://blog.darkhax.com/2010/11/29/2-node-js-apps-that-showed-me-the-light
• http://code.google.com/p/wkhtmltopdf/




To be able to create one page with all the slides I made use of the partial rendering of jade and express. The idea is to pass a the presentation to a view. The view steps over all the slides in the presentation and renders the views on one page. The following code block shows the view (all.jade).

div#All slides
h2 #{presentation.title}
ul
    - each slide in presentation.slides
        - var slideTemplate = presentation.urlIdentifier + '/slide/' + slide.identifier
        .slideAll
            - if(typeof(slide.title) != "undefined")
                div.title #{slide.title}
            !=partial(slideTemplate, {'urlIdentifier':presentation.urlIdentifier})

The “presentation” object is provided by the express component. From this object we obtain the path in the views folder. The presentation object also contains the slides. Each slide has its own identifier. Using the slide identifier and the urlIdentifier we can find the jade template to render. The trick is in the last line !=partial(…). This tells the engine to include the specific slide templates in he current view.

The demo

There is an online demo available at: http://dev.gridshore.nl:8018/. It contains only one presentation at the moment. But that is enough to get an idea. This blogpost also contains two screen dumps.

The future

I want to integrate the pdf generation within the application. I have some hints, but not the complete solution. Maybe extend the tool in a way that you can create new presentations on the fly, but I do not want to make an alternative to presentation tools that are already there. I also want to add more controls, would be nice to be able to use the arrow keys and maybe support remote controls that way.

References

• http://nodejs.org/ – Node.js home page
• http://expressjs.com/- Express.js
• http://jade-lang.com/- Jade
• http://alexgorbatchev.com/SyntaxHighlighter- Code beautifier
• https://github.com/jettro/nodejs-presenter – the code for the sample.
• http://blog.darkhax.com/2010/11/29/2-node-js-apps-that-showed-me-the-light – inspiration for pdf export.
• http://code.google.com/p/wkhtmltopdf/ – want to use for pdf export.




In this blog post I will provided as much steps that I can remember and or wrote down while installing a node.js server on my Synology. This was not the easiest thing I have ever done. If I can help some others that want to get more out of their Synology my hours of work are worth it.

Terminal access

The Synology comes with an installed firmware. In my case I started with the 3.1 DSM software.

Tweaking you Synology starts with obtaining Terminal access. You can enable this in the configuration panel of DSM. By default you can access your synology using DiskStation.local with the admin or root account. For the things we are going to do I recommend using the root account. The password for the root account is the same as for the admin account. Just so you know. Go on check if you have access

# ssh root@DiskStation.local

ipkg

The next step is to install ipkg, the package manager for you synology. There are multiple resources on the web that explain how to do this. Most of them point to this wiki page. It is important to take the right version of the bootstrap for your synology system. The variations in processors used are big, therefore you have to use the right software. The processor can be obtained using this page. You can also find out more about your system from the command line.

DiskStation> uname -a
Linux DiskStation 2.6.32.12 #1605 Thu Mar 24 02:12:03 CST 2011 armv5tel GNU/Linux

For the DS211+ I needed the Marvel Kirkwood mv6282 ARM. The easiest way to get in onto your system is to use wget. Remember that tool, we will talk more about it.

wget http://wizjos.endofinternet.net/synology/archief/syno-mvkw-bootstrap_1.2-7_arm-ds111.xsh

I created a downloads folder in the home folder of root. Executing the script is very easy

sh syno-mvkw-bootstrap_1.2-7_arm-ds111.xsh

Now we have ipkg installed. The best way to check if it works is to update and upgrade.

DiskStation> ipkg update
Downloading http://ipkg.nslu2-linux.org/feeds/optware/cs08q1armel/cross/unstable/Packages.gz
Inflating http://ipkg.nslu2-linux.org/feeds/optware/cs08q1armel/cross/unstable/Packages.gz
Updated list of available packages in /opt/lib/ipkg/lists/cross
Successfully terminated.
DiskStation> ipkg upgrade
Nothing to be done
Successfully terminated.

If you just want to install software that is available via ipkg, this is it. In my case I want to install node.js. This is not available via ipkg, therefore we need to compile it ourselves. This is where the problem starts. So in the next section we will have a look what you need to compile stuff.

Compile from source

Compiling source code on linus needs compilers (gcc) and headers files. The header files contain information about the libraries that are required during compilation of code that makes use of these libraries. Ipkg has the option to install development libraries that are required to compile source. To bad the current version does not work out of the box. With the help of some resources on the web and a lot of experimentation I finally got a working system. This part is the most important part of getting your system ready to compile node.js.

Usually you would install optware-devel with ipkg. But we start off with some other libraries that will not work with optware-devel.

ipkg remove wget
wget http://ipkg.nslu2-linux.org/feeds/optware/cs08q1armel/cross/unstable/wget-ssl_1.12-2_arm.ipk
wget http://ipkg.nslu2-linux.org/feeds/optware/cs08q1armel/cross/unstable/openssl_0.9.8p-1_arm.ipk
wget http://ipkg.nslu2-linux.org/feeds/optware/cs08q1armel/cross/unstable/libidn_1.19-1_arm.ipk
ipkg install libidn_1.19-1_arm.ipk
ipkg install openssl_0.9.8p-1_arm.ipk
ipkg install wget-ssl_1.12-2_arm.ipk
ipkg install openssl-dev

We are almost set, now I have a problem with my limited linux knowledge. I found some resources on the web and in the end I had to copy some resources around. So these steps might not be optimal, but they did work for me.

I took the first step from this post.

mkdir /opt/arm-none-linux-gnueabi/lib_disabled
mv /opt/arm-none-linux-gnueabi/lib/libpthread* /opt/arm-none-linux-gnueabi/lib_disabled
cp /lib/libpthread.so.0 /opt/arm-none-linux-gnueabi/lib/
cd /opt/arm-none-linux-gnueabi/lib/
ln -s libpthread.so.0 libpthread.so
ln -s libpthread.so.0 libpthread-2.5.so

The final copying you need to do actually only appeared to me when running node.js. Therefore I am not completely sure if this is right, but again it works for me.

cp /opt/lib/libssl.so.0.9.8 /usr/lib
cp /opt/lib/libcrypto.so.0.9.8 /usr/lib

If I remember correct, now is the time to start downloading node.js and start compiling.

Compiling node.js

Before we start compiling we need to have some source. This page describes what you need to do:

https://github.com/joyent/node/wiki/Installation

I downloaded node in the /root folder, called ./configure and put the results in /opt/node. Before you can do that you need to install git first. This is easily done using ipkg. Now the steps to perform:

ipkg install git
cd /root
git clone https://github.com/joyent/node.git
cd node
./configure --prefix=/opt/node
make
make install

Hope it all goes as aspected and no errors arise. Beware the make step can take a long time (15-30 minutes or something). The next step is to add node.js to your path. In the root folder you can find the .profile file. In here you will find a PATH variable. Change it to include the folder /opt/node/bin. Something like this

PATH="/opt/node/bin:$PATH:/bin:/sbin:/usr/bin:/usr/sbin:/usr/syno/bin:/usr/syno/sbin:/usr/local/bin:/usr/local/sbin"

That is the end of the journey. Now you can do your node things like install npm, express, jade, sass, socket.io, etc. If you have an application running you can execute it from the shell. The problem is that it does not keep running when you logout. There are multiple mechanisms to keep the process running. I found one that is actually itself a node.js application. It seems to do the trick for me.

https://github.com/indexzero/forever

That is it, node.js running on your synology. if you want more information about what I am running on my synology, check the sources on Github or check my previous blog post.

http://www.gridshore.nl/2011/03/16/first-steps-with-node-js/

https://github.com/jettro/nodejstryout

In this blog item I want to show you the steps I took, the resources I found useful and some improvements to the article that seems a bit outdated. It is not an explanation of what Node.js is, but it does provide some help to get started on your own.

The source

I took the sources from the article of Ciaran Jessup as my basis. So a lot of credits go to him. You can find my sources over at github:

https://github.com/jettro/nodejstryout

Setting up my environment

If you want to do something with nodejs, you have to install it first. I used MacPorts to install it, but lots of other ways are documented on the wiki. Using MacPorts all you have to do is:

sudo port install nodejs

The next step is to install a package manager. The mentioned article uses kiwi, but the node.js documentation recommends npm. Therefore I chose to use npm as well. Installing npm is documented well on the website: https://github.com/isaacs/npm. To be honest I am not sure anymore whether I installed using curl or using the download/make procedure. But in the end you should be able to install dependencies using npm. I just love the way npm is used to update modules. Not easy when using multiple projects that need different versions. But maybe there is a solution to that as well. For now, lets focus on installing some modules or dependencies. Everything needs to be done with sudo, just so you know. No worries, I’ll explain the different modules later on.

# sudo npm install express
# sudo npm install jade
# sudo npm install sass

Time to check if your environment works, try to execute the famous HelloWorld sample. But first issue the command: node –version. The following code block shows the sample as presented on the Node.js homepage.

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Now start the server with node using : node helloworld.sh and point your browser to http://127.0.0.1:8124/.

Now you have your http server running, nice stuff.

The sample

The sample is all about providing a blog. The structure of the sample is based on the original sample. We have a public folder, a views folder and the application js files are in the root. These folders are used later on in the express code. Express is a web modules for Node.js. You can find out more about the module here: http://expressjs.com/. The next section explains a bit more about using expressjs.

The sample can be started using the app.js file by calling node app.js. We start by analyzing the app.js file.

var express = require('express');
var pub = __dirname + '/public';
var app = express.createServer();
var ArticleProvider = require('./articleprovider-memory').ArticleProvider;
var articleProvider = new ArticleProvider();
// ... more express stuff, will be discussed later on
app.listen(3000);
console.log('Express server started on port %s', app.address().port);

First we obtain the express modules, then we define a folder called pub that points to the public folder as mentioned before. In line 3 we create the express server and an ArticleProvider. The ArticleProvider is copied 1-on-1 from the article that was mentioned before. It is an in memory implementation for the datastore of the blog items. Check the sourcecode if you want to learn more about it. The final two lines are setting the port for the server to start, start the server and print a line to the console that the server has been started.

In the next section we will configure the express server.

Express

More information : http://expressjs.com/.

The following code block is the remainder of the application. There are two parts in the code block. The first part is the configuration of the server, the second part configures the url handling. Within the server configuration we define the view engine (jade) and the folder where the views can be found. Another thing is the folder where the stylesheets in sass format are that need to be compiled. We also define the folder where the public files are using the static method. The last configuration is the bodyParser. This is required for handling the post. The second part about url handling is covered after the code.

app.configure(function() {
    app.set('view engine', 'jade');
    app.set('views', __dirname + '/views');
    app.use(express.compiler({ src: pub, enable: ['sass'] }))
    app.use(express.methodOverride());
    app.use(express.static(pub));
    app.use(express.logger());
    app.use(express.bodyParser());
});

app.get('/', function(req, res) {
    articleProvider.findAll(function(error, docs) {
        res.render('blog', {locals: {docs: docs}});
    });
});

app.get('/blog/new', function (req, res) {
    res.render('blog_new', {locals: {title: 'New Blog Item'}});
});

app.post('/blog/new', function (req, res) {
    console.log('The provided title is : %s',req.body.new_title);
    articleProvider.save({title: req.body.new_title, body: req.body.new_body},
            function(error, docs) {
                res.redirect('/');
            });
});

Within the sourcecode you can identify three urls that are handled: /, /blog/new and a post to /blog/new. Notice that we use callbacks? This is what Node.js is all about, handling async callbacks. If you look at the app.get method for ‘/’ you’ll see that we call the findAll method of the ArticleProvider. The result is used to render a view with the name blog. The part with locals is used to provide parameters to the view. In this case we provide the returned docs to the view. The next section will show you the very basics of jade, a template engine.

Jade

More information can be found here: https://github.com/visionmedia/jade.

Jade is a high performance template engine heavily influenced by Haml and implemented with JavaScript for node.

I am not going to give a lot of details about jade here. The following code block shows you the view with all the blog items.

h1 My blog
div
    a(href='/blog/new') New blog item
div#articles
    - each blog in docs
        div.article
            div.title #{blog.title}
            div.created_at #{blog.created_at}
            div.body #{blog.body}

As you can see, the code is very condensed. A good tool with code completion would be nice though. Still if you have some programming experience it should not be to hard to read. Check the mechanism for making a distinction between a class and an id. # is used to represent an idea and a ‘.’ for a class. These both will be good to use in a stylesheet. Which is a nice bridge to the next section. This section is about sass that needs to be compiled in a stylesheet. The following code block shows the layout.jade file. This file contains the main template with the header of all pages. Check the way to define we use html 5.

!!! 5
html(lang="en")
  head
    title My Blog
    link(href="/style/style.css", media="screen", rel="stylesheet", type="text/css")
  body
    div!= body

Sass

More information can be found here: https://github.com/visionmedia/sass.js.

Is a condensed way of writing stylesheets. Before the stylesheets can actually be user they need to be compiled. This is done by express, check one of the earlier sections. The following codeblock shows the complete stylesheet. I guess it should not be to hard to follow if you have stylesheet experience.

body
  :font-family "Helvetica Neue", "Lucida Grande", "Arial"
  :font-size 13px
  :text-align center
  =text-stroke 1px rgba(255, 255, 255, 0.1)
  :color #555
h1, h2
  :margin 0
  :font-size 22px
  :color #343434
h1
  :text-shadow 1px 2px 2px #ddd
  :font-size 60px
#articles
  :text-align left
  :margin-left auto
  :margin-right auto
  :width 320px
  .article
    :margin 20px
    .created_at
      :display none
    .title
      :font-weight bold
      :text-decoration underline
      :background-color #eee
    .body
      :background-color #ffa

Concluding

There you have it, my first try on Node.js with extensive help of Ciaran Jessup. I do like Node.js., I love the speed of development. Would be nice to have some IDE support. I tried WebStorm, but it does not have Node.js support. It does help with the JavaScript coding. I will definitely continue playing around with Node.js. The next step is have a look at Rabbitmq.js. Finally I want to extend another sample of mine that makes use of the Axon framework with rabbitmq and Node.js for the front end. I also want to have a good look ar Socket.IO. So stay tuned for more blogs on this topic.

Resources

• https://github.com/jettro/nodejstryout
• http://howtonode.org/express-mongodb
• http://nodejs.org/
• https://github.com/isaacs/npm
• http://expressjs.com/guide.html
• https://github.com/visionmedia/jade
• https://github.com/visionmedia/sass.js




Within this blogpost I’ll explain the installation of maven on Snow Leopard and I’ll present the bash script that can help you to switch between installations of maven.

Maven on the Mac (Snow Leopard)

By default maven is installed in the path: /usr/share/java. The maven executables are installed as maven-3.0.2 and maven-2.2.1. Since the upgrade path is a bit slow I tend to install my own maven binaries. I extract them as provided by apache using the apache-maven-x.x.x format.

A soft link is available in /usr/share/maven. This is the link that points to one of the maven binaries. This is the place where you switch between versions of maven. You can remove the soft link and create one to the right maven home folder. A small catch is that you need to be root to remove and create the link. Using sudo is good enough.

The commands to do this are:

cd /usr/share
sudo rm maven
ln -s /usr/share/java/apache-maven-3.0.2 maven

So not a lot of work, but just annoying to do one or more times a day. Therefore I have wanted to have a bash script to do it for me.

Introducing bash

When automating something on the Mac I tend to use bash. I am not an expert, but using google I can do interesting things. I’ll step to the script. To start off, define the two maven installations that I currently use:

maven2=apache-maven-2.2.1
maven3=apache-maven-3.0.2

Next step is to remove the current soft link if it exists.

if [ -e /usr/share/maven ]
then
	sudo rm /usr/share/maven
fi

Next is to store the maven implementation version in a variable

maven=$maven3

if [ $# == 0 ]
then
	echo "No Arguments supplied, using default maven 3"
elif [ $1 == 2 ]
then
	maven=$maven2
else
	echo "Using the default maven setting, provided argument [$1] is not recognized"
fi

The default is maven 3, than we check if arguments are provided to the script. If no arguments are provided, we do nothing and use the default. if an argument is provided we check if it is 2. If so, we set maven 2 as the implementation. If something else than 2 is provided we take the default which is maven 3. The final step is to create the soft link again.

sudo ln -s /usr/share/java/$maven /usr/share/maven

Using spaces

One thing that took me a few moments to understand is the use of spaces within bash. maven=$maven2 is not the same as maven = $maven2

The complete script

#!/bin/bash
echo "Setting the maven implementation version"

maven2=apache-maven-2.2.1
maven3=apache-maven-3.0.2

if [ -e /usr/share/maven ]
then
	echo "Remove the maven soft link."
	sudo rm /usr/share/maven
else
	echo "Maven soft link could not be found."
fi

maven=$maven3

if [ $# == 0 ]
then
	echo "No Arguments supplied, using default maven 3"
elif [ $1 == 2 ]
then
	echo "Setting maven to use to maven 2"
	maven=$maven2
else
	echo "Using the default maven setting, provided argument [$1] is not recognized"
fi

echo "Creating new soft link to $maven"
sudo ln -s /usr/share/java/$maven /usr/share/maven

Room for improvement

It would be nice to do a scan of the directory /usr/share/java and provide you with options to select from. You could also select the most recent version of maven 2 or 3 or even 2.2 and 3.0. If I have a need for that I’ll update the script

Concluding

That is it, you now have a script that you can call with the implementation you want to set. I called mine setmaven.sh and you would call it like:

./setmaven.sh 2

You can check if it is working with the well known mvn –version command

Feel free to comment for improvements.