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
A configured server.
For information on configuring a local runtime server and deploying applications to it, see Section 3.1, “Configuring a local server”.
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
- Start CodeReady Studio.
Press Ctrl+N.
The Select a wizard window appears.
- Enter HTML5 in the search field.
- Select HTML5 Project.
Click .
The New Project Example window appears.
- Click the down-arrow in the Target Runtime field.
- Select your server.
- Click .
- Name your project and your package.
- Select the location for your project.
Click .
Note that it might take some time for the project to generate.
The New Project Example window appears.
- Click .
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
A configured server.
For information on configuring a local runtime server and deploying applications to it, see Section 3.1, “Configuring a local server”.
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
- Start CodeReady Studio.
Press Ctrl+N.
The Select a wizard window appears.
- Enter HTML in the search field.
- Select HTML File.
Click .
The New HTML File window appears.
- Select the location for your file.
- Name your file.
Click .
The Select HTML Template window appears.
- Select a template.
- Click .
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
An HTML5 project.
For more information on how to create an HTML5 project, see Section 8.1, “Creating an HTML5 Project”.
Procedure
- Start CodeReady Studio.
Click
. 
The Show View window appears.
- Enter Palette in the search field.
- Select Palette.
Click .
The Palette view appears.
Click the Page icon.
The Insert Tag window appears.
- Name the Header.
- Name the Footer.
- Click .
Your newly added page is now displayed in the CodeReady Studio editor.
You can use the same workflow to customize the pages of your web application by selecting widgets from the Palette view.
