Chapter 2. Developing First Applications with JBoss Developer Studio Tools

To set up JBoss EAP for use in the IDE, you must direct the IDE to the local or remote runtime servers. This establishes a communication channel between the IDE and the JBoss EAP server for efficient deployment and server management workflows. Depending on your circumstance, you can set up the JBoss EAP server in one of three ways:

If you are installing a new instance of the IDE, you can use the combined installer to download, install, and set up the IDE and JBoss EAP. A specific JBoss EAP version is packaged in the installer; for details of the JBoss EAP version see https://access.redhat.com/site/articles/427493.

Note: If you want to install a different version of JBoss EAP, you can either download it from within the IDE (see download, install, and set up JBoss EAP from within the IDE) or install it separately and then follow the instructions in C,use runtime detection to set up JBoss EAP from within the IDE.

To install the IDE and JBoss EAP using a single installer:

Result: The server is listed in the Servers view in stopped mode.

If the IDE is already installed, you can download, install, and set up JBoss EAP from within the IDE. With this option, you can choose from a range of supported JBoss EAP versions; for details of supported JBoss EAP versions see https://access.redhat.com/site/articles/427493.

To download, install and set up JBoss EAP from within the IDE:

Result: The server is listed in the Servers view in stopped mode.

If the IDE and JBoss EAP are already installed, you can use runtime detection to set up JBoss EAP from within the IDE. The runtime detection feature automatically identifies the JBoss EAP instance installed on your local system and generates a corresponding default server setup for use in the IDE. This feature makes getting started with a default JBoss EAP server very quick.

Note: Specific JBoss EAP versions are supported by each IDE release; for details of supported JBoss EAP versions see https://access.redhat.com/site/articles/427493.

To use runtime detection to set up JBoss EAP for use in the IDE:

Result: The server is listed in the Servers view in stopped mode.

To configure Maven to use the JBoss EAP and JBoss Web Framework Kit Maven repositories when working inside the IDE, you must ensure that the IDE knows the location of your Maven configuration settings.xml file and that the necessary profiles for the JBoss EAP and JBoss Web Framework Kit Maven repositories are contained in that file. This ensures that Maven knows where to search for project dependencies when it is called to build Maven projects from within the IDE.

If you have multiple Maven settings.xml files or you are using a shared settings.xml file, then this file may not be in the default location expected by the IDE. In this case, you must inform the IDE of the file location.

To specify the Maven settings.xml file location:

You can either download the JBoss EAP and JBoss Web Framework Kit Maven repositories from the Red Hat Customer Portal or use the online Maven repository located at https://maven.repository.redhat.com/ga.

If you have not previously used these versions of JBoss EAP and JBoss Web Framework Kit, you must configure your Maven settings.xml file to use the associated product Maven repositories. You can manually edit your settings.xml file in a text editor or use the JBoss Developer Studio Maven integration feature to automatically detect the JBoss repositories and appropriately edit your settings.xml file.

Note: The JBoss EAP and JBoss Web Framework Kit Maven repositories must be already obtained from the Red Hat Customer Portal and located on a system that you can access.

To specify the JBoss EAP and JBoss Web Framework Kit Maven repositories locations using the IDE:

Adding the online repository to the IDE, adds https://maven.repository.redhat.com/ga to your settings.xml , which takes care of all the dependencies.

To use the online Maven repositories:

After you have created a Forge project you can set up persistence, add entities and fields, and create scaffold for the project.

To create a new project:

Figure 2.6. Create a New Forge Project

View larger image

Result: The project is listed in the Project Explorer view.

Setting up the JPA prerequisites, creates the persistence.xml file in the project and adds the required dependencies to the pom.xml file.

Note: While creating the JPA entity, the Forge console automatically detects any prerequisites that must be set up and prompts you to create those at runtime.

To set up persistence:

Result: The new entity appears in the JBoss editor and is also listed in the Project Explorer view with the name: .java.

Figure 2.7. .java Displayed in the JBoss Editor

View larger image

To add fields to the entity:

Result: The fields are added to the Customer.java file.

Scaffolding is automatic code generation by a program, using available information, usually a database to generate a basic CRUD (create, read, update, delete) admin interface. The Scaffold Generate command is used to create the scaffold.

To create the scaffold:

Figure 2.9. Select JPA Entities to Create the Scaffold

View larger image

Result: The entities are created and listed in the Project Explorer view.

In this example we use the JBoss EAP server to run the application.

To run the application:

Use the Search for Customers section to search for customers by their first and/or last names.

The add ons/extensions run inside the IDE. After adding commands and features to the add-on, no further changes are required for the extensions or add-ons to run in another IDE.

To create an add-on:

Figure 2.11. Add-on Listed in the Forge Context Menu

View larger image

