WebUIのデバッグ方法と新規追加

CRM／ERP

技術解説

連載 :

オープンソースERP「Adempiere」を使いこなす

2011年6月24日(金)

久保田大輔

新しくWebUIを追加する方法

次に、新しくWebUIを追加する方法について説明します。

Adempiereにはアプリケーションサーバーを起動するとアクセスできるURLがいくつかあり、それらのファイルはソースコード上では、複数のフォルダに分かれています。

例えば、サーバー名がcomputer1だったとすると、

http://computer1/admin/ はserverRootフォルダ（アプリケーションサーバーのトップページ）
http://computer1/webui/ はzkwebuiフォルダ（zkのWebUI）
http://computer1/adempiere/ はserverAppsフォルダ（HTML版のWebUI）

のようになっています。

Adempiereには、JavaクライアントのUIと、zkというオープンソースのフレームワークを使ったWebUIがあります。zkのWebUIは、後から加えられる形で開発されました。

今回は新しくWebUIを追加する準備段階の、URLのパスを追加する方法を説明します。この方法で機能を実装すれば、HTML5版のUIやmobile版のUIを作ることができます。
この記事では、http://computer1/html5/　というURLにダミーの開始ページを作成してみます。

新しくWebUIを追加する方法

まず、Adempiereプロジェクトのフォルダにhtml5というフォルダを作成します。

図6：「html5フォルダ」を作成する（クリックで拡大）

html5フォルダには、

index.htmlファイル
build.xmlファイル
WEB-INFフォルダ
META-INFフォルダ

を作成します。

index.htmlの作成

html5フォルダの中にindex.htmlを作成してください。

index.htmlの中身は以下のようにしてください。

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>HTML5サンプル</title>
  </head>
  <body>
  <article>
  <header>
  <h1>HTML5のページ</h1>
  </header>
  <p>これはHTML5のページです。</p>
  </article>
  </body>
</html>

index.htmlをUTF-8で保存してください。

build.xmlの作成

次にbuild.xmlを作成します。build.xmlは、zkwebuiのbuild.xmlをコピーして修正します。

zkwebuiフォルダのbuild.xmlをhtml5フォルダコピーして、以下の修正をしてください。
修正は3箇所です。

6行目

→

18行目

→

81行目、82行目
WEB-INF/lib/*-sources.jar,
**/test.zul"
→ WEB-INF/lib/*-sources.jar"

コメント部分の修正も含めた差分は以下の通りです。

## 開始 ##
  3c3
  < <!-- Zk Ajax UI (Web UI)                               -->
  ---
  > <!-- HTML5 Template Sample                               -->
  6c6
  < <project name="ZkWebUI" default="war" basedir=".">
  ---
  > <project name="HTML5" default="war" basedir=".">
  8c8
  < 	    This buildfile is used to build the Zk WebUI client.
  ---
  > 	    This buildfile is used to build the HTML5 Sample.
  18c18
  < 	<property name="war.name"	value="webui"/>
  ---
  > 	<property name="war.name"	value="html5"/>
  64c64
  < 		<echo message="=========== Build Zk Ajax UI ==========="/>
  ---
  > 		<echo message="=========== Build HTML5 Web UI ==========="/>
  81,82c81
  < 		      										WEB-INF/lib/*-sources.jar,
  < 		      										**/test.zul"
  ---
  > 		      										WEB-INF/lib/*-sources.jar"
  ## 終了 ##