Chapter 6

Form

6.4 視窗設計平台操作 (design framework)

進入視窗設計模式 (design mode)

返回主控制面板 (exit to control panel)

配置元件 (layout components)

元件選取、移動、屬性編輯 (select、move、edit components)

元件對齊 (alignment)

元件複製、拷貝、貼上 (duplicate、copy、paste)

元件偏好設定 (component preference)

進入測試執行模式 (run mode)

瀏覽 Java 程式碼 (Java source code)

重讀圖檔 (reload Images)

編輯 Hash 變數 (Hash & SysHash editor)

　

進入視窗設計模式 (design mode)

進入視窗設計畫面，可以在【控制面板】按下 設計  ( 進入設計模式 )，或是點選該視窗，然後按滑鼠右鍵，選擇設計 (design)，如下圖所示。　

視窗設計環境：

▲Top

　

返回主控制面板 (exit to control panel)

  • 返回主面板 (back to console)：離開設計畫面，回到控制面板。
    　

  • 儲存修訂 (save modified)：在設計模式下，未執行儲存修訂 (save modified) 前，所有的變更都尚未儲存，因此當程式有類似迴圈的邏輯時，建議在測試執行前先行存檔動作，以免進入無窮迴圈後，程式必須強制中止而無法存檔，將會喪失存檔前的所有設計內容。
    　

  • 重讀圖片 (reload images) ：參閱 重讀圖片。
    　

  • Hash & SysHash 編輯器 (hash & syshash editor)：參閱 Hash & SysHash 編輯器。
    　

  • 視窗 screen capture：在視窗設計期或測試執行期，將作業的視窗快照 (snap shot) 並存成圖檔(*.png)。執行時系統會出現訊息視窗，詢問置放圖檔的位置與檔名。預設存放於【應用程式目錄】【doc】【screen】目錄下以視窗名稱為檔名。
    　

  • 元件設計提示 (tooltips)  ：滑鼠移過元件時是否出現元件設計屬性提示視窗。
    　

  • 寬鬆性觸發資料來源檢查 (lenient trigger data source check)：觸發資料來源 (trigger data source) 欄位型別檢查是否使用寬鬆性檢核 (lenient)。參閱 觸發資料來源欄位檢查。

    　

▲Top

　

配置元件 (layout components)

  • 由工具列選擇 (components toolbar)：以滑鼠點選所需元件，然後將滑鼠移至工作視窗上，此時滑鼠游標會顯示十字符號，再將滑鼠移到所要的位置上，點滑鼠左鍵置放即可。

  • 由資料欄位拖放 (data field)： 設計時可以由資料來源中，選取一個資料欄位，直接拖曳到工作視窗 ( form) 上，此時會顯示一個設定對話框：

    　

    • 位置 (position)：元件置放位置。
      　

    • 連結資料來源 (link data source )：顯示選擇的資料來源中的資料欄位。
      　

    • 元件名稱 (component name)：元件名稱。
      　

    • 置標籤於 (put label at)：是否加上標籤元件，及使用時的位置。

      • 無 (none)：不需標籤元件。

      • 左 (left)：標籤位於元件左方。

      • 上 (top)：標籤位於元件上方。
        　

    • 標籤 (label)：當使用標籤元件 (label component) 時，請填入標籤內容。
      　

    • 元件類別 (component type)：選擇連結資料欄位的元件類別。

      • 編輯方塊 (Edit component)

      • 核取方塊 (CheckBox component)

      • 選擇鈕 (RadioGroup component)

      • 清單方塊 (ListBox component)

      • 下拉式清單方塊  (ComboBox component)

      • 計數器元件 (Slider component)

    　

    　

  • 由資料來源拖放 (data source)：如果要將整個資料來源的所有欄位一起配置於工作視窗 (form) 上，請直接標示資料來源，然後拖曳 (drag) 到工作視窗上所要配置元件的起始位置，置放後 (drop) 會出現設定精靈 (layout wizard)：

    　

    • 擺設 (layout components)

      • 開始位置 (start position)：設定開始位置。

      • 元件間隙 (gap between component)：設定元件間隙。

      • 標籤位置 (label position)：是否使用標籤，及使用時的位置。

      • 擺設方向 (layout position)：元件擺設方向。

    　

    　

    • 資料欄位 (fields)：可以分別為資料欄位選擇連結的元件類型。

      • 選擇 (select)：是否為此資料欄位配置元件。

      • 資料欄位名稱 (field name)：資料表的資料欄位名稱。不可編輯。

      • 元件名稱 (component name)：元件名稱，可自訂名稱，不可重複。

      • 元件類別 (component type)：由下拉式選單選擇連結資料欄位的元件類別。

