JSONフォームの紹介

1概要

この連載のリンク:/Introduction-to-json-schema-in-java[最初の記事]では、 JSON Schema の概念と、それを使用して JSONの形式と構造を検証する方法を紹介しました。オブジェクト

この記事では、 JSON と__JSON Schemaの機能を利用してフォームベースのWeb UIを作成する方法を説明します。

目標を達成するために、 JSON Forms というフレームワークを使用します。カスタマイズ可能なフォームを作成するために手作業でデータバインディングのためのHTMLテンプレートとJavascriptを書く必要性を排除します。

フォームはUIフレームワークでレンダリングされます。現在はAngularJSに基づいています。

2 JSONフォームのコンポーネント

フォームを作成するには、2つの主要コンポーネントを定義する必要があります。

最初のコンポーネントは data schema です。これは、UIに表示される基礎となるデータ(オブジェクトタイプとそのプロパティ)を定義します。

この場合、リンクで使用した JSONスキーマ を使用できます。

{
    "$schema": "http://json-schema.org/draft-04/schema#",
    "title": "Product",
    "description": "A product from the catalog",
    "type": "object",
    "properties": {
        "id": {
            "description": "The unique identifier for a product",
            "type": "integer"
        },
        "name": {
            "description": "Name of the product",
            "type": "string"
        },
        "price": {
            "type": "number",
            "minimum": 0,
            "exclusiveMinimum": true
        }
    },
    "required":["id", "name", "price"]}

ご覧のとおり、 JSON Object には、 id name 、および price という3つのプロパティがあります。それぞれが名前でラベル付けされたフォームフィールドになります。

各プロパティにもいくつかの属性があります。 type 属性は、入力フィールドの type としてフレームワークによって変換されます。

priceプロパティ専用の minimum exclusiveMinimum 属性は、フォームの検証時にその入力フィールドの値が0より大きくなければならないことをフレームワークに伝えます。

最後に、 required プロパティ、すべてのプロパティは、すべてのフォームフィールドに入力する必要があることを指定します。

2番目の要素は UI schema です。フォームのレイアウトと data schema のどのプロパティをコントロールとしてレンダリングするかを記述します。

{
    "type": "HorizontalLayout",
    "elements":[        {
            "type": "Control",
            "scope": { "$ref": "#/properties/id" }
        },
        {
            "type": "Control",
            "scope": { "$ref": "#/properties/name" }
        },
        {
            "type": "Control",
            "scope": { "$ref": "#/properties/price" }
        },
   ]}
  • type ** プロパティは、フォームフィールドがフォーム内で順序付けられるように定義します。この場合は、水平方向を選択しました。

また、 UI Schema は、データスキーマのどのプロパティをフォームフィールドとして表示するかを定義します。これは elements 配列の Control 要素です。

最後に、 Controls scope プロパティ __、 によって data schema__を直接参照するので、データ型などのデータプロパティの指定を複製する必要はありません。

3 AngularJSでJSONフォームを使用する

作成された data schema および UI schema は実行時に解釈されます。つまり、いつであり、AngularJSベースのUIに変換されます。これは、データバインディング、検証など、すでに完全に機能しています。

それでは、AngularJSベースのWebアプリケーション内にJSONフォームを埋め込む方法を見てみましょう。

** 3.1. プロジェクトを設定する

**

プロジェクトをセットアップするための前提条件として、 node.js がマシンにインストールされている必要があります。インストールしていない場合は、https://nodejs.org/[公式サイト]の指示に従うことができます。

node.js には、 npm も付属しています。これは、JSONフォームライブラリとその他の必要な依存関係をインストールするためのパッケージマネージャです。

{
    "name": "jsonforms-intro",
    "description": "Introduction to JSONForms",
    "version": "0.0.1",
    "license": "MIT",
    "dependencies": {
         "typings": "0.6.5",
         "jsonforms": "0.0.19",
         "bootstrap": "3.3.6"
     }
}

詳細については、https://www.npmjs.com/package/jsonforms[jsonforms npm’s page]を参照してください。

** 4ビューを定義します+

**

フォームを表示するHTMLページを定義しましょう。

このページでは、 jsonforms.js ライブラリをインポートし、専用のAngularJSディレクティブ jsonforms を使用してフォームを埋め込む必要があります。

<!DOCTYPE html>
<html ng-app="jsonforms-intro">
<head>
    <title>Introduction to JSONForms</title>
    <script src="node__modules/jsonforms/dist/jsonforms.js"
      type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/schema.js" type="text/javascript"></script>
    <script src="js/ui-schema.js" type="text/javascript"></script>
</head>
<body>
    <div class="container" ng-controller="MyController">
        <div class="row" id="demo">
            <div class="col-sm-12">
                <div class="panel-primary panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><strong>Introduction
                          to JSONForms</strong></h3>
                    </div>
                    <div class="panel-body jsf">
                        Bound data: {{data}}
                        <jsonforms schema="schema"
                          ui-schema="uiSchema" data="data"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

このディレクティブのパラメータとして、上で定義された dataスキーマと UIスキーマ、および表示される data を含む JSON object を指す必要があります。

** 5 AngularJSコントローラ

**

AngularJSアプリケーションでは、ディレクティブから必要な値は通常、コントローラによって提供されます。

app.controller('MyController',['$scope', 'Schema', 'UISchema',
  function($scope, Schema, UISchema) {

    $scope.schema = Schema;
    $scope.uiSchema = UISchema;
    $scope.data = {
        "id": 1,
        "name": "Lampshade",
        "price": 1.85
    };
}]);

** 6. アプリモジュール+

**

次に、appモジュールに jsonforms を挿入する必要があります。

var app = angular.module('jsonforms-intro',['jsonforms']);

** 7. フォームを表示する

**

上記で定義したHTMLページをブラウザで開くと、最初のJSONFormが表示されます。

リンク:/uploads/JSONForms-1024x159.png[]

8結論

この記事では JSONForms ライブラリーを使用してUIフォームを作成する方法を説明します。

data schema UI schema を組み合わせることで、手動でデータをバインドするためのHTMLテンプレートとJavaScriptを記述する必要がなくなります。

上の例はhttps://github.com/eugenp/tutorials/tree/master/json[GitHubプロジェクト]にあります。

前の投稿:Java Weekly、第245号
次の投稿:JavaでHashMapを初期化する