This document discusses using Java and HTML5 platforms for desktop, web, and mobile applications. It covers key technologies like JSON, WebSockets, RESTful web services, and frameworks like Angular and Sencha. It also provides examples of building applications with these technologies, including a contacts app example in Java EE and Angular.

1. Java e HTML5:
Do Desktop/Web ao Mobile
Loiane Groner
@loiane
http://loiane.com
http://loiane.training

2. • 10+ XP TI
• Java, JavaScript/HTML5, Sencha,
Phonegap/Ionic, Angular
• Blog: http://loiane.com
• Cursos: http://loiane.training

3. • Meus livros:

4. Ferramentas de um dev Java/HTML5

5. • JavaEE
• HTML
• CSS
• JavaScript
• IDE favorita
• NetBeans, Eclipse, IntelliJ IDEA

6. Desenvolvedor FrontEnd
Desenvolvedor BackEnd Servidor
PartevisívelnositewebParte“mágica”,nãovisívelaousuário
http://www.alticreation.com/uploads/iceberg-front-end-back-end-developers.jpg

9. Plataforma JavaEE para HTML5:
• JSON
• WebSocket
• Concurrency
• Batch
• WebServices RESTful

10. • JSON: JavaScript Object Notation

11. • JSON: JavaScript Object Notation
• É uma forma de trocar dados entre frontend
e backend representados por chave-valor

12. • JSON: JavaScript Object Notation
• É uma forma de trocar dados entre frontend
e backend representados por chave-valor
• Exemplo: var meuObjeto = {nome : ‘Meu
Nome’, idade: 21};

13. • JSON: JavaScript Object Notation
• É uma forma de trocar dados entre frontend
e backend representados por chave-valor
• Exemplo: var meuObjeto = {nome : ‘Meu
Nome’, idade: 21};
• API JSON Java permite pasear, transformar e
consultar objectos JSON

14. • WebSocket: protocolo de aplicação que
fornece comunicação dupla entre 2 pontos
TCP
• API Java fornece funcionalidade através de
annotations

16. • Concurrency: API Java que fornece
funcionalidade de comunicação assíncrona

17. • Concurrency: API Java que fornece
funcionalidade de comunicação assíncrona
• Batch: API Java que fornece funcionalidade de
tarefas batch

18. • Webservices RESTful: JAX-RS

19. URL Verbo HTTP Desc
api/contatos GET obtém lista de contatos
api/contatos/:id GET
obtém dados de contato
específico
api/contatos POST cria contato
api/contatos/:id PUT atualiza contato
api/contatos/:id DELETE deleta contato

25. @Entity
@Table(name = "contact")
@XmlRootElement
@NamedQueries({
@NamedQuery(name = "Contact.findAll", query = "SELECT c FROM Contact c"),
@NamedQuery(name = "Contact.findById", query = "SELECT c FROM Contact c WHERE c.id = :id"),
@NamedQuery(name = "Contact.findByEmail", query = "SELECT c FROM Contact c WHERE c.email = :email"),
@NamedQuery(name = "Contact.findByName", query = "SELECT c FROM Contact c WHERE c.name = :name"),
@NamedQuery(name = "Contact.findByPhone", query = "SELECT c FROM Contact c WHERE c.phone = :phone")})
public class Contact implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Basic(optional = false)
@Column(name = "id")
private Integer id;
@Basic(optional = false)
@NotNull
@Size(min = 1, max = 255)
@Column(name = "email")
private String email;
@Basic(optional = false)
@NotNull
@Size(min = 1, max = 255)
@Column(name = "name")
private String name;
//…
}

26. @Stateless
@Path("contact")
public class ContactFacadeREST extends AbstractFacade<Contact> {
@POST
@Override
@Consumes({MediaType.APPLICATION_XML, MediaType.APPLICATION_JSON})
public void create(Contact entity) {
super.create(entity);
}
@PUT
@Path("{id}")
@Consumes({MediaType.APPLICATION_XML, MediaType.APPLICATION_JSON})
public void edit(@PathParam("id") Integer id, Contact entity) {
super.edit(entity);
}
@DELETE
@Path("{id}")
public void remove(@PathParam("id") Integer id) {
super.remove(super.find(id));
}
@GET
@Path("{id}")
@Produces({MediaType.APPLICATION_XML, MediaType.APPLICATION_JSON})
public Contact find(@PathParam("id") Integer id) {
return super.find(id);
}
@GET
@Override
@Produces({MediaType.APPLICATION_XML, MediaType.APPLICATION_JSON})
public List<Contact> findAll() {
return super.findAll();
}
}

