Lessons learned n unlearned over time

I used tables for designing sites from the beginning. And from the beginning I had been using Dreamweaver for designing.
Designing layout with Dreamweaver using tables is no-brainer. Its dead easy to visually manipulate pretty much all aspects of design.
I always considered Dreamweaver a very productive tool. I think it beats everything when it comes to rapid prototyping.
But after really getting curious about all the CSS-P buzz floating around the internet, I decided to look into the ultra-hyped DIV based design using CSS or referred in short as CSS-P..
And All I could hear everyone claiming was people using tables for layout are village-idiot equivalent for designing. And I heard all these people claiming that tables are only used by people who find themselves reluctant or unable to shake off the legacy of last century.
And how semantics mattered and how un-semantic design was deplorable.

And suddenly I found myself worried because I neither liked to be the village-idiot equivalent of design world nor liked being tagged a man from the gone-by century, reluctant to change and still clinging to the world as I knew in that gone by century.

I did a lot of research and I must have read every blog by hippies who claimed to have found the holy grail of 2-column ,3-colum and liquid design.
I eagerly trialed out all those holy-grails. I was overwhelmed by the amount of hacks that was required to create simple designs that I considered no-brainer when I designed them using tables. But I didn’t let those insane hacks deter me in my quest to become a better designer.

I was rewriting a CMS I developed at that time and I was busy developing a site for a client using my home-grown CMS.
The site was already in production and I had some back-end stuffs to fix.
And while I was at it, I decided to redesign the front-end that was table based using DIVs and CSS.
And I had fairly good success although I had to use some javascript to give me what I wanted. Of course the overall design was very neat. But after 3-4 weeks shit hit the fan, let me tell you.
Every aspect of the site was dynamic, and depending on the page and user, the site had to shrink and grow. The main content area and the sidebar especially. When the content started piling up and the sidebar needed to grow, the content started bleeding out of the sidebar. And when I fixed that the main area for content started bleeding.
It was a nightmare.

So, there I was again trying to redesign the site again to fix the site up to bring it to a usable state.
And I had no choice but to bring in tables. Gasp! Horror!
That’s the sound of indignation of CSS purist at my blasphemous mention of tables for layout design.
The hybrid layout did the trick and fixed all the bleeding but I still needed a little help from javascript to give me the desired effect.

Here’s how I needed the layout to be, and CSS/DIV failed me vary badly.

From that time on I have decided I’ll never listen to religious CSS Purist out there who just design some lousy static site and claim they know it all.
And one argument that I totally utterly despise from CSS purist is that “ YOU DON’T KNOW CSS, THAT’S WHY YOU CAN’T DO THINGS PROPERLY’.

That smell of arrogance gets me more than anything else.

CSS is not the end itself fellows, its just a lousy mean to an end.

And you can take your semantic argument and shove it up where the sun never shines.
When the purists harp on about semantics it sound like nothing more than priests harping on about abstinence and the need to keep yourself pure to respect god’s law, thou shall not screw until you are married.
Anything that takes such religious form is very far removed from science. And web-design has shit-load more to do with science than it has to do with religion.

My brother is an artist, his specialty is water color. Mostly he designs by just sketching out coarse outline in pencil and applying color to the canvas.

But when he need precision in his art for say a portrait, he draws out grids in canvas with pencil and starts sketching and then fills up the sketches with paint, and the paintings come alive.
He is a self taught artist and though he never took art classes in his school or anywhere for that matter, yet intuitively he uses grids to get a better layout and precision of his paintings when situation demands

What does that tell??

Maybe nothing, maybe something…..

As for me, it tells me that grids help us organize/arrange content in a layout in an intuitive way, be it an artist’s canvas or a web developer’s HTML markups.

But, on the other hand, using CSS for layout is a fundamentally flawed concept. The concept of emulating table layout with a ton of CSS hack has serious flaws. BOX-Model is conceptually flawed model for designing layouts.
Common sense tells me that if something has a borders and padding, those structures should be contained within that element that gets decorated. It shouldn’t affect its surrounding environment.

Think of it this way. If you want to create fences around your house compound, do you force your neighbor to restructure his house and his compound so u can add a fence (border?? ) or do u just build a fence within your compound??
What if you want to build a really thick wall? Does that mean your neighbor had to make a bigger adjustment? IF your neighbor’s house is very close to the border of your compound, does that mean that your neighbor has to demolish part of his house to accommodate your really thick walls??
Think about the chaos it ensues were things like that in reality.
The side-effect of any structural changes or decoration should only affect only that element and the rest of the elements in your layout shouldn’t have to suffer as a consequence.
Makes sense?

