Skip to content

Json Schema Form java based library allow developers to define schema and form using field annotations

License

Notifications You must be signed in to change notification settings

ahdbk/sf-java-ui

 
 

Repository files navigation

SF JAVA UI

Schema Form Java based library allow developers to define schema and form using field annotations.

Join the chat at https://gitter.im/JsonSchema-JavaUI/sf-java-ui Build Status Quality Gate Technical debt ratio Coverage Status Download

The SF Java UI library is a server side extension for the Json Schema Form library. It make your development easier, you will not care about how to define your schema and your screen form definition. Just annotate your fields, and get your screen.

If you use SF Java UI in your project/company please let us know.

Run the Demo

The attached demo application is a Spring Boot + Angular web application. To run the app please go to the demo directory and run the commands below:

bower install

This will install the basic web dependencies.

mvn spring-boot:run

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:

<dependency>
  <groupId>io.sfjava.ui</groupId>
  <artifactId>sf-java-ui</artifactId>
  <version>RELEASE</version>
</dependency>

Add the oss repository:

The official version Not yet deployed

Create a new Rest Web Service. (example using spring)

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:

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. 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. You can follow the official documentation.

Put the code below into your view.html:

<div ng-controller="FormController">
    <form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>

Add the angular controller below:

angular.module('MyModule', ["schemaForm"]).controller('FormController', 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 to see if someone has already reported the problem.

  • If the issue doesn’t already exist, create a new issue.

  • Please provide as much information as possible with the issue report, we like to know the version of SF Java UI that you are using and the Json Schema Form version 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 for more info.

About

Json Schema Form java based library allow developers to define schema and form using field annotations

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Java 100.0%