第5回(最終回) サーバー連携

第5回(最終回) サーバー連携

連載最終回となる今回は、データグリッドとウェブアプリケーションを連携させ、データグリッドに表示させるデータをサーバーから受け取る仕組みを説明します。

前回までと比べ、JAVAやEclipseなどが登場するため、多少難しくなると思います。ただ、なるべく分かりやすく説明したいと思いますので、お付き合いくださいませ。

目次

  • 準備
  • Eclipseプロジェクト作成
  • サーバー側設定
  • JAVAクラス作成
  • 画面作成
  • 表示機能実装
  • 実行

作業開始

準備

今回の作業では、JAVA側のプログラムを作成する必要があるので、Eclipseを用意します。また、サーバーとクライアントを連携するために、DWR(Direct Web Remoting)というライブラリが必要になります。必要となるソフトウェアを下記にあげますので、ダウンロードして適当な場所に展開してください。

以上で準備は完了です。


Eclipseプロジェクト作成

Eclipseを起動して、今回使用するプロジェクトを作成しましょう。まずはメニューから、「ファイル>新規>プロジェクト」と進めます。
図1. 新規プロジェクトダイアログ

図1. 新規プロジェクトダイアログ

新規プロジェクトダイアログから、動的Webプロジェクトを選択して「次へ」ボタンをクリックします。

図2. 新規動的Webプロジェクトダイアログ

図2. 新規動的Webプロジェクトダイアログ

新規動的Webプロジェクトダイアログにてプロジェクト名に「Lesson05」を入力します。ターゲット・ランタイムは、準備で用意したTomcatを指定します(プルダウンにTomcat v6.0が表示されない場合は、隣の新規ボタンを押して作成してください)。そして、「完了」ボタンをクリックします。

作成されたプロジェクトの「WebContent/WEB-INF/lib」配下に、準備で用意したSpring Frameworkの「dist」配下にあるjar全てと、「dwr.jar」および「commons-logging-1.1.1.jar」をコピーします。

これで、Eclipseプロジェクト作成は完了です。


サーバー側設定

サーバー側がクライアントと連携できるようにするため、いくつかの設定を行います。
まずは、Spring FrameworkおよびDWRの設定をWebcontent/WEB-INF/web.xmlに記述します。

<?xml version="1.0" encoding="UTF-8>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>Lesson05</display-name>

  <context-param>
    <param-name>contextConfigLocation</param-name>
  <param-value>/WEB-INF/spring/*.xml</param-value>
  </context-param>
  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>org.directwebremoting.spring.DwrSpringServlet</servlet-class>
    <init-param>
        <param-name>debug</param-name>
        <param-value>true</param-value>
    </init-param>
    <init-param>
        <param-name>activeReverseAjaxEnabled</param-name>
        <param-value>true</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

続いて、JAVAとSpring Frameworkを関連付けるためのXMLファイルを作成します。Webcontent/WEB-INF配下に「spring」フォルダを作成し、その中に「applicationContext.xml」ファイルを作成します。applicationContext.xmlの中身は、後ほどの工程で説明しますので、今は作成するだけで良いです。

JAVAクラス作成

アプリケーションで使用するJAVAクラスを作成します。まずは、src配下に「examples.lesson05」パッケージを作成します。さらにその配下に、「view」「service(その配下にimpl)」「dto」パッケージをそれぞれ作成します。 最終的なパッケージ構成は、下記の通りとなります。

  src
    └ examples.lesson05
         ├ dto
         ├ service
         │   └ impl
         └ view

続いてクラスを作成します。なお、Lesson05Serviceだけはインターフェースを作成してください。view配下には「Lesson05View」、service配下には「Lesson05Service(impl配下には「Lesson05ServiceImpl」)」、dto配下には「Lesson05Dto」をそれぞれ作成します。 ここで、クラス作成は一旦中断します。後続の工程で、中身のコードを記述します。

画面作成

画面は、前回の記事(リンクを貼る)の準備編を参考に、Lesson04のファイルをLesson05用にコピーします。コピーしたものを、Webcontent配下にコピーします。最終的なディレクトリ構成は、下記の通りとなります。

  WebContent
    └ lesson05
         ├ codebase
         └ lesson05.html
表示機能実装

さて、ここからサーバー側とクライアントを連携するための機能を実装します。 まずは、サーバー側から実装を行います。Lesson05Dtoを、下記の通りに記述してください。

package examples.lesson05.dto;

import java.io.Serializable;

public class Lesson05Dto implements Serializable {

    /**
     * serialVersionUID.
     */
    private static final long serialVersionUID = 8099027348697290650L;

    private String id;
    
    private String name;
    
    private String description;

    /**
     * @return id
     */
    public String getId() {
        return id;
    }

    /**
     * @param id セットする id
     */
    public void setId(String id) {
        this.id = id;
    }

    /**
     * @return name
     */
    public String getName() {
        return name;
    }

    /**
     * @param name セットする name
     */
    public void setName(String name) {
        this.name = name;
    }

    /**
     * @return description
     */
    public String getDescription() {
        return description;
    }

    /**
     * @param description セットする description
     */
    public void setDescription(String description) {
        this.description = description;
    }
}
                

