Servletで開発する方法
対象製品
WebCharts3D 5.4J
詳細
Servletで開発する場合も製品マニュアルで解説しているJSPの開発と同様に、com.gp.api.jsp パッケージのWebページ開発用のクラスであるMxServerComponentとMxChartDescriptionを使用します。
これらのクラスを用いてサーバで作成したグラフイメージをクライアントのブラウザに表示する方法は2つあります。
以下、順に説明していきます。
サンプルコード(SampleChartServlet1.java)
ブラウザに表示するHTMLの<img>タグのsrc属性に上記のServletを指定することで、グラフのイメージがブラウザに表示されるようになります。
サンプルコード(SampleChartServlet1.java)
実行結果(SampleChartServlet1)
以上のように、Servletの場合にも、デザイナのJSPのソースコードを利用して開発を行うことができます。また、MxChartDescriptionクラスのstyleとmodelのプロパティは、それぞれ次のメソッドによってファイルから読み込むことが可能です。
サンプルコード(SampleChartServlet1_2)
ソースコードも読みやすくなりました。
この場合、MxServerComponentのキャッシュからチャートイメージを取得するためのjspが必要になり、製品にはサンプルとしてgetImage.jspが用意されています。デザイナのコードビューでJSP間接出力を選択したときにも、このgetImage.jspを用いたコードが出力されます。
サンプルコード(SampleChartServlet2)
実行結果(SampleChartServlet2)
イメージマップを用いたポップアップラベルが表示できました。
- MxServerComponent
- サーバでグラフイメージを作成するクラスです。ServletContextを引数にとる自身のstaticメソッドgetDegfaultInstance()でインスタンスを取得します。
- MxChartDescription
- グラフの情報を設定するためのクラスです。MxServerComponentクラスのnewImageSpec()メソッドを呼び出してインスタンスを取得します。
これらのクラスを用いてサーバで作成したグラフイメージをクライアントのブラウザに表示する方法は2つあります。
- 直接的な方法
- サーバで作成したグラフイメージをHttpServletResponseでクライアントに直接配信します。
- 間接的な方法
- サーバで作成したグラフイメージはサーバにキャッシュされ、キャッシュされたIDを指す<img>タグおよびイメージマップタグを配信します。キャッシュを参照するので間接的な方法と呼びます。ポップアップラベルなど対話式操作が可能になります。
以下、順に説明していきます。
直接的な方法によるチャート配信
使用するクラスはJSPと同じですから、デザイナで自動生成されるJSPのコードを利用することができます。以下は、デザイナでJSPの直接出力で自動生成されたコードをServletのdoGet()メソッドに張り付けて作成したServletの例です。サンプルコード(SampleChartServlet1.java)
import java.io.* import java.net.* import javax.servlet.* import javax.servlet.http.* import com.gp.api.jsp.* public class SampleChartServlet1 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //ServletContextを取得します。MxServerComponent.getDefaultInstance()メソッドで必要です。 ServletContext sc = getServletContext(); try{ // 以下のコードは、 // MxServerComponent.getDefaultInstance()メソッドの引数の変数名以外は // デザイナの JSP直接出力で作成されるソースコードです。 MxServerComponent svr = MxServerComponent.getDefaultInstance(sc); MxChartDescription myChart = svr.newImageSpec(); myChart.width = 409; myChart.height= 371; myChart.type = "PNG"; myChart.style = " <frameChart font=¥"Dialog-11¥"> <frame xDepth=¥"22¥" yDepth=¥"10¥" xTilt=¥"10¥"/> <xAxis> <titleStyle font=¥"Dialog-14¥"/> </xAxis> <yAxis scaleMin=¥"0¥" scaleMax=¥"450¥"> <titleStyle font=¥"Dialog-14¥"/> </yAxis> <yAxis2> <titleStyle font=¥"Dialog-14¥"/> </yAxis2> <topYAxis> <titleStyle font=¥"Dialog-14¥"/> </topYAxis> <topYAxis2> <titleStyle font=¥"Dialog-14¥"/> </topYAxis2> <dataLabels font=¥"Dialog-12¥"/> <elements place=¥"Stacked¥" drawShadow=¥"true¥"> <morph stage=¥"Cols¥"/> </elements> <title font=¥"Dialog-16¥"/> <paint palette=¥"Pastel¥"/> </frameChart>"; myChart.model = "<?xml version=¥"1.0¥" encoding=¥"UTF-8¥"?>¥n<XML type=¥"default¥">¥n<COL>2000</COL>¥n<COL>2001</COL>¥n<COL>2002</COL>¥n<COL>2003</COL>¥n<COL>2004</COL>¥n<ROW col0=¥"100.0¥" col1=¥"200.0¥" col2=¥"100.0¥" col3=¥"180.0¥" col4=¥"200.0¥">サンプル 0:</ROW>¥n<ROW col0=¥"150.0¥" col1=¥"300.0¥" col2=¥"250.0¥" col3=¥"230.0¥" col4=¥"250.0¥">サンプル 1:</ROW>¥n<ROW col0=¥"200.0¥" col1=¥"400.0¥" col2=¥"400.0¥" col3=¥"280.0¥" col4=¥"300.0¥">サンプル 2:</ROW>¥n<ROW col0=¥"250.0¥" col1=¥"500.0¥" col2=¥"550.0¥" col3=¥"330.0¥" col4=¥"350.0¥">サンプル 3:</ROW>¥n</XML>"; svr.writeBytesTo(myChart,response) }catch (IOException ioex) { ioex.printStackTrace(); } } }
ブラウザに表示するHTMLの<img>タグのsrc属性に上記のServletを指定することで、グラフのイメージがブラウザに表示されるようになります。
サンプルコード(SampleChartServlet1.java)
 <html>  <body>  <h1>WebCharts3D Servlet Sample</h1>  <img src="./SampleChartServlet">  </body>  </html>
