用VS2005创建一个Atlas Web应用程序(7)

本文接着上一篇文章的内容继续介绍Atlas客户端控件的行为特性和Atlas客户端组件。

一、行为

行为封装了一些活动并和DHTML的事件进行了关联，像click或hover这类DHTML事件都可以和行为关联。它们是能够和客户端控件一起使用并产生复杂界面功能和行为特征的组件，包括复杂的操作，例如拖拽、自动完成、浮动，都可以通过它们来实现，在客户端控件中它们用集合来进行定义。

在前面文章的例子里你看到的click行为是Atlas客户端控件最基本的行为。下面的例子演示了行为的用法。在下面的例子里，行为被定义为能把它添加到完成一定功能的客户端控件中的组件。添加一个页面control5.aspx，把下面的代码复制粘贴到control5.aspx代码中。

代码如下：

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.start{background-color:yellow;border:dashed 2px black;}

.hover{font-size:40pt;background-color:yellow;border:dashed 2px black;}

</style>

<title>ASP.NET "Atlas" 演示: Sys.Control 行为</title>

</head>

<body>

<div>

<atlas:ScriptManager runat="server" ID="ScriptManager1">

<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />

</Scripts>

</atlas:ScriptManager>

<h2>ASP.NET "Atlas" 演示: Sys.Control: 行为</h2>

</div>

<hr />

<h3 style="text-decoration:underline">例 1: Floating 和 drag-drop 行为</h3>

<div id="Handle" class="draghandle">选中该元素进行拖放操作</div>

<div style="text-align:center;font-weight:bold;"> Floating</div>

这是一个Floating行为的演示

</div>

<hr />

<h3 style="text-decoration:underline">例 2: Click 行为</h3>

<div id="panel">点击下面的元素会影响到本元素</div>

<br />

<hr />

<h3 style="text-decoration:underline">例 3: Hover 行为</h3>

<div id="panel2">这个元素和Hover行为关联.</div>

<br />

</div>

<clickBehavior> //click行为，用于隐藏panel

<click>

</click>

</clickBehavior>

</behaviors>

</label>

<clickBehavior> //click行为，用于显示panel

<click>

</click>

</clickBehavior>

</behaviors>

</label>

<hoverBehavior unhoverDelay="500"> //Hover行为，设置鼠标离开后的panel2样式延迟时间为500毫秒

<hover>

</hover>

</unhover>

</hoverBehavior>

</behaviors>

</control>

<floatingBehavior handle="DescriptionDrag"> //floating行为

</floatingBehavior>

</behaviors>

</control>

</components>

</page>

</script>

</div>

</form>

</body>

</html>

运行control5.aspx，试验一下效果。

ASP.NET "Atlas"框架里定义了一些基本的行为。例如：

1.Click行为：提供了一个简单的click行为处理

2.Floating行为：提供了一个拖放功能。

3.Pop-up组件：提供了一个弹出功能，例如工具提示信息。

4.Hover行为，为DHTML事件如onmouseover、onmouseout、onfocus、onblur，提供了相应的处理。

5.Auto-complete行为：为textboxe提供自动完成功能。

下面的例子演示了一个弹出组件的例子，为醒目的汉字显示详细信息。

弹出组件在和<a>元素关联的Hover行为中被调用。

添加control6.aspx，把下面的代码复制粘贴到control6.aspx。

代码如下：

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<title>ASP.NET "Atlas" Demo: Sys.Control Behaviors</title>

</head>

<body>

<div>

<atlas:ScriptManager runat="server" ID="ScriptManager1" />

<h2>ASP.NET "Atlas" 演示: Sys.Control: 行为</h2>

</div>

<hr />

<h3><u>例 1: 弹出组件和hover行为</u></h3>

下面的例子演示了当鼠标停留在显眼的汉字"工具提示"上时将会有一个弹出提示框出现

<p></p>

这是一个<a id="hoverLink" class="hoverlabel">工具提示</a>的演示 <div id="popup" style="visibility:hidden;display:none;border:solid 1px black;background-color:Yellow;">

工具提示行为弹出的提示信息

</div>

<control id="popup"> //定义弹出框组件

<behaviors> //定义弹出框组件的行为

</behaviors>

</control>

<hover>

<invokeMethod target="popupBehavior" method="show"/> //调用行为popupBehavior的方法，使id="popup"元素显示

</hover>

<invokeMethod target="popupBehavior" method="hide"/> //调用行为popupBehavior的方法，使id="popup"元素隐藏

</unhover>

