The Hello World Application (Using Scriptlets for Script Code-behind)
--------------------------------------------------------------------------------
第一个sample,我们将构建一个流行的Hello World Script#,和怎样增强它的AJAX特性.
Step1:创建一个新的Script#-enabled Web site
附件:
您所在的用户组无法下载或查看附件Script# 提供一个Web site模版,避免你对于使用不同文件和配置的麻烦.所以你现在就可以开始使用Script#.
这个Web site结构看上去你会看到Script# assemblies 是在Bin\scirpt文件夹里面和相应的debug和release scirpt文件是在App_Script folder文件夹里面.
附件:
您所在的用户组无法下载或查看附件Step2:添加一个HTML创建一个"Hello World" 页面
这个Web site包括一个Default.aspx页面,包括引用<ssfx:Scriptlet>server控件.这个一个控件提供Script#和我们将看到怎样帮助你所提到的两个方面(它提供的是Script#控件而不是依赖Asp.net或asp.net server controls).
在下面的内容中是创建Web site模版中添加的default page提供的用户接口实现Hello World场景.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="
http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Hello World Script# Style</title> </head>
<body>
<form id="form1" runat="server">
<div>
<label>Enter your Name:</label>
<input type="text" id="nameTextBox" />
<button type="button" id=”okButton”>OK</button> <hr />
<label id="greetingLabel"></label>
</div>
</form>
<ssfx:Scriptlet runat="server" ID="scriptlet"> <References>
<ssfx:AssemblyReference Name="sscorlib" /> <ssfx:AssemblyReference Name="ssfx.Core" /> </References>
<Code> using System; using ScriptFX; public class MyScriptlet
{ public static void Main(ScriptletArguments arguments) { } } </Code>
</ssfx:Scriptlet>
</body>
</html>
Step3:添加代码实现"Hello World"场景.
下一步是添加logic到提取文字进入用户的nameTextbox元素中,处理它和产生一个问候语在greetingLabel元素中.
Script#允许你在这里写C#代码,转译成JavaScript.
在下面的切图是在IDE中你选择到design view,选择Scriptlet控件选择后出现的associated task panel.
附件:
您所在的用户组无法下载或查看附件Scriptlet服务控件提供设计时允许你编写C# code-behind,添加script和assembly引用.还有更多的方法就是你可以在客户端应用程序中编写 C#(in much the same way as you would for a regular C# client application ),你只需要选择Scriptlet面版上的 "Edit C# code".下面的切图就是C#代码编辑体验提供Server控件设计器,包括color coding, intellisense, general text ,editor特性还有change tracking, line numbers 等.
附件:
您所在的用户组无法下载或查看附件这是代码需要author添加到Scriptlet 控件内的规则的C#代码.你能看到它是规则的C#代码.
using System;
using System.DHTML;
using ScriptFX; public class MyScriptlet : IDisposable
{
private DOMEventHandler _clickHandler;
private MyScriptlet(ScriptletArguments arguments)
{ _clickHandler = new DOMEventHandler(OnOKButtonClick);
DOMElement okButton = Document.GetElementById("okButton");
okButton.AttachEvent("onclick", _clickHandler); }
public void Dispose()
{
if (_clickHandler != null)
{ DOMElement okButton = Document.GetElementById("okButton");
okButton.DetachEvent("onclick", _clickHandler); _clickHandler = null; }
}
private void OnOKButtonClick()
{
InputElement nameTextBox = (InputElement)Document.GetElementById("nameTextBox"); DOMElement greetingLabel = Document.GetElementById("greetingLabel");
greetingLabel.InnerHTML = "Hello " + nameTextBox.Value + "!";
}
public static void Main(ScriptletArguments arguments)
{
MyScriptlet scriptlet = new MyScriptlet(arguments); }
}
实质上执行最开始是进入你的Scriptlet的Main方法.这个代码创建一个MyScriptlet类的实例.之后是使用DOM查找页面上id为"OKButton"的<button>，它创建的一个委托在button上的Click事件上并且结合在Button上.
这个Click事件找到<input>的id="nameTextBox"和<label>中的id="greetingLabel"之后提取文本给用户.并在页面上显示一个有格式的问候.
MyScriptlet实例实现一个IDisposable interface ,并且执行清除,也就是清除事件和Button的关联.这个是在当页面被unload的时候自动由Script#调用的.
代码这使用的是DHTML DOM绘制.Script#还提供高级抽象,简化UI编程,当DOMAPIs提供充分功能去实现Hello World场景.
Step 4 Run the page
在页面上双击左键，并且在Browser选择View.在browser中的textbox输入你的名字，点OKbutton.在页面上的script应该产生一个适当的Hello 问候语。
实质在运行时，C#代码被编译器逆向设置引用的assemblies和导入namespaces,并对与你的类相应的JavaScript会被产生。还有就是Scriptlet控件还产生一些JavaScript被用来加载与script相应的你所引用的assemblies，并且你的代码是在最开始已经一次加载。
如果你是对代码感觉到奇怪，你能用你的浏览器查看源代码。这儿产生的script如下：
window.main = function main() { Type.createNamespace('Scriptlet'); //////////////////////////////////// // Scriptlet.MyScriptlet
Scriptlet.MyScriptlet = function Scriptlet_MyScriptlet(arguments)
{
this._clickHandler = Delegate.create(this, this._onOKButtonClick);
var okButton = $('okButton');
okButton.attachEvent('onclick', this._clickHandler);
}
Scriptlet.MyScriptlet.main = function Scriptlet_MyScriptlet$main(arguments)
{
var scriptlet = new Scriptlet.MyScriptlet(arguments);
}
Scriptlet.MyScriptlet.prototype = {
_clickHandler: null, dispose: function Scriptlet_MyScriptlet$dispose()
{
if (this._clickHandler)
{ var okButton = $('okButton');
okButton.detachEvent('onclick', this._clickHandler);
this._clickHandler = null;
}
},
_onOKButtonClick: function Scriptlet_MyScriptlet$_onOKButtonClick()
{
var nameTextBox = $('nameTextBox');
var greetingLabel = $('greetingLabel');
greetingLabel.innerHTML = 'Hello ' + nameTextBox.value + '!';
}
}
Scriptlet.MyScriptlet.createClass('Scriptlet.MyScriptlet', null, IDisposable);
ScriptFX.Application.Current.run(Scriptlet.MyScriptlet);
}
ScriptHost.initialize([ 'App_Scripts/ssfx.Core.js' ]);
你注意，这里产生的script代码看上去与C#代码相似，这个是有意图的。
Scriptlet控件允许你改变代码产生设置为产生发布模式（mode）的代码，scirpt的大小被缩为最小。
Scriptlet控件还支持预编译的C#代码。
最后，你能使用Scriplet模型没需要使用Scriptlet server control或者ASP.NET预编译的C#代码，并且使用一些样板文件模版，来模仿Scriplet Server control一步步的产生代码。
Step 5:Debugging the code
确定在你的Scriptlet control 的Enablede bugging设置为true。这个确包产生代码可以调试,并且script引用包括debug 版本。产生debug Script代码看上去几乎如同C#代码，并且包括所有的程序都能识别，方法名等。
被保存后。即使你以后不用这一步设置代码的debug，仍然允许你使用debugging。
debugging in Internet Explorer
打开Visual Studio。运行浏览器，你能选择使用什么浏览器调试，使用Tools | Attach to Process menu(iexplorer.exe )，当你选择了浏览器后，还挑选debugging为Script类型，（instead of Native or Managed ）。
在Visual Studio打开Script Explorer 工具窗口,在Debug|Windows menu.这显示所有执行的Script,你能打开任何Script文件和place Breakpoints.
为在Default.aspx页面上做一个实验, 在Scriptlet_MyScriptlet$_onOKButtonClick函数上添加place the breakpoint。
这个是Button上的事件。
现在Click Button.breakpoint应该会hit，并且你现在能debugger,还能在窗口中看到检测到的变量。
附件:
您所在的用户组无法下载或查看附件注意：你需要确保IE允许debugging.他不能是默认的。打开在Tools | Options menu 下Internet Options diglog接着 打开高级tab。进行如下设置：
- Disable script debugging (Internet Explorer): Unchecked
- Disable script debugging (Other): Unchecked
- Display a notification about every script error: Checked
Debugging in Firefox
你先要得到一个Firebug extension安装在你的Firefox，允许你Firefox浏览器script debugger。
附件:
您所在的用户组无法下载或查看附件-------------------------------------------------------------
好拉现在一个hollo World就OK拉。。接下拉就 做一个AJAX的Hello World页。
Step 6: Implementing an Ajaxian Hello World page
附件:
您所在的用户组无法下载或查看附件Scirpt#的主要目的是允许你开发一个AJAX应用程序。包括重要的Client-side代码统计。还有他们包括应用程序logic使用XMLHttp制造一个HTTP请求服务端。
首先我们将添加一个Web handler(.ashx file)将用来确定请求Client,在Server端创建一个问候语言，和发送结果到Client端。在solution explorer中的Web site right click选择添加New Item,并选取Generic Handler 项目并名为Greeting.ashx 。
里面的代码如下：
<%@ WebHandler Language="C#" Class="Greeting" %>
using System;
using System.Web;
public class Greeting : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string name = context.Request.QueryString["name"];
context.Response.C; context.Response.Write("Hello " + name + "! The current time on the server is " + DateTime.Now);
}
public bool IsReusable
{
get {
http://projects.nikhilk.net Version 0.4.4.0
Script# 101 16
return false; }
}
}
现在有一个HTTP service我们能调用Client端。请求这个服务的方式是Greeting.ashx?name=<text_entered_by_user>。
现在我们需要写一些代码使用XMLHttp产生一些调用，在当OK Button被点下时来使用这个XMLHTTP产生的调用来取代在Client的问候文本。
回到design view and edit the C# code
比硬编码（hard-coding）更好的是URL格式里面的代码，让它通过带一个Argument进入Scriptlet.这将引入Scriptlet control的特性Arguments，并且在C#代码中相应的ScriptletArguments类型。
打开代码编辑窗口，Click在工具箱中的Arguments Button。这将带一个Argument collection 编辑器，在这里你能添加一个字符串是字面上的argument的名字，名叫urlFormat包括被使用的请求URL的格式。
附件:
您所在的用户组无法下载或查看附件当Scriptlet被保存时，argument被添加后如下：
<ssfx:Scriptlet runat="server" ID="scriptlet"> <Arguments>
<ssfx:StringLiteral Name="urlFormat" Value="Greeting.ashx?name={0}">
</ssfx:StringLiteral> </Arguments>
</ssfx:Scriptlet>
这个argument就像一个ScriptletArguments 的成员实例通过你的Scriptlet.实际上，ScriptletArguments 类是动态产生的类，所以还在代码编辑窗口中的intellisense(智能感知)中发现多一个urlFormat这个arguments 实例的成员，如下：
附件:
您所在的用户组无法下载或查看附件代码显示粗体部分需要被添加到MyScriptlet 类。
public class MyScriptlet : IDisposable
{
private string _urlFormat;
private XMLHttpRequest _request;
private MyScriptlet(ScriptletArguments arguments)
{ _urlFormat = arguments.urlFormat; }
public void Dispose()
{ if (_request != null)
{ _request.Onreadystatechange = (Callback)Delegate.Null; _request.Abort(); _request = null; }
}
private void OnOKButtonClick()
{ InputElement nameTextBox = (InputElement)Document.GetElementById("nameTextBox");
_request = new XMLHttpRequest();
_request.Onreadystatechange = this.OnRequestComplete;
_request.Open("GET", String.Format(_urlFormat, nameTextBox.Value.Escape()), /**//* async */ true); _request.Send(null);
}
private void OnRequestComplete()
{
if (_request.ReadyState == 4)
{
_request.Onreadystatechange = (Callback)Delegate.Null; DOMElement greetingLabel = Document.GetElementById("greetingLabel");
greetingLabel.InnerHTML = _request.ResponseText; _request = null;
}
}
}
Script# framework 提供高级HTTPRequest 类简化网络编程。在这里只使用XMLHttp很少的概念。此外，Script# framework提供各种不同的其他APIs和Objects，更好的增加一个script开发者的生产力，并且允许你创建丰富的Web 应用程序。
