Start Developing

Procedure 2.1. Open the JBoss Perspective

1. Click Window→Open Perspective→Other.
2. From the list of perspectives, double-click JBoss.

Procedure 2.2. Configure Maven to use the JBoss EAP Maven Repository

1. Click Window→Preferences, expand JBoss Tools and select JBoss Maven Integration.
2. Click Configure Maven Repositories.
3. Click Add Repository.
4. Click Recognize JBoss Maven Enterprise Repositories.
5. Navigate to path/to/jboss-eap-6.x.y-maven-repository and click OK. JBoss Maven Tools recursively scans the path searching for the Maven repository.
6. Modify the information in the ID and Name fields as desired, ensure the Active by default check box is selected and click OK.
   

   View larger image

   

   Figure 2.1. JBoss EAP Maven Repository Listed for Adding to the Maven Configuration File

7. Click Finish and at the prompt asking if you are sure you want to update the Maven configuration file click Yes. If the specified configuration file does not exist, JBoss Maven Tools creates it.

   Note

   Maven settings, such as the configuration file, are specified in Preferences under Maven→User Settings. These settings can be customized.
8. Click Apply and click OK to close the Preferences window.

Procedure 2.3. Define a Server Using Runtime Detection

1. Click Window→Preferences, expand JBoss Tools and select JBoss Runtime Detection.
2. Click Add.
3. Select the directory containing the JBoss EAP 6.x installation and click OK. The directory is now scanned for application servers and JBoss EAP 6.x found.
   

   View larger image

   

   Figure 2.2. JBoss EAP 6.x Found by Runtime Detection

4. To create a server for JBoss EAP 6.x, ensure the jboss-eap-6.x check box is selected and click OK.
5. Click Apply and click OK to close the Preferences window. The server is listed in the Servers view.
   

   View larger image

   

   Figure 2.3. JBoss EAP 6.x Server Listed in Servers View

6. The server is initially shown in stopped mode. Start the server by right-clicking jboss-eap-6.x and clicking Start. After a short pause, the view switches to the Console view and shows the startup output of the server.

Procedure 2.4. Create a Web Application Using the Java EE Web Project Wizard

1. Click the JBoss Central tab.
2. In JBoss Central under Start from scratch, click Java EE Web Project to open the Java EE Web Project wizard. If JBoss Central is not visible, click Help→JBoss Central.
   

   View larger image

   

   Figure 2.4. Java EE Web Project in JBoss Central

3. From the Target Runtime list, select jboss-eap-6.x Runtime and click Next.
   

   View larger image

   

   Figure 2.5. JBoss EAP 6.x Selected as Target Runtime in Java EE Web Project Wizard

4. Complete the fields about the project as follows:

   • In the Project name field, type ticket-monster.
   • In the Package field, type org.jboss.jdf.example.ticketmonster.
   

   View larger image

   

   Figure 2.6. Completed Project Name and Package Fields in Java EE Web Project Wizard

5. Click Finish to create the project.

Procedure 2.5. Add an Entity Using Forge Tools

1. In the Project Explorer view, expand ticket-monster→Java Resources→src/main/java.
2. Click org.jboss.jdf.example.ticketmonster.model and press Ctrl+4 (Cmd+4).
3. From the Forge wizards list, click JPA: New Entity.
4. In the Entity name field, type Event and click Finish.
   

   View larger image

   

   Figure 2.7. New Event Entity using Forge 2 JPA: New Entity Wizard

5. In the Project Explorer view, ensure org.jboss.jdf.example.ticketmonster→Event.java is selected and press Ctrl+4.
6. From the Forge wizards list, click JPA: New Field.
7. Complete the fields about the field as follows:

   • In the Field name field, type name.
   • In the Length field, type 50.
   

   View larger image

   

   Figure 2.8. New name Field using Forge 2 JPA: New Field Wizard

8. Click Finish to create the field.
9. Repeat steps 5 and 6 to create three more fields for the Event entity as follows:

   • description, with Field Type String and Length 1000
   • major, with Field Type Boolean
   • picture, with Field Type String
10. In the Project Explorer view, right-click Event.java and click Show In→Forge Console.
11. In the Forge Console view, on the Forge 2 command line enter

    constraint-add --onProperty name

    Copy to Clipboard Toggle word wrap

    and from the list of options enter the number corresponding to NotNull.