Pragmatism tells me that tables make more sense for layout, but of course all CSS purist will gasp in horror when they hear it.
Every time someone says they prefer Table based layout or hybrid layout, the purists seem to think that those people are against CSS.

Before complicating things too much with purist headset, one should ask themselves a very important quesiton. Is CSS/DIV layout answer to all question?
IF not are there other alternatives to your problems?
IF so and if the alternatives work for you what will stop you from using it??

Oh, I know the answer to the last question for most purists and CSS-P fanboys. ” But, its semantically incorrect…. and it has previewed drawbacks …”.
One thing to keep in mind is all these damn tools available to us have only one purpose, to aid us in our development. So they are supposed to serve us.
So the question is what are semantics for? I don’t serve CSS or W3C, I make CSS serve me the way I see fit for a given situation.
IF CSS doesn’t work for me I don’t cry myself to death or spend days trying to solve something that can be done in an hour using something else.

And one funny argument I keep on hearing is that screen-readers get confused when one use tables for layout because screen-readers take content inside a table as being tabular data.
Hello, people who write those damn things aren’t half that stupid. And screen-reader have been in existence long before this CSS-P fever gripped the general 20-something mass of new breed of wide-eyed designers.

And, by the way, I’m not  a designer by profession.

Javascript is a tricky language. Since I learned programming with Java, I always find myself trying to find its equivalence in other languages I come across.

I know its bad in that in that it kind of stops me from exploring the potentials provided by other languages in full. Its like going to a Chinese restaurant and eating fried rice everytime because fried rice is the only dish that is close to what I’m used to eating daily.
There’s such variety in Chinese food, and yet if I go there and I eat fried-rice evertyime Its a sign I have a bit of a problem opening myself up to new things. And that’s a big problem.

The world has such diversity in every-aspect imaginable, ( with the exception of mob-justice and mob-mentality which seem to cross all cultural and geographical boundary as it seems), and not being able to appreciate the diversity and learn for it is a great pity.

Back to programming, not all constructs  found in languages are sole property of a  given language. They are  generally abstractions provided by languages to solve problems effectively and those abstractions can be applied in other languages even if they don’t provide such explicit constructs.

There was a time when I treated javascript like lepers, something to avoid at all cost, except when it was really unavoidable.
But then I had a change of perspective, at a philosophical level -dare I day. ‘If I avoid something to such length then I must be shit-scared of it for some reason’.
And by nature I hate to admit my fears for the fear of being tagged a wussy, a chicken.
Of course I can find things to justify my avoidance of javascript to others without admitting my fear, but how about myself?
What do I tell myself when I go to sleep??
And since I couldn’t find reasonable arguments to fool myself into good sleep because my rational self always counter-argued that ‘you  fear what you don’t understand’, and my arguments against javascript were just my lame attempt to hide my fears , I decided to deal with my fears for once and for good.

And since then I have been quite happy with my javascript experience.

Since I’m still a Java fan-boy, though I have a feeling that it won’t be for  too long, Scala! here I come,  I tried to find solution to variable scoping in javascript so that I have more control over objects I create and the API’s I expose. This has been a big issue due to the need for me to use at least 3-4 third-party libraries to get my job done for the current project I’m rewriting.
And the project has a massive javascript code-base.

Looking back at the code I did last year makes me cringe. There was no modularity and there was too much interdependency between components and objects.

(Hmm… component decoupling is entirely another topic for another sleepless night.)

And this time around I decided to do thing the right way – at least to my best knowledge.

After long hours prowling the internet, finally I managed to understand the trick to accomplish what I wanted.

So here’s an example of an object with everything pubic, the dumbest example.

var Person= function(name ,surname, sex, dob){

this.name=name;
this.surname=surname;
this.sex=sex;
this.dob=dob;

this.getFullName=function(){

return this.surname+","+this.name;
}

this.getAge=function(){

return (new Date().getYear() - this.dob.getYear()) ) ;// I'm being lazy here

}

}

