Netscape DevEdge

Skip to: [content] [navigation]

My Sidebar Developer's Guide

Last updated: August 8, 2002

Click to add this table of contents to My Sidebar.

Comments or suggestions about this document? Please post them to the netscape.public.dev.mysidebar newsgroup

This guide is intended for content developers who wish to create tabs for the sidebar, a component of Netscape 6/7. The guide contains technical descriptions of the tab concept, design and development processes, as well as sample code.

Contents

The sections in this document include:

Quick Start

My Sidebar tabs provide a place within the Netscape 6/7 browser for users to keep connected to what is most important to them. The content and features of a tab are completely up to you, the developer -- but the best tabs make the most of what the Netscape 6/7 and the sidebar feature have to offer. Tabs can and should have content that is compelling, dynamic, and customizable. Tabs are a great place for favorite information, such as stock quotes, local weather, news headlines, sports headlines, local events, or horoscopes. Users can choose from a wide variety of tabs in the the My Sidebar Directory.

My Sidebar gives your content constant presence and stickiness within the user's client software. That means that users always have access to your service or content even when they are on another web site or using email. Links in your tab can lead back to your web site, driving increased traffic.

The sidebar appears on the left side of Navigator, Mail, and Instant Messenger windows of Netscape 6/7.

Introduction to the Sidebar

This section describes sidebar tabs and explains how tabs differ from ordinary web sites.

What is a Sidebar Tab?

My Sidebar tabs are simple HTML pages and are easy to create. With robust support for web standards like HTML 4, JavaScript, XML, CSS, and DOM, you can also create powerful applications. For example, a calendar tab could instantly switch from a day view to a month view or could add appointments that can be stored in XML. All of this works without any server round trips to slow down the process.

Tabs are like regular web pages in that they are built on HTML and other web standards. My Sidebar tabs can deliver up-to-date, dynamic information. Users can easily add and customize sidebar tabs.

These are some of the features that tabs offer:

Any web site content can be delivered as a tab, enabling you to leverage your existing web content; however, dynamic information that incorporates web standards takes best advantage of the technology offered in Netscape 6/7 and other Mozilla-based browsers.

Information that is well suited to a tab is that which is of continuous interest to the user. The content can be dynamic in the sense that the details may change often, but the information should always be relevant and up to date. For example, a stock ticker or news wire service present constantly changing particulars, but the user desires the presence of that information to be continuous. Given the limited size of tabs, their content should NOT contain advertising, as users will avoid tabs that "push" ads at them.

These are some examples of information well suited to a sidebar tab:

The three tabs shown below, the Note-It and Calculator tabs from livesidebar.com and the MapQuest tab from Netscape, give you some idea about how practical and easy-to-use My Sidebar tabs can be. The Note-it tab lets you write and save notes in the browser and supports drag and drop for links and other text, and the Calculator tab lets you do simple calculations while you browse the web, as you might when you are shopping online.

       
Note-it TabCalculator TabMapQuest Tab

Other Sidebar Tab Examples

The Netscape My Sidebar Directory has hundreds of My Sidebar tabs you can add. Providers range from companies like Mapquest and FedEx to auto racing hobbyists and entomologists. My Sidebar developers have also created a number of application-like tabs, such as the Note-it and Calculator tabs shown above.

Creating a Sidebar Tab