Procedure 2.6. Add an Entity Using Hibernate Tools

1. In the Project Explorer view, expand ticket-monster→Java Resources→src/main/java.
2. Right-click org.jboss.jdf.example.ticketmonster.model and click New→Class.
3. In the Name field, type Venue and click Finish. This creates a Venue.java file that is automatically opened in a Java editor.
   

   View larger image

   

   Figure 2.9. New Venue Class using Java Class Wizard

4. Add fields to the entity by adding the following lines in between the braces of the Venue class

   private Long id;
   private String name;
   private String description;
   private int capacity;

   Copy to Clipboard Toggle word wrap
5. Save the Venue.java file by pressing Ctrl+S (Cmd+S).
6. Add get and set methods by right-clicking on a new line after private int capacity; and clicking Source→Generate Getters and Setters.
7. Click Select All and click OK.
   

   View larger image

   

   Figure 2.10. List of Attributes Selected for Creating Get and Set Methods

8. Save the Venue.java file.
9. Make the class an entity by right-clicking anywhere in the Venue class and clicking Source→Generate Hibernate/JPA annotations.
10. Ensure org.jboss.jdf.example.ticketmonster.model.Venue is selected and click Next.
    

    View larger image

    

    Figure 2.11. Venue Class Selected for Adding JPA Annotations

11. Click Finish and save the Venue.java file.

Procedure 2.7. Prepare Event Records

1. In the Project Explorer view, expand ticket-monster→Java Resources→src/main/resources.
2. Double-click the import.sql file to open it for editing.
3. Double-click the import.sql view label to make the editor fill the window.
4. Create a new Event record by copying the following on one line after the existing Member record

   insert into Event (id, name, description, major, picture, version) values (1, 'Shane''s Sock Puppets', 'This critically acclaimed masterpiece...', true, 'http://dl.dropbox.com/u/65660684/640px-Carnival_Puppets.jpg', 1);

   Copy to Clipboard Toggle word wrap
5. Create a second new Event record by copying the following on one line after the first new Event record

   insert into Event (id, name, description, major, picture, version) values (2, 'Rock concert of the decade', 'Get ready to rock...', true, 'http://dl.dropbox.com/u/65660684/640px-Weir%2C_Bob_(2007)_2.jpg', 1);

   Copy to Clipboard Toggle word wrap
   

   View larger image

   

   Figure 2.12. Content of the import.sql File for this TicketMonster Workflow

6. Save the import.sql file.
7. Double-click the import.sql view label to make the editor return to its previous size.

Procedure 2.8. Deploy the Application Using JBoss Server Tools

1. In the Project Explorer view, right-click the ticket-monster project name and click Run As→Run on Server.
2. In the Run On Server wizard, ensure Choose an existing server is selected.
3. From the Select the server that you want to use table, select jboss-eap-6.x and click Finish.

Procedure 2.9. Access and Query the Database

1. Go to http://www.jboss.org/quickstarts/eap/h2-console/.
2. Click Download.
3. Extract the contents of the archive

   $ unzip jboss-eap-quickstarts-<version>.zip

   Copy to Clipboard Toggle word wrap
4. Copy the h2console.war file to the JBoss EAP 6.x deployments directory

   $ cp jboss-eap-quickstarts-<version>/h2-console/h2console.war /path/to/jboss-eap/standalone/deployments/

   Copy to Clipboard Toggle word wrap
5. Confirm the H2 console web application is running by looking at the server output in the Console view in JBoss Developer Studio.
   

   View larger image

   

   Figure 2.15. Console Output showing h2console.war Deployed

6. In the IDE open a new Web Browser by clicking Window→Show View→Other, expand General and double-click Internal Web Browser.
7. In the address bar of the Web Browser, enter http://localhost:8080/h2console.
8. In the Login area, in the JDBC URL field type jdbc:h2:mem:ticket-monster and in both the User Name and Password fields type sa. These settings are defined in the ticket-monster-ds.xml file in the ticket-monster/src/main/webapp/WEB-INF directory.
   

   View larger image

   

   Figure 2.16. Completed H2 Login Web Page

