Programming Social Applications

Styling the Message and Window

We’ve explored how to create message windows using simple text constructs to populate their content, but if this messaging system is to have any real value, we need to be able to customize it as we see fit. So, next we’ll cover ways to apply custom styling to the message window’s content as well as the message window itself.

Styling message content

In addition to plain text, a message window accepts an HTML DOM node structure as its content. Since the message window will not exist in the DOM, the new node will be appended to the window.

Using our dismissible message gadget as our base, we can revise the Content section to use a DOM node we create instead of the text message specified:

<Content view="canvas">
   <![CDATA[
   <script type="text/javascript">
   //create div node for message
   var msgNode = document.createElement("div");
   msgNode.innerHTML = "See <a href='http://mysite.com'>My Site</a> for more details";

   //set mouse events on message content
   msgNode.onmouseover = function(obj){ obj.style.color = "#da1d1d";  }
   msgNode.onmouseout = function(obj){ obj.style.color = "#000";  }

   //create new dismissible mini-message
   var message = new gadgets.MiniMessage(__MODULE_ID__);
   message.createDismissibleMessage(msgNode);
   </script>
   ]]>
</Content>

Note

The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_4/style_message_content.xml.

We first create the DOM node, a div, which will house our message. We ...