[Java][JHipster]初期表示値を設定する

はじめに

前回は(主に)サーバ側でのバリデーションチェックについて記述しました。今回はクライアント側の修正で、画面に初期表示値を定義する方法について書きたいと思います。

今回実装する機能について

Scaffoldで作成したArticleの登録画面の「Date」欄に初期表示値として現在日時を表示する機能を追加します。画面上では以下のようになります。

尚、前回と前々回はクライアント側のフレームワークにAngular2を使用しましたが、今回はAngular1を使用します。JHipsterのプロジェクトを作り直したので、その時のコマンドを載せておきます。(初回のウィザードの「(12/15) Which *Framework* would you like to use for the client?」にて「Angular1.x」を選択するところが違うだけです。)

$ yo jhipster
 
        ██╗ ██╗   ██╗ ████████╗ ███████╗   ██████╗ ████████╗ ████████╗ ███████╗
        ██║ ██║   ██║ ╚══██╔══╝ ██╔═══██╗ ██╔════╝ ╚══██╔══╝ ██╔═════╝ ██╔═══██╗
        ██║ ████████║    ██║    ███████╔╝ ╚█████╗     ██║    ██████╗   ███████╔╝
  ██╗   ██║ ██╔═══██║    ██║    ██╔════╝   ╚═══██╗    ██║    ██╔═══╝   ██╔══██║
  ╚██████╔╝ ██║   ██║ ████████╗ ██║       ██████╔╝    ██║    ████████╗ ██║  ╚██╗
   ╚═════╝  ╚═╝   ╚═╝ ╚═══════╝ ╚═╝       ╚═════╝     ╚═╝    ╚═══════╝ ╚═╝   ╚═╝

                            https://jhipster.github.io

(中略)

? (1/15) Which *type* of application would you like to create? Monolithic application (recommended for simple projects)
? (2/15) What is the base name of your application? jhipsterAngularSample
? (3/15) Would you like to install other generators from the JHipster Marketplace? No
? (4/15) What is your default Java package name? org.jhipster
? (5/15) Which *type* of authentication would you like to use? JWT authentication (stateless, with a token)
? (6/15) Which *type* of database would you like to use? SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle, MSSQL)
? (7/15) Which *production* database would you like to use? MySQL
? (8/15) Which *development* database would you like to use? H2 with disk-based persistence
? (9/15) Do you want to use Hibernate 2nd level cache? Yes, with ehcache (local cache, for a single node)
? (10/15) Would you like to use Maven or Gradle for building the backend? Gradle
? (11/15) Which other technologies would you like to use? (Press <space> to select, <a> to toggle all, <i> to inverse selection)
? (12/15) Which *Framework* would you like to use for the client? AngularJS 1.x
? (13/15) Would you like to use the LibSass stylesheet preprocessor for your CSS? Yes
? (14/15) Would you like to enable internationalization support? Yes
? Please choose the native language of the application? English
? Please choose additional languages to install Japanese
? (15/15) Besides JUnit and Karma, which testing frameworks would you like to use? Gatling, Protractor

初期表示値の実装

クライアントのソースはJHipsterでは「/src/main/webapp」内にあるようです。今回は画面の初期表示時に起動するコントローラのソースを修正しました。

/src/main/webapp/app/entities/article/article-dialog.controller.js

(function() {
    'use strict';

    angular
        .module('jhipsterSimpleBlogApp')
        .controller('ArticleDialogController', ArticleDialogController);

    ArticleDialogController.$inject = ['$timeout', '$scope', '$stateParams', '$uibModalInstance', 'DataUtils', 'entity', 'Article', 'User'];

    function ArticleDialogController ($timeout, $scope, $stateParams, $uibModalInstance, DataUtils, entity, Article, User) {
        var vm = this;

        vm.article = entity;
        vm.clear = clear;
        vm.datePickerOpenStatus = {};
        vm.openCalendar = openCalendar;
        vm.byteSize = DataUtils.byteSize;
        vm.openFile = DataUtils.openFile;
        vm.save = save;
        vm.users = User.query();
        vm.init = init();

        function init () {
            if (vm.article.id === null) {
                vm.article.date = new Date();
            }
        }

        $timeout(function (){
            angular.element('.form-group:eq(1)>input').focus();
        });

        function clear () {
            $uibModalInstance.dismiss('cancel');
        }

        function save () {
            vm.isSaving = true;
            if (vm.article.id !== null) {
                Article.update(vm.article, onSaveSuccess, onSaveError);
            } else {
                Article.save(vm.article, onSaveSuccess, onSaveError);
            }
        }

        function onSaveSuccess (result) {
            $scope.$emit('jhipsterSimpleBlogApp:articleUpdate', result);
            $uibModalInstance.close(result);
            vm.isSaving = false;
        }

        function onSaveError () {
            vm.isSaving = false;
        }

        vm.datePickerOpenStatus.date = false;

        function openCalendar (date) {
            vm.datePickerOpenStatus[date] = true;
        }
    }
})();

ハイライトしてある行を追加することで初期表示時に日付を出すようにしました。24行目で画面が初期表示 or 既存データの表示なのかを判定します。また25行目ではDate型のオブジェクトを設定していることに注意してください。現在日時の文字列を設定しても画面には表示されません(これに小一時間悩みました。参考：Initializing the date on a datetimepicker via the model)。

まとめ

前回と同様、Scaffoldで作成されたプログラムに少し修正を行うだけで実装することができました。引き続きJHipsterについて調べていこうと思います。