首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

创建一种声明性 XML UI 语言 -7

创建一种声明性 XML UI 语言 -7

框架应用示例项目框架(见 )包含几个示例,其中 Web 浏览器示例的内容非常详尽。   
Web 浏览器 XML UI 文档这个示例是一个相对真实的示例,您可能会打算将它放进一个声明性 XML UI 文档中。查看 ,这个主 Window 指定了 xy 坐标以及一个 id 值。所有元素必须拥有惟一的 ID 值,以便业务逻辑能够引用这些元素。        
Window 元素包含以下几个子元素:
  • Panel:提供主要布局
  • OpenFileDialog:打开新的 Web 页面
  • SaveFileDialog:保存当前查看的 Web 页面
  • CustomDialog:显示一个 yes 或 no 退出对话框
  • CustomDialog:显示 Web 书签
  • MenuBar:显示在 Window 的顶部,并提供菜单项功能
  • Resource:引用驱动这个 UI 的 Java 模型代码
所含组件(比如 Button)的所有坐标用于表示在网格内的位置。所含组件的全部大小是指每个组件在网格内的宽度和高度的单元数量。元素的定义是高度声明性的,因为它们定义的是属性,而不是关于如何使用和创建那些属性的逻辑。本文的其他几个相关知识点包括:
  • MenuItem 可能有快捷键,比如 Ctrl-X 用于退出应用程序。
  • Window 拥有多个对话框,但默认情况下这些对话框不会显示,除非用户调用它们。
  • 所有容器(比如 Panel)必须拥有布局,而且必须指定布局中的行数和列数。
