From 550699432793c0931231ef7a4123ecceeba81b08 Mon Sep 17 00:00:00 2001 From: jyothi4874 <167799369+jyothi4874@users.noreply.github.com> Date: Tue, 23 Apr 2024 17:32:59 +0530 Subject: [PATCH] Update README.adoc --- README.adoc | 321 +++++++++++++++++++++++++--------------------------- 1 file changed, 156 insertions(+), 165 deletions(-) diff --git a/README.adoc b/README.adoc index 7fc98a7..bcbf870 100644 --- a/README.adoc +++ b/README.adoc @@ -1,169 +1,160 @@ -= HAL-browser - -An API browser for the hal+json media type - -== Example Usage - -Here is an example of a hal+json API using the browser: - -http://haltalk.herokuapp.com/explorer/browser.html[http://haltalk.herokuapp.com/explorer/browser.html] - -== About HAL - -HAL is a format based on json that establishes conventions for -representing links. For example: - -[source,javascript] ----- { - "_links": { - "self": { "href": "/orders" }, - "next": { "href": "/orders?page=2" } + "Dashboard1": { + "window": { + "title": "DTRLM-Dashboard", + "geometry": "1366x768", + "state": "zoomed", + "background": "#eff5f6" + }, + "header": { + "frame": { + "x": 300, + "y": 0, + "width": 1070, + "height": 60, + "background": "#009df4" + }, + "logout_button": { + "text": "Logout", + "background": "#32cf8e", + "font": { + "family": "", + "size": 13, + "weight": "bold" + }, + "bd": 0, + "fg": "white", + "cursor": "hand2", + "active_background": "#32cf8e", + "position": { + "x": 950, + "y": 15 + } + } + }, + "sidebar": { + "frame": { + "x": 0, + "y": 0, + "width": 300, + "height": 750, + "background": "#ffffff" + }, + "buttons": [ + { + "text": "1. Track Alignment and Geometry", + "background": "#ffffff", + "font": { + "size": 10, + "weight": "bold" + }, + "bd": 0, + "cursor": "hand2", + "position": { + "x": 10, + "y": 189 + } + }, + { + "text": "1.1 Centreline", + "background": "#ffffff", + "font": { + "size": 10, + "weight": "bold" + }, + "bd": 0, + "cursor": "hand2", + "position": { + "x": 50, + "y": 229 + } + } + ] + }, + "body": { + "heading": { + "text": "DTRLM-Centreline", + "font": { + "family": "", + "size": 13, + "weight": "bold" + }, + "fg": "#0064d3", + "background": "#eff5f6", + "position": { + "x": 325, + "y": 70 + } + }, + "body_frame_1": { + "frame": { + "x": 328, + "y": 110, + "width": 1040, + "height": 640, + "background": "#ffffff" + }, + "labels": [ + { + "text": "Track Centreline", + "font": { + "size": 12, + "weight": "bold" + }, + "fg": "#0064d3", + "background": "#eff5f6", + "position": { + "x": 1100, + "y": 100 + } + }, + { + "text": "Track Centreline Information", + "font": { + "size": 10, + "justify": "LEFT", + "wraplength": 250 + }, + "fg": "#000000", + "background": "#eff5f6", + "position": { + "x": 1100, + "y": 130 + } + } + ], + "length_dropdown": { + "label": { + "text": "Length", + "font": { + "size": 10, + "weight": "bold" + }, + "background": "#ffffff", + "position": { + "x": 10, + "y": 10 + } + }, + "options": ["CM", "MM"] + }, + "longitude_dropdown": { + "label": { + "text": "Longitude", + "font": { + "size": 10, + "weight": "bold" + }, + "background": "#ffffff", + "position": { + "x": 10, + "y": 130 + } + }, + "options": ["DD", "DMS", "DMM"] + } + } } + } } ----- - -More detail about HAL can be found at -http://stateless.co/hal_specification.html[http://stateless.co/hal_specification.html]. - -== Customizing the POST form - -By default, the HAL Browser can't assume there is any metadata. When you click on the non-GET request button (to create a new resource), the user must enter the JSON document to submit. If your service includes metadata you can access, it's possible to plugin a custom view that makes use of it. - -. Define your custom view. -+ -Here is an example that leverages Spring Data REST's JSON Schema metadata found at */{entity}/schema*. -+ -[source,javascript] ----- -var CustomPostForm = Backbone.View.extend({ - initialize: function (opts) { - this.href = opts.href.split('{')[0]; - this.vent = opts.vent; - _.bindAll(this, 'createNewResource'); - }, - - events: { - 'submit form': 'createNewResource' - }, - - className: 'modal fade', - - createNewResource: function (e) { - e.preventDefault(); - - var self = this; - - var data = {} - Object.keys(this.schema.properties).forEach(function(property) { - if (!("format" in self.schema.properties[property])) { - data[property] = self.$('input[name=' + property + ']').val(); - } - }); - - var opts = { - url: this.$('.url').val(), - headers: HAL.parseHeaders(this.$('.headers').val()), - method: this.$('.method').val(), - data: JSON.stringify(data) - }; - - var request = HAL.client.request(opts); - request.done(function (response) { - self.vent.trigger('response', {resource: response, jqxhr: jqxhr}); - }).fail(function (response) { - self.vent.trigger('fail-response', {jqxhr: jqxhr}); - }).always(function () { - self.vent.trigger('response-headers', {jqxhr: jqxhr}); - window.location.hash = 'NON-GET:' + opts.url; - }); - - this.$el.modal('hide'); - }, - - render: function (opts) { - var headers = HAL.client.getHeaders(); - var headersString = ''; - - _.each(headers, function (value, name) { - headersString += name + ': ' + value + '\n'; - }); - - var request = HAL.client.request({ - url: this.href + '/schema', - method: 'GET' - }); - - var self = this; - request.done(function (schema) { - self.schema = schema; - self.$el.html(self.template({ - href: self.href, - schema: self.schema, - user_defined_headers: headersString})); - self.$el.modal(); - }); - - return this; - }, - template: _.template($('#dynamic-request-template').html()) -}); ----- -+ -. Register it by assigning to `HAL.customPostForm` -+ -[source,javascript] ----- -HAL.customPostForm = CustomPostForm; ----- -+ -. Load your custom JavaScript component and define your custom HTML template. -+ -[source,html,indent=0] ----- - ----- - -NOTE: To load a custom JavaScript module AND a custom HTML template, you will probably need to create a customized version of `browser.html`. - -NOTE: The HAL Browser uses a global `HAL` object, so there is no need to deal with JavaScript packages. - -== Usage Instructions - -All you should need to do is copy the files into your webroot. -It is OK to put it in a subdirectory; it does not need to be in the root. - -All the JS and CSS dependencies come included in the vendor directory. - -== TODO -* Provide feedback to user when there are issues with response (missing -self link, wrong media type identifier) -* Give 'self' and 'curies' links special treatment \ No newline at end of file