overLIB DHTML弹出JavaScript库的OverLibWrapper C# 包装器

分享于 

24分钟阅读

Web开发

  繁體

Shows the OverlibPageControl in action-PageControlDesign.jpg

Overlib objects in action

介绍

这里有大量的弹出控件;只需要进行Google搜索,数千个将弹出( 无双关双关)。 通常,这些实现要么是纯 JavaScript,要么是简化的web控件扩展。 虽然这些实现不错,但我寻找一个能够为我编写JavaScript并提供良好设计时间支持的控件。 最后,我需要的是一个控件,它能够在页面中的中心位置处理多个预定义和on-the-fly弹出。 此外,通过常规工具提示提供大量信息是不可能的。 我在对DHTML实现进行了研究之后,发现了 overLIB 库,并对在 JavaScript DHTML环境中可以设置更多信息的方式进行了深刻的。 这个库的最大限制是开发者必须手工编写所有的命令。 尽管有些网站可以为你写出适当的代码块,但我仍然需要一个控件来处理所有的内容。

本文的目的是讨论包装控件的能力,以便完成显示格式化信息的需要。 源代码对这些控件如何操作以及包装 overLIB插件功能所需的内容提供了大量的注释。 这两个主要控件是驻留在任何特定网页上,在设计时用于绑定弹出工具提示的中央存储库,用于绑定弹出式工具提示,比如,LabelCheckBox,任何特定网页窗体上的单词或者词组组。 我将讨论如何在design-和运行时创建和修改弹出窗口。 本文的目的是展示如何在网页上使用大量信息时节省时间。

Background

我之前的项目之一需要能够通过工具提示来显示有关特定关键字或者web控件的额外数据。 因此,我的搜索导致了代码项目和 Tomas Petricek 和代码项目领域中的其他功能的出现。

然而,我们需要的是,这些项目似乎都无法做到。 我们真正需要的是一种从页面中心位置处理大量弹出的方法,并动态定义新的。 因此 OverLibWrapper C# 命名空间 创建了overLIB命令的更完整定义。请转到 overLIB文档站点。 有很多命令和定义,在 BosrupBoughner页面解释得更好。

使用代码

首先,你需要将 OverLibWrapper.dll 文件添加到工具箱中。 我不会介绍安装它,因为很多使用这个控件的人都熟悉添加/删除视觉和非视觉控件。 OverLibWrapper命名空间 包含可视控件:OverlibPageControlOverlibPopupAnchorColorComboBox。 不要注意 ColorComboBox,它是由于某些用户界面需求对 OverlibCommand的设计时开发而开发的控件。 为了快速运行,下载演示程序来测试控件的操作。

最重要的两个控件是 OverlibPageControlOverlibPopupAnchor。 这个 OverlibPopupAnchor 围绕着基本 <> 具有某些副作用的HTML控件。 对于不需要或者不需要工具提示,甚至只是想播放 Robert Boughner 或者 Erik的开发者,你需要使用这里项目。 这个概念就像添加一个新的超链接到你的页面,但你也可以改变一些参数来查看你想要的。 工具包含所有其他设计人员的OverlibPageControl,所以如果你不希望将页面控件放置在一个小锚点中,那么你就不必进行任何操作。

在本文开头的截图中,你可以看到在设计时 OverlibPageControl 是什么样子。 下面显示了在HTML视图中看到的内容:

<asp:Labelid="Label1"style="Z-INDEX: 101; LEFT: 56px; 
 POSITION: absolute; TOP: 112px"runat="server">Label</asp:Label><asp:CheckBoxid="CheckBox1"style="Z-INDEX: 102; LEFT: 32px; 
 POSITION: absolute; TOP: 160px"runat="server"Text="CheckBoxName"></asp:CheckBox><olwc:OverlibPageControlid="OverlibPageControl1"runat="server"PageDefaults="STICKY,FGCOLOR,'#D2691E',CAPCOLOR,'#D4D0C8',WRAP"><OverlibPopupControlLink="Label1"Text="This is the Tip Text shows when the control is clicked"Commands="STICKY,CENTER,CAPTION,'Clicked caption'"EventType="OnClick"/><OverlibPopupControlLink="Label1"Text="This shows when the user passes the mouse over"Commands="STICKY,CENTER"EventType="OnMouseOver"/></olwc:OverlibPageControl>
OverlibPageControl设计器

OverlibPageControl 有两个属性,使它能够在web窗体中运行。 他们是 PageDefaultsTips

Properties page

PageDefaults 属性连接到一个自定义 UITypeEditor,它允许开发人员构建适用于每个基础 overlib 函数调用的命令。 这些命令与通常手工键入 overLIB的JavaScript库相同的命令。