9. Click Connect to connect to the database.

Procedure 2.10. Add a RESTful Web Service

1. In the Project Explorer view, expand ticket-monster→Java Resources→src/main/java.
2. Right-click org.jboss.jdf.example.ticketmonster.rest and click New→Class.
3. In the Name field, type EventService and click Finish. This creates a EventService.java file that is automatically opened in a Java editor.
   

   View larger image

   

   Figure 2.18. Completed Name Field in Java Class Wizard

4. Add the following lines immediately above public class EventService {

   @Path("/events")
   @RequestScoped

   Copy to Clipboard Toggle word wrap

   and add the following lines in between the braces of the EventService class

   @Inject
   private EntityManager em;
   
   @GET
   @Produces(MediaType.APPLICATION_JSON)
   public List<Event> getAllEvents() {
   	final List<Event> results =
   		em.createQuery("select e from Event e order by e.name").getResultList();
   	return results;
   }

   Copy to Clipboard Toggle word wrap
5. Save the EventService.java file.
6. Resolve the errors relating to missing imports by right-clicking anywhere in the EventService class and clicking Source→Organize Imports.
7. For each class name that is not unique, select the class to use as follows and click Next:

   • For MediaType select javax.ws.rs.core.MediaType
   • For Event select org.jboss.jdf.example.ticketmonster.model.Event
   • For Produces select javax.ws.rs.Produces
   • For List select java.util.List
   • For Inject select java.inject.Inject
   • For RequestScoped select java.enterprise.context.RequestScoped
   

   View larger image

   

   Figure 2.19. javax.ws.rs.core.MediaType Selected for MediaType Class

8. When all the classes have been chosen, click Finish. The import statements corresponding to the class names selected in the previous step are added to the EventService.java file.
9. Save the EventService.java file.
10. In the Servers view expand jboss-eap-6.x, right-click ticket-monster and click Full Publish to update the deployed version of the application.
11. Open a new Web Browser and in the address bar of the Web Browser enter http://localhost:8080/ticket-monster/rest/events. This shows the output of the new RESTful endpoint.

Procedure 2.11. Add a User Interface Optimized for Mobile Devices

1. In the Project Explorer view, expand ticket-monster→src→main.
2. Right-click webapp and click New→HTML file.
3. Complete the information about the file as follows:

   • In the Enter or select the parent folder field, type ticket-monster/src/main/webapp.
   • In the File name field, type mobile.html.
   

   View larger image

   

   Figure 2.20. New HTML File using the New HTML File Wizard

4. Click Next.
5. From the Templates list, select HTML5 jQuery Mobile Page (1.4) and click Finish. This creates a mobile.html file that is automatically opened in the Visual/Source tab of the Visual Page Editor.
   

   View larger image

   

   Figure 2.21. Selected HTML5 jQuery Mobile Page (1.4) Template in New HTML File Wizard

6. List the events returned by the web service in the mobile user interface by adding the following lines immediately after the alert("Ready To Go"); line

   $.getJSON("rest/events", function(events) {
   	// console.log("returned are " + events);
   	var listOfEvents = $("#listOfItems");
   	listOfEvents.empty();
   	$.each(events, function(index, event) {
   		// console.log(event.name);
   		listOfEvents.append("<li><a href='#'>" + event.name + "</a>");
       });
       listOfEvents.listview("refresh");
   });
   

   Copy to Clipboard Toggle word wrap
   

   View larger image

   

   Figure 2.22. Completed mobile.html File

7. Save the mobile.html file.

Procedure 2.12. Test the Mobile User Interface Using BrowserSim

1. On the toolbar click the BrowserSim icon . A simulated device is displayed.
2. At the Ready To Go prompt, click Close. The names of the events in the database are displayed.

   Note

   If the names of the events in the database are not displayed, check the address bar of the simulated device. The address bar must state http://localhost:8080/ticket-monster/mobile.html.
3. To rotate the mobile device, click in any corner of the simulated device.
   

   View larger image

   

   Figure 2.24. Rotated Simulated Device

4. Change the type of simulated device displayed by right-clicking anywhere on the simulated device, clicking Skin and selecting from the different skins listed.
5. Close BrowserSim by right-clicking anywhere on the simulated device and clicking Close.