</hoverBehavior>

</behaviors>

</hyperLink>

</components>

</page>

</script>

</div>

</form>

</body>

</html>

另外，你也可以创建自定义行为和控件进行关联来提供强大的UI功能。

二、客户端组件

在前面举的例子里，其中用到了弹出组件，它就是客户端组件，在ASP.NET "Atlas" 框架里还有一些其它组件，下面的例子演示了用脚本编程和脚本声明的混合方式完成的Web.Timer组件的使用，这个组件没有和标记元素绑定，它是不可视对象（运行后在页面上看不到）。下面的例子演示了用声明方式和用脚本编程方式创建组件、处理组件的事件。

添加页面component1.aspx，复制粘贴下面代码到component1.aspx，

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

.lines{

font-style:italic;

font-weight:bold;

font-size:16pt;

background-color:Green;color:White;

border:dotted 4px white;

margin: 4px;

padding:4px;

}

.yellow{ font-size:20pt;background-color:yellow;}

</style>

<title>Using ASP.NET "Atlas" 组件</title>

</head>

<body>

<div>

<atlas:ScriptManager runat="server" ID="ScriptManager1" />

<h2>Atlas:时间组件演示: 1: 使用组件</h2>

</div>

<hr />

<b><u>例 1: 脚本编程方式创建时间组件实现计数.</u></b>

<p>

</p>

设置计算结果更新间隔(秒):  <input id="countInterval" type="text" value="1" />

<br />

时间组件的计算结果 (1000 + 10*count):  <span id="counterLabel" class="yellow">1000</span>

<hr />

<b><u>例 2: 声明方式创建的时间组件用于实现增加行的功能.</u></b>

<p>

以1/4秒计数来添加行.</p>

</div>

var lineCount = 10;

var lines = [

"Line #1",

"Line #2",

"Line #3",

"Line #4",

"Line #5",

"Line #6",

"Line #7",

"Line #8",

"Line #9",

"Line #10",

"Line #11",

"Line #12",

"Line #13",

"Line #14",

"Line #15",

"Line #16",

"Line #17",

"Line #18",

"Line #19",

"Line #20",

];

var currentLine = 0;

function OnTimerTick_Line() //用于例2每发生tick事件时添加行，最多添加到10行再从头开始添加

{

if (currentLine % lineCount == 0)

$("labellines").innerHTML = lines[currentLine] + "<br/>";

else

$("labellines").innerHTML += lines[currentLine] + "<br/>";

currentLine = (currentLine + 1) % (lines.length-1);

}

//为例1创建一个全局的时间组件

var g_countTimer = new Sys.Timer();

function pageLoad()

{

g_countTimer.set_interval(1000);//为例1的全局组件设置事件发生的时间间隔

g_countTimer.tick.add(countTimerTick);//为例1的全局组件设置事件句柄

g_countTimer.set_enabled(true); //为例1的全局组件设置有效性

var tb = $('countInterval').control;

tb.propertyChanged.add(listenToTextBox);//设置countInterval的propertyChanged事件句柄。

}

function countTimerTick() //用于例1每发生tick事件时计算结果(1000 + 10*count)，通过counterLabel元素显示出来

{

var value = parseInt($('counterLabel').control.get_text());

$('counterLabel').control.set_text( value + 10 );

}

function listenToTextBox(sender, eventArgs) //用于例1，当propertyChanged发生，说明g_countTimer的时间间隔要变化，进行重新设置

{

var intervalMultiplier = parseInt($('countInterval').control.get_text());

if (intervalMultiplier > 0)

{

g_countTimer.set_enabled(false);

g_countTimer.set_interval(intervalMultiplier * 1000);

g_countTimer.set_enabled(true);

}

</script>

<components> //创建时间控件，用于例2

</components>

</page>

</script>

</div>

</form>

</body>

</html>

运行component1.aspx看看效果。页面上演示了两个例子，第一个例子是用脚本编程的方式实现的，它是隔一段时间间隔按1000 + 10*count公式进行一次计算，并把计算结果显示到页面上，时间间隔用户可以随时修改。第二个例子是隔250毫秒（即1/4秒）进行一次行添加的过程执行，如果添加到10行就再从头开始添加行。

下一篇文章介绍Atlas控件的另一重要的部分：Atlas的服务器控件。
演示源代码下载

posted on 2006-09-30 16:02 大白鲨阅读(172) 评论(0) 收藏举报

刷新页面返回顶部

大白鲨博客

导航

公告

用VS2005创建一个Atlas Web应用程序(7)