Today Microsoft Atlas is becoming one of the key technologies for building Web 2.0 model web applications. Thanks to the great Microsoft ASP.net team led by Scot Guthrie. The team is providing an exciting web application model for building next generation web. Atlas provides Client side frameworks and Server side framework for building Ajax- powered web applications. It enables a rapid application development model for building Ajax applications using ASP.net 2.0.The Atlas framework providing lot of UI specific features such as Drag-Drop, Opacity, Layouts, and Animations etc.
Drag and Drop
Both client-side framework and server controls providing the Drag and Drop functionality. The client-side Javascript library AtlasUIDragDrop is providing the Drag and Drop functionality. So you need to reference the AtlasUIDragDrop library to implement Drag and Drop functionality.
<%@ Page Language="C#" %>
<head runat=server></head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="True">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
</Scripts>
</atlas:ScriptManager>
<div id="dvDescription">
<div id="dvDrag">
Click here for Drag
</div>
<br><br>
Atlas is the undisputed><br> leader in the Ajax World.
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="dvDrag" cssClass="draghandle" />
<control id="dvDescription" cssClass="floatwindow">
<behaviors>
<floatingBehavior handle="dvDrag">
</floatingBehavior>
</behaviors>
</control>
</components>
</page>
</body></html>
In the above example, the Atlas Script enables the Drag and Drop functionality. We can specify the drag functionality in the <behaviors> section of Atlas script. We need to specify the drag handle in the < floatingBehavior > section for implementing Drag and Drop. Elements are assigned a <control> element in Atlas script. This control elements can have behaviors associated with them.The floatingBehavior, enables the layer to be dragged and dropped around the page.
Drag and Drop using Server Control
The DragOverlayExtender control allows you to add drag-and-drop functionality to any control. The main advantage of this control is that you can add drag and drop functionality to your existing applications. You need to add a DragOverlayExtender control and its associated DragOverlayProperties control and set them to extend the control that you want to implement Drag and Drop functionality.
<%@ Page Language="C#" %>
<html>
<head runat=server></head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
</atlas:ScriptManager>
<div>
<asp:Label ID="lblDescription" runat="server" CssClass="label">
Atlas is the undisputedleader in the Ajax World
</asp:Label>
</div>
<atlas:DragOverlayExtender ID="DragOverlayExtender1" runat="server">
<atlas:DragOverlayProperties TargetControlID="lblDescription" Enabled="true"/>
</atlas:DragOverlayExtender>
</form>
</body>
</html>
AtlasUIGlitz
The client-side Javascript library AtlasUIGlitz is providing lot of animation functionalities that including Opacity, Fade Animations, Layouts, Number Animations and Length Animations. For implementing this UI functionalities, you need to reference the AtlasUIGlitz library.
Opacity
The Opacity can specify using opacity tag of the <behaviors> section of Atlas script.
The value of the <opacity> element determines the opacity. The value will be 0 to 1. The value 0 is completely transparent and 1 is completely opaque.
<%@ Page Language="C#" %>
<head runat=server></head>
<body>
<form id="form1" runat="server">
<atlas:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="True">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIGlitz" />
</Scripts>
</atlas:ScriptManager>
<div id="dvDescription">
Opacity using AtlasUIGlitz
<br><br>
Powered By Microsoft Atlas
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="dvDescription" cssClass="floatwindow">
<behaviors>
<opacity id="myOpacity" value="0.5">
</opacity>>
</behaviors>
</control>
</components>
</page>
</body></html>
Fade Animation
The AtlasUIGlitz library also providing Fade Animations features. It can be done using Javascript.
Javascript function for FadeIn Animation
function fadeIn()
{
var a = new Web.UI.FadeAnimation();
a.set_target(Web.Application.findObject(“dvDescription”));
a.set_effect(Web.UI.FadeEffect.FadeIn);
a.play();
}
Javascript function for FadeOut Animation
function fadeOut()
{
var a = new Web.UI.FadeAnimation();
a.set_target(Web.Application.findObject(“dvDescription”));
a.set_effect(Web.UI.FadeEffect.FadeIn);
a.play();
}
The above function allows to make FadeIn/ FadeOut feature for the control object dvDescription.
Length Animation
The another animation is providing the AtlasUIGlitz library is Length Animation.
You can be use this functionality to animate the height or width of a control.
<%@ Page Language="C#"%>
<head id="Head1" runat="server">
</head>
<body>
<form id="form1" runat="server">
<div>
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="True">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIGlitz" />
</Scripts>
</atlas:ScriptManager>
<input type="button" id="btnLegthAnimation" value="Start Length Animation"/>
<img id="imgPic" src="shiju.jpg" mce_src="shiju.jpg" width="100" />
</div>
</form>
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<image id="imgPic" />
<lengthAnimation id="lenAnim"
target="imgPic" property="width"
startValue="900" endValue="100"
duration="10" />
<button id="btnLegthAnimation">
<click>
<invokeMethod target="lenAnim" method="play" />
</click>
</button>
</components>
</page>
</script>
</body>
</html> </html>
In the <lengthAnimation> section, target Specifies the target control for the animation.Property Specifies which property will be the target for the animation, startValue Specifies the start value for animation, endValue Specifies the end value for animation and duration Specifies the duration in seconds that will take the time to play the animation. In this example, the width will change 100px from 900 in 10 seconds.