SlideShare una empresa de Scribd logo
1 de 37
Descargar para leer sin conexión
Exploring HTML5 With
JavaServer Faces 2.0


Roger Kitain
Oracle Corporation
AGENDA

> HTML 5 Overview
  – What is HTML 5?
  – HTML 5 Features
> JSF 2.0 Component Model And HTML 5
  – Component Model Overview
  – Enhancing Components With HTML 5
> Demos




                                       2
What Is HTML 5?

> Proposed next standard for HTML 4.0.1, XHTML 1.0 and DOM Level 2 HTML
> Features promote RIA




                   HTML         HTML5           JS APIs


> Pioneered in 2004; First working spec draft: 2008
> CSS 3 : Working Draft – April 2010


                                                                          3
What Is HTML 5?

                        Traditional Desktop
    User Experience




                                                                 HTML5
                          HTML2
                                                  XHTML   Ajax
                                          HTML4
                       HTML   CSS/JavaScript




                      1991 1994 1996 1997 1998 2000       2005   2009    4
What is HTML 5? When Will Specification Go Final?

                                      At least that's the
                                      rumor......
                                      Hopefully it will
                                      happen before
                                      this...




                                                            5
HTML 5 Features: HTML Elements
> Semantic elements for structure:
  – <header>, <nav>, <article>, <section>, <aside>, <footer>
                    HTML4                                      HTML5




