翻譯|行業(yè)資訊|編輯:周思宇|2023-05-17 16:19:32.083|閱讀 119 次
概述:本文將為大家介紹MyEclipse中的HTML / JSP可視化設(shè)計器,歡迎下載IDE體驗(yàn)~
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
MyEclipse技術(shù)交流群:742336981 歡迎一起進(jìn)群討論
本文簡要介紹了 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è)計器
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。
設(shè)計器提供了三種編輯模式來支持任何類型的編輯。
每個模式的選項(xiàng)卡位于編輯器面板的左下方。要切換模式,請單擊要查看的模式的選項(xiàng)卡。
編輯器模式選項(xiàng)卡
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é)。
大綱視圖
為了在所有編輯模式和支持視圖中呈現(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í)時更新和同步。
要啟動HTML或JSP網(wǎng)頁設(shè)計器,請執(zhí)行以下操作之一:
屬性視圖顯示可視化設(shè)計器中所選標(biāo)記的電子表格樣式編輯器。要打開屬性視圖,請選擇窗口>顯示視圖,然后選擇屬性。Properties視圖在當(dāng)前透視圖定義的位置打開。
屬性視圖
要打開大綱視圖,請選擇窗口>顯示視圖,然后選擇大綱。Outline視圖在當(dāng)前透視圖定義的位置打開。
大綱視圖
MyEclipse Workbench透視圖的視圖安排針對web開發(fā)任務(wù)進(jìn)行了優(yōu)化。默認(rèn)透視圖包括Properties和Outline視圖以及Image Preview。您可以選擇修改工作臺透視圖的視圖組織。要將任何透視圖重置為其默認(rèn)視圖,請選擇Window> reset perspective。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn