lekkimworld.comjavascript

Bookmark to IBM Connections bookmarks from iOS

Thu, 08 Mar 2012 09:01:00 GMT

Bookmarks (aka Dogear) in IBM Connections is great and IBM provides a nifty bookmarklet to allow easy bookmarking from your browser. I couldn't however make this bookmarklet work in Safari on iOS so I decided to look into it. And I'm happpy to say I got it to working with some inspiration from the Instapaper bookmarklet. The way it works for me now is that I have the bookmark bar visible on my iPhone and iPad and when I need to bookmark I use the bookmarklet which redirects to the IBM Connections bookmark page and back to the original page once done. Super easy and it works great.

Here is how to make it work.

Open Safari and make a bookmark to a random page but be sure to place it in the bookmark bar (the bookmark bar can be made visible all the time in Safari options).
Edit that bookmark and change the title to something that makes sense (I use "IV Dogear").
Clear the location field and paste in the JavaScript code from below replacing the hostname (lc.intravision.dk) with a hostname applicable to you.
Save the bookmark and start bookmarking.

javascript:function%20abcdefg()%7Bvar%20h='http://lc.intravision.dk/dogear';var%20d=document;var%20b=d.body;var%20e=encodeURIComponent;var%20u=h+'/bookmarklet/post?url='+e(location.href)+'&title='+e(d.title);location.href=u+'&inframe=true&ver=';%7D;abcdefg();void(0);

If you're writing JavaScript this is a must read

Sun, 15 Jan 2012 19:05:06 GMT

Normally with a link like this I would put it on twitter but with Lotusphere 2012 underway it would get lost and it really it too important for that. If you're writing JavaScript - and who isn't - you really should read Understanding JavaScript OOP by Quildreen Motta. I really mean it!

More on the JavaScript Module Pattern

Sun, 23 Oct 2011 07:05:16 GMT

Annoter good post on the Module Pattern - this one being the original post as far as I can tell. A JavaScript Module Pattern.

The JavaScript Module Pattern - adding namespace

Fri, 21 Oct 2011 14:28:15 GMT

The Module Pattern has as added benefit of allowing you to add namespace to classes. The below extends the previous example to make the class COM.LEKKIMWORLD.ModuleAbc. Very cool in my eyes and reduces the chance for name collisions much like with Dojo classes.

// Create a COM namespace
var COM = (function() {
  return {};
}());

// Create a LEKKIMWORLD namespace
COM.LEKKIMWORLD = (function() {
  return {};
}());

// Add a class called ModuleAbc to the COM.LEKKIMWORLD namespace
COM.LEKKIMWORLD.ModuleAbc = (function(secret) {
  // the object we're incapsulating
  var OBJ = {};

  // private variables (these are truely private and 
  // cannot be accessed from the outside)
  var secret = "my secret is: " 

  // my property
  OBJ.myproperty = "my property value";

  // echo method
  OBJ.echo = function(v) {
    return "Echo: " + v;
  };
  
  // return the object
  return OBJ;
  
});

The JavaScript Module Pattern

Fri, 21 Oct 2011 12:27:43 GMT

If you are like me you like object oriented programming and you try to encapsulate the functionality to the best of your ability. And that goes for JavaScript as well of course. JavaScript pose an interesting problem though as JavaScript objects are as opaque as air that is you can see right through it.

Normally an object in JavaScript - whether declared though dojo.declare or function/json isn't able to hide it's member variables at all. You can try with "this." or using _neverUser naming but fundamentally the "private" variables of a JavaScript class are available from the outside. Consider the below examples:

// enter the dojo
var DojoAbc = dojo.declare(null, {
  constructor: function(secret) {
    this.mysecret = secret;
  },
  myproperty: "my property value", 
  echo: function(v) {
    return "Echo: " + v;
  }
});
var myDojoAbc = 
   new DojoAbc("my little secret");
alert(myDojoAbc.echo(new Date()));
alert(myDojoAbc.myproperty);
alert(myDojoAbc.mysecret);

// plain ol' JavaScript
var PlainAbc = function(secret) {
  this.mysecret = secret;
  this.myproperty = "my property value";
  this.echo = function(v) {
    return "Echo: " + v;
  }
};
var myPlainAbc = 
   new PlainAbc("my little secret");
alert(myPlainAbc.echo(new Date()));
alert(myPlainAbc.myproperty);
alert(myPlainAbc.mysecret);

In both examples the "mysecret" variable is accessible although I didn't mean it to. There is no way in the above example to make the mysecret-variable invisible to the outside. That is a user of your class can access it and see it using a JavaScript debugging such as Firebug.

Bummer I thought. What then? How do I do it? Well I'm glad you asked as there is a way. It's called the Module Pattern. Let me show you but let me also warn you - it is a little conveluted to look at.

