Most of the examples you see out there regarding Atlas involve wrapping the UpdatePanel around something, adding some triggers and seeing the magic.
That is great, but Atlas has more to offer than that because it offers a 1)whole client side framework that makes writing on the client so much nicer for those of you coming from a .net background and 2)Control Extenders that make your server side controls perform client side magic.
Heres an example of the client stuff. For more information on the control extenders checkout the toolkit.
Creating a Page to Display a Random Quote
Lets say you have been asked to create a web page to show a daily quote. The information will be provided via a web service with the following method:
- GetQuote() - returns an object with a QuoteText, Author and Url property with details of a random quote.
Displaying the Quote
- Users should click a link on the page to display the quote. The Author property should be displayed as a hyperlink using using the Url.
e.g.: This is the quote - Author
- Users should be able to change the style of the quote using a dropdownlist with the following values: small, medium, large. Selecting this should apply a style to the quote.
- Users should be able to make a new quote show automatically every 5 seconds if they like.
OK so lets run through this using Atlas controls...
Adding the Script Manager
First add the script manager to the page:
<atlas:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<atlas:ServiceReference Path="QuoteService.asmx" />
</Services>
</atlas:ScriptManager>
We have added a reference to our QuoteService.asmx web service in the script manager. The script manager is the only server control we are using here.
Laying Out the Page
Next lets layout the page:
<div>
<select id="StyleSelect">
<option value="small">Small</option>
<option value="medium" selected="selected">Medium</option>
<option value="large">Large</option>
</select>
<a href="#" id="HyperLink1" >Get Quote</a>
<input id="Checkbox1" type="checkbox" /> Auto Quote (every 5 seconds)
<br />
<br />
<span id="QuoteText"></span><a id="AuthorHyperLink"></a>
</div>
Ok that gives us a very basic layout to use: 
Lets add some basic styles too:
<style type="text/css">
.small
{
font-size:.7em;
}
.medium
{
font-size: 1.5em;
}
.large
{
font-size: 2em;
}
</style>
Creating the Client Side Code
Now to create the client side code:
I am going to create some vars and then initialise them in a pageLoad event that Atlas provides (add the following in a <script type="text/javascript"></script> block)
var styleSelect;
var hyperLink1;
var authorHyperLink;
var quoteText;
var timer;
var checkBox1;
function pageLoad()
{
hyperLink1 = new Sys.UI.HyperLink($('HyperLink1'));
hyperLink1.initialize();
hyperLink1.click.add(getQuote);
styleSelect = new Sys.UI.Select($('StyleSelect'));
styleSelect.initialize();
styleSelect.selectionChanged.add(changeStyle);
quoteText = new Sys.UI.Label($('QuoteText'));
authorHyperLink = new Sys.UI.HyperLink($('AuthorHyperLink'));
timer = new Sys.Timer();
timer.initialize();
timer.set_interval(5000);
timer.tick.add(timerTick);
timer.set_enabled(false);
checkBox1 = new Sys.UI.CheckBox($('CheckBox1'));
checkBox1.initialize();
checkBox1.click.add(checkBox1Clicked);
}
You'll notice a few things here:
- Using the $ is an Atlas shortcut for getElementById
- I am creating objects from these elements. And these objects are part of the client Sys.UI namespace that Atlas provides. (e.g. hyperLink1 = new Sys.UI.HyperLink($('HyperLink1'));
- These objects have their own Atlas properties, methods and events (see http://atlas.asp.net/docs/Client/default.aspx for full reference), so I can do things like the following to wire up an event:
hyperLink1.click.add(getQuote);
Calling the Web Service
Lets have a look at how we get the quote. The following is the mocked method to deliver the quote:
[WebMethod]
public Quote GetRandomQuote()
{
Random rnd = new Random();
Quote quote = new Quote();
quote.Author = "Fred " + rnd.Next(100).ToString();
quote.QuoteText = "Some Quote " + rnd.Next(100).ToString();
quote.Url = "http://" + rnd.Next(100).ToString();
return quote;
}
and the quote class is simply:
public
class Quote
{
private string _quoteText;
public string QuoteText
{
get
{
return _quoteText;
}
set
{
_quoteText = value;
}
}
private string _author;
public string Author
{
get
{
return _author;
}
set
{
_author = value;
}
}
private string _url;
public string Url
{
get
{
return _url;
}
set
{
_url = value;
}
}
}
When we add a reference to the script manager (as we did above) then we get proxy classes to call the web service for free - so we can do the following:
function getQuote()
{
QuoteService.GetRandomQuote(randomQuoteComplete);
}
function randomQuoteComplete(result)
{
authorHyperLink.set_text(result.Author);
authorHyperLink.set_navigateURL(result.Url);
quoteText.set_text(result.QuoteText + " - ");
}
You'll notice here that
- there is a callback which is called when the method is complete. You can also add callbacks for errors, timeouts and cancel (see http://atlas.asp.net/docs/atlas/doc/services/consuming.aspx for full details of consuming web services on the client).
- The complex type (ie. Quote) is returned and we can access it's properties using the familiar dot notation (result.Author)
Using the Timer Class
This is very simple. We just need to enable the timer when the checkbox is clicked (we have already set up the event handler for this in the pageLoad event), then call getQuote() on every tick the timer generates:
function checkBox1Clicked()
{
timer.set_enabled(checkBox1.get_checked());
}
function timerTick()
{
getQuote();
}
Applying Styles to the Quote
The Atlas client library controls all come with classes that let you work with Css (http://atlas.asp.net/docs/Client/Sys.UI/Control/default.aspx). Since we have already wired up the selectionChanged event for the dropdownlist to a changeStyle method, we can do the following:
function changeStyle()
{
var styleName = styleSelect.get_selectedValue();
authorHyperLink.set_cssClass(styleName);
}
OK that's it. Hopefully that has demonstrated some of the features of the Atlas client library. There are of course many more things you can do. For example:
- Data Binding
- Declarative mark-up using Xml-Script instead of using javascript
- Behaviours (e.g AutoComplete behaviour)
Check out the docs for more details
HTH
Ian
posted @ Friday, July 14, 2006 10:23 AM