▲Top

　

元件選取、移動、編輯 (select、move、edit components)

  • 選取 (select)：
    　

    • 單一元件：當滑鼠移至元件且元件顯示八個色框時，該元件即在選取狀態。

    • 多個元件：以滑鼠按住左鍵並拉出涵蓋的範圍，放開滑鼠後，被選取的元件會以綠框標示。

      • 加入選取：選取多個元件後，可以再以滑鼠點選未標示綠框的其他元件加入選取。

      • 取消選取：可在已選取的元件中，再以滑鼠點選，將其排除於選取範圍外。
        　

  • 移動 (move)：
    　

    • 單一元件：以滑鼠拖拉移動元件或按住鍵盤的 Ctrl 加 ←↑↓→ 鍵，微調元件位置。以滑鼠拖拉選取元件的色框可改變元件大小尺寸。

    • 多個元件：選取多個元件，以滑鼠拖拉移動元件或按住鍵盤的 Ctrl 加 ←↑↓→ 鍵，微調元件群組位置。

    • 標籤頁元件：移入選取元件時，所選取元件最左上角須落入 (hit) 標籤頁的頁面中，且標籤頁面須能容納所有選取元件，系統才會進行移入。從標籤頁元件移出時，所選取的元件最左上角，落入 (hit) 到視窗中，系統即進行移出。
      　

  • 編輯 (edit)：
    　

    • 單一元件：元件於選取狀態時，以滑鼠雙擊 (double clicked) 進入屬性編輯，或按右鍵選取屬性編輯選單。

    • 多個元件：選取多個元件，按右鍵選取支援多個元件的功能選單。

▲Top

　

元件對齊 (alignment)

  • 對齊 (alignment)： 必須先選取多個元件，才可以使用此功能。選取的方式，以按住滑鼠左鍵並拉出涵蓋的範圍，放開滑鼠後，被選取的元件會以綠框標示。可以再以滑鼠，點選未標示綠框的其他元件加入選取；或點選已加入的元件將其排除於選取範圍。

    　

    • 復原 (undo)

    • 靠視窗左邊界對齊 (alignment to form left)

    • 靠視窗上邊界對齊 (alignment to form top)

    • 靠視窗右邊界對齊 (alignment to form right)

    • 靠視窗下邊界對齊 (alignment to form bottom)

    • 水平靠左 (horizontal left)

    • 水平靠中 (horizontal center)

    • 水平靠右 (horizontal right)

    • 水平置於視窗中間 (horizontal form center)

    • 水平平均分配距離 (horizontal equal space)

    • 垂直靠上 (vertical top)

    • 垂直靠中 (vertical center)

    • 垂直靠下 (vertical bottom)

    • 垂直置於視窗中間 (vertical form center)

    • 垂直平均分配距離 (vertical equal space)

    • 刪除(delete)

當選取範圍包含多個元件時，控點會成標示為綠色，這時可以一次移動多個元件或改變字型及元件大小。

　

要一次改變所有元件大小和字型的方法是先選取目標元件，然後在上方點滑鼠右鍵即可出現下列功能選單 (menu)，點選選單項目後即可進行作業。

　

當元件在索引標籤元件 (Tabbed panel) 中時，標示的控點為粉紅色。

▲Top

　