続いて、Lesson05Service と Lesson05ServiceImpl を、下記の通りに記述してください。


package examples.lesson05.service;

import java.util.List;

import examples.lesson05.dto.Lesson05Dto;

public interface Lesson05Service {

    List getList();

}
                

package examples.lesson05.service.impl;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Service;

import examples.lesson05.dto.Lesson05Dto;
import examples.lesson05.service.Lesson05Service;

@Service
public class Lesson05ServiceImpl implements Lesson05Service {

    @Override
    public List getList() {
        List result = new ArrayList();

        Lesson05Dto dto1 = new Lesson05Dto();
        dto1.setId("101");
        dto1.setName("山田太郎");
        dto1.setDescription("俳優");
        result.add(dto1);

        Lesson05Dto dto2 = new Lesson05Dto();
        dto2.setId("102");
        dto2.setName("鈴木一郎");
        dto2.setDescription("会社員");
        result.add(dto2);

        Lesson05Dto dto3 = new Lesson05Dto();
        dto3.setId("103");
        dto3.setName("斉藤花子");
        dto3.setDescription("フリーター");
        result.add(dto3);

        return result;
    }

}
                

最後に、Lesson05Viewを下記の通りに記述してください。


package examples.lesson05.view;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Component;

import examples.lesson05.dto.Lesson05Dto;
import examples.lesson05.service.Lesson05Service;

@Component
public class Lesson05View {

    @Resource
    private Lesson05Service service;

    public List getList() {
         return service.getList();
    }
}
                

次に、クライアントと連携するための設定を行います。作成しておいたapplicationContext.xmlを、下記の通りに編集します。


<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:dwr="http://www.directwebremoting.org/schema/spring-dwr"
    xmlns:context="http://www.springframework.org/schema/context"
    xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
    http://www.directwebremoting.org/schema/spring-dwr
    http://www.directwebremoting.org/schema/spring-dwr-2.0.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context-3.0.xsd">
    
    <context:component-scan base-package="examples.lesson05"/>
    
    <context:annotation-config/>
    
    <bean id="lesson05View" class="examples.lesson05.view.Lesson05View">
        <dwr:remote javascript="Lesson05">
            <dwr:include method="getList"/>
       </dwr:remote>
    </bean>
    
    <dwr:configuration>
        <dwr:convert type="bean" class="examples.lesson05.dto.Lesson05Dto"/>
    </dwr:configuration>
    
</beans>
                

次に、lesson05.htmlに記述されているJavaScriptの、loadメソッドを下記の通りに編集します。


※ 下記の三行を追加しておく
  <script type="text/javascript" src="../dwr/engine.js"></script>
  <script type="text/javascript" src="../dwr/util.js"></script>
  <script type="text/javascript" src="../dwr/interface/Lesson05View.js"></script>
                

    load : function() {
      var self = this;
      Lesson05View.getList(function(result) {
        var json = "";
        for (var i = 0; i < result.length; i++) {
          var dto = result[i];

          // JSONデータを作成する
          json += "{id: " + (i + 1) + "," +
            "data: [\"" + dto.id + "\",\"" + dto.name +
            "\",\"" + dto.description + "\"]},";
        }

        var grid = eval("({rows:[" + json.substring(0, json.lastIndexOf(",")) + "]})");
        self.mygrid.clearAll();
        self.mygrid.parse(grid, "json");
      });
    }
                

以上で、サーバー側とクライアント側双方の実装は完了です。お疲れさまでした。


実行

それでは、作成したアプリケーションを実行してみましょう。 Eclipseのサーバータブを開いて、実行するサーバーを追加します。 (サーバータブが表示されていない方は、ウィンドウ>ビューの表示>サーバーを選択して表示させます)

図3. サーバータブ

図3. サーバータブ

