Tutorial: Step 3
Install the Cewolf Servlet in your Web App
The rendering of the entire chart is finally provided via a servlet. This has to be installed in your web application. Cewolf provides a servlet class de.laures.cewolf.CewolfRenderer which does the job.
To configure your web application you have to edit the /WEB-INF/web.xml file. Add the following lines to it:
<servlet>??? <servlet-name>CewolfServlet</servlet-name>??? <servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class></servlet>
Additionally you should provide a servlet-mapping to tell the container which URL maps to your Cewolf rendering servlet.
<servlet-mapping>??? <servlet-name>CewolfServlet</servlet-name>?
? <url-pattern>/cewolf/*</url-pattern></servlet-mapping>
You also need to tell CeWolf to load on startup:
?<load-on-startup>1</load-on-startup>
To test the correct installation you should start your web app and try to call the rendering servlet with a browser (e.g. http://localhost:8080/myapp/cewolf?state). Cewolf should answer: "Cewolf servlet up and running." Here is a copy of the example web.xml:
<web-app>
? <servlet>
??? <servlet-name>CewolfServlet</servlet-name>
??? <servlet-class>de.laures.cewolf.CewolfRenderer</servlet-class>
?<!-- sets storage implementation -->
??? <init-param>
??????? <param-name>storage</param-name>
??????? <param-value>de.laures.cewolf.storage.TransientSessionStorage</param-value>
??? </init-param>
?<!-- sets overlib.js location relative to webapp -->
??? <init-param>
??????? <param-name>overliburl</param-name>
??????? <param-value>etc/overlib.js</param-value>
??? </init-param>
?<!-- turn on or off debugging logging -->
??? <init-param>
??????? <param-name>debug</param-name>
??????? <param-value>true</param-value>
??? </init-param>
??? <load-on-startup>1</load-on-startup>
? </servlet>
? <servlet-mapping>
??? <servlet-name>CewolfServlet</servlet-name>
??? <url-pattern>/cewolf/*</url-pattern>
? </servlet-mapping>
? <session-config>
??? <session-timeout>1</session-timeout>
? </session-config>
? <mime-mapping>
????? <extension>css</extension>
????? <mime-type>text/css</mime-type>
? </mime-mapping>
? <welcome-file-list>
? ?<welcome-file>
????? index.html
??? </welcome-file>
? ?<welcome-file>
????? index.htm
??? </welcome-file>
? </welcome-file-list>
?
?<!-- resource-ref>
?? <description>
???? Resource reference to a factory for java.sql.Connection
???? instances that may be used for talking to a particular
???? database that is configured in the server.xml file.
?? </description>
?? <resource-ref-name>
???? jdbc/testdb
?? </resource-ref-name>
?? <res-type>
???? javax.sql.DataSource
?? </res-type>
?? <res-auth>
???? Container
?? </res-auth>
?</resource-ref -->
</web-app>
Tutorial: Step 4
Define the chart in your JSP
<%@page contentType="text/html"%><%@taglib uri='/WEB-INF/cewolf.tld' prefix='cewolf' %><HTML><BODY><H1>Page View Statistics</H1><HR><jsp:useBean id="pageViews" class="de.laures.cewolf.example.PageViewCountData"/><cewolf:chart???? id="line"???? title="Page View Statistics"???? type="line"???? xaxislabel="Page"???? yaxislabel="Views">??? <cewolf:data>??????? <cewolf:producer id="pageViews"/>??? </cewolf:data></cewolf:chart><p><cewolf:img chartid="line" renderer="cewolf" width="400" height="300"/><P></BODY></HTML>
As you can see there are different tags of the cewolf taglib involved. The first <cewolf:chart> tag defines a chart with all its parameters. The concrete rendering is handled by the <cewolf:img> tag which adds the correct <img> tag in the rendered HTML page. The connection between both cewolf tags inside the JSP is specified by using the same id attributes.
When calling this JSP from a client browser you should see the page view statistic chart. If you got a broken image have a look at your container's log files.
Tutorial: Step 5
Create ImageMap and Tooltip Information
To provide your chart with additionnal tooltips and image map information you have to provide an additional Java class or enhance an existing one like the one below. In this tutorial we will add some methods to the datasetproducer class which had been introduced at the beginning of this tutorial.
...? public String generateLink(Object data, int series, Object category) {??? return seriesNames[series];? }? public String generateToolTip(CategoryDataset arg0, int series, int arg2) {??? return seriesNames[series];? }...
As you can see it is very easy to implement a class that produces image map and tooltips information. First of all it has to implement the interfaces CategoryItemLinkGenerator and CategoryToolTipGenerator (as it produces a CategoryDataset). For other data types refer to the cewolf java api.
To let your class produce links and tooltips for the chart image you have to change the <cewolf:img> tag as follows:
<cewolf:img chartid="line" renderer="cewolf" width="400" height="300">??? <cewolf:map id="pageViews"/></cewolf:img>
Reload your page and you will see tooltips and links on data points. Internet Explorer browsers are handled slightly different as others as they are able to render a tooltip based on the alt attribute inside an image map. All other browser need the overlib.js for this. Cewolf tries to determine the used browser and renders a correct page transparently.
For further information on using Cewolf refer to the Tag Library Reference and the Cewolf JavaDoc.
If you want to see more examples of how to implement catchy charts in your webapp, you should deploy the example webapp (downloadable from the Cewolf home page and have a look at its sourcecode.
?
posted on 2006-06-02 16:13
北疆兵團 閱讀(554)
評論(0) 編輯 收藏 所屬分類:
struts