元件複製、拷貝、貼上 (duplicate、copy、paste)

  • 複製 (duplicate)：在同一視窗上複製相同的元件，可設定複製數量。請在目標元件上按滑鼠右鍵，選擇複製。
    　

  • 拷貝 (copy)：拷貝元件。拷貝的元件可貼至其他視窗或其他應用程式的視窗。
    　

  • 貼上 (paste)：貼上元件。
    　

  • 刪除 (delete)：刪除選取的元件。

▲Top

　

　

元件偏好設定 (component preference)

　

設計師在工作視窗下配置元件 (layout component) 時，系統會以預設的元件屬性 (大小、外觀、字型) 配置元件。設計師可以隨時將編輯過的元件，按滑鼠右鍵選擇【存成個人喜好】選單功能，將其屬性設定為預設元件屬性，下一次執行配置時，即會以新的預設屬性配置該類別元件。

jLIVE Builder™ 的系統預設元件屬性偏好設定檔 prefer.xml 位於 jLIVE\xml\ 目錄下，每當設計師新增一個應用程式時，jLIVE Builder™ 會將 prefer.xml 複製到該應用程式路徑 \xml\目錄下，並更名為 _prefer.xml，所以 jLIVE Builder™ 的每一個應用程式皆有獨立的元件屬性偏好設定檔。設計師亦可將應用程式的元件屬性偏好設定檔 _prefer.xml 回存到jLIVE\xml\ 目錄下，更名取代原有的 prefer.xml，系統在下一次新增應用程式時，即以其為預設元件屬性偏好設定檔。

多人協同開發應用程式時，系統規劃師可以先行設定各個元件的預設偏好 _prefer.xml，並將其分發至工作群組的各個設計師，應用系統開發時，每一位設計師的視窗模組即能有一致的外觀與介面。

　

▲Top

　

　

進入測試執行模式 (run mode)

  • 視窗畫面 (forms)

    　

    • 視窗屬性 (form properties)：進入視窗屬性設定頁。
      　

    • 執行 (run)：測試視窗執行。
      　

    • 設計 (design)：當進入測試執行時，可以使用這個按鍵回到設計畫面。

▲Top

　

瀏覽 Java™ 程式碼 (Java™ source code)

　

按下瀏覽按鍵後 ，系統會先將目前的設計視窗存檔，之後產生此視窗的 Java™ 程式碼，在程式碼的瀏覽視窗中，不能編輯修改原始碼。 jLIVE  Builder™ 提供程式設計師自行加入 Java™ source code ，並保留此段程式碼。加入的方法為利用註解標籤  //<reserve> 和 //</reserve> 將自行加入的程式內容用此標籤包住。自行加入程式碼後如果再進入jLIVE  Builder™ 編輯設計，jLIVE  Builder™ 在產生 Java™ source code ( *.java ) 時將會把以 //<reserve> 和 // </reserve> 標籤包住的程式碼，放在 source code 的最下面並將其標示成註解，並不會覆蓋或刪除掉，設計師必須重新將此段程式，安置於適當的地方， 然後再將 *.java  compile 成 class。

▲Top

　

重讀圖檔 (reload Images)

  • 重讀圖片 (reload images)：設計時，修改、刪除、增加圖片檔 (image file) 到 preloadimages 或 images 等目錄，必須重讀圖片，才可以使用那些圖片 (image file)。

▲Top

　

編輯 Hash 變數 (Hash & SysHash editor)

  • Hash & SysHash 編輯器 (Hash & SysHash editor)：只有在設計狀態 (design mode) 才有效。 每個應用程式皆有獨立的 Hash 跟 SysHash 變數，當設計視窗需要這些變數時，可以在編輯器中先編輯好預設的資料值，以利測試執行。

    　

    1. 輸入鍵 (key) 與鍵值 (value)。

    2. 按下存檔按鍵。

    3. 出現訊息視窗時，按是。

　

▲Top

　

Copyright © 2001~ 2004 Probe Technology . All Rights Reserved.

Questions, comments, and suggestions to Service@probe.com.tw