Using CodeLive for Java EE Websites

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  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  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.