JSONフォームの紹介

JSONFormsの概要

1. 概要

このシリーズのfirst articleでは、JSON Schemaの概念と、それを使用してJSON Objectの形式と構造を検証する方法を紹介しました。

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

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

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

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

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

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

この場合、previous articleで使用した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より大きくなければならないことをフレームワークに通知します。

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

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のobtained by definingです。

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

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

作成されたdata schemaとUI schemaは、実行時に解釈されます。実行時は、when the web page that contains the form is displayed on the browser,が、データバインディング、検証などを含めてすでに完全に機能しているAngularJSベースのUIに変換されます。

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

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

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

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

[#result_box .short_text]＃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"
     }
}

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

詳細については、jsonforms npm’s pageを参照してください。

4. ビューを定義する

Now that we have all the needed libraries and dependencies,は、フォームを表示するhtmlページを定義しましょう。

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




    Introduction to JSONForms
    
    
    
    


    
        
            
                
                    
                        Introduction
                          to JSONForms
                    
                    
                        Bound data: {{data}}

このディレクティブのパラメーターとして、data schema and、UI schema defined above、および表示される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. アプリモジュール

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

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

7. フォームの表示

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

8. 結論

この記事では、we have seenライブラリを使用してUIフォームを作成する方法を説明します。 data schemaとUI schemaを組み合わせると、データバインディング用のHTMLテンプレートとJavascriptを手動で作成する必要がなくなります。

上記の例は、GitHub projectにあります。

TOC