lec6 ecom fall16

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.


AngularJS in 60 Minutes, by Dan Wahlin.

http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf

E-Commerce Systems 2

http://docs.oracle.com/javaee/7/tutorial/doc/javaeetutorial7.pdf



http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf

Outline

1 Introduction to AngularJS framework.

2 Representational State Transfer (RESTful) Web Services.

3 Using AngularJS to view data exposed by Java EE 7 RESTfulWeb Services.


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.


What is AngularJS?


Single Page Application (SPA)

A single page application (SPA) is one in which we have a shellpage and we can load multiple views into this shell page.



AngularJS Application Parts


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 whatroute we’re on and what view that’s associated with andthen what controller goes with that view

Views/Partials.

Views also called partials in AngularJS, they are defined inplain HTML and extended with dynamics (JavaScript logic)using so-called directives.



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 theuser.


AngularJS Application: Views, Controllers and Scope

The glue between the View and the Controller is the Scope.$scope represents the scope object.



Developing AngularJS Application in Netbeans


Developing AngularJS Application in Netbeans (cont.)



Use Bower to manage dependencies.



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 propertyname into the scope. To write the value of the name propertywe add a data binding expression.


Representational State Transfer (RESTful) Web Services

What Are Web Services?

Web services are client and server applications thatcommunicate over HTTP using messages.

Web services provide a standard means of interoperatingbetween software applications running on a variety ofplatforms and frameworks.


Types of Web Services

Big Web Services: use XML messages that follow theSimple Object Access Protocol (SOAP) standard

RESTful Web Services: lightweight web servicessuitable for basic, adhoc integration scenarios. (The topicof this lecture)


RESTful Web Services

The REST architectural style is designed to use astateless communication protocol, typically HTTP.

Data and functionality are considered resources and areaccessed using Uniform Resource Identifiers (URIs).

The resources are represented by an XML document, or animage file, or an HTML page, and are acted upon byHTTP operations: GET, PUT, POST and DELETE.

A client might retrieve a particular representation, modifythe resource by updating its data, or delete the resourceentirely.


RESTful Web Services (cont.)

In Java EE 7, the Java API for RESTful Web Services(JAX-RS) provides the functionality for REST webservices.

The JAX-RS API uses annotations to simplify thedevelopment of RESTful web services.

Developers decorate Java programming language class fileswith JAX-RS annotations to define resources and theactions that can be performed on those resources.

Jersey is its official reference implementation of JAX-RSand the one that is most widely used in development andproduction.

The JAX-RS runtime will return a Web ApplicationDefinition Language (WADL) document describing theresource; see http://www.w3.org/Submission/wadl/ formore information.


Web Application Definition Language (WADL) :Example


Creating a RESTful Root Resource Class

Root resource classes are ”plain old Java objects” (POJOs)that are annotated with @Path. The methods in the classcan be annotated with @Path or a request methoddesignator, such as @GET, @PUT, @POST, or @DELETE.


First RESTful Web Service

The following example demonstrates how to create a RESTfulweb service that simply displays an HTML.


Summary of JAX-RS Annotations

@Path The @Path annotation’s value is a relative URI pathindicating where the Java class will be hosted: forexample, /hellors. You can also embed variables inthe URIs to make a URI path template (i.e. URIpath templates are URIs with variables embeddedwithin the URI syntax.). For example, you could askfor the name of a user and pass it to the applicationas a variable in the URI: /hellors/{username}.

@GET The Java method annotated with this requestmethod designator will process HTTP GET requests.

@POST The Java method annotated with this requestmethod designator will process HTTP POST re-quests.


Summary of JAX-RS Annotations (cont.)

@PUT The Java method annotated with this requestmethod designator will process HTTP PUT requests.

@DELETE The Java method annotated with this requestmethod designator will process HTTP DELETE re-quests.

@HEAD The Java method annotated with this requestmethod designator will process HTTP HEAD re-quests.

@Consumes The @Consumes annotation is used to specify theMultipurpose Internet Mail Extensions (MIME) me-dia types of representations a resource can consumethat were sent by the client.

@Produces The @Produces annotation is used to specify theMIME media types of representations a resource canproduce and send back to the client: for example,”text/plain”.



@PathParam

The @PathParam annotation is a typeof parameter that you can extract fromthe request URI for use in your resourceclass.

The parameter names correspond to theURI path template variable namesspecified in the @Path class-level (ormethod-level) annotation.



@PathParam(cont.) For example, in the following @Path

annotation:@Path(”/users/{user}”), if theuser types the user name ”Bob,” the webservice responds to the following URL:http://example.com/users/Bob, To obtain thevalue of the user name, the @PathParamannotation may be used on the methodparameter of a request method, as shown inthe following code example:



@QueryParam The @QueryParam annotation is a typeof parameter that you can extract for usein your resource class. Query parame-ters are extracted from the request URIquery parameters. (e.g. GET /employ-ees?maxyear=2009&minyear=1999)


Developing a RESTful Web Service in Netbeans

Create a new project by choosing New → Project from the Filemenu to open the New Project Wizard dialog. In the dialog,choose Web from the category list on the left and choose WebApplication from the Project list on the right. Click the Nextbutton to continue.


Developing a RESTful Web Service in Netbeans (cont.)


Generating RESTful Web Services from Entity Classes


Generating RESTful Web Services from Entity Classes(cont.)


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);

}


AccountFacadeREST.java (cont.)

@PUT

@Path("{id}")


public void edit(@PathParam("id") Long id, Account entity) {

super.edit(entity);

}

@POST

@Path("{id}")


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);

}


AccountFacadeREST.java (cont.)

@GET

@Override


public List<Account> findAll() {

return super.findAll();

}

@GET

@Path("{from}/{to}")


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;

}



Cross-origin resource sharing


Creating AngularJS Application with RESTful WebServices Backend

Acknowledgment:

Simple Example angularJS and JavaEE, by Lisa Spitzl.




services.js

Create a factory object: Accounts, then define the methodfindAll to returns all the accounts.


controllers.js


partial1.html


Result


The Affable Bean application with HTML5 front-end

The Affable Bean application with HTML5 front-end.

https://bitbucket.org/dkonecny/affable-bean

https://bitbucket.org/dkonecny/affable-bean

The Affable Bean application with HTML5 front-end


Questions?

lec6 ecom fall16

Education