> Some advantages:
  – Nested sections with header levels beyond 6 levels in HTML 4
   –   Cleaner source; easier to author (don't need to go “div crazy”)   6
HTML 5 Features : Html Elements/Attributes
> Other semantic elements:
  – <figure>, <dialog>, <meter>, <progress>...
   –   <progress> can be used with JavaScript to generate “real-time” progress bar
> Form elements / attributes:
  – <input name=”q” placeholder=”Search Here”>
   –   <input name=”q” autofocus>
   –   Attribute values for <input type=
                email (Great for mobile devices – iphone!). number, range, date,
                      datetime, month, week, time, search, color
   –   For date / time Opera would render:




                                                                                    7
HTML 5 Features : Media Elements
> Audio
  – Most audio played through flash plugin
   –   Not all browsers have same plugins
> <audio> element:
  – Standard way to include audio: sound files or audio stream
   –   3 supported formats: Ogg Vorbis, MP3, Wav (browsers may support subset)
> Usage example:
                       <audio controls="controls">
                          <source src="song.ogg" type="audio/ogg">
                          <source src="song.mp3" type="audio/mpeg">
                           Your browser does not support the audio element.
                       </audio>


> Specify multiple audio file formats: browser will use first recognized format
> “controls” attribute: adds “play”, “pause”, and “volume” controls               8
HTML 5 Features : Media Elements
> Video
  – Most video played through flash plugin
   –   Not all browsers have same plugins
> <video> element:
  – Standard way to include video
   –   2 supported formats: Ogg Vorbis, MPEG4 (browsers may support subset)
> Usage example:
                        <video width=”320” height=”240” controls="controls">
                            <source src="movie.ogg" type="video/ogg">
                            <source src="movie.mp4" type="video/mpeg">
                            Your browser does not support the video element.
                        </video>

> Specify multiple video file formats: browser will use first recognized format
> “controls” attribute: adds “play”, “pause”, and “volume” controls
                                                                                  9
HTML 5 Features : Graphic Elements
> Canvas
  – A container for graphics – use JavaScript to paint the graphics
   –   Use height and width attributes (pixels) for canvas dimensions
   –   Example:



           <canvas id=”aCanvas” height=”80” width=”100”> </canvas>

            <script type="text/javascript">
               var canvas=document.getElementById('aCanvas');
               var context=canvas.getContext('2d');
               context.fillStyle='#FF0000';
               context.fillRect(0,0,80,100);
            </script>
                                                                        10
HTML 5 Features : Graphic Elements: Canvas
> Standard graphics coordinate system
                                        ctx.fillRect(5,2,3,3);
   (0,0)                 x




    y



                                                                 11
HTML 5 Features : Event Attributes
> Attach JavaScript to new event types:
  – Mouse events:
             ondrag, ondragend, ondragenter, ondragleave, ondragover,
                   ondragstart, ondrop, onmousewheel, onscroll
  – Window events:
             onafterprint, onbeforeprint, onbeforeonload, onerror,
                   onhaschanged, onmessage, onoffline, ononline, ...
  – Form events:
             onformhange, onforminput, oninput, oninvalid, …
  – Media events:
             Apply to media elements such as <audio>, <video>




                                                                         12
HTML 5 Features : JavaScript API
> Web Workers:
  – Separate JS processes running in separate threads
   –   Execute concurrently; don't block UI
   –   Message passing for coordination
   –   High start-up performance cost; high memory cost

            var worker = new Worker('worker.js');
            worker.onmessage = function(event) {alert(event.data);};

            worker.js:
              postMessage(data);


   –   Delegation:
              Split expensive tasks among multiple workers
                                                                       13
HTML 5 Features : JavaScript API
> GeoLocation
  – JavaScript access to the browser's location
   –   New property on global navigator object:: navigator.geolocation

       function get_location() {
          If (Modernizr.geolocation) {
            navigator.geolocation.getCurrentPosition(show_map);
          } else // no support...
       ..
       }

       function show_map(position) {
         var latitude = position.coords.latitude;
         var longitude = position.coords.longitude;
       // do something interesting – show map for example
       }                                                                 14
HTML 5 Features : JavaScript API
> Audio/Video manipulation:
  – Dynamically create <audio>, <video>
  –   Add custom controls to <audio>, <video>
  –   Control <audio>, <video> attributes




             var video = document.createElement('video');
             video.src = 'video.ogv';
             video.controls = true;
             document.body.appendChild(video);




                                                            15
HTML 5 Features : JavaScript API
> Canvas:
  – JavaScript to enable drawing/animation in the browser




           <canvas id="example" width="200" height="200">
                  ...
           </canvas>
                  …
           var example = document.getElementById('example');
           var context = example.getContext('2d');
           context.fillStyle = "rgb(255,0,0)";
           context.fillRect(30, 30, 50, 50);


                                                               16
HTML 5 Features : JavaScript API
> Canvas:
  – Functions for simple shapes:
            fillRect(x,y,w,h) Draws rectangle
            strokeRect(x,y,w,h) Draws outline of rectangle
            clearRect(x,y,w,h) Clears pixels within given rectangle
  – Functions for complex shapes, paths


  ctx.strokeStyle = “rgb(65, 60,               50
  50)”;
                                         50         100
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(100,100);                   100
  ctx.stroke();

                                                                       17
HTML 5 Features : JavaScript API
> Web Sockets:
  – Provide bi-directional communication channel in the browser
   –   send() : Send data from browser to server
   –   onmessage event handler: process data from server
   –   Separate specification (from HTML 5)
   –   Many server implementations: Grizzly, GlassFish 3.1, jWebsocket,Kaazing,...


         var ws = new WebSocket("ws://www.websocket.org");
          ws.onopen = function(evt) { alert("Connection open ..."); };
          ws.send(data);
          ws.onmessage = function(evt) { alert( "Msg: " + evt.data); };
          ws.onclose = function(evt) { alert("Connection closed."); };
          ws.disconnect();
                                                                                18
HTML 5 Features : What's Available .. And Where?
> http://html5test.com/
  – Will tell you what HTML5 features are available for the
     current browser.
  – http://weblogs.java.net/blog/rogerk/archive/2010/05/25/te
     sting-html5-feature-availability-browsers




                                                                19
JSF 2.0 Component Model




                          20
JSF 2.0 Component Model
> Facelets is the foundation
  – Optimized for JSF
   –   XHTML and tags
   –   Eliminates translation/compilation
   –   Templating
> Powerful tools:
  – Templating
   –   Composite Components




                                            21
JSF 2.0 Composite Components




                               22
JSF 2.0 Composite Components
> True abstraction:
  – Reusable component
> Turns page markup into a JSF UI component with attached validators,
  converters, listeners


    Using Page (XHTML)


      <html …
      xlms:my=”http....”>
                                                   Component
      <my:comp
                                                   (XHTML)
       value=”yes” />
      </html>

                                                                        23
JSF 2.0 Composite Components
    <html xmlns=”http:///www/w3/org/1999/xhtml”
     xmlns:h=”http://java.sun.com/jsf/html”
     xmlns:f=”http://java.sun.com/jsf/core”
     xmlns:my=”http://java.sun.com/jsf/composite/comp”>


       <my:out value=”yes”/>

       On disk:

       <context root>/resources/comp/out.xhtml



                                                          24
JSF 2.0 Composite Components
What's Inside The Black Box?
> Interface
  – The usage contract
  –   Everything page author needs to know to use component
> Implementation
  – Markup used to create component
  –   How the component is implemented




                                                              25
JSF 2.0 Composite Components
  <context-root>resources/ezcomp/LoginPanel.xhtml

 <html... xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:cc="http://java.sun.com/jsf/composite">
 …
 <h:body>
  <cc:interface>
     <cc:attribute name=”userVal” required=”true” ”/>
     <cc:attribute name=”passValue” required=”true” />
     <cc:actionSource name="loginAction” targets=”loginButton” />
  </cc:interface>

   <cc:implementation>
      <div> Username:<h:inputText id=”userId”” value=”#{cc.attrs.userVal}”/> </div>
      <div>Password:<h:inputSecret id=”passId” value=”#{cc.attrs.passVal}”/></div>
      <div> <h:commandButton value=”Login” id=”loginButton” /> </div>
   </cc:implementation>
 ....
 </h:body>
                                                                                      26
JSF 2.0 Composite Components
  “Using” Page


 <html...xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:ez="http://java.sun.com/jsf/composite/ezcomp">
 …
     <h:form>
        <div id="compositeComponent" class="grayBox"
          style="border: 1px solid #090;">
          <ez:loginPanel >
            <f:actionListener for=”loginAction” binding=”#{bean.action}” />
          </ez:loginPanel>
         </div>
        <p><h:commandButton value="reload" /></p>
      </h:form>

                                                                              27
JSF 2.0 Composite Components With HTML 5




                                           28
Enhancing JSF 2.0 Components
With HTML 5
> JSF 2.0 specification introduced JavaScript to promote Ajax
> Composite components work well with JavaScript
> Composite components can leverage the HTML 5 JavaScript API




                                                                29
Enhancing JSF 2.0 Components
With HTML 5

  <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:cc="http://java.sun.com/jsf/composite">
  <h:head> ... </h:head> …
  <h:body>
   <cc:interface>
      <cc:attribute name=”src” required=”true” ”/>
      <cc:attribute name=”controls” required=”false” />
   </cc:interface>
  <cc:implementation>
     <h:outputScript library=”js” name=”audio.js” target=”head”/>
     <audio src="#{cc.attrs.src}" controls="#{cc.attrs.controls}"></audio>
     <input type=”button” value=”Play” onclick=”play()”/>
     <input type=”button” value=”Pause” onclick=”pause()”/>
   </cc:implementation>
  </h:body>

                                                                                            30
Enhancing JSF 2.0 Components
With HTML 5

      audio.js:

      function play() {
         var audio = document.getElementsByTagName("audio")[0];
         audio.play();
         var display = document.getElementsByTagName("input")[0];
         display.value = audio.src;
      }

      function pause() {
         var audio = document.getElementsByTagName("audio")[0];
         audio.pause();
      }



                                                                    31
Enhancing JSF 2.0 Components
With HTML 5
  “Using” Page

  <html... xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h5="http://java.sun.com/jsf/composite/media">
  <h:head>
  ...
  </h:head>
  …
  <h:body>
    ...
    <h5:audiobox src="resources/media/Lightson.ogg" controls="controls"/>
  </h:body>
  ....


                                                                            32
DEMOS
And let's look at some code...




                                 33
What's Next?

> With respect to JSF:
  – JSF 2.0 Rev A (Minor Maintenance Release)
   –   JSF 2.1 (Major Maintenance Release)
> We would like to hear from you!




                                                34
Summary

> HTML 5
  – Really about markup and JavaScript API
> HTML 5 Features
  – Promote Rich User Interfaces
   –   Graphics
   –   Media
   –   Multiprocessing
   –   Communication
> JSF 2.0 Components work well with JavaScript
  – Leverage HTML 5 JavaScript APIs
> Future Directions

                                                 35
Resources

> http://glassfish.dev.java.net
> http://javaserverfaces.dev.java.net
> http://dev.w3.org/html5/spec/Overview.html
> http://dev.w3.org/html5/websockets
> http://grizzly.dev.java.net




                                               36
Roger Kitain         http://twitter.com/rogerk09
Oracle Corporation   http://www.java.net/blogs/rogerk
                     roger.kitain@oracle.com

Más contenido relacionado

La actualidad más candente

Week 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. WuWeek 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. WuAppUniverz Org
 
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue routerVue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue routerKaty Slemon
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup PerformanceJustin Cataldo
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and moreYan Shi
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1James Pearce
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015Chang W. Doh
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup PerformanceGreg Whalin
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.jsTechExeter
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreRemy Sharp
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortalJennifer Bourey
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0Takuya Tejima
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on MobileAdam Lu
 

La actualidad más candente (20)

Week 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. WuWeek 05 Web, App and Javascript_Brandon, S.H. Wu
Week 05 Web, App and Javascript_Brandon, S.H. Wu
 
Wicket 2010
Wicket 2010Wicket 2010
Wicket 2010
 
HTML 5 - Overview
HTML 5 - OverviewHTML 5 - Overview
HTML 5 - Overview
 
Vue business first
Vue business firstVue business first
Vue business first
 
Web Apps
Web AppsWeb Apps
Web Apps
 
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue routerVue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue router
 
#NewMeetup Performance
#NewMeetup Performance#NewMeetup Performance
#NewMeetup Performance
 
Web Apps and more
Web Apps and moreWeb Apps and more
Web Apps and more
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
What Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 AppsWhat Web Developers Need to Know to Develop Windows 8 Apps
What Web Developers Need to Know to Develop Windows 8 Apps
 
HTML5 Refresher
HTML5 RefresherHTML5 Refresher
HTML5 Refresher
 
Intro to html 5
Intro to html 5Intro to html 5
Intro to html 5
 
Vuex
VuexVuex
Vuex
 
Chrome enchanted 2015
Chrome enchanted 2015Chrome enchanted 2015
Chrome enchanted 2015
 
Meetup Performance
Meetup PerformanceMeetup Performance
Meetup Performance
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortal
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
HTML5 on Mobile
HTML5 on MobileHTML5 on Mobile
HTML5 on Mobile
 

Destacado

Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2Dr. Spock
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Gill Cleeren
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)Christian Rokitta
 