31. @JsonAutoDetect
@Entity
@Table(name="CONTACT")
public class Contact {
@Id
@GeneratedValue
@Column(name="id")
private int id;
@Column(name="name", nullable=false)
private String name;
@Column(name="phone", nullable=false)
private String phone;
@Column(name="email", nullable=false)
private String email;
}

32. @Repository
public class ContactDAO {
private HibernateTemplate hibernateTemplate;
@Autowired
public void setSessionFactory(SessionFactory sessionFactory) {
hibernateTemplate = new HibernateTemplate(sessionFactory);
}
public List<Contact> getContacts(int start, int limit) {
DetachedCriteria criteria = DetachedCriteria.forClass(Contact.class);
return hibernateTemplate.findByCriteria(criteria, start, limit);
}
public void deleteContact(int id){
Object record = hibernateTemplate.load(Contact.class, id);
hibernateTemplate.delete(record);
}
}

33. @Controller
public class ContactController {
private ContactService contactService;
@RequestMapping(value="/contact/view.action")
public @ResponseBody Map<String,? extends Object> view(@RequestParam int start, @RequestParam int limit) throws Exception {
try{
List<Contact> contacts = contactService.getContactList(start,limit);
int total = contactService.getTotalContacts();
return ExtJSReturn.mapOK(contacts, total);
} catch (Exception e) {
return ExtJSReturn.mapError("Error retrieving Contacts from database.");
}
}
@RequestMapping(value="/contact/create.action")
public @ResponseBody Map<String,? extends Object> create(@RequestBody ContactWrapper data) throws Exception {
try{
List<Contact> contacts = contactService.create(data.getData());
return ExtJSReturn.mapOK(contacts);
} catch (Exception e) {
return ExtJSReturn.mapError("Error trying to create contact.");
}
}
}

35. http://aprendizweb.com.br/wp-content/uploads/2015/03/frontend-e-back-end.jpg

37. http://www-scf.usc.edu/~chenemil/itp104/images/html5features.jpg

38. Plataforma HTML5
<canvas>
<video>
<audio>

39. Plataforma HTML5
<canvas>
<video>
<audio>
CSS3
Animações
Transformações

40. Plataforma HTML5
<canvas>
<video>
<audio>
CSS3
Animações
Transformações
Sencha Ext JS
Angular
Backbone
Knockout
Ember

41. Plataforma HTML5
<canvas>
<video>
<audio>
CSS3
Animações
Transformações
Sencha Ext JS
Angular
Backbone
Knockout
Ember
Pré-processadores
Sass, Less
Emmet
Dart

42. Plataforma HTML5
<canvas>
<video>
<audio>
CSS3
Animações
Transformações
Sencha Ext JS
Angular
Backbone
Knockout
Ember
Pré-processadores
Sass, Less
Emmet
Dart
Mobile Híbrido
Phonegap/Cordova
Ionic

43. Plataforma HTML5
<canvas>
<video>
<audio>
CSS3
Animações
Transformações
Sencha Ext JS
Angular
Backbone
Knockout
Ember
Pré-processadores
Sass, Less
Emmet
Dart
Mobile Híbrido
Phonegap/Cordova
Ionic
Desktop Híbrido
TideSDK
AppJS
Node web-kit
Electron

46. APIs REST
JSON
Aplicação moderna
DOM
App Server
Browser

47. +

49. jQuery + Backbone

50. http://www.the4cast.com/wp-content/uploads/2014/06/web-starterkit.jpg

51. APIs REST
Banco de Dados
JSON JSON

60. import {bootstrap} from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import {AppComponent} from './app.component';
bootstrap(AppComponent, [HTTP_PROVIDERS]);

61. import {Component} from '@angular/core';
import {ContactsComponent} from './contacts/contacts.component';
@Component({
selector: 'my-app',
directives: [ContactsComponent],
template: '<contacts-grid></contacts-grid>'
})
export class AppComponent { }

62. export class Contact {
id: number;
name: string;
phone: string;
email: string;
}

