www.mathertel.deThe AJAX EngineSamples 4: visual effectsPartDemo.aspx

Web Part sample

View Source

By reusing the shadow effect and the mover behavior a webpart can be realized.

By using a Web Control it is really simple to show a part like this:

<ajax:Part ID="Part1" Moveable="true" Title="moveable" runat='server' Width='140px'
  Style="position: absolute; top: 160px; left: 420px">
  <p>The Content is here.</p>
::: moveable closecloseclose

The content of the web part is here.

The web part contains content that can be declared between the opening and closing tags and so a WebControl implemented as a class (view source) is used here and not a User Control implemented as a *.ascx file.

Including the JavaScript Behaviour library (view source) and the JavaScript behaviour for this web control (view source) is implemented the same way as it is with the user controls inside the OnPreRender method.

The outer div tag is extended by some style attributes that help displaying the shadow by overriding the RenderBeginTag method. You have to specify a Width attribute in the designer and the Height attribute is optional.

The Shadow and the Mover objects are included into the inner content by overriding the RenderChildren method.

Because this class derives from System.Web.UI.WebControls.Panel we do not have to care a lot about the real content. The inner content can be included into the output stream by just calling base.RenderChildren and passing the HtmlTextWriter.

This page is part of the http://www.mathertel.de/ web site.