Webclipse

Using Live Preview

Use the Live Preview capabilities in CodeLive for more efficient web coding. Instantly view changes to your HTML, CSS and JSP within your normal Java EE development workflow.  Plus, you can view these changes in multiple browsers and simulated mobile devices simultaneously. View a list of all source files associated with the page with the option to open the files in the source editor, or jump directly to the source from an element on the page.

Back to Learning Center

Download Webclipse

1. Setting up Live Preview

To set up Live Preview, you must turn on CodeLive and then select the files to live preview in the browser.

 

1.1 Turning CodeLive On/Off

CodeLive can be turned on or off per server from the Servers view. There are two different methods to turn this feature on or off.

From the Servers View Toolbar

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

From the Servers View Context-Menu

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

1.2 Selecting Files to Live Preview

When CodeLive is enabled, you can select the files in the 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.

    CodeLiveSelection
    CodeLive Dashboard
  3. Select the files that you want to use Live Preview.
  4. Click the Close button.
  5. Refresh your web page.

        2. Viewing Web Page Edits with Live Preview

        After enabling CodeLive for the server and enabling Live Preview for pages in the project, you are ready to view pages from your project and view changes 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.live-preview-in-actionHTML file viewed in multiple browsers and a mobile emulator

        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.
          CodeLiveSelection
          CodeLive Dashboard
        3. Click the Magnifying Glass icon magnify 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 2016-07-26_9-43-29.
        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. Using the Tutorial

        In the Webclipse Dashboard, you will find links to tutorials for each of the key areas in Webclipse. These tutorials are listed in the Ready to try a capability? section. Use the sample project to experiment with Live Preview and see how efficient web development is when using Live Preview.

         

        DashboardTry
        Access sample projects from the Webclipse Dashboard

        Note: If you do not see the Webclipse dashboard, select Help>Webclipse>Show Dashboard.

         

        4.1 Start the Tutorial for Live Preview

        To begin the Live Preview tutorial, click Try Live Preview. A Webclipse-Live-Preview-Example project is added to your Project Explorer and the index.html file is opened in the editor. Read the content in the html file to learn about Live Preview. If you have a modern browser installed, simply deploy your application to a Java EE application server and open the page. Then, play around with the file and see your changes automatically reflected in the browser. You’ll soon wonder how you ever developed for the web without Live Preview!

         

        4.2 Restart the Tutorial

        If at any point you want to restart the tutorial, follow the instructions above and select to Overwrite the project when asked.

        ProjectExists
        Restarting a tutorial

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

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