Chapter 8. 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 CodeReady Studio. 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, and deploy and view the application with the built-in browser.

CodeReady Studio 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, and Buttons to make your applications more user friendly and efficient.

8.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 on the first page of the wizard. 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.

Prerequisites

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

Procedure

  1. Start CodeReady Studio.
  2. Press Ctrl+N.

    The Select a wizard window appears.

    crs html5 wizard
  3. Enter HTML5 in the search field.
  4. Select HTML5 Project.
  5. Click Next.

    The New Project Example window appears.

    crs creating an html5 project
  6. Click the down-arrow in the Target Runtime field.
  7. Select your server.
  8. Click Next.
  9. Name your project and your package.
  10. Select the location for your project.
  11. Click Finish.

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

    The New Project Example window appears.

  12. Click Finish.

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

8.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 section describes how to add a new HTML5 jQuery Mobile file to an existing project.

Prerequisites

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

Procedure

  1. Start CodeReady Studio.
  2. Press Ctrl+N.

    The Select a wizard window appears.

    crs html file wizard
  3. Enter HTML in the search field.
  4. Select HTML File.
  5. Click Next.

    The New HTML File window appears.

    crs naming html file
  6. Select the location for your file.
  7. Name your file.
  8. Click Next.

    The Select HTML Template window appears.

    crs selecting html template
  9. Select a template.
  10. Click Finish.

The newly created HTML file is now displayed in the CodeReady Studio editor.

8.3. Adding a new mobile page

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

Prerequisites

Procedure

  1. Start CodeReady Studio.
  2. Click WindowShow viewOther.

    crs window show view other

    The Show View window appears.

    crs selecting palette view
  3. Enter Palette in the search field.
  4. Select Palette.
  5. Click Open.

    The Palette view appears.

    crs palette view
  6. Click the Page icon.

    The Insert Tag window appears.

    crs creating a page with palette
  7. Name the Header.
  8. Name the Footer.
  9. Click Finish.

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

Note

You can use the same workflow to customize the pages of your web application by selecting widgets from the Palette view.