The following example builds a slideshow control that lets a user scan forward and backward through a series of images. The SlideShow control provides all event handling and rendering of the visual interface. The control is used on an ASP+ page merely by placement of an HTML tag.
This ASP+ page uses the new SlideShow control:
<%--=================================================================== This page uses the slide show control. The declarative line below registers the control by referencing the namespace (Acme) within that file that contains the classes that define the control. The "Acme" TagPrefix is an arbitrary name used to reference the control on the ASP+ page. ===================================================================--%> <%@ Register TagPrefix="Acme" Namespace="Acme" %> <html> <body bgcolor="black"> <br><br> <center> <h3><font face="Verdana" color="white">Slide Show</font></h3> <form runat=server> <Acme:SlideControl id="SlideControl" runat="server"/> </form> </center> </body> </html>
This custom server control, written in C#, provides a user interface, maintains view state between requests, and displays the previous or next slide in response to a user clicking on forward or backward buttons.
/*===================================================================== Slideshow control example Filename: SlideShow.cs. This control is compiled into SlideShow.dll and placed in the "bin" directory under the virtual root directory holding the ASP+ pages that use it. =====================================================================*/ using System; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Collections; namespace Acme { public class SlideControl : Control, IPostBackEventHandler { private int index = 1; private ArrayList ImageSource = new ArrayList(); private int SlideIndex { get { return (int) State["Index"]; } set { State["Index"] = value; } } protected override void Init() { ImageSource.Add (new Slide("images/comp1.jpg", "My Composition #1")); ImageSource.Add (new Slide("images/comp2.jpg", "My Composition #2")); ImageSource.Add (new Slide("images/comp3.jpg", "My Composition #3")); ImageSource.Add (new Slide("images/comp4.jpg", "My Composition #4")); ImageSource.Add (new Slide("images/comp5.jpg", "My Composition #5")); ImageSource.Add (new Slide("images/comp6.jpg", "My Composition #6")); } public void RaisePostBackEvent(string eventArgument) { index = this.SlideIndex; int oldindex = index; if (eventArgument == null) { return; } if(string.Compare("NextSlide", eventArgument,true) == 0) { if ( index < ImageSource.Count ) { index++; } } if(string.Compare("PreviousSlide", eventArgument,true) == 0) { if(index > 1) { index--; } } this.SlideIndex = index; } protected override void PreRender() { Page.RegisterPostBackScript(); } protected override void Render(HtmlTextWriter output) { Slide slidefile = (Slide)ImageSource[index -1]; string image = slidefile.source; string caption = slidefile.caption; output.WriteLine("<table bgcolor=gray border=1 valign=top>"); output.WriteLine("<tr><td>"); output.WriteLine("<center>"); if (index ==1 ) { output.WriteLine("<a>"); } else { output.WriteLine("<a href=\"jscript:" + Page.GetPostBackEventReference(this,"PreviousSlide") +"\">"); } output.WriteLine( "<img src='images/left4.gif' width=15 height=15 border= 0 ></a>"); output.WriteLine("<span STYLE='font-family:Verdana;font-size:11pt;font-weight:bold'>" + caption + "</span>"); if (index==ImageSource.Count) { output.WriteLine("<a>"); } else { output.WriteLine("<a href=\"jscript:" + Page.GetPostBackEventReference(this,"NextSlide") +"\">"); } output.WriteLine("<img src='images/right4.gif' width=15 height=15 border=0 ></a>"); output.WriteLine("</center>"); output.WriteLine("</td></tr>"); output.WriteLine("<tr valign=top><td valign=top>"); output.WriteLine("<table STYLE='font-family:Verdana;font-size:9pt'border=0 width=300 cellpadding=2 bgcolor=white>"); output.WriteLine("<tr> <td>"); output.Write("<img src='"+ image+"' /> <BR>") ; output.WriteLine("</td> </tr>"); output.WriteLine("</table> </td> </tr></table>"); } } public class Slide { public string source; public string caption; public Slide(string source, string caption) { this.source = source; this.caption = caption; } } }