用Altas Behaviors实现就地编辑(1) [译]

    --原文请见nikhilk.net的blog http://www.nikhilk.net/AtlasInPlaceEditSample.aspx

---

   文中用到术语对照[有什么不妥,请多指教]:
    就地编辑:Inplace Editing
    属性扩展组件：Extender Control

---

    引子:本系列文章说明了使用定制Altas Script组件和属性扩展者(Extender Control)实现就地编辑,类似于用Ajax的方式实现的Label控件在获得焦点时变为TextBox控件用来输入...

 

    今天早上,我看到了一封邮件,询问关于如何使用Altas框架实现就地编辑的Label控件.这促使我完成正在计划中的一件事情:写作并发布一个Altas组件。我写了一个Behavior形式脚本组件封装了这个功能，实现了一个属性扩展组件，这个组件在服务器端使用是非常容易地。进行这些工作耗费了我一个小时的时间。本文描述如何使用这个功能组件，并说明使用Altas开发是多么的容易，特别是Altas的工具箱组件发展的更加成熟了，这使得扩展它以应用到更多地方也变得更加容易。
    下面是页面中的示例标记，演示组件的使用：

<atlas:ScriptManager runat="server">
  <Scripts>
    <atlas:ScriptReference Path="InPlaceEdit.js" />
  </Scripts>
</atlas:ScriptManager>

<asp:TextBox runat="server" id="nameTextBox" Text="Enter your name" />
<asp:TextBox runat="server" id="emailTextBox" Text="Enter your email address" />
<asp:TextBox runat="server" id="commentsTextBox Text="Comments go here"
  TextMode="MultiLine" Rows="5" Columns="80" />

<nk:InPlaceEditExtender runat="server" id="ipe1"
  LabelCssClass="inPlaceEditLabel" LabelHoverCssClass="inPlaceEditLabelHover">
  <nk:InPlaceEditProperties TargetControlID="nameTextBox" Enabled="true" />
  <nk:InPlaceEditProperties TargetControlID="emailTextBox" Enabled="true" />
  <nk:InPlaceEditProperties TargetControlID="commentsTextBox" Enabled="true" />
</nk:InPlaceEditExtender>

    怎么样，就是这么简单！请注意一点，同一个属性扩展组件可以用来扩展多个TextBox控件。这样就避免了很多的属性扩展控件在你的页面中造成混乱。在设计试图中每一个Textbox控件现在多了一个“InPlaceEditing”的属性，通过该属性可以指定是否使用就地编辑。
    客户端的实现
    在客户端实现中，假定你使用静态的HTML，使用标准的<input>和<textarea>标记。你可能将会使用必要的但是繁琐脚本来处理事件联动这些控件，但是XML脚本使得这些容易地多，并且可读性更好。请看下面的例子：

<input type="text" id="nameTextBox" value="Enter your name" />
<input type="text" id="emailTextBox" value="Enter your email address" />
<textarea id="commentsTextBox" rows="5" cols="80">
Comments go here
</textarea>
<script type="text/javascript" src="/ScriptLibrary/Atlas/Release/Atlas.js" />
<script type="text/xml-script">
  <page xmlns="http://schemas.microsoft.com/xml-script/2005" xmlns:nk="nk">
    <references>
      <add src="InPlaceEdit.js" />
    </references>
    <components>
      <textBox id="nameTextBox">
        <behaviors>
          <nk:inPlaceEdit    labelCssClass="inPlaceEditLabel" labelHoverCssClass="inPlaceEditLabelHover" />
        </behaviors>
      </textBox>
      <textBox id="emailTextBox">
        <behaviors>
          <nk:inPlaceEdit    labelCssClass="inPlaceEditLabel" labelHoverCssClass="inPlaceEditLabelHover" />
        </behaviors>
      </textBox>
      <textBox id="commentsTextBox">
        <behaviors>
          <nk:inPlaceEdit    labelCssClass="inPlaceEditLabel" labelHoverCssClass="inPlaceEditLabelHover" />
        </behaviors>
      </textBox>
    </components>
  </page>
</script>

    如你所见，页面中没有杂乱的事件处理代码或者初始化以及Hookup的逻辑。理想状态是XML脚本最终可以使用工具进行设计，而不是象我所作的那样手工来写代码！我喜欢这种把代码封装起来的能力，这样使页面上全部是声明式的代码，Altas使我能够这样作，即使实在客户端！
    这段脚本通过应用导入了一个脚本文件，为每一个Input/TextArea标记声明了一个TextBox控件，并且在每个TextBox的Behaviors集合中添加了我的InPlaceEditBehavior类的实例。Altas框架和这个Behavior协同工作实现事件的侦听和处理。你可以在此下载这个behavior的实现代码和属性扩展组件以及几个示例页面的代码。然后在本地编译运行（当然需要Altas的支持）。下面关于功能实现的描述可能会有用：

1. TextBox控件将被动态的替换成Label控件。文本内容也将复制过去。
2. 通过设置LabelCssClass属性，Label控件可以应用CSS样式，另外通过设置LabelHoverCssClass属性，当用户鼠标移动到上面的时候还可以显示不同的样式！
3. 当你用鼠标点击后者用键盘切换焦点到Label上面，Label自动隐藏起来，替换成TextBox控件。注意：在Firefox中Label控件没有focus事件，所以用户必须用鼠标点击Label！
4. 当焦点切换走后，TextBox再次被Label控件替换。
5. 按下Esc键放弃编辑内容（这是标准的HTML行为）。
6. 该Behavior集成了Altas的验证功能，所以如果如果输入有问题，当你把焦点移走之后，将会保持TextBox状态，而不会变回Label。

    你可能注意到了，页面中确实包含一个<input>标记，尽管实际上TextBox控件只出现很短暂的时间。因此，“就地编辑”这个词语可能并不准确，但是我仍然使用了这个名称，因为人们习惯如此。我按照这个路线实现有下面几个原因：

1. 首先，如果没有脚本运行支持，元素将保留并起作用。
2. 其次，开发者会喜欢TextBox存在以便进行定制和添加验证。所以扩展一个<asp:TextBox>标记可能试用更广泛。
3. 最后，<input>标记存在于Form中，所以当表单提交时，他们的值会随之提交回服务器。

    说实话，开始做得时候我没有想过这些理由，这些都是为我所作的工作辩护的:)，我实现这个知识为了演示一下试用Altas开发组件。我将在后续的文章中继续讲解怎样使用C#和JavaScript实现这个功能。下面这个Flash演示了一个Demo页面。