Advanced Reporting And Charting With Oracle Application Express 4.0
Advanced Reporting And Charting With Oracle Application Express 4.0Advanced Reporting And Charting With Oracle Application Express 4.0
Advanced Reporting And Charting With Oracle Application Express 4.0Rinie Romme
 
How to make APEX print through Node.js
How to make APEX print through Node.jsHow to make APEX print through Node.js
How to make APEX print through Node.jsDimitri Gielis
 
APEX Dashboard Competition - Winners
APEX Dashboard Competition - WinnersAPEX Dashboard Competition - Winners
APEX Dashboard Competition - WinnersTobias Arnhold
 
5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEXRoel Hartman
 
PDB Provisioning with Oracle Multitenant Self Service Application
PDB Provisioning with Oracle Multitenant Self Service ApplicationPDB Provisioning with Oracle Multitenant Self Service Application
PDB Provisioning with Oracle Multitenant Self Service ApplicationLeighton Nelson
 
APEX 5 Demo and Best Practices
APEX 5 Demo and Best PracticesAPEX 5 Demo and Best Practices
APEX 5 Demo and Best PracticesDimitri Gielis
 
Computer virus
Computer virusComputer virus
Computer viruskiran_a_c
 
Offline Web with Oracle JET
Offline Web with Oracle JETOffline Web with Oracle JET
Offline Web with Oracle JETandrejusb
 
