Customizing MS Windows Media Event Guide

Article
10/19/2007

By Bill Birney, Microsoft Corporation

Microsoft® Windows Media™ Event Guide is designed to provide Internet or intranet site administrators with an instant solution: a complete event guide Web site, containing a preconfigured database, ready-to-run user guide, and administration sites. As soon as installation is finished successfully, the site is available online. Additionally, users can change not only the graphics and text, but all functionality in Windows Media Event Guide.

This article provides an overview of the architecture of Windows Media Event Guide and a starting point for creating your own event guide. This document includes the following sections:

Introducing Windows Media Event Guide discusses the origins of Windows Media Event Guide.
About Windows Media Event Guide provides an overview of the architecture and usage of Windows Media Event Guide.
Using Windows Media Event Guide Features reviews each Windows Media Event Guide component in depth.
Additional information provides suggestion for obtaining more information about Windows Media Event Guide and associated topics.

Introducing Windows Media Event Guide

When streaming media became available to Microsoft product and administrative teams over two years ago, it quickly became a favorite internal communications tool. To help users locate media, an event guide was created as an internal Microsoft Web site.

By using the event guide, thousands of users on the Microsoft intranet can quickly locate media files and view details of current and future live events. A small team manages the event guide Web site, the database, some of the on-demand content, the servers, and production of the presentations. Today, the site offers an average of 40 live presentations per week and archives 5,000 hours of presentations and other Windows Media files. The internal event guide has grown to keep pace with the demand of over 30,000 hits per month.

The event guide is not only a central information source for users, it provides communicators with a system for managing production resources. The task of managing internal Windows Media communications would be impossible without it. Because the guide is such a useful tool, the Windows Media team has packaged it for use outside of Microsoft as the Windows Media Event Guide. It is ready-made for use on any corporate intranet. The installation program creates all of the folders and files, configures the Web server, and creates the database. When installation is finished, the sample Windows Media Event Guide Web site is online. At that point, all you have to do is customize it, if necessary, for your needs. Though it is made for an internal network, Windows Media Event Guide can easily be modified to make it suitable for use on the Internet.

Every part of it is completely customizable. You can use Windows Media Event Guide as is, you can change sections of it, you can edit and copy sections of it, or you can use it as a blueprint to create a separate guide from scratch.

About Windows Media Event Guide

Windows Media Event Guide is an Active Server Page (ASP)-based application, consisting of HTML files, ASP pages, images, and database files. It resides on your HTTP server. Although it contains the name Windows Media, it is not directly involved with the streaming of media, except for Web links to Windows Media content that are on some of the view pages.

Windows Media Event Guide is a database of information about live streaming media events and on-demand (or stored) content. It is viewed and edited with two sets of Web pages: the Guide and the Admin.

When you enter https://YourServer/Guide/ in your browser, the Guide Default.asp page opens. From here, you have access to other Guide pages, through which end-users can gain access to portions of the database.

When you enter https://YourServer/Admin/ in your browser, the Admin Default.asp page opens. You can also gain access to the database appropriate for administrators through the Admin Default.asp.

Figure 1: Windows Media Event Guide architecture

Users can view event titles and descriptions by clicking dates on the calendar, browsing selections by category, searching for a title, or clicking a bookmark. Users can view the database but can only modify it by creating a bookmark, sending feedback, or by submitting an event.

Through the Admin view, on the other hand, the administrator can read and write information to the database. Users can create events and categories, approve submitted events, and remove or edit most of the information.

Database viewing and editing is handled for the most part by code in ASP pages. Each ASP page handles a different aspect of the Windows Media Event Guide system. For example, Cal_list.asp displays a list of events on a given day and links the user to descriptive information when the user clicks an event. In many cases, an identical or similar ASP page is located in both the Admin and Guide folders on your Web server because the same functionality is used in both views.

You can think of Windows Media Event Guide as consisting of a number of modules or components that are contained in corresponding ASP pages and HTML and database files. To use Windows Media Event Guide to design a custom guide, select the components for the Web site, and then edit them to suit requirements. The following table lists and briefly describes the components:

