SlideShare a Scribd company logo
e-Commerce Systems
Zainab KHALLOUF, Ph.D.
Lecture 6: Implementing Multi-tiered e-Commerce Systems using AngularJS and Java EE
7 (Introduction).
Lecture References
The Java EE 7 Tutorial.
http://docs.oracle.com/javaee/7/tutorial/doc/javaeetutorial7.pdf
How-to: HTML5 Front-End Applications with a Java EE Back End.
http://www.youtube.com/watch?v=qSbHiake3aE
Simple Example angularJS and JavaEE, by Lisa Spitzl.
http://www.youtube.com/watch?v=qSbHiake3aE
AngularJS in 60 Minutes, by Dan Wahlin.
http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf
E-Commerce Systems 2
Outline
1 Introduction to AngularJS framework.
2 Representational State Transfer (RESTful) Web Services.
3 Using AngularJS to view data exposed by Java EE 7 RESTful
Web Services.
E-Commerce Systems 3
Introduction to AngularJS
What is AngularJS?
AngularJS is an open-source MVC JavaScript framework,
maintained by Google, for building Single Page Applications
(SPA) that run in a browser.
E-Commerce Systems 5
What is AngularJS?
E-Commerce Systems 6
Single Page Application (SPA)
A single page application (SPA) is one in which we have a shell
page and we can load multiple views into this shell page.
AngularJS in 60 Minutes, by Dan Wahlin.
E-Commerce Systems 7
AngularJS Application Parts
E-Commerce Systems 8
AngularJS Application Parts (cont.)
E-Commerce Systems 9
AngularJS Application Parts (cont.)
AngularJS application contains:
Module.
A container for the different parts of your app : controllers,
services, filters, directives, etc.
Routes.
In the SPA world we need a way to be able to track what
route we’re on and what view that’s associated with and
then what controller goes with that view
Views/Partials.
Views also called partials in AngularJS, they are defined in
plain HTML and extended with dynamics (JavaScript logic)
using so-called directives.
E-Commerce Systems 10
AngularJS Application Parts (cont.)
Controllers.
Controllers contain only business logic.
Services.
You can use services to organize and share code (or data)
across your app.
Filters.
A filter formats the value of an expression for display to the
user.
E-Commerce Systems 11
AngularJS Application: Views, Controllers and Scope
The glue between the View and the Controller is the Scope.
$scope represents the scope object.
AngularJS in 60 Minutes, by Dan Wahlin.
E-Commerce Systems 12
Developing AngularJS Application in Netbeans
E-Commerce Systems 13
Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 14
Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 15
Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 16
Developing AngularJS Application in Netbeans (cont.)
Use Bower to manage dependencies.
E-Commerce Systems 17
Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 18
Developing AngularJS Application in Netbeans (cont.)
index.html
ng-app is a built-in directive to initialize the Angular app.
ng-model is also a is a built-in directive, it adds a property
name into the scope. To write the value of the name property
we add a data binding expression.
E-Commerce Systems 19
Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 20
Developing AngularJS Application in Netbeans (cont.)
E-Commerce Systems 21
Representational State Transfer (RESTful) Web Services
What Are Web Services?
Web services are client and server applications that
communicate over HTTP using messages.
Web services provide a standard means of interoperating
between software applications running on a variety of
platforms and frameworks.
E-Commerce Systems 23
Types of Web Services
Big Web Services: use XML messages that follow the
Simple Object Access Protocol (SOAP) standard
RESTful Web Services: lightweight web services
suitable for basic, adhoc integration scenarios. (The topic
of this lecture)
E-Commerce Systems 24
RESTful Web Services
The REST architectural style is designed to use a
stateless communication protocol, typically HTTP.
Data and functionality are considered resources and are
accessed using Uniform Resource Identifiers (URIs).
The resources are represented by an XML document, or an
image file, or an HTML page, and are acted upon by
HTTP operations: GET, PUT, POST and DELETE.
A client might retrieve a particular representation, modify
the resource by updating its data, or delete the resource
entirely.
E-Commerce Systems 25
RESTful Web Services (cont.)
In Java EE 7, the Java API for RESTful Web Services
(JAX-RS) provides the functionality for REST web
services.
The JAX-RS API uses annotations to simplify the
development of RESTful web services.
Developers decorate Java programming language class files
with JAX-RS annotations to define resources and the
actions that can be performed on those resources.
Jersey is its official reference implementation of JAX-RS
and the one that is most widely used in development and
production.
The JAX-RS runtime will return a Web Application
Definition Language (WADL) document describing the
resource; see http://www.w3.org/Submission/wadl/ for
more information.
E-Commerce Systems 26
Web Application Definition Language (WADL) :
Example
E-Commerce Systems 27
Creating a RESTful Root Resource Class
Root resource classes are ”plain old Java objects” (POJOs)
that are annotated with @Path. The methods in the class
can be annotated with @Path or a request method
designator, such as @GET, @PUT, @POST, or @DELETE.
E-Commerce Systems 28
First RESTful Web Service
The following example demonstrates how to create a RESTful
web service that simply displays an HTML.
E-Commerce Systems 29
Summary of JAX-RS Annotations
@Path The @Path annotation’s value is a relative URI path
indicating where the Java class will be hosted: for
example, /hellors. You can also embed variables in
the URIs to make a URI path template (i.e. URI
path templates are URIs with variables embedded
within the URI syntax.). For example, you could ask
for the name of a user and pass it to the application
as a variable in the URI: /hellors/{username}.
@GET The Java method annotated with this request
method designator will process HTTP GET requests.
@POST The Java method annotated with this request
method designator will process HTTP POST re-
quests.
E-Commerce Systems 30
Summary of JAX-RS Annotations (cont.)
@PUT The Java method annotated with this request
method designator will process HTTP PUT requests.
@DELETE The Java method annotated with this request
method designator will process HTTP DELETE re-
quests.
@HEAD The Java method annotated with this request
method designator will process HTTP HEAD re-
quests.
@Consumes The @Consumes annotation is used to specify the
Multipurpose Internet Mail Extensions (MIME) me-
dia types of representations a resource can consume
that were sent by the client.
@Produces The @Produces annotation is used to specify the
MIME media types of representations a resource can
produce and send back to the client: for example,
”text/plain”.
E-Commerce Systems 31
Summary of JAX-RS Annotations (cont.)
@PathParam
The @PathParam annotation is a type
of parameter that you can extract from
the request URI for use in your resource
class.
The parameter names correspond to the
URI path template variable names
specified in the @Path class-level (or
method-level) annotation.
E-Commerce Systems 32
Summary of JAX-RS Annotations (cont.)
@PathParam
(cont.) For example, in the following @Path
annotation:@Path(”/users/{user}”), if the
user types the user name ”Bob,” the web
service responds to the following URL:
http://example.com/users/Bob, To obtain the
value of the user name, the @PathParam
annotation may be used on the method
parameter of a request method, as shown in
the following code example:
E-Commerce Systems 33
Summary of JAX-RS Annotations (cont.)
@QueryParam The @QueryParam annotation is a type
of parameter that you can extract for use
in your resource class. Query parame-
ters are extracted from the request URI
query parameters. (e.g. GET /employ-
ees?maxyear=2009&minyear=1999)
E-Commerce Systems 34
Developing a RESTful Web Service in Netbeans
Create a new project by choosing New → Project from the File
menu to open the New Project Wizard dialog. In the dialog,
choose Web from the category list on the left and choose Web
Application from the Project list on the right. Click the Next
button to continue.
E-Commerce Systems 35
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 36
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 37
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 38
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 39
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 40
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 41
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 42
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 43
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 44
Developing a RESTful Web Service in Netbeans (cont.)
E-Commerce Systems 45
Generating RESTful Web Services from Entity Classes
E-Commerce Systems 46
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 47
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 48
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 49
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 50
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 51
AccountFacadeREST.java
package service;
import entities.Account;
import java.util.List;
import javax.ejb.Stateless;
import javax.persistence.EntityManager;
import javax.persistence.PersistenceContext;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
@Stateless
@Path("accounts")
public class AccountFacadeREST extends AbstractFacade<Account> {
@PersistenceContext(unitName = "AccountJSFExamplePU")
private EntityManager em;
public AccountFacadeREST() {
super(Account.class);
}
@POST
@Override
@Consumes({"application/xml", "application/json"})
public void create(Account entity) {
super.create(entity);
}
E-Commerce Systems 52
AccountFacadeREST.java (cont.)
@PUT
@Path("{id}")
@Consumes({"application/xml", "application/json"})
public void edit(@PathParam("id") Long id, Account entity) {
super.edit(entity);
}
@POST
@Path("{id}")
@Consumes({"application/xml", "application/json"})
public void editPost(@PathParam("id") Long id, Account entity) {
super.edit(entity);
}
@DELETE
@Path("{id}")
public void remove(@PathParam("id") Long id) {
super.remove(super.find(id));
}
@GET
@Path("{id}")
@Produces({"application/xml", "application/json"})
public Account find(@PathParam("id") Long id) {
return super.find(id);
}
E-Commerce Systems 53
AccountFacadeREST.java (cont.)
@GET
@Override
@Produces({"application/xml", "application/json"})
public List<Account> findAll() {
return super.findAll();
}
@GET
@Path("{from}/{to}")
@Produces({"application/xml", "application/json"})
public List<Account> findRange(@PathParam("from") Integer from, @PathParam("to") Integer to) {
return super.findRange(new int[]{from, to});
}
@GET
@Path("count")
@Produces("text/plain")
public String countREST() {
return String.valueOf(super.count());
}
@Override
protected EntityManager getEntityManager() {
return em;
}
E-Commerce Systems 54
Generating RESTful Web Services from Entity Classes
(cont.)
Cross-origin resource sharing
E-Commerce Systems 55
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 56
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 57
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 58
Generating RESTful Web Services from Entity Classes
(cont.)
E-Commerce Systems 59
Creating AngularJS Application with RESTful Web
Services Backend
Acknowledgment:
Simple Example angularJS and JavaEE, by Lisa Spitzl.
http://www.youtube.com/watch?v=qSbHiake3aE
E-Commerce Systems 60
services.js
Create a factory object: Accounts, then define the method
findAll to returns all the accounts.
E-Commerce Systems 61
controllers.js
E-Commerce Systems 62
partial1.html
E-Commerce Systems 63
Result
E-Commerce Systems 64
The Affable Bean application with HTML5 front-end
The Affable Bean application with HTML5 front-end.
https://bitbucket.org/dkonecny/affable-bean
The Affable Bean application with HTML5 front-end
E-Commerce Systems 66
Questions?

More Related Content

What's hot

J2 EEE SIDES
J2 EEE  SIDESJ2 EEE  SIDES
J2 EEE SIDES
bputhal
 
Struts Introduction Course
Struts Introduction CourseStruts Introduction Course
Struts Introduction Course
guest764934
 
springmvc-150923124312-lva1-app6892
springmvc-150923124312-lva1-app6892springmvc-150923124312-lva1-app6892
springmvc-150923124312-lva1-app6892
Tuna Tore
 
Part 7 packaging and deployment
Part 7 packaging and deploymentPart 7 packaging and deployment
Part 7 packaging and deployment
techbed
 

What's hot (20)

J2 EEE SIDES
J2 EEE  SIDESJ2 EEE  SIDES
J2 EEE SIDES
 
Spring Framework-II
Spring Framework-IISpring Framework-II
Spring Framework-II
 
JAX-RS. Developing RESTful APIs with Java
JAX-RS. Developing RESTful APIs with JavaJAX-RS. Developing RESTful APIs with Java
JAX-RS. Developing RESTful APIs with Java
 
Java Web Programming [4/9] : JSP Basic
Java Web Programming [4/9] : JSP BasicJava Web Programming [4/9] : JSP Basic
Java Web Programming [4/9] : JSP Basic
 
Hibernate I
Hibernate IHibernate I
Hibernate I
 
Lec2 ecom fall16
Lec2 ecom fall16Lec2 ecom fall16
Lec2 ecom fall16
 
Struts Introduction Course
Struts Introduction CourseStruts Introduction Course
Struts Introduction Course
 
Colloquium Report
Colloquium ReportColloquium Report
Colloquium Report
 
Hibernate III
Hibernate IIIHibernate III
Hibernate III
 
Http and REST APIs.
Http and REST APIs.Http and REST APIs.
Http and REST APIs.
 
springmvc-150923124312-lva1-app6892
springmvc-150923124312-lva1-app6892springmvc-150923124312-lva1-app6892
springmvc-150923124312-lva1-app6892
 
Part 7 packaging and deployment
Part 7 packaging and deploymentPart 7 packaging and deployment
Part 7 packaging and deployment
 
Jdbc basic features
Jdbc basic featuresJdbc basic features
Jdbc basic features
 
Share point review qustions
Share point review qustionsShare point review qustions
Share point review qustions
 
UI5Con presentation on UI5 OData V4 Model
UI5Con presentation on UI5 OData V4 ModelUI5Con presentation on UI5 OData V4 Model
UI5Con presentation on UI5 OData V4 Model
 
Odata V4 : The New way to REST for Your Applications
Odata V4 : The New way to REST for Your Applications Odata V4 : The New way to REST for Your Applications
Odata V4 : The New way to REST for Your Applications
 
Java EE and Glassfish
Java EE and GlassfishJava EE and Glassfish
Java EE and Glassfish
 
Java Web Programming [6/9] : MVC
Java Web Programming [6/9] : MVCJava Web Programming [6/9] : MVC
Java Web Programming [6/9] : MVC
 
OrchardCMS module development
OrchardCMS module developmentOrchardCMS module development
OrchardCMS module development
 
Orchard Dynamic Class Extensions
Orchard Dynamic Class ExtensionsOrchard Dynamic Class Extensions
Orchard Dynamic Class Extensions
 

Viewers also liked

Early Childhood Education For BOS revised 1
Early Childhood Education For BOS revised 1Early Childhood Education For BOS revised 1
Early Childhood Education For BOS revised 1
Alfredo Perez
 
Lecture15
Lecture15Lecture15
Lecture15
Muuluu
 
Currículo_Resumido_Luiz_Facioli_21_09_15
Currículo_Resumido_Luiz_Facioli_21_09_15Currículo_Resumido_Luiz_Facioli_21_09_15
Currículo_Resumido_Luiz_Facioli_21_09_15
Luiz Facioli Neto
 
алгебра 2
алгебра 2алгебра 2
алгебра 2
pogromskaya
 
IMPORTANCIA DEL PLAN DE MANEJO DE AGUAS
IMPORTANCIA DEL PLAN DE MANEJO DE AGUASIMPORTANCIA DEL PLAN DE MANEJO DE AGUAS
IMPORTANCIA DEL PLAN DE MANEJO DE AGUAS
willy mosquera
 
алгебра 3
алгебра 3алгебра 3
алгебра 3
pogromskaya
 
Grad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje Rusanda
Grad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje RusandaGrad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje Rusanda
Grad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje Rusanda
NALED Serbia
 

Viewers also liked (18)

AfterADisasterGuide
AfterADisasterGuideAfterADisasterGuide
AfterADisasterGuide
 
Ecom lec3 16_ej_bs
Ecom lec3 16_ej_bsEcom lec3 16_ej_bs
Ecom lec3 16_ej_bs
 
การใส่รูปภาพ
 การใส่รูปภาพ การใส่รูปภาพ
การใส่รูปภาพ
 
Early Childhood Education For BOS revised 1
Early Childhood Education For BOS revised 1Early Childhood Education For BOS revised 1
Early Childhood Education For BOS revised 1
 
Lecture15
Lecture15Lecture15
Lecture15
 
Currículo_Resumido_Luiz_Facioli_21_09_15
Currículo_Resumido_Luiz_Facioli_21_09_15Currículo_Resumido_Luiz_Facioli_21_09_15
Currículo_Resumido_Luiz_Facioli_21_09_15
 
алгебра 2
алгебра 2алгебра 2
алгебра 2
 
Single detached House in Cavite/4BR/15% down Lipat In 60 Days/RFO/Foreclosed/...
Single detached House in Cavite/4BR/15% down Lipat In 60 Days/RFO/Foreclosed/...Single detached House in Cavite/4BR/15% down Lipat In 60 Days/RFO/Foreclosed/...
Single detached House in Cavite/4BR/15% down Lipat In 60 Days/RFO/Foreclosed/...
 
Single detached houses rush rush for sale/brand new houses rush for sale in c...
Single detached houses rush rush for sale/brand new houses rush for sale in c...Single detached houses rush rush for sale/brand new houses rush for sale in c...
Single detached houses rush rush for sale/brand new houses rush for sale in c...
 
IMPORTANCIA DEL PLAN DE MANEJO DE AGUAS
IMPORTANCIA DEL PLAN DE MANEJO DE AGUASIMPORTANCIA DEL PLAN DE MANEJO DE AGUAS
IMPORTANCIA DEL PLAN DE MANEJO DE AGUAS
 
алгебра 3
алгебра 3алгебра 3
алгебра 3
 
Single detached houses rush rush for sale/brand new houses rush for sale in c...
Single detached houses rush rush for sale/brand new houses rush for sale in c...Single detached houses rush rush for sale/brand new houses rush for sale in c...
Single detached houses rush rush for sale/brand new houses rush for sale in c...
 
Grad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje Rusanda
Grad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje RusandaGrad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje Rusanda
Grad Zrenjanin - Javno privatno partnerstvo: rekonstrukcija Banje Rusanda
 
DESIREE DALAIS (1)
DESIREE DALAIS (1)DESIREE DALAIS (1)
DESIREE DALAIS (1)
 
Vinilos
VinilosVinilos
Vinilos
 
Creative leadership the value design brigns to business
Creative leadership the value design brigns to businessCreative leadership the value design brigns to business
Creative leadership the value design brigns to business
 
Institutional Opportunities for Early Childhood Education (ECE) in the South ...
Institutional Opportunities for Early Childhood Education (ECE) in the South ...Institutional Opportunities for Early Childhood Education (ECE) in the South ...
Institutional Opportunities for Early Childhood Education (ECE) in the South ...
 
Angular2 - getting-ready
Angular2 - getting-ready Angular2 - getting-ready
Angular2 - getting-ready
 

Similar to Lec6 ecom fall16

Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptxTransform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx
kmani5
 
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).ppt
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).pptTransform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).ppt
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).ppt
HusseinWassof
 
