Programming Social Applications

Setting Up the ADSafe Object

To create the simplest ADsafe object we can use to encapsulate third-party code, we must follow this basic syntax:

<div id="APPNAME_">
   application markup

   <script>
   "use strict";
   ADSAFE.go("APPNAME_", function(dom){
      //application functions and code
   });
   </script>
</div>

This code requirement starts with a div node that wraps the entire object. The div node has a few requirements itself:

• The div node must contain an id.

• The id must be made up of only uppercase ASCII letters.

• The id must have a trailing underscore (_) character.

At the root of the div node, we define the markup required to render the application:

<div id="APPNAME_">
   <span id="APPNAME_DATA"></span>
   ...
</div>

Any subnodes that are defined with an id property must follow the same id naming criteria as the root div node, but the id must be made up of the root div node’s id and the name of the node itself. If the markup IDs do not follow this naming convention, you will be presented with the following log message if you try to collect the node via a query:

ADsafe error: ADsafe: Bad query:#test

Next, the ADSAFE.go(...) method provides the application with a DOM object that extends a limited subset of functionality to the main DOM.

The ADsafe object contains several methods that give developers additional functionality to allow DOM selection, event handling, and a number of other utilities. These are listed in Table 8-2.

Table 8-2. ADsafe object methods

Method	Description
create(object)	Creates a new object.