スタートガイド

  1. はじめに
  2. インストール
  3. Tomcatサンプルの実行
  4. アプリケーションの開発と実行
  5. 参考資料

1. はじめに

本資料では、次の方にJClass ServerChart 6.2Jの導入方法をご紹介します。
・JClass ServerChart 6.2J製品版をすでにご購入いただき、お手元に納品メールが届いている方
・これからトライアル版を使ってJClass ServerChart 6.2Jの評価を行う方
はじめて製品をご利用いただくことを前提に、インストールからデザイナの利用、Javaアプリケーションでの出力までの手順をご説明します。

なお、必要に応じて、詳しい説明を記述したドキュメントを紹介していますので、あわせてご確認ください。

2. インストール

すでに製品を購入された方は、製品CDからインストールを行ってください。
トライアル版を利用される場合、「トライアル版のインストール」方法に従って、Webサイトからモジュールをダウンロードしてください。

製品CDからのインストール

<cd-rom_root>/jclass/serverviewsディレクトリを開き、ターゲットコンピュータのOSに対応したインストーラを起動してください。

トライアル版のインストール

Webサイトからトライアル版の利用申請を行ってください。

[ダウンロード]-[トライアル版]-[Java]はこちら

グレープシティからトライアル版モジュールのURLを記載したE-mailが届きます。
モジュールをダウンロード後、インストールを行ってください。

3. Tomcatサンプルの実行

JClass ServerChartには、Tomcat上でバーコードを生成するサンプルWebアプリケーションが付属しており、製品の機能を確認できます。以下の手順でTomcatを起動してください。

Windows :
[スタート]-[プログラム]-[JClass ServerViews 6.2J]-[Tomcatの起動]の選択
または、<install_root>/bin/tomcat-startup.exeの実行
UNIX :
<install_root>/bin/tomcat-startup

Tomcatを起動し、以下のURLをブラウザで開いてください。サンプルのトップページが表示されます。
» http://localhost:8686/server-samples/examples/schart/index.html

4. アプリケーションの開発と実行

ここでは、デザイナで新規にグラフをデザインするところから始め、サーブレットプログラムの作成、サーバーへのデプロイを行い、WebアプリケーションでJClass ServerChartを出力するまでの手順を学習できます。

4.1 グラフのデザイン

(1)デザイナの外観

デザイナ画面は3つの領域(グラフビュー、グラフオブジェクトの一覧、プロパティエディタ)で構成されています。デザイン結果を見ながらプロパティ設定を行えるためグラフタブオブジェクト(XML)を直観的に生成できます。

画像「デザイナの外観」拡大

(2)グラフの種類の選択

デザイナを起動、またはメニューから[ファイル]-[新規グラフ]を選択し、[チャートパレット]ウィンドウで、デザインするグラフの種類を選択します。ここでは、プロットグラフを選びます。

画像「チャートパレット」拡大

(3)プロパティの変更

プロパティエディタには、グラフオブジェクトで選択したプロパティが表示されます。これらの値を変更することで、グラフの外観をカスタマイズできます。ここでは、グラフのヘッダーと背景の色を変更します。

グラフオブジェクトからグラフエリアを選びます。全般タブの色の不透過チェックボックスをチェックし、塗りつぶしスタイルタブを有効にします。次に、塗りつぶしタブの全般のプロパティを以下のように設定します。

画像「グラフエリア」拡大

グラフオブジェクト - グラフエリア
オブジェクト/プロパティ名 設定値
タブ「全般」
不透過 チェックする
タブ「塗り潰しスタイル」
パターン グラデーション
色 1 204-255-255
色 2 51-153-255
スタイル 水平

次にグラフオブジェクトからヘッダーを選び、以下のように設定します。

画像「ヘッダー」拡大

グラフオブジェクト - ヘッダー名
オブジェクト/プロパティ名 設定値
表示 チェックする
HTMLを使用する チェックしない
テキストボックス “サンプルチャート”
不透過 チェックしない
(4)グラフタグオブジェクト(XML)を生成

デザイナのメニューから[ファイル]-[名前を付けて保存]を選択し、ここまでデザインしたグラフのタグオブジェクトを保存します。ファイル名はsample.xmlにします。

画像「名前を付けて保存」拡大

4.2 アプリケーションの実行

(1)サーブレットプログラムの作成

グラフをWeb上で表示するプログラムを作成します。以下のサンプルではグラフスタイルをXMLファイルから読み込み、コード上でグラフデータを設定しています。

import com.klg.jclass.chart.data.JCDefaultDataSource;
import com.klg.jclass.schart.JCServerChart;
import com.klg.jclass.schart.JCServerChartFactory;
import com.klg.jclass.util.io.LoadServerProperties;
import com.klg.jclass.util.swing.encode.JCEncodeComponent;