Command Editor

Tips 属性打开一个 CollectionEditor,允许设计器为驻留在当前页面上的特定控件创建。delete 和修改弹出窗口。 这个控件的一个好处是,它允许开发人员将多个弹出窗口链接到具有不同操作的特定控件。 目前只有两种事件类型,OnMouseOverOnClick。 这些是web开发中最常用的事件。 对于本文来说,它们是最常被引用的。 如图 below 所示,有两个弹出窗口控制 Label1。 当鼠标在 Label1 上时,将出现弹出式弹出,当单击 Label1 时,将出现另一个弹出窗口。 从技术上讲,每个控件的弹出窗口数量仅限于特定控件可以处理的事件数。

Collection Editor

CollectionEditor的inside,Commands 属性打开用于添加将在这里特定弹出窗口中运行的命令的OverlibCommandEditorText 属性打开一个文本编辑器,并且它还允许直接输入工具提示的文本。

代码

popups不仅可以在设计器中生成,而且还可以在运行时生成。 这使得在需要动态弹出时,GREATER的灵活性。

// We want to add another popup -- so we build one from scratch OverLibWrapper.OverlibPopup pop = new OverLibWrapper.OverlibPopup();
 pop.Text = "This is a color test";
 //this is a little hex color utility that was built //by http://www.tonesco.comstring colorStr = 
 HexColor.HexColorUtil.ColorToHex(System.Drawing.Color.Beige);
 string colorStr2 = 
 HexColor.HexColorUtil.ColorToHex(System.Drawing.Color.IndianRed);
 //add the commands that we want for this call to the overlib function pop.AddCommand(OverLibWrapper.OverlibCommand.BackgroundColor,colorStr2);
 pop.AddCommand(OverLibWrapper.OverlibCommand.ForegroundColor,colorStr);
 pop.AddCommand(OverLibWrapper.OverlibCommand.Caption,"This is a color Test");
 //add out control to link to -- this is the control.ID value//Note: if the ControlLink property is not set. ///During the pre render of the control an exception will be issued  pop.ControlLink = "Label1";
 //add out event type: the default is onmouseover//Note: that if two or more controls have the same control //link and have the same//ControlEventType, the first event will be captured, but the second// will be discarded even though it will remain within the code or //within the design collection pop.EventType = 
 OverLibWrapper.ControlEventType.OnClick;
 OverlibPageControl1.Tips.Add(pop);

运行时要使用的其他类之一是 OverlibPopupTextBuilder。 此类提供与文本编辑器相同的功能,但允许开发人员在运行时指定信息的精确布局。 如果要创建 table 以组织要在工具提示中显示的数据,则它很有用。

OverLibWrapper.OverlibPopupAnchor anchor = 
 new OverLibWrapper.OverlibPopupAnchor();
OverLibWrapper.Design.OverlibPopupTextBuilder optb = 
 new OverLibWrapper.Design.OverlibPopupTextBuilder();
 optb.AddTable();
 optb.AddTableAttribute("border","1");
 int rowIndex = optb.AddTableRow();
 optb.AddRowCell(rowIndex,"this is some information in a cell");
 optb.AddRowCell(rowIndex,"This is an cell with information");
 anchor.Title = "Inner popup";
 anchor.PopupText = "This is text inside the popup";
 anchor.IsInnerPopupAnchor = true;
 anchor.OverlibCommands = 
 "STICKY,CAPTION,'This is an inner popup caption',WRAP";
 rowIndex = optb.AddTableRow();
 optb.AddRowCell(rowIndex,"This is another cell");
 optb.AddRowCell(rowIndex,anchor.HyperlinkString());
 string popupInformation = optb.PopupText();//popupInformation will read://<table border='1'>//<tr><td>this is some information in a cell </td> //<td>This is an cell with//information</td></tr><tr><td>//This is another cell</td> //<td><a href="javascript:void(0);" //onmouseover=//"overlib2('This is text inside the popup',STICKY,CAPTION,'This is an// inner popup caption',WRAP)" onmouseout="nd()2;">Inner popup</a>//</td></tr> </table>//this is then added to another anchor or popup and the //entire object is written to the rendered html

要了解 OverlibPopupTextBuilder的更多工作,下载源代码,看看幕后发生了什么。

OverlibPopupAnchor

OverlibPopupAnchor 包含 OverlibPageControl 所做的相同项目,除了它在表示为开发人员的表示方面更为 compact。 这里控件显示已经设置为显示弹出窗口的文本超链接。 anchor的一个限制是,在设计时不能添加多个事件类型。

OverlibCommand和 OverlibCommandCollection