The below code starts by creates a class like above but nothing besides the myproperty-property and the echo-method are available (even in Firebug) from the outside. So the last alert will actually say "undefined" as mysecret is available to the outside. It's super cool and it's the way I'm going to do my objects from now on.

var ModuleAbc = (function(secret) {
  // the object we're incapsulating
  var OBJ = {};

  // private variables (these are 
  // truely private and cannot be 
  // accessed from the outside)
  var secret = "my secret is: " 

  // my property
  OBJ.myproperty = "my property value";

  // echo method
  OBJ.echo = function(v) {
    return "Echo: " + v;
  };
  
  // return the object
  return OBJ;
  
});

// use case
var myModuleAbc = 
   new ModuleAbc("my little secret");
alert(myModuleAbc.echo(new Date()));
alert(myModuleAbc.myproperty);
alert(myModuleAbc.mysecret);

More information about the pattern incl. composition, inheritance etc. can be found on the the Adequately Good blog in the JavaScript Module Pattern: In-Depth post.

Have an excellent Friday.

Power of the Javascript console

Mon, 17 Oct 2011 11:04:23 GMT

Dmytro Pastovenskyi blogged the other day about the power of the JavaScript console. Now the JavaScript console is a real timesaver for many types of JavaScript debugging but I never realized just how powerful it is. I recommend reading Dmytros blog post (JavaScript: use power of console) and googling "javascript console object".

A (dojo.)mixin configuration approach to XAgents in XPages

Wed, 11 May 2011 15:14:51 GMT

Continuing my XPages theme from yesterday I also wrote an XAgent base-class in JavaScript to make XAgents easier to do. Part of the base class is that it allows me to pass in a JSON object to configure the XAgent based on the need. Since the information I pass in should override the built-in defaults I needed a way to easily allow the user supplied values to override the defaults. The easiest way to do this would be to use the dojo.mixin.

"dojo.mixin is a simple utility function for mixing objects 
together. Mixin combines two objects from right to left, 
overwriting the left-most object, and returning the newly 
mixed object for use."

Unfortunately Dojo isn't available in SSJS I needed to do it myself. To my luck it was surprisingly easy as the below code illustrates.

// create function to allow mixin' two objects
var mixin = function(target, source) {
   if (!source) return;
      var name, s, i;
      for (name in source) {
      s = source[name];
      if (!(name in target) || (target[name] !== s)) {
         target[name] = s;
      }
   }
};

My XAgent base class looks something like this:

function XAGENT(args) {
   // create mixin function
   var mixin = function(target, source) {
      if (!source) return;
         var name, s, i;
         for (name in source) {
         s = source[name];
         if (!(name in target) || (target[name] !== s)) {
            target[name] = s;
         }
      }
   };

   // define default arguments
   this._args = {
      download: false,
      filename: "default.json",
      charset: "iso-8859-1",
      contentType: "application/json"
   };
   
   // mixin user-supplies arguments
   mixin(this._args, args);
};
XAGENT.prototype.run = function(command) {
   ...
};

What's super neat is that now, in my run-method I can access the this._args object and all values that the user supplied have overridden the default values because we used the mixin-function. Very cool and an easy and flexible way to have default values but allowing them to be overridden by the caller. Also you know that the variables you need have been defined so no checks are necessary.

Calling my XAgent class is very easy allowing me to override the defaults. The run-method accepts a function which is called when the XAgent stuff has been set up supplying the Writer and the parameters supplied in the URL as a JSON object.

var xa = new XAGENT({
   filename: "feed.json", 
   download: true
});
xa.run(function(w, params) {
   ...
});

XPages JavaScript utility function of the day

Tue, 10 May 2011 12:05:02 GMT

Yesterday and today I've been spending some time doing some XPages coding for a customer project and after spending quite some time doing Java plugin development I'm amazed of how easy XPages are. Don't get me wrong - there is still work to do for the XPages team but it's a joy to work with XPages and coding in JavaScript is just - well - flexible and fun.

One of the real joys of JavaScript is it's dynamic nature and that it allows one to really cut down on the boilerplate and repeated code. For one I spent a lot of key pressed getting field values from backend documents in server side JavaScript. Instead of repeating the same ol' Document.getItemValueString(String) over and over again I did a neat little shortcut. Since I needed all items from a document I just created a utility function to JSONify a document to make it easier to access. The method is below.

var jsonifyDocument = function(doc) {
   var result = {};
   if (!doc) return result;
   var item;
   for (item in doc.getItems().toArray()) {
      result[item.getName().toLowerCase()] = item.getText();
   }
   return result;
};

So now instead of writing doc.getItemValueString all the time I can now just do property-like access to field values ("Heading" and "Description" are fields on the document).

var jsonDoc = jsonifyDocument(doc);
jsonDoc.heading + " (" + jsonDoc.description + ")";

I also wrote a nice little Dojo-like mixin function to make my XAgents easy to configure. But that's for another day.