/******************************************************************************************************/
//
//translate by zcg
//Position: infohold beijing
//Dirctions
//Creating ArcGIS Server solutions
//Developing Applications
//Web controls
//FloatingPanel controls
//这一节我们主要讲解Floating Panel 控件的使用方法。
/******************************************************************************************************/
The FloatingPanel control allows the user to move the floating panel and its contents dynamically around the page. This control may be used with any content, including standard ASP.NET controls. The user may resize a floating panel, though this does not automatically modify the layout of the panel's contents. Note that some Web ADF controls already have a floating behavior and thus do not need to be embedded in a FloatingPanel. These include Navigation, Magnifier, and all task controls provided with the Web ADF.
FloatingPanel 控件允许用户移FloatingPanel控件并且FloatingPanel 控件内部的内容可以异步更新。 这个控件可以其他的任何控件一起使用，包括：标准的ASP.NET控件。 用户可能会重新设置FloatingPanel 控件的大小，但是FloatingPanel 控件不会自动的重新定义FloatingPanel 控件的内容的布局。 既然一些Web ADF 控件已经拥有来浮动的行为因此这些控件不需要嵌入到FloatingPanel 控件里面。 这个包括Navigation控件，Magnifier 控件，以及所有的和web adf 一起的任务控件。
Assembly: ESRI.ArcGIS.ADF.Web.UI.WebControls.dll
Class: ESRI.ArcGIS.ADF.Web.UI.WebControls.FloatingPanel
Using the FloatingPanel control
Add the controls to the page
Open or create a Web site within Visual Studio.NET. Open a Web form in design mode, select the Toolbox and expand the ArcGIS Web Controls tab. Drag and drop a FloatingPanel control onto the Web form. Resize the FloatingPanel control to be larger.
在Visual Studio.NET环境下创建一个新站点或者打开一个已经存在的站点。在设计视图模式下打开web 站点，选择工具箱并展开ArcGIS Web 控件页签。 拖放一个FloatingPanel 控件到web页面，重新设置FloatingPanel 的大小使其大些。
You can add any controls or content inside the floating panel. Here, you'll add some text and a control. Click inside the FloatingPanel and add the text "This is a floating panel with a map". Then drag a Map control inside the FloatingPanel, just after the text. Resize the Map to fill the FloatingPanel.
你可以向那个FloatingPanel控件里面添加任何一个控件或者内容。在这里，我们添加一些文本和一个控件。在FloatingPanel 控件里面单击并添加下面的文本：“this is a floating panet with a map ”.然后托摘一个map控件到FloatingPanel 控件，就放在文本的后面。调整map控件的大小使其填充FloatingPanel。 Next, add a MapResourceManager control, which does not need to be inside the FloatingPanel. Add at least one resource to the MapResourceManager control, and set the MapResourceManager property of the Map control to the MapResourceManager you just added.
然后添加一个mapResoureManager控件，mapResourceManager控件是没有必要放置在FloatingPanel 控件里面的。 向MapResourceManager 控件里面里面至少添加一个资源并且设置map control控件的MapResourceManager属性为你刚刚添加的控件。
This produces the following in Visual Studio.NET。
在.NET下面如下图所示：
When this page display, the user can move, collapse/expand, and resize the floating panel. Note that controls within the floating panel do not resize when the user resizes the floating panel.
在上面的页面状态下，用户可以移动，收缩，展开，和重定义floating panel控件的大小。 需要注意的是：floating panel控件内部的控件的大小并不随着floating panel 控件大小的改变而改变。
Set FloatingPanel properties
The FloatingPanel control functions without explicitly setting any of its properties. See the Properties section below for options in the properties of the control.
FloatingPanel控件的功能没有明确的设置她的任何属性，在下面的属性部分查看控件属性的选项。
Members
Properties
The following tables provide a list of properties and events of interest. For complete reference information, see the FloatingPanel control in the library reference section.
|
Property Name |
Type |
Description |
|
AutoHide |
bool |
If true, the title bar and frame of the floating panel are hidden until the user hovers over the floating panel. The child controls are still displayed by default. |
|
CloseButton |
bool |
Whether to display a close (x) button in the upper right of the floating panel. If false, the user cannot close the floating panel. |
|
Docked |
bool |
Gets or sets the value indicating whether the panel will be an immediate child of the html document's body or whether it is docked in its parent. |
|
DockingContainerElementID |
string |
Gets or sets the ID of the container that will be used to dock with. |
|
Draggable |
bool |
Whether to allow the user to move the floating panel. |
|
Expanded |
bool |
Whether to start up the page with the floating panel expanded. If false, the floating panel starts Collapsed（收缩） and displays only its title bar. |
|
ExpandCollapseButton |
bool |
Whether to display a button in the title bar of the floating panel that allows users to collapse or expand the floating panel. If false, the user cannot expand/collapse the floating panel. |
|
HeightResizable |
bool |
Gets or sets a value indicating whether the panel's height is resizable. |
|
HelpUrl |
string |
The url to the help file displayed by the help button |
|
ShowDockButton |
bool |
Gets or sets a value indicating whether the panel is able to be docked and undocked from its container. |
|
ShowDockedContextMenu |
bool |
Gets or sets a value indicating whether the context menu is shown when the panel is docked. |
|
ShowHelp |
bool |
Whether to show the help button |
|
Title |
string |
Title text to display in the title bar of the floating panel. |
|
TitleBarBackgroundImage |
string |
Gets or sets the URL of the image to be used when rendering the Title Bar. |
|
TitleBarColor |
Color |
Color of the title bar of the floating panel. |
|
TitleBarCssClass |
string |
Gets or sets the CSS Class to be used by the Title Bar. |
|
TitleBarForeColor |
Color |
Gets or sets the foreground color (typically the color of the text) of the Web server control (inherited from WebControl). |
|
TitleBarHeight |
Unit |
Gets or sets the value indicating the height of the Title Bar. |
|
TitleBarSeparatorLine |
bool |
Gets or sets a value specifying whether to have a separator between the Title Bar and body of the panel. |
|
Transparency |
int |
Value between 0 - 100 that represents a percentage of transparency for the floating panel and its contents. A value of 0 means the floating panel is completely opaque and a value of 100 equals completely transparent. Note that transparency only applies when the floating panel is being actively moved (dragged) on the page at runtime. |
|
Visible |
bool |
Gets or sets a value that indicates whether a server control is rendered as UI on the page (inherited from Control). |
|
WidthResizable |
bool |
Gets or sets a value indicating whether the panel's width is resizable. |
Events
|
Event Type |
Description |
|
ContentsRendered |
Occurs when the panel is rendered during the server-side rendering process. Does not occur on callbacks. |
|
Hide |
Occurs when the panel is hidden, when the user clicks the Close button or the panel is hidden by code. |
|
PanelCollapsed |
Occurs when any panel in the EditorTask is collapsed. |
|
PanelExpanded |
Occurs when any panel in the EditorTask is expanded. |
|
Shown |
Occurs when the panel is displayed within the page. |
Discussion
Accessing controls by id within a FloatingPanel
通过ID访问FloatingPanel 控件内部的控件
The System.Web.UI.Control class, from which all Web controls inherit, provides a FindControl() method to locate child controls within a parent control. The System.Web.UI.Page class inherits from System.Web.UI.Control and thus exposes the FindControl() method. The page itself contains a hierarchical structure of elements, where some controls are located within other controls. The FloatingPanel control is designed to contain other controls. As a result, using the FindControl() method to programmatically locate a control within a FloatingPanel requires you to get a reference to the FloatingPanel, then use FindControl() on the FloatingPanel to locate the control it contains. In the following example, the Web page contains a Map control, a FloatingPanel control named "FloatingPanel1", and a Toc control named "Toc1" in the FloatingPanel. It is assumed we have access to the Map control (reference variable named "map") and need to programmatically get a reference to the Toc. Attempting to find the Toc control from the Map control will return a null reference.
所有的web控件都是继承于System.Web.UI.Control 类，他们提供了一个FindControl（）方法在父控件里面定位子空间。System.Web.UI.Page类继承于System.Web.UI.Control类，因此展现来FindControl（）方法。页面自身包含了一个继承的构造函数的元素，一些控件在其他控件内部放置的位置。FloatingPanel 控件被设计为可以包含其他的控件。 结果，如果使用FindControl（）方法通过编程来确定在FloatingPanel 控件内部控件的位置要求你获取一个FloatingPanel的一个引用，然后使用FindControl（）方法在FloatingPanel 控件内部定位它所包含的控件的位置。在后面的例子中，那个web 页面包含一个Map 控件，一个FloatingPanel 控件，它的名称为“FloatingPanel
[C#]
FloatingPanel floatingpanel = (FloatingPanel) map.FindControl("FloatingPanel1");
Toc toc = (Toc)floatingpanel.FindControl("Toc1");
Toggle FloatingPanel Visibility
At runtime, the visibility of a FloatingPanel can be changed using Web ADF JavaScript available in the browser. A callback to the Web application is not required . JavaScript support for FloatingPanel capabilities in the browser is provided in the display_floatingpanel.js file. By default, during application initialization this JavaScript file will be streamed to the client as an embedded resource. The JavaScript file will only be available if a FloatingPanel resides（存在） in the page.
在运行状态下，在浏览器里面可以使用web adf JavaScript 改变FloatingPanel 控件的可见性。 而且还不需要对web 应用程序进行回调。在浏览器里面支持FloatingPanel 能力的JavaScript函数由display_floatingpanel.js文件提供。 默认情况下，当应用程序初始化的时候，这个JavaScript文件将以流的形式到客户端作为其嵌入的资源。只有FloatingPanel控件在页面存在的时候，这个javascr文件才能获取。
The display_floatingpanel.js file contains a set of functions to change the visibility of a FloatingPanel at runtime. The functions and what they accomplish are listed below. Nearly all functions accept a single parameter, the unique client id of the FloatingPanel.
display_floatingpanel.js文件包含一系列的功能在运行的状态下改变FloatingPanel 控件的可见性。 他们的功能以及他们的效果在下面列出。几所所有的函数都接受一个参数：FloatingPanel 控件在客户端的ID。
|
JavaScript Function Name |
Description |
|
showFloatingPanel |
Show a floating panel |
|
hideFloatingPanel |
Hide a floating panel |
|
toggleFloatingPanelVisibility |
Show or hide a floating panel, changes to the opposite（对立的） of a floating panels current state |
|
expandFloatingPanel |
Expand（展开） a floating panel to view its content |
|
collapseFloatingPanel |
Collapse（缩放） a floating panel to hide its content while still displaying the title bar |
|
hideAllFloatingPanels |
Hide all floating panels in the page (no parameter required) |
In the example code below, a Web page (*.aspx) contains a FloatingPanel and HTML input button. At runtime, when the button is clicked it calls the toggleFloatingPanelVisibility JavaScript function and passes the FloatingPanel id ('MyFloatingPanel') to change visibility. If the FloatingPanel is visible, it will be hidden. If hidden, it will be made visible.
下面是例子的代码。 一个web 页面包含一个FloatingPanel 控件和一个HTML的按钮，在运行的时候，但单击按钮，将会调用toggleFloatingPanelVisibility JavaScript函数，并将FloatingPanel
控件的ID传递到函数改变FloatingPanel 控件的可见性。 如果FloatingPanel 控件是可见的，那么就隐藏它，如果FloatingPanel 控件是隐藏的，她就为可见。
<esri:floatingpanel id="MyFloatingPanel" Width="200px" Height="200px"
BorderColor="Black" BorderWidth="2px" runat="server"
style="left: 111px; position: absolute; top: 60px"> </esri:floatingpanel>
<input id="MyHTMLButton" type="button" value="HTML Button"
onclick="javascript: toggleFloatingPanelVisibility('MyFloatingPanel')" />
If the visibility of the FloatingPanel needs to change during a callback to the Web ADF application, a custom CallbackResult can be used. A discussion on CallbackResults and Web ADF controls is provided in the Working with AJAX capabilities in the Web ADFtopic. In the example code below, a map action on the Map control in the browser has triggered a callback. The map action is being handled by a custom tool in the Web application. Since the callback response is being handled by the Map control, a custom CallbackResult to change the FloatingPanel visibility needs to be created and added to the Map controls callback results collection. The following code, in the server action class for the custom tool, illustrates how to create the custom CallbackResult and add it to the Map control ('mapctrl') callback results collection. The custom CallbackResult includes a JavaScript call to the showFloatingPanel() function in the browser and passes the client id of the FloatingPanel ('MyFloatingPanel') to display. This JavaScript call is executed when the callback response is returned to the browser and the Web ADF function processCallbackResult processes the callback results.
如果FloatingPanel 控件的可见性需要在发往web adf 应用程序的回调函数中改变，那么一个自定义的CallbackResult 可以被使用。关于回调和web adf 控件的讨论请参考Working with AJAX capabilities in the Web ADF 话题。在下面的样例代码中，浏览器里面的地图控件的一个动作触发了一个回调。 地图控件的动作由一个应用程序中的自定义工具处理。 因为回调响应有map控件来处理，一个自定义的改变FloatingPanel 控件可见性的CallbackResult需要被创建并添加到地图控件的回调集合中。下面的代码说明了如何创建自定义的callbackResult并把它添加到map控件的回调响应集合中。自定义的CallbackResult 包含一个在浏览器中用JavaScript调用showFloatingPanel()，并将传递客户端的FloatingPanel控件的ID来展示FloatingPanel控件。 当回调响应放到浏览器后，这个JavaScript函数就会执行，web adf 的processCallbackResult（）函数处理这个回调的结果。
[C#]
CallbackResult callbackresult = new CallbackResult(null, null, "javascript", "showFloatingPanel('MyFloatingPanel');");
mapctrl.CallbackResults.Add(callbackresult);