Advanced Graphics Components Using JavaServer Faces Technology. Christophe Jolif Architect ILOG S.A.

Size: px

Start display at page:

Download "Advanced Graphics Components Using JavaServer Faces Technology. Christophe Jolif Architect ILOG S.A."

Gervase Riley
6 years ago
Views:

1 Advanced Graphics Components Using JavaServer Faces Technology Christophe Jolif Architect ILOG S.A.

2 Goal of the Session Learn how to build JavaServer Faces technology advanced graphics components Learn how to leverage DHTML and Scalable Vector Graphics technologies to build JavaServer Faces technology advanced graphics components to enrich your web application user interfaces

3 Simple UI Components are not Enough! For my web application simple UI components are not enough! How can I add interactive advanced graphics to this application while still using the standard JavaServer Faces (JSF) framework?

4 Agenda Introducing JSF, DHTML and SVG technologies Building JSF advanced 2D graphics components The chart component example with DHTML and SVG render kits Comparison between DHTML and SVG architectures Summary

5 Agenda Introducing JSF, DHTML and SVG technologies Building JSF advanced 2D graphics components The chart component example with DHTML and SVG render kits Comparison between DHTML and SVG architectures Summary

6 Introduction JSF A Server-side Component Framework A component framework for building user interfaces for web applications A set of APIs for representing UI components, managing state, handling events inputs and defining page navigation A JavaServer Pages (JSP) core tag library A set of predefined server-side components and an HTML render kit implementation

7 Introduction JSF How to Use it? Basic Use Develop the model objects and register them Create the JSP pages Define page navigation Customizing Extending Adding new render kits Defining new components