OverlibCommandOverlibCommandCollection 是为 overlib 函数调用构建命令结构的两个类。 OverlibCommand 包含包含核心和官方插件的100 + overLIB命令的整个 List,这是 overLIB插件库的核心插件。OverlibCommandCollection 是一个强类型 Collection,允许使用 Collection (。例如,AddRemoveIndexOf 等)的常规方法。 更有趣的OverlibCommandCollection 方法之一是 ToString() 方法。 调用 ToString() 时,返回值是逗号分隔字符串,包含插入到 Collection 中的所有命令。 这就是 overLIB JavaScript库期望的命令所在的格式。 OverlibCommandEditorDialog 包含一个 OverlibCommandCollection,它将解析命令的传入字符串,并将它们转换为有效的OverlibCommand。 最好不要直接创建 OverlibCommand,而是使用 OverlibPopup 将带有值的特定命令添加到弹出窗口。

OverlibPopup

此类是 OverLibWrapper 中的其他重要项之一 命名空间OverlibPopup 类由 OverlibPageControl 解析和生成。 OverlibPopupCollection 在设计和渲染过程中包含弹出窗口。 在设计和运行时添加新的OverlibPopup 时,必须将 ControlLink 属性设置为当前在web窗体的设计视图中的of。 通过设置 ControlLink 属性,你将指示特定的弹出窗口将显示特定的控件。 如果未设置该属性,则在执行网页时将引发异常。

每个 上面 所提到的命令类型的示例如下:

OverlibCommand.Sticky; //flag type command OverlibCommand.Caption; //quoted text command//a text command; this is required for those commands that//are looking for objects on the page using JavaScript OverlibCommand.Frame; // a color command in the form of '#FFCCAA' OverlibCommand.ForegroundColor;

下面是创建popup并添加具有相关值的各种命令的示例:

OverLIBWrapper.OverlibPopup pop = new OverLIBWrapper.OverlibPopup();
 pop.Text ="A new popup";
 //this is a plugin command (unofficial) pop.AddCommand(OverLIBWrapper.OverlibCommand.Draggable);
 //this is a core command pop.AddCommand(OverLIBWrapper.OverlibCommand.Center); 
 //core command with a quoted text value the single quotes are //optional because the logic behind the OverlibCommand is //that it will automatically determine whether or //the text has to be quoted. Another item is that it will automatically //escape the single quotes that internal to the string value. pop.AddCommand(OverLIBWrapper.OverlibCommand.Caption,"This is a test"); 
 //if the controlLink is not set there will be exceptions thrown //during pre-render of this control pop.ControlLink = "Label1"; //this is equivalent to Lable1.ID//this adds the command to the current page control's popup collection OverlibPageControl1.Tips.Add(pop);

Points of Interest

你可以能感兴趣的一点是试图在页面上找到特定控件的问题。 Tomas ( 前面提到过) 给了我一半的时间 UITypeEditor 通过当前上下文实例查找控件。 但是,当你创建一个新 CollectionEditor 并添加一个新对象,找到当前服务的问题,该服务提供了页面上所有控件的引用。 以下代码段可以用于一些小修改,以查找你希望的页面上的任何内容:

publicoverrideobject EditValue(ITypeDescriptorContext context,
 IServiceProvider provider,objectvalue){
 if (context!=null && context.Instance!=null && provider!=null) {
 edSvc=(System.Windows.Forms.Design.IWindowsFormsEditorService)
 provider.GetService(typeof(
 System.Windows.Forms.Design.IWindowsFormsEditorService));
 if (edSvc!=null) { 
 lb=new System.Windows.Forms.ListBox();
 lb.BorderStyle=System.Windows.Forms.BorderStyle.None;
 lb.SelectedIndexChanged+=
 new EventHandler(lb_SelectedIndexChanged);
 ArrayList items = new ArrayList();
 System.Web.UI.Control parentControl = null;
 // gets all controls from the form//this grabs the service for all the references that the provider has//this is key if you are calling this editor //from inside another editor//,i.e., a CollectionEditor IReferenceService service = 
 (IReferenceService)provider.GetService(typeof(IReferenceService));
 object[] references = 
 service.GetReferences(typeof(System.Web.UI.Control));
 //grabs the parent control based on the references.foreach(Control control in references){
 if(control.GetType() == typeof(System.Web.UI.UserControl) ||
 control.GetType() == typeof(System.Web.UI.Page)){
 parentControl = control;
 break;
 }
 }
 if (parentControl == null) {
 return"No controls found";
 }
 //recursively grabs all the controls //within each control's Controls container//otherwise the only level we will see //is the Page level controls, i.e. those//controls that put on the actual page.//All other controls that are placed //inside panels,//or other containers will not be shown //and thus if you wish to get a //control that is two or three levels deep or if there is a //master page context//you will be out of luck.//This is especially the case when wanting to create a UserControl.//and adds them to the item listforeach(Control ctrl in parentControl.Controls){
 GetControls(ctrl, items);
 }
 items.Sort();
 lb.Items.AddRange(items.ToArray());
 edSvc.DropDownControl(lb);
 if (lb.SelectedIndex==-1) returnvalue;
 return lb.SelectedItem;
 }
 }
 returnvalue; 
}

