`
高级java工程师
  • 浏览: 410657 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

mozilla中 xul里面 window 等标签使用

    博客分类:
  • xul
阅读更多
XUL中可以使用的小组件(widgets)

1. 根元素

在XUL文档中,根据不同的目的应使用不同的根元素,常见的根元素包括window元素、page元素和dialog元素。

根元素使用windowtype属性作为窗口类型的任意标识符,例如Firefox为浏览器窗口使用windowtype属性 navigator:browser,为选项对话框使用windowtype属性Browser:Preferences。有了这些值,我们就可以调用这 些窗口了。

窗口在屏幕上的尺寸和位置是用属性width、height、screenX、screenY来指定的,它们都用像素为单位。通过前面提到的 persist属性,你可以轻松地保存一个窗口的尺寸和位置,Firefox也是这么做的。

一般的根元素
* window:用来定义普通窗口。Firefox的浏览器窗口、书签管理器的窗口和很多其它窗口都是用window元素定义的。一般情况下你都可以使用 windows元素作为你的根元素。
* page:在嵌入式框架中打开的侧边栏面板和其它XUL文档都使用page元素作为根元素。除了预期目的不同外,page元素和window元素没有区 别。

对话窗口的根元素
* dialog:需要创建选项对话框、确认对话框等等时,应该使用dialog元素作为根元素。dialog元素有许多属性,通过这些属性可以轻松地使用和 当前平台风格一致的小组件来显示控件(按钮等等)。例如,Windows把确认按钮放在左边,把取消按钮放在右边,而Mac OS X中的布局正好相反。
* 对话窗口中使用的按钮:dialog元素会在它的底部显示一些按钮,包括accept按钮(确认按钮)、cancel按钮(取消按钮)、help按钮(帮 助按钮)、disclosure按钮(扩展按钮,显示为一个三角形或者按钮,允许用户用它来切换附加信息的显示)。还有两个特殊的按钮extra1和 extra2,它们的名字是在根元素中通过buttonlabelextra1和buttonlabelextra2属性指定的,其值可以是任意字符串。

dialog的测试代码:
<?xml-stylesheet href="chrome://global/skin/"?>
<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        title="chinakr's Dialog" buttons="accept,cancel"
        ondialogaccept="saveValues(); window.close();"
        ondialogcancel="window.close();">
    <checkbox label="My Option"/>
</dialog>
复制代码
注:对话框的标题和复选框显示正常,确定和取消按钮显示不正常、工作不正常。根据注解的说明,只有在这个例子作为Firefox代码的一部分或者已安装的 扩展的代码的一部分时,才能正常工作。

2. 菜单

多级结构化下拉菜单是用户界面的一部分,通过它你就可以访问应用程序和Web服务中经常访问的功能。以前你必须使用HTML和JavaScript代码来 编写这个菜单,但在XUL中你只需要使用标签就可以完成同样的工作。

menu元素的测试代码:
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
    <menu label="My Menu">
        <menupopup>
            <menuitem label="Item 1"/>
            <menuitem label="Item 2"/>
            <menuseparator/>
            <menuitem label="Item 3"/>
            <menu label="Submenu">
                <menupopup>
                    <menuitem label="Item 4.1"/>
                    <menuitem label="Item 4.2"/>
                </menupopup>
            </menu>
        </menupopup>
    </menu>
</menubar>
</window>
复制代码
注:如果不使用menupopup标签,那么菜单项目将平铺排列。

通过把menu元素插入menubar元素中可以创建多个菜单。通过在menuitem元素中添加class="menuitem-iconic",你可 以在菜单中显示图标。

在选中菜单项目时执行命令

和动态HTML很像,当一个菜单项目被选中时,XUL文档也是使用事件处理程序来执行一条命令。在HTML中我们使用onclick事件处理程序来响应鼠 标输入,用onkeypress事件处理程序来响应键盘输入。XUL除了可以使用这两个事件处理程序,还可以使用oncommand这个特殊的事件处理程 序,例如通过单击左键进行选择。oncommand事件处理程序除了可以在菜单项目元素中使用,还可以在按钮和其它输入控件中使用。

oncommand事件处理程序的例子(oncommand.xul):
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
    <menu label="My Menu">
        <menupopup>
            <menuitem label="Open QB Homepage" oncommand="loadURI(this.value)"
                value="http://QuickBest.com.cn/"/>
            <menuitem label="Item 1"/>
            <menuitem label="Item 2"/>
            <menuseparator/>
            <menuitem label="Item 3"/>
            <menu label="Submenu">
                <menupopup>
                    <menuitem label="Item 4.1"/>
                    <menuitem label="Item 4.2"/>
                </menupopup>
            </menu>
        </menupopup>
    </menu>
</menubar>
</window>
复制代码
注:测试代码没有成功,因为鼠标移动到“Open QB Homepage”菜单项目上时、单击这个菜单项目时,都没有反应,没有像预想的那样打开清北服务网站的主页。

特殊菜单项目:和HTML中的input元素一样,通过设置元素的type属性,menuitem元素可以像复选框、单选按钮一样工作。
* 复选框:可以为menuitem元素添加type="checkbox",这样当它被选择时就会被选中,当它再次被选择时就不会被选中。Firefox的 “查看”菜单中的“状态栏”菜单项目就是复选框的一个例子。当一个复选框被选中时,checked="true"属性就会被设置。
* 单选按钮:可以为多个menuitem元素添加type="radio",同时通过设置相同的name属性来把它们分为一组,这样选中其中一个元素时,就 会取消对同组其它元素的选择,这和HTML中的单选按钮是一样的。Firefox的“查看”菜单中的“字符编码”子菜单就是单选按钮的一个例子。当一个单 选按钮被选择中,selected="true"属性就会被设置。
* 上下文菜单:context属性用来显示一个上下文菜单或快捷键菜单,当在一个元素上单击右键时就会出现这种菜单。
* 按钮:用户可以点击的按钮是用button元素来定义的。使用icon属性来代替image属性,可以显示一组当前平台的标图按钮图标。icon属性有效 的取值为:accept、cancel、help、open、save、find、clear、yes、no、apply、close、print、 add、remove、refresh、go-forward、go-back、properties、select-font、select- color。
* 工具栏按钮:toolbarbutton元素被用来定义工具栏按钮。这种按钮一般被放置在工具栏内部,但也可以放在其它地方。通过设置工具栏按钮的 type属性,可以改变元素的行为。允许的取值包括:checkbox、menu和menu-button。当指定了type="checkbox",单 击按钮时它会凹陷,再次单击时它会弹出。凹陷状态时checked="true"被设置。像历史和书签按钮就是这类按钮。当指定了 type="menu",并且添加了一个menupopup子元素或设置了popup属性来引用一个弹出菜单,当按钮被按下时就会显示一个弹出菜单,单击 按钮不会触发事件,选中弹出菜单的菜单项目才会触发事件。标签栏右边缘的列出所有标签页按钮就是这类按钮。当制定了type="menu- button",就会得到一个结合了普通工具按按钮和带有type="menu"的工具栏按钮的特殊的按钮,这样点击按钮本身会触发一个命令事件,点击按 钮右侧的下拉箭头会弹出菜单。像前进、后退按钮就是这类按钮。

复选框的例子(menu.xul的测试代码):
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
    <menu label="My Menu">
        <menupopup>
            <menuitem label="Item 1" type="checkbox"/>
            <menuitem label="Item 2"/>
            <menuseparator/>
            <menuitem label="Item 3"/>
            <menu label="Submenu">
                <menupopup>
                    <menuitem label="Item 4.1"/>
                    <menuitem label="Item 4.2"/>
                </menupopup>
            </menu>
        </menupopup>
    </menu>
</menubar>
</window>
复制代码

单选按钮的例子(menu.xul的测试代码):
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menubar>
    <menu label="My Menu">
        <menupopup>
            <menuitem label="Item 1" type="checkbox"/>
            <menuitem label="Item 2"/>
            <menuseparator/>
            <menuitem label="Item 3"/>
            <menu label="Submenu">
                <menupopup>
                    <menuitem label="Item 4.1" name="test_radio" type="radio"/>
                    <menuitem label="Item 4.2" name="test_radio" type="radio"/>
                </menupopup>
            </menu>
        </menupopup>
    </menu>
</menubar>
</window>
复制代码

上下文菜单的例子(menu.xul的测试代码):
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="Send" oncommand="send();" context="button-context"/>
<menupopup id="button-context">
    <menuitem label="Send with new tab" oncommand="sendInNewTab();"/>
</menupopup>
</window>
复制代码

按钮的例子(menu.xul的测试代码):
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<button label="确定" icon="accept"/>
</window>
复制代码

工具栏菜单的例子(toolbarbutton.xul的测试代码):
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<hbox>
    <toolbarbutton label="normal"/>
    <tootbarbutton label="checkbox" type="checkbox"/>
    <toolbarbutton label="menu" type="menu">
        <menupopup>
            <menuitem label="item1"/>
            <menuitem label="item2"/>
        </menupopup>
    </toolbarbutton>
    <toolbarbutton label="menu-button" type="menu-button">
        <menupopup>
            <menuitem label="item3"/>
            <menuitem label="item4"/>
        </menupopup>
    </toolbarbutton>
</hbox>
</window>
复制代码

以上为“Chapter 3: Introduction to XUL—How to build a more intuitive UI”的学习笔记的第二部分。
分享到:
评论

相关推荐

    xul文档具体标签说明和例子

    XUL(XML User Interface Language)是一种基于XML的语言,主要用于构建跨平台的图形用户界面,尤其在Mozilla Firefox等浏览器的扩展开发中广泛应用。XUL文档的结构和HTML类似,但提供了更丰富的组件和定制性。以下...

    xul调用c++xpcom例子.rar

    在XUL文件中,可以使用标签引入JavaScript代码,这里会定义调用C++组件的函数。通过window.netscape.security.PrivilegeManager.enablePrivilege()来获取必要的权限,然后使用Components.classes和Components....

    xul学习小程序

    XUL包含一系列的UI元素,如按钮、标签、列表框等,这些元素可以通过XML语法定义,并可以与JavaScript或CSS结合使用,以实现动态交互和样式控制。 在"Xul学习小程序"中,我们可以预见到以下核心知识点: 1. **XUL...

    xul标签用法说明

    - `window` 标签是XUL文件中最基本的容器,用来定义用户界面中的一个窗口或对话框。 - **属性介绍**: - `id`: 用于标识该窗口,方便脚本进行访问。 - `title`: 设置窗口标题栏的文本。 - `orient`: 定义窗口...

    XUL Programmer's Reference Manual

    2. **元素与属性**:XUL包含一系列预定义的元素,如窗口(window),按钮(button),文本框(textbox)等,它们都有特定的属性来控制其行为和外观。 3. **样式表(CSS)**:XUL界面的样式可以通过CSS(Cascading Style ...

    XUL开发手册(firefox)

    由于其独特的特性,XUL被广泛应用于Firefox和其他基于Mozilla的浏览器的插件及扩展开发中。 #### 二、XUL在Firefox中的应用 随着Firefox 4.0的发布,XUL不仅成为了构建浏览器的核心组件之一,同时也提供了一个完整...

    XUL中文帮助手册(DOC)

    在示例中,`&lt;window&gt;`标签包含了一个`&lt;browser&gt;`元素,该元素定义了一个浏览器组件,它的`src`属性指定了加载的网页URL,`type="content"`表明这是一个内容类型,而`flex="1"`意味着这个元素会占据所有可用空间。...

    xul小程序

    XUL(XML User Interface Language)是一种标记语言,主要用于构建跨平台的用户界面,尤其是在Mozilla Firefox浏览器和Thunderbird邮件客户端等应用程序中广泛使用。这个“xul小程序”是您学习XUL过程中积累的心得...

    XUL最全帮助资料(part02)

    XUL在Firefox、Thunderbird等Mozilla基金会项目中广泛使用,允许开发者创建自定义的、跨平台的用户界面。 在"XUL最全帮助资料(part02)"这个主题中,我们主要会探讨以下几个核心知识点: 1. **XUL的基本结构与元素*...

    mozilla xbl基本用法示例

    XUL(XML User Interface Language)是Mozilla使用的一种标记语言,用于构建跨平台的图形用户界面。在XUL文档中,我们可以定义UI元素并引用XBL绑定。一个典型的XUL文件可能包含如下结构: ```xml &lt;window xmlns=...

    Firefox插件(XUL)开发 学习笔记 - 1. 开发环境以及数据库一瞥

    总结来说,Firefox插件(XUL)开发涉及到环境搭建、XUL界面设计、数据库操作、API使用和测试调试等多个方面。通过深入学习和实践,你可以创造出功能强大、个性化的Firefox插件,提升用户的浏览器体验。而随着...

    xulrunnersamples.rar_xulrunner

    它会包含各种XUL元素,如&lt;window&gt;、、等,以及它们的子元素和属性。同时,这些XUL文件通常还会引用JavaScript文件,如“main.js”,用于处理用户的交互事件和应用逻辑。 JavaScript在XUL中扮演着重要角色,它是实现...

    Firefox附加组件开发者指南

    - **从XPConnect中调用XPCOM**:XPConnect是XPCOM的一个组成部分,用于在JavaScript中使用XPCOM组件。 - **对话框许可(Permitbydialog)**:一种机制,允许扩展在特定情况下请求权限。 - **编辑prefs.js文件**:这...

    org.eclipse.swt.win32.win32.x86_3.7.0.v3735b.rar

    4. `swt-xulrunner-win32-3735.dll` 可能涉及对Mozilla XULRunner的支持,XULRunner是一个运行XUL(XML User Interface Language)应用程序的框架。 5. `swt-webkit-win32-3735.dll` 提供了对WebKit渲染引擎的支持,...

Global site tag (gtag.js) - Google Analytics