[计算机软件及应用]AJAX控件介绍

1、.1. Accordion 【功能概述】Accordion可以让你设计多个panel 并且一次只显示一个Panel .在页面上的显示效果就像是使用了多个CollapsiblePanels只不过每一次只展开其中一个CollapsiblePanel.Accordion控件内部包含了若干个AccordionPane，每一个AccordionPane的template里包括了对其Header和Content的定义。我们可以在后台代码中通过SelectedIndex属性取得当前展开的哪一个Panel，还可以控制哪一个Panel展开。 经常可以见到类似的效果，比如QQ、Msn好友分类的折叠效果。 【细节】

2、 现在我们简单介绍一下面用到的Accordion的要用到的几个重要属性：            SelectedIndex=“0”   /刚进页面显示第一个AccordionPane中的内容          AutoSize="Limit"   /AutoSize选择Limit表示超出宽度和长度显示流动条  

3、;        Width="450px"   宽度          Height="350px"  高度          ContentCssClass="accordionContent"  /内容样式   &

4、#160;      HeaderCssClass="accordionHeader"     /头部样式                FadeTransitions="true"            &#

5、160; /true表示使用淡入效果          TransitionDuration="250"         /淡入时间（单位毫秒）          FramesPerSecond="40"        

6、      /每秒帧数下面是实现具体过程：  首先是样式：（注：accordionHeader是头部样式，accordionContent是内容样式， cursor: pointer;表示的是当鼠标移动到该位置时变成手形， (1)不要把Accordion放在Table中而又把 FadeTransitions 设置为True，这将引起布局混乱 (2) 在AccordionPane模板中的Content中可以定义任何Web元素，表现的就像一个容器 (3) AccordionPane内容模板自动改变大小有三种AutoSize modes ：

7、None(推荐) Limit Fill (4) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender')这里找到的是Behavior.什么是Behavior呢？在A Ajax框架中包含一组动作并完成一个功能. Accordion的一个Behavior就是淡入淡出. 找到Behavior的引用，behavior.set_FadeTransitions() behavior.get_FadeTransitions()的方式来实现具体某一个Behavior的访问和修改. var behavior = $find(

8、'ctl00_SampleContent_MyAccordion_AccordionExtender');这种写法是不好的，我们在自动测试的页面中发现了更好的写法： var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender"); 【代码示意】 <script language="javascript" type="text/javascript"> function toggleFade()    va

9、r behavior = $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender');    if (behavior)         behavior.set_FadeTransitions(!behavior.get_FadeTransitions();     function changeAutoSize()    var behavior = $find('ct

10、l00_ContentPlaceHolder1_MyAccordion_AccordionExtender');    var ctrl = $get('autosize'); /这里找的是下拉列表控件,不是Behavior    if (behavior)        var size = 'None' / 这里顺便看看怎么使用Select      switch (ctrl.selectedIndex)

11、60;     case 0 :        behavior.get_element().style.height = 'auto'        size = AjaxControlToolkit.AutoSize.None;        break;       case 1 :   

12、;     behavior.get_element().style.height = '400px'        size = AjaxControlToolkit.AutoSize.Fill;        break;       case 2 :        behavior.get_element(

13、).style.height = '400px'        size = AjaxControlToolkit.AutoSize.Limit;        break;         behavior.set_AutoSize(size);       if (document.focus)      &

14、#160; document.focus();     </script> <ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSeco

15、nd="40" TransitionDuration="250" AutoSize="None"> <Panes> <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server"> <Header> <a href="" onclick="return false;" class="accordionLink">1. Acc

16、ordion</a></Header> <Content> </Content> </ajaxToolkit:AccordionPane> </Panes> </ajaxToolkit:Accordion> 2. AlwaysVisibleControl 【功能概述】 AlwaysVisibleControl 是一个简单的扩展控件可以让一部分内容浮动在页面上，当滚动页面或者改变浏览器大小时总是可见的。它可以扩展任意一个A 控件，并可按照要求设置水平 竖直方向上的相对距离. 最多的应用是在线阅读的目录和不胜其烦的

