Electronic Joint Business

Solution for E-Business

ie

IE 10 开发者指南之文档对象模型

Windows 开发者预览版中的 IE10 或者 Metro 风格应用包含了许多新的文档对象模型的特性,包括:

  • 高级点击测试API — Advanced Hit Testing APIs
  • CSSOM 浮点值支持 — CSSOMFloating Point Value Support
  • 媒体查询监听器 — Media Query Listeners
  • 触摸和姿态 DOM 事件 — Pointer and Gesture DOM Events
  • 注意:这些特性在 IE10 或使用 HTML 的 Metro 风格应用都一样能工作。

    高级点击测试API
    IE10 和 Metro 风格应用中的文档对象模型 (DOM)都支持 elementFromPoint 方法,该方法返回某个视区(viewport)中位于坐标(X,Y)处的元素。这个方法对单一元素仍然有效,比如说点击页面上的某个图片。但是,对于游戏、图形编辑器之类使用多个图层的应用,点击屏幕,是无法获得相交于该点的所有东西的。

    IE10 引入了 msElementsFromPoint 和 msElementsFromRect 方法,这两个方法可以获得所有相交于指定的(X,Y)坐标或者矩形区域的所有元素,并返回节点列表。

    msElementsFromPoint 方法
    msElementsFromPoint 方法以某点的坐标 (X,Y)为参数,返回所有相交于该点的元素节点集合。. 该列表按 Z 顺序排序,这意味着第一个元素就是最顶层的元素。

    >>> 阅读全文

     

    , , , ,

    IE 10 开发者指南之SVG

    SVG (Scapable Vector Graphics,可缩放矢量图像)是互联网联盟(W3C)的正式推荐标准,它是一种使用 XML 来描述二维图像的语言。

    SVG 允许3种形式的图像对象存在,分别是矢量图形(如由直线、曲线等组成的路径)、点阵图像和文本。各种图像对象能够组合、变换,并且能修改其样式,也能够定义成预处理对象以便再用。SVG 还支持各种特效,包括嵌套变换、路径剪裁、透明度处理、滤镜效果以及模板对象等。同时,SVG 可以是互动和动态的,动画可以直接加入 SVG 文本,也可以通过脚本加入。在新的SVG版本中,还可以表现视频、音频等其它信息。

    SVG 通过使用脚本语言来完成比较复杂的应用,脚本语言调用 SVG 对象模型(SVG Document Object Model)来访问或控制所有的元素、属性和属性值。任何一种 SVG 图像元素都能使用脚本来处理类似鼠标单击、双击以及键盘输入等事件。

    由于 SVG 文本是 XML 名字空间中的有效字符,这些字符能作为 SVG 图像的关键字而通过搜索引擎进行查询。

    注意:这些特性在 IE10 和 采用 HTML 的 Metro 风格应用同样适用。

    >>> 阅读全文

     

    , , , ,

    IE 10 开发者指南之索引数据库

    Internet Explorer 10 支持索引数据库API(IndexedDB), 来存储结构化数据。不同于cookie 和 DOM 存储,IndexedDB 提供了组合(group)、 遍历、搜索、过滤 Javascript 对象的功能。

    IndexedDB API 由多个对象组成,每个都为特定的任务而设计:

    • 数据被保存在对象存储(object stores)里,它是 Javascript 对象的集合,这些对象的属性包含独立的数值。
    • Javascript 对象被保存在对象存储中,也称为记录 (record),每个记录都有一个共同的属性 key path。该属性的值被称为键值(key value) 或者键(key)。键值 (Key values)用于标识对象存储里的单个记录。
    • 索引按照某一属性的值来组织对象,它返回键值的集合,通过键值可以从原来的对象存储中获得独立记录。
    • 游标 (cursor) 是值的集合。当索引定义了游标时,游标代表着索引返回的键值集合。当一个对象存储定义了游标的时候,游标代表着保存在游标中的记录集合。
    • Key Range为索引或对象存储中的记录集定义了值的范围。 Key Rang可以用来过滤游标的结果。
    • 一个请求意味着对数据库中对象采取的不同动作。例如打开数据库会产生一个请求对象,你可以为这个请求对象定义事件处理器来对请求的结果产生反应。
    • 事务管理着操作的上下文,并用于维护数据库活动的一致性。例如,你可以版本变更的事务上下文中创建对象存储。如果事务被放弃,在此事务中的所有操作都被取消。

    索引数据库 API 规范定义了两套 API: 同步 API 和异步 API。IE10 支持异步 API。因此,对数据库的操作不会马上被执行,而是让返回对象的操作在后台执行。因此,IndexedDB 是事件驱动 API,你首先创建请求,然后定义事件处理器来响应请求的成功或者失败的结果。

    很重要的一点,这些特性在 IE10 和使用 HTML 的 Metro 风格应用是一致的。

    使用请求来打开数据库
    因为索引数据库 API 规范还在发展中,大部分厂商都为自己的 IndexedDB 实现添加了一个前缀,比方说webkitIndexedDB 或者 mozIndexedDB。对 IE10 来说,则是 msIndexedDB。为了得到正确的结果,我们用一小段检测代码来访问 IndexedDB API ,如例子所示:

    >>> 阅读全文

     

    , , , , , , ,

    用C#编写 IE BHO

    在前面几篇文章都是用 VC++ 完成的,为了更加快开发速度,很多程序员会考虑使用 C# 等更便捷的开发方式,这里我们采用 Visual Studio 2010 作为开发工具,你也可以采用 Visual studio 2008,其界面和开发过程与 Visual Studio 2010 类似。

    这儿, 我们也简单介绍一下 BHO. BHO 是将自定义功能添加到 Internet Explorer 的轻型 DLL 扩展,除了 IE, BHO 还可以将功能添加到 Windows 资源管理器外壳程序. BHO 通常并不提供其自身的任何用户界面 (UI)。它们而是通过在后台响应浏览器事件和用户输入数据来发挥作用。例如,BHO 可以拦截弹出窗口、自动填充窗体或为鼠标手势添加支持。

    在阅读本文之前,建议安装 Visual studio 的 SDK,因为里面提供了包装了 OLE 的装配件, >> 点击下载。如果觉得 Visual Studio SDK 安装包太庞大, 本文也提供了需要几个 OLE 接口的C#源代码。

    我们知道,BHO 的生命周期与它所交互的浏览器实例的生命周期相等。在 IE 6 和早期版本中,这意味着要为每个新的顶层窗口创建(和销毁)一个新 BHO。在IE 7中则是为每个选项卡都创建和销毁一个新 BHO。

    BHO 必须实现 IObjectWithSite 接口, 该接口提供了两个方法GetSite和SetSite。请在项目中引用” Microsoft.VisualStudio.OLE.Interop “这个装配件。如果没有安装 Visual Studio SDK, 你可以在项目中加入这段 IObjectWithSite 接口的源代码。

    >>> 阅读全文

     

    , , , ,

    用Visual Studio 2008开发IE浏览器帮助对象 之三

    接下来,我们要为IE增加一个按钮(注意不是toolbar,toolbar要复杂得多),基本这是一个注册表的魔术.打开RayBHO.rgs, 添加

    HKLM
    {
            NoRemove Software
            {
                    NoRemove Microsoft
                    {
                            NoRemove ‘Internet Explorer’
                            {
                                    NoRemove Extensions
                                    {
                                            ForceRemove ‘{1AC31710-6759-484f-A129-A70C55485DA1}’
                                            {
                                                    val ButtonText = s ‘Hello,World’
                                                    val Icon = s ‘%MODULE%,201’
                                                    val HotIcon = s ‘%MODULE%,202’
                                                    val CLSID = s ‘{1FBA04EE-3024-11d2-8F1F-0000F87ABD16}’
                                                    val ClsidExtension = s ‘{057F3E68-6C2E-40A5-A641-E8CF9D6766F3}’
                                                    val ‘Default Visible’ = s ‘yes’
                                            }
                                    }
                            }
                    }
            }
    }

    当然,你也可以把这一项放在HKCU(Current User)下,这样的话,该Button只对当前用户起作用。这些注册表项说明如下:

    ForceRemove ‘{1AC31710-6759-484f-A129-A70C55485DA1}’ 该extersion的CLSID,请自己用GUID这个程序生成.
    val ButtonText = s ‘Hello,World’ // 按钮上的文字说明
    val Icon = s ‘%MODULE%,201’ // 按钮的图标,可以是icon的绝对路径,也可以和我的例子一样从资源文件里加载.
    val HotIcon = s ‘%MODULE%,202’// 鼠标悬停时按钮的图标,与Icon类似.
    val CLSID = s ‘{1FBA04EE-3024-11d2-8F1F-0000F87ABD16}’ //该CLSID意思为可执行,此值有特定含义,请小心修改.
    val ClsidExtension = s ‘{057F3E68-6C2E-40A5-A641-E8CF9D6766F3}’ // 这个是RayBHO的CLSID,即表示该按钮的动作连接到RayBHO这个com上,具体值有所不同,必须查询你自己的rgs文件得到.
    val ‘Default Visible’ = s ‘yes’//按钮可见.

    当然你也可以不使用COM来响应按钮的动作,另外两个键Exec和Script,可以设置响应的程序或者脚本..这个不是重点.现在编译,然后从IE的自定义工具栏将这个按钮拖出来…如图所示:

    点点看…..结果呢? 当然是不起作用!

    >>> 阅读全文

     

    , , ,

    用Visual Studio 2008开发IE浏览器帮助对象 之二

    上一篇文章开发的RayBHO只是BHO的一个框架,根本不具备任何功能. 在这篇文章里,我们将使继续扩展这个BHO,让它具备更强的功能.首先我们学习如何让BHO接收IE的事件通知,接者学习为ie添加一个按钮,并让BHO对按钮做出响应. 要让BHO能接收事件通知, 它必须让处理函数与浏览器事件建立连接点. 为响应这些事件,它必须实现IDispEventImpl, ATL提供了一个默认实现,可以帮助简化这个事件处理逻辑。 在RayBHO.h添加: #include "exdispid.h" #include "shlguid.h" 我们的CRayBHO必须派生自IDispEventImpl,修改后的代码如下: class ATL_NO_VTABLE CRayBHO :  public CComObjectRootEx,  public CComCoClass,  public IObjectWithSiteImpl,  public IDispatchImpl,  public IDispEventImpl&lt;1,CRayBHO,&DIID_DWebBrowserEvents2,&LIBID_SHDocVw,1,1>; DispEventImpl为处理事件提供了一种简单安全的方法。 IDispEventImpl与事件路由表配合工作,可以将事件路由到相应的处理程序函数。在例子中,我们将”DocumentComplete”的事件交由OnDocumentComplete函数进行处理. 在public段添加路由表: BEGIN_SINK_MAP(CHelloWorldBHO) SINK_ENTRY_EX(1, DIID_DWebBrowserEvents2, DISPID_DOCUMENTCOMPLETE, OnDocumentComplete) END_SINK_MAP() 上述声明中SINK_ENTRY_EX(1,…)中的”1″与接口声明中的IDispEventImpl<1,….>是对应的,在必要时可以用于区分来自不同接口的事件.

     

    , , ,

    用Visual Studio 2008开发IE浏览器帮助对象 之一

    这篇文章是应同学们的要求写的,以前都是用 VC++ 6.0 和 Platform SDK 完成的. 迁移到 VS2008之后,原来 Visual Studio 6.0里的 BHO 向导不复存在,因此特此不厌其烦,详细说明,本文也适用于 VS2005.

    BHO 简介和开发工具
    首先谈 BHO 的开发工具,我偏向使用 VC++(unmanaged C++) 作为开发工具,因为 Java JVM 或 .Net CLR 的虚拟机是个很笨重的东西,也是内存杀手, 并不具备写 plugin 的快捷轻巧的特点.个人并不喜欢将其作为 Plug-in 的开发平台,不过我会有另文说明用 C# 开发 BHO 的全过程, 作为那些偏重开发效率的同学的参考.
    其次是类库的选择,我倾向利用“活动模板库”(ATL) 来开发使用 C++ 的 BHO。之所以使用 ATL,是因为它方便地实现了我们可以按需进行扩展的基本样板。尽管使用“Microsoft 基础类”(MFC) 或 Win32 API 和 COM)也可以创建BHO,但 ATL 是为我们提供了自动处理许多细节的轻型库,包括建立含有 BHO 类标识符 (CLSID) 的注册表。

    ATL 的另一个优势在于它的 COM 智能感知指针类(例如,CComPtr 和 CComBSTR),这些类可管理 COM 对象的生命周期。例如,CComPtr 在赋值时会调用 AddRef,而在对象被销毁或超出范围时会调用 Release。智能指针简化了代码并且有助于避免内存泄漏。当在单个方法范围内使用时,它们的稳定性和可靠性尤为有用。

    介绍完ATL, 我们也简单介绍一下 BHO. BHO 是将自定义功能添加到 Internet Explorer 的轻型 DLL 扩展,除了 IE, BHO 还可以将功能添加到 Windows 资源管理器外壳程序.

     BHO 通常并不提供其自身的任何用户界面 (UI)。它们而是通过在后台响应浏览器事件和用户输入数据来发挥作用。例如,BHO 可以拦截弹出窗口、自动填充窗体或为鼠标手势添加支持。

    >>> 阅读全文

     

    , , , , ,