サーバータブの何もない白い箇所で右クリック(Macではコンテキストメニュー表示)して新規からサーバーを選択します。


図4. 新規サーバー

図4. 新規サーバー

「Tomcat v6.0 サーバー」を選択して「次へ」をクリックします。


図5. 新規サーバー

図5. 新規サーバー

使用可能欄に表示されているLesson05を選択して「追加 >」ボタンをクリックし、構成済み欄に移動させます。そして「完了」ボタンをクリックします 最後に、サーバータブに作成されたサーバーを右クリック(Macではコンテキストメニュー表示)し、開始をクリックします。サーバーが正常に起動すれば成功です。


それでは、起動したアプリケーションをブラウザで閲覧してみましょう。
ブラウザのアドレスバーに 「http://127.0.0.1:8080/Lesson05/lesson05/lesson05.html」 と入力して実行してみてください。下図のように表示されれば成功です。

図6. 完成した画面

図6. 完成した画面

正しく表示できなかった方は、ソースコードに誤りがないか確認してみてください。最後に、lesson05.htmlのソースコード全体を掲載しておきます。

<html>
<head>
  <title>Lesson05 - サーバー連携</title>
  <link rel="stylesheet" type="text/css" href="codebase/dhtmlxgrid.css">
  <script type="text/javascript" src="codebase/dhtmlxcommon.js"></script>
  <script type="text/javascript" src="codebase/dhtmlxgrid.js"></script>
  <script type="text/javascript" src="codebase/dhtmlxgridcell.js"></script>
  <script type="text/javascript" src="../dwr/engine.js"></script>
  <script type="text/javascript" src="../dwr/util.js"></script>
  <script type="text/javascript" src="../dwr/interface/ Lesson05View.js"></script>
  <script type="text/javascript">
  <!--
  var Lesson05 = function() {
  };

  Lesson05.prototype = {
    init : function() {
      this.mygrid = new dhtmlXGridObject("mygrid");
      this.mygrid.setImagePath("codebase/imgs/");
      this.mygrid.setHeader("ID,Name,Description");
      this.mygrid.setColTypes("ro,ro,ed");
      this.mygrid.setInitWidths("*,150,350");
      this.mygrid.setColAlign("right,left,left");
      this.mygrid.setColSorting("int,str,str");
      this.mygrid.setSkin("light");
      this.mygrid.init();
      this.mygrid.attachHeader("Multi-line&Colspan,#cspan,#cspan");
      this.mygrid.attachEvent("onRowSelect", function(id) {
        alert("Selected row id: " + id);
      });
    },

    load : function() {
      var self = this;
      Lesson05View.getList(function(result) {
        var json = "";
        for (var i = 0; i < result.length; i++) {
          var dto = result[i];

          // JSONデータを作成する
          json += "{id: " + (i + 1) + "," +
            "data: [\"" + dto.id + "\",\"" + dto.name +
            "\",\"" + dto.description + "\"]},";
        }

        var grid = eval("({rows:[" + json.substring(0, json.lastIndexOf(",")) + "]})");
        self.mygrid.clearAll();
        self.mygrid.parse(grid, "json");
      });
    }
  };

  window.onload = function() {
    var dataGrid = new Lesson05();
    dataGrid.init();
    dataGrid.load();
  };
  //-->
  </script>
</head>
<body>
<h1>Lesson05 - サーバー連携</h1>
<div id="mygrid" style="width:600px;height:150px;"></div>
</body>
</html>
                

おわりに

連載の第五回目はいかがでしたか? JAVA や Spring Framework、DWR など、これまでに触れられていなかったソフトウェアが出現して戸惑った方がいるかもしれません(逆に、知っていて物足りなかった方もいるかも?)。 今回登場したソフトウェアについて、さらに詳しく知りたい方は、下記のサイトを参考にするとよいでしょう。

さて、今回を持ちまして「データグリッドを使ったRichなWebインタフェースを開発する」の巻は終了です。約5ヶ月間にわたり連載させていただきましたが、根気よく付き合っていただいた読者の皆様、そしてこの連載を校正してウェブ化していただいた弊社スタッフに感謝したいと思います。 次回以降の連載は検討中ですが、皆様にとって有益になる情報をご提供出来ればと思います。それではまた!


おしまい



※.記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。

金融システムやさまざまな業務システム開発、ECサイトなどの各種Webサイト構築・開発、IC(RFID)を活用したシステム、技術者向けOJTやICタイムリコーダー等、システム開発に関わることならオープントーンにお任せください。