カテゴリー: Windows

画面でボタン押下時にモーダルダイアログを表示し、
GoogleChartsを利用し、グラフを表示します。

• 画面の処理
  ボタンにIDを追加する。

  <button id="bsButton" type="button" class="btn btn-danger">グラフ表示</button>
  

  モーダルダイアログの表示領域を設定する。

  <!-- Chart Create Modal -->
  <div th:fragment="chart-create-modal">
    <div class="modal fade bs-example-modal-lg" id="myModal" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h3 class="modal-title" id="myModalLabel">タイトル</h3>
          </div>
          <div class="modal-body">
            <div id="chart_div" style="width: 400px; height: 400px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  

  JavaScriptでサーバー側からデータ取得処理を呼び出し
  GoogleのAPIにデータを渡します。

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
  google.load("visualization", "1", {
    packages : [ "corechart" ]
  });
  <!--
  $(document).ready(function() {
    $("#bsButton").click(showChart);
  });
  
  function showChart() {
    $.post(
      '/sample/showChart', // URL
      {},                  // Userデータ
      function(result) {
        $("#myModalLabel").html("テストグラフ");
        $('#myModal').modal('show');
        var data = google.visualization.arrayToDataTable(result);
        var options = {
          title : 'テストグラフタイトル',
          vAxis : {title : "縦座標"},
          hAxis : {title : "横座標"},
          seriesType : "bars",
          series : {5 : {type : "line"}}
        };
        var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      },                   // 成功時のコールバック
      "json"               // JSON形式
    );
  }
  

• サーバの処理
  サーバー側からデータを取得しJSON形式で返します。

  @RequestMapping(value = "/showChart", method = RequestMethod.POST)
  @ResponseBody
  public Object[][] showChart(WebRequest request) {
      int rows = 3;
      int cols = 6;
      Object[][] result = new Object[rows][cols];
      int row=0, col=0;
      // result配列にヘッダとデータを設定
      return result;
  }
  

SpringMVCでバリデーションチェックを実施します。
例として、作業時間入力用のクラスがあるとして、それを複数所持するListがあるとし、
JSPでそのListをループし、作業時間入力レコードを複数表示およびチェックします。

• バリデーションチェックのjarファイル追加
  「【SpringMVC設定】ファイルその４」を参考にpom.xmlにjarファイルを追加する。

• アノテーション追加
  作業時間入力用のクラスは全て必須項目とするため、「@NotNull」を追加する。

  public class DayTimeWork implements Serializable {
      private static final long serialVersionUID = 1L;
  
      @NotNull
      private String ankenNo;
      @NotNull
      private String startTime;
      @NotNull
      private String endTime;
  
      アクセサメソッドは省略。
  }
  

  作業時間入力用のクラスを保持するListには「@Valid」を追加する。
  「@Valid」はネストしたクラスも検証対象とする場合、追加します。

  public class DayTime implements Serializable {
      @Valid
      private List<DayTimeWork> dayTimeWork;
  
      アクセサメソッドは省略。
  }
  

• コントローラーへの設定追加
  Javaコントローラーにバリデーションチェックを実施するための設定を追加する。
  「@Validated」の次の項目にBindingResultを記載しないと
  実行時にValidationExceptionが発生する。

  
  @Controller
  public class InputController {
  
      @InitBinder
      public void initBinder(WebDataBinder binder) {
          // bind empty strings as null
          binder.registerCustomEditor(String.class, new StringTrimmerEditor(true));
      }
  
      @RequestMapping(value = "/updateDayTime", method = RequestMethod.POST)
      public String updateDayTime(
              @ModelAttribute(value = "dayTime") DayTime dayTime, 
              final @Validated DayTime inputDayTime, 
              BindingResult result, 
              Model model) {
          // 処理省略
      }
  }
  