Result: The add-on is created and listed in the Forge context menu.

The instructions in this article show you how to deploy your HTML5 web application to a server. The IDE must be configured for any servers to which you want to deploy applications, including the location and type of application server and any custom configuration or management settings. You can complete this configuration at the time of deploying the application but in this article it is assumed that you have completed the configuration beforehand.

For information on configuring a local runtime server and deploying applications to it, see Deploy Apps to a Local Server.

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 of the wizard first page and you can change the version, and therefore the project look and dependencies, by selected either an enterprise or non-enterprise target runtime within the wizard.

To create a HTML5 project, complete the following steps:

The project is generated and listed in the Project Explorer view.

After the HTML5 project is generated, it can immediately be built and deployed to an application server.

To build and deploy the application, complete the following steps:

The Console view shows output from the server starting and deploying the application. When deployment is complete, an IDE default web browser opens and shows the deployed web application.

Figure 2.18. Enterprise HTML5 web application Viewed in Browser

View larger image

Figure 2.19. Non-enterprise HTML5 web application Viewed in Browser

View larger image

The HTML5 web application has an interface optimized for mobile devices. You can view and test such web pages as they would be on mobile devices using BrowserSim. This mobile device web browser simulator provides skins for different mobile devices, making it easy to test and debug web applications for mobile devices.

To view the application with BrowserSim, complete the following steps:

Figure 2.20. HTML5 Web Application Viewed with BrowserSim

View larger image

Mobile Web Tools supports the LiveReload protocol for automatic reloading of web pages in enabled browsers as the application source is modified and saved. LiveReload can be enabled for your system browsers and, as demonstrated here, BrowserSim. This provides an interactive web development experience.

To enable LiveReload for BrowserSim, complete the following steps:

LiveReload is automatically enabled for this BrowserSim simulated device and all subsequent devices opened while the LiveReload server is running.

With LiveReload enabled for BrowserSim, you can make changes to your application source code and BrowserSim automatically reloads the application when changes are saved. This is demonstrated here by making a simple change to the project index.html file, specifically changing the text in the application title banner.

To change your application, complete the following steps:

This code change modifies the heading displayed on the main application page. Notice that BrowserSim automatically reloads the web page when you save the changed file and the application modifications are immediately visible.

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.

To create a new HTML5 jQuery Mobile file in an existing project:

Figure 2.21. Select HTML5 jQuery Mobile Page (1.4)

View larger image

Result: The new file is listed in the Project Explorer view under the project webapp directory and the file opens in the editor.

Use the jQuery Mobile Page widget to add pages to your mobile web application as follows:

Result: A page is added to the html file. JS and CSS references are also automatically added to the file by the Page widget wizard.

Figure 2.23. New Page Added to the HTML File

View larger image

Use the widgets in the jQuery Mobile palette to customize the page. Use the instructions to add a menu to the page. This menu links to three other pages: Home, Search, and the Add Contacts page.

To create and add the menu to your application page:

Figure 2.24. Adding a New Panel

View larger image

Result: A corresponding code snippet, for the newly added panel, is added to the html file where you had placed the cursor.

Figure 2.25. New Listitem Added to the Panel

View larger image

Result: The new list item name appears in the code snippet.

Figure 2.26. Code for the New Listitem in the Panel Added

View larger image

Figure 2.27. Adding a Button

View larger image

Result: The following code is added to the body of the html file.

<div data-role="page" id="page-1">
    <div data-role="panel" id="my_panel_ID">
        <ul data-role="listview" id="listview-1">
            <li><a href="1st_item.html">1st_item</a></li>
            <li><a href="item2.html">Item 2</a></li>
            <li><a href="item3.html">Item 3</a></li>
        </ul>
    </div>

    <div data-role="header">
        <h1>This is the Page Header</h1>
        <a href="#my_panel_ID" id="button-1" class="ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all">Menu</a>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>This is the Page Footer</h4>
    </div>
</div>

<div data-role="page" id="page-1">
    <div data-role="panel" id="my_panel_ID">
        <ul data-role="listview" id="listview-1">
            <li><a href="1st_item.html">1st_item</a></li>
            <li><a href="item2.html">Item 2</a></li>
            <li><a href="item3.html">Item 3</a></li>
        </ul>
    </div>

    <div data-role="header">
        <h1>This is the Page Header</h1>
        <a href="#my_panel_ID" id="button-1" class="ui-btn ui-icon-plus ui-btn-icon-notext ui-corner-all">Menu</a>
    </div>

    <div data-role="content">
        <p>Page content goes here.</p>
    </div>

    <div data-role="footer">
        <h4>This is the Page Footer</h4>
    </div>
</div>

Test the newly added elements to the application by navigating to the interface on BrowserSim as follows:

Result: A simulated device appears and displays the application.