17、浮动小广告。 【细节】 AlwaysVisibleControl 控件属性将被初始化如下面的示例代码所示，斜体属性为可选属性 <ajaxToolkit:AlwaysVisibleControlExtender ID="ace" runat="server" TargetControlID="timer" VerticalSide="Top" VerticalOffset="10" HorizontalSide="Right" HorizontalOffset="

18、;10" ScrollEffectDuration=".1"/>· TargetControlID - 需要保持“悬浮”的控件 ID · HorizontalOffset - 保持“悬浮”水平的位置，用像素（px）表示，它将和下面的 HorizontalSide 属性相结合，所“悬浮”位置的像素距离表示到 HorizontalSide 的距离，默认值为 0 px · HorizontalSide - 和上面的 HorizontalOffset 属性结合控制“悬浮”水平位置的属性，它可以是 Left、Center 或者 Right

19、；默认值是 Left · VerticalOffset - 保持“悬浮”垂直的位置，用像素（px）表示，它将和下面的 VerticalSide 属性相结合，所“悬浮”位置的像素距离表示到 VerticalSide 的距离，默认值为 0 px · VerticalSide - 和上面的 VerticalOffset 属性结合控制“悬浮”垂直位置的属性，它可以是 Top、Middle 或者 Bottom；默认值是 Top · ScrollEffectDuration: “悬浮”控件复位时间默认时间是0.1单位是秒(1) 避免控件闪烁，要扩展的控件要使用absolute

20、ly position (2) HorizontalSide="Center" VerticalSide="Top" 使用这个方式控制浮动的位置 (3) Var label = document.getElementById('ctl00_SampleContent_currentTime');这行代 码我们可以     使用更简单的方法：var label = $get('ctl00_SampleContent_currentTime'); 【代码示意】 <cc1:Alway

21、sVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top" TargetControlID="Panel1" runat="server"> 3. Animation 【功能概述】 28个控件种效果最酷的！顾名思义实现动画效果。它是一个插入式，可扩展的框架可以方便的为你的页面添加动画效果。 【细节】 请参考页面代码阅读下面的细节内容: (1)Sys

22、.UI.DomElement.getLocation(b) 取得控件位置的函数，常用！ (2)动画分为两种：Animation Action 后者的强大让我很兴奋 (3)<Sequence> </Sequence> 顺序执行的动画脚本 (4)<Parallel> <Parallel > 并发执行的动画脚本 (5)【Action】 <StyleAction AnimationTarget="btnCloseParent" Attribute="opacity" value="0" /

23、> 控制目标元素外观样式，属性-值的格式修改，一个元素可以应用多个StyleAction (6)【Action】<EnableAction AnimationTarget="ctl00_ContentPlaceHolder1_btnInfo" Enabled="true" /> 控件是否可用使用的方式跟上面是一样的，当前控件可省略AnimationTarget (7)【Action】 <ScriptAction Script="Cover($get('ctl00_ContentPlaceHolder1_btnIn

24、fo'), $get('flyout');" />执行一段脚本的Action (8)【Action】 <HideAction />隐藏目标的控件 (9)【Action】<OpacityAction AnimationTarget="info" Opacity="0" /> 设置透明度的Action (10)【Animation】 <FadeIn AnimationTarget="info" Duration=".2"/> <FadeO

25、ut /> 淡入淡出 (11)【Animation】<Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" /> 控制目标元素的大小但是注意：If scaleFont is true, the size of the font will also scale with the element. If center is true, then the element's center will not mo

26、ve as it is scaled. It is important to note that the target must be positioned (i.e. absolutely) so that settings its top/left properties will change its location in order for center to have an effect. (12)【Animation】 <Pulse Duration=".1" /> 脉搏跳动效果 (13)【Animation】 <Color Duration=