8 Introduction JSF Example: The Model Bean package mypackage; public class PresentationModel { private String title; public void settitle(string title) { this.title = title; public String gettitle() { return this.title;

9 Introduction JSF Example: The JSP Page <html> taglib uri= prefix= h %> <%@ taglib uri= prefix= f %> <body> <f:view> <h2>enter your presentation title</h2> <h:form id= titleform > <h:inputtext id= title value= #{PresentationModel.title <h:commandbutton action= success value= Submit Title /> </h:form> </f:view> </body> </html>

10 Introduction DHTML DHTML: Dynamic HTML Widespread technology Original core HTML enhanced with a scriptable document model Used to be incompatible between browsers Provides simple UI components

11 Introduction DHTML DHTML and Advanced Graphics Components Nearly everything can be displayed by heavily relying on layering ( <div> ) and raster images Some advanced interaction can be performed by relying on scripting

12 Introduction SVG Scalable Vector Graphics SVG is an XML syntax for rich, interactive and interoperable 2D vector and raster graphics SVG 1.1 is a World Wide Wide Consortium (W3C) Recommendation SVG 1.2 is under specification and will add more features to build web applications

x="0" y="0" width="200" height="200" fill="rgb(51,102,153)" stroke="rgb(153,51,0) opacity="1">

13 Introduction SVG Code Sample <svg width="100%" height="100%"> <g transform="scale(2,2)"> <circle cx="100" cy="100" r="100" fill="rgb(204,51,51)" stroke="rgb(102,102,153)"/> <rect id="rect" x="0" y="0" width="200" height="200" fill="rgb(51,102,153)" stroke="rgb(153,51,0) opacity="1"> <animate attributename="opacity" fill="freeze to="0" dur="5s" begin="rect.click"/> </rect> </g> </svg>

14 Introduction SVG Good Match for Advanced Graphics Components SVG provides the needed drawing primitives Component s look can be designed by artists in drawing authoring tools Component logic can be developed by coders that have access to full DOM capabilities XML based, so integrates well in server-side workflows SVG is standardized and is accepted by a wide range of devices

15 Agenda Introducing JSF, DHTML and SVG technologies Building JSF advanced 2D graphics components The chart component example with DHTML and SVG render kits Comparison between DHTML and SVG architectures Summary

16 Advanced 2D Graphics Components Definition An advanced 2D graphics component goes beyond simple UI components to provide enhanced feedback and interaction to the user Examples: Charts components Map components Why should you care? To display new types of data To improve user experience on all kinds of data

17 Advanced 2D Graphics Components DHTML + Servlet/JSP Examples SVG + Servlet/JSP Examples

18 Advanced 2D Graphics Components Why JSF? DHTML or SVG components provide the client-side display and interaction JSF is the standardized server-side framework To generate the client representation To handle and validate the user inputs To manage the component state To synchronize with the business data model IDE support

19 Advanced 2D Graphics Components The Task List Create a JSP tag handler and its descriptor Create the server-side component classes Create the renderer(s) Register the components and the renderers

20 Agenda Introducing JSF, DHTML and SVG technologies Building JSF advanced 2D graphics components The chart component example with DHTML and SVG render kits Comparison between DHTML and SVG architectures Summary

21 Chart JSF Component Example Write an Abstract Tag Handler public abstract class ChartTag extends UIComponentTag { protected void setproperties(uicomponent c) { super.setproperties(c); if (url!= null) c.getattributes().put( url, url); //... public void seturl(string url) { this.url = url; public void setdatasourceid(string datasource) { this.datasource = datasource; public void settype(string type) { this.type = type; // PIE, BAR...

22 Chart JSF Component Example Create the Basic JSF Server-side Component public class ChartComponent extends UIGraphic { public void setdatasourceid(string datasource) { this.datasource = datasource; public Object savestate(facescontext ctx) { Object values[] = new Object[3]; values[0] = super.savestate(context); values[1] = datasource; //... return values; public void restorestate(facescontext ctx, Object state) { Object[] values = (Object[])state; super.restorestate(context, values[0]); setdatasource((string)values[1]); //...

23 Chart JSF Component Example DHTML Specific Tag Handler (and Component) public class HTMLChartTag extends ChartTag { public String getcomponenttype() { return HTMLChartComponent ; public String getrenderertype() { return HTMLChartRenderer ; protected void setproperties(uicomponent c) { super.setproperties(c); if (imageformat!= null) c.getattributes().put( imageformat, imageformat); //... public void setimageformat(string format) { this.format = format; // GIF, PNG, JPG...

24 Chart JSF Component Example Develop the DHTML Renderer public class HTMLChartRenderer extends Renderer { public void decode(facescontext ctx, UIComponent c) { super.decode(ctx, c); Map parametermap = ctx.getexternalcontext().getrequestparametermap(); String url = (String)map.get( url ); if (url!= null) ((HTMLChartComponent)c).setUrl(url); //... public void encodeend(facescontext ctx, UIComponent c) throws IOException { super.encodeend(ctx, c); HTMLChartComponent chart = (HTMLChartComponent)c; ResponseWriter writer = ctx.getresponsewriter(); writer.startelement( img ); writer.writeattribute( src, chart.geturl()); writer.endelement( img );

25 Chart JSF Component Example Leverage a Chart Raster Image Generator The image generator Servlet uses a Chart rendering engine that dumps drawings to a Graphics2D A Graphics2D is obtained from a BufferedImage and passed to the Chart engine The BufferedImage is encoded according to the required image type and sent back to the client

26 Chart JSF Component Example JSF/DHTML Usage Sample <html> <f:view> <h:form> <jch:chart id= thechart servlet= datasourceid= ds1 interactorid= pan type= bar imageformat= PNG /> <jch:paninteractor id= pan /> <jc:xmldatasource id= ds1 value= data/chart.xml /> <jc:memorydatasource id= ds2 value= #{Model.dataSource /> <h:selectonemenu onchange= thechart.setdatasourceid( this.options[this.selectedindex].value) > <f:selectitem itemlabel= ds1 itemvalue= ds1 /> <f:selectitem itemlabel= ds2 itemvalue= ds2 /> </h:selelectonemenu> </h:form> </f:view> </html>

27 Chart JSF Component Example Lessons Learned Use an additional Servlet for the image: Avoid full page roundtrip Avoid forcing JSF validation when unnecessary Use the session to communicate information between JSF and the image generator Servlet Create script objects for each component Leverage client-side actions Put local changes into hidden input tags to be saved in the JSF context

28 Chart JSF Component Example Develop the SVG Renderer public class SVGChartRenderer extends Renderer { public void encodeend(facescontext ctx, UIComponent c) throws IOException { super.encodeend(ctx, c); SVGChartComponent chart = (SVGChartComponent)c; ResponseWriter writer = ctx.getresponsewriter(); writer.startelement( image ); writer.writeattribute( xlink:href, chart.geturl()); writer.endelement( image );

29 Chart JSF Component Example SVG Chart Generation Simple solution similar to DHTML one leveraging Batik SVG Generator Smarter solution: Don t regenerate the whole SVG each time but use a client-side cache Transfer only the additional data Dynamically generate the client-side rendering

30 Chart JSF Component Example JSF/SVG Usage Sample <svg width= 100% height= 100% > <f:view> <js:form> <jcs:chart id= thechart interactorid= ds1 url= datasourceid= pan type= bar width= 80% height= 100% /> <jcs:paninteractor id= pan /> <jc:xmldatasource id= ds1 value= data/chart.xml /> <rect x= 80% y= 0% width= 20% height= 100% stroke= blue fill= none /> <jcs:legend chartid= thechart x= 80% y= 0% width= 20% height= 100% </js:form> </f:view> </svg>

31 Chart JSF Component Example Lessons Learned To fully leverage SVG: The entire chart should not be regenerated All actions that do not require roundtrip must be performed on the client An SVG <h:form> equivalent must be coded to submit data to JSF SVG brings better experience to the user by reducing server roundtrips and providing smarter interaction and display

32 Demo JSF Charts 32

33 Agenda Introducing JSF, DHTML and SVG technologies Building JSF advanced 2D graphics components The chart component example with DHTML and SVG render kits Comparison between DHTML and SVG architectures Summary

34 DHTML and SVG Architectures Comparison DHTML SVG Image partial updates No Yes Fully client-side actions No Yes High end interaction Difficult Yes Download size ~Fixed Proportional Plugin free Yes No Fully standardized No Yes Maintenance cost High Medium

35 DHTML and SVG Architectures What s Next DHTML has reached its maturity, compatibility across browsers may still improve SVG goes into the web application space with the SVG 1.2 draft specification Advanced graphics components would benefit from JSF built-in incremental update support

36 Agenda Introducing JSF, DHTML and SVG technologies Building JSF advanced 2D graphics components The chart component example with DHTML and SVG render kits Comparison between DHTML and SVG architectures Summary

37 Summary Advanced graphics components need a server-side framework such as JSF JSF based components can be easily assembled in JSF-enabled IDEs JSF lacks built-in incremental update support SVG brings: Advanced graphics and interaction capabilities The ability to limit roundtrip requests

38 If You Remember Only One Thing... Do not hesitate to extend JSF framework to build SVG or DHTML advanced graphics components to enrich your web application user interfaces

39 For More Information JavaServer Faces Technology Java and SVG Technologies Batik Toolkit: Bring SVG power to Java applications: svg ILOG JViews: SVG Adobe SVG Viewer:

40 40 Q&A

41 Advanced Graphics Components Using JavaServer Faces Technology Christophe Jolif Architect ILOG S.A.

White Paper AJAX. for Graphics-Intensive Web Applications

White Paper AJAX. for Graphics-Intensive Web Applications White Paper AJAX for Graphics-Intensive Web Applications AJAX for Graphics-Intensive Web Applications White Paper ILOG, May 2006 Do not duplicate without permission. ILOG, CPLEX and their respective logotypes