// another a little less dumb-looking flavor with prototyping but dumb nonetheless
var Person= function(name ,surname, sex, dob){

this.name=name;
this.surname=surname;
this.sex=sex;
this.dob=dob;
}

Person.prototype.getFullName=function(){
return this.surname+","+this.name;
}
Person.prototype.getAge=function(){
return (new Date().getYear() - this.dob.getYear()) ) ;
}

All the properties in of the object are accessible to any function/code that instantiates Person object. And getFullName() is nothing more but a handy method for getting both name and surname.
And the calling code can access dob and compute age by itself.
So everything is accessible.

var person = new Person('inny', 'minny', 'yes please', new Date(1901, 0, 1) );

var fullname= person.surname+","+person.name;

var age=  (new Date().getYear() - person .dob.getYear()) ) ;

Of course one can argue that we can differentiate the difference between private and public by using underscore for private properties such as _dob ( as a lot of people insist on doing).

But who are we fooling? That’s just a convention we use, and if you work in a large team there’s no guarantee that someone else will not get smart and start mutating the underscored variable and shit might hit the fan depending on how critical the property is.

Instead of developing ad-hoc convention I believe its more ideal to use the best of what a language provides without having to define our own rule which can be broken by anyone who cares to break it. Sometimes I don’t trust myself,let alone trust others.

So if we need to hide the DOB for privacy reason and only expose the age,  and we need to hide the individual name and surname for some reason, here’s how its done:

var Person= function(name ,surname, sex, dob){

this.sex=sex;

this.getFullName=function(){

return surname+","+name;
}

this.getAge=function(){

return  (new Date().getYear() - .dob.getYear()) ) ;

}
}
Person.prototype.getGender=function(){
var sex=this.sex,tolowerCase();
if( sex=='male' || sex=='m' )
return 'male';
else if( sex=='female' || sex=='f' )
rerturn 'female';
else
return 'god knows';

}

Person.prototype.getSpecies=function(){

return 'mammal';
}

In the above example, any instantiating code has only access to getFullName() , getAge() functions and ’sex’ variable of person object.
But we allow ’sex’ variable to be declared in two forms, long and short. And we return ’sex’ in  long format with the help o getGender() helper function.

The above example can be broken down as following;

All variables except sex are private as they are constructor-scoped.
getFullName() and getAge() are privilaged function that have access to private variables name, surname and sex and thus are privileged/protected functions.

getGender() is a public function that has access to public variable sex.
the new getSpecies() is a public function that returns a value that’s entirely in its own scope.

So, there we have it, private, privileged and public access in javascript.

If we want to use module pattern the above can be modified to:

var Person= function(name ,surname, sex, dob){

this.sex=sex;
return{

getFullName:function(){

return surname+","+name;
},

getAge:function(){

return  (new Date().getYear() - this.dob.getYear()) ) ;

},
getSpecies:function(){

return 'mammal';
}

}
}

An example of creating static object with private and public scope:

var Human = function() {

var species = "mammal";

return {

alert: function(){alert(species);}

};
}();

Human.alert();//displays 'mammal'

Here the variable species is private.
The function gets executed immediately due to () at the end of the function definition and will return a public static method alert()

That sums up variable scopes in javascript.

Some people perceive the world as being black and white and nothing inbetween the  two colors.
Either its black or its white.

Reality has many shades.
For those willing to acknowledge, the shades of grey between black and white is infinite.
Its not a very complicated concept and its not the case that people don’t understand the meaning of it. Its just that they deliberately choose not to acknowledge the fact. Because acknowledging it bring complication in their simplified world. Black and white is lot simpler to deal with than the possibility of infinite shades of grey.

Its  a deliberate attempt to dumb down the reality so that its easier to grasp and less painful to digest .
Of course the shades of grey is not exactly infinite technically,  as there can only be so many shades of grey, but for simplicity we can say the shades of grey are infinite.
So, why do some people refuse to acknowledge the existence of grey color, let alone the possibilities of almost infinite shades?
Why does the color grey threaten people so much that they blindly refuse its existence?
Its the same as a blind screaming that the sun doesn’t exist. But not being able to see the sun is hardly the proof of its non-existence.
Perhaps its the metaphicycal bullshit they embrace that’s the root of all this. “I see therefore it exists”.
“Human knowledge begins with awareness of one’s own ideas and the world we see around is a result of one’s awareness.”
Once you believe or make yourself believe consciousness has  primacy over existence  , then the world around you can be simplified almost infinitely. You can refuse to acknowledge the existence of things around you one by one until your world is only filled with a handful of things that you allow into your consciousness or you allow them to exist with your consciousness, and the simplicity of the resulting world is  “less mind numbing”  to deal with.

