翻譯|行業資訊|編輯:周思宇|2023-05-18 10:17:37.820|閱讀 108 次
概述:本文將繼續為大家介紹MyEclipse中的HTML / JSP可視化設計器以及對一些相關問題的解答,歡迎下載IDE體驗~
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
MyEclipse技術交流群:742336981 歡迎一起進群討論
“設計”窗口由所見即所得的網頁設計畫布和UI控制面板組成。在此窗口中,您可以插入、編輯、刪除和移動 HTML 和 JSP UI 控件和文本。拖放操作可以輕松實現重新定位設計畫布上的UI控件。擴展的復制/粘貼操作能夠將放置在系統剪貼板上的外部源的文本和HTML內容添加到設計畫布中。設計畫布呈現相對于正在編輯的文檔定位的 CSS 樣式和圖像。本文將更詳細地定義這些操作。
Visual Designer文本編輯功能類似于文字處理器的功能。它們使您能夠在網頁上的任何地方輸入,刪除和修改文本。若要添加文本,請將光標置于所需位置并鍵入。若要刪除文本,請將光標放在指定位置或選擇文本,然后按“刪除”鍵或“退格”鍵。主工具欄包括以下文本屬性的操作:下劃線、粗體、斜體、小字體和大字體。根據這些工具欄操作對當前設計或源選擇上下文的適用性,動態啟用/禁用它們。當沒有選擇文本時,文本工具將被禁用。請注意,應該使用CSS控制顏色、縮進或對齊方式等文本屬性。
設計模式包括一個 UI 控件調色板,用于將新的 UI 控件添加到設計畫布。JSP Web Designer 的 UI 調色板包括 HTML、JSP、JQuery 和 JSTL 控件。如果這些方面已添加到項目中,則還包括 Struts 和 JSF 控件。 的調色板僅包含 HTML4、HTML5 和 JQuery UI 控件。
當向web文檔添加JSF或Struts UI控件時,必須確保頁面包含適當的標簽庫條目,例如,' <%@ taglib uri= " //java.sun.com/jsf/html " prefix= " h " %> ',以避免編輯器中的設計時驗證錯誤和部署時的運行時錯誤。請注意,當您將元素從Struts和JSF調色板拖到設計器中時,taglib條目將為您添加。
HTML和JSP UI控件面板
若要從調色板中添加UI控件,請將該控件拖到頁面上所需的位置。
右鍵單擊Design窗口將打開上下文菜單,其中包含對當前設計選擇有效的操作。下面是表行中選擇的示例。上下文菜單顯示HTML表可用的操作。
可用于表元素的上下文菜單操作
Design面板可以識別通過鏈接到樣式表文件或使用文檔內樣式或行內樣式屬性定義的CSS樣式。
設計模式使用<LINK>標簽加載和呈現在<HEAD>元素中鏈接的樣式表。與圖像類似,如果<LINK>標記的href屬性是指向CSS文件的相對鏈接,樣式表將以Design模式呈現。
<link rel= " stylesheet " type= " text/css " href= " ./styles.css " />
CSS樣式可以在web文檔中使用' HEAD '元素中的STYLE元素來指定。
<STYLE type="text/css"> div { border: 2px solid black; color: red; } </STYLE>
下面是一個內聯樣式屬性的示例。設計模式識別這些屬性并立即呈現它們。
<div style="background: blue;"/>
使用JSP Web Designer進行JSP文檔的視覺設計與HTML頁面設計的不同之處在于:
可視和非可視JSP元素
呈現JSP腳本元素和非可視標記的目的是讓您意識到腳本元素相對于源代碼中的UI控件的存在??梢允褂妙愃朴谌魏蜨TML或JSP UI控件的復制/粘貼和拖放操作對這些非視覺元素進行視覺上的重新定位。因此,拖放scriptlet元素是可能的。
注意:可以通過選擇和刪除非視覺元素的視覺工件或刪除包含非視覺元素的多個元素選擇來刪除非視覺元素。
JSP Web Designer提供了對許多標記庫的呈現支持,包括JSF和Struts HTML標記庫。并非所有JSTL標記和自定義標記都有專門的設計時呈現支持。對于這些標記,默認的設計時呈現是灰色標記名。下圖展示了幾個JSTL標記的默認設計時呈現。
默認元素呈現
預覽模式使您能夠快速查看web文檔,因為它將在運行時呈現。預覽模式有IE或Safari預覽(取決于平臺)以及Mozilla預覽。對于包含Struts和JSF HTML標記的jsp, Preview模式計算并嘗試將每個標記轉換為其運行時HTML表單。在許多情況下,這些標簽的動態特性阻礙了準確的翻譯,因為只有在運行時數據庫或web服務等資源可用時才有可能進行準確的翻譯。預覽模式支持的Struts和JSF標簽是:
訂單預覽
Linux和Mac平臺是否支持Source/Design模式?
是的。
設計模式是否支持 JavaScript 執行?
否。Design模式禁用HTML和JSP文檔中的所有JavaScript求值。使用預覽模式來獲得有限的JavaScript支持。
在設計模式下,是否可以調整UI控件的大小?
是的。
CSS絕對定位在設計模式下可用嗎?
目前還不行。
不包含<taglib> 指令的JSP 片段如何進行設計?
當taglib指令不存在時,MyEclipse引用在項目級別或MyEclipse首選項中全局定義的默認標記庫名稱空間前綴。要查看或編輯這些名稱空間前綴,請查看MyEclipse首選項(從菜單中選擇Window> preferences,展開MyEclipse>Java Enterprise Project>Web Project,并選擇Tag Libraries)或任何項目的屬性(右鍵單擊項目,從菜單中選擇properties,展開MyEclipse>Web,并選擇Tag Libraries)。
大型設計編輯后,同步回源需要幾秒鐘。我能做些什么?
如果長時間的同步是由設計編輯引起的,通常可以通過在Source窗口中進行更改來避免或最小化這些同步。除了更新源代碼外,設計編輯還經常重新格式化源代碼以提高可讀性,因為它是機器生成的,因此由于工作量增加,需要更長的時間。此外,由于架構原因,從“設計”窗口到“源”窗口的編輯同步本身就比從“源”窗口到“設計”窗口慢。因此,為了獲得最大的編輯速度,Source窗口可以更方便地進行導致文檔結構更改的編輯。
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn