Chapter 3. Developing First Applications with CodeReady 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.

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.

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.

To create a new JavaScript project and application in CodeReady Studio:

You can import an existing JavaScript project directly into CodeReady Studio and then make changes and run the project as follows:

After either creating a new Node.js project or importing an existing one and then running the project, some errors may appear. CodeReady Studio includes a debugger to help identify and resolve these issues.

To use the debugging feature:

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 3.8. Create a New Forge Project

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.

To set up persistence:

Figure 3.9. .java Displayed in the Editor

To add fields to the entity:

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 3.11. Select JPA Entities to Create the Scaffold

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:

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 3.13. Add-on Listed in the Forge Context Menu

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

Additional Resources

To create a JPA project and connect to the database:

DDL, Data Definition Language, is a syntax to define data structures. Generate DDL and entities to enable Hibernate runtime support in an Eclipse JPA project.

To generate DDL and Entities:

Hibernate mapping files specify how your objects relate to the database tables.

To create basic mappings for properties and associations, meaning, to generate the`.hbm.xml` files:

For reverse engineering, prototype queries, or to simply use Hibernate Core, a hibernate.properties or a hibernate.cfg.xml file is needed. Hibernate Tools provides a wizard to generate the hibernate.cfg.xml file if required.

To create a Hibernate Configuration file:

The new hibernate.cfg.xml file opens in the default editor.

A Console configuration file describes how the Hibernate plugin configures Hibernate. It also describes the configuration files and classpaths needed to load the POJOs, JDBC drivers, etc. It is required to make use of query prototyping, reverse engineering and code generation. You can have multiple console configurations per project, but for most requirements, one configuration is sufficient.

To create a Hibernate console configuration file:

Figure 3.18. Create Hibernate Console

You can edit the Hibernate Configurations from the Hibernate Configurations view.

To modify the Hibernate Configurations:

Hibernate tools’ reverse engineering and code generation features allow you to generate a range of artifacts based on a database or an existing Hibernate configuration, like mapping files or annotated classes. Among others, these generated artifacts can be POJO Java source files, hibernate.hbm.xml files, hibernate.cfg.xml generation and schema documentation.

To generate code:

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.

To create an HTML5 project:

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

To build and deploy the application:

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 3.20. Enterprise HTML5 web application Viewed in Browser

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:

Figure 3.21. HTML5 Web Application Viewed with BrowserSim

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:

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.

Additional Resources

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 3.22. Selecting the HTML5 jQuery Mobile Page (1.4) Option

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:

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 3.24. New Page Added to the HTML File

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.

3.6.3.1. Adding a Panel to the Page

To add a panel:

1. In the html file, place the cursor where you want the panel.
2. In the Palette view, in the jQuery Mobile tab, click Panel.

3. Complete the fields about the Panel as follows:

   1. In the ID field, type my panel ID.
   2. Clear the Add Menu check box.
4. Click Finish.
5. Save the html file.

Figure 3.25. Adding a New Panel

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

3.6.3.2. Adding a List to the Panel

To add a list:

1. Within the panel’s code snippet, place your cursor at the desired location for the new list.
2. In the Palette view, in the jQuery Mobile tab, click ListView.

3. Complete the fields about the ListView as follows:

   1. In the Items section, 1 tab, in the Label field, type the name for the first list item on the page.

   2. In the URL (href) field, type a URL identifier for the label.

      Figure 3.26. New Listitem Added to the Panel

      
4. Click Finish.
5. Save the html file.

The new list item name appears in the code snippet.

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

3.6.3.3. Adding a Button in the Header of the Page to Display the List

To add a button:

1. Place the cursor within the header at the desired location for the new button.
2. In the Palette view, in the jQuery Mobile tab, click Button.

3. Complete the fields about the button as follows:

   1. In the Label field, type Menu.
   2. In the URL (href) field, type # followed by the panel ID (#my panel ID, in this case).
   3. In the Icon list, select an icon.
   4. In the Icon position list, select a desired value.
   5. Click the Icon only check-box.
4. Click Finish.
5. Save the html file.

Figure 3.28. Adding a Button

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>

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

