Delving Deeper into Atlas Client Controls
(Page 1 of 4 )
In this second part of a three-part series covering the client-side controls that ship with Atlas, you'll learn about images, hyperlinks and more. This article is excerpted from chapter four of the book
Programming Atlas, written by Christian Wenz (O'Reilly, 2006; ISBN: 0596526725). Copyright © 2006 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.
Images
The HTML <img> element represents an image on the page. TheSys.UI.Imageclass implements an Atlas version of a client-side image (represented in the DOM with theImageobject). In addition to the common methods listed earlier in this chapter, the AtlasImageclass supports the following methods:
get_alternateText()
Retrieves the value of thealtattribute
set_alternateText()
Changes the value of thealt attribute
get_height()
Gets the height of the image
set_height()
Sets the height of the image
get_width()
Gets the width of the image
set_width()
Sets the width of the image
get_imageURL()
Retrieves the relative or absolute URL of the image (srcattribute)
set_imageURL()
Changes the relative or absolute URL of the image (srcattribute)
Once again, standard DOM properties are encapsulated in a class. You don’t have to learn much JavaScript, just get accustomed to the methods that Atlas exposes. Example 4-3 shows you how to manipulate the empty<img>element on the page, which initially looks like this:
<img id="Image1" />
By default, the XHTML validation in Visual Studio will complain about missing attributes, but you will be using JavaScript code to set the requiredsrcandaltattributes.
Example 4-3. Using an Atlas Image control
ControlImage.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">
<title>Atlas</title>
<script language="JavaScript" type="text/javascript">
function pageLoad() {
var image = new Sys.UI.Image($("Image1"));
image.set_imageURL("atlaslogo.gif");
image.set_alternateText("Atlas logo");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server">
</atlas:ScriptManager>
<div>
<img id="Image1" />
</div>
</form>
</body>
</html>
Figure 4-3 shows the result. For this example to work, you need the file atlaslogo.gif in the root directory of the web site; you will find the file in the code downloads for this book (http://www.oreilly.com/catalog/atlas).
Figure 4-3. The Image control; the Properties window shows the alternate text
Next: Hyperlinks >>
More ASP.NET Articles
More By O'Reilly Media
|
 This article is excerpted from chapter four of the book Programming Atlas, written by Christian Wenz (O'Reilly, 2006; ISBN: 0596526725). Check it out today at your favorite bookstore. Buy this book now.
|
|