Resume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_expResume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_exp
Sandip Mohod
 
wp-25tips-oltscripts-2287467
wp-25tips-oltscripts-2287467wp-25tips-oltscripts-2287467
wp-25tips-oltscripts-2287467
Yutaka Takatsu
 
COMPRO- WEB ALBUM & MOTION ANALYZER
COMPRO- WEB ALBUM  & MOTION ANALYZERCOMPRO- WEB ALBUM  & MOTION ANALYZER
COMPRO- WEB ALBUM & MOTION ANALYZER
Ashish Tanwer
 

Similar to Lec6 ecom fall16 (20)

Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptxTransform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx
 
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).ppt
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).pptTransform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).ppt
Transform-to-Smart-ERP-using-Custom-Mobile-Apps.pptx (3).ppt
 
Introduction to ejb and struts framework
Introduction to ejb and struts frameworkIntroduction to ejb and struts framework
Introduction to ejb and struts framework
 
Java EE 7 introduction
Java EE 7  introductionJava EE 7  introduction
Java EE 7 introduction
 
Java ee introduction
Java ee introductionJava ee introduction
Java ee introduction
 
J2ee
J2eeJ2ee
J2ee
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Mashups
MashupsMashups
Mashups
 
Resume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_expResume_Sandip_Mohod_Java_9_plus_years_exp
Resume_Sandip_Mohod_Java_9_plus_years_exp
 
