Mashups - remix the web- Web 2.0 mit JavaServer Faces Matthias Weßendorf | matzew@apache.org

Matthias Weßendorf Oracle Corp. ADFv team (ADF Faces) Apache Software Foundation Apache MyFaces (Trinidad | Core) Apache Shale Autor Java- & Eclipse-Magazin Bücher zu Struts, J2ME&WebServices Speaker Oracle Open World JavaOne JAX, W-JAX ApacheCon

Oracle Corp.

ADFv team (ADF Faces)

Apache Software Foundation

Apache MyFaces (Trinidad | Core)

Apache Shale

Autor

Java- & Eclipse-Magazin

Bücher zu Struts, J2ME&WebServices

Speaker

Oracle Open World

JavaOne

JAX, W-JAX

ApacheCon

Agenda Mashups – Einführung Mashups mit JSF Beispiel Google Maps

Mashups – Einführung

Mashups mit JSF

Beispiel

Google Maps

Mashups Mashup == vermischen Erstellung neuer Inhalte durch bestehende Beispiele für Mashups: Kunst (Foto)Collage Musik Remix / (DJ) Mixing Internet „ Web 2.0“

Mashup == vermischen

Erstellung neuer Inhalte durch bestehende

Beispiele für Mashups:

Kunst

(Foto)Collage

Musik

Remix / (DJ) Mixing

Internet

„ Web 2.0“

Collage

Remix

Internet Mashup

Mashup – Remix the Web Neuer Web-Inhalt erstellt aus bestehendem Ermöglicht durch: Öffentliche APIs (Web-Services / JavaScript) Feeds (Atom / RSS) Flickr Map = Flickr + Yahoo Map Social Computing Software-Innovation seit Jahren... Hype  Web 2.0 Sicherheit: Viel JavaScript von verschiedenen Quellen...

Neuer Web-Inhalt erstellt aus bestehendem

Ermöglicht durch:

Öffentliche APIs (Web-Services / JavaScript)

Feeds (Atom / RSS)

Flickr Map = Flickr + Yahoo Map

Social Computing

Software-Innovation seit Jahren...

Hype  Web 2.0

Sicherheit:

Viel JavaScript von verschiedenen Quellen...

Mashup – Remix the Web Browser Web-Server / Mashup-App 3rd Party Data ... RSS Web-Service

Mashup – Remix the Web Integrationsarten JavaScript API Einbinden von externem JS Kommunikation mit der API Google Map Proxy (remote Web-Service auf dem Server) Anzeigen von Daten (aus Atom/RSS Feeds) Kicker.de FAZ.net Wg. Sicherheit via „Proxy“ Server

Integrationsarten

JavaScript API

Einbinden von externem JS

Kommunikation mit der API

Google Map

Proxy (remote Web-Service auf dem Server)

Anzeigen von Daten (aus Atom/RSS Feeds)

Kicker.de

FAZ.net

Wg. Sicherheit via „Proxy“ Server

Mashup – Remix your App! Browser Web-Server / Mashup-App 3rd Party Data ... Interner „Web Service“ ... Öffentliche(r) Web-Server

JavaServer Faces und Mashups? JCP-basiertes Web-Framework API für UI Komponenten Entwicklung Standard Komponenten 3rd Party Bibliotheken Eigene JSF Komponenten „ reusable“ content  JSF Komponente Mashup-Komponenten Erzeugung von Komponente Facelets (Easy Components)

JCP-basiertes Web-Framework

API für UI Komponenten Entwicklung

Standard Komponenten

3rd Party Bibliotheken

Eigene JSF Komponenten

„ reusable“ content  JSF Komponente

Mashup-Komponenten

Erzeugung von Komponente

Facelets (Easy Components)

JavaServer Faces und Mashups? Eigene JSF Komponenten <h:.... /> < corp:mashupComponent apiKey =&quot;myKey&quot; ownData =&quot;#{bean.myDataSource}&quot; ... /> ... P(l)ain JSF components: Java (Komponente, Renderer, Tag Class) XML (faces-config, TLD) Facelets: XHTML Datei Facelets Taglib (XML Datei)

Eigene JSF Komponenten

<h:.... />

< corp:mashupComponent apiKey =&quot;myKey&quot; ownData =&quot;#{bean.myDataSource}&quot; ... />

...

P(l)ain JSF components:

Java (Komponente, Renderer, Tag Class)

XML (faces-config, TLD)

Facelets:

XHTML Datei

Facelets Taglib (XML Datei)

JavaServer Faces und Mashups? <div> <script src=&quot;http:// apis.mypartner.com /externalService?file=api&apiKey= #{apiKey} &quot; type=&quot;text/javascript&quot;></script> <div id=&quot;showIt&quot;/> <script type=&quot;text/javascript&quot;> var externalService = new CorpServiceProvider (); ... externalService.setElement(document.getElementById(&quot; showIt &quot;)) externalService.mashData(' #{ownData} '); ... </script> </div>

<div>

<script src=&quot;http:// apis.mypartner.com /externalService?file=api&apiKey= #{apiKey} &quot; type=&quot;text/javascript&quot;></script>

<div id=&quot;showIt&quot;/>

<script type=&quot;text/javascript&quot;>

var externalService = new CorpServiceProvider ();

...

externalService.setElement(document.getElementById(&quot; showIt &quot;))

externalService.mashData(' #{ownData} ');

...

</script>

</div>

Google Maps API Google Maps Web 2.0 „killer app“ API für Google Maps Mutter aller Web 2.0 Mashups JavaScript API Key für Nutzung notwendig Beta ... aber frei

Google Maps

Web 2.0 „killer app“

API für Google Maps

Mutter aller Web 2.0 Mashups

JavaScript API

Key für Nutzung notwendig

Beta ... aber frei

JavaServer Faces und Mashups?

JavaServer Faces und Mashups?

JavaServer Faces und Mashups?

Links und Dokumentation Beispiel „Facesgoodies“ http://code.google.com/p/facesgoodies Facelets https://facelets.dev.java.net Google Maps API und Beispiele: http://code.google.com/apis/maps/ Mashups, APIs http://www.programmableweb.com BLOG: http:/matthiaswessendorf.wordpress.com

Beispiel „Facesgoodies“

http://code.google.com/p/facesgoodies

Facelets

https://facelets.dev.java.net

Google Maps

API und Beispiele:

http://code.google.com/apis/maps/

Mashups, APIs

http://www.programmableweb.com

BLOG:

http:/matthiaswessendorf.wordpress.com