新規JSPファイルの作成
続いて、jMakiを利用したページの作成を行いましょう。jMakiを利用するには、JSPファイルとしてページを作成します。ただし、通常のJSPファイルではなく、jMakiのためのタグなどを追加していなければいけません。このため、jMakiプラグインには、専用のJSPファイルを作成するためのウィザードが用意されており、これを使ってページを作成します。
- ［ファイル］-［新規］-［その他］を選択し、現れたダイアログで［jMaki Wizards］の［Stylized jMaki JSP (with CSS)］を選択してください。これが、jMakiを利用したページを生成するためのものです。
- 続いて、Stylized jMaki JSPの設定画面に進みます。ここでは、コンテナーに「/jmakiproj/WebContent」を指定し、ファイル名には「index.jsp」と入力をしておきます。その下にある「CSS Layout」が、初期状態で作成されるレイアウトのテンプレートです。ここで選択したレイアウトを元にページが生成されます。ここでは、［jmaki-standard-no-sidebars］を選ぶことにします。おそらく、これが最もシンプルなページレイアウトになるでしょう。
作成されたページは、初期状態で既に基本的なコードが生成されています。サーブレットコンテナを起動し、Webブラウザで「http://localhost:8080/jmakiproj/」にアクセスしてみましょう。簡単なページが表示されるはずです。
Webページ・エディターによるページデザイン
では、ページを修正してデザインをしてみましょう。作成した「index.jsp」を開くと、JSPエディターが起動し、編集が行えるようになります。ここでコードを記述してページを作成できます。
ただし、jMakiは「AJAXを利用したリッチなGUI」を簡単に作成できるというのが最大の利点ですから、自分でタグを手書きしていたのではあまりその恩恵を感じられないでしょう。ここでは、「Webページ・エディター」を利用することにします。プロジェクト・エクスプローラーから、作成した「index.jsp」を右クリックし、［アプリケーションから開く］-［Webページ・エディター］を選択してください。
Webページ・エディターは、HTMLやJSPのページをマウス操作でデザインできる簡易ビジュアルデザイナーです。初期状態では、エディターの上部にページのデザインが表示され、下部にソースコードが表示されます。デザイン表示の右端には「パレット」という表示があり、これをクリックするとパレットが現れ、各種のコンポーネントをそこから選んで配置できるようになっています。
Webページ・エディターはマウス操作でコンポーネントの位置や大きさなどを調整するのが非常に簡単です。ただし、これだけですべてできるというわけでもありません。後述しますが、通常のJSPエディターを使った方が便利な点もあるのです。Eclipseでは、1つのファイルを複数のエディタで開くことができますから、両方のエディタを開いて、必要に応じて切り替えながら使うのが良いでしょう。
パレットを見ると、jMaki関連の項目が多数追加されていることが分かります。ここから、jMakiのコンポーネントをページに配置していくわけです。ただし、これらは、各種コンポーネントを入れる「入れ物」的なタグです。実際にコンポーネント（jMakiでは、ウィジェットと呼びます）を組み込んだり、それを呼び出すタグを追加したりする作業も必要となります。
