Skip to content

Commit

Permalink
Finish up reformatting live examples for UI and add one for Forms
Browse files Browse the repository at this point in the history
  • Loading branch information
@gashcrumb
gashcrumb committed Aug 15, 2013
1 parent 2733954 commit ab3aa28
Show file tree
Hide file tree
Showing 6 changed files with 180 additions and 108 deletions.
5 changes: 4 additions & 1 deletion hawtio-web/src/main/webapp/app/forms/doc/developer.md
View file
Expand Up @@ -84,4 +84,7 @@ In the aboe the label for **foo.value** would jsut show _value_ rather than _foo

To use a custom control use the **formTemplate** entry on a property to define the AngularJS partial to be used to render the form control. This lets you use any AngularJS directive or widget.

For example if you search for **formTemplate** in the [code generated Camel json schema file](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/camel/js/camelModel.js#L120) you will see how the **description** property uses a _textarea_
For example if you search for **formTemplate** in the [code generated Camel json schema file](https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/camel/js/camelModel.js#L120) you will see how the **description** property uses a _textarea_

## Live example
<div ng-include="'app/forms/html/test.html'"></div>
49 changes: 48 additions & 1 deletion hawtio-web/src/main/webapp/app/forms/html/test.html
View file
@@ -1,5 +1,53 @@
<div ng-controller='Forms.FormTestController'>

<div class="row-fluid">
<h3>Basic form</h3>
<p>Here's a basic form generated from some JSON schema</p>

<p>Here's some example JSON schema definition</p>
<div hawtio-editor="basicFormEx1Schema" mode="javascript"></div>
<button class='btn' ng-click="updateSchema()"><i class="icon-save"></i> Update Form</button>

<p>You can define an entity object to have default values filled in</p>
<div hawtio-editor="basicFormEx1EntityString" mode="javascript"></div>
<button class='btn' ng-click="updateEntity()"><i class="icon-save"></i> Update Form</button>

<p>And here is the code for the form</p>
<div hawtio-editor="basicFormEx1" mode="html"></div>

<p>The resulting form</p>
<div class="directive-example">
<div compile="basicFormEx1"></div>
</div>

<h3>Form related controls</h3>
<p>There's also directives to take care of resetting or submitting a form</p>

<p></p>
<p>Clearing a form is done using the hawtio-reset directive</p>
<div hawtio-editor="hawtioResetEx" mode="html"></div>
<p>Click the button below to clear the above form</p>
<div class="directive-example">
<div compile="hawtioResetEx"></div>
</div>

<p>And to submit a form use hawtio-submit</p>

<div hawtio-editor="hawtioSubmitEx" mode="html"></div>
<div class="directive-example">
<div compile="hawtioSubmitEx"></div>
</div>

<p>Fill in the form and click the submit button above to see what the form produces</p>
<div hawtio-editor="basicFormEx1Result" mode="javascript"></div>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

<!--
<h3>Form Testing</h3>
<div>
Expand All @@ -23,7 +71,6 @@ <h3>Form Testing</h3>
<hr>
<!--
<div>
Form with config object
<div simple-form='config'></div>
Expand Down
118 changes: 80 additions & 38 deletions hawtio-web/src/main/webapp/app/forms/js/test.ts
View file
Expand Up @@ -4,6 +4,17 @@ module Forms {

$scope.editing = false;

$scope.html = "text/html"
$scope.javascript = "javascript"

$scope.basicFormEx1Entity = {
'key': 'Some key',
'value': 'Some value'
};
$scope.basicFormEx1EntityString = angular.toJson($scope.basicFormEx1Entity, true);

$scope.basicFormEx1Result = '';

$scope.toggleEdit = function() {
$scope.editing = !$scope.editing;
};
Expand All @@ -15,44 +26,75 @@ module Forms {
return "edit";
}

$scope.setVMOption = {
properties: {
'key': {
description: 'Argument key',
type: 'java.lang.String'
},
'value': {
description: 'Argument Value',
type: 'java.lang.String'
},
'longArg': {
description: 'Long argument',
type: 'Long',
minimum: '5',
maximum: '10'
},
'intArg': {
description: 'Int argument',
type: 'Integer'
},
'objectArg': {
description: 'some object',
type: 'object'
},
'booleanArg': {
description: 'Some boolean value',
type: 'java.lang.Boolean'
}
// TODO - add more types, above is what I remember from jolokia
},
description: 'Show some stuff in a form',
type: 'java.lang.String',
tabs: {
'Tab One': ['key', 'value'],
'Tab Two': ['*'],
'Tab Three': ['booleanArg']
}
};
$scope.basicFormEx1 = '<div simple-form name="some-form" action="#/forms/test" method="post" data="basicFormEx1SchemaObject" entity="basicFormEx1Entity" onSubmit="callThis()"></div>';

$scope.toObject = (str) => {
return angular.fromJson(str.replace("'", "\""));
}

$scope.fromObject = (str) => {
return angular.toJson($scope[str], true);
}

//TODO - I totally did this backwards :-/
$scope.basicFormEx1Schema = '' +
'{\n' +
' "properties": {\n' +
' "key": {\n' +
' "description": "Argument key",\n' +
' "type": "java.lang.String"\n' +
' },\n' +
' "value": {\n' +
' "description": "Argument Value",\n' +
' "type": "java.lang.String"\n' +
' },\n' +
' "longArg": {\n' +
' "description": "Long argument",\n' +
' "type": "Long",\n' +
' "minimum": "5",\n' +
' "maximum": "10"\n' +
' },\n' +
' "intArg": {\n' +
' "description": "Int argument",\n' +
' "type": "Integer"\n' +
' },\n' +
' "objectArg": {\n' +
' "description": "some object",\n' +
' "type": "object"\n' +
' },\n' +
' "booleanArg": {\n' +
' "description": "Some boolean value",\n' +
' "type": "java.lang.Boolean"\n' +
' }\n' +
' },\n' +
' "description": "Show some stuff in a form",\n' +
' "type": "java.lang.String",\n' +
' "tabs": {\n' +
' "Tab One": ["key", "value"],\n' +
' "Tab Two": ["*"],\n' +
' "Tab Three": ["booleanArg"]\n' +
' }\n' +
'}';

$scope.basicFormEx1SchemaObject = $scope.toObject($scope.basicFormEx1Schema);

$scope.updateSchema = () => {
$scope.basicFormEx1SchemaObject = $scope.toObject($scope.basicFormEx1Schema);
}

$scope.updateEntity = () => {
$scope.basicFormEx1Entity = angular.fromJson($scope.basicFormEx1EntityString);
}

$scope.hawtioResetEx = '<a class="btn" href="" hawtio-reset="some-form"><i class="icon-refresh"></i> Clear</a>';

$scope.hawtioSubmitEx = ' <a class="btn" href="" hawtio-submit="some-form"><i class="icon-save"></i> Save</a>';

$scope.callThis = (json, form) => {
$scope.basicFormEx1Result = angular.toJson(json, true);
notification('success', 'Form "' + form.get(0).name + '" submitted...');
Core.$apply($scope);
}

$scope.config = {
name: 'form-with-config-object',
Expand Down
45 changes: 3 additions & 42 deletions hawtio-web/src/main/webapp/app/ui/doc/developer.md
View file
Expand Up @@ -2,49 +2,10 @@

The **UI** plugin provides a number of [AngularJS](http://angularjs.org/) directives for creating a number of UI widgets. The following examples can be edited and are re-compiled on the fly.

<div ng-include="'app/ui/html/test.html'"></div>
For details on form widgets take a look at the [Form documentation](index.html#/help/forms/developer)

<table class="table">
<tr>
<th>Widget</th>
<th>Example Code</ht>
</tr>
## General UI widgets
<div ng-include="'app/ui/html/test.html'"></div>

<tr>
<td>Colour Picker</td>
<td>
<a href="https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/ui/html/test.html#L33" class="btn">View Code</a>
</td>
</tr>
<tr>
<td>Confirm Dialog</td>
<td>
<a href="https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/ui/html/test.html#L45-45" class="btn">View Code</a>
</td>
</tr>
<tr>
<td>Editor</td>
<td>
<a href="https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/ui/html/test.html#L144" class="btn">View Code</a>
</td>
</tr>
<tr>
<td>File Upload</td>
<td>
<a href="https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/ui/html/test.html#L21" class="btn">View Code</a>
</td>
</tr>
<tr>
<td>Pager</td>
<td>
</td>
</tr>
<tr>
<td>Slide Out</td>
<td>
<a href="https://github.com/hawtio/hawtio/blob/master/hawtio-web/src/main/webapp/app/ui/html/test.html#L45-45" class="btn">View Code</a>
</td>
</tr>
</table>


34 changes: 10 additions & 24 deletions hawtio-web/src/main/webapp/app/ui/html/test.html
View file
Expand Up @@ -4,7 +4,6 @@
<div class="row-fluid">
<h3>File upload</h3>
<p>Use to upload files to the hawtio webapp backend. Files are stored in a temporary directory and managed via the UploadManager JMX MBean</p>
<hr>
<p>Showing files:</p>
<div hawtio-editor="fileUploadEx1" mode="fileUploadExMode"></div>
<div class="directive-example">
Expand Down Expand Up @@ -50,20 +49,14 @@ <h3>Confirmation Dialog</h3>
<h3>Slideout</h3>
<p>Displays a panel that slides out from either the left or right and immediately disappears when closed</p>

<button class="btn" ng-click="showSlideoutLeft = !showSlideoutLeft">Show Slideout Left</button>
<div hawtio-slideout="showSlideoutRight" title="foobar mcgee">
<div class="dialog-body">
<div>
Here is some content or whatever {{transcludedValue}}
</div>
</div>
<div hawtio-editor="sliderEx1" mode="fileUploadExMode"></div>
<div class="directive-example">
<div compile="sliderEx1"></div>
</div>

<button class="btn" ng-click="showSlideoutRight = !showSlideoutRight">Show Slideout Right</button>
<div hawtio-slideout="showSlideoutLeft" direction="left" title="I like pastry">
<div class="dialog-body">
<div hawtio-editor="someText" mode="javascript"></div>
</div>
<div hawtio-editor="sliderEx2" mode="fileUploadExMode"></div>
<div class="directive-example">
<div compile="sliderEx2"></div>
</div>
<hr>
</div>
Expand All @@ -76,17 +69,10 @@ <h3>Pager</h3>

<div class="row-fluid">
<h3>CodeMirror</h3>

Instance 1
<div class="row-fluid">
<div hawtio-editor="someText" mode="mode" dirty="dirty"></div>
<div>Text : {{someText}}</div>
</div>

Instance 2 (readonly)
<div class="row-fluid">
<div hawtio-editor="someText" read-only="true" mode="mode" dirty="dirty"></div>
<div>Text : {{someText}}</div>
<p>A directive that wraps the codeMirror editor.</p>
<div hawtio-editor="editorEx1" mode="fileUploadExMode"></div>
<div class="directive-example">
<div compile="editorEx1"></div>
</div>
</div>

Expand Down
37 changes: 35 additions & 2 deletions hawtio-web/src/main/webapp/app/ui/js/testController.ts
View file
Expand Up @@ -5,8 +5,8 @@ module UI {
$scope.showDeleteOne = new Core.Dialog();
$scope.showDeleteTwo = new Core.Dialog();

$scope.fileUploadEx1 = '<div hawtio-file-upload="files" target="patches"></div>';
$scope.fileUploadEx2 = '<div hawtio-file-upload="files" target="test" show-files="false"></div>';
$scope.fileUploadEx1 = '<div hawtio-file-upload="files" target="test1"></div>';
$scope.fileUploadEx2 = '<div hawtio-file-upload="files" target="test2" show-files="false"></div>';
$scope.fileUploadExMode = 'text/html';

$scope.colorPickerEx = 'My Color ({{myColor}}): <div hawtio-color-picker="myColor"></div>';
Expand Down Expand Up @@ -42,6 +42,39 @@ module UI {
'</div>';


$scope.sliderEx1 = '' +
'<button class="btn" ng-click="showSlideoutRight = !showSlideoutRight">Show Slideout Right</button>\n' +
'<div hawtio-slideout="showSlideoutRight" title="Hey look a slider!">\n' +
' <div class="dialog-body">\n' +
' <div>\n' +
' Here is some content or whatever {{transcludedValue}}\n' +
' </div>\n' +
' </div>\n' +
'</div>';

$scope.sliderEx2 = '' +
'<button class="btn" ng-click="showSlideoutLeft = !showSlideoutLeft">Show Slideout Left</button>\n' +
'<div hawtio-slideout="showSlideoutLeft" direction="left" title="Hey, another slider!">\n' +
' <div class="dialog-body">\n' +
' <div hawtio-editor="someText" mode="javascript"></div>\n' +
' </div>\n' +
'</div>\n';

$scope.editorEx1 = '' +
'Instance 1\n' +
'<div class="row-fluid">\n' +
' <div hawtio-editor="someText" mode="mode" dirty="dirty"></div>\n' +
' <div>Text : {{someText}}</div>\n' +
'</div>\n' +
'\n' +
'Instance 2 (readonly)\n' +
'<div class="row-fluid">\n' +
' <div hawtio-editor="someText" read-only="true" mode="mode" dirty="dirty"></div>\n' +
' <div>Text : {{someText}}</div>\n' +
'</div>';



$scope.transcludedValue = "and this is transcluded";

$scope.onCancelled = (number) => {
Expand Down

0 comments on commit ab3aa28

Please sign in to comment.