⁠3.6. Change the Application Client-side Functionality

⁠3.6.1. Enable LiveReload in BrowserSim

Before making changes to the my-mobile-app project, it is useful to enable LiveReload in BrowserSim. LiveReload functionality automatically updates content displayed in web browsers as the corresponding source code is modified and saved in IDE editors, making the IDE workflow more efficient. This functionality is available for all web browsers and the procedure below details how to enable LiveReload in BrowserSim.
⁠

Procedure 3.4. Enable LiveReload in BrowserSim

  1. In the Servers view, right-click jboss-eap-version where version denotes the JBoss EAP version, and click New→Server.
  2. From the list of servers, expand Basic, select LiveReload Server and click Finish. The LiveReload server is listed in the Servers view.
    ⁠
    Description

    Figure 3.9. LiveReload Server Selected in the New Server Wizard

  3. Right-click the LiveReload Server and click Start.
  4. Right-click the BrowserSim simulated device and click Enable LiveReload. LiveReload functionality is now enabled on the simulated device and ready for use.
    ⁠
    Description

    Figure 3.10. LiveReload Functionality Enabled on the Simulated Device

Report a bug

⁠3.6.2. Modify index.html

The project HTML resources can be edited with the JBoss Tools HTML Editor, as demonstrated in the procedure below. With LiveReload enabled in BrowserSim, any changes to the HTML source are automatically reflected in the simulated device web browser on saving.
⁠

Procedure 3.5. Modify index.html

  1. In the Project Explorer view, expand my-mobile-app→src→main→webapp.
  2. Double-click index.html to open it in the JBoss Tools HTML Editor.
  3. Ensure the JBoss Tools HTML Editor Source tab is the tab in focus.
    ⁠
    Description

    Figure 3.11. index.html Opened in the JBoss Tools HTML Editor

  4. Scroll through the index.html file and locate the body tag.
  5. Delete the following: 
    <p>You have successfully deployed a Java EE 6 web application.</p>
<p>This quickstart demonstrates the use of various Mobile, HTML5, CSS3 and JavaScript techniques.</p>

<ul id="features">
<li class="feature">Pure HTML client</li>
<li class="feature">JAX-RS GET &amp; POST end points</li>
<li class="feature">HTML5 based page structure</li>
<li class="feature">HTML5 form element &amp; validation</li>
<li class="feature">CSS3 selectors used for styling</li>
<li class="feature">JAX-RS validation handling</li>
<li class="feature">jQuery Mobile integration</li>
<li class="feature">QUnit test suite to validate JavaScript</li>
</ul>
  6. Replace the deleted code with the following: 
    <p>My Mobile Application!</p>
  7. Save the index.html file by pressing Ctrl+S. Alternatively, to save click File→Save or click the Save icon. The page reloads in the BrowserSim simulated device, as a result of LiveReload being enabled, and shows the updated index.html file.
    ⁠
    Description

    Figure 3.12. Changes to index.html File Shown on the Simulated Device

Report a bug