Building a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApExBuilding a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApExBradley Brown
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010Hemant Joshi
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 

Destacado (20)

Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2Novidades do JSF: Um tour completo no JSF 2.2
Novidades do JSF: Um tour completo no JSF 2.2
 
Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!Top 10 HTML5 features every developer should know!
Top 10 HTML5 features every developer should know!
 
APEX Security 101
APEX Security 101APEX Security 101
APEX Security 101
 
5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)5 x HTML5 worth using in APEX (5)
5 x HTML5 worth using in APEX (5)
 
Apex RnD APEX 5 - Printing
Apex RnD APEX 5 - PrintingApex RnD APEX 5 - Printing
Apex RnD APEX 5 - Printing
 
Advanced Reporting And Charting With Oracle Application Express 4.0
Advanced Reporting And Charting With Oracle Application Express 4.0Advanced Reporting And Charting With Oracle Application Express 4.0
Advanced Reporting And Charting With Oracle Application Express 4.0
 
APEX Wearables
APEX WearablesAPEX Wearables
APEX Wearables
 
How to make APEX print through Node.js
How to make APEX print through Node.jsHow to make APEX print through Node.js
How to make APEX print through Node.js
 
Apex day 1.0 oracle apex 5.0 patrick wolf
Apex day 1.0 oracle apex 5.0 patrick wolfApex day 1.0 oracle apex 5.0 patrick wolf
Apex day 1.0 oracle apex 5.0 patrick wolf
 
