Testポートレットの一覧画面でURLを表示&詳細画面にサムネイルを表示する方法(インターン2日目)

インターン２日目の今日は、「基礎編:追加した入力項目の表示をしてみよう」から取り組みました。 あれ、Eclipseのworkspaceが違う、、ってことで/aipo/internに切り替え。

今回は一覧画面を編集したいので、要素の検証をして、ソースコードと照らし合わせながらファイル探すと、、 /test-portlet/portlets/test/src/main/webapp/WEB-INF/templates/vm/portlets/html/ja/ajax-test.vm が対応してるっぽい。

正直なんて書けばよいのか分からなかったので、ハックを参考にした。 なんとなく、タイトルと日付の間にURLを表示させたかったので、コードはシンプルに書けた。 portlets/test/src/main/webapp/WEB-INF/templates/vm/portlets/html/ja/ajax-test.vm　の

<

div>で囲まれた <a href=”javascript:void(0)〜略のすぐ下に、

<a href="$record.Url">$!record.Url</a>

を書く。(最初は文字列(ex:google.com)と入れて確認したが、URLは相対パスではなく絶対パスではないとダメだった。) (ちなみにこれはVelocityという書き方らしく、「!」を付けると、値が設定されてない場合は、「空」を返すらしい。) 後は、入力したURLを取得するだけっぽい。

portlets/test/src/main/java/com/aimluck/eip/test/TestResultData.java　の最初の方のuser_idの下に、

/** URL */
+  private ALStringField url;

を。 initField()というメソッドの中に、

url = new ALStringField();

を。 {}の外側に、

public String getUrl(){
+     return url.getValue();
+  }
+
+  public void setUrl(String string){
+     url.setValue(string);
+  }

を書いて定義してあげる。 最後に、portlets/test/src/main/java/com/aimluck/eip/test/TestSelectData.java　のgetResultData()に

rd.setUrl(record.getUrl());

を似たようなやつがあるとこに追加して完成。 (getResultDataDetail()では一覧か詳細かで全然違ってくるので気をつける！これにハマって２時間が経過していた、、)

要約すると、urlという名前の変数を、newで使えるようにして、URLをgetしてsetするためのメソッドを書いてるみたいな？ そしてgetUrl()で返ってくるString型の戻り値を、rd.setUrl()でセットしてあげてるみたいな。

次は、詳細画面にサムネイル表示を表示する方法

サムネイルという文字と、その隣にサムネイルがくれば良さそうなので、

portlets/test/src/main/webapp/WEB-INF/templates/vm/portlets/html/ja/ajax-test-detail.vm　に

#ALtdcaption($l10n.TODO_SETFIELDNAME_THUMBNAIL)
+#ALtditemheader()
+<a href="$result.Detail.Url"><img title="$result.Detail.Url" src="https://hacknote.jp/wp-content/plugins/lazy-load/images/1x1.trans.gif"       data-lazy-src="http://capture.heartrails.com/free/1429681233221?$result.Detail.Url"  alt="$result.Detail.Url" width="200" height="300" /><noscript><img title="$result.Detail.Url" src="http://capture.heartrails.com/free/1429681233221?$result.Detail.Url"  alt="$result.Detail.Url" width="200" height="300" /></noscript></a>
+#ALtditemfooter()

を書いて、ほぼ完成。(TODO_SETFIELDNAME_THUMBNAILはまだ定義してないのでこの時点ではエラーになる) サムネイル作成した時のURLの部分を、$result.Detail.Urlに変えただけで出来た。

後は、詳細画面に対しても値をセットしてあげないといけないので、portlets/test/src/main/java/com/aimluck/eip/test/TestSelectData.java　のgetResultDataDetail()に

rd.setUrl(record.getUrl());

を追加してあげるだけでほぼ完成。

さきほど、TODO_SETFIELDNAME_THUMBNAILと書いたので、war/src/main/resources/com/aimluck/eip/modules/localization/AipoLocalization_ja.properties　に

TODO_SETFIELDNAME_THUMBNAIL=サムネイル

と定義してあげれば完成！