Red Hat JBoss Developer Studio 8.1
Start Developing
Tutorial for first time users
Red Hat Customer Content Services
Red Hat JBoss Developer Studio 8.1 Start Developing
Tutorial for first time users
Red Hat Custo mer Co ntent Services
Legal Notice
Co pyright © 20 15 Red Hat, Inc.
This do cument is licensed by Red Hat under the Creative Co mmo ns Attributio n-ShareAlike 3.0
Unpo rted License. If yo u distribute this do cument, o r a mo dified versio n o f it, yo u must pro vide
attributio n to Red Hat, Inc. and pro vide a link to the o riginal. If the do cument is mo dified, all Red
Hat trademarks must be remo ved.
Red Hat, as the licenso r o f this do cument, waives the right to enfo rce, and agrees no t to assert,
Sectio n 4 d o f CC-BY-SA to the fullest extent permitted by applicable law.
Red Hat, Red Hat Enterprise Linux, the Shado wman lo go , JBo ss, MetaMatrix, Fedo ra, the Infinity
Lo go , and RHCE are trademarks o f Red Hat, Inc., registered in the United States and o ther
co untries.
Linux ® is the registered trademark o f Linus To rvalds in the United States and o ther co untries.
Java ® is a registered trademark o f Oracle and/o r its affiliates.
XFS ® is a trademark o f Silico n Graphics Internatio nal Co rp. o r its subsidiaries in the United
States and/o r o ther co untries.
MySQL ® is a registered trademark o f MySQL AB in the United States, the Euro pean Unio n and
o ther co untries.
No de.js ® is an o fficial trademark o f Jo yent. Red Hat So ftware Co llectio ns is no t fo rmally
related to o r endo rsed by the o fficial Jo yent No de.js o pen so urce o r co mmercial pro ject.
The OpenStack ® Wo rd Mark and OpenStack Lo go are either registered trademarks/service
marks o r trademarks/service marks o f the OpenStack Fo undatio n, in the United States and o ther
co untries and are used with the OpenStack Fo undatio n's permissio n. We are no t affiliated with,
endo rsed o r spo nso red by the OpenStack Fo undatio n, o r the OpenStack co mmunity.
All o ther trademarks are the pro perty o f their respective o wners.
Abstract
This do cument details ho w to start develo ping applicatio ns with JBo ss Develo per Studio .
T able of Cont ent s
T able of Contents
. .hapt
⁠C
. . . .er
. .1. .. St
. . art
. . . Developing
. . . . . . . . . . .wit
. .h
. .JBoss
. . . . . .Developer
. . . . . . . . . St
. . udio
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2. . . . . . . . . .
⁠1.1. Ab o ut Start Develo p ing
2
⁠1.2. Ab o ut the Tic ketMo ns ter Ap p lic atio n
2
⁠1.3. Tuto rial As s ump tio ns
2
⁠1.4. Tuto rial O utline
2
. .hapt
⁠C
. . . .er
. .2. .. Creat
. . . . .ing
. . . t.he
. . .T.icket
. . . . Monst
. . . . . .er
. .Applicat
. . . . . . . ion
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4. . . . . . . . . .
⁠2 .1. O p en the JBo s s Pers p ec tive
4
⁠2 .2. Co nfig ure Maven to us e the JBo s s EAP Maven Rep o s ito ry
4
⁠2 .3. Set Up a Server Us ing Runtime Detec tio n
5
⁠2 .4. Create a Java EE Web Pro jec t Us ing JBo s s Central
6
⁠2 .5. Ad d an Entity Us ing Fo rg e To o ls
8
⁠2 .6 . Ad d an Entity Us ing Hib ernate To o ls
10
⁠2 .7. Prep are Event Rec o rd s to Po p ulate the Datab as e
13
⁠2 .8 . Dep lo y the Ap p lic atio n us ing JBo s s Server To o ls
14
⁠2 .9 . Ac c es s and Q uery the Datab as e
⁠2 .10 . Ad d a RESTful Web Servic e
16
18
⁠2 .11. Ad d a Us er Interfac e O p timiz ed fo r Mo b ile Devic es
⁠2 .12. Tes t the Mo b ile Us er Interfac e Us ing Bro ws erSim
21
25
. . . . . . . . .Hist
Revision
. . . ory
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2. 6. . . . . . . . . .
1
Red Hat JBoss Developer St udio 8 .1 St art Developing
Chapter 1. Start Developing with JBoss Developer Studio
1.1. About St art Developing
Start D eveloping is a step-by-step tutorial that introduces JBoss D eveloper Studio to new users. It
aims to give you a taste of developing applications with JBoss D eveloper Studio. The tutorial here
demonstrates how to create a web application, TicketMonster, that includes typical enterprise
functionality by using JBoss D eveloper Studio.
In guiding you through the tutorial steps, a number of assumptions are made about your system. You
must ensure your system complies with the assumptions before proceeding to complete the tutorial.
For information, see Section 1.3, “ Tutorial Assumptions” .
The information in this tutorial is minimal. It describes one way of completing each step in the tutorial;
in fact, there may be several alternatives for each step in the tutorial. For more information about
alternative ways to complete tasks, see the Red Hat JBoss D eveloper Studio 8.1 documentation
available on the Red Hat Customer Portal.
Report a bug
1.2. About t he T icket Monst er Applicat ion
TicketMonster is an example web application demonstrating ticket purchasing. The application
provides an online environment in which users can purchase tickets for events and administrators
can manage the data relating to events and ticket sales. You can see a running example of the
TicketMonster application at https://ticketmonster-jdf.rhcloud.com/.
The application consists of a user interface and web services. The user interface allows users to
purchase tickets for listed events and it enables administrators to access and modify event and ticket
information. The user interface is optimized for desktop and mobile clients. The web services enable
access to information about members, events and venues stored in a database.
TicketMonster demonstrates the combining of Red Hat and JBoss technologies and frameworks to
build, test and deploy applications. For example, the running instance of TicketMonster at
https://ticketmonster-jdf.rhcloud.com/ is hosted in the cloud on the OpenShift platform.
Report a bug
1.3. T ut orial Assumpt ions
The TicketMonster application is built on a Maven-based Java EE Web project. To ensure successful
completion of the tutorial, a number of assumptions are made about your system:
JBoss D eveloper Studio 8.1 stand-alone or Bring-Your-Own-Eclipse (BYOE) is installed; for
instructions, see Install Red Hat JBoss D eveloper Studio.
JBoss Enterprise Application Platform 6.x is installed
Corresponding JBoss Enterprise Application Platform 6.x Maven repository is installed but Maven
is not necessarily configured to use it
Report a bug
1.4 . T ut orial Out line
2
⁠Chapt er 1 . St art Developing wit h JBoss Developer St udio
The diversity and complexity of the TicketMonster application makes it ideal for demonstrating some
of the capabilities of JBoss D eveloper Studio. This tutorial sets the stage for building TicketMonster.
It shows you how to develop a number of the TicketMonster application features using
JBoss D eveloper Studio:
Open the JBoss perspective
Configure Maven for use with JBoss Central projects
Set up a server using JBoss Server Tools runtime detection
Create a Java EE web project to which the TicketMonster functionality is added using JBoss
Central
Create Event and Venue entity classes for the database entities using Forge Tools and Hibernate
Tools
Prepare event records to populate the database at runtime
D eploy the application on a runtime server using JBoss Server Tools
Access and query the database holding the member, event and venue records
Add a RESTful web service so that the application can retrieve the information in the database
Add a user interface to the application that is optimized for mobile devices using Mobile Web
Tools
Test the mobile user interface using BrowserSim
You must work through these tasks in the order they are presented because the earlier tasks are
prerequisites for the later tutorial tasks.
Note
For information about building the complete TicketMonster application using
JBoss D eveloper Studio see http://www.jboss.org/ticket-monster/ on the JBoss D eveloper
website.
Report a bug
3
Red Hat JBoss Developer St udio 8 .1 St art Developing
Chapter 2. Creating the TicketMonster Application
2.1. Open t he JBoss Perspect ive
When following this tutorial, you must use the JBo ss perspective. Specific views, toolbars, and menu
options most used by JBoss developers are available when this perspective is open. Instructions in
the tutorial are given based on the JBo ss perspective and if you use an alternative perspective you
might not be able to find some of the items as detailed in the tutorial procedures. The procedure
below details how to open the JBo ss perspective.
Pro ced u re 2.1. O p en t h e JB o ss Persp ect ive
1. Click Win d o w→O p en Persp ect ive→O t h er.
2. From the list of perspectives, double-click JBo ss.
Report a bug
2.2. Configure Maven t o use t he JBoss EAP Maven Reposit ory
The Java EE Web project, on which the tutorial TicketMonster application is built, is constructed from
an enterprise Maven archetype. Maven is distributed with JBoss D eveloper Studio so it is not
necessary to install Maven but, to be able to use the Java EE Web project enterprise archetype,
Maven must be correctly configured to use the JBoss EAP 6.x Maven repository. Instructions are
given here for editing your Maven configuration file from within JBoss D eveloper Studio to achieve
this.
Pro ced u re 2.2. C o n f ig u re Maven t o u se t h e JB o ss EAP Maven R ep o sit o ry
1. Click Win d o w→Pref eren ces, expand JBo ss T o o l s and select JBo ss Maven
Integ rati o n.
2. Click C o nfi g ure Maven R epo si to ri es.
3. Click Ad d R epo si to ry.
4. Click R eco g ni ze JBo ss Maven Enterpri se R epo si to ri es.
5. Navigate to path/to /jbo ss-eap-6 . x. y-maven-repo si to ry and click O K. 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 Acti ve by
d efaul t check box is selected and click O K.
4
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
Fig u re 2.1. JB o ss EAP Maven R ep o sit o ry List ed f o r Ad d in g t o t h e Maven
C o n f ig u rat io n File
7. Click Fi ni sh and at the prompt asking if you are sure you want to update the Maven
configuration file click Y es. If the specified configuration file does not exist, JBoss Maven
Tools creates it.
Note
Maven settings, such as the configuration file, are specified in P references under
Maven→User Setti ng s. These settings can be customized.
8. Click Appl y and click O K to close the Pref eren ces window.
Report a bug
2.3. Set Up a Server Using Runt ime Det ect ion
Servers can be defined from within the Java EE Web Pro ject wizard. But for the purposes of
exploring JBoss D eveloper Studio the procedure below defines the server first using JBoss Server
Tools runtime detection.
Pro ced u re 2.3. D ef in e a Server U sin g R u n t ime D et ect io n
1. Click Win d o w→Pref eren ces, expand JBo ss T o o l s and select JBo ss R unti me
D etecti o n.
5
Red Hat JBoss Developer St udio 8 .1 St art Developing
2. Click Ad d .
3. Select the directory containing the JBo ss EAP 6 . x installation and click O K. The directory
is now scanned for application servers and JBoss EAP 6.x found.
Fig u re 2.2. JB o ss EAP 6 .x Fo u n d b y R u n t ime D et ect io n
4. To create a server for JBoss EAP 6.x, ensure the jbo ss-eap-6 . x check box is selected and
click O K.
5. Click Appl y and click O K to close the P references window. The server is listed in the
Servers view.
Fig u re 2.3. JB o ss EAP 6 .x Server List ed in Servers View
6. The server is initially shown in stopped mode. Start the server by right-clicking jbo ss-eap6 . x and clicking St art . After a short pause, the view switches to the C o nso l e view and
shows the startup output of the server.
Report a bug
2.4 . Creat e a Java EE Web Project Using JBoss Cent ral
The TicketMonster application is based on a Java EE web application. A wizard is provided for
creating this type of project in JBoss Central and the procedure below guides you through using the
wizard.
Pro ced u re 2.4 . C reat e a Web Ap p licat io n U sin g t h e Java EE Web Pro ject Wiz ard
6
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
1. Click the JBo ss C entral tab.
2. In JBoss Central under Start fro m scratch, click Java EE Web P ro ject to open the
Java EE Web Pro ject wizard. If JBoss Central is not visible, click H elp →JB o ss C en t ral.
Fig u re 2.4 . Java EE Web Pro ject in JB o ss C en t ral
3. From the T arg et R unti me list, select jbo ss-eap-6 . x R unti me and click Next.
Fig u re 2.5. JB o ss EAP 6 .x Select ed as T arg et R u n t ime in Java EE Web Pro ject
Wiz ard
4. Complete the fields about the project as follows:
In the P ro ject name field, type ti cket-mo nster.
7
Red Hat JBoss Developer St udio 8 .1 St art Developing
In the P ackag e field, type o rg . jbo ss. jd f. exampl e. ti cketmo nster.
Fig u re 2.6 . C o mp let ed Pro ject N ame an d Packag e Field s in Java EE Web Pro ject
Wiz ard
5. Click Fi ni sh to create the project.
D uring project creation, the wizard imports project dependencies. When the Java EE Web Pro ject
wizard displays ' Java EE Web P ro ject' P ro ject i s no w read y, click Fi ni sh to close the
wizard. A R EAD ME. md file for the project automatically opens for viewing and the project is listed in
the P ro ject Expl o rer view.
Report a bug
2.5. Add an Ent it y Using Forge T ools
A new entity class can be added to the TicketMonster project using Forge Tools. In the procedure
below an Event entity class is created to hold information about the events for which users can buy
tickets. This Event entity has id, name, description, major and picture fields.
Pro ced u re 2.5. Ad d an En t it y U sin g Fo rg e T o o ls
1. In the P ro ject Expl o rer view, expand ti cket-mo nster→Java
R eso urces→src/mai n/java.
2. Click o rg . jbo ss. jd f. exampl e. ti cketmo nster. mo d el and press C trl + 4 (C md + 4 ).
3. From the Forge wizards list, click JP A: New Enti ty.
4. In the Enti ty name field, type Event and click Fi ni sh.
8
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
Fig u re 2.7. N ew Event En t it y u sin g Fo rg e 2 JP A: New Enti ty Wiz ard
5. In the P ro ject Expl o rer view, ensure
o rg . jbo ss. jd f. exampl e. ti cketmo nster→Event. java is selected and press
C trl + 4 .
6. From the Forge wizards list, click JP A: New Fi el d .
7. Complete the fields about the field as follows:
In the Fi el d name field, type name.
In the Leng th field, type 50 .
9
Red Hat JBoss Developer St udio 8 .1 St art Developing
Fig u re 2.8. N ew name Field u sin g Fo rg e 2 JP A: New Fi el d Wiz ard
8. Click Fi ni sh to create the field.
9. Repeat steps 5 and 6 to create three more fields for the Event entity as follows:
d escri pti o n, with Fi el d T ype Stri ng and Leng th 10 0 0
majo r, with Fi el d T ype Bo o l ean
pi cture, with Fi el d T ype Stri ng
10. In the P ro ject Expl o rer view, right-click Event. java and click Sh o w In →Fo rg e
C o n so le.
11. In the Fo rg e C o nso l e view, on the Forge 2 command line enter
constraint-add --onProperty name
and from the list of options enter the number corresponding to No tNul l .
Report a bug
2.6. Add an Ent it y Using Hibernat e T ools
A new entity class can be added to the TicketMonster project using Hibernate Tools. In the procedure
below a Venue entity class is created to hold information about the venues where events will be held.
This Venue entity has id, name, description and capacity fields.
Pro ced u re 2.6 . Ad d an En t it y U sin g H ib ern at e T o o ls
10
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
1. In the P ro ject Expl o rer view, expand ti cket-mo nster→Java
R eso urces→src/mai n/java.
2. Right-click o rg . jbo ss. jd f. exampl e. ti cketmo nster. mo d el and click N ew→C lass.
3. In the Name field, type Venue and click Fi ni sh. This creates a Venue. java file that is
automatically opened in a Java editor.
Fig u re 2.9 . N ew Venue C lass u sin g Java C lass Wiz ard
4. Add fields to the entity by adding the following lines in between the braces of the Venue class
11
Red Hat JBoss Developer St udio 8 .1 St art Developing
private
private
private
private
Long id;
String name;
String description;
int capacity;
5. Save the Venue. java file by pressing C trl + S (C md + S).
6. Add g et and set methods by right-clicking on a new line after pri vate i nt capaci ty;
and clicking So u rce→G en erat e G et t ers an d Set t ers.
7. Click Sel ect Al l and click O K.
Fig u re 2.10. List o f At t rib u t es Select ed f o r C reat in g G et an d Set Met h o d s
8. Save the Venue. java file.
9. Make the class an entity by right-clicking anywhere in the Venue class and clicking
So u rce→G en erat e H ib ern at e/JPA an n o t at io n s.
12
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
10. Ensure o rg . jbo ss. jd f. exampl e. ti cketmo nster. mo d el . Venue is selected and click
Next.
Fig u re 2.11. Venue C lass Select ed f o r Ad d in g JPA An n o t at io n s
11. Click Fi ni sh and save the Venue. java file.
Report a bug
2.7. Prepare Event Records t o Populat e t he Dat abase
This web project uses H2 for data storage by default. H2 is a Java database integrated with the
application servers of JBoss EAP 6.x. It is an in-memory database which means that the data does
not persist once the application using the database stops running. For this reason, seed data must
be stored in a file within the project and added to the database each time the application starts. While
it might not seem practical to have to construct the database each time the application starts, this
type of data storage is useful during development for testing purposes.
Warning
The use of H2 for data storage is for testing purposes only and must not be used during
production.
The procedure below demonstrates preparing two sample Event records for addition to the H2
database once the TicketMonster application starts.
13
Red Hat JBoss Developer St udio 8 .1 St art Developing
Pro ced u re 2.7. Prep are Even t R eco rd s
1. In the P ro ject Expl o rer view, expand ti cket-mo nster→Java
R eso urces→src/mai n/reso urces.
2. D ouble-click the i mpo rt. sq l file to open it for editing.
3. D ouble-click the i mpo rt. sq l 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/640pxCarnival_Puppets.jpg', 1);
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/640pxWeir%2C_Bob_(2007)_2.jpg', 1);
Fig u re 2.12. C o n t en t o f t h e i mpo rt. sq l File f o r t h is T icket Mo n st er Wo rkf lo w
6. Save the i mpo rt. sq l file.
7. D ouble-click the i mpo rt. sq l view label to make the editor return to its previous size.
Report a bug
2.8. Deploy t he Applicat ion using JBoss Server T ools
The TicketMonster application can be deployed on the JBoss EAP 6.x server created earlier in the
tutorial. The procedure below guides you through how to do this.
14
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
Pro ced u re 2.8. D ep lo y t h e Ap p licat io n U sin g JB o ss Server T o o ls
1. In the P ro ject Expl o rer view, right-click the ti cket-mo nster project name and click
R u n As→R u n o n Server.
2. In the R u n O n Server wizard, ensure C ho o se an exi sti ng server is selected.
3. From the Sel ect the server that yo u want to use table, select jbo ss-eap-6 . x
and click Fi ni sh.
If not already in view, the C o nso l e view automatically opens and shows the runtime server output.
Also, a Web Bro wser automatically opens and displays the web page of the running TicketMonster
application.
Fig u re 2.13. JB o ss EAP 6 .x Select ed in R u n o n Server Wiz ard
In the Web Bro wser, enter sample Member data in the Member Registration fields and click
R eg i ster. The submitted data is displayed in the Members table, which is visible at the bottom of
the web page.
15
Red Hat JBoss Developer St udio 8 .1 St art Developing
Fig u re 2.14 . Samp le D at a in t h e Memb er R eg ist rat io n Field s
Report a bug
2.9. Access and Query t he Dat abase
This web project uses the in-memory database, H2, of the application servers in JBoss EAP 6.x. The
H2 console web application can be used to access the H2 database but this is not packaged with
JBoss EAP 6.x. As the procedure below explains, the H2 console web application must be
downloaded and deployed on the application server from outside JBoss D eveloper Studio before the
H2 database can be accessed.
Pro ced u re 2.9 . Access an d Q u ery t h e D at ab ase
1. Go to http://www.jboss.org/quickstarts/eap/h2-console/.
2. Click D o wnl o ad .
3. Extract the contents of the archive
$ unzip jboss-eap-quickstarts-<version>.zip
4. Copy the h2co nso l e. war file to the JBoss EAP 6.x d epl o yments directory
$ cp jboss-eap-quickstarts-<version>/h2-console/h2console.war
/path/to/jboss-eap/standalone/deployments/
16
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
5. Confirm the H2 console web application is running by looking at the server output in the
C o nso l e view in JBoss D eveloper Studio.
Fig u re 2.15. C o n so le O u t p u t sh o win g h2co nso l e. war D ep lo yed
6. In the ID E open a new Web Bro wser by clicking Win d o w→Sh o w View→O t h er, expand
G eneral and double-click Internal Web Bro wser.
7. In the address bar of the Web Bro wser, enter http://localhost:8080/h2console.
8. In the Lo g i n area, in the JD BC UR L field type jd bc: h2: mem: ti cket-mo nster and in
both the User Name and P asswo rd fields type sa. These settings are defined in the
ti cket-mo nster-d s. xml file in the ti cket-mo nster/src/mai n/webapp/WEB-INF
directory.
Fig u re 2.16 . C o mp let ed H 2 Lo g in Web Pag e
9. Click C o nnect to connect to the database.
The Event, Member and Venue entities created in the TicketMonster project are displayed under
jbd c: h2: mem: ti cket-mo nster. Expanding the entities shows the fields associated with each.
The records stored in the database are viewed using SQL search statements. For example, to display
all the Event records stored in the database, click Event, which creates an SQL search statement
based on Event in the SQ L statement field, and click R un. The details of the Event sample records
you added to i mpo rt. sq l earlier in the tutorial are visible in the table below the SQ L statement
field.
17
Red Hat JBoss Developer St udio 8 .1 St art Developing
Fig u re 2.17. Even t R eco rd s St o red in t h e H 2 D at ab ase
Report a bug
2.10. Add a REST ful Web Service
For the TicketMonster application to be able to access the information stored in the database, web
services are needed. The procedure below creates a RESTful web service that returns all the events in
the database. It generates a POJO (plain old Java object) and adds JAX-RS annotations to create
an endpoint.
Pro ced u re 2.10. Ad d a R EST f u l Web Service
1. In the P ro ject Expl o rer view, expand ti cket-mo nster→Java
R eso urces→src/mai n/java.
2. Right-click o rg . jbo ss. jd f. exampl e. ti cketmo nster. rest and click N ew→C lass.
3. In the Name field, type EventServi ce and click Fi ni sh. This creates a
EventServi ce. java file that is automatically opened in a Java editor.
18
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
Fig u re 2.18. C o mp let ed N ame Field in Java C lass Wiz ard
4. Add the following lines immediately above publ i c cl ass EventServi ce {
@ Path("/events")
@ RequestScoped
and add the following lines in between the braces of the EventServi ce class
@ Inject
private EntityManager em;
@ GET
19
Red Hat JBoss Developer St udio 8 .1 St art Developing
@ 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;
}
5. Save the EventServi ce. java file.
6. Resolve the errors relating to missing imports by right-clicking anywhere in the
EventServi ce class and clicking So u rce→O rg an iz e Imp o rt s.
7. For each class name that is not unique, select the class to use as follows and click Next:
For Med i aT ype select javax. ws. rs. co re. Med i aT ype
For Event select o rg . jbo ss. jd f. exampl e. ti cketmo nster. mo d el . Event
For P ro d uces select javax. ws. rs. P ro d uces
For Li st select java. uti l . Li st
For Inject select java. i nject. Inject
For R eq uestSco ped select java. enterpri se. co ntext. R eq uestSco ped
Fig u re 2.19 . javax. ws. rs. co re. Med i aT ype Select ed f o r Med i aT ype C lass
8. When all the classes have been chosen, click Fi ni sh. The import statements corresponding
to the class names selected in the previous step are added to the EventServi ce. java file.
9. Save the EventServi ce. java file.
10. In the Servers view expand jbo ss-eap-6 . x, right-click ti cket-mo nster and click Fu ll
Pu b lish to update the deployed version of the application.
11. Open a new Web Bro wser and in the address bar of the Web Bro wser enter
http://localhost:8080/ticket-monster/rest/events. D epending on your operating system, the
output of the new RESTful endpoint is displayed or you are prompted to save the JSON
output to a file that can be viewed with a text editor. In both cases, details of the two event
records created earlier in the tutorial are listed as below.
20
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
[
{"id":2,"version":1,"name":"Rock concert of the
decade","description":"Get ready to
rock...","major":true,"picture":null}
,
{"id":1,"version":1,"name":"Shane's Sock
Puppets","description":"This critically acclaimed
masterpiece...","major":true,"picture":null}
]
Report a bug
2.11. Add a User Int erface Opt imiz ed for Mobile Devices
The TicketMonster user interface displays on desktop and mobile clients but it is not optimized for the
latter. The procedure below uses the jQuery Mobile API to create a mobile optimized user interface.
The mobile user interface created varies from the existing user interface by displaying the names of
the events returned by the previously created web service rather than the Member Registration web
page.
Pro ced u re 2.11. Ad d a U ser In t erf ace O p t imiz ed f o r Mo b ile D evices
1. In the P ro ject Expl o rer view, expand ti cket-mo nster→src→mai n.
2. Right-click webapp and click N ew→H T ML f ile.
3. Complete the information about the file as follows:
In the Enter o r sel ect the parent fo l d er field, type ti cketmo nster/src/mai n/webapp.
In the Fi l e name field, type mo bi l e. html .
21
Red Hat JBoss Developer St udio 8 .1 St art Developing
Fig u re 2.20. N ew H T ML File u sin g t h e N ew H T ML File Wiz ard
4. Click Next.
5. From the T empl ates list, select HT ML5 jQ uery Mo bi l e P ag e (1. 4 ) and click Fi ni sh.
This creates a mo bi l e. html file that is automatically opened in the Vi sual /So urce tab of
the Visual Page Editor.
22
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
Fig u re 2.21. Select ed HT ML5 jQ uery Mo bi l e P ag e (1. 4 ) T emp lat e in N ew H T ML
File Wiz ard
6. List the events returned by the web service in the mobile user interface by adding the following
lines immediately after the al ert("R ead y T o G o "); 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");
});
23
Red Hat JBoss Developer St udio 8 .1 St art Developing
Fig u re 2.22. C o mp let ed mo bi l e. html File
7. Save the mo bi l e. html file.
View the mobile interface, by opening an external web browser and in the address bar entering
http://localhost:8080/ticket-monster/mobile.html. At the R ead y T o G o prompt, click O K. The names
of the events in the database are displayed.
Note
HTML pages are deployed immediately so there is no need to do a full publish of the
TicketMonster application to see changes.
24
⁠Chapt er 2 . Creat ing t he T icket Monst er Applicat ion
Fig u re 2.23. Even t s D isp layed via Mo b ile In t erf ace in Ext ern al Web B ro wser
Report a bug
2.12. T est t he Mobile User Int erface Using BrowserSim
Mobile user interfaces are best tested on mobile devices and JBoss D eveloper Studio provides
BrowserSim for this purpose. The procedure below guides you through viewing the TicketMonster
application on simulated mobile devices using BrowserSim.
Pro ced u re 2.12. T est t h e Mo b ile U ser In t erf ace U sin g B ro wserSim
1. On the toolbar click the Bro wserSi m icon
. A simulated device is displayed.
2. At the R ead y T o G o prompt, click C l o se. 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/ticketmonster/mobile.html.
3. To rotate the mobile device, click in any corner of the simulated device.
Fig u re 2.24 . R o t at ed Simu lat ed D evice
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 C lo se.
Report a bug
25
Red Hat JBoss Developer St udio 8 .1 St art Developing
Revision History
R evisio n 8.1.0- 2
Test build for GA
Mo n Mar 23 2015
Mish a H u sn ain Ali
R evisio n 8.1.0- 1
Generated for Beta release
Wed Feb 18 2015
Su p riya B h arad waj
26