Chapter 9. Mobile Web Tools basics in CodeReady Studio

Mobile Web Tools provide an HTML5 Project wizard that enables you to create web applications optimized for mobile devices. The HTML5 Project wizard is a useful starting point for creating all new HTML5 web applications in the IDE. The wizard generates a sample ready-to-deploy HTML5 mobile application with REST resources from a Maven archetype.

You can customize the application using the built-in editor, deploy and view the application with the built-in browser.

The IDE provides the Mobile Web palette that allows the user to make interactive web applications. This palette offers a wide range of features including drag-and-drop widgets for adding common web interface framework features such as HTML5, jQuery Mobile, and Ionic tags to html files. It also contains widgets like Panels, Pages, Lists, Buttons to make the applications more user friendly and efficient.

The following section describes how to:

  • Create an HTML5 project.
  • Add a new jQuery mobile file to a project.
  • Add a new jQuery mobile page to a project.

Prerequisites

The IDE must be configured for any servers to which you want to deploy your application, including the location and type of the application server and any custom configuration or management settings. The following sections assume you completed the configuration in advance, but that step can also be completed at deployment.

9.1. Creating an HTML5 Project

The HTML5 Project wizard generates a sample project based on a Maven archetype and the project and application identifiers provided by you. The Maven archetype version is indicated in the Description field in the first page of the wizard and you can change the version, and therefore the project look and dependencies, by selecting either an enterprise or non-enterprise target runtime within the wizard.

The following section describes how to create an HTML5 project in CodeReady Studio.

Procedure

  1. Start CodeReady Studio.

  2. Press Ctr+N.

    The New window appears.

  3. Enter HTML5 in the search field.
  4. Select HTML5 Project.

  5. Click the Next button.

    The New Project Example window appears.

  6. Click the down-arrow in the Target Runtime field.
  7. Select the server.
  8. Click the Next button.
  9. Name your project.
  10. Name your package.

  11. Click the Finish button.

    Note that it might take some time for the project to generate.

    The New Project Example window appears.

  12. Click the Finish button.

Verification steps

  1. Click the Window → Show View → Other.

    The Show View window appears.

  2. Select Project Explorer.

  3. Click the Open button.

    The Project Explorer view appears.

Your newly created project is now listed in the Project Explorer view.

9.2. Adding a new HTML5 jQuery mobile file

The HTML5 jQuery Mobile file template consists of JavaScript and CSS library references that are inserted in the file’s HTML header. The template also inserts a skeleton of the jQuery Mobile page and listview widgets in the file’s HTML body. The following procedure details the steps to insert the template into your project.

The following section describes how to add a new HTML5 jQuery Mobile file to an existing project.

Procedure

  1. Start CodeReady Studio.
  2. Open Project Explorer.
  3. Expand the target project → src → main.

  4. Right-click the webapp → New → HTML File.

    The New HTML File window appears.

  5. Ensure the webapp directory is selected.
  6. Name your file.
  7. Click the Next button.
  8. Select HTML5 jQuery Mobile Page (1.4).
  9. Click the Finish button.

The newly added HTML5 jQuery mobile file is now displayed in the CodeReady Studio editor.

9.3. Adding a new mobile page

The following section describes how to add a new jQuery Mobile Page to an existing web application.

Procedure

  1. Start CodeReady Studio.
  2. Open Project Explorer.
  3. Expand the target project → src → main → webapp.
  4. Right-click the .html file.

  5. Click Open With → JBoss Tools HTML Editor.

    The Pallet view opens.

  6. Click the Pallet view.
  7. Expand jQuery Mobile.

  8. Click the Page icon.

    The Insert Tag window appears.

  9. Name the Header.
  10. Name the Footer.
  11. Click the Finish button.

Your newly added page is now displayed in the CodeReady Studio editor.

Note that the same workflow can be used to customize the pages of your web application with widget selection from the Pallet view.