介绍
DNN的客户端API给开发者提供一个胖客户端的功能集。本文档只是这些功能集中的概要;不依靠 postbacks,能够提供模块的最大化\最小化处理.
目标
交流并且给出关于创建胖客户端功能集步骤的文档。
为最大化/最小化特点内部运转提供一个更好的理解。
显示/隐藏模块的内容
在支持 DHTML 的浏览器中,显示和隐藏模块内容的工作是相当容易的.,如果要决定是否显示或隐藏内容,只需简单地设置style.display里边的属性为空或不设置style.display的属性.触发最大化(显示)/最小化(隐藏)的事件是通过点击"最大化"和"最小化"的一个图片.最后,模块通过利用该模块一个唯一的cookie来保存模块的状态(即模块内容是显示还是隐藏).
处理单击事件
Visibility.ascx 用户控件负责处理显示/隐藏模块内容.该模块的工作主要是检查cookie的值,来决定显示或隐藏内容,同时正确设置最大化/最小化的图片.
这种增加,通过如下的代码,使得先检查浏览器是否支持DHTML:
If ClientAPI.BrowserSupportsFunctionality(ClientAPI.ClientFunctionality.DHTML) Then
如果返回为true,则继续下一步:
通常设置内容显示为true
因为在客户端我们通常需要显示模块的内容
如果内容不需要显示，设置内容展示的样式为空
注册命名空间为dnn.dom的客户端API
ClientAPI.RegisterClientReference(Page, ClientAPI.ClientNamespaceReferences.dnn_dom)
增加客户端image 单击事件
通过如下的代码设置事件处理
cmdVisibility.Attributes.Add("onclick", "if (__dnn_ModuleMaxMin_OnClick(this, '" & _ pnlModuleContent.ClientID & "')) return false;")
Postback代码运行前，这将导致事件的执行。如果返回false，则Postback不再执行，如果max/min正确执行了，我们不再需要返回一个Postback执行，这正是我们想要的答案。相反，如果没有成功执行，则求助于可信赖的postback事件处理。
设置一个代表模块id的button自定义属性，即cookie值
因为客户端负责设置维护模块内容为显示/隐藏状态的cookie。我们需要知道模块的id以正确设置关于模块的cookie。
记录2个关于显示/隐藏图片位置的客户端变量
一个模块可以包括一系列最大化/最小化按纽的图片。因为客户端负责我们所需要的图片的转换，通过方法ClientAPI.RegisterClientVariable这些信息被传递到客户端，在客户端，取得这些变量的值是通过dnn.getVar方法。
用户登陆回车事件
在新的版本中，修改了用户登陆模块。当用户按“回车”时，最大化/最小化按牛将显示。最大化/最小化按纽接受登陆时间。因为最大化/最小化按纽是ImageButton，其HTML表现形式为<INPUT TYPE=”image”.通过HTML说明，这些元素和submit按纽执行同样的操作。因此，可以从回车键中接受动作行为。我的工作就是围绕将
Visibility按纽从ImageButtons转化为一个图片与LinkButton的组合展开的。
Introduction
Utilizing the DotNetNuke Client API enables the developer to offer a rich client-side feature-set. This document outlines one of those feature-sets; providing the ability to maximize and minimize modules without using postbacks.
Goals
Communicate and document the steps involved in creating rich client-side feature-set.
Provide a better understanding of the inner-workings of the Max/Min feature-set.
Showing and Hiding Module Content
The task of showing and hiding content in a browser that supports DHTML is rather simple. Simply get a reference to the element and access its style.display property and set it to none or empty-string depending on whether you wish to show or hide the element. The event that triggers this action is clicking on an image with a plus to maximize (show) content and clicking on a minus image to minimize (hide) the content. Finally, the way the module remembers its state (whether it was maximized or minimized) is by using a cookie unique to the module.
Handing the Click Event
The functionality behind the showing and hiding of modules is found in the Visibility.ascx UserControl. The control’s job was to check for a cookie to determine if it should show or hide content and set the appropriate image (plus/minus, or custom). Additionally, it set the visibility of the content.
This enhancement first performs a check to see if the browser supports basic DHTML by the following code.
If ClientAPI.BrowserSupportsFunctionality(ClientAPI.ClientFunctionality.DHTML) Then
If this returns True then we do the following
Always set the content visibility to True
Since the content needs to be available on the client side we always need it to be rendered.
When content is supposed to be hidden set the content’s display style to none
Register the Client API for the dnn.dom namespace
ClientAPI.RegisterClientReference(Page, ClientAPI.ClientNamespaceReferences.dnn_dom)
Add a client-side onclick handler to the image
Setting an event handler via code like this
cmdVisibility.Attributes.Add("onclick", "if (__dnn_ModuleMaxMin_OnClick(this, '" & _ pnlModuleContent.ClientID & "')) return false;")
This will cause this event to fire before the postback code is run. If we return false, then the postback code will never run. This is exactly what we want, if the max/min script succeeds we do not want a postback to occur, however, if it fails we will fall back on the reliable postback handling.
Set a custom attribute on the button to denote the module id
Since the client-side will be responsible for setting the cookie to maintain the module’s max/min state, we need to know the module’s id in order to set the correct cookie.
Register 2 client-side variables for the max and min image locations
A module can have a custom set of images assigned to its max and min button. Since the client is responsible for switching the image when clicked we need to know what image to use. This information is passed down to the client by using the ClientAPI.RegisterClientVariable method. On the client-side it is retrieved with the dnn.getVar method.
Fixing the Enter Key for Account Login
This enhancement also fixed the issue we were having for the Account Login module. When the user pressed the enter key and the max/min button was shown, the max/min button would receive the action instead of the login button. This is because the Max/Min button used to be of type ImageButton, which would render the HTML <INPUT TYPE=”image”. According to the HTML spec, this element acts in the same way as a submit button. Thus, it would receive the action for the Enter key. I have worked around this issue by converting the Visibility buttons from ImageButtons to a combination of an Image and a LinkButton.
