OpenLaszloとサーバーサイド連携

第3回

ファイルのアップロード

　OpenLaszloにはファイルのアップロードを簡単にするfileuploadクラスがあります。使用するときは、fileuploadクラスを継承した独自クラスを作成して使用することになります。

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas fontsize="15"
        font    ="MS UI Gothic"
        debug   ="false">

  <!-- fileuploadクラスは明示的にインクルードしないと使えない -->
  <include href="incubator/uploader/fileupload.lzx"/>

  <!-- ファイルのアップロードを実行するクラスの定義 -->
  <class name        ="myFileUpload"
         uploadenable="true"
         extends     ="fileupload">

    <button name="btnRequest" text="アップロード"/>
    <text name="stat" fgcolor="red"/>
    <simplelayout axis="x" spacing="5"/>

    <!-- アップロードボタンをクリックした時のイベントハンドラ -->
    <handler name     ="onclick"
             reference="btnRequest">
    <![CDATA[
      this.stat.clearText();
      this.browse();
    ]]>
    </handler>

    <!-- アップロードが成功したときに呼ばれるメソッド -->
    <method name="onComplete"
            args="fr">
    <![CDATA[
      this.stat.setAttribute('text', 'アップロードが完了しました。')
    ]]>
    </method>

    <!-- アップロード中に呼ばれるメソッド -->
    <method name="onProgress"
            args="fr, bytesLoaded, bytesTotal">
    <![CDATA[
      this.stat.addFormat('アップロード中...(%d / %d バイト)', bytesLoaded, bytesTotal);
    ]]>
    </method>

    <!-- アップロードするファイルを選択した時に呼ばれるメソッド -->
    <method name="onSelect"
            args="fr">
    <![CDATA[
      //アップロードの開始
      this.upload('http://localhost:8080/lps-4.3.0/my-apps/sample/upload.jsp');
    ]]>
    </method>

    <!-- アップロードするファイルの選択をキャンセルした時に呼ばれるメソッド -->
    <method name="onCancel">
    <![CDATA[
      this.stat.clearText();
    ]]>
    </method>

  </class>

  <myFileUpload/>

</canvas>

upload.jspのソース

<%@page pageEncoding="UTF-8"%>
<%@page contentType="text/html;charset=UTF-8"%>
<%@page import="com.oreilly.servlet.MultipartRequest"%>
<%@page import="java.io.File"%>
<%@page import="java.util.Enumeration"%>
<% 
  MultipartRequest multi = new MultipartRequest(request , "c:/" , "UTF-8");
  Enumeration e = multi.getFileNames();

  System.out.println("\n--- 受信したファイル ---");

  while (e.hasMoreElements()) {
    String name = (String)e.nextElement();
    String filename = multi.getFilesystemName(name);
    File file = multi.getFile(name);
    System.out.println("ファイル名：" + filename);
    System.out.println("サイズ ：" + file.length());
  }
%>

サンプルソースを実行した結果

　JSPでファイルを受信するときは、事前にcom.oreilly.servlet（Servlets.com）からcos.jarをダウンロードして$TOMCAT_HOME/common/libにコピーしてtomcatを再起動する必要があります。

　サンプルプログラムをswf9でコンパイルするとfileupload.lzxでコンパイルエラーが発生します。コンパイルエラーが発生した場合は、以下の２箇所を修正してリコンパイルしてください。

　修正1．fileupload.lzxの102行目。fileの宣言をif文の前に移動します。

変更前

100: <method name="progressHandler" args="event:ProgressEvent">
101:   if ($debug) {
102:     var file:FileReference = event.target cast FileReference;
103:     Debug.write(this, "got onProgress name=", file.name,
104:                 "bytesLoaded=", event.bytesLoaded, "bytesTotal=", event.bytesTotal);
105:   }
106:   this.onProgress(file, event.bytesLoaded, event.bytesTotal);
107: </method>

変更後

100: <method name="progressHandler" args="event:ProgressEvent">
101:   var file:FileReference = event.target cast FileReference;
102:   if ($debug) {
103:     Debug.write(this, "got onProgress name=", file.name,
104:                 "bytesLoaded=", event.bytesLoaded, "bytesTotal=", event.bytesTotal);
105:   }
106:   this.onProgress(file, event.bytesLoaded, event.bytesTotal);
107: </method>

　修正2．fileupload.lzxの139行目。fileの宣言をif文の前に移動します。

変更前

137: <method name="selectHandler" args="event:Event">
138:   if ($debug) {
139:     var file:FileReference = FileReference(event.target);
140:     Debug.write(this, "got onSelect", "name=", file.name);
141:   }
142:   this.onSelect(file);
143: </method>

変更後

137: <method name="selectHandler" args="event:Event">
138:   var file:FileReference = FileReference(event.target);
139:   if ($debug) {
140:     Debug.write(this, "got onSelect", "name=", file.name);
141:   }
142:   this.onSelect(file);
143: </method>

まとめ

　今回は、OpenLaszloとサーバーサイド連携について説明しました。サーバーサイド連携がXMLを利用して簡単に行えることがわかった思います。

　次回は、Googleマップを使用した簡単なサンプルプログラムの作成について説明する予定です。