Persisting Custom and Dynamic Styles

Dynamic and custom styles selected at run time by the user can be persisted when the page is saved as a favorite using the saveFavorite behavior.

In this example, server-assigned data, user-defined styles, and modified client capabilities will be persisted in a favorite. The first thing that needs to be accomplished is preparing a Web page to persist. Second, the information that is slated to persist needs to be assigned to a persistent object. Finally, a means to recover the persisted information when the page loads needs to be created.

Essential Persistence Preparations

The saveFavorite behavior requires certain elements in order to function: a META object, a STYLE block, and a CLASS attribute on the object to persist. An ID attribute is optional, though recommended for performance.

Setting Elements to Persist

The portion of the document that will be added first is what will actually persist. In this case, the background color will be used. Two INPUT fields, text and button, will be used: the first for entering a color, the second for changing the color. A one line function will be added to change the color. This could also be added inline for the onclick event handler.

<SCRIPT>
   function fnSwitchColor(){
      oBody.style.backgroundColor=oColorVal.value;
   }
</SCRIPT>
:
<INPUT TYPE=text ID=oColorVal>
<INPUT TYPE=button VALUE="Change Color" ONCLICK="fnSwitchColor()">

The META Tag and STYLE Block

The META and STYLE elements are used to inform the browser that the Web page is persistent.

<META NAME="save" CONTENT="favorite">
<STYLE>
   .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>

The CLASS Attribute

The CLASS attribute identifies the type of persistence the element is using.

<ELEMENT CLASS=saveFavorite ID=oPersistElement.. >

The STYLE Attribute Set Inline

The style can also be set inline with the element.

<ELEMENT
   CLASS="saveFavorite"
   STYLE="behavior:url(#default#savefavorite)"
   ID="oPersistElement"
>

Specific saveFavorite Behavior Requirements

The information that will be persisted needs to be stored on an attribute using the setAttribute method. Two new event handlers, onsave and onload, have been engineered to use these methods when a persistent object is saved or loaded. Since there potentially could be a lot of attributes to persist dynamic styles, a DIV object will be used. This is merely preference—any object that supports a persistence behavior can be used.

Methods and Event Handlers

Two functions are defined to handle the onsave and onload events. The first function stores the background color in an attribute on the persistent object. The second function resets the background color to the value store in the attribute on the persistent object.

<SCRIPT>
   function fnSave(){
      oPersistDiv.setAttribute("sPersistColor",oBody.style.backgroundColor);
   }
   function fnLoad(){
      oBody.style.backgroundColor=oPersistDiv.getAttribute("sPersistColor");
   }
</SCRIPT>
:
<BODY ID=oBody>
<DIV ONSAVE="fnSave()" ONLOAD="fnLoad()" CLASS=saveFavorite ID=oPersistDiv>
</DIV>

In the previous code snippet, the DIV and BODY objects were given IDs of oPersistDiv and oBody. In the fnSave and fnLoad functions, the IDs are used to refer to the objects. In fnSave, the DIV object is given a new attribute called sPersistColor, and a value of the oBody's background color style. In the fnLoad function, oBody's background color style is set to the value of the oPersistColor attribute on the DIV object, which was set in the fnSave function.

Now, everything is brought together.

<HTML>
<HEAD>
<META NAME="save" CONTENT="favorite">
<STYLE>
   .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>
<SCRIPT>
   function fnSwitchColor(){
      oBody.style.backgroundColor=oColorVal.value;
   }
   function fnSave(){
      oPersistDiv.setAttribute("sPersistColor",oBody.style.backgroundColor);
   }
   function fnLoad(){
      oBody.style.backgroundColor=oPersistDiv.getAttribute("sPersistColor");
   }
</SCRIPT>
</HEAD>
<BODY ID=oBody>
<DIV ID=oPersistDiv ONSAVE="fnSave()" ONLOAD="fnLoad()" CLASS=saveFavorite>
</DIV>
<INPUT TYPE=text ID=oColorVal>
<INPUT TYPE=button VALUE="Change Color" ONCLICK="fnSwitchColor()">
</BODY>
</HTML>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The previous code has one persistent object, DIV, and two INPUT components for accepting and processing user-defined information. The code includes three very brief functions for changing the color and setting and getting the persistent attributes. When a color is entered into the INPUT field and the button is clicked, the body's background color style is set to the INPUT field's value. When the page is saved as a favorite, the fnSave function is called via the onsave event handler. This function writes the new background color value to an attribute on the persistent DIV object. Finally, when the page is opened via a shortcut or a favorite, the onload event handler on the persistent DIV object fires and the persistent value is restored.

Advanced Techniques

Using the saveFavorite behavior model, more advanced techniques can easily be applied. Automatically adjusting styles based on user preference, and then preserving them as a favorite, allows for faster load time and access to content.

In order to do this, two different page states will be created: first, a style selection, and second, a result. The only things that need to be added are the INPUT fields and statements to store the data for persistence.

The following code provides a brief glimpse at the controls that may be created.

<DIV id=oPersist CLASS="saveFavorite" onsave="fnSave()" onload="fnLoad()">
<SELECT id=oFontSel ONCHANGE="fnSwitchStyle()">
<OPTION>Arial
:
</SELECT>