清单 8. Web 浏览器 XML UI
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by The Purnama Project XUI API version 0.5 -->
<xui:XUI xmlns:xui="http://xml.bcit.ca/PurnamaProject/2003/xui"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xml.bcit.ca/PurnamaProject/2003/xui ../../xui.xsd"
  id="http://xml.bcit.ca/PurnamaProject/examples/XUIWebBrowser">
  <xui:Window id="window_0" name="XUI Web Browser" x="200" y="20" width="800"
    height="600" visible="true">
    <xui:GridLayout width="1" height="1"></xui:GridLayout>
    <xuianel x="0" y="0" width="1" height="1" id="panel_0" name="main panel"
      idref="window_0">
      <xui:GridLayout width="8" height="8"></xui:GridLayout>
      <xui:HypertextPane x="1" y="0" width="8" height="7" id="hyper_0"
        uri="http://www.w3c.org"></xui:HypertextPane>
      <xui:Button  x="0" y="0" width="1" height="1" id="button_0" label="Back"
        enabled="true" orientation="horizontal"></xui:Button>
      <xui:Button  x="0" y="3" width="1" height="1" id="button_1" label="Home"
        enabled="true" orientation="horizontal"></xui:Button>
      <xui:Button  x="0" y="7" width="1" height="1" id="button_2"
        label="Forward" enabled="true" orientation="horizontal"></xui:Button>
    </xuianel>

    <!-- For opening files. Only want to see html files -->
    <xui:OpenFileDialog x="10" y="10" width="400" height="300"
      id="filedialog_0" idref="window_0" visible="false">
      <xui:Filter>html</xui:Filter>
      <xui:Filter>htm</xui:Filter>
    </xui:OpenFileDialog>

    <!-- For saving files. Only want to save html files -->
    <xui:SaveFileDialog x="10" y="10" width="400" height="300"
      id="savedialog_0" idref="window_0" visible="false">
      <xui:Filter>html</xui:Filter>
      <xui:Filter>htm</xui:Filter>
    </xui:SaveFileDialog>

    <!-- Ask the user if they really want to quit -->
    <xui:CustomDialog x="200" y="200" width="320" height="160"
      id="customdialog_1" idref="window_0" name="Exit Purnama Browser"
        modal="true" visible="false">
      <xui:GridLayout width="1" height="1"></xui:GridLayout>
      <xuianel x="0" y="0" width="1" height="1" id="panel_2"
        name="Quit Panel" idref="customdialog_0">
        <xui:GridLayout width="5" height="4"></xui:GridLayout>
        <xuiabel id="label_0" x="1" y="1" width="3" height="1"
          justified="center" text="Do you really want to exit?"></xuiabel>
        <xui:Button  x="2" y="1" width="1" height="1" id="button_3"label="Yes"
          enabled="true" orientation="horizontal"></xui:Button>
        <xui:Button  x="2" y="3" width="1" height="1" id="button_4" label="No"
          enabled="true" orientation="horizontal"></xui:Button>
      </xuianel>
    </xui:CustomDialog>

    <!-- For displaying the bookmarks -->
    <xui:CustomDialog x="100" y="100" width="300" height="300"
      id="customdialog_0" idref="window_0" name="Bookmarks" modal="false"
        visible="false">
      <xui:GridLayout width="1" height="1"></xui:GridLayout>
      <xuianel x="0" y="0" width="1" height="1" id="panel_1"
        name="bookmarks panel" idref="customdialog_0">
        <xui:GridLayout width="1" height="1"></xui:GridLayout>
        <xuiist x="0" y="0" width="1" height="1" id="list_0" enabled="true"
          itemSelected="0" scrolling="vertical">
          <xuiistItem>http://www.w3c.org</xuiistItem>
          <xuiistItem>http://www.agentcities.org</xuiistItem>
          <xuiistItem>http://www.apache.org</xuiistItem>
          <xuiistItem>http://www.gnu.org</xui:ListItem>
        </xui:List>
      </xuianel>
    </xui:CustomDialog>

    <!-- The menu bar with pop-up menu items too -->
    <xui:MenuBar id="menuBar_0" idref="window_0">
      <xui:Menu id="menu_0" idref="menuBar_0" enabled="true"
        isPopupMenu="false" isSubMenu="false" label="File">
        <xui:MenuItem id="mi_1" idref="menu_0" enabled="true" label="Open URL"
          checked="false">
          <xui:Shortcut keyCode="F" keyModifier1="ALT"></xui:Shortcut>
        </xui:MenuItem>
        <xui:MenuItem id="mi_0" idref="menu_0" enabled="true" label="Save"
          checked="false">
          <xui:Shortcut keyCode="F" keyModifier1="ALT"></xui:Shortcut>
        </xui:MenuItem>
        <xui:MenuItem id="mi_2" idref="menu_0" enabled="true" label="Exit"
          checked="false">
          <xui:Shortcut keyCode="X" keyModifier1="CTRL"></xui:Shortcut>
        </xui:MenuItem>
      </xui:Menu>
      <xui:Menu id="menu_1" idref="menuBar_0" enabled="true"
        isPopupMenu="false" isSubMenu="false" label="Bookmarks">
        <xui:MenuItem id="mi_3" idref="menu_1" enabled="true"
          label="Add Bookmark" checked="false">
          <xui:Shortcut keyCode="D" keyModifier1="CTRL"></xui:Shortcut>
        </xui:MenuItem>
        <xui:MenuItem id="mi_4" idref="menu_0" enabled="true"
          label="Manage Bookmarks" checked="false">
          <xui:Shortcut keyCode="M" keyModifier1="CTRL"></xui:Shortcut>
        </xui:MenuItem>
      </xui:Menu>
      <xui:Menu id="menu_2" idref="hyper_0" enabled="true" isPopupMenu="true"
        isSubMenu="false" label="">
        <xui:MenuItem id="mi_5" idref="menu_2" enabled="true"
          label="Save As ..." checked="false"></xui:MenuItem>
        <xui:MenuItem id="mi_6" idref="menu_2" enabled="true" label="revious"
          checked="false"></xui:MenuItem>
        <xui:MenuItem id="mi_7" idref="menu_2" enabled="true" label="Next"
          checked="false"></xui:MenuItem>
        <xui:MenuItem id="mi_8" idref="menu_2" enabled="true" label="Home"
          checked="false"></xui:MenuItem>
        <xui:MenuItem id="mi_9" idref="menu_2" enabled="true" label="Bookmark"
          checked="false"></xui:MenuItem>
      </xui:Menu>
    </xui:MenuBar>
  </xui:Window>

  <!-- The library (model) code that drives the user interface -->
  <xui:Resource type="java" class="BrowserModel" uri="BrowserModel.jar"/>
</xui:XUI>




当然,如果没有用户交互,这个 UI 没有任何价值。下面就介绍如何进行用户交互。
返回列表