使用MyEclipse開發Java EE應用：在Java EE網站上使用CodeLive

  購買MyEclipse

設置CodeLive

CodeLive將瀏覽器連接到IDE。您可以選擇為每個Java EE服務器打開CodeLive，也可以選擇要在Java EE網站的瀏覽器中實時預覽的文件。 

• 打開/關閉CodeLive

有兩種方法可以打開或關閉此功能。

1、從Servers View Toolbar

從Servers中選擇一個Java EE服務器，單擊Enable CodeLive按鈕（這個按鈕起切換的作用），打開或關閉CodeLive。當啟用CodeLive時，圖標高亮顯示。

2、從Servers View Context-Menu

在“Sever”視圖中右鍵單擊Java EE服務器，然后選擇CodeLive（此菜單選項用作切換）可打開或關閉CodeLive。啟用CodeLive時，該圖標突出顯示。

• 選擇文件進行實時預覽

啟用CodeLive后，可以在Java EE項目中選擇要實時預覽的文件。

1、在瀏覽器中查看網頁。

2、單擊CodeLive圖標打開CodeLive儀表板。

3、選擇要為其啟用實時預覽的每個文件。

4、單擊關閉按鈕。

5、刷新網頁。

使用Live Preview查看對Java EE網站的編輯

在為Java EE服務器啟用CodeLive并為用于加載項目中頁面的文件啟用實時預覽后，就可以查看項目中的頁面并實時查看所做的編輯。

注意：Live Preview被設計用于包含web socket的現代瀏覽器，Internet Explorer 9及以下版本與Live Preview不兼容。

1、在一個或多個瀏覽器中查看項目中的網頁。可以使用移動模擬器  來查看更改，就像在移動設備上一樣。

提示：建議一次查看多個頁面以測試CSS更改。

2、編輯與正在查看的文件關聯的HTML、CSS或JSP文件。對列表、頁面結構、Div樣式、顏色、字體和邊距等項目的更改會立即反映在瀏覽器中。

注意：在Live Preview的初始版本中，對Java Server Pages（JSP）的支持作為實驗性預覽功能包括在內。在頁面的靜態區域中工作時，可以將高質量的內容實時傳遞到瀏覽器。但是，由于服務器端處理以未跟蹤的方式更改了值，所以使用區域接觸動態區域不會完全工作。將來的CI版本中將包含更多增強功能。

3、實時突出顯示使您可以快速查看頁面上哪些區域受到更改的影響。將光標放在HTML文件中時，相應的元素在瀏覽器中會突出顯示。當光標位于CSS文件中的規則上時，所有受影響的元素都會在瀏覽器中突出顯示。實時高亮顯示可從“Source Editor”或“Outline”視圖中獲得。

  購買MyEclipse

查看源代碼

在瀏覽器中查看頁面時，可以選擇查看瀏覽器中加載的源文件，并在IDE中打開任意文件，或從頁面上的元素直接跳轉到源文件。 

• 查看和打開源文件

1、在瀏覽器中查看網頁。

2、單擊CodeLive圖標打開CodeLive儀表板。

3、單擊 要查看的文件旁邊的放大鏡圖標。該文件將在源代碼編輯器中打開。

• 從元素跳轉到源代碼

1、在瀏覽器中查看網頁。

2、單擊魔術棒圖標。

3、將鼠標懸停在頁面上的元素上，文件名將顯示在元素下方。 

4、單擊元素。該文件將在源代碼編輯器的相應行中打開。

注意：如果尚未啟用實時預覽，則會提示您為源文件啟用實時預覽。選擇文件并重新加載頁面以打開源文件。 

兼容性矩陣

Live Preview在以下環境中成功測試。

*通常在Windows測試中使用Internet Explorer。

已知問題

在以下情況下，您可能會遇到意外的結果：

• 忽略標記庫條目。

• 標簽庫的元素將作為實時預覽的一部分被忽略。頁面上靜態塊中的更改仍然可以正常工作，但是與標簽庫元素相同的文本或元素節點可能會導致意外結果。

• 不支持完全文件替換。

• 使用文件時，如果您復制/粘貼整個文件來替換當前文件，或者通過GIT更新，則需要重新連接Live Preview會話。Live Preview是為您在文件中所做的更改而優化的，并不適用于大規模重組。

慧都16周年·技術服務月，軟件商城優惠券不限量免費領取，購MyEclipse/CodeMix享折上折>>>

想進一步了解MyEclipse？知你所需，解你所惑！

想與更多人聊MyEclipse？加入MyEclipse中國（官方2）：742336981暢所欲言吧！

想及時獲取MyEclipse資訊？掃描下方二維碼，MyEclips信息跟你走！