A simulated device appears and displays the application.

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

Additional Resources

Use the Project from Git (with smart import) option, if you are unaware of the type of the project that you want to import.

The Import wizard will automatically detect the type of project being imported and will configure the project so that you have to put in minimal effort to make the project workable.

The Git Import feature detects the various modules of a project that is a set of other individual projects. It detects markers such as pom.xml, MANIFEST.MF, etc. to determine the type of project that you are importing.

To import projects from Git with smart import:

Use the Projects from Git option when you are aware of the type of project that you want to import into the IDE. Use the Existing local repository option, if you have, at some point in time, cloned the remote Git repository and the repository is present on your local system.

Procedure

3.7.2.1. Importing Existing Eclipse Projects

Use the Existing local repositories option to import Eclipse projects in the IDE. These projects essentially have a .project file. This .project file contains the project description and settings needed to configure and build project in Eclipse.

To import projects as existing Eclipse projects:

1. Click File > Import.

2. In the Import wizard:

   1. Expand Git and then click Projects from Git. Click Next.
   2. Click Existing local repository and then click Next.
   3. Click Git to choose one of the recently used repositories from the list or click Add to browse to any local repository. Click Next. In the Wizard for project import section, click Import existing Eclipse project. Click Next.
   4. In the Import Projects window, select all the projects that you want to import.
   5. Ensure that the Select nested projects check box is clicked to import the nested projects under the parent project that you are importing.
   6. Click Finish.

The imported project is listed in the Project Explorer view.

3.7.2.3. Importing as a General Project

Use the Import as general project option if the project being imported does not have a .project file, meaning it is not an Eclipse project. In this case Eclipse will create a clean .project file with default settings.

To import a project as a general project:

1. Click File > Import.

2. In the Import wizard:

   1. Click Git > Projects from Git. Click Next.
   2. Click Existing local repository and then click Next.
   3. Click Git and then click Next.
   4. In the Wizard for project import section, click Import as general project.
   5. Select the project and click Next.
   6. In the Import Projects from Git window, confirm or edit the default parameters and click Finish.

The imported project is listed in the Project Explorer view.

Use the Clone URI option to clone the repository on your system if you have never cloned the Git repository; meaning, the repository does not exist on your local system.

To import projects in the Cloned URI:

To install node.js:

You may choose to work with either npm or with Bower. However, if you are using npm you must use the file package.json and if using Bower, use the file bower.json.

Procedure

Bower and npm are Package Managers that allow you to install, in a single click, all the dependencies required for the plugins to work. In this section, we list steps for enabling Bower Init and npm Init. You may choose to work with any one of these Package Managers and follow the respective procedure. However, if you are using npm you must use the file package.json and if using Bower, use the file bower.json.

Procedure

3.8.3.2. Enabling Bower Init

After you have enabled Bower Init the result will be a bower.json file listed under the project in the Project Explorer view.

Procedure

To enable Bower Init:

1. In the Project Explorer view, right-click Neon3_features and then click New > Other.
2. In the New wizard, type filter text field, type bower. After Bower Init is selected, click Next.

3. Optionally, in the Bower Initialization Wizard:

   1. Clear the Use default configuration check box.
   2. In the Version field, type 0.0.1.
   3. In the License field, type MIT.
4. Click Finish. The bower.json file opens in the default editor.

Figure 3.30. Contents of the bower.json File

3.8.3.5. Using the Bower Tool

Procedure

To use the Bower tool:

1. In the Project Explorer view, expand Neon3_features to view bower.json and index.html.
2. Double-click index.html to open it in the default editor, if not already open. The editor shows the bootstrap template.

3. Right-click index.html and click Open With > Web Browser. Notice that the page does not show any bootstrap theme or style applied to it.

   Figure 3.31. index.html Page without Theme and Style Applied to it

   

   To be able to view the themes and styles applied to the page, you must edit the bower.json file that contains the dependencies.

   To edit the bower.json file:

4. In the Project Explorer view, double-click bower.json to open it in the default text editor. The json editor Outline support:

   • Allows you to navigate through the json file
   • Allows you to validate syntax errors