So if you only allow black and white to exist in your consciousness, then the world is just black and white because since consciousness precedes existence for you, consciousness can be trimmed down to suit your needs. When you close your eyes all you see is black. So you can further trim your consciousness by closing your eyes and only allowing black to exist. I think a black world is a far more simpler than a black and white world.
Once you decide to simplify the world around you there’s no limit on what you can achieve.
Perhaps black is the only unescapable color, beside that you can do away with the rest.

I had used a function and a little bootstrapping trick to solve my problem with including files in PHP and I was happy with it.
But recently while working on a project that has a heavy javascript codebase, I started having trouble managing  all javascript file imports and all those script tags made pages look really ugly.
And also I really longed for java’s clas importing capabilities in javascript such that I could import a single file based on package name or I could import a whole package.
Since some of the pages I’m working requires over 15 script imports, some third-party libraries and some of our own files.
And importing scripts one by one suffers from latency problems as it increases page load time and can contribute to user annoyances.
So I longed for  java’s style of package and class  import and  decided to try my hand on writing some script to emulate imports based on packages.

I jsut used the  similar principle I used with php, but the problem is importing all files in a package isn’t possible in javascript because  javascript cannot read files form disk let alone iterate through a folder and read file content.
For that there was nothing I could do except use some server-side help.

here’s the js file code with  function for importing js file and js files contained in a package(folder).

//create namespace to aviod any present/ future  variable/object/funciton conflicts

if (typeof Anzaan == "undefined" || !Anzaan) {

Anzaan = {};
}

// array to hold all imported files so as not to import them twice
Anzaan.imports = [];

//server side URL for loading whole package content
Anzaan.packageLoaderURL='/Framework/packageLoader/';

//set the base folder for importing files
Anzaan.importBase='js/';

/**
* import a class using the java naming syntax for a class name.
*@param module the module to import
*@param  config object literal with two properties-
* config.packageLoaderURL - the server url for loading all files in a folder/package as a stream
* config.importBase - the base path for importing files
* use config only if necessary otherwise just modify Anzaan.packageLoaderURL and Anzaan.importBase
* of course you can use a different namespace or just use no namespace
*/
function Import(module, config) { //com.anzaan.framework.*

if(config){
if(config.packageLoaderURL)
Anzaan.packageLoaderURL=config.packageLoaderURL;

if(config.importBase)
Anzaan.importBase=config.importBase;
}

// if this import has already happened, don't bother,
if (Anzaan.imports[module] )
return ;

var head= document.getElementsByTagName('head')[0];
var script= document.createElement('script');
script.type= 'text/javascript';

var src='';
var folders=module.split(".");
for(var i=0;i<folders.length;i++){

if(folders[i].indexOf('*') < 0)
src+=folders[i]+"/";
}
src=src.substring(0,src.length-1);//remove the last slash

if (module.indexOf('*') < 0) { //if not package import
src=Anzaan.importBase+src+".js";
script.src=src;

} else {
script.src=Anzaan.packageLoaderURL+"?package="+Anzaan.importBase+src;
}

head.appendChild(script);
Anzaan.imports[module] = module;
}

The config parameter is optional. It shouldn’t really be used unless you want to load files from locations other tahn the default location of your application and want to use other URL for loading script files.

Just modify the global variables Anzaan.packageLoaderURL and Anzaan.importBase to set the base path and the serverside URL for loading scripts in folder.
And of course rename Anzaan to something more meaningful for you.

Now on the server side here’s a simple php script that services the script file requests.
It loads contents from js flies that reside in folder specified by ‘package’  variable.

packageLoader.php
————————————————

<?php

$folder=$_GET["package"]; // get the package name

$dir = opendir($folder); //open directory

while (($file = readdir($dir)) !== false) {
if (strrpos($file, '.js')) {

echo file_get_contents($folder.'/'.$file); //printout the content of file

}
}

?>

and here’s a Java Servlet for doing the same thing:

JSPackageLoaderServlet.java