• JSPへの設定追加
  JSPでバリデーションチェック結果を取得する。
  Thymeleafのタグを利用し、全項目内でエラーが1つでもあれば、
  変数errとしてエラーを取得し、表示しています。

  <form class="form-horizontal" action="#" th:action="@{/updateDayTime}" th:object="${dayTime}" method="post">
  <fieldset>
    <ul th:if="${#fields.hasErrors('*')}">
      <li th:each="err : ${#fields.errors('*')}" th:text="${err}">Input is incorrect</li>
    </ul>
  </fieldset>
  </form>
  

  Thymeleafのタグを利用し、エラー項目のテキストボックスの枠を赤くしたり、
  入力がない場合、placeholderで「案件番号」という文字を初期表示することも可能。

  <form class="form-horizontal" action="#" th:action="@{/updateDayTime}" th:object="${dayTime}" method="post">
    <table class="table">
      <!-- 処理省略 -->
      <tr th:each="vc, row : *{dayTimeWork}" >
        <td th:class="${#fields.hasErrors('dayTimeWork[__${row.index}__].ankenNo')}? has-error"  align="center">
        <input type="text" th:field="*{dayTimeWork[__${row.index}__].ankenNo}" placeholder="案件番号" class="form-control" />
        </td>
      </tr>
    </table>
  </form>
  

JSPではサーブレット側の処理を記載していないと
値が渡せないので、画面側のデザインが値ありで確認しにくかったりしていましたが、
Thymeleafでは値がある場合、ない場合の動作を切り分けられる点、
また便利なタグが多い点から利用してみます。

• src/main/webapp/WEB-INF/spring/appServlet/servlet-context.xml
  • コントローラーの処理終了後に呼び出される画面用ファイルの指定
    この部分を変更します。

    【変更前】

    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      <beans:property name="prefix" value="/WEB-INF/views/" />
      <beans:property name="suffix" value=".jsp" />
    </beans:bean>
    

    【変更後】

    <beans:bean id="templateResolver" class="org.thymeleaf.templateresolver.ServletContextTemplateResolver">
      <beans:property name="prefix" value="/WEB-INF/templates/" />
      <beans:property name="suffix" value=".html" />
      <beans:property name="templateMode" value="HTML5" />
    </beans:bean>
    
    <beans:bean id="templateEngine" class="org.thymeleaf.spring3.SpringTemplateEngine">
      <beans:property name="templateResolver" ref="templateResolver" />
    </beans:bean>
    
    <beans:bean class="org.thymeleaf.spring3.view.ThymeleafViewResolver">
      <beans:property name="characterEncoding" value="UTF-8" />
      <beans:property name="templateEngine" ref="templateEngine" />
    </beans:bean>
    

• pom.xml
  「dependencies」タグの中に下記内容を追加します。
  • Thymeleafライブラリー

    <!-- Thymeleaf -->
    <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf-spring3</artifactId>
      <version>2.1.2.RELEASE</version>
    </dependency>
    

• pom.xml
  拡張設定の内容を記載します。
  前回の設定と同様に「dependencies」タグの中に下記内容を記載していきます。
  • バリデーションチェックライブラリー

    <!-- Validator -->
    <dependency>
      <groupId>javax.validation</groupId>
      <artifactId>validation-api</artifactId>
      <version>1.0.0.GA</version>
    </dependency>
    <dependency>
      <groupId>org.hibernate</groupId>
      <artifactId>hibernate-validator</artifactId>
      <version>4.3.1.Final</version>
    </dependency>
    

  • JavaオブジェクトをJSON形式に変換しGoogleAPIに渡すライブラリー

    <!-- Jacson -->
    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-core-asl</artifactId>
      <version>1.6.4</version>
    </dependency>
    <dependency>
      <groupId>org.codehaus.jackson</groupId>
      <artifactId>jackson-mapper-asl</artifactId>
      <version>1.6.4</version>
    </dependency>
    <!-- GoogleAPI -->
    <dependency>
      <groupId>com.googlecode.json-simple</groupId>
      <artifactId>json-simple</artifactId>
      <version>1.1</version>
    </dependency>
    

  • JUnitライブラリー

    <!-- JUnit -->
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.7</version>
      <scope>test</scope>
    </dependency>