5. To define the jquery and bootstrap dependencies:

   1. After the closing square bracket ], add a comma (,).

   2. On the next line type:

             "dependencies" : {
                "jquery" : "*",
                "bootstrap" : "~3.3.6"
                }

6. Save the file. The contents of the file are as displayed in the following image.

   Figure 3.32. bower.json File Edited

   
7. Right-click bower.json and then click Run As > Bower Install. You can see the progress of installation of the dependencies in the Console view.
8. Expand the bower_components folder to ensure that it contains bootstrap and jquery.
9. Refresh the index.html web page. The page shows the bootstrap template with a responsive design.

Figure 3.33. index.html Page with Responsive Design

In this section, you will use the npm Package Manager and hence the package.json file.

You can either use the Grunt or the Gulp build systems to run your tasks directly from the IDE instead of switching to the CLI every time you want to run a task.

Prerequisites

If not installed, use the following commands to install them:

Procedure

3.8.4.1. Adding Dependencies to the package.json File

Note

This section is applicable only if you are using the package.json file. Skip this section if you are using the bower.json file.

You must add the dependencies to the package.json file to be able to use it in Section 3.8.4.2, “Enabling the Gulp Plugin”.

Procedure

To add the dependencies:

1. In the Project Explorer view, expand neon3_features and double-click package.json to open the file in the default editor.
2. After "license": "ISC", add a comma (,).

3. On the next line add the following code snippet:

       "devDependencies" : {
       "jquery" : "*",
        "angular" : "*",
       "bootstrap" : "~3.3.6"
       }

4. Save the file. The contents of the package.json file are as displayed in the following image.

Figure 3.34. package.json File as Edited

3.8.4.3. Creating the gulpfile.js File

In this section, you create the gulpfile.js file to be used in Section 3.8.4.4, “Using the Gulp Plugin”.

Procedure

To create the gulpfile.js:

1. Right-click neon3_features and then click New > Other.
2. In the New wizard, search field, type JavaScript.

3. Click JavaScript Source File and then click Next. In the New JavaScript file window:

   1. Cick neon3_features.
   2. In the File name field, type gulpfile.js.
4. Click Finish. The empty file opens in the default editor.

5. Copy the following content and paste it in the gulpfile.js file:

       var gulp = require('gulp')
   , rename = require('gulp-rename');
   
   // task
   gulp.task('default', function () {
           gulp.src('./index.html') //path to file to be renamed
           .pipe(rename('renamed.html')) // rename index.html to renamed.html
           .pipe(gulp.dest('renamed-html')); // destination folder
   });

6. Save the file. The contents of the gulpfile.js file are as displayed in the following image.

Figure 3.36. gulpfile.js File

In this section, you will use the project at: https://github.com/ibuziuk/jsdt-node-test-project.

Prerequisites

Procedure

3.8.5.2. Running the index.js File

Procedure

To work with the node.js application:

1. In the Project Explorer view, expand jsdt-node-test-project.
2. Right-click package.json and click Run As > npm Install. The Console view shows the progress of the task.
3. Right-click index.js and click Run As > Node.js Application. The Console view shows the Listening on port 3000 message. Open localhost:3000 to see the output on a web page.

Figure 3.37. Output of the index.js File

3.8.5.3. Debugging the Node.js Application

Procedure

To debug the node.js application:

1. In the Project Explorer view, expand jsdt-node-test-project and double-click index.js to open it in the default editor.
2. To add a breakpoint, right-click on the line number where you want the execution of the code to stop, and then click Toggle Breakpoint. Save the file.
3. Right-click index.js, click Debug As > Node.js Application. The Console view shows the debugger listening on port <port_number> message.

Figure 3.38. Debugging the Node.js Application

Additional Resources

Use the following features to carry out different tasks:

• Inspecting Variables: All the variables are listed in the Variables view. Use this view to search for specific variables and inspect them.
• Inspecting the main node.js file: The main node.js file opens in the default editor (index.js, in this case). You can hover the mouse over the variables to see the functions.
• Editing the main node.js file: You can edit the main node.js file and save it to see the changes automatically propagated to VM.