MyEclipse技術(shù)交流群：742336981 歡迎一起進(jìn)群討論

一、HTML & JSP 可視化設(shè)計器

 本文簡要介紹了 HTML 和 JSP Web 設(shè)計器的概念、功能和基本操作過程。這兩個設(shè)計器具有相似的功能和相同的操作模型，但本文為專門針對其類型的內(nèi)容。本文檔中的示例是使用 MyEclipse HTML Designer 創(chuàng)建的。

 HTML網(wǎng)頁設(shè)計器具有設(shè)計/源代碼分屏模式，因此您可以在使用設(shè)計器時查看源代碼。HTML調(diào)色板分為HTML4、HTML5、Ionic和JQuery Mobile元素。

Ionic調(diào)色板在MyEclipse 2015 CI 11和更高版本中可用。

設(shè)計模式下的HTML網(wǎng)頁設(shè)計器

1.1內(nèi)容類型支持(HTML、JSP)

 MyEclipse HTML Web Designer專門用于創(chuàng)建和編輯HTML文件。MyEclipse JSP Web Designer用于創(chuàng)建和編輯JSP文件，包括Struts和JSF文檔。在Designer啟動過程中，將檢查正在加載的文件的內(nèi)容，Eclipse平臺根據(jù)文檔的內(nèi)容類型選擇相應(yīng)的HTML或JSP Web Designer。

1.2編輯模式

設(shè)計器提供了三種編輯模式來支持任何類型的編輯。

• 源模式——源模式是HTML和JSP代碼的源代碼編輯器，它包括智能內(nèi)容輔助、行編號、彩色語法高亮顯示、格式操作、實(shí)時驗(yàn)證、在鍵入時標(biāo)記有問題的源代碼以及代碼格式化。
  設(shè)計模式-設(shè)計模式有雙面板視圖，設(shè)計模式在頂部面板，源模式在底部面板。
• 設(shè)計模式為所見即所得的可視化編輯模式。設(shè)計畫布允許選擇、復(fù)制、剪切、粘貼和使用拖放重新定位web UI控件。此模式包括一個設(shè)計調(diào)色板，其中包含可以添加到設(shè)計畫布的UI web控件。
• 預(yù)覽模式-預(yù)覽模式允許您快速查看頁面在瀏覽器中的外觀。這種模式提供了IE預(yù)覽和Mozilla預(yù)覽。預(yù)覽模式從設(shè)計模式加載當(dāng)前源代碼，即使編輯器內(nèi)容尚未保存。HTML源代碼以預(yù)覽模式呈現(xiàn)，并且“扎根”于資源所在的位置。如果HTML文檔中的圖像相對于HTML頁面的當(dāng)前位置，則圖像將在預(yù)覽中正確呈現(xiàn)。

每個模式的選項(xiàng)卡位于編輯器面板的左下方。要切換模式，請單擊要查看的模式的選項(xiàng)卡。

編輯器模式選項(xiàng)卡

1.3屬性和大綱視圖

 HTML和JSP Web Designer特性集包括針對所有HTML、JSP、JSF和Struts標(biāo)記的自定義屬性編輯器以及結(jié)構(gòu)化的Outline視圖。當(dāng)在Source面板、Design面板或Outline視圖中選擇相應(yīng)的標(biāo)記時，自定義屬性編輯器將自動激活并顯示在Properties視圖中。

屬性視圖

 Outline視圖提供Visual Designer內(nèi)容的結(jié)構(gòu)化樹狀視圖。Outline視圖中的節(jié)點(diǎn)可以添加、刪除、展開和收縮。有關(guān)如何打開Properties和Outline視圖的說明，請參見第2節(jié)。

大綱視圖

1.4編輯器模式與視圖的同步

 為了在所有編輯模式和支持視圖中呈現(xiàn)web文檔當(dāng)前狀態(tài)的準(zhǔn)確視圖，可視化設(shè)計器維護(hù)兩種類型的信息同步。第一個是選擇同步。可視化設(shè)計器在“源”和“設(shè)計”窗口以及“大綱”和“屬性”視圖之間維護(hù)一個公共選擇上下文。第二種形式的同步稱為“設(shè)計-源同步”，它發(fā)生在“源”窗口的源代碼和“設(shè)計”窗口的所見即所得呈現(xiàn)狀態(tài)之間。

1.4.1選擇同步

 選擇同步使您能夠在“源”窗口、“設(shè)計”窗口或“大綱”視圖中選擇任何位置，并讓所有視圖顯示公共選擇上下文。此外，如果公共選擇涉及HTML、JSF或Struts標(biāo)記，Properties視圖將顯示該標(biāo)記的自定義屬性編輯器。下圖說明了選擇Login按鈕如何導(dǎo)致Outline視圖滾動到并突出顯示Login按鈕的HTML“<input>”標(biāo)記，Source窗口滾動到并突出顯示包含按鈕源代碼的源行。

選擇同步

1.4.2設(shè)計源同步

 “源”窗口是“設(shè)計”窗口、“預(yù)覽”窗口以及“屬性”和“大綱”視圖同步其狀態(tài)的主面板。當(dāng)在Design窗口、Properties視圖或Outline視圖中啟動編輯操作時，該操作將被路由到Source窗口，在該窗口中應(yīng)用該操作并更新源。然后，Source窗口向其他面板、窗口和視圖發(fā)出特定更改的信號，使它們的表示狀態(tài)與Source窗口的表示狀態(tài)同步。您可以觀察到源代碼和呈現(xiàn)的設(shè)計正在實(shí)時更新和同步。

二、啟動網(wǎng)頁設(shè)計器，相關(guān)視圖和透視圖

要啟動HTML或JSP網(wǎng)頁設(shè)計器，請執(zhí)行以下操作之一:

• 雙擊HTML或JSP文件以啟動Visual Designer
• 右鍵單擊HTML或JSP文件，然后選擇Open或Open With>MyEclipse HTML Designer或MyEclipse JSP Designer。

2.1打開屬性視圖

 屬性視圖顯示可視化設(shè)計器中所選標(biāo)記的電子表格樣式編輯器。要打開屬性視圖，請選擇窗口>顯示視圖，然后選擇屬性。Properties視圖在當(dāng)前透視圖定義的位置打開。

屬性視圖

2.2打開大綱視圖

 要打開大綱視圖，請選擇窗口>顯示視圖，然后選擇大綱。Outline視圖在當(dāng)前透視圖定義的位置打開。

大綱視圖

2.3重置MyEclipse透視圖

 MyEclipse Workbench透視圖的視圖安排針對web開發(fā)任務(wù)進(jìn)行了優(yōu)化。默認(rèn)透視圖包括Properties和Outline視圖以及Image Preview。您可以選擇修改工作臺透視圖的視圖組織。要將任何透視圖重置為其默認(rèn)視圖，請選擇Window> reset perspective。