import javax.servlet.*;
import javax.servlet.http.*;
import java.io.IOException;

public class ServerChart_Sample extends HttpServlet{
  public void service(HttpServletRequest request, HttpServletResponse response) {
    try{
      LoadServerProperties loadProps = new LoadServerProperties();
      String inFile = "/sample.xml";
      JCServerChart schart = null;

      // XML ファイルで定義されているプロパティを読み込みます。
      try {
        schart = JCServerChartFactory.makeServerChartFromFile(inFile, loadProps,
                 "", JCServerChartFactory.XML);
      }
      catch (IOException e) {
        System.out.println("Error reading " + inFile + ":" + e.getMessage());
      }

      // サイズを設定します。
      schart.setSize(300, 200);
	
      // グラフのデータを設定します。
      String Series[]={ "去年", "今年" };
      double y[][] = {{ 400, 250, 200, 150, 130, 350, 430 },
                      { 10, 40, 50, 280, 250, 450, 670 }};
      JCDefaultDataSource ds = new JCDefaultDataSource(null, y, null, Series, "");
      schart.getDataView(0).setDataSource(ds);

      // イメージを出力するための Stream を生成します。
      ServletOutputStream out = response.getOutputStream();

      // コンテンツタイプを設定します。
      response.setContentType("image/png");

      // グラフをエンコードします。
      schart.encodeWithExceptions(JCEncodeComponent.PNG, out);

      // ブラウザへストリームを出力します。
      out.flush();

    }
    catch(Exception e){
      e.printStackTrace();
    }
  }   	 	  	  	    
}
(2)サーブレットのコンパイル

サーブレットプログラムをコンパイルします。上記のソースファイルがあるフォルダに移動し、javacコマンドでコンパイルします。なお、コンパイル時は JClass ServerChartのクラスライブラリ(jcschart.jar)とサーブレット用のクラスライブラリ(servlet-api.jar)をクラスパスに指定してください。

>javac -classpath C:¥JClassServerViews62J¥lib¥jcschart.jar;
C:¥Java¥apache-tomcat-6.0.20¥lib¥servlet-api.jar";. ServerChart_Sample.java
(3)web.xmlファイルの作成

次に、サーブレットのURLを指定するためのweb.xmlを用意します。ここでは、Servlet 2.4仕様で記述しています。

<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns=http://java.sun.com/xml/ns/j2ee
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
  http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  <servlet>
    <servlet-name>ServerChart_Sample</servlet-name>
    <servlet-class>ServerChart_Sample</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ServerChart_Sample</servlet-name>
    <url-pattern>/ServerChart_Sample</url-pattern>
  </servlet-mapping>
</web-app>

4.3 Webアプリケーションの配布

作成したJSPファイルをWeb上で実行するためにWebアプリケーションを配布します。構成は次のとおりです。

画像「Webアプリケーションの構成」

アプリケーションのコンテキストルート
Tomcatを使用する場合には、Tomcatのインストールフォルダ下のwebappsフォルダに、新たにServerChart_StartupGuideフォルダを作成します。

WEB-INF/classes/ServerChart_Sample.class
ServerChart_Sample.javaのコンパイル済みファイルを配置します。

WEB-INF/lib/jcschart.jar
JClass ServerChartのランタイムJARを配置します。

WEB-INF/web.xml
サーブレットのURLを指定するためのweb.xmlを配置します。

sample.xml
デザイナで作成したグラフタグオブジェクトファイルを配置します。

jcschart.jarは、製品のインストールルートのlibフォルダからコピーして使用してください。

4.4 アプリケーションの実行

Tomcat起動後、web.xmlで指定したディレクトリにWebブラウザでアクセスします。
» http://localhost:8080/ServerChart_StartupGuide/ServerChart_Sample

以下のようなページが表示されれば、アプリケーションの作成は成功です。

画像「実行画面」拡大

なお、アプリケーションの開発と実行について詳しくは、「導入ガイド」や「プログラマズガイド」をご覧ください。

5. 参考資料

JClass ServerChartには、オンラインヘルプをはじめとするさまざまなドキュメントが付属します。

製品付属のドキュメント

リリースノート

主な特長、新機能、動作環境、既知の不具合、システム要件など
<install_root>/readme.html

JClass導入ガイド

製品のインストールからアプリケーションの開発手順など
<install_root>/docs/getstarted/index.html

プログラマズガイド

デザイナの使い方、Javaアプリケーションの開発方法、プロパティの説明など
<install_root>/docs/schart/index.html

JClass ServerViews APIリファレンス

JClass ServerViews APIとして提供されるクラスやメソッドの詳細情報
<install_root>/docs/api/index.html

JClass ServerViews タグライブラリリファレンス

JClass ServerViews タグライブラリとして提供されるタグや属性の詳細情報
<install_root>/docs/tlddocs/index.html