wp-25tips-oltscripts-2287467
wp-25tips-oltscripts-2287467wp-25tips-oltscripts-2287467
wp-25tips-oltscripts-2287467
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008
 
SpringBootCompleteBootcamp.pptx
SpringBootCompleteBootcamp.pptxSpringBootCompleteBootcamp.pptx
SpringBootCompleteBootcamp.pptx
 
Developing Java Web Applications
Developing Java Web ApplicationsDeveloping Java Web Applications
Developing Java Web Applications
 
COMPRO- WEB ALBUM & MOTION ANALYZER
COMPRO- WEB ALBUM  & MOTION ANALYZERCOMPRO- WEB ALBUM  & MOTION ANALYZER
COMPRO- WEB ALBUM & MOTION ANALYZER
 
Spring tutorials
Spring tutorialsSpring tutorials
Spring tutorials
 
Final paper
Final paperFinal paper
Final paper
 
Getting Started with API Management
Getting Started with API ManagementGetting Started with API Management
Getting Started with API Management
 
IRJET- Lightweight MVC Framework in PHP
IRJET- Lightweight MVC Framework in PHPIRJET- Lightweight MVC Framework in PHP
IRJET- Lightweight MVC Framework in PHP
 
sMash_for_zOS-users
sMash_for_zOS-userssMash_for_zOS-users
sMash_for_zOS-users
 