public class JSPackageLoaderServlet extends HttpServlet {

@Override
public void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/plain");
ServletOutputStream out = response.getOutputStream();

String packagePath = request.getParameter("package");

StringBuilder sb = new StringBuilder();

File myDir = new File(getServletContext().getRealPath(packagePath));
if (myDir.exists() && myDir.isDirectory()) {
File[] files = myDir.listFiles();
for (int y = 0; y < files.length; y++) {

String line = "";
BufferedReader in = new BufferedReader(new FileReader(files[y]));

while ((line = in.readLine()) != null) {
sb.append(line);

}

}

}
out.print(sb.toString());
}
}

Here’s the usage:

Import('anzaan.event.EvenHandler');

I really like the way java handles packages and the way it import classes based on package description.
Last year while  developing  a php  based CMS application, I faced shitload of trouble when it came to file including.
The problem was if I was making a normal page request, realtive URL’s  worked this way:
“../framework/service/DataService.php” and I used

inlcude_once("../framework/service/DataService.php")

to include a script.

But for accessing files using AJAX request for some weird reason I had to use single dot at the start of the path – instead :

inlcude_once("./framework/service/DataService.php").
<pre>

And as such I hit a kind of brick-wall because say I have a script that I need to accesss normally and via AJAX call, and the file included some other files, then what do i do?  I either have to put duplicate includes one with single dot and one with double dots at the begining and there was no way I was going to do such stupid things.
So I set out to solve this truely annoying problem.
I found some scripts in the net that did what I needed, almost….
I stole a script from the net and modified to suit my need. And since then my life has been so easy  you won’t believe.
with that scrip all I had to do was import files just the way I do in good old Java.
Even better I started using the same conventions as java.

So my imports look like this nowaday:

import("com.barahisolutions.cms.model.MenuPermission");

and if I want to import all files in a package I use the same comvention as java and
and use ‘*’ instead of file name.

import("com.barahisolutions.cms.model.*");

The code looks very neat and all my scripts are neatly organised in packages and life has been good ever since.

I divide all my scripts into two main folders. One classses to hold all project specific classes and one lib to hold all my library files. and i set these folders as include path using ini_set. I just have to do one inculde_once statement to include the file that has the import function and for the rest I use import function to include the required classes and files.

Of course its not all that simple. Because relative path to the classes and lib folders may be different depending on where the page/script that uses the import function is located. so instead of using ini_set in every place I want to use the import function, I used a little trick to solve the problem. I created one more function bootstrap and used it to calculate the relative path to the classes and lib folder before doing the ini_set.
From there all I have to do is include this file as a bootstrap for my applicaitons and I was ready use the import function for all my file include needs.

Here’s a stripped down version of the bootstrap file with the required funcitons.

bootstrap.php.

// array to keep track of all the already included files
$_imports = array();

// set the include path to the classes and lib folder
function bootstrap(){

//get the current script's path  relative to the applicaiton root folder
$rel_paths=explode('/',$_SERVER['SCRIPT_NAME']);
$path="";

// calculate the depth relative to the root folder
if(sizeof($rel_paths)>2){
for($i=2; $i< (sizeof($rel_paths)-1); $i++){
$path.="../";
}
}
// set the include path for our application's library and class files
ini_set('include_path', $path.'lib' . (DIRECTORY_SEPARATOR == '/' ? ':' : ';') .
$path.'classes'.(DIRECTORY_SEPARATOR == '/' ? ':' : ';') );

}
//just execute the funciton.
bootstrap();

/**
* Import a class using the java naming syntax for a class name.
* use * to include all files in a package
* @param string $name The name of the package to be imported
* @return void
*/

function import($import) {

// if this import has already happened, don't bother,
if (isset($_imports[$import]) )
return true;

// seperate import into a package and a class
$lastDot = strrpos($import, '.');
$class = $lastDot ? substr($import, $lastDot + 1) : $import;
$package = substr($_import, 0, $lastDot);

// create a folder path out of the package name
$folder = '' . ($package ? str_replace('.', '/', $package) : '');
$file = "$folder/$class.php";

if ($class != '*') {
// add the class and it's file location to the imports array

include_once($file);

} else {
// add all the classes from this package and their file location to the imports array
// first log the fact that this whole package was alread imported
$_imports["$package.*"] = 1;
$dir = opendir($folder);
while (($file = readdir($dir)) !== false) {
if (strrpos($file, '.php')) {
include_once("$folder/$file");
}
}
}

$_imports[$import] = $import;
}