Here is an overview of the process for designing and distributing a sidebar tab; detailed steps appear later in this section:

  1. Using simple HTML, create a web page that fits into the sidebar area. The default sidebar width is 144 pixels with a scroll bar and 162 pixels without a scroll bar. A tab can include anything Navigator 6 or any other Mozilla-based browser can display, including HTML with CSS, JPEG, PNG, and XUL. You can use any supported MIME type.
  2. If you want the content to refresh at a particular interval, include the appropriate META information in the document. Including the META refresh information in the HTML document causes the browser to automatically refresh or reload the page after the specified time. The refreshing occurs as long as the tab remains open in the sidebar.
  3. Here is how you can implement refreshing in your code:

    <META HTTP-EQUIV="Refresh" CONTENT="1200; URL=http://whatever_the_url_is">

    In addition, you can include a Refresh button in a tab to give the user freedom to reload the page whenever they choose. You can also include an Edit button for tabs that are customizable.

  4. Include a target='_content' attribute in any links in your tab so that the main content displays in the main browser window and not in the sidebar tab:
  5. <A HREF="whatever_the_url_is" TARGET="_content">>

    If a tab works as a form, use this attribute:

    <BASE HREF="whatever_the_url_is" TARGET="_content">

  6. Save the document.
  7. Include the "Add tab to Netscape 6/7 button," on your web site. This button allows users to add your tab instantly. See the section Adding a Tab to the Sidebar for more information.
  8. Download and install Netscape 6/7.
  9. Using Netscape 6/7, visit your web site and click the Add button. The tab should appear in the sidebar.

Here is a simple example of a My Sidebar tab: 


<html> 
<head> 
<title>My Sidebar Developer"s Doc Tab</title> 
</head> 
<body bgcolor="#ffffee">
<font face="Arial,Helvetica,sans-serif" size="1"> 
<h2>My Sidebar Developer"s Guide</h2> 
The sections in this document include: 
<ul TYPE="circle"> 
  <li><a target="_content" href="../sidebardev.html#intro">Introduction to the Sidebar</a> 
  <li><a target="_content" href="../sidebardev.html#example">Example My Sidebar Tab</a></li> 
  <li><a target="_content" href="../sidebardev.html#developing">Developing My Sidebar Tabs</a></li> 
  <li><a target="_content" href="../sidebardev.html#creating">Creating a Simple My Sidebar Tab</a></li> 
  <li><a target="_content" href="../sidebardev.html#adding">Adding a Tab to the Sidebar</a></li> 
</ul> 
</font> 
</body> 
</html>

Also see the Tab Wizard in the Resources section below, which allows you to create My Sidebar tabs from on-line tools and tab templates.

Adding a Tab to the Sidebar

Netscape 6/7 comes configured with a sidebar that includes a number of default tabs. Users can customize their sidebar by adding and deleting tabs. These are the means by which users can add tabs:

Implementing the Add to Netscape 6/7 Button

In order for a user to add the tab you created, you must create a script that contains this JavaScript function:

addPanel(tabs)

tabs is an array of JavaScript objects that describes the tabs.The addtabs function includes these parameters:
title The title that appears at the top of the tab.
content The URL to load in the content area of the tab.
customize The URL to customize the tab. This is optional.

The web page from which you initiate the tab addition process should display a button or link that invokes the addPanel API call. You should place this button on your site's home page, for example, or on a preview page for your tab, or even in an email message. Here's a sample button that adds the table of contents for this document to the sidebar:

When the addPanel call is made, the sidebar uses the values of the tab object as the default tab property values and presents a confirmation dialog box to the user. A site can have additional capability to personalize or customize a tab through the customize parameter, but such work must be completed prior to the invocation of the addPanel method.

Here is an example of the JavaScript used to add a My Sidebar tab:


<SCRIPT LANGUAGE="JavaScript"> 


   function addNetscapePanel() { 
      if ((typeof window.sidebar == "object") && (typeof window.sidebar.addPanel == "function")) 
      { 
         window.sidebar.addPanel ("My Sidebar Developer's Guide", 
         "http://developer.netscape.com/doca/manuals/browser/sidebar/sbtoc.html",""); 
      } 
      else 
      { 
         var rv = window.confirm ("This page is enhanced for use with Netscape 6/7.  " 
            + "Would you like to upgrade now?"); 
         if (rv) 
            document.location.href = "http://home.netscape.com/download/index.html";
      } 
   } 
//--> 

</SCRIPT>

To learn about the benefits of promoting your tab to your audience, click here.

Using the Customize My Sidebar Dialog

Users can add and customize tabs through the Customize My Sidebar dialog: 