Component	Description
Logon	Requests a user name and password the first time a user comes to the site.
Calendar	Creates an interactive calendar with which a user can navigate to locate events by date.
Event List	Consists of a list and three buttons. A user clicks the buttons to change the view of the list: Calendar, Browse, or Bookmark in the Guide; Calendar, Browse, or Submitted in the Admin.
Search	Queries the database for a title entered by a user in the Guide or queries the database for a variety of other fields on the Event page of the Admin.
Event	Displays event information. A user can click a link on the page to view a live event or on-demand content. An administrator can view and edit all details.
Display Templates	Display a streaming media presentation in one of three sets of Web pages provided. A user can also choose to view the media in the Microsoft® Windows Media™ Player stand-alone configuration.
Bookmarks	Contain links to media. A user creates a bookmark while viewing media. Later, the user can locate the bookmark on the main Guide page and replay the media.
Notes	Contain text that a user types while viewing an event or on-demand content in the default display template. Whenever the user returns to that event, the notes reappear in a list.
Feedback	Used to send feedback from the user to the event guide administrator.
Submit Event	Provides the user with a simple way to submit a request to have an event included in the guide.
Stations	Provides a system to create and view stations, which are on-going live streams, such as those from traffic cameras or radio stations.
Chats	Used by the administrator to add or edit chat information in the database and associate that chat with a live streaming event. The chat display template contains the Windows Media Player control and a chat control, each of which has been properly configured.
Categories	Used by the administrator to associate a category name with an event or on-demand content.

Requirements

