SF JAVA UI

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

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.

Documentation

You can find all documentation here, it covers all the different field types and their options.

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 to sonatype.

Please find the required instruction to configure bintray.com repository to your setting.xml

Or you can configure the repository directly in your pom.xml file:

// Your pom file
<dependencies>...</dependencies>

// To be added in the pom file in order to specify the remote repo to download the library 
<repositories>
   <repository>
        <snapshots>
           <enabled>false</enabled>
        </snapshots>
	<id>bintray-jsonschema-javaui-sf-java-ui</id>
	<name>bintray-plugins</name>
	<url>https://dl.bintray.com/jsonschema-javaui/sf-java-ui</url>
    </repository>
</repositories>

Using spring boot

If you a are using spring boot to develop your project, you can add the annotation below to your main spring boot class in order to run the servlet context loader to inialize the library

@ServletComponentScan(basePackages = { "io.asfjava.ui.core" })

You can follow the example below used in the demo application

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;

@SpringBootApplication
/*
 * The annotation below used to scan the servlet context loader added to the sf-java-ui library
 * in order to initialize the library @ server startup
 * 
 * */
@ServletComponentScan(basePackages = { "io.asfjava.ui.core" })
public class DemoApplication {
	public static void main(String[] args) {
		SpringApplication.run(DemoApplication.class, args);
	}
}

Using other java web project

You may add this line of code on your custom server startup listener.

SFJavaUi.initialize();

Let's code

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.