CodeZine(コードジン)

特集ページ一覧

Struts 2にリッチUIを提供する「Struts2 jQueryプラグイン」

続・Struts 2入門(8)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/10/19 14:00
目次

リッチテキストエディタを利用する

 Struts 2 JQueryプラグインの2.2以降ではJQueryを利用したテキストエディタを同梱しています。このエディタはHTMLタグを生成する機能を備えており、もちろんスタイル指定や画像挿入などもサポートされています。バージョン2.2ではCKEditor、2.3ではTinymceが利用できます。まずは、これらはどういったものなのかをサンプルで見てみましょう。

  • Tinymceサンプル(http://127.0.0.1:8080/AjaxValidationSample/ajax/tinymce)
図5 Tinymceサンプルの出力画面
図5 Tinymceサンプルの出力画面
  • ckeditorサンプル(http://127.0.0.1:8080/AjaxValidationSample/ajax/ckeditor)
図6 CKEditorサンプルの出力画面
図6 CKEditorサンプルの出力画面

 これらのエディタを埋め込む手順は以下のとおりです。

  • (1)Struts 2 JQueryプラグインの追加ライブラリであるstruts2-jquery-richtext-plugin-2.3.1.jarを/WEB-INF/libへ配置する
  • (2)ヘッダ領域に<%@ taglib prefix="sjr" uri="/struts-jquery-richtext-tags"%>を記述する
  • (3)利用するテキストエディタのタグを記述する

 これだけです。では実装例を見てみましょう。

リスト8 ckeditor.jsp(抜粋)
  …(省略)…
<body>
  …(省略)…
    <s:form id="formValidate" theme="xhtml" cssClass="yform" action="echocheck">
        <!-- リッチテキストエディタ -->
        <sjr:ckeditor
           id="richtextEditor" name="model.echo" rows="10" cols="80" width="800"/>
        <!-- 送信ボタン -->
        <div class="type-button">
          <sj:submit targets="main" button="true" value="送信する" href="echocheck" />
        </div>
    </s:form>
  …(省略)…
</body>
</html>

 リッチテキストを利用するタグは、<sjr:ckeditor>または<sjr:tinymce>のどちらかになります。上記の例で、<sjr:ckeditor>を<sjr:tinymce>に切り替えるだけでエディタが変わります。もちろんそれぞれのエディタに特化した属性もありますので、詳細はCkeditorEditorならびにTinymceEditorを参照してください。

まとめ

 今回は簡単なフォーム作成画面を通して、Struts 2 jQueryプラグインの導入方法について解説しました。次回はStruts 2でJSONデータを取り扱うJSONプラグインについて解説します。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:続 Struts 2入門

もっと読む

著者プロフィール

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

  • WINGSプロジェクト 東 浩二(アズマ コウジ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5