另一项要注意的是,尝试合并一段已经有效的代码片段,而不需要重写它。 由于这是使用 overLIB JavaScript文件的情况,因这里将它们编译成资源并插入资源文件是一个好主意和挑战。 其他两个类 inside OverLibWrapper命名空间 帮助操作 Web.Config 文件并将适当的文件夹和文件插入到当前的web项目中。 这些类足够通用,可以插入和操作任何嵌入到特定网络项目中的嵌入资源。 OverLibWrapper.Design.ProjectController 处理嵌入资源的文件插入。 OverLibWrapper.Design.AppConfig 使用和操作配置文件。 对于那些对注释进行注释的人,甚至可以根据刚插入的键插入注释到特定的配置文件中。

OverlibPageControlOverlibPopupAnchorOnPreRender() 中,生成必需的overLIB JavaScript元素并将它的写入页面。 这两个控件都足够聪明,如果overLIB脚本位置存在问题,则无需将它的插入页面。

提示,技巧和疑难解答

OverlibPageControl
  • 将多个页控件拖放到网页窗体上会导致异常。 别担心,这是设计的问题。 OverlibPageControl 保存一个 Collection OverlibPopup 实际上每个页面不需要有一个上的控件。
  • web overLIB库的JavaScript文件嵌入到. dll. 中,这意味着用户永远不需要担心JavaScript文件的最终位置。 它被自动加载到当前的网络项目中。

  • 拖放控件的操作将自动加载到web项目中,并将适当的文件插入到 Web.Config的root 级别。
    <appSettings><addkey="overLIBLocation"value="/OverlibDemo/overLIBScripts"/></appSettings>
  • 如果要删除页控件,请不要在文件夹中或者在 appSettings 如果在刷新和初始化过程中,该控件的位置和实际物理文件夹的位置将被检查,则会检查该控件。 如果这两个项都不存在,它将还原密钥和所有文件。 别担心,这是由设计完成的。 过去,当它的他组件开发人员开发高速低拖动控制时,开发人员在开发和部署过程中。 这里控件不是这种情况。 它拥有在你的页面上生存所需的一切。 这里的关键是首先在页面上添加控件,然后使用 delete 键,然后 finally 保存包含JavaScript文件的目录。
  • 这个控件的一个好处是当你感觉到overLIB上有一个更新时,你可以将文件复制到本地文件夹。
  • 包装overLIB库的目标是只保留 JavaScript,只允许控件完成所有工作。 我觉得已经完成了。
  • iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 OverlibPageControl s的使命是 designer。 它会告诉你在哪里找到合适的文件 <appSettings></appSettings> 键,以及控件所包含的弹出窗口的总数。
  • 这个控件拥有丰富的界面,允许开发人员在设计时完成大部分工作。
OverlibPopupAnchor
  • 将控件拖放到网页窗体上将执行与 OverlibPageControl 相同的操作。 和 OverlibPageControl 一样,向页面添加这个控件将插入 <appSettings> 引用,并将overLIBScripts文件夹放在你的web项目中。
  • 注意:删除overLIBScripts目录或者从项目中删除该目录或者从 <appSettings> 删除 overLIBLocation 将不会自动添加 OverlibPopupAnchor。 这是因为 OverlibPopupAnchor 在创建控件时只查找 appSettings 密钥和文件夹位置。
  • OverlibPopupAnchor 实际上仅为页面上的较小实现设计,它的中主要有大量文本。 对于更健壮的实现,OverlibPageControl 更适合开发。

谢谢

我最深感谢代码项目作者提供严重的省略步骤,帮助我弄乱这个实现的一些更令人烦恼的部分。 它的他感谢和点击到 Erik Bosrup和他的帮助者,获得一个很好的接收和高使用的JavaScript,并允许我包装。 谢谢,在一些似乎很难的部分中,在一些看上去很硬的部分中,我们可以在 direction 中打击我。

合法

所有 overLIB JavaScript代码都是 Erik Bosrup和 Robert Boughner的版权。

所有其他代码都是他们各自开发者的版权。

在这段代码的开发过程中,任何时候都有蓄意侵权的行为。

历史记录

2005-02-16 --文章的初始写入。


相关文章