For an overview of Windows Media Event Guide and a list of hardware and software requirements, see Windows Media Event Guide Overview ( https://msdn.microsoft.com/workshop/imedia/windowsmedia/WMEvents.asp ) or the Help documentation that is included with the installation.

To create a custom event guide from Windows Media Event Guide, you must have a working knowledge of coding ASP-based applications using Microsoft® JScript®, Microsoft® Access or SQL database servers, and Web site administration. Microsoft Access is also required if you want to edit the database file, and a Web page editor, such as Microsoft® Visual InterDev®, is helpful for editing the ASP pages. This article is meant as a starting point for creating a custom event guide. Microsoft cannot provide support or accept any liability for your custom event guide site. However, the MSDN Web Workshop ( https://msdn.microsoft.com/workshop/default.asp ) is filled with information and resources to help you work with the components and Microsoft Web applications.

Using Windows Media Event Guide features

This section provides more detail about how each feature is used. It also points to the individual files that contain the code for implementing the components and shows how the components are connected. To help you find the files, the path is included in many cases (such as \Views\Default\AspCal.asp).

If you chose the default path when installing Windows Media Event Guide, all Guide and Admin files are contained in C:\Wmeg. The Wmeg folder is also configured as a virtual directory of the Web server. Because there are an infinite number of ways to customize the guide, this section does not provide scripting details.

The following diagram shows the locations and names of the frames used in the main Admin and Guide pages. A hidden frame below the EventDetail frame holds an ASP page, which is used to access event details from the database. A frame can display different Web pages depending on the view or editing mode that a user or administrator has chosen. For example, the EventList frame in the Guide can display Cal_list.asp, Eztree.asp, or Bookmark.asp, depending on which View Select button has been clicked.

Figure 2: Frame names used in Windows Media Event Guide

Logon

When a user comes to the event guide site, Default.asp (the main Guide page) checks for a cookie containing the user's ID number. If no cookie exists on the user's computer, Default.asp opens \Register\Default.htm. A new user clicks New Profile, and \Register\Register.htm opens; a user who has previously registered clicks Remember Me, and \Register\Remember.htm opens. In either case, the user then enters a name and password and clicks the appropriate button. The Web page validates and sends the information to the database.

A user record is created in the database containing this information, and a unique ID number is assigned to the user. Remember.htm or Register.htm creates a cookie that contains the ID number on the user's computer. The next time the user comes to the site, the cookie logs the user on automatically.

The Logon component is designed to gather user information, not to authenticate users on a secure system. However, by using the security features of Microsoft® Windows NT® and your Web server, you can effectively control how users access your Web content.

In an Internet-based event guide system, it can be useful to expand the Logon feature to gather even more information about a user, such as an e-mail address and personal favorites. The information can be used by marketing and sales people to target advertising. The information can also be used with specially-written ASP pages to personalize what a user receives. For example, a site offering many different types of music can limit what a user sees based on musical preferences that users enter when they first log on.

Calendar

The calendar is displayed on both the Guide and Admin main pages and is created in the ListHead frame by \Views\Default\Aspcal.asp. When Aspcal.asp first opens, the code builds the graphical elements of the calendar and sets the calendar to the current date. If a user selects a new month or year, the calendar changes accordingly. If a date is selected, a variable containing the date is sent to Cal_list.asp in the EventList frame.

Because all the code for the calendar is contained in Aspcal.asp, it is relatively easy to change the look of the calendar, replace it with a different calendar control, or remove it altogether. For example, you may want to use your event guide to display mostly on-demand content and very few live events. By removing the calendar, you gain real estate on the page that can be used for an expanded event list.

Event List

The EventList frame, located below the calendar, is used to display a list of events. In the Guide, there are three views: Calendar, Browse, and Bookmark. Cal_list.asp, Eztree.asp, and Bookmark.asp provide the three views, which are selected by clicking one of the buttons contained in View_select.htm. All of these ASP pages are located in Guide\Views\Default\.

A similar set of ASP pages is used in the main Admin page. The only difference is that the Bookmark button is replaced by Submitted, which allows you to view event information submitted by users. For more information, see Submit Event later in this article.

When Calendar is clicked, a call is made to the gotoToday function in the ListHead frame, which contains Aspcal.asp. The calendar changes to the current date and opens Cal_list.asp in the EventList frame. The database passes the events associated with the selected date to Cal_list.asp, and the events appear in the frame.

When Browse is clicked, Eztree.asp opens in the EventList frame. Eztree.asp produces a simple list of all events organized by the category assigned to each (Events by Category). A second section lists events by month, and a third, Always Live Stations, lists stations.

When Bookmark is clicked, Bookmark.asp opens in the EventList frame. This ASP page reads the user ID number contained in a cookie on the user's computer to locate associated bookmarks in the database and populate a list. If there are no bookmarks associated with the user, Bookmark.asp displays help text. The cookie is created when a user logs on. Users add bookmarks to the database by clicking Add Bookmarks while viewing content in the Default display template (Display URL).

When a user clicks an event in any of the views, the Event ID is passed to Event_data.asp using the following function:

function onItemSelect(){
if (ui_locked)
return;
var el = event.srcElement;
var newLocation = "event_data.asp?EventId=" + el.id;
parent.frames(6).location.href = newLocation;
parent.frames(3).InitForm();
cbm = el.bid;
cbmTitle = el.innerText;
}

Event_data.asp uses the ID to search the database for event details and returns the information to Event_detail.htm, which opens and displays the text in the EventDetail frame. Event_data.asp is contained in a hidden frame.

Search

Both the Admin and the Guide provide search functionality. In the Guide, a user can search by two database fields (Title and Description), while in the Admin they can search by 10 database fields. In the Admin, clicking Search opens an empty Event_details.asp in the EventDetail frame, and magnifying glass icons appear to the right of searchable fields. A user can either enter text in a field, such as Title, and click the icon to search by one field, or enter text in multiple fields and click Find Now to initiate a search involving all fields containing text.

Using the Guide, a user enters text in one or both fields of Search.htm, then clicks Find. This action opens Event_search.asp and passes to it the contents of both fields. Event_search.asp then queries the database and creates a results list in the EventList frame. With the Admin, information is passed to the database using Event_list_isearch.asp or Event_list_que.asp. Event_search.asp and Event_list_isearch.asp both contain an OnItemSelect function, which handles the display of event details in the same way as the three ASP pages in the Event List component. When a user selects an item, the event ID is passed to Event_data.asp. This in turn passes database information to Event_detail.htm. Event_list_que.asp is called by clicking Find Now. It performs the multiple-field search and displays a result in the EventDetail frame.

Event

The Event component displays details associated with an event and allows a user to edit the details in the Admin. In the Admin, information is displayed by Event_detail.asp; in the Guide, information is displayed by Event_detail.htm. Both pages open in the EventDetail frame and receive their information from Event_data.asp, which is located in a hidden frame.

Guide Event Details

On the Event Details page of the Guide, a user can click View Stand-alone, View Event, or an e-mail link. View Stand-alone is an HREF link that opens the event in the Windows Media Player stand-alone configuration. View Event opens the event in the display template by calling the OpenMe function in Event_detail.htm.

function OpenMe(){
ModalWin = window.open(tAsxFile,"ModalWin","resizable=yes,
scrollbars=yes,width=800,height=600");
ModalWin.focus();

The Guide Event_detail.htm also compares the event start and end times with the current date and time. If the current time is later than the event time, the following message appears:

This event has already taken place and is available on-demand.

Messages are also displayed if the current time is within the event beginning and ending times, or if it is before the event times. Also, if the event has not yet started, clicking View Event calls the OpenTimer function. As the following code shows, OpenTimer calls Timer.htm, which opens in a small window and displays a timer that counts down to the start of the event. When the current time equals the start time, the event opens automatically in its display template:

function OpenTimer(){
TimerWin = window.open("timer.htm","TimerWin","resizable=no,
scrollbars=no,width=205,height=125");
}

Admin Event Details

In the Admin, a user can select from a group of commands available on the Event toolbar (Event_action.htm). The following table describes the commands:

Event command	Description
New	Calls the Clear_detail_form function in Event_detail.asp.
Clone	Calls the Clone_action function in the Event_detail.js applet. This function assigns a value to the ActionMode variable and calls the ActionHandler function in Event_detail.asp. When OK is clicked, the ActionMode variable is used to call Event_insert.asp, which creates a copy of the current event and displays the copy.
Delete	Calls the Delete_action function in Event_detail.js. This function assigns a value to the ActionMode variable and calls the ActionHandler function in Event_detail.asp. When OK is clicked, the ActionMode variable is used to call Event_delete.asp, which deletes the event that is currently displayed.
Edit	Calls the Edit_action function in Event_details.js. This function assigns a value to the ActionMode variable and calls the ActionHandler function in Event_detail.asp. When OK is clicked, the ActionMode variable is used to call Event_update.asp, which updates the database and reloads Event_detail.asp.
Search	Calls the Search_action function in Event_details.js. This function assigns a value to the ActionMode variable and calls the ActionHandler function in Event_detail.asp. When OK is clicked, the ActionMode variable is used to call Event_list_que.asp, which performs a search of the database using all text boxes in Event_detail.asp that contain text. As mentioned in the Search section, Event_list_isearch.asp performs a search on just one field when a magnifying glass icon is clicked.

For the most part, Event_detail.asp and Event_detail.js handle the reading and writing of strings and Boolean values from and to the database. The Event feature also validates the information. If a user enters certain data incorrectly or omits important information, messages appear, and nothing is saved in the database until the information is correct and complete.

The Event Enabled checkbox puts a flag in the event record. If Event Enabled is not selected, the Enabled field of the database is set to 0 (zero); if it is, then the field is set to 1. Events that are not enabled are not visible to users in the Guide. An event that is submitted by a user is not enabled until the checkbox is selected in the Admin.

Display Templates

On the Admin Event Detail page is Display URL, a list of three display templates. Each template displays media in a different way. You select the template that works best with your media and contains the appropriate set of supporting display features. Templates are located in the \Guide\Displays folder. The following table describes each display template:

Template	Description
Default	Contains an embedded Windows Media Player control, a frame for displaying images triggered by script commands, a section for displaying a table of contents created dynamically from markers contained in Windows Media content, and functionality for typing notes and creating bookmarks during a presentation. The template also displays a list of event details. The template, Default.asp, and associated HTML and images are located in the Presenter folder.
Media Only	Contains an embedded Windows Media Player control, an area for displaying images triggered by script commands, and an event details list. The template, Default.asp, and associated images are located in the Noslides folder.
Media Plus Chat	Contains an embedded Windows Media Player control, a frame for displaying images triggered by script commands, a chat control, and an event details list. The template, Default.asp, and associated HTML and images are located in the Chat folder.

This set of templates was created for use in the Microsoft internal event guide. If the set does not meet your needs, you can edit the template ASP pages or add new templates.

When you add a new template, place all the elements in a folder in Guide\Displays, and add the template to the Display URL list in Event_detail.asp. For example, the following code can be inserted in Event_detail.asp to add a template:

<OPTION VALUE="displays/MyNewTemplate/default.asp">
My New Template (animated border and headline text)
</OPTION>

The following code shows a section of Event_detail.asp with the example code inserted:

<TR>
<TD ALIGN="right">>FONT FACE="Verdana" Size="2">>B>  
Display Url: >/B>>/FONT>>/TD>

<TD COLSPAN="3">NOBR>
<select ID="txtDisplayUrl" style="width:336">
<OPTION VALUE="displays/presenter/default.asp">
Default (support for slides, TOC, note taking, and 
bookmarks)
</OPTION>
<OPTION VALUE="displays/noslides/default.asp">
Media Only (support for slides)
</OPTION>
<OPTION VALUE="displays/chat/default.asp">
Media Plus Chat (support for slides)
</OPTION>
<OPTION VALUE="displays/MyNewTemplate/default.asp">
My New Template (animated border and headline text)
</OPTION>
</SELECT>
<img src="../images/search2.gif" id="srchbtn8" class="search" 
style="visibility:hidden" onclick="search_item('txtDisplayUrl', 
'display_url')">>/NOBR>
lgt;/TD>
</TR>

When you create a template, name it Default.asp, and include code to create a database object for retrieving any useful event information, such as the URL of the Windows Media content:

Response.Write ("pb.url = \"" + rsEvent("url") + "\";\n");

Most of this basic code can be copied from an existing template.

Bookmarks and Notes

A user creates bookmarks and notes while viewing media using the Default display template. Bookmarks are viewed by clicking Bookmarks on the main Guide page; notes are viewed by clicking Notes: On the display template.

There are two files named Bookmark.asp in the Guide folders, but they each perform very different functions. Bookmark.asp and Bookmark.htm in the Displays\Presenter folder are called when a user clicks Add Bookmark (on Tool.htm) while viewing media in the Default display template. The following function in Bookmark.asp creates a bookmark record in the database, and adds the event ID, bookmark title, and member ID to the database. It also adds a time stamp (ts), and creates an ID number for the record. The member ID number is retrieved from the cookie on the user's computer. Certain other variables, such as content and position, are not used in the current implementation.

     var str = new String (Request.ServerVariables("PATH_TRANSLATED"));
     var result = str.match(/^.*\\/);
     var event_id = Request.Form("EventID");
     var title = Request.Form("Title");
     var content = Request.Form("Content");
     var position = Request.Form("CurPosition");
     var now = new Date();
     var ts = now.getTime(); // Time stamp use to identify our new record
     var recset;
     var sSQL = "";
     var Conn;
     var new_id;
     var member_id = Request.Cookies("Register")("UserID");

Bookmark.asp in the Views\Default folder is called when a user clicks Bookmarks on the main Guide page. This ASP page reads the database and displays a list of bookmarks that the user has created. On the Guide page, a user can also edit and remove bookmarks and refresh the list.

You can expand upon the bookmark concept. For example, in an Internet environment, it can be useful to gather more information when a user creates a bookmark, such as current playback time and number of times the content has been accessed. Bookmarks can be used by marketing staff to understand user preferences.

Currently, bookmarks are not accessible in the Admin. However, if you plan to use Windows Media Event Guide on the Internet, you can create an ASP page that allows bookmarks to be viewed and edited by an administrator. You can also use the time stamp variable with a macro in Microsoft Access, for example, that automatically deletes bookmark records after a given time.

The Note: Component consists of Note.htm and AddNote.asp, which provide the user interface for typing notes and writing them to the database, and Notes.asp, which creates a list of notes in the Default display template. The following code limits the information being returned from the database to only those notes belonging to the user and those that are associated with the current event:

var event_id = Request.QueryString("EventId"); 
var member_id = Request.Cookies("Register")("UserID"); 

sSQL = "SELECT " + sColumns + " FROM notes WHERE event_id =" + event_id +
" and member_id =" + member_id;

Feedback

When a user clicks Feedback on the main Guide page, Feedback.htm opens in the EventDetail frame. The user types text into two fields on the form, and then clicks Submit Feedback, which opens FeedbackSubmit.asp. This ASP page writes the information to the database. All feedback Web pages are contained in the Guide\Forms folder.

This feature is not fully implemented. In the current version of Windows Media Event Guide, feedback information is saved in the database, but there is no method of retrieving the information other than by viewing the records in the feedback table directly by using Microsoft Access. By finishing the component, you can add a powerful interactive feature to your event guide.

For example, you can use this feature to collect more user details by adding more fields to Feedback.htm, FeedbackSubmit.asp, and the database. FeedbackViewer.asp, included in the Forms folder, can be used as a starting point for building a custom ASP page through which you can view feedback records in the database.

Submit Event

This component provides users with a simple means of submitting event information for inclusion in the event guide. In the Guide, a user clicks Submit Event, and Forms\SubmitEvent.htm opens in the EventDetail frame. The user fills out the form, entering details such as title, description, and event date, and then clicks Submit Request. This action calls the cmdSubmit function and opens SubmitEventAction.asp, which gathers the information from the form, creates a record in the database, and writes the information to the record. SubmitEventAction.asp then displays a confirmation message.

Event information submitted by a user is saved directly to a new record in the Event table of the database, alongside all the previously posted events. When the record is written, the text UNKNOWN is inserted into the Content URL field, and the Enabled field is set to zero. With the two fields set this way, an event is only visible in the Admin. The Guide Event List ASP pages (Cal_list.asp, Eztree.asp, and Bookmark.asp) can only display events with the Enabled field set to 1.

In the Admin, click Submitted to open Event_list_sub.asp in the EventList frame. This ASP page generates a list of all events in the database that contain UNKNOWN in the Content URL field. When you click an event in the list, event details open in the EventDetail frame, using the same process as described earlier in the Event List component. Click Event Enabled to set the Enabled field to 1, replace UNKNOWN in the Content URL box with the correct text, edit any other fields, and then click OK. The edited information is saved in the database, and the event becomes accessible to users in the Guide.

While a feature like this is very useful for an intranet event guide, it can be difficult to manage in an Internet environment. You can remove this feature from the main Guide page simply by deleting the Submit Event button and any associated references from Guide\Toolbar.htm.

Stations, Chats, and Categories

The Stations, Chats, and Categories features in the Admin function similarly. Each allows you to add or edit certain database information that is used elsewhere in the event guide. To access each component, click the associated button on the toolbar. In the Admin, the toolbar is Admin\Admin_main.htm.

When Stations is clicked, Station.asp, located in the Stations folder, opens and calls Station_detail.htm, Station_list.asp, and Station_action.htm. Station_detail.htm opens in the EventDetail frame with a blank form; Station_list.asp creates a list of current stations in the EventList frame; and Station_action.htm opens in the EventAction frame and contains buttons that call various editing functions. When a station in the EventList frame is clicked, Station_data.asp queries the database and populates Station_detail.htm with station details. When OK is clicked, the appropriate ASP page is called to handle the request: Station_delete.asp, Station_insert.asp, or Station_update.asp.

Similarly, when Chats is clicked, Chats\Chat.asp opens and calls Chat_detail.htm, Chat_list.asp, and Chat_action.htm. The Categories component has a similar layout. In each, the calendar is replaced by an embedded Windows Media Player control, which in this implementation is not connected. An embedded chat control is included in Chat_detail.htm, which allows you to test chat settings before adding them to the database.

Additional Information

For more information on Windows Media Event Guide and associated topics, see the following:

Help documentation included with the Windows Media Event Guide installation
Windows Media Event Guide Overview ( https://msdn.microsoft.com/workshop/imedia/windowsmedia/WMEvents.asp )
ASP pages ( https://msdn.microsoft.com/workshop/server/asp/aspover.asp )
Internet Information Server (IIS) ( https://msdn.microsoft.com/isapi/gomscom.asp?TARGET=/ntserver/web/exec/feature/Datasheet.asp )

Customizing MS Windows Media Event Guide

On This Page

Introducing Windows Media Event Guide

About Windows Media Event Guide

Using Windows Media Event Guide features

Additional Information

Additional resources