Wednesday, December 31, 2014

Spring Integration - Introduction

In this blog post and the subsequent post, I'm going to write about Spring Integration and also share my experience in using Spring Integration in a live project.

To begin with, I will provide a brief introduction to Spring Integration framework and in the next post I will show how to apply it.

Much of the content of this post is taken from the Spring Integration official website Spring Integration Reference

What is Spring Integration?

Spring Integration is a Spring driven framework which supports message driven architecture and provides routing, transformation of messages and implements the common Enterprise Integration patterns, more importantly the "Pipes and Filters" pattern.

What is Pipes and Filter Pattern?

This is an Enterprise Integration pattern, which is applied, if multiple processing units are required to process a message and we need to increase reuse and also achieve decoupling.

The "filters" represent any component that is capable of producing and/or consuming messages, and the "pipes" transport the messages between filters so that the components themselves remain loosely-coupled.

Components of Spring Integration Framework:

There are 3 main components (as in Pipes and Filter pattern):
  1. Message 
  2. Message Channel
  3. Message Endpoint


Generic wrapper for any Java object combined with metadata used by the framework while handling that object. In the header, any arbitrary key/value could be stored. In other words, any POJO could be used as a Message.

Message Channel:

A Message Channel represents the "pipe" of a pipes-and-filters architecture. Producers send Messages to a channel, and consumers receive Messages from a channel. The Message Channel therefore decouples the messaging components, and also provides a convenient point for interception and monitoring of Messages.

Types of channels:
  1. Point to Point: At most one consumer can receive each Message
  2. Publish/Subscribe: Broadcast each Message to all of its subscribers
Another category of channels:
  1. Pollable Channels: Are capable of buffering Messages within a queue
  2. SubscribableChannel: Iimplemented by channels that send Messages directly to their subscribed MessageHandlers
There are various implementations available for each of the above channel types. For eg, QueueChannel, DirectChannel etc. 

Message Endpoints:

A Message Endpoint represents the "filter" of a pipes-and-filters architecture. This is the processing unit which acts on the message.

Types of endpoint:

  1. Transformer: Responsible for converting a Message's content or structure and returning the modified Message
  2. Filter: Determines whether a Message should be passed to an output channel or not
  3. Router: Responsible for deciding what channel or channels should receive the Message next (if any).
  4. Splitter: Responsible for splitting a message into multiple messages and then send each of those to its output channel.
  5. Service Activator: A generic end point. We can configure a service provider and a service method with custom logic.
  6. Aggregator: Combines multiple messages into one (opposite of Splitter).
  7. Channel Adapter: Connects a Message Channel to some other system or transport.
Types of Channel Adapter:

  1. Inbound adapter: An inbound "Channel Adapter" endpoint connects a source system to a MessageChannel.
  2. Outbound adapter: An outbound "Channel Adapter" endpoint connects a MessageChannel to a target system.

Saturday, December 27, 2014

HTML5 Canvas - Basics

In this post we will take a look at the HTML5 Canvas element and how to use it.

What is canvas?

HTML5 canvas element provides platform to draw stuff on it and also animate them.

How to create a Canvas?

Canvas is a html5 element, which is created as below:

<canvas id="mycanvas" width="578" height="200"></canvas>

How to get a handle to the canvas?

In order to draw shapes or write text into the canvas, we need to get a handle to the canvas object. This could be done in javascript as below:


      var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');



Entire html code:




    <canvas id="myCanvas" width="578" height="250"></canvas>


      var canvas = document.getElementById('myCanvas');

      var context = canvas.getContext('2d');




The TODO line above is where we start writing javascript code to draw shapes etc and play around with the canvas. The code in the following sections are intended to be placed after the TODO.

How to draw a line?

Lines are drawn from the current position of the cursor till the destination x and y coordinates provided. Note that the coordinates are relative points from top left corner of the canvas.

To move the cursor around, we can use the moveTo function.

The width of the line could be set using the lineWidth attribute of canvas.
The color of the line could be set using the strokeStyle attribute of canvas. You can give either rgb values or hex values.

//move the cursor to position (100,200)
context.moveTo(100, 200);
//draw line from (100,200) to (400,100)
context.lineTo(400, 100);
//set line width
context.lineWidth = 10;
//set line color
context.strokeStyle = '##FE2E2E';

How to draw an arc?

To draw an arc, we need to specify the coordinates of the center of the circle and also the radius. The start and end angles decide how big or how complete the arc should be relative to the circle. Whether the arc should be drawn in clockwise/counter clockwise is decided by the last parameter (boolean).

var centerX = 250;
var centerY = 150;
var startAngle = 0.4 * Math.PI;
var endAngle = 1.8 * Math.PI;
var radius = 50;
var counterClockwise = false;
context.lineWidth = 5;

context.arc(centerX, centerY, radius, startAngle, endAngle, counterClockwise);

How to draw a circle?

Circle is a special case of arc, where the start angle is 0 and end Angle is 2* Math.PI.

How to draw a rectangle?

To draw a rectangle, use the rect() function, which takes the x and y coordinates of the top left corner of the rectangle, along with width and height.

var x = 100;
var y = 100;
var width = 300;
var height = 200;
context.rect(x, y, width, height);
context.fillStyle = 'red';