《《用戶界面設計》PPT課件》由會員分享,可在線閱讀,更多相關(guān)《《用戶界面設計》PPT課件(24頁珍藏版)》請在裝配圖網(wǎng)上搜索。
1、華 僑 大 學 第 9章 用 戶 界 面 設 計 華 僑 大 學 第 9章 用 戶 界 面 設 計9.1 菜 單 欄 與 工 具 欄 設 計 1 9.2 對 話 框 設 計2 9.3 多 重 窗 體 的 創(chuàng) 建 與 操 作 3 9.4 多 文 檔 界 面 的 設 計4 華 僑 大 學 9.1 菜 單 欄 與 工 具 欄 設 計 菜 單 欄 與 工 具 欄 概 述1 9.1.1 下 拉 式 菜 單 設 計2 9.1.2 彈 出 式 菜 單 設 計3 9.1.3 工 具 欄 設 計4 華 僑 大 學 菜 單 欄 與 工 具 欄 概 述v 菜 單 欄 和 工 具 欄是 Windows界 面 的重 要
2、 組 成 部 分 ,幾 乎 所 有 的 應 用軟 件 都 是 通 過 菜單 欄 和 工 具 欄 來實 現(xiàn) 各 種 操 作 的 。應 用 程 序 中 菜 單欄 和 工 具 欄 的 位置 如 圖 9 1所 示 。 菜 單 欄工 具 欄 圖 9 1菜 單 欄 和 工 具 欄 華 僑 大 學 菜 單 欄 與 工 具 欄 概 述v VB的 菜 單 分 成 下 拉 式 菜 單 和 彈 出 式 菜 單 兩 種基 本 類 型 。 單 擊 菜 單 欄 所 顯 示 的 是 下 拉 式 菜 單 ,而 在 操 作 時 單 擊 鼠 標 右 鍵 后 顯 示 的 菜 單 是 彈 出式 菜 單 。 彈 出 式 菜 單下 拉
3、菜 單子 菜 單主 菜 單下 拉 式 菜 單 華 僑 大 學 9.1.1 下 拉 式 菜 單 設 計v菜 單 通 過 菜 單 編 輯 器 進 行 編 輯 菜 單 屬 性 設 置 區(qū)編 輯 區(qū) 菜 單 項 顯 示 區(qū) 華 僑 大 學 9.1.1 下 拉 式 菜 單 設 計v例 9 1 設 計 如 圖 9 3所 示 的 窗 體 , 通 過 選擇 菜 單 實 現(xiàn) 窗 體 中 詩 詞 文 字 的 顏 色 修 改 ( 紅色 、 綠 色 、 藍 色 ) 和 字 型 修 改 ( 加 粗 、 加 下劃 線 ) 。 圖 9-3 下 拉 菜 單 示 例 華 僑 大 學 9.1.2 彈 出 式 菜 單 設 計v彈
4、出 式 菜 單 使 用 PopupMenu方 法 激 活 , 其 命令 的 格 式 定 義 如 下 : PopupMenu ,flags ,x,y,boldcommand 說 明 : 對 象 名 : 默 認 為 當 前 窗 體 。 Flags: 可 選 參 數(shù) , 設 定 彈 出 式 菜 單 的 性 能 . x, y: 可 選 參 數(shù) , 設 置 彈 出 式 菜 單 顯 示 的 坐 標 值 。 boldcommand: 可 選 參 數(shù) , 指 定 著 重 菜 單 項 。 華 僑 大 學 9.1.2 彈 出 式 菜 單 設 計v例 9 2 在 例 9 1程 序 的 基 礎(chǔ) 上 添 加 彈 出式
5、菜 單 , 用 戶 在 窗 體 上 右 擊 彈 出 如 圖 9 4所 示 的 菜 單 , 用 于 設 置 字 體 和 字 號 。 華 僑 大 學 9.1.3 工 具 欄 設 計v工 具 欄 是 Active控 件 , 在 “ MicroSoft Windows Common Controls 6.0” 部 件 中 , 使 用 前 先 將 該 部 件添 加 到 工 具 箱 中 ( 請 見 7.5節(jié) ) , 之 后 工 具 箱 中 會 增加 幾 個 控 件 按 鈕 , 其 中 有 ToolBar、 StatusBar、ImageList 控 件 等 , 添 加 結(jié) 果 如 圖 9 5所 示 。圖
6、9 5 MicroSoft Windows Common Controls 6.0的 控 件v在 VB中 建 立 工 具 欄 的 方 法 有 兩 種 : 一 種 是 利 用PictureBox 和 CommandBotton兩 個 控 件 添 加 , 另 外一 種 是 通 過 ToolBar和 ImageList工 具 欄 控 件 創(chuàng) 建 。由 于 第 二 種 方 法 創(chuàng) 建 的 工 具 欄 比 較 標 準 , 因 此 這 里介 紹 利 用 第 二 種 方 法 創(chuàng) 建 工 具 欄 。 華 僑 大 學 9.1.3 工 具 欄 設 計1 ToolBar控 件工 具 欄 控 件 的 內(nèi) 容 設 置
7、如 圖 所 示 。 圖 96 工 具 欄 屬 性 頁 的 “ 通 用 ” 選 項 卡 圖 97工 具 欄 屬 性 頁 的 “ 按 鈕 ” 選 項 卡2. ImageList控 件 華 僑 大 學 9.1.3 工 具 欄 設 計v例 9 3 在 例 9 2的 基 礎(chǔ) 上 增 加 工 具 欄 項 目 ,實 現(xiàn) 文 字 顏 色 的 修 改 及 字 型 的 修 改 , 運 行 結(jié) 果如 圖 所 示 華 僑 大 學 9.2 對 話 框 設 計 9.2.1 通 用 對 話 框1 9.2.2 自 定 義 對 話 框2 華 僑 大 學 9.2.1 通 用 對 話 框v通 用 對 話 框 控 件 屬 于 VB專
8、 業(yè) 版 和 企 業(yè) 版 所 特有 的 ActiveX控 件 , 位 于 “ Microsoft Common Dialog Control 6.0” 部 件 中 。 將通 用 對 話 框 控 件 添 加 到 控 件 工 具 箱 后 , 工 具箱 中 對 應 圖 標 為 。表 95通 用 對 話 框 的 方 法方 法 功 能ShowOpen 顯 示 “ 打 開 ” 對 話 框ShowSave 顯 示 “ 保 存 ” 對 話 框ShowColor 顯 示 “ 顏 色 ” 對 話 框 ShowFont 顯 示 “ 字 體 ” 對 話 框ShowPrinter 顯 示 “ 打 印 ” 對 話 框Sh
9、owHelp 顯 示 “ 幫 助 ” 對 話 框 華 僑 大 學 9.2.1 通 用 對 話 框v例 9 4 建 立 一 個 文 本 編 輯 器 , 如 圖 9 26所 示 , 實 現(xiàn) 如 表 9 12所 示 的 菜 單 功 能 , 使用 通 用 對 話 框 控 件 實 現(xiàn) 文 本 中 文 字 的 顏 色 、字 體 的 修 改 及 打 印 文 本 內(nèi) 容 , 并 能 夠 打 開 幫助 文 件 。 圖 926 例 94的 運 行 結(jié) 果 華 僑 大 學 9.2.2自 定 義 對 話 框v自 定 義 對 話 框 在 外 觀 上 與 普 通 窗 體 的 區(qū) 別 主要 在 于 自 定 義 對 話 框
10、沒 有 控 制 菜 單 按 鈕 ( 在窗 體 標 題 欄 左 側(cè) ) 、 最 大 化 和 最 小 化 按 鈕 ,邊 框 固 定 ( 不 能 改 變 大 小 ) 。 因 此 , 需 要 設置 作 為 對 話 框 使 用 的 窗 體 的 某 些 屬 性 , 如 表 9 13所 示 。表 9 13 自 定 義 對 話 框 的 屬 性 設 置屬 性 名 屬 性 值 說 明BorderStyle 3 固 定 邊 框 , 不 能 改 變 大 小ControlBox False 取 消 控 制 菜 單 按 鈕 MaxButton False 取 消 最 大 化 按 鈕MinButton False 取 消
11、最 小 化 按 鈕 華 僑 大 學 9.2.2自 定 義 對 話 框v例 如 , 圖 9 28是 Visual Basic 6.0編 輯 菜單 中 的 “ 查 找 ” 對 話 框 , 它 有 4個 命 令 按 鈕 ,沒 有 最 大 化 和 最 小 化 按 鈕 , 也 沒 有 控 制 菜 單按 鈕 , 不 能 改 變 窗 口 的 大 小 。圖 9 28“ 查 找 ” 對 話 框 華 僑 大 學 9.3 多 重 窗 體 的 創(chuàng) 建 與 操 作 v 多 重 窗 體 是 指 一 個 應 用 程 序 中 有 多 個 并 列的 普 通 窗 體 , 每 個 窗 體 可 以 有 自 己 的 界 面和 程 序
12、代 碼 , 完 成 不 同 的 功 能 , 其 創(chuàng) 建 過程 如 下 :1. 添 加 窗 體2. 設 置 啟 動 對 象3. 與 窗 體 相 關(guān) 的 方 法4. 不 同 窗 體 間 數(shù) 據(jù) 的 存 取 華 僑 大 學 9.3 多 重 窗 體 的 創(chuàng) 建 與 操 作v例 9 5 編 寫 一 個 打 字 游 戲 程 序 , 具 有 兩 個 窗體 , 第 一 個 窗 體 選 擇 游 戲 難 度 , 第 二 個 窗 體 是打 字 游 戲 的 主 界 面 , 程 序 運 行 界 面 如 圖 9 29和圖 9 30所 示 。 程 序 具 有 檢 測 用 戶 的 輸 入 , 以 及計 算 正 確 的 輸 入
13、 字 符 數(shù) , 總 字 符 數(shù) 和 打 字 正 確率 的 功 能 。 圖 929選 擇 難 度 界 面 圖 930打 字 游 戲 界 面 華 僑 大 學 9.4 多 文 檔 界 面 的 設 計 9.4.1 多 文 檔 界 面 概 述1 9.4.2 MDI窗 體 常 用 屬 性 和 方 法 2 9.4.3 多 文 檔 界 面 的 創(chuàng) 建 與 操 作 3 華 僑 大 學 9.4.1 多 文 檔 界 面 概 述v MDI應 用 程 序 至 少 應 有 兩 個 窗 體 , 父 窗 體 和一 個 子 窗 體 。 每 個 窗 體 都 有 相 應 的 屬 性 。父 窗 體 只 有 一 個 , 而 其 中
14、包 含 的 子 窗 體 則可 以 有 多 個 .v 生 成 MDI應 用 程 序 , 操 作 步 驟 如 下 :1. 創(chuàng) 建 MDI窗 體2. 創(chuàng) 建 應 用 程 序 的 子 窗 體3. 用 命 令 打 開 多 個 子 窗 體 華 僑 大 學 9.4.2 MDI窗 體 常 用 屬 性 和 方 法1 活 動 子 窗 體 和 活 動 控 件 VB中 提 供 了 訪 問 MDI子 窗 體 的 兩 個 屬 性 ,如 表 9 19所 示 。2 顯 示 MDI窗 體 及 其 子 窗 體 AutoShowChildren屬 性 表 9 19 MDI子 窗 體 屬 性屬 性 描 述ActiveFrom 表 示
15、 具 有 焦 點 的 或 者 最 后 被 激 活 的 的 子 窗 體ActiveControl 表 示 活 動 子 窗 體 上 具 有 焦 點 的 控 件 華 僑 大 學 9.4.3 多 文 檔 界 面 的 創(chuàng) 建 與 操 作v例 9 6 制 作 一 個 簡 單 的 文 檔 編 輯 器 , 如 圖 9 37所 示 , 要 求 具 有 新 建 窗 體 , 關(guān) 閉 窗 體 ,退 出 系 統(tǒng) 的 功 能 , 并 能 夠 在 窗 口 間 執(zhí) 行 簡 單的 復 制 粘 貼 操 作 , 以 及 對 打 開 的 窗 口 進 行 布局 。 圖 9 37 文 檔 編 輯 器 的 運 行 結(jié) 果 華 僑 大 學 作 業(yè)v課 后 習 題 2, 4, 5, 6, 7, 9, 10