Design patterns
Design patternsDesign patterns
Design patterns
 

Recently uploaded

Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
joachimlavalley1
 

Recently uploaded (20)

Synthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptxSynthetic Fiber Construction in lab .pptx
Synthetic Fiber Construction in lab .pptx
 
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptxSolid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
Solid waste management & Types of Basic civil Engineering notes by DJ Sir.pptx
 
PART A. Introduction to Costumer Service
PART A. Introduction to Costumer ServicePART A. Introduction to Costumer Service
PART A. Introduction to Costumer Service
 
B.ed spl. HI pdusu exam paper-2023-24.pdf
B.ed spl. HI pdusu exam paper-2023-24.pdfB.ed spl. HI pdusu exam paper-2023-24.pdf
B.ed spl. HI pdusu exam paper-2023-24.pdf
 
2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...2024.06.01 Introducing a competency framework for languag learning materials ...
2024.06.01 Introducing a competency framework for languag learning materials ...
 
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxStudents, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptx
 
Additional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdfAdditional Benefits for Employee Website.pdf
Additional Benefits for Employee Website.pdf
 
Template Jadual Bertugas Kelas (Boleh Edit)
Template Jadual Bertugas Kelas (Boleh Edit)Template Jadual Bertugas Kelas (Boleh Edit)
Template Jadual Bertugas Kelas (Boleh Edit)
 
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXXPhrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
Phrasal Verbs.XXXXXXXXXXXXXXXXXXXXXXXXXX
 
