Using CodeLive for Java EE Websites

CodeLive makes it simple to see which files are being loaded on a web page and quickly jump from the page to the source. And you can instantly view changes to your HTML, CSS and JSP within your normal workflow. You can even test multiple browsers at once and test simulated mobile devices.

CodeLive for Java EE is available in MyEclipse.

1. Setting up CodeLive

CodeLive connects the browser to the IDE. You have the option to turn on CodeLive for each Java EE server. In addition, you have the option to select the files to live preview in the browser for your Java EE web sites. 

1.1 Turning CodeLive On/Off

 There are two different methods to turn this feature on or off.

From the Servers View Toolbar

Select a Java EE server from the Servers view and click the Enable CodeLive button. This button acts as a toggle, turning CodeLive on or off. The icon is highlighted when CodeLive is enabled.

CodeLive Button

From the Servers View Context-Menu

Right-click a Java EE server from the Servers view and select CodeLive. This menu option acts as a toggle, turning CodeLive on or off.  The icon is highlighted when CodeLive is enabled.

CodeLive Menu Option

1.2 Selecting Files to Live Preview

When CodeLive is enabled, you can select the files in your Java EE project that you want to Live Preview.

  1. View the web page in your browser.
  2. Click the CodeLive icon CodeLiveIcon to open the CodeLive Dashboard.

    CodeLive Dashboard
  3. Select each file that you want to enable Live Preview for.
  4. Click the Close button.
  5. Refresh your web page.

2. Viewing Edits to Your Java EE Website with Live Preview

After enabling CodeLive for a Java EE server and enabling Live Preview for files used to load pages in the project, you are ready to view pages from your project and see your edits in real time.

Note:  Live Preview is designed to work in modern browsers that include web socket support.  Internet Explorer 9 and below are not compatible with Live Preview.

  1. View a web page from your project in one or more browsers. You can use a mobile emulator to view changes as they would appear on mobile devices.
    Tip: View multiple pages at once to test CSS changes.
  2. Edit the HTML, CSS or JSP file associated with the file being viewed. Changes to items such as lists, page structure, Div styling, colors, fonts and margins are immediately reflected in the browser.
    Note:  With the initial release of Live Preview, support for Java Server Pages (JSP) is included as an experimental preview feature. While working in static areas of the page, you can expect high quality in relaying changes real-time to the browser. However, working with areas touching dynamic areas will not fully work as the server-side processing changes values in ways that are not tracked. Further enhancements will be included in future CI releases.
  3. Live Highlighting lets you quickly see which areas on a page are affected by a change.  When your cursor is placed in an HTML file, the corresponding elements are highlighted in the browser.  When your cursor is on a rule in a CSS file, all affected elements are highlighted in the browser. Live Highlighting is available from the Source Editor or Outline view.

    Web page viewed in multiple browsers at once

3. Viewing Source Code

When viewing a page in the browser, you have the option to view the source files loaded in the browser and open any file in the IDE or jump directly to the source file from an element on the page. 

3.1 Viewing and Opening Source Files

  1. View the web page in your browser.
  2. Click the CodeLive icon CodeLiveIcon to open the CodeLive Dashboard.

    CodeLive Dashboard
  3. Click the Magnifying Glass icon   next to the file you want to view. The file opens in the source editor.

3.2 Jumping to Source Code from an Element

  1. View the web page in your browser.
  2. Click the Magic Wand icon .
  3. Hover over an element on the page. The file name displays below the element. 
  4. Click the element. The file opens in the source editor at the corresponding line.
    Note: If you have not enabled Live Preview, you are prompted to enable Live Preview for the source file. Select the file and reload the page to open the source file. 

4. Compatibility Matrix

Live Preview was successfully tested in the following environments.

ChromeFirefoxInternet ExplorerEdgeSafariInternal Browser
Win 7 64XXX
Windows 8.1 64XXX
Windows 10 64XXXXX
Linux Mint 16/17XX
OSX 10.11X
Linux Fedora 23 x64XX

*Typically Internet Explorer in Windows tests.

5. Known Issues

You may experience unexpected outcomes in the following situations:

  • Tag Library Entries Ignored
    Elements for tag libraries will be ignored as part of Live Preview. Changes in static blocks on pages can still be expected to work, though text or element nodes that are siblings of the tab library elements can cause unexpected results.
  • Full File Replace Not Supported
    When working with files, if you copy/paste an entire file to replace a current file, or are updating via GIT, you’ll need to reconnect your Live Preview session.  Live Preview is optimized for changes you are making yourself in the file, and is not designed to work on massive restructurings.