実行結果(SampleChartServlet1)
以上のように、Servletの場合にも、デザイナのJSPのソースコードを利用して開発を行うことができます。また、MxChartDescriptionクラスのstyleとmodelのプロパティは、それぞれ次のメソッドによってファイルから読み込むことが可能です。
- style
- loadStyles()メソッドを使用してデザイナのXMLスタイルタブで保存できるXMLを読み込めます。
- model
- linkTo()メソッドを使用してデザイナのXMLモデルで作成できるXMLファイルを読み込めます。
サンプルコード(SampleChartServlet1_2)
import java.io.* import java.net.* import javax.servlet.* import javax.servlet.http.* import com.gp.api.jsp.* public class SampleChartServlet1_2 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //ServletContextを取得します。 ServletContext sc = getServletContext(); try{ MxServerComponent svr = MxServerComponent.getDefaultInstance(sc); MxChartDescription myChart = svr.newImageSpec(); myChart.width = 409; myChart.height= 371; myChart.type = "PNG"; // styleとmodelプロパティをファイルから読み込むように変更。 myChart.loadStyles(sc.getRealPath("./xml/style.xml")); myChart.linkTo(sc.getRealPath("./xml/model.xml")); svr.writeBytesTo(myChart,response) }catch (IOException ioex) { ioex.printStackTrace(); } } }
ソースコードも読みやすくなりました。
間接的な方法によるチャート配信
イメージマップにより対話式のチャートを作成するためには、間接的な方法を用います。この場合、MxServerComponentのキャッシュからチャートイメージを取得するためのjspが必要になり、製品にはサンプルとしてgetImage.jspが用意されています。デザイナのコードビューでJSP間接出力を選択したときにも、このgetImage.jspを用いたコードが出力されます。
サンプルコード(SampleChartServlet2)
import java.io.* import java.net.* import javax.servlet.* import javax.servlet.http.* import com.gp.api.jsp.* public class SampleChartServlet2 extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //ServletContextを取得します。 ServletContext sc = getServletContext() // MxServerComponent svr = MxServerComponent.getDefaultInstance(sc); MxChartDescription myChart = svr.newImageSpec(); myChart.width = 409; myChart.height= 371; myChart.type = "PNG"; myChart.loadStyles(sc.getRealPath("./xml/style.xml")); myChart.linkTo(sc.getRealPath("./xml/model.xml")); //先ほどまでの例のようにHttpServletResponseにチャートイメージを //書き込むのではなく、PrintWriterを用いてHTMLタグをブラウザに返します。 response.setContentType("text/htmlcharset=Shift_JIS"); PrintWriter out = response.getWriter(); try{ out.println("<html>"); out.println("<title>Servlet SampleChartServlet2</title>"); out.println("</head>"); out.println("<body>"); out.println("<h1>Servlet 対話式チャート </h1>"); //イメージマップタグを作成するメソッドを呼び、 //その中でgetImage.jspを用いてイメージを取得するように記します。 //製品ルート以下のsampleディレクトリにあるgetImage.jspをサーバーに配備し、 //そのファイルへのパスを設定してください out.println(svr.getImageTag(myChart,"getImage.jsp?image=")); out.println("</body>"); out.println("</html>"); } finally { out.close(); } } }
実行結果(SampleChartServlet2)
イメージマップを用いたポップアップラベルが表示できました。