How to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS ModuleHow to Split Bills in the Odoo 17 POS Module
How to Split Bills in the Odoo 17 POS Module
 
Basic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumersBasic phrases for greeting and assisting costumers
Basic phrases for greeting and assisting costumers
 
Instructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptxInstructions for Submissions thorugh G- Classroom.pptx
Instructions for Submissions thorugh G- Classroom.pptx
 
Sectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdfSectors of the Indian Economy - Class 10 Study Notes pdf
Sectors of the Indian Economy - Class 10 Study Notes pdf
 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
 
Basic Civil Engineering Notes of Chapter-6, Topic- Ecosystem, Biodiversity G...
Basic Civil Engineering Notes of Chapter-6,  Topic- Ecosystem, Biodiversity G...Basic Civil Engineering Notes of Chapter-6,  Topic- Ecosystem, Biodiversity G...
Basic Civil Engineering Notes of Chapter-6, Topic- Ecosystem, Biodiversity G...
 
The Art Pastor's Guide to Sabbath | Steve Thomason
The Art Pastor's Guide to Sabbath | Steve ThomasonThe Art Pastor's Guide to Sabbath | Steve Thomason
The Art Pastor's Guide to Sabbath | Steve Thomason
 
Fish and Chips - have they had their chips
Fish and Chips - have they had their chipsFish and Chips - have they had their chips
Fish and Chips - have they had their chips
 
