スケジュール登録での「種別」の追加-登録画面の作成

本日はインターン4日目で、実践編に入りました。 実践編では、「スケジュール登録画面での種別欄の追加」について取り組むことにさせていただきました。

まずはじめに、本日取り組んだ結果について概要を説明します。 今回は、スケジュール登録画面に「種別」欄を追加した後、ラジオボタンを配置して「出張」「休暇」などを選択できるようにしました。よって見た目だけは出来ましたが、肝心の中身がない状態です。

次に、本日の取り組みについて詳しく説明します。 最初は実践編のテーマで使うスケジュール登録画面がどのようなファイルを参照しているのか、Chromeの「要素の検証」ボタンで調べました。その結果、 /aipo/portlets/schedule/src/main/java/com/aimluck/eip/modules/screens/ScheduleFormScreen.java を利用していることが分かり、さらにこのファイル内部で /aipo/portlets/schedule/src/main/webapp/WEB-INF/templates/vm/portlets/html/ja/ajax-schedule-form.vm を参照していることも分かったので、中身がどんな構造をしているのか暫く見ていました。ちなみに前回は/ja/でない方のファイルを開いてしまって時間をロスしたので、しっかり確認しました。 スケジュール登録画面では、「種別」欄は「内容」と「公開」の間に置くのが適当だなと思ったので先ほどのvmファイル内の220行目付近の「内容」について記述している場所の下に

#ALtdcaption($!result.getFieldName("classification"))

を記述しました。このままではまだ何も表示出来ないので、getFieldNameで参照する /aipo/portlets/schedule/src/main/java/com/aimluck/eip/schedule/ScheduleFormData.java に

  private ALStringField classification;

    // 種別
    classification = new ALStringField();
    classification.setFieldName(ALLocalizationUtils
     .getl10n("SCHEDULE_CLASSIFICATION"));
    classification.setTrim(false);

  /**
   * @return classification
   */
  public ALStringField getClassification() {
    return classification;
  }

  /**
   * @param classification
   *          セットする classification
   */
  public void setClassification(ALStringField classification) {
    this.classification = classification;
  }

を記述し「種別」項目の表示が行えるようにしました。 また、ラジオボタンを配置するようにしたいので、先ほどのvmファイル /aipo/portlets/schedule/src/main/webapp/WEB-INF/templates/vm/portlets/html/ja/ajax-schedule-form.vm の、

  private ALStringField classification;

の下にさらに

#ALtditemheader()
<p><input name="classification" type="radio" value="S" >$l10n.SCHEDULE_BUSINESS_TRIP</p>
<p><input name="classification" type="radio" value="G" >$l10n.SCHEDULE_GO_STRAIGHT</p>
<p><input name="classification" type="radio" value="H" >$l10n.SCHEDULE_RETURNING_HOME_DIRECTLY</p>
<p><input name="classification" type="radio" value="Y" >$l10n.SCHEDULE_HOLIDAY</p>
<p><input name="classification" type="radio" value="T" >$l10n.SCHEDULE_LATE</p>
#ALtditemfooter()

を追加しました。また、SCHEDULE_BUSINESS_TRIPなどはまだ定義していないので、

SCHEDULE_CLASSIFICATION=種別
SCHEDULE_BUSINESS_TRIP=出張
SCHEDULE_GO_STRAIGHT=直行
SCHEDULE_RETURNING_HOME_DIRECTLY=直帰
SCHEDULE_HOLIDAY=休暇
SCHEDULE_LATE=遅刻

のように定義しました。 これで今日のところまでは機能が作れました。