APEX Dashboard Competition - Winners
APEX Dashboard Competition - WinnersAPEX Dashboard Competition - Winners
APEX Dashboard Competition - Winners
 
5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX5 Cool Things you can do with HTML5 and APEX
5 Cool Things you can do with HTML5 and APEX
 
PDB Provisioning with Oracle Multitenant Self Service Application
PDB Provisioning with Oracle Multitenant Self Service ApplicationPDB Provisioning with Oracle Multitenant Self Service Application
PDB Provisioning with Oracle Multitenant Self Service Application
 
APEX 5 Demo and Best Practices
APEX 5 Demo and Best PracticesAPEX 5 Demo and Best Practices
APEX 5 Demo and Best Practices
 
Computer virus
Computer virusComputer virus
Computer virus
 
Offline Web with Oracle JET
Offline Web with Oracle JETOffline Web with Oracle JET
Offline Web with Oracle JET
 
Building a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApExBuilding a Flexible UI with Oracle ApEx
Building a Flexible UI with Oracle ApEx
 
Security
SecuritySecurity
Security
 
Html5 with SharePoint 2010
Html5 with SharePoint 2010Html5 with SharePoint 2010
Html5 with SharePoint 2010
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
Zeus
ZeusZeus
Zeus
 

Similar a Jsf2 html5-jazoon

HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersSascha Corti
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Pravasini Sahoo
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8David Chou
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Adam Lu
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User ExperienceMahbubur Rahman
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010Patrick Lauke
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5Jamshid Hashimi
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)Shumpei Shiraishi
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkecker
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....Patrick Lauke
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 

Similar a Jsf2 html5-jazoon (20)

Html 5
Html 5Html 5
Html 5
 
Html5
Html5Html5
Html5
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3Introduction to HTML5 & CSS3
Introduction to HTML5 & CSS3
 