Digital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and ResearchDigital Tools and AI for Teaching Learning and Research
Digital Tools and AI for Teaching Learning and Research
 
Unit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdfUnit 2- Research Aptitude (UGC NET Paper I).pdf
Unit 2- Research Aptitude (UGC NET Paper I).pdf
 
Embracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic ImperativeEmbracing GenAI - A Strategic Imperative
Embracing GenAI - A Strategic Imperative
 

Lec6 ecom fall16

  • 1. e-Commerce Systems Zainab KHALLOUF, Ph.D. Lecture 6: Implementing Multi-tiered e-Commerce Systems using AngularJS and Java EE 7 (Introduction).
  • 2. Lecture References The Java EE 7 Tutorial. http://docs.oracle.com/javaee/7/tutorial/doc/javaeetutorial7.pdf How-to: HTML5 Front-End Applications with a Java EE Back End. http://www.youtube.com/watch?v=qSbHiake3aE Simple Example angularJS and JavaEE, by Lisa Spitzl. http://www.youtube.com/watch?v=qSbHiake3aE AngularJS in 60 Minutes, by Dan Wahlin. http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf E-Commerce Systems 2
  • 3. Outline 1 Introduction to AngularJS framework. 2 Representational State Transfer (RESTful) Web Services. 3 Using AngularJS to view data exposed by Java EE 7 RESTful Web Services. E-Commerce Systems 3
  • 5. What is AngularJS? AngularJS is an open-source MVC JavaScript framework, maintained by Google, for building Single Page Applications (SPA) that run in a browser. E-Commerce Systems 5
  • 7. Single Page Application (SPA) A single page application (SPA) is one in which we have a shell page and we can load multiple views into this shell page. AngularJS in 60 Minutes, by Dan Wahlin. E-Commerce Systems 7
  • 9. AngularJS Application Parts (cont.) E-Commerce Systems 9
  • 10. AngularJS Application Parts (cont.) AngularJS application contains: Module. A container for the different parts of your app : controllers, services, filters, directives, etc. Routes. In the SPA world we need a way to be able to track what route we’re on and what view that’s associated with and then what controller goes with that view Views/Partials. Views also called partials in AngularJS, they are defined in plain HTML and extended with dynamics (JavaScript logic) using so-called directives. E-Commerce Systems 10
  • 11. AngularJS Application Parts (cont.) Controllers. Controllers contain only business logic. Services. You can use services to organize and share code (or data) across your app. Filters. A filter formats the value of an expression for display to the user. E-Commerce Systems 11
  • 12. AngularJS Application: Views, Controllers and Scope The glue between the View and the Controller is the Scope. $scope represents the scope object. AngularJS in 60 Minutes, by Dan Wahlin. E-Commerce Systems 12
  • 13. Developing AngularJS Application in Netbeans E-Commerce Systems 13
  • 14. Developing AngularJS Application in Netbeans (cont.) E-Commerce Systems 14
  • 15. Developing AngularJS Application in Netbeans (cont.) E-Commerce Systems 15
  • 16. Developing AngularJS Application in Netbeans (cont.) E-Commerce Systems 16
  • 17. Developing AngularJS Application in Netbeans (cont.) Use Bower to manage dependencies. E-Commerce Systems 17
  • 18. Developing AngularJS Application in Netbeans (cont.) E-Commerce Systems 18
  • 19. Developing AngularJS Application in Netbeans (cont.) index.html ng-app is a built-in directive to initialize the Angular app. ng-model is also a is a built-in directive, it adds a property name into the scope. To write the value of the name property we add a data binding expression. E-Commerce Systems 19
  • 20. Developing AngularJS Application in Netbeans (cont.) E-Commerce Systems 20
  • 21. Developing AngularJS Application in Netbeans (cont.) E-Commerce Systems 21
  • 22. Representational State Transfer (RESTful) Web Services
  • 23. What Are Web Services? Web services are client and server applications that communicate over HTTP using messages. Web services provide a standard means of interoperating between software applications running on a variety of platforms and frameworks. E-Commerce Systems 23
  • 24. Types of Web Services Big Web Services: use XML messages that follow the Simple Object Access Protocol (SOAP) standard RESTful Web Services: lightweight web services suitable for basic, adhoc integration scenarios. (The topic of this lecture) E-Commerce Systems 24
  • 25. RESTful Web Services The REST architectural style is designed to use a stateless communication protocol, typically HTTP. Data and functionality are considered resources and are accessed using Uniform Resource Identifiers (URIs). The resources are represented by an XML document, or an image file, or an HTML page, and are acted upon by HTTP operations: GET, PUT, POST and DELETE. A client might retrieve a particular representation, modify the resource by updating its data, or delete the resource entirely. E-Commerce Systems 25
  • 26. RESTful Web Services (cont.) In Java EE 7, the Java API for RESTful Web Services (JAX-RS) provides the functionality for REST web services. The JAX-RS API uses annotations to simplify the development of RESTful web services. Developers decorate Java programming language class files with JAX-RS annotations to define resources and the actions that can be performed on those resources. Jersey is its official reference implementation of JAX-RS and the one that is most widely used in development and production. The JAX-RS runtime will return a Web Application Definition Language (WADL) document describing the resource; see http://www.w3.org/Submission/wadl/ for more information. E-Commerce Systems 26
  • 27. Web Application Definition Language (WADL) : Example E-Commerce Systems 27
  • 28. Creating a RESTful Root Resource Class Root resource classes are ”plain old Java objects” (POJOs) that are annotated with @Path. The methods in the class can be annotated with @Path or a request method designator, such as @GET, @PUT, @POST, or @DELETE. E-Commerce Systems 28
  • 29. First RESTful Web Service The following example demonstrates how to create a RESTful web service that simply displays an HTML. E-Commerce Systems 29
  • 30. Summary of JAX-RS Annotations @Path The @Path annotation’s value is a relative URI path indicating where the Java class will be hosted: for example, /hellors. You can also embed variables in the URIs to make a URI path template (i.e. URI path templates are URIs with variables embedded within the URI syntax.). For example, you could ask for the name of a user and pass it to the application as a variable in the URI: /hellors/{username}. @GET The Java method annotated with this request method designator will process HTTP GET requests. @POST The Java method annotated with this request method designator will process HTTP POST re- quests. E-Commerce Systems 30
  • 31. Summary of JAX-RS Annotations (cont.) @PUT The Java method annotated with this request method designator will process HTTP PUT requests. @DELETE The Java method annotated with this request method designator will process HTTP DELETE re- quests. @HEAD The Java method annotated with this request method designator will process HTTP HEAD re- quests. @Consumes The @Consumes annotation is used to specify the Multipurpose Internet Mail Extensions (MIME) me- dia types of representations a resource can consume that were sent by the client. @Produces The @Produces annotation is used to specify the MIME media types of representations a resource can produce and send back to the client: for example, ”text/plain”. E-Commerce Systems 31
  • 32. Summary of JAX-RS Annotations (cont.) @PathParam The @PathParam annotation is a type of parameter that you can extract from the request URI for use in your resource class. The parameter names correspond to the URI path template variable names specified in the @Path class-level (or method-level) annotation. E-Commerce Systems 32
  • 33. Summary of JAX-RS Annotations (cont.) @PathParam (cont.) For example, in the following @Path annotation:@Path(”/users/{user}”), if the user types the user name ”Bob,” the web service responds to the following URL: http://example.com/users/Bob, To obtain the value of the user name, the @PathParam annotation may be used on the method parameter of a request method, as shown in the following code example: E-Commerce Systems 33
  • 34. Summary of JAX-RS Annotations (cont.) @QueryParam The @QueryParam annotation is a type of parameter that you can extract for use in your resource class. Query parame- ters are extracted from the request URI query parameters. (e.g. GET /employ- ees?maxyear=2009&minyear=1999) E-Commerce Systems 34
  • 35. Developing a RESTful Web Service in Netbeans Create a new project by choosing New → Project from the File menu to open the New Project Wizard dialog. In the dialog, choose Web from the category list on the left and choose Web Application from the Project list on the right. Click the Next button to continue. E-Commerce Systems 35
  • 36. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 36
  • 37. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 37
  • 38. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 38
  • 39. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 39
  • 40. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 40
  • 41. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 41
  • 42. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 42
  • 43. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 43
  • 44. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 44
  • 45. Developing a RESTful Web Service in Netbeans (cont.) E-Commerce Systems 45
  • 46. Generating RESTful Web Services from Entity Classes E-Commerce Systems 46
  • 47. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 47
  • 48. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 48
  • 49. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 49
  • 50. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 50
  • 51. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 51
  • 52. AccountFacadeREST.java package service; import entities.Account; import java.util.List; import javax.ejb.Stateless; import javax.persistence.EntityManager; import javax.persistence.PersistenceContext; import javax.ws.rs.Consumes; import javax.ws.rs.DELETE; import javax.ws.rs.GET; import javax.ws.rs.POST; import javax.ws.rs.PUT; import javax.ws.rs.Path; import javax.ws.rs.PathParam; import javax.ws.rs.Produces; @Stateless @Path("accounts") public class AccountFacadeREST extends AbstractFacade<Account> { @PersistenceContext(unitName = "AccountJSFExamplePU") private EntityManager em; public AccountFacadeREST() { super(Account.class); } @POST @Override @Consumes({"application/xml", "application/json"}) public void create(Account entity) { super.create(entity); } E-Commerce Systems 52
  • 53. AccountFacadeREST.java (cont.) @PUT @Path("{id}") @Consumes({"application/xml", "application/json"}) public void edit(@PathParam("id") Long id, Account entity) { super.edit(entity); } @POST @Path("{id}") @Consumes({"application/xml", "application/json"}) public void editPost(@PathParam("id") Long id, Account entity) { super.edit(entity); } @DELETE @Path("{id}") public void remove(@PathParam("id") Long id) { super.remove(super.find(id)); } @GET @Path("{id}") @Produces({"application/xml", "application/json"}) public Account find(@PathParam("id") Long id) { return super.find(id); } E-Commerce Systems 53
  • 54. AccountFacadeREST.java (cont.) @GET @Override @Produces({"application/xml", "application/json"}) public List<Account> findAll() { return super.findAll(); } @GET @Path("{from}/{to}") @Produces({"application/xml", "application/json"}) public List<Account> findRange(@PathParam("from") Integer from, @PathParam("to") Integer to) { return super.findRange(new int[]{from, to}); } @GET @Path("count") @Produces("text/plain") public String countREST() { return String.valueOf(super.count()); } @Override protected EntityManager getEntityManager() { return em; } E-Commerce Systems 54
  • 55. Generating RESTful Web Services from Entity Classes (cont.) Cross-origin resource sharing E-Commerce Systems 55
  • 56. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 56
  • 57. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 57
  • 58. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 58
  • 59. Generating RESTful Web Services from Entity Classes (cont.) E-Commerce Systems 59
  • 60. Creating AngularJS Application with RESTful Web Services Backend Acknowledgment: Simple Example angularJS and JavaEE, by Lisa Spitzl. http://www.youtube.com/watch?v=qSbHiake3aE E-Commerce Systems 60
  • 61. services.js Create a factory object: Accounts, then define the method findAll to returns all the accounts. E-Commerce Systems 61
  • 65. The Affable Bean application with HTML5 front-end The Affable Bean application with HTML5 front-end. https://bitbucket.org/dkonecny/affable-bean
  • 66. The Affable Bean application with HTML5 front-end E-Commerce Systems 66