This project is read-only.

Configure Fully Xpedited Web Site (WebControls)

Xpedite makes use of three main WebControls.
  • CompositeResourcePlaceholder
  • CompositeResource
  • Sprite

IMPORTANT: Depending on the 'mode' configured in the web.config file (see: Configure Partially Xpedited Web Site), each Xpedite WebControl will either render the composite resources (when mode is On or RemoteOnly) or individual resource (when mode is Off or RemoteOnly) to ensure that debugging is not impacted by the usage of composite resources.

CompositeResourceHandler

In order to enable the handling of XCR resources, ensure that the following line is added to the handlers/httpHandlers section of the web.config file

  <httpHandlers>
    <add verb="GET,HEAD" 
         path="*.xcr" 
         type="Xpedite.Handlers.CompositeResourceHandler, Xpedite, PublicKeyToken=a255fab67ac3163b"/>
  </httpHandlers>

  <handlers>
    <add name="XpediteResources" 
         verb="GET,HEAD" 
         path="*.xcr" 
         type="Xpedite.Handlers.CompositeResourceHandler, Xpedite, PublicKeyToken=a255fab67ac3163b"/>
  </handlers>

CompositeResourcePlaceholder

The CompositeResourcePlaceholder WebControl is used to render out the combined CSS LINK tags and JavaScript SCRIPT tags for a given page. Each page that utilizes a CompositeResource control should have exactly one CompositeResourcePlaceholder in the page HEAD.

<xpedite:CompositeResourcePlaceholder runat="server" />

CompositeResource

The CompositeResource WebControl is used to define composite resources. All resources within a given CompositeResource control should be of the same type. If a CompositeResource is marked as being Extendable, any CompositeResource with the same ReferenceName will be combined together for a given page.

<xpedite:CompositeResource runat="server" Type="Css" ReferenceName="SiteCss" Extendable="false">
  <xpedite:Resource Url="/Styles/Site.css" />
  <!-- ... -->
</xpedite:CompositeResource>

Type

The Type attribute specifies the composite resource type.
  • Css - Represents a composite Cascading Style Sheet resource.
  • JavaScript - Represents a composite Javascript resource.
  • Png - Represents a Png based CSS Sprite (May be made up of Png, Jpeg and Gif image resources).
  • Jpeg - Represents a Jpeg based CSS Sprite (May be made up of Png, Jpeg and Gif image resources)..
  • Gif - Represents a Gif based CSS Sprite (May be made up of Png, Jpeg and Gif image resources)..

Default Value: Unknown

ReferenceName (Optional)

The ReferenceName attribute represents the name given to the composite resource; typically ReferenceName will be used in conjunction with the Sprite WebControl.

When the Type attribute is not set to CSS, the ReferenceName must match the pattern: ^[a-zA-Z]+[_a-zA-Z0-9-\.]*$
When the Type attribute is set to CSS, the ReferenceName must match the pattern: ^[a-zA-Z]+[_a-zA-Z0-9-]*$

Default Value: Page Name Without Extension

Extendable (Optional)

The Extendable attribute represents whether or not the resource definition may be broken up in to one or more "parts". Typically Extendable is set to 'true' when you may want to combine resource definitions across master pages, or user controls to ensure the minimum possible number of composite resources. In order for a composite resource to be extended, the ReferenceName values must be the same.

Default Value: False

Sprite

The Sprite WebControl is used in conjunction with a composite resource definition to replace the IMG tag. To use the Sprite WebControl first define a composite resource of Type Png, Jpeg or Gif. Once the sprite composite resource definition is in place, you may then use the Sprite Web Control to reference a specific image resource within the CSS Sprite.

<xpedite:CompositeResource runat="server" Type="Png" ReferenceName="SitePng">
  <xpedite:Resource Url="/Images/Image1.png" />
  <xpedite:Resource Url="/Images/Image2.jpg" />
  <xpedite:Resource Url="/Images/Image3.gif" />
  <!-- ... -->
</xpedite:CompositeResource>

<xpedite:Sprite runat="server" ID="Sprite1" SpriteName="spriteReference" ImageName="imageReference" Alt="Alternate text" />

ID (Optional)

The optional ClientID that should be used to referene the rendered CSS Sprite image. The ID value is only required to be set if you will be interacting with the CSS Sprite image via JavaScript (i.e.., Hover effects etc).

Default Value: null

SpriteName

The SpriteName maps to a specific CompositeResource definition ReferenceName where the ImageName reference is defined.

Default Value: null

ImageName

The ImageName maps to a specific CompositeResource definition Resource ReferenceName that represents the image to be displayed.

Default Value: null

Alt (Optional)

The alternative text / tooltip to be displayed for the CSS Sprite image.

Default Value: null

Last edited Jan 15, 2011 at 9:23 PM by CBaxter, version 3

Comments

No comments yet.