A Different Approach to Markup and Data

As we’ve just discussed, OpenSocial templating is a different approach for handling the visualization of data sources. Let’s take a practical look at what this means. Let’s assume that we have set up a data request that captures user profile information, and that source returns a JSON structure with the viewer’s profile details:

var userData = {
   name: "John Smith",
   gender: "Male",
   thumbnailUrl: "http://www.johnsmith.com/img/profile.jpg",
   profileUrl: "http://www.container.com/johnsmith"
}

Now that we have a data source, we want to use it to build out a user badge. We have a few options for how we can do this, which we’ll cover next.

Dynamically creating the DOM nodes

One approach that is used frequently within the context of gadget construction is to create any required DOM nodes dynamically within the JavaScript layer. This means that all styles, content, and node sources are built using the node property setters:

<div id="profile"></div>
<script type="text/javascript">
var profileNode = document.getElementById("profile");

//build profile image
var imgThumb = document.createElement("img");
imgThumb.src = userData.thumbnailUrl;
imgThumb.setAttribute("style", "float:left; margin-right:10px;");
profileNode.appendChild(imgThumb);

//build profile content text node
var spanProfile = document.createElement("span");
spanProfile.innerHTML = "Name: " + userData.name + "<br />Gender: "
                      + userData.gender + "<br />Profile: ";
profileNode.appendChild(spanProfile);

//build profile link
var linkProfile = document.createElement("a");
linkProfile.href = userData.profileUrl;
linkProfile.innerText = "Click Here";
profileNode.appendChild(linkProfile);
</script>

Note

The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_7/node_creation_dynamic.html.

You probably noticed one issue immediately with this code: its bulk. For each newly created DOM node, we need individual calls to set all of its properties, such as href, styles, and any others we require.

On top of that, building out nodes dynamically this way does not lend itself to code reuse. Each line of code is set up to build out a specific element or property, so it becomes difficult to reuse whole sections of the code for other purposes.

Finally, this approach embeds the markup so tightly into the JavaScript functionality that it makes it hard to maintain the code and parse the relevant differences between each section. Just having a few nodes does not make for an extremely complicated code base, but let’s say that we use this type of functionality extensively to build out several sections of our gadget. This leads to a bloated, complex code base that is very difficult to maintain and debug.

Building an InnerHTML string

Our next approach, and arguably one of the most popular ones, is to inject new DOM node markup into the gadget through a DOM node’s innerHTML method. This method involves specifying a string that contains the markup that should be injected into the gadget, and then setting the innerHTML of another node currently on the page to the markup specified in that string:

<div id="profile"></div>
<script type="text/javascript">
//create html string
var profileHtml = "<img src='" + userData.thumbnailUrl + "' style='float:left; "
                + "margin-right:10px;' />Name: " + userData.name + "<br />Gender: "
                + "userData.gender<br />Profile: <a href='" + userData.profileUrl"
                + "'>Click Here</a>";

//insert html into profile node
document.getElementById("profile").innerHTML = profileHtml;
</script>

Note

The full code for this sample is available at https://github.com/jcleblanc/programming-social-applications/blob/master/chapter_7/node_creation_innerhtml.html.

While this approach is very simple to implement, we’re once again embedding our markup layer directly into the JavaScript portion of the code. We can attempt to indent the markup structure to make it easier to maintain, but once we start applying content load conditionals—wrapping the content into individual blocks—the scripts become bloated and difficult to parse and debug.

The OpenSocial templating approach

The OpenSocial templating approach seeks to remove the necessity of embedding markup within JavaScript by providing some simple methods for creating markup with template syntax instead:

<script type="text/os-template">
  <img src="${userData.thumbnailUrl}" style="float:left; margin-left:10px;" />
  Name: ${userData.name}<br />
  Gender: ${userData.gender}<br />
  Profile: <a href="${userData.profileUrl}">Click Here</a>
</script>

Note

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

Here we have a specialized script block that tells the OpenSocial container that this markup should be treated as a template. The markup is not mixed with any JavaScript constructs, so it’s easier to maintain because it is visually one complete structure. This templating approach provides us with a much cleaner way to work with our data, markup, and script layers by separating them out into their logical pieces.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.117.186.46