27、".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" /> 颜色渐变效果，设置起始结束颜色就可以 (14)【Animation】 <Resize Width="260" Height="280" />改变元素的大小Action (15)动画效果是在用户某一个动作发生的时候触发，触发的时机包括：OnLoad OnClick OnMo

28、useOver OnMouseOut OnHoverOver OnHoverOut 正式版的页面文件为动画脚本添加了注释更加清晰易懂.上面列出的是常用的一些动画效果，全部资料参见Anmation Reference。 仔细阅读Animation的页面代码，其实我们已经提前触摸到了Xaml的编程风格。A Ajax之后的下一代WEB界面是WPF/E,WPF/E现在支持的是”javascript+Xaml” 还不支持”C# + Xaml”。 下一代的WEB UI会是怎样的？下一个版本的A 会怎样安排Ajax的位置？WPF/E会不会被整合在新版本的A中呢？期待中 【示意代码】 代码示意： <aj

29、axToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="ctrl"> <Animations> <OnLoad> </OnLoad> <OnClick> </OnClick> <OnMouseOver> </OnMouseOver> <OnMouseOut> </OnMouseOut> <OnHoverOver> </OnHo

30、verOver> <OnHoverOut> </OnHoverOut> </Animations> </ajaxToolkit:AnimationExtender> 4. AutoComplete 【功能概述】 AutoComplete控件是对A文本框控件的扩展，当用户词汇前面的字母时以弹出区域的形式给出备选词。这个功能的完成依赖于特定的Web Service。 Google的自动完成功能，新浪 网易等信箱的收件人自动完成功能是这个功能的成功应用。 【细节】 重要属性  1.TargetControlID:指定要实现提示功能的控件

31、；  2.ServicePath:WebService的路径，提取数据的方法是写在一个WebService中的；  3.ServeiceMethod:写在WebService中的用于提取数据的方法的名字；  4.MinimumPrefixLength:用来设置用户输入多少字母才出现提示效果；  5.CompletionSetCount:设置提示数据的行数；6.CompletionInterval:从服务器获取书的时间间隔，单位是毫秒从Atlas的版本开始，AutoComplete的使用方法就没有太大的改变，只要注意： (1)调用的Web Service方

32、法签名有要求： WebMethod public string GetCompletionList(string prefixText, int count) .   需要在客户端调用Web服务，还需要添加如下代码：System.Web.Script.Services.ScriptService(2)在网站的根目录下添加一个Web服务，命名为WebService1，系统自动将Web服务两个部分，设计部分WebService1.asmx和代码部分WebService1.cs，其中WebService1.cs文件自动放入到App_Code目录下。打开WebService1.cs文件，添加

33、获取数据的方法GetCompleteList,代码如下：5. Calendar 【功能概述】 Calendar同样是对文本框的扩展，当点击文本框的时候弹出日期选择选项。现在的版本提供的功能已经和WinForm中的日期控件一样，可以通过点击日期选择，点击箭头在年月之间切换。 重要属性  TargetControlID：用来显示选择日期的控件，改控件必需为TextBox  CssClass：设置日历的样式  Format：显示日期的格式，如yyMMdd,会显示071105  PopupButtonID：当日期是通过选定某个按钮弹出的时候，为改按钮的ID，一般

34、为一个日历图片【细节】 (1)同样是对文本框的扩展，文本框获得焦点就会出现日期选择，样式是可以自定义的 (2)虽然一定是对文本框的扩展但是我们还是可以指定弹出按钮PopupButtonID，一旦这个值设定了，文本框获得焦点也不会弹出日期选择 (3)不需要把它放在UpdatePanel中 注：属性Format用来控制日期显示的格式，但要注意代表月的M一定要大写，如：yyyyMMdd，yyyy/M/d,yyyy年MM月dd日  CssClass说明：  .ajax_calendar_container:日历控件的整体内容部分  .ajax_calendar_foote

