Supporting saveSnapshot
So far, we have discussed how the Stock Ticker control obtains new data and how the Spreadsheet control updates the stock portfolio with new data as it arrives. However, assuming a user has taken the time to enter a set of symbols to watch and filled out the portfolio section of the spreadsheet, it is also helpful to let the user save the current portfolio so that he or she can open the page later and see current data inputs to the complete portfolio. To enable this, we can save a user's portfolio to a server using the technique described in Chapter 8; however, many users would be leery of letting a program save their private financial information to a network server. Instead, most users prefer to save the portfolio to their local file system.
At first, this might seem as easy as telling a user to choose the File|Save As menu item and save the page on his or her computer. But if you try this with a page of your own, you will find that Internet Explorer saves the page as it originally arrived from the web server. Any changes made to the spreadsheet after it was loaded will not be saved because Internet Explorer does not ask the controls on the page to repersist themselves. Instead, Internet Explorer persists the <object> and <param> tags as they originally came from the web server, losing all changes made since.
The Internet Explorer team realized that this was not optimal, and they also wanted to enable developers to save the current contents of other HTML controls such as text boxes, check boxes, and drop-down lists. To allow controls to save their current state when the user saves a page to his or her local machine, Internet Explorer defined a new behavior in version 5 called saveSnapshot. Behaviors are a whole new area of functionality for Internet Explorer 5, and discussing behaviors in general is beyond the scope of this book. However, I will explain here how the saveSnapshot behavior works and how you can include it in your web pages to support saving the current state of an OWC control.
In Internet Explorer 5, when the user chooses the File|Save As menu item, the browser examines all elements on the page, looking for any that the developer indicated should have the saveSnapshot behavior. For each control marked with the saveSnapshot behavior, Internet Explorer asks the control to persist its current state into a property bag, which is the standard mechanism used to save and load control properties. Internet Explorer saves the control's current property values in the page written to the local machine, enabling a user to open the page later and resume working.
To enable this behavior, the Internet Explorer documentation says you must include a specific <meta> tag in the <head> section and add the saveSnapshot behavior to each control that needs the ability to save its current state. I have found that the <meta> tag seems to be optional—Internet Explorer seems to save snapshots whether this tag is included or not. However, it is always a good idea to follow directions in these cases since you never know when such a tag will suddenly be required. The <meta> tag looks like this:
<head> <!-- Other head section information omitted --> <meta content=snapshot name=save> |
After adding this <meta> tag, you next need to add the saveSnapshot behavior to your various controls. When adding a behavior to many controls at once, it is often useful to define a style class in your <style> section:
<style> <!-- Other style information omitted --> .saveSnapshot { behavior: url(#default#saveSnapshot) } </style> |
You can implement behaviors by using the new behavior style attribute. The saveSnapshot behavior is one of Internet Explorer's built-in behaviors, so I set the value of the behavior style attribute to url(#default#savesnapshot), which is the syntax for naming built-in behaviors. This style block defines a style class called saveSnapshot (though you can call it anything you want), which I can now use as the class attribute of any HTML element I want to have saved. If you want to do so with the Spreadsheet control, you need to use HTML that looks like this:
<div id=div1 class=saveSnapshot> <object classid="clsid:0002E510-0000-0000-C000-000000000046" id="Spreadsheet1" width="576" height="288"> <!-- <param> tags omitted --> </object> </div> |
The astute reader is probably wondering why I used the saveSnapshot style class on a <div> tag surrounding the Spreadsheet control's <object> tag. Theoretically, you should be able to use the class on the <object> tag itself and not include a <div> at all. However, the <div> tag is a required workaround to another Internet Explorer problem. Internet Explorer does not notice when the saveSnapshot behavior is used on an <object> tag, so you must wrap another HTML tag around your <object> tag. The easiest and least obtrusive tag to use is <div> because it has no visible manifestation and provides only a logical grouping of elements. Attaching the saveSnapshot style to the <div> tag causes Internet Explorer to persist all tags within <div>, which in this case is the Spreadsheet control's <object> tag. It's a hack, but it works. Perhaps the Internet Explorer development team will fix this in their next version.
You can also include the saveSnapshot behavior style attribute on each control or element instead of defining a style class. To do so, include the following style attribute on any HTML element you want to have saved:
style="behavior:url(#default#savesnapshot)" |
Keep in mind that the saveSnapshot behavior is new to Internet Explorer 5. Previous versions of Internet Explorer will safely ignore this behavior.
EAN: 2147483647
Pages: 111