JSONFormsの紹介

投稿日: 2019-10-18 2022-10-25
タグ: JSON

1. 概要

このシリーズの最初の記事では、 JSON Schema の概念と、それを使用してJSONオブジェクトの形式と構造を検証する方法を紹介しました。

この記事では、JSONおよびJSONスキーマの機能を活用してフォームベースのWebUIを構築する方法を説明します。

目標を達成するために、 JSONFormsと呼ばれるフレームワークを使用します。カスタマイズ可能なフォームを作成するために、データバインディング用のHTMLテンプレートとJavascriptを手動で作成する必要がなくなります。

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

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

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

最初のコンポーネントは、データスキーマで、UIに表示される基になるデータ（オブジェクトタイプとそのプロパティ）を定義します。

この場合、前の記事で使用した JSON Schema を使用して、データオブジェクト「Product」を記述できます。

{
    "$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として変換されます。

特に価格プロパティの属性minimum、 ExclusiveMinimum は、フォームの検証時に、その入力フィールドの値が0より大きくなければならないことをフレームワークに通知します。

最後に、必須プロパティには、すべてのプロパティ以前に定義されたが含まれ、すべてのフォームフィールドに入力する必要があることを指定します。

2番目のコンポーネントはUIスキーマで、フォームのレイアウトとデータスキーマのどのプロパティをコントロールとしてレンダリングするかを記述します。

{
    "type": "HorizontalLayout",
    "elements": [
        {
            "type": "Control",
            "scope": { "$ref": "#/properties/id" }
        },
        {
            "type": "Control",
            "scope": { "$ref": "#/properties/name" }
        },
        {
            "type": "Control",
            "scope": { "$ref": "#/properties/price" }
        },
    ]
}

type プロパティは、フォームフィールドがフォームで順序付けられることを定義します。この場合、水平方向のファッションを選択しました。

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

最後に、コントロールは、スコーププロパティ、によってデータスキーマを直接参照するため、データ型などのデータプロパティを指定できます。、複製する必要はありません。

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

作成されたデータスキーマとUIスキーマは実行時に解釈されます。実行時はフォームを含むWebページがブラウザに表示されたときに変換されます。 AngularJSベースのUI。データバインディング、検証などを含め、すでに完全に機能しています。

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

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

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

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

node.js をインストールしたら、 GitHub 、シェルを開き、webappフォルダーにcdします。このフォルダーには、特にpackage.jsonファイルが含まれています。プロジェクトに関するいくつかの情報が表示され、ほとんどの場合、ダウンロードする必要のある依存関係をnpmに通知します。 package、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"
     }
}

これで、 npminstallコマンドを入力できます。これにより、必要なすべてのライブラリのダウンロードが開始されます。ダウンロード後、これらのライブラリはnode_modulesフォルダ内にあります。

詳細については、jsonformsnpmのページを参照してください。

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>

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

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. アプリモジュール

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

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

7. フォームの表示

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

8. 結論

この記事では、 JSONFormsライブラリを使用してUIフォームを作成する方法を見てきました。 データスキーマとUIスキーマを組み合わせると、データバインディング用のHTMLテンプレートとJavascriptを手動で作成する必要がなくなります。

上記の例は、GitHubプロジェクトにあります。

getdocs

13036