Red Hat Summit Red Hat Summitサポートコンソール開発者トライアルの開始お問い合わせ

このコンテンツは選択した言語では利用できません。

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.

Red Hat logoGithubredditYoutubeTwitter

詳細情報

試用、購入および販売

コミュニティー

会社概要

Red Hat は、企業がコアとなるデータセンターからネットワークエッジに至るまで、各種プラットフォームや環境全体で作業を簡素化できるように、強化されたソリューションを提供しています。

多様性を受け入れるオープンソースの強化

Red Hat では、コード、ドキュメント、Web プロパティーにおける配慮に欠ける用語の置き換えに取り組んでいます。このような変更は、段階的に実施される予定です。詳細情報: Red Hat ブログ.

Red Hat ドキュメントについて

Red Hat をお使いのお客様が、信頼できるコンテンツが含まれている製品やサービスを活用することで、イノベーションを行い、目標を達成できるようにします。 最新の更新を見る.

Legal Notice

Theme

© 2026 Red Hatトップに戻る