You can get your tab added to the list of tabs offered to users by either establishing a relationship with Netscape or by joining the My Sidebar Network and listing your tab in the My Sidebar Directory. For information on working with Netscape to promote your tab, contact sidebar_info@netscape.com. For instructions on joining the My Sidebar Network, see http://home.netscape.com/sidebar/join.html.

Developing More Advanced My Sidebar Tabs

This section describes the process of developing My Sidebar tabs. It discusses the elements and language from which tabs are built and the special considerations they require. This section also presents a suggested tab design process and techniques to optimize tab performance and effectiveness.

Design Recommendations

Though the sidebar can display any file format that Netscape 6/7 can display, many of these files do not display well in a window that is smaller than 150 pixels by 150 pixels. When designing your sidebar tab make sure your document is presentable in a small space and resizes well. The tab content area is 162 pixels wide, 144 pixels wide when a scroll bar is included. You can utilize the space within the tab area by decreasing font sizes. The tab title is approximately 20 variable width western characters or 10 double-byte characters.

Standards Supported in the Sidebar

My Sidebar includes support for web standards like HTML 4, JavaScript, XML, CSS, and DOM. With this level of standards support, you can create robust content and applications that are easily available to users.

CSS

CSS is a stylesheet language that suggests formatting for elements in a document. To learn more about CSS, see these resources:

XUL

XUL is an XML-based language created by Netscape that enables the development of cross-platform interfaces. It balances the control of layout with flexibility and ease of use. Using a combination of XUL's ready-made components, or widgets, and XUL's incorporation of such standards as HTML 4, DOM1/2, JavaScript, and Cascading Stylesheets, you can design and customize any interface that you can imagine, using any number of different features, tools, and methodologies. To learn more about XUL, see these resources:

JavaScript

JavaScript is a scripting language commonly used in web pages. To learn more about JavaScript, see these resources:

DOM

The Document Object Model (DOM) is the set of objects that represent the parts of a document. Manipulation of the DOM (which is possible through JavaScript) causes changes in the document. To learn more about the DOM, see these resources:

My Sidebar Access Limitations

The My Sidebar tabs described in this document can be installed using the simple steps in Adding a Tab to the Sidebar. However, more advanced My Sidebar tabs like the History, Search, and Bookmarks tabs that come pre-installed in the browser need special access to information and functionality stored in the browser itself. In order to overcome certain access restrictions placed on web content, the tabs are installed as new packages in the browser rather than as regular sidebar content. You can create advanced My Sidebar tabs like Search using XUL, XPConnect and other technologies, but you must then use Netscape's cross-platform installation technology (XPInstall) to install them properly.

For more information about XPInstall and installing new packages in Netscape 6/7, see the XPInstall API Reference.

International Issues

All RDF or XML documents created for international tabs must be encoded in UTF-8. In general, if an XML/RDF document does not contain character set information in the XML declaration section, the XML parser assumes it is in UTF-8. Make sure the provided channel titles, descriptions, and all text that is visible to the end users are encoded in UTF-8.

When creating an international tab, use HTML and include the character set information in the META information as follows: 

	<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> 

This HTML document does not need to be in UTF-8.

To internationalize your tab name, Netscape uses XML Entities and DTDs. An entity in XML can be used as a container for non-XML data. A DTD (Document Type Definition) can be part of the RDF file itself.

The following is a sample DTD that may be included near the beginning of your panels.rdf document: 

	<!DOCTYPE RDF
	[
	<!ENTITY sidebar.panel.whats-related "What's Related">
	]
	>

This entity declares a container named sidebar.panel.whats-related and its content includes the string "What's Related". After declaring the entity, use the new entity in place of the string when you declare the tab's displayed title.

	<RDF:li resource="urn:sidebar:panel:whats-related" />

When the panel is internationalized, only the entities need to be translated.

International Buttons

The Add Tab button is available in French, German, and Japanese. 
GermanFrenchJapanese

Mehr infos

En savoir davantage

*òâµâ¢*”¥­

Popular Tabs and Tab Resources

A+R