詳細画面でサムネイルを表示させる

URL入力欄に”$!result.Url”というソースが表示されているのを修正するところから作業を再開しました。 ../ajax-test-form.vmや../TestFormData.javaの中で記述ミスがないか探してみると、../TestFormData.javaに記述ミスを発見し修正。確認すると正常に表示されました。このようなケアレスミスには気をつけたいです。 今日は、一覧画面でURLをリンク付きで表示する課題と詳細画面でサムネイルを表示させる課題に取り組みました。サムネイルの方はなかなか上手くいきませんでしたが、最終的に実装させることが出来ました。

■詳細画面でサムネイルを表示させる

portlets/test/src/main/webapp/WEB-INF/templates/vm/portlets/html/ajax-test-detial.vm

#ALtdcaption($l10n.TODO_SETFIELDNAME_THUMBNAIL)
#ALtditemheader()
<img src="http://capture.heartrails.com/free?$!result.Detail.Url" width="200" height="300" />
#ALtditemfooter()

war/src/main/resources/com/aimluck/eip/modules/localization/AipoLocalization_ja.properties キャプション用の文字

TODO_SETFIELDNAME_THUMBNAIL=サムネイル

このように記述したところ、$!result.Detail.Urlが読み込まれずうまく表示させられませんでした。 そこで、サムネイル画像を呼び出すURL(＜img src=”サムネイルURL”・・・＞)を書き出すjavascriptを用意してみました。

#ALtditemheader()
      <script language="JavaScript" type="text/javascript">
      　var link1 = "http://capture.heartrails.com/free?";
      　var link2 = "$!result.Detail.Url";
      　var thumb_url = link1 + link2;

      　function(){
      　document.getElementById(test_thumbnail).src = thumb_url;
      　}
      </script>
<img id="test_thumbnail" src="#" width="200" height="300" /></noscript>
#ALtditemfooter()

以上のように記述しましたがサムネイル画像が表示されません。原因を調べた結果$!result.Detail.Urlに自動リンクとを挿入するタグが含まれていることがわかり、portlets/test/src/main/java/com/aimluck/eip/test/TestResultData.javaに入力されたURLをテキストのままで返すメソッドを追加し、書き換えたところ上手くいきました。javascriptは必要ありませんでした。

  public String getUrl2() {
        return url.getValue();
      }

portlets/test/src/main/webapp/WEB-INF/templates/vm/portlets/html/ajax-test-detial.vm

#ALtdcaption($l10n.TODO_SETFIELDNAME_THUMBNAIL)
#ALtditemheader()
<img src="http://capture.heartrails.com/free?$!result.Detail.Url2" width="200" height="300" />
#ALtditemfooter()

これでインターン課題の基礎編が終了しました。次回からは実践編に取り組みたいと思います。