35、r:日历控件的页脚部分  .ajax_calendar_header:日历控件的页眉部分  .ajax_calendar_activa .ajax_calendar_day:选中日期时的样式，一般选择过的日期会以另一种颜色显示。  .ajax_calendar_hover .ajax_calendar_day:鼠标划过日期时的样式，一般改变悬停在的日期的前景色和背景色。  .ajax_calendar_other .ajax_calendar_day:非本月日期的样式名6. CascadingDropDown 【功能概述】

36、CascadingDropDown 控件是对ASP.NET DropDownList control的扩展，实现对一个DropDownList操作时其它DropDownList发生相应的变化。这个功能的实现依赖于Web Service。 CascadingDropDown控件用于级连下拉列表的选择，当没有选择第一级下接列表时，第二级是不可选的（从服务器获得数据然后再显示数据）。属性列表：TargetControlID:对应的下拉框表控件的IDCategory:当前下拉列表的类型PromptText:当下拉列表中无数据或没有选择数据时给用户的提示LoadingText:加载下拉列表数据时的提示S

37、ervicePath:下拉列表获取数据所要的WEB服务路径ServiceMethod:WEB服务方法ParentControlID:控制此下拉列表控件的父级控件SelectedValue:默认的选择值常见问题和使用技巧常见问题：在中了联动下拉列表组之后，页面的回送会引发服务器端掷出“Invalid postback or callback argument”的异常，服务器端也无法取得每个下拉框表中的条目？使用技巧：我们可以在web.config中加入<pages enableEventValidation="true" />或者在当前页面注册<% Page

38、 Language="C#" EnableEventValidation="false" %>这样会导至应该程序的安全性。常见问题：如何设置联动下拉列表组中被选中的项目？使用技巧：DropDownList1.SelectedValue="China"或者：<ajaxToolkit:CascadingDropDown ID="ccdCity" TargetControlID="ddlCity" Category="City" PromptText="请选择

39、城市" LoadingText="城市加载中." ServicePath="CityService.asmx" ServiceMethod="GetCitiesForProvince" ParentControlID="ddlProvince" runat="server" SelectedValue="beijing" />【细节】 (1)如果使用Web service 方法签名必须符合下面的形式： WebMethod public CascadingDro

40、pDownNameValue GetDropDownContents( string knownCategoryValues, string category). (2)在阅读代码的时候请关注：Category属性。官方说法The name of the category this DropDownList represents 实打开/App_Data/CarsService.xml你就发现这是Xml的元素标签。从这个角度我们就解决了为什么联动，即联动的本质；同时也明白了调用Service的参数约定。 【示意代码】 <ajaxToolkit:CascadingDropDown ID=&

41、quot;CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Make" PromptText="Please select a make" LoadingText="Loading makes " ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"/> &l

42、t;ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2" Category="Model" PromptText="Please select a model" LoadingText="Loading models " ServiceMethod="GetDropDownContentsPageMethod"

43、 ParentControlID="DropDownList1"/> <ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3" Category="Color" PromptText="Please select a color" LoadingText="Loading colors " Servi

44、cePath="/CascadingDropDown/CarsService.asmx" ServiceMethod="GetDropDownContents" ParentControlID="DropDownList2"/> 另外页面上还有一段定义UpdatePanel的代码很典型，可以作为参考： <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderM

45、ode="inline"> <ContentTemplate> <asp:Label ID="Label1" runat="server" Text="No response provided yet" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChan

46、ged" /> </Triggers> </asp:UpdatePanel> 7. CollapsiblePanel 【功能概述】 这个控件几乎在每一个页面上都出现了。它是非常灵活的一个控件，可以扩展任何ASP.NET Panel control。在页面上轻松实现展开收缩效果。这种效果我们最熟悉的恐怕就是XP的文件任务栏了。 【细节】 (1) CollapsiblePanel 默认认为使用了 标准 CSS box model 早期的浏览器要!DOCTYPE 中设置页面为自适应方式提交数据rendered in IE's standards-com