Figure 2.28. The Changes Made to the HTML File Displayed on BrowserSim

View larger image

Ensure that the following prerequisites are met to create a hybrid mobile project:

To enable the JBoss Hybrid Mobile Tools + CordovaSim feature:

During the installation process you may receive warnings about installing unsigned content. If this is the case, review the details of the content and if satisfied click OK to continue with the installation.

Once installation is complete, you are prompted to restart Eclipse. Click Yes to restart immediately and No if you need to save any unsaved changes to open projects. Note that IDE changes do not take effect until the IDE is restarted.

To install Android SDK:

After the project wizard requirements are installed, you can restart the Hybrid Mobile Project wizard and follow it through to completion to create a template-based project. Within the wizard you must specify identifiers for the project and application and select the Cordova engine version to be used for building the project.

To create a Hybrid Mobile project, complete the following steps:

Result: The project is created and listed in the Project Explorer view.

Before building and running the Hybrid Mobile application, instructions are given here for customizing the project by adding the Cordova Device Motion plug-in and modifying the source code to make use of it. The plug-in gives access to the mobile device accelerometer and the code snippets added to this project check for data every one second and display the X, Y, Z acceleration values on the front page of the application. This plug-in is just one of a catalog of plug-ins available to add to your Hybrid Mobile project.

To customize the Hybrid Mobile project with the Cordova Device Motion plug-in, complete the following steps:

Result: Your Hybrid Mobile Project is now customized and saved.

You can build and test the Hybrid Mobile application within the IDE using CordovaSim. CordovaSim is a mobile device simulator specifically for testing Cordova-based hybrid mobile applications. Using the CordovaSim control panel you can input sample data for mobile device hardware, as illustrated here for a device accelerometer.

To run and test your Hybrid Mobile application using CordovaSim, complete the following steps:

Result: Your Hybrid Mobile application is running for testing.

The IDE allows users to quickly and easily publish a Mobile Hybrid (Cordova) application, developed in the IDE, on the FeedHenry server.

The instructions here demonstrate to complete the following tasks:

To connect the Cordova application to the FeedHenry server:

Result: The Almost Done window confirms that the project is created on the platform. The project structure in the Project Explorer view, shows the feedhenry.js and the fhconfig.json files.

Figure 2.34. Almost done Window Confirms the Application Creation

View larger image

To push the application to the FeedHenry server:

Result: The Cordova application is visible in the FeedHenry instance.

Figure 2.36. Cordova Application Published on the FeedHenry Server

View larger image

Define the icons for the Mobile Hybrid application using the icon tag in the config.xml file. If an icon is not specified, the Apache Cordova logo is used as the default icon.

To change the application icon:

Result: The icon for the application is modified.

Figure 2.38. Modified Icon for the Application Displayed on the Android Emulator

View larger image

You can edit the splash screen associated with your application using the splash tag within the platform tag in the config.xml file. If you are using Cordova 4.0.0 or higher, you must first install the new cordova-plugin-splashscreen to continue to use the splash screen and then use the steps below to edit the splash screen. For Cordova versions lower than 4.0.0, simply follow the steps below to edit the splash screen.

To change the application splash screen:

Result: The edited splash screen appears while the application is starting.

Ensure that the following prerequisites are met to enable the FeedHenry feature:

To install Android SDK:

To enable the FeedHenry feature:

To set the preferences:

Ensure that your Preferences are set before importing a FeedHenry application. If not set yet, you are prompted to set the preferences. These preferences are set once when importing an application for the first time and the configured preferences are used for all imports in the future.

To import your FeedHenry application:

Figure 2.42. Selecting an Application to be Imported

View larger image

If you have set a password for the SSH keys, you are prompted to enter the password so that it can import the application.

Result: The FeedHenry project is successfully imported and appears in the Project Explorer view. The Cordova config.xml file for this project opens in the Editor.

To test the application import:

Result: The simulated device displays the “Hello [Your Name]” string.

After successfully importing the FeedHenry application, follow the instructions to change the application:

Figure 2.44. The Edited index.html File

View larger image

To test the imported application, right-click the application and then click Run As Run w/remote FeedHenry server.

Figure 2.45. The Edited FeedHenry Application

View larger image

The changes made to the index.html file are reflected on the simulated device. Click a corner of the displayed device to rotate it in that direction. Alternatively, right-click the simulated device and click Rotate Right or Rotate Left as to rotate it in the desired direction. To view the application on a different CordovaSim simulated device, right-click the device and click Skin. From the list of skins, select a skin to view the application.

Use the following instructions to push changes to the application back to the FeedHenry server:

Result: The simulated device in the App Preview section displays the change that you have just pushed to the FeedHenry server.

Figure 2.46. FeedHenry Application Edited and Displayed on the FeedHenry Server

View larger image