Internet Explorer 8
Internet Explorer 8Internet Explorer 8
Internet Explorer 8
 
Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)Html5 on Mobile(For Developer)
Html5 on Mobile(For Developer)
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
HTML5 for Rich User Experience
HTML5 for Rich User ExperienceHTML5 for Rich User Experience
HTML5 for Rich User Experience
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010openMIC barcamp 11.02.2010
openMIC barcamp 11.02.2010
 
New Elements & Features in HTML5
New Elements & Features in HTML5New Elements & Features in HTML5
New Elements & Features in HTML5
 
Html5
Html5Html5
Html5
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
 
qooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Frameworkqooxdoo - Open Source Ajax Framework
qooxdoo - Open Source Ajax Framework
 
HTML 5
HTML 5HTML 5
HTML 5
 
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
HTML5 (and friends) - History, overview and current status - jsDay Verona 11....
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 

Último

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Último (20)

IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

Jsf2 html5-jazoon

  • 1. Exploring HTML5 With JavaServer Faces 2.0 Roger Kitain Oracle Corporation
  • 2. AGENDA > HTML 5 Overview – What is HTML 5? – HTML 5 Features > JSF 2.0 Component Model And HTML 5 – Component Model Overview – Enhancing Components With HTML 5 > Demos 2
  • 3. What Is HTML 5? > Proposed next standard for HTML 4.0.1, XHTML 1.0 and DOM Level 2 HTML > Features promote RIA HTML HTML5 JS APIs > Pioneered in 2004; First working spec draft: 2008 > CSS 3 : Working Draft – April 2010 3
  • 4. What Is HTML 5? Traditional Desktop User Experience HTML5 HTML2 XHTML Ajax HTML4 HTML CSS/JavaScript 1991 1994 1996 1997 1998 2000 2005 2009 4
  • 5. What is HTML 5? When Will Specification Go Final? At least that's the rumor...... Hopefully it will happen before this... 5
  • 6. HTML 5 Features: HTML Elements > Semantic elements for structure: – <header>, <nav>, <article>, <section>, <aside>, <footer> HTML4 HTML5 > Some advantages: – Nested sections with header levels beyond 6 levels in HTML 4 – Cleaner source; easier to author (don't need to go “div crazy”) 6
  • 7. HTML 5 Features : Html Elements/Attributes > Other semantic elements: – <figure>, <dialog>, <meter>, <progress>... – <progress> can be used with JavaScript to generate “real-time” progress bar > Form elements / attributes: – <input name=”q” placeholder=”Search Here”> – <input name=”q” autofocus> – Attribute values for <input type=  email (Great for mobile devices – iphone!). number, range, date, datetime, month, week, time, search, color – For date / time Opera would render: 7
  • 8. HTML 5 Features : Media Elements > Audio – Most audio played through flash plugin – Not all browsers have same plugins > <audio> element: – Standard way to include audio: sound files or audio stream – 3 supported formats: Ogg Vorbis, MP3, Wav (browsers may support subset) > Usage example: <audio controls="controls"> <source src="song.ogg" type="audio/ogg"> <source src="song.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> > Specify multiple audio file formats: browser will use first recognized format > “controls” attribute: adds “play”, “pause”, and “volume” controls 8
  • 9. HTML 5 Features : Media Elements > Video – Most video played through flash plugin – Not all browsers have same plugins > <video> element: – Standard way to include video – 2 supported formats: Ogg Vorbis, MPEG4 (browsers may support subset) > Usage example: <video width=”320” height=”240” controls="controls"> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4" type="video/mpeg"> Your browser does not support the video element. </video> > Specify multiple video file formats: browser will use first recognized format > “controls” attribute: adds “play”, “pause”, and “volume” controls 9
  • 10. HTML 5 Features : Graphic Elements > Canvas – A container for graphics – use JavaScript to paint the graphics – Use height and width attributes (pixels) for canvas dimensions – Example: <canvas id=”aCanvas” height=”80” width=”100”> </canvas> <script type="text/javascript"> var canvas=document.getElementById('aCanvas'); var context=canvas.getContext('2d'); context.fillStyle='#FF0000'; context.fillRect(0,0,80,100); </script> 10
  • 11. HTML 5 Features : Graphic Elements: Canvas > Standard graphics coordinate system ctx.fillRect(5,2,3,3); (0,0) x y 11
  • 12. HTML 5 Features : Event Attributes > Attach JavaScript to new event types: – Mouse events:  ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onmousewheel, onscroll – Window events:  onafterprint, onbeforeprint, onbeforeonload, onerror, onhaschanged, onmessage, onoffline, ononline, ... – Form events:  onformhange, onforminput, oninput, oninvalid, … – Media events:  Apply to media elements such as <audio>, <video> 12
  • 13. HTML 5 Features : JavaScript API > Web Workers: – Separate JS processes running in separate threads – Execute concurrently; don't block UI – Message passing for coordination – High start-up performance cost; high memory cost var worker = new Worker('worker.js'); worker.onmessage = function(event) {alert(event.data);}; worker.js: postMessage(data); – Delegation:  Split expensive tasks among multiple workers 13
  • 14. HTML 5 Features : JavaScript API > GeoLocation – JavaScript access to the browser's location – New property on global navigator object:: navigator.geolocation function get_location() { If (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else // no support... .. } function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // do something interesting – show map for example } 14
  • 15. HTML 5 Features : JavaScript API > Audio/Video manipulation: – Dynamically create <audio>, <video> – Add custom controls to <audio>, <video> – Control <audio>, <video> attributes var video = document.createElement('video'); video.src = 'video.ogv'; video.controls = true; document.body.appendChild(video); 15
  • 16. HTML 5 Features : JavaScript API > Canvas: – JavaScript to enable drawing/animation in the browser <canvas id="example" width="200" height="200"> ... </canvas> … var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); 16
  • 17. HTML 5 Features : JavaScript API > Canvas: – Functions for simple shapes:  fillRect(x,y,w,h) Draws rectangle  strokeRect(x,y,w,h) Draws outline of rectangle  clearRect(x,y,w,h) Clears pixels within given rectangle – Functions for complex shapes, paths ctx.strokeStyle = “rgb(65, 60, 50 50)”; 50 100 ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(100,100); 100 ctx.stroke(); 17
  • 18. HTML 5 Features : JavaScript API > Web Sockets: – Provide bi-directional communication channel in the browser – send() : Send data from browser to server – onmessage event handler: process data from server – Separate specification (from HTML 5) – Many server implementations: Grizzly, GlassFish 3.1, jWebsocket,Kaazing,... var ws = new WebSocket("ws://www.websocket.org"); ws.onopen = function(evt) { alert("Connection open ..."); }; ws.send(data); ws.onmessage = function(evt) { alert( "Msg: " + evt.data); }; ws.onclose = function(evt) { alert("Connection closed."); }; ws.disconnect(); 18
  • 19. HTML 5 Features : What's Available .. And Where? > http://html5test.com/ – Will tell you what HTML5 features are available for the current browser. – http://weblogs.java.net/blog/rogerk/archive/2010/05/25/te sting-html5-feature-availability-browsers 19
  • 20. JSF 2.0 Component Model 20
  • 21. JSF 2.0 Component Model > Facelets is the foundation – Optimized for JSF – XHTML and tags – Eliminates translation/compilation – Templating > Powerful tools: – Templating – Composite Components 21
  • 22. JSF 2.0 Composite Components 22
  • 23. JSF 2.0 Composite Components > True abstraction: – Reusable component > Turns page markup into a JSF UI component with attached validators, converters, listeners Using Page (XHTML) <html … xlms:my=”http....”> Component <my:comp (XHTML) value=”yes” /> </html> 23
  • 24. JSF 2.0 Composite Components <html xmlns=”http:///www/w3/org/1999/xhtml” xmlns:h=”http://java.sun.com/jsf/html” xmlns:f=”http://java.sun.com/jsf/core” xmlns:my=”http://java.sun.com/jsf/composite/comp”> <my:out value=”yes”/> On disk: <context root>/resources/comp/out.xhtml 24
  • 25. JSF 2.0 Composite Components What's Inside The Black Box? > Interface – The usage contract – Everything page author needs to know to use component > Implementation – Markup used to create component – How the component is implemented 25
  • 26. JSF 2.0 Composite Components <context-root>resources/ezcomp/LoginPanel.xhtml <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:cc="http://java.sun.com/jsf/composite"> … <h:body> <cc:interface> <cc:attribute name=”userVal” required=”true” ”/> <cc:attribute name=”passValue” required=”true” /> <cc:actionSource name="loginAction” targets=”loginButton” /> </cc:interface> <cc:implementation> <div> Username:<h:inputText id=”userId”” value=”#{cc.attrs.userVal}”/> </div> <div>Password:<h:inputSecret id=”passId” value=”#{cc.attrs.passVal}”/></div> <div> <h:commandButton value=”Login” id=”loginButton” /> </div> </cc:implementation> .... </h:body> 26
  • 27. JSF 2.0 Composite Components “Using” Page <html...xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> … <h:form> <div id="compositeComponent" class="grayBox" style="border: 1px solid #090;"> <ez:loginPanel > <f:actionListener for=”loginAction” binding=”#{bean.action}” /> </ez:loginPanel> </div> <p><h:commandButton value="reload" /></p> </h:form> 27
  • 28. JSF 2.0 Composite Components With HTML 5 28
  • 29. Enhancing JSF 2.0 Components With HTML 5 > JSF 2.0 specification introduced JavaScript to promote Ajax > Composite components work well with JavaScript > Composite components can leverage the HTML 5 JavaScript API 29
  • 30. Enhancing JSF 2.0 Components With HTML 5 <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:cc="http://java.sun.com/jsf/composite"> <h:head> ... </h:head> … <h:body> <cc:interface> <cc:attribute name=”src” required=”true” ”/> <cc:attribute name=”controls” required=”false” /> </cc:interface> <cc:implementation> <h:outputScript library=”js” name=”audio.js” target=”head”/> <audio src="#{cc.attrs.src}" controls="#{cc.attrs.controls}"></audio> <input type=”button” value=”Play” onclick=”play()”/> <input type=”button” value=”Pause” onclick=”pause()”/> </cc:implementation> </h:body> 30
  • 31. Enhancing JSF 2.0 Components With HTML 5 audio.js: function play() { var audio = document.getElementsByTagName("audio")[0]; audio.play(); var display = document.getElementsByTagName("input")[0]; display.value = audio.src; } function pause() { var audio = document.getElementsByTagName("audio")[0]; audio.pause(); } 31
  • 32. Enhancing JSF 2.0 Components With HTML 5 “Using” Page <html... xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:h5="http://java.sun.com/jsf/composite/media"> <h:head> ... </h:head> … <h:body> ... <h5:audiobox src="resources/media/Lightson.ogg" controls="controls"/> </h:body> .... 32
  • 33. DEMOS And let's look at some code... 33
  • 34. What's Next? > With respect to JSF: – JSF 2.0 Rev A (Minor Maintenance Release) – JSF 2.1 (Major Maintenance Release) > We would like to hear from you! 34
  • 35. Summary > HTML 5 – Really about markup and JavaScript API > HTML 5 Features – Promote Rich User Interfaces – Graphics – Media – Multiprocessing – Communication > JSF 2.0 Components work well with JavaScript – Leverage HTML 5 JavaScript APIs > Future Directions 35
  • 36. Resources > http://glassfish.dev.java.net > http://javaserverfaces.dev.java.net > http://dev.w3.org/html5/spec/Overview.html > http://dev.w3.org/html5/websockets > http://grizzly.dev.java.net 36
  • 37. Roger Kitain http://twitter.com/rogerk09 Oracle Corporation http://www.java.net/blogs/rogerk roger.kitain@oracle.com