47、pliant mode. (2) 可以自动展开 自动收缩Autoexpand="true" AutoCollapse="true"但是这两个本身是互斥的不能同时为True;如果设置了这两个属性其中一个为True就不要在设置 Collapsed="True"，这样就没有意义了。 (3) TextLabelID="Label1"这个属性有什么深意高级的操作么？我还在研究。 代码示意： <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat=&q

48、uot;Server" TargetControlID="Panel1" CollapsedSize="0" ExpandedSize="300" Collapsed="True" ExpandControlID="LinkButton1" CollapseControlID="LinkButton1" AutoCollapse="False" AutoExpand="False" ScrollContents="T

49、rue" TextLabelID="Label1" CollapsedText="Show Details " OpenedText="Hide Details" ImageControlID="Image1" ExpandedImage="/images/collapse.jpg" CollapsedImage="/images/expand.jpg" ExpandDirection="Height"/> 8. ConfirmButton

50、 【功能概述】 这个控件是对Button和继承了Button的控件的扩展，它可以捕捉到用户点击了对话框中的“是”“否”；如果是“是”就继续执行后面的代码，反之就停止执行它默认的提交行为。 【细节】 (1) 要扩展的LinkButton Button 以及ConfirmButtonExtender都要放在updatepanel里面 如果是放在外面，点击“确定”或者“取消”之后还是会导致页面刷新！ (2)更简单的方法： this.Button1.Attributes"onclick"="javascript:return confirm('确定要停止下载么？&

51、#39;);" (3) 如果是需要服务器端获取用户选择，还是使用模式弹出吧 9.DragPanel 【功能概述】 DragPanel extender可以轻松的让控件 "draggability".DragPanel 扩展的目标是任意 ASP.NET Panel .你可以设置拖动行为的细节，比如哪里是类似于标题栏一样的区域。 【细节】 (1) TargetControlID 要拖动的控件 (2) DragHandleID 拖动的标题栏所在的ControlID 示例代码中： panel6包含panel7（标题） panel8（内容）扩展的对象是panel6 (3)

52、是不是发现这段JS代码了呢？如果去掉这段代码，图到页面边缘的时候是不正常的，它自己跑回原来位置了 :) <script type="text/javascript"> / The following snippet works around a problem where FloatingBehavior / doesn't allow drops outside the "content area" of the page - where "content / area" is a little unusual

53、for our sample web pages due to their use of CSS / for layout. function setBodyHeightToContentHeight() document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px" setBodyHeightToContentHeight(); $addHandler(window, "resize", setBo

54、dyHeightToContentHeight); </script> 【示意代码】 代码示意 <ajaxToolkit:DragPanelExtender ID="DPE1" runat="server" TargetControlID="Panel3" DragHandleID="Panel4" /> 10. DropDown 【功能概述】 DropDown 同样是一个 ASP.NET AJAX extender 可以对任何 ASP.NET control 进行扩展实现 SharePoi

55、nt-style drop-down menu效果。弹出的只不过是其它的panel或者控件而已。 在IE浏览器中下拉列表总是在最前面的，的确是影响页面效果，这个控件的出现可以解决这一问题.这随时随地的弹出窗口成为WEB 2.0网站的标志性建筑，弹出的东西也越来越丰富。 【细节】 (1)TargetControlID要在什么控件上实现扩展 (2)DropDownControlID弹出来什么 (3) 示例中是对一个Label进行的扩展，我试着扩展TextBox效果更好！ 【示意代码】 代码示意： <asp:Panel ID="DropPanel" runat="

56、server" CssClass="ContextMenuPanel" Style="display: none; visibility: hidden;"> <asp:LinkButton runat="server" ID="Option1" Text="Option 1" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat=&q

57、uot;server" ID="Option2" Text="Option 2" CssClass="ContextMenuItem" OnClick="OnSelect" /> <asp:LinkButton runat="server" ID="Option3" Text="Option 3 (Click Me!)" CssClass="ContextMenuItem" OnClick="OnSele