63. import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ContactsService {
constructor(private http: Http) { }
getContacts() {
return this.http.get('http://localhost:8080/contacts-spring-mvc/contact/view.action?
start=0&limit=250')
.map((res: Response) => res.json().data);
}
}

64. import {Component, OnInit} from '@angular/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {Contact} from './contact.model';
import {ContactsService} from './contacts.service';
@Component({
selector: 'contacts-grid',
directives: [AgGridNg2],
providers: [ContactsService],
template: `
<ag-grid-ng2 #agGrid style="height:100%;width:583px" class="ag-fresh"
[gridOptions]="gridOptions"
[rowData]="contacts">
</ag-grid-ng2 >
`
})
export class ContactsComponent implements OnInit {
contacts: Contact[] = [];
columnDefs = [
{headerName: 'Name', field: "name", width: 200 },
{headerName: 'Phone', field: "phone" ,width:180},
{headerName: 'Email', field: "email" ,width:200}
];
gridOptions : any = [];
constructor(private contactsService: ContactsService) {
this.gridOptions = {
rowData: this.contacts,
columnDefs: this.columnDefs,
enableColResize: true,
enableSorting: true,
enableFilter: true
}
}
ngOnInit() {
this.contactsService.getContacts()
.subscribe(contacts => this.contacts = contacts);

65. APIs REST
JSON
MOBILE
App Server
Dispositivo
Móvel
WebView Nativa

73. import {Component} from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {TabsPage} from './pages/tabs/tabs';
@Component({
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
private rootPage:any;
constructor(private platform:Platform) {
this.rootPage = TabsPage;
platform.ready().then(() => {
StatusBar.styleDefault();
});
}
}
ionicBootstrap(MyApp, [HTTP_PROVIDERS]);

74. import {Component} from '@angular/core'
import {HomePage} from '../home/home';
import {AboutPage} from '../about/about';
import {ContactPage} from '../contact/contact';
@Component({
templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
private tab1Root: any;
private tab2Root: any;
private tab3Root: any;
constructor() {
// this tells the tabs component which Pages
// should be each tab's root Page
this.tab1Root = HomePage;
this.tab2Root = AboutPage;
this.tab3Root = ContactPage;
}
}
<ion-tabs>
<ion-tab [root]="tab3Root" tabTitle="Contatos" tabIcon="contacts"></ion-tab>
<ion-tab [root]="tab1Root" tabTitle="Inicio" tabIcon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="Sobre" tabIcon="information-circle"></ion-tab>
</ion-tabs>

75. import {Component, OnInit} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Contact} from '../contact/contact.model';
import {ContactsService} from '../contact/contacts.service';
import {ContactDetailsPage} from '../contact-details/contact-details';
@Component({
templateUrl: 'build/pages/contact/contact.html',
providers: [ContactsService]
})
export class ContactPage implements OnInit {
contacts: Contact[] = [];
constructor(private nav: NavController, private contactsService: ContactsService) {
}
ngOnInit() {
this.contactsService.getContacts()
.subscribe(contacts => this.contacts = contacts);
}
itemSelected(contact){
this.nav.push(ContactDetailsPage, contact);
}
}

76. <ion-navbar *navbar>
<ion-title>
Contact
</ion-title>
</ion-navbar>
<ion-content>
<ion-list>
<ion-item *ngFor="let contact of contacts" (click)="itemSelected(contact)">
{{contact.name}}
</ion-item>
</ion-list>
</ion-content>

77. import {Component} from '@angular/core';
import {NavController, NavParams} from 'ionic-angular';
import {Contact} from '../contact/contact.model';
@Component({
templateUrl: 'build/pages/contact-details/contact-details.html'
})
export class ContactDetailsPage {
contact: Contact;
constructor(private nav: NavController, private navParams: NavParams) {
this.contact = this.navParams.data;
}
}

78. <ion-navbar *navbar>
<ion-title>{{contact.name}}</ion-title>
</ion-navbar>
<ion-content padding class="speaker-detail">
<p>Id: <span>{{contact.id}}</span></p>
<p>Nome: <span>{{contact.name}}</span></p>
<p>Email: <span>{{contact.phone}}</span></p>
<p>Telefone: <span>{{contact.email}}</span></p>
</ion-content>

80. http://enable-cors.org/

84. APIs REST
JSON
DESKTOP
App Server
App
Desktop
Wrapper

85. const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
function createWindow () {
mainWindow = new BrowserWindow({width: 800, height: 600})
mainWindow.loadURL(`file://${__dirname}/index.html`)
mainWindow.webContents.openDevTools()
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
})

86. electron-packager ./ --platform=darwin --arch=x64
electron-packager ./ --platform=win32 --arch=x64
electron-packager ./ --platform=linux --arch=x64

91. • SSL
• Unauthorised access (acesso não autorizado)
• Código backend sem validações
• Dados sem criptografia (local e na troca de
dados)
• Mau uso da persistência

92. https://www.owasp.org

93. https://github.com/loiane/javaee-html5-js

95. http://loiane.com
facebook.com/loianegroner
twitter.com/loiane
https://github.com/loiane
youtube.com/loianegroner
http://loiane.training