The gadget’s Content
section will contain all the gadget markup inline. We will
define the style
block to add visual
appeal to the application and include the DOM containers we’ll drop all
of our content in:
<Content type="html"><![CDATA[ <style type="text/css"> div#gadget{ font:11px arial,helvetica,sans-serif; } div#gadget div.header{ background-color:#858585; color:#fff; font-weight:bold; font-size:12px; padding:5px; margin:5px; } div#gadget div#railRight{ width:360px; float:right; border:1px solid #858585; margin:0 0 15px 15px; padding:10px; background-color:#eaeaea; } div#gadget div#railRight span{ margin:5px; } div#gadget div#railRight div#friendLinks img{ border:0; margin:5px; width:50px; height:50px; cursor:pointer; } div#gadget div#updates{ margin-left:5px; margin-right:390px; } div#gadget div#updates div.header{ font-size:15px; margin:0; } div#gadget div#updates div#profileContent img{ margin:10px; } div#gadget div#updates div#profileContent div{ font-size:14px; margin:5px 10px; } div#gadget div#updates div#profileContent span{ font-weight:bold; } </style> <div id="gadget"> <div id="railRight"> <div class="header">Other Profiles</div> <span>Click on an image below to load the profiles of your connections</span> <div id="friendLinks"></div> </div> <div id="updates"> <div class="header">Current Profile</div> <div id="profileContent"></div> </div> </div>
Between the style
block and our
DOM objects, we are building out an application that consists of two
columns to display our required data fields. We will use an interface
that looks like Figure 5-1 to build this
application.
Our left column will consist of a display pane for the currently selected user—either the current viewer or any of his chosen friends. A larger version of his profile image will appear at the top, followed by the user’s core profile information.
Our right column will contain a view of the application viewer’s friends, represented by their profile images. When a profile image is clicked, the left column’s display pane will update with the most recently selected profile.
18.189.180.43