58、ct" /> </asp:Panel> <cc1:DropDownExtender runat="server" ID="DDE" TargetControlID="TextLabel" DropDownControlID="DropPanel" /> 还有一段代码有很多可以学习的地方： 代码示意： <asp:UpdatePanel id="Update" runat="server"> <ContentTemplat

59、e> <asp:Label id="lblSelection" runat="server" Style="padding: 5px;" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Option1" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="Option2&q

60、uot; EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="Option3" EventName="Click" /> </Triggers> </asp:UpdatePanel> <ajaxToolkit:UpdatePanelAnimationExtender ID="UpdateAnimation" runat="server" TargetControlID="Up

61、date" BehaviorID="Highlight"> <Animations> <OnUpdated> <Sequence> <ScriptAction Script="$find('Highlight')._onUpdated._animation._animations1.set_target($get('ctl00_ContentPlaceHolder1_lblSelection');" /> <Color Duration=".5

62、" StartValue="#FFFF90" EndValue="#FFFFFF" Property="style" PropertyKey="backgroundColor" /> </Sequence> </OnUpdated> </Animations> </ajaxToolkit:UpdatePanelAnimationExtender> 11. DropShadow 【功能概述】 阴影效果 【 细节】 (1) Width 单位：px 默认5p

63、x (2) Opacity 不透明度0-1.0 默认.5 【示意代码】 代码示意： <ajaxToolkit:DropShadowExtender ID="dse" runat="server" TargetControlID="Panel1" Opacity=".8" Rounded="true" TrackPosition="true" /> 12. DynamicPopulate 【功能概述】 能实用Web Service或页面方法来动态的替换控件的内容。调

64、用的方法返回的是一个Html的字符串，作为目标元素的子节点插入其中。 【 细节】 (1)ClearContentsDuringUpdate 替换之前先清除以前的内容（默认True） (2)PopulateTriggerControlID 触发器绑定的控件 单击时触发 (3)ContextKey传递给Web Service的随机字符串 (4) Web Service方法签名必须符合下面的形式： WebMethod string DynamicPopulateMethod(string contextKey) . Note you can replace "DynamicPopulate

65、Method" with a naming of your choice, but the return type and parameter name and type must exactly match, including case. (5) 我们非常欣慰的一点就是BehaviorID="dp1",这种用法是我所期望的。 (6) CustomScript 怎么用呢？This script must evaluate to a string value. ? 【示意代码】 代码示意： <ajaxToolkit:DynamicPopulateExtend

66、er ID="dp" runat="server" TargetControlID="Panel1" ClearContentsDuringUpdate="true" PopulateTriggerControlID="Label1" ServiceMethod="GetHtml" UpdatingCssClass="dynamicPopulate_Updating" /> 代码示意2： <asp:Panel ID="Panel1&q

67、uot; runat="server" CssClass="dynamicPopulate_Normal"> </asp:Panel> /要扩展的panel <ajaxToolkit:DynamicPopulateExtender ID="dp" BehaviorID="dp1" runat="server" ClearContentsDuringUpdate="true" PopulateTriggerControlID="Label1&q

68、uot; TargetControlID="Panel1" ServiceMethod="GetHtml" pdatingCssClass="dynamicPopulate_Updating"> </ajaxToolkit:DynamicPopulateExtender> <script runat="server"> System.Web.Services.WebMethod System.Web.Script.Services.ScriptMethod public static

69、string GetHtml(string contextKey) / a little pause to mimic a latent call. System.Threading.Thread.Sleep(250); string value = "" if (contextKey = "U") value = DateTime.UtcNow.ToString(); else value = String.Format("0:" + contextKey + "", DateTime.Now); return

70、String.Format("<span style='font-family:courier new;font-weight:bold;'>0</span>", value); </script> <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <script type="text/javascript"> function updateDateKey(value) var behavior = $find('dp1'); /这样使用BehaviorID可是方便多了 if (behavior) behavior.populate(value);/ 内部实现调用了Service Sys.Application.add_load(function() updateDateKey('G