Merge pull request #265 from edgarmueller/master

Replace 'replace' for A2 compatiblity; add intermediate divs for styling
eclipsesource · May 11, 2016 · a32ddae · a32ddae
2 parents 752e2f8 + 0ecbda2
commit a32ddae
Show file tree

Hide file tree

Showing 13 changed files with 65 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -15,6 +15,21 @@ create forms by leveraging the capabilities of JSON and JSON schema.
 * Build: `npm run build` (runs `tslint` as well)
 * Test: `npm run test`
 
+# Usage
+1. Install JSON Forms via `npm install jsonforms` and require it via `require('jsonforms')`
+2. Annotate the element, where you want to place a form, with a `jsf` class attribute.
+3. Render a form with the `jsonforms` element:
+
+The simplest example looks like this, where `schema`, `uiSchema` and `data` are 
+properties of a aliased controller named `vm`:
+
+```html 
+  <div class="jsf">
+    <jsonforms schema="vm.schema" ui-schema="vm.uiSchema" data="vm.data"/
+  </div>
+```
+
+
 # Continuous Integration
 The JSONForms project is build and tested via [Travis](https://travis-ci.org/). Coverage is documented by [Coveralls](https://coveralls.io).
 

diff --git a/examples/app/app.js b/examples/app/app.js
@@ -7,9 +7,9 @@ angular.module('makeithappen', [
     'jsonforms'
 ]).config(['$routeProvider',
     function($routeProvider) {
-        $routeProvider.when('/local', {
-            templateUrl: 'app/local/local.html',
-            controller: 'LocalController',
+        $routeProvider.when('/person', {
+            templateUrl: 'app/person/person.html',
+            controller: 'PersonController',
             controllerAs: 'vm'
         }).when('/editor', {
             templateUrl: 'app/editor/editor.html',
@@ -48,7 +48,7 @@ angular.module('makeithappen', [
             controller: 'ArraysController',
             controllerAs: 'vm'
         }).otherwise({
-            redirectTo: '/local'
+            redirectTo: '/person'
         });
     }
 ]);
diff --git a/examples/app/local/local.controller.js → examples/app/person/person.controller.js b/examples/app/local/local.controller.js → examples/app/person/person.controller.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('makeithappen').controller('LocalController', function() {
+angular.module('makeithappen').controller('PersonController', function() {
     var vm = this;
     vm.schema = {
         "type": "object",

diff --git a/examples/app/local/local.html → examples/app/person/person.html b/examples/app/local/local.html → examples/app/person/person.html
diff --git a/examples/embed-index.html → examples/index.html b/examples/embed-index.html → examples/index.html
@@ -42,7 +42,7 @@
     <script src="app/app.js" type="text/javascript"></script>
     <script src="app/index/index.controller.js" type="text/javascript"></script>
     <script src="app/editor/editor.controller.js" type="text/javascript"></script>
-    <script src="app/local/local.controller.js" type="text/javascript"></script>
+    <script src="app/person/person.controller.js" type="text/javascript"></script>
     <script src="app/default-ui/default-ui.controller.js" type="text/javascript"></script>
     <script src="app/default/default-schema.controller.js" type="text/javascript"></script>
     <script src="app/placeholder/placeholder.controller.js" type="text/javascript"></script>
@@ -70,7 +70,7 @@
                     <li class="dropdown">
                         <a ng-href="{{index.getPath()}}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select example<span class="caret"></span></a>
                         <ul class="dropdown-menu">
-                            <li ng-class="index.isActive('/local')"><a href="#/local">Person example</a></li>
+                            <li ng-class="index.isActive('/person')"><a href="#/person">Person example</a></li>
                             <li ng-class="index.isActive('/arrays')"><a href="#/arrays">Array controls</a></li>
                             <li ng-class="index.isActive('/editor')"><a href="#/editor">Live edit</a></li>
                             <li ng-class="index.isActive('/defaultui')"><a href="#/defaultui">Generated UI</a></li>

diff --git a/src/components/form/form-directive.ts b/src/components/form/form-directive.ts
@@ -154,7 +154,6 @@ export interface JsonFormsDirectiveScope extends ng.IScope {
 export class JsonFormsDirective implements ng.IDirective {
 
     restrict = 'E';
-    replace = true;
     template = require('./form.html');
     controller = FormController;
     controllerAs = 'vm';
@@ -204,11 +203,9 @@ export interface JsonFormsInnerDirectiveScope extends ng.IScope {
 export class JsonFormsInnerDirective implements ng.IDirective {
 
     restrict = 'E';
-    replace = true;
     template = require('./form.html');
     controller = InnerFormController;
     controllerAs = 'vm';
-    // we can't use bindToController because we want watchers
     bindToController = {
         uiSchema: '='
     };

diff --git a/src/components/renderers/controls/controls-directive.ts b/src/components/renderers/controls/controls-directive.ts
@@ -3,7 +3,6 @@ import './control.css';
 
 class ControlDirective implements ng.IDirective {
     restrict    = 'E';
-    replace     = true;
     transclude  = true;
     template = require('./control.html');
 }

diff --git a/src/components/renderers/layouts/categories/categorization-directive.ts b/src/components/renderers/layouts/categories/categorization-directive.ts
@@ -6,23 +6,23 @@ import {IUISchemaElement} from '../../../../jsonforms';
 class CategorizationDirective implements ng.IDirective {
     restrict = 'E';
     template = `
-    <jsonforms-layout>
-        <div class="row">
-            <div class="col-sm-100">
-                <uib-tabset>
-                    <uib-tab
-                        heading="{{category.label}}"
-                        ng-repeat="category in vm.uiSchema.elements"
-                        select="vm.changeSelectedCategory(category)">
-                        <fieldset ng-if="vm.selectedCategory===category">
-                            <jsonforms-inner ng-repeat="child in category.elements"
-                                             ui-schema="child" >
-                            </jsonforms-inner>
-                        </fieldset>
-                    </uib-tab>
-                </uib-tabset>
-            </div>
-        </div>
+    <jsonforms-layout>        
+         <div class="row jsf-categorization">
+              <div class="col-sm-100">
+                   <uib-tabset>
+                        <uib-tab
+                            heading="{{category.label}}"
+                            ng-repeat="category in vm.uiSchema.elements"
+                            select="vm.changeSelectedCategory(category)">
+                            <fieldset ng-if="vm.selectedCategory===category">
+                                <jsonforms-inner ng-repeat="child in category.elements"
+                                                 ui-schema="child" >
+                                </jsonforms-inner>
+                            </fieldset>
+                        </uib-tab>
+                   </uib-tabset>
+               </div>
+         </div>
     </jsonforms-layout>`;
     controller = CategorizationController;
     controllerAs = 'vm';

diff --git a/src/components/renderers/layouts/group/group-directive.ts b/src/components/renderers/layouts/group/group-directive.ts
@@ -6,14 +6,16 @@ import {IUISchemaElement} from '../../../../jsonforms';
 class GroupDirective implements ng.IDirective {
     restrict = 'E';
     template = `
-    <jsonforms-layout class="jsf-group">
-        <fieldset class="row">
-            <legend ng-if="vm.label">{{vm.label}}</legend>
-            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
-                             ui-schema="child" 
-                             class="col-sm-100">                             
-            </jsonforms-inner>
-        </fieldset>
+    <jsonforms-layout>
+        <div class="jsf-group">
+            <fieldset class="row">
+                <legend ng-if="vm.label">{{vm.label}}</legend>
+                <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
+                                 ui-schema="child" 
+                                 class="col-sm-100">                             
+                </jsonforms-inner>
+             </fieldset>
+        </div>
     </jsonforms-layout>`;
     controller = GroupController;
     controllerAs = 'vm';

diff --git a/src/components/renderers/layouts/horizontal/horizontal-directive.ts b/src/components/renderers/layouts/horizontal/horizontal-directive.ts
@@ -7,12 +7,14 @@ import {IUISchemaElement} from '../../../../jsonforms';
 class HorizontalDirective implements ng.IDirective {
     restrict = 'E';
     template = `
-    <jsonforms-layout class="jsf-horizontal-layout">
-        <fieldset class="row">
-            <div ng-repeat="child in vm.uiSchema.elements" class="col-sm-{{vm.childSize}}">
-                <jsonforms-inner ui-schema="child"></jsonforms-inner>
-            </div>
+    <jsonforms-layout>
+        <div class="jsf-horizontal-layout">
+            <fieldset class="row">
+                <div ng-repeat="child in vm.uiSchema.elements" class="col-sm-{{vm.childSize}}">
+                    <jsonforms-inner ui-schema="child"></jsonforms-inner>
+                </div>
         </fieldset>
+        </div>
     </jsonforms-layout>`;
     controller = HorizontalController;
     controllerAs = 'vm';

diff --git a/src/components/renderers/layouts/layout-directive.ts b/src/components/renderers/layouts/layout-directive.ts
@@ -4,7 +4,6 @@ export default angular
     .directive('jsonformsLayout', (): ng.IDirective => {
         return {
             restrict: 'E',
-            replace: true,
             transclude: true,
             template: require('./layout.html')
         };

diff --git a/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts b/src/components/renderers/layouts/masterdetail/masterdetail-directives.ts
@@ -55,7 +55,6 @@ const MasterDetailControlRendererTester: RendererTester = function(element: IUIS
 class MasterDetailCollectionDirective implements ng.IDirective {
 
     restrict = 'E';
-    replace = true;
     scope = {
         properties: '=',
         instance: '=',
@@ -136,7 +135,6 @@ class MasterDetailMember implements angular.IDirective {
     }
 
     restrict = 'E';
-    replace = true;
     scope = {
         childSchema: '=',
         childData: '=',

diff --git a/src/components/renderers/layouts/vertical/vertical-directive.ts b/src/components/renderers/layouts/vertical/vertical-directive.ts
@@ -5,13 +5,15 @@ import {IUISchemaElement} from '../../../../jsonforms';
 
 class VerticalDirective implements ng.IDirective {
     restrict = 'E';
-    template = `<jsonforms-layout class="jsf-vertical-layout">
-        <fieldset class="row">
-            <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
-                             ui-schema="child" 
-                             class="col-sm-100">
-            </jsonforms-inner>
-        </fieldset>
+    template = `<jsonforms-layout>
+        <div class="jsf-vertical-layout">
+            <fieldset class="row">
+                <jsonforms-inner ng-repeat="child in vm.uiSchema.elements" 
+                                 ui-schema="child" 
+                                 class="col-sm-100">
+                </jsonforms-inner>
+            </fieldset>
+        </div>    
     </jsonforms-layout>`;
     controller = VerticalController;
     controllerAs = 'vm';