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

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"
  ## 終了 ##

adempiere.jp

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています