diff --git a/README.md b/README.md index e801c5d..c9b123b 100644 --- a/README.md +++ b/README.md @@ -25,5 +25,142 @@ This will run the application ## Quick start Using SF Java UI is simple. Follow the steps below to get your first screen. +### Backend + +First, add the SF Java UI library to your java web project: + +```xml + + io.sfjava.ui + sf-java-ui + RELEASE + +``` +Create a new Rest Web Service. (example using spring) + +```Java +import com.fasterxml.jackson.databind.JsonMappingException; + +import io.asfjava.ui.core.schema.UiFormSchemaGenerator; +import io.asfjava.ui.dto.UiForm; + +/** + * REST controller for managing Ui. + * The rest controller handle the JsonSchemaForm request. It call the SF JAVA UI library to + * generate the json schema and the form definition + */ +@RestController +@RequestMapping("/api") +public class DemoRestService { + + public DemoRestService() { + } + + @RequestMapping("/ui") + public UiForm renderUI() throws JsonMappingException { + return UiFormSchemaGenerator.get().generate(DemoForm.class); + } +} +``` +Then create the DemoForm class: + +```Java +import java.io.Serializable; + +import io.asfjava.ui.core.form.ComboBox; +import io.asfjava.ui.core.form.TextArea; +import io.asfjava.ui.core.form.TextField; + +/** + * Pojo represent the view to display. It must implement java.io.Serializable. + * We are using SF JAVA UI Annotations to define the different fields layout + */ +public class DemoForm implements Serializable { + + @TextField(title = "First Name", placeHolder = "Your first name", description="This is a description for your first name field") + private String firstName; + + @TextField(title = "Last Name", placeHolder = "Your last name") + private String lastName; + + @ComboBox(title = "Gender", values = { "Male", "Female" }) + private String gender; + + @TextArea(title = "Address", placeHolder = "Fill your address please", description = "This is a textarea") + private String address; + + public String getFirstName() { + return firstName; + } + + public void setFirstName(String firstName) { + this.firstName = firstName; + } + + public String getLastName() { + return lastName; + } + + public void setLastName(String lastName) { + this.lastName = lastName; + } + + public String getGender() { + return gender; + } + + public String getAddress() { + return address; + } + + public void setAddress(String address) { + this.address = address; + } + +} +``` +### Front + +First, add to your java web project the required client side library in order to use [json schema form](https://github.com/json-schema-form). +After, inject the json schema form into your html page and add your Js controller to call the backend. + +For the example below we will use [Angular schema form](https://github.com/json-schema-form/angular-schema-form). You can follow the official [documentation](https://github.com/json-schema-form/angular-schema-form#documentation). + +Put the code below into your view.html: + +```HTML +
+
+
+``` +Add the angular controller below: + +```javascript +angular.module('demoApp', ["schemaForm"]).controller('DemoAppController', function($scope,$http) { + $http.get('/api/ui').then(successCallback, errorCallback); + function successCallback(response){ + $scope.schema = response.data.schema; + $scope.form = response.data.form; + $scope.model = {}; + } + function errorCallback(error){ + //error code + } +}); +``` + +Run your app and go to your screen. Enjoy :) + +## Reporting Issue +SF Java UI uses GitHub’s integrated issue tracking system to record bugs and feature requests. If you want to raise an issue, please follow the recommendations below: + + - Before you log a bug, please [search the issue tracker](https://github.com/JsonSchema-JavaUI/sf-java-ui/search?type=Issues) to see if someone has already reported the problem. + + - If the issue doesn’t already exist, [create a new issue](https://github.com/JsonSchema-JavaUI/sf-java-ui/issues/new). + + - Please provide as much information as possible with the issue report, we like to know the version of Spring Boot that you are using, as well as your Operating System and JVM version. + + - If you need to paste code, or include a stack trace use Markdown \``` escapes before and after your text. + ## Contributing Contributions are welcome! Please see [Contributing.md](CONTRIBUTING.md) for more info.