That’s all that is required.

Now if you include this file, you  can simple use the import statement to import files that you need in your script.

samle usage: (its assumed that the file that actually uses MenuController class has already included the bootstrap.php file.
class MenuController.php

//import all the required classes
import('com.barahisolutions.cms.model.Menu');
import('com.barahisolutions.cms.dao.MenuDAO');
import('com.barahisolutions.cms.dao.UserPermissionDAO');
import('com.barahisolutions.framework.menu.VerticalMenu');

class MenuController {

// your business logic here

}

I have been reading a lot of posts on functional style programming and its amazing how things can be simplified  by using functional style of programming.
I find it hard to get my head around a lot of the functional programming concepts like Monad and Functors.

I seem to understand what they are when I read articles on them but I keep forgetting  in a few days time and I have to start over again. Perhaps the problem is that I haven’t been able to find use cases for them in my everyday programming which happens to be Java mostly and javascript and PHP occasionally.

Javascript is actually great for functional style programming as Functions are first-class citizens in Javascript.

But recently I actually managed to apply a little functional style programming to solve a recurring task in a java application I’m working on.

I need to transform  full-blown objects into combo-box friendly objects that  I can transform into JSON object and send it to webpages for use in forms.

Let’s take an example of a Person object. The drop-down box for person should have person’s id as value and
for display text  it should be a combination of surname and name.

For ease of use  for getting display text let’s   say we have  a Person class that  returns  name and surname combination  through its toString() method.

So, here’s our person class.

class Person {

private Integer id;
private String name;
private String surname;

// other interesting properties
..........

// getters and setter methods
........
.....
public String toString(){
return surname+", "+name;
}

}

And I have a class called Combovalue.

class Combovalue {

Integer value;
String  label;

public ComboValue(Integer value, String label){
this.value=value;
this.label=label;
}

// getters and setters
.........

}

Now that we necessary classes we need a handy way to map  a List of Person to a List of  comboValues.

For that  we’ll use a Utility class  for mapping and  an interface that has a method to do the transformation .

First is class ListMap which has a static method which takes a list of Type A  objects and returns a List of Type B object.
Well, for our example, the method should take a list of Person and return a List of ComboValue.

And we need an interface that has a method that takes an argument of type A and returns an object of type B.
Of course for our example it should take a person and return a ComboValue.

Here’s the interface that should be implemented to do the object transformation. Its not really transformation per se, but let’s call it that for simplicity.

It takes a parameter of type A and return a value of type B.

public interface ITransformer<A,B> {

public  B transform(A value);

}

Here’s the class whose static method  transforms  a list of type A to list of type B.

public  class ListMap {

public  static <A, B  > List<B>  map(  List<A> list, ITransformer<A,B> f ){

List<B> values= new ArrayList<B>();

for( int i=0; i<list.size();i++){

values.add( f.transform(list.get(i)) );

}
return values;
}

}

Now the usage:
Say we have a method in one of our classes in our application that handles this transformation.
It retrives a list of Person from database, passes it to the map() method of ListMap  serialize it into JSON and returns it.

Class JSONService{

XStream xstream ;

public JSONService(){
xstream = new XStream(new JettisonMappedXmlDriver());

}

public String getPersonCombos(){

//Assume we have a DAO class to retrieve data for us as List.

List<Person> list= pesonDao.getList();

//now the magic
List<ComboValue> combos = ListMap.map(list, new ITransformer<Person, ComboValue>() {

public ComboValue transform(Person person) {

return new ComboValue(person.getId(), person.toString());

}
});

//use XStream to serialize the list into JSON data.
return xstream.toXML(combos)

}

}

That’s alll the magic.

Transforming object by object can be a pain in the back-side. And the above technique is hardly that useful.
As we’ll end up creating methods for each domain to return combo data. And if we have say over 50 domain objects its a pain. And the above abstraction doesn’t ease our pain much

So, Say we define an interface  called Entity that has a single method.

public interface Entity {

public Integer getId();

}

Our person class and all our Domain classes implement this interface.

and our Person class becomes:

class Person implements Entity {

// the rest is unchanged
}

now lets modify our JSONService class.

Class JSONService{

XStream xstream ;

public JSONService(){
xstream = new XStream(new JettisonMappedXmlDriver());

}

public String getCombo( Class clazz){

//Assume we have a DAO factory with a method that returns a DAO object for a given class  to retrieve data for us as List.

List<clazz> list= DAOFactory.get(clazz).getList();

//Since all our domain classes implement Entity interface we pass in the argument type as Entity

List<ComboValue> combos = ListMap.map(list, new ITransformer<Entity, ComboValue>() {

public ComboValue transform(Entity entity) {

return new ComboValue(entity.getId(),  entity.toString());

}
});

//use XStream to serialize the list into JSON data.
return xstream.toXML(combos)

}

}

And now we have a nice way of transforming any entity into ComboValue object and returning it as JSON !

With Java Generics and a bit of inspiration from functional programming we have a reusable classes  that forms a component that will always obey the fundamental rule of  returning List of type B for any supplied list of type A.

Hardly rocket science, but useful piece of abstraction nevertheless.

I have been developing  vehicle-tracking system at work  for the past 1 year  or so and we use google for mapping.
Their enterprise license isn’t cheap and we didn’t  have  a viable alternative. I looked into OSM and found their coverage of Australia  not quite upto what we needed. We thought google has all  we needed and settled for it.
Few months back  a security company from Fiji showed keen  interest in buying our product as well as acting as our distributor in Fiji.
That’s where the problem began. You see, Google’s coverage of Fiji is next to nothing, no roads, just a few zoom levels and that was it.

Like all good customers, their patience on the two months timeframe i had given them to get Fiji’s map up and running ran out before the deadline  and last week I promised them I’ll show them at least something within a week.  And of course I had no clue how I was going to keep that promise.

I tried my hand on all sorts of things, I tried to configure and run our own map server to spit our tiles for Fiji,  I tried overlaying Fiji’s map data (which the client provided as shapefiles and it only covered a part of Fiji) on google map, I used good-old Firebug to debug OpenGTS’s
tracking website to see how they did their tracking using Open Street Map.

I had two plans.
Plan A: whatever it takes get the fiji’s map to load inside google map so I can use the existing javascript codebase that relies on google’s api.
Plan B: Use OSM for Fiji and google for rest,  and rewrite javascript code and use OpenLayer  javascript  library as the main library to allow users to switch ebtween providers easily.

Since Plan A is less painful, I tried to find ways to accomplish it. And Plan A  indeed turned out to be extremely painless if there’s such a thing.

I won’t go detail out all the things that failed, but I’ll definitely detail out what worked.

So, to all my fellow colleagues, cursing themselves in their little office cubicle, tearing their hair our trying to integrate OSM in google map,
here’s the solution:

We’ll create a new map type and point google to OSM ’s tile provider to get map tiles from OSM instead of fetching them from google’s servers.

Firstly, We’ll create a new GTileLayer for osm.

var osmTileLayer= new GTileLayer(new GCopyrightCollection(”"),1,17);
osmLayer.myLayers=’osm’;
osmLayer.myFormat=’image/jpeg’;

This is where we define a custom function for fetchng tiles from OSM map server.
This function will be user by google to fetch tiles from OSM everytime there’s request for tiles.

osmLayer.getTileUrl=function(a,b,c) {

return ‘http://c.tile.openstreetmap.org/’+b+’/'+a.x+’/'+a.y+’.png’;

}

Then we create a map type and add it to our good old google map.

var osmLayer=[osmTileLayer];
var OSMMap = new GMapType(osmLayer, G_SATELLITE_MAP.getProjection(), “OSM”, G_SATELLITE_MAP);
map.addMapType(OSMMap );

And that’s it !!
That’s all it takes to add Open Street Map as a new map type in google map.

here’s the complete code:
————————————————

var osmTileLayer= new GTileLayer(new GCopyrightCollection(”"),1,17);
osmLayer.myLayers=’osm’;
osmLayer.myFormat=’image/jpeg’;
osmLayer.getTileUrl=function(a,b,c) {

return ‘http://c.tile.openstreetmap.org/’+b+’/'+a.x+’/'+a.y+’.png’;

}

var osmLayer=[osmTileLayer];
var OSMMap = new GMapType(osmLayer, G_SATELLITE_MAP.getProjection(), “OSM”, G_SATELLITE_MAP);
map.addMapType(OSMMap );

—————————————————–

and here’s the final result:

Welcome to my world of contradictions, idiocy, occasional nonsense and much much more that you could care less about