Opera Widgets: Imitating alert() behavior using a custom object

As I've been tinkering around a lot with widgets, I've sometimes needed a function like the alert() in JavaScript, ie. something which can be used to display a message to the user.

In this post, I'll go over my MessageBox class, which can be used for just that.


The idea behind it all

Idea is to make showing alert boxes as simple as possible, while still giving some functionality to the user. As it's not possible to use alert() in Opera Widgets, you need to code this yourself. I also wanted to be able to either display timed boxes which would disappear after a certain time in addition to "normal" ones with an OK button.


Give me the code!

//Displays a generic textbox in the style of alert
//w = width, h = height, rOK = require the press of OK button to close
function MessageBox(w,h,rOK)
{
 var element = null;
 var width = w
 var height = h;
 var left = 30;
 var top = 10;
 var requireOK = rOK;
 
 //shows the messagebox
 //msg = message in the box, time = time how long the message remains visible
 //note: if requireOK is true, the box won't close until OK is pressed
 this.Show = function(msg,time)
 {
  element = document.createElement('div');
  element.style.left = left+'px';
  element.style.top = top+'px';
  element.style.width = width+'px';
  element.style.minHeight = height+'px';
  element.style.border = '1px solid black';
  element.style.backgroundColor = 'white';
  element.style.position = 'absolute';
  element.style.textAlign = 'center';

  element.innerHTML = msg+'<br /><br />';
  
  if(requireOK)
  {
   var okbutton = document.createElement('button');
   okbutton.text = 'OK';
   okbutton.addEventListener('click',function() { Hide(); },false);
   element.appendChild(okbutton);
  }
  
  document.appendChild(element);
  if(!requireOK) setTimeout("Hide()",time);
  
 }

 
 Hide = function()
 {
  document.removeChild(element);
  element = null;
 }
}

There we go. There's not much to explain if you already know JS and DOM, but let's go through it a bit for those who don't.

We define some variables to hold various data on the messagebox. The element variable will store the reference to the actual div we use to display the messagebox, which is needed so we can hide it later. Rest of them are probably obvious, except requireOK, which is used to check whether we want to display an OK button on the messagebox or not.


The Show function is used to display the box. First we create a div element to hold the message and change some of its CSS properties. We use absolute positioning to make the div appear exactly where we want and ignore the positions of the other elements. We also add the message user wants the box to show to its innerHTML.

If the requireOK is defined as true, the code creates a new button element and assigns it a click event which calls the Hide function. Finally the button is added to the base div with appendChild.

After this, the div is appended to the document and if we don't have an OK button, a timeout is set to hide the box after the time the user specified in the parameter.


The Hide function is quite simple: we simply use document.removeChild to remove the messagebox div element from the document.


Using the class is simple:

var message = new MessageBox(100,100,true);
message.Show("Hello World!",0);

This would display a 100x100 messagebox with text "Hello World!". It closes when the user presses the OK button displayed on the box. Simple and fun.


Wrapping it up

Using classes like this is a good way to add reusable functionality to widgets. This one for example can be used in all widgets you want, instead of possible static code in a single widget which would do the same. Sure, the static one could be faster and easier to code... but what would be the fun in that? :)

There are some things that could be added to this class, however. Someone might want to be able